[ui] add media query template literals, convert everything to the superior.

.gitignore

@@ -1,16 +1,11 @@
-
 .env
 *.env
 dist
 /docker-compose.test.yml
-
 node_modules
 .vscode
 .data
-
 yarn-error\.log
 *.log
-
 \.next/
-
 coverage/

package.json

@@ -15,8 +15,7 @@
     "lint:css": "stylelint 'packages/roleypoly-ui/**/*.js'",
     "lint:js": "standard",
     "rpcrepl": "babel-node packages/roleypoly-server/util/rpcrepl.js",
-    "dev:up": "docker-compose up -d",
+    "dev:up": "docker-compose up -d"
-    "precommit": "yarn lint && yarn test"
   },
   "private": true,
   "workspaces": [
@@ -24,8 +23,7 @@
   ],
   "husky": {
     "hooks": {
-      "pre-commit": "yarn lint",
+      "pre-commit": "yarn lint"
-      "pre-push": "yarn lint && yarn test"
     }
   },
   "devDependencies": {

packages/roleypoly-ui/components/demos/typing.js

@@ -1,8 +1,9 @@
+// @flow
 import * as React from 'react'
 import moment from 'moment'
 import Typist from 'react-typist'
 import styled from 'styled-components'
-import MediaQuery from '../../kit/media'
+import { sm } from '../../kit/media'
 import demoRoles from '../../config/demo'
 
 const Outer = styled.div`
@@ -15,7 +16,7 @@ const Outer = styled.div`
 const Chat = styled.div`
   padding: 10px 0;
   font-size: 0.8em;
-  ${() => MediaQuery({ sm: 'font-size: 1em;' })}
+  ${sm`font-size: 1em;`}
 
   & span {
     display: inline-block;
@@ -28,7 +29,7 @@ const TextArea = styled.div`
   border-radius: 5px;
   padding: 10px;
   font-size: 0.8em;
-  ${() => MediaQuery({ sm: 'font-size: 1em;' })}
+  ${sm`font-size: 1em;`}
 
   & .Typist .Cursor {
     display: inline-block;

packages/roleypoly-ui/components/role/role.styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import MediaQuery from '../../kit/media'
+import { md } from '../../kit/media'
 
 export default styled.div`
   border: solid 1px var(--role-color-outline);
@@ -92,20 +92,22 @@ export default styled.div`
     transform: none;
   }
 
-  ${(props: any) => MediaQuery({
+  ${md`
-    md: `
       font-size: 1em;
       text-shadow: none;
       padding-left: 32px;
-      ${(props.active) ? `box-shadow: none;` : ''}
       &::after {
-        ${(props.active) ? `background-color: var(--role-color-base);` : ''}
         display: block;
       }
-
+  `}
+  ${(props: any) => props.active
+    ? md`
+      box-shadow: none;
       &:hover::after {
-        ${(props.active) ? `background-color: var(--role-color-active);` : ''}
+        background-color: var(--role-color-active);
       }
-    `
+      &::after {
-  })}
+        background-color: var(--role-color-base);
+      }`
+    : ''}
 `

packages/roleypoly-ui/components/tooltip.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import MediaQuery from '../kit/media'
+import { md } from '../kit/media'
 
 export default styled.div`
   position: absolute;
@@ -15,7 +15,7 @@ export default styled.div`
   overflow: auto;
   pointer-events: none;
   white-space: normal;
-  ${() => MediaQuery({ md: `
+  ${md`
-    white-space: nowrap;  `
+    white-space: nowrap;
-  })}
+  `}
 `

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

@@ -17,3 +17,21 @@ font-size: 2em;
 font-size: 2.5em;
 };"
 `;
+
+exports[`mediaTemplateLiteral renders how we expect 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

@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import MediaQuery from '../media'
+import MediaQuery, { xs, sm, md, lg, xl } from '../media'
 
 describe('MediaQuery', () => {
   it('outputs media queries', () => {
@@ -14,3 +14,26 @@ describe('MediaQuery', () => {
     expect(mq).toMatchSnapshot()
   })
 })
+
+describe('mediaTemplateLiteral', () => {
+  it('renders how we expect', () => {
+    // this is a weird fixture because of how we render MediaQuery for testing
+    const mq = `${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()
+
+    const mq2 = 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).toEqual(mq2)
+  })
+})

packages/roleypoly-ui/kit/media.js

@@ -17,6 +17,15 @@ export const breakpoints = {
   xl: 1280
 }
 
+const mediaTemplateLiteral = (size: number, ...stuff: any): string =>
+  `@media screen and (min-width: ${size}px) {\n${stuff.join()}\n};`
+
+export const xs = mediaTemplateLiteral.bind(null, breakpoints.xs)
+export const sm = mediaTemplateLiteral.bind(null, breakpoints.sm)
+export const md = mediaTemplateLiteral.bind(null, breakpoints.md)
+export const lg = mediaTemplateLiteral.bind(null, breakpoints.lg)
+export const xl = mediaTemplateLiteral.bind(null, breakpoints.xl)
+
 const MediaQuery = (mq: MediaQueryConfig) => {
   const out = []
 

packages/roleypoly-ui/pages/_error.js

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import MediaQuery from '../kit/media'
+import { md } from '../kit/media'
 
 export const Overlay = styled.div`
   opacity: 0.6;
@@ -23,9 +23,12 @@ const ResponsiveSplitter = styled.div`
   line-height: 1.6;
   font-size: 1.3em;
   flex-direction: column;
-  ${() => MediaQuery({
+  ${md`
-    md: `flex-direction: row; min-height: 100vh; position: relative; top: -50px;`
+    flex-direction: row; 
-  })}
+    min-height: 100vh; 
+    position: relative; 
+    top: -50px;
+  `}
 
   & > div {
     margin: 1rem;
@@ -33,7 +36,7 @@ const ResponsiveSplitter = styled.div`
 
   & section {
     text-align: center;
-    ${() => MediaQuery({ md: `text-align: left;` })}
+    ${md`text-align: left;`}
   }
 `
 
@@ -46,9 +49,7 @@ const Code = styled.h1`
   margin: 0;
   padding: 0;
   font-size: 4em;
-  ${() => MediaQuery({
+  ${md`font-size: 2em;`}
-    md: `font-size: 2em;`
-  })}
 `
 
 export default class CustomErrorPage extends React.Component {

packages/roleypoly-ui/pages/index.js

@@ -6,7 +6,7 @@ import redirect from '../lib/redirect'
 import TypingDemo from '../components/demos/typing'
 import TapDemo from '../components/demos/tap'
 import styled from 'styled-components'
-import MediaQuery from '../kit/media'
+import { md } from '../kit/media'
 
 const HeroBig = styled.h1`
   color: var(--c-7);
@@ -52,7 +52,7 @@ const FooterLink = styled.a`
 const DemoArea = styled.div`
   display: flex;
   flex-direction: column;
-  ${() => MediaQuery({ md: `flex-direction: row;` })}
+  ${md`flex-direction: row;`}
 
   & > div {
     flex: 1;
@@ -66,15 +66,13 @@ const DemoArea = styled.div`
 
 const Wrapper = styled.div`
   flex-wrap: wrap;
-  ${() => MediaQuery({
+  ${md`
-    md: `
+    display: flex;
-      display: flex;
+    justify-content: center;
-      justify-content: center;
+    align-items: center;
-      align-items: center;
+    height: 80vh;
-      height: 80vh;
+    min-height: 500px;
-      min-height: 500px;
+  `}
-    `
-  })}
 `
 
 export default class Home extends React.Component {