Merge pull request #253 from primer/fix-the-things

Fix the things

contributing.md

@@ -7,7 +7,8 @@
 4. [Component patterns](#component-patterns)
     * [Components with only system props](#components-with-only-system-props)
     * [Primer CSS components](#primer-css-components)
-5. [Glossary](#glossary)
+5. [Deployment](#deployment)
+6. [Glossary](#glossary)
 
 ## Code Style
 
@@ -169,6 +170,26 @@ In this case, you will need to deal explicitly with two props passed down from [
   * `className`: You _must_ render this prop, otherwise **your component will not be styled.**
   * `is`: This is what allows your component to render with arbitrary elements, and even other components. If you don't respect this prop, you should `delete Component.propTypes.is` to signal that it's not available.
 
+## Deployment
+We deploy the Primer Components site using [Now]. Install the Now CLI and log in with:
+
+```sh
+npm i -g now
+now login
+```
+
+Once you're logged in, sync your local git repo with the `master` branch and run:
+
+```sh
+script/deploy
+```
+
+This will create a new deployment and alias it to its production URL, [primer-react.now.sh](https://primer-react.now.sh).
+
+### Path aliasing
+This site is served as a subdirectory of [primer.style] using a [path alias](https://zeit.co/docs/features/path-aliases) configured in that repo's [`rules.json`](https://github.com/primer/primer.style/tree/master/rules.json). If you change the production deployment URL for this app, you will also need to change it there and re-deploy that app; otherwise, Now will automatically route requests from [primer.style/components](https://primer.style/components/) to the new deployment whenever you deploy this one to `primer-react.now.sh`.
+
+
 ## Glossary
 
 ### System props
@@ -197,3 +218,5 @@ SpaceDiv.propTypes = {
 [system-components]: https://jxnblk.com/styled-system/system-components
 [table]: https://jxnblk.com/styled-system/table
 [npx]: https://www.npmjs.com/package/npx
+[Now]: https://zeit.co/now
+[primer.style]: https://primer.style

now.json

@@ -1,5 +1,4 @@
 {
-  "alias": "primer-react.now.sh",
   "files": [
     "next.config.js",
     "pages",

package.json

@@ -34,9 +34,8 @@
   "dependencies": {
     "@githubprimer/octicons-react": "8.0.0",
     "classnames": "^2.2.5",
-    "clean-tag": "2.0.0",
     "d3-shape": "^1.2.0",
-    "emotion": "9.2.6",
+    "emotion": "9.2.8",
     "emotion-theming": "9.2.6",
     "primer-colors": "1.0.1",
     "primer-typography": "1.0.1",
@@ -45,7 +44,7 @@
     "react-emotion": "9.2.6",
     "styled-system": "2.3.6",
     "system-classnames": "^1.0.0-3",
-    "system-components": "3.0.0"
+    "system-components": "2.2.3"
   },
   "devDependencies": {
     "@compositor/kit": "^1.0.43",
@@ -56,8 +55,8 @@
     "@zeit/next-sass": "0.2.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-plugin-add-react-displayname": "0.0.5",
-    "enzyme": "3.3.0",
-    "enzyme-adapter-react-16": "1.1.1",
+    "enzyme": "3.5.1",
+    "enzyme-adapter-react-16": "1.5.0",
     "eslint": "4.19.1",
     "eslint-plugin-github": "1.0.0",
     "eslint-plugin-jest": "21.15.1",
@@ -68,7 +67,7 @@
     "jest": "23.5.0",
     "jest-emotion": "9.2.7",
     "mdx-docs": "1.0.0-8",
-    "next": "6.1.1",
+    "next": "6.1.2",
     "next-compose-plugins": "2.1.1",
     "primer-buttons": "2.6.0",
     "primer-forms": "2.1.4",

pages/_document.js

@@ -1,19 +1,10 @@
 import React from 'react'
 import Document, {Head, Main, NextScript} from 'next/document'
-import {ServerStyleSheet} from 'styled-components'
 
 export default class MyDocument extends Document {
-  static getInitialProps({renderPage}) {
-    const sheet = new ServerStyleSheet()
-    const page = renderPage(App => props => sheet.collectStyles(<App {...props} />))
-    const styles = sheet.getStyleElement()
-    return {...page, styles}
-  }
-
   render() {
     const {
-      styles,
-      // this comes from the app.setAssetPrefix() call in server.js
+      // the assetPrefix is set in next.config.js
       __NEXT_DATA__: {assetPrefix = ''}
     } = this.props
 
@@ -29,10 +20,8 @@ export default class MyDocument extends Document {
           {/* See: https://github.com/zeit/next-plugins/tree/master/packages/next-sass#usage */}
           <link rel="stylesheet" href={asset('/_next/static/style.css')} />
           <meta name="viewport" content="width=device-width,initial-scale=1" />
-          <meta name="generator" content="Compositor X0" />
           <meta name="og:title" content="Primer React" />
           <meta name="description" content="Primer components built with React.js." />
-          {styles}
         </Head>
         <body>
           <Main />

script/deploy

@@ -0,0 +1,6 @@
+#!/bin/bash
+set -e
+deployment="${1:-primer-react.now.sh}"
+now
+now alias $deployment
+now scale $deployment 1

src/__tests__/__snapshots__/CircleBadge.js.snap

@@ -4,7 +4,6 @@ exports[`CircleBadge respects "is" prop 1`] = `
 <a
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -21,6 +20,7 @@ exports[`CircleBadge respects "is" prop 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-0 CircleBadge"

src/__tests__/__snapshots__/Dropdown.js.snap

@@ -31,7 +31,6 @@ exports[`Dropdown matches the snapshots 1`] = `
 <div
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -48,14 +47,14 @@ exports[`Dropdown matches the snapshots 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-1 BtnGroup"
 >
   <details
     blacklist={
       Array [
-        "css",
         "color",
         "bg",
         "m",
@@ -72,6 +71,7 @@ exports[`Dropdown matches the snapshots 1`] = `
         "pl",
         "px",
         "py",
+        "css",
       ]
     }
     className="details-reset BtnGroup-form emotion-3"
@@ -80,7 +80,6 @@ exports[`Dropdown matches the snapshots 1`] = `
     <summary
       blacklist={
         Array [
-          "css",
           "color",
           "bg",
           "m",
@@ -97,6 +96,7 @@ exports[`Dropdown matches the snapshots 1`] = `
           "pl",
           "px",
           "py",
+          "css",
         ]
       }
       className="emotion-1 btn BtnGroup-item"
@@ -193,7 +193,6 @@ exports[`Dropdown matches the snapshots 2`] = `
 <div
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -210,14 +209,14 @@ exports[`Dropdown matches the snapshots 2`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-1 BtnGroup"
 >
   <details
     blacklist={
       Array [
-        "css",
         "color",
         "bg",
         "m",
@@ -234,6 +233,7 @@ exports[`Dropdown matches the snapshots 2`] = `
         "pl",
         "px",
         "py",
+        "css",
       ]
     }
     className="details-reset BtnGroup-form emotion-3"
@@ -242,7 +242,6 @@ exports[`Dropdown matches the snapshots 2`] = `
     <summary
       blacklist={
         Array [
-          "css",
           "color",
           "bg",
           "m",
@@ -259,6 +258,7 @@ exports[`Dropdown matches the snapshots 2`] = `
           "pl",
           "px",
           "py",
+          "css",
         ]
       }
       className="emotion-1 btn BtnGroup-item"

src/__tests__/__snapshots__/FilterListItem.js.snap

@@ -6,7 +6,6 @@ exports[`FilterListItem renders the given "is" prop 1`] = `
 <b
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -23,6 +22,7 @@ exports[`FilterListItem renders the given "is" prop 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="filter-item emotion-0"
@@ -33,7 +33,6 @@ exports[`FilterListItem respects the "selected" prop 1`] = `
 <a
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -50,6 +49,7 @@ exports[`FilterListItem respects the "selected" prop 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="filter-item selected emotion-0"

src/__tests__/__snapshots__/Link.js.snap

@@ -4,7 +4,6 @@ exports[`Link passes href down to link element 1`] = `
 <a
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -21,6 +20,7 @@ exports[`Link passes href down to link element 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-0 text-blue"
@@ -32,7 +32,6 @@ exports[`Link renders without any props 1`] = `
 <a
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -49,6 +48,7 @@ exports[`Link renders without any props 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-0 text-blue"

src/__tests__/__snapshots__/UnderlineNavLink.js.snap

@@ -4,7 +4,6 @@ exports[`UnderlineNavLink renders the given "is" prop 1`] = `
 <b
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -21,6 +20,7 @@ exports[`UnderlineNavLink renders the given "is" prop 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="UnderlineNav-item no-underline emotion-0"
@@ -31,7 +31,6 @@ exports[`UnderlineNavLink respects the "selected" prop 1`] = `
 <a
   blacklist={
     Array [
-      "css",
       "color",
       "bg",
       "m",
@@ -48,6 +47,7 @@ exports[`UnderlineNavLink respects the "selected" prop 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="UnderlineNav-item no-underline selected emotion-0"

src/__tests__/__snapshots__/system-props.js.snap

@@ -9,8 +9,8 @@ exports[`system props withSystemProps() applies multiple theme values 1`] = `
 <b
   blacklist={
     Array [
-      "css",
       "fontFamily",
+      "font",
       "m",
       "mt",
       "mr",
@@ -25,6 +25,7 @@ exports[`system props withSystemProps() applies multiple theme values 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-0"
@@ -41,7 +42,6 @@ exports[`system props withSystemProps() applies one theme value 1`] = `
 <b
   blacklist={
     Array [
-      "css",
       "m",
       "mt",
       "mr",
@@ -56,6 +56,7 @@ exports[`system props withSystemProps() applies one theme value 1`] = `
       "pl",
       "px",
       "py",
+      "css",
     ]
   }
   className="emotion-0"

src/system-props.js

@@ -107,6 +107,7 @@ export function withSystemProps(Component, props = COMMON) {
 
   // Set what system props we use on this component
   Wrapped.systemProps = props
+  Wrapped.systemComponent = true
 
   // Copy over non-system keys from components
   // eg. Tooltip.js => Tooltip.directions Tooltip.alignments

src/utils/test-matchers.js

@@ -44,7 +44,8 @@ expect.extend({
   toImplementSystemProps(Component, propNames) {
     const propKeys = new Set(Object.keys(Component.propTypes))
     const expectedPropKeys = propNames.reduce((list, name) => {
-      const fn = systemProps[name]
+      const fn = typeof name === 'function' ? name : systemProps[name]
+      if (!fn) throw new Error(`"${name}" is not a system prop!!`)
       return list.concat(Object.keys(fn.propTypes))
     }, [])
     const missing = expectedPropKeys.filter(key => !propKeys.has(key)).filter(key => !ALIAS_PROP_TYPES.includes(key))