lerna: split up bulk of packages

packages/roleypoly-ui/kit/__test__/__snapshots__/media.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MediaQuery outputs media queries 1`] = `
+"@media screen and (min-width: 0px) {
+font-size: 0.5em;
+};
+@media screen and (min-width: 544px) {
+font-size: 1em;
+};
+@media screen and (min-width: 768px) {
+font-size: 1.5em;
+};
+@media screen and (min-width: 1012px) {
+font-size: 2em;
+};
+@media screen and (min-width: 1280px) {
+font-size: 2.5em;
+};"
+`;

packages/roleypoly-ui/kit/__test__/media.test.js

@@ -0,0 +1,16 @@
+/* eslint-env jest */
+import MediaQuery from '../media'
+
+describe('MediaQuery', () => {
+  it('outputs media queries', () => {
+    const mq = MediaQuery({
+      xs: 'font-size: 0.5em;',
+      sm: 'font-size: 1em;',
+      md: 'font-size: 1.5em;',
+      lg: 'font-size: 2em;',
+      xl: 'font-size: 2.5em;'
+    })
+
+    expect(mq).toMatchSnapshot()
+  })
+})

packages/roleypoly-ui/kit/debug-breakpoints.js

@@ -0,0 +1,31 @@
+// @flow
+import * as React from 'react'
+import styled from 'styled-components'
+import MediaQuery, { breakpoints } from './media'
+
+const BreakpointDebugFloat = styled.div`
+  position: absolute;
+  bottom: 0em;
+  left: 0;
+  pointer-events: none;
+  height: 1.4em;
+  opacity: 0.4;
+  font-family: monospace;
+`
+
+const Breakpoint = styled.div`
+  padding: 0.1em;
+  display: none;
+  width: 1.5em;
+  text-align: center;
+  background-color: hsl(${(props: any) => props.hue}, 50%, 50%);
+  ${(props: any) => MediaQuery({ [props.bp]: `display: inline-block` })}
+`
+
+const DebugFloater = () => {
+  return <BreakpointDebugFloat>
+    { Object.keys(breakpoints).map((x, i, a) => <Breakpoint key={x} bp={x} hue={(360 / a.length) * i}>{x}</Breakpoint>) }
+  </BreakpointDebugFloat>
+}
+
+export default DebugFloater

packages/roleypoly-ui/kit/media.js

@@ -0,0 +1,74 @@
+// @flow
+import styled from 'styled-components'
+
+export type MediaQueryConfig = $Shape<{
+  xs: string,
+  sm: string,
+  md: string,
+  lg: string,
+  xl: string
+}>
+
+export const breakpoints = {
+  xs: 0,
+  sm: 544,
+  md: 768,
+  lg: 1012,
+  xl: 1280
+}
+
+const MediaQuery = (mq: MediaQueryConfig) => {
+  const out = []
+
+  for (const size in mq) {
+    if (breakpoints[size] == null) {
+      continue
+    }
+
+    const inner = mq[size]
+
+    out.push(`@media screen and (min-width: ${breakpoints[size]}px) {\n${inner}\n};`)
+  }
+
+  return out.join('\n')
+}
+
+export default MediaQuery
+
+export const Hide = {
+  XS: styled.div`
+    display: none;
+    ${() => MediaQuery({ sm: `display: block` })}
+  `,
+  SM: styled.div`
+    display: none;
+    ${() => MediaQuery({ md: `display: block` })}
+  `,
+  MD: styled.div`
+    display: none;
+    ${() => MediaQuery({ lg: `display: block` })}
+  `,
+  LG: styled.div`
+    display: none;
+    ${() => MediaQuery({ xl: `display: block` })}
+  `
+}
+
+export const Show = {
+  XS: styled.div`
+    display: block;
+    ${() => MediaQuery({ sm: `display: none` })}
+  `,
+  SM: styled.div`
+    display: block;
+    ${() => MediaQuery({ md: `display: none` })}
+  `,
+  MD: styled.div`
+    display: block;
+    ${() => MediaQuery({ lg: `display: none` })}
+  `,
+  LG: styled.div`
+    display: block;
+    ${() => MediaQuery({ xl: `display: none` })}
+  `
+}