Merge pull request #710 from primer/release-12.1.1

Release Tracking 12.1.1

.gitignore

@@ -4,7 +4,7 @@
 .changelog
 .next/
 .sass-cache
+.storybuild/
 _site
-build/
 dist/
 node_modules/

.storybook/.eslintrc.json

@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "plugin:github/react"
+  ],
+  "rules": {
+    "import/no-namespace": 0
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.storybook/addons.js

@@ -1 +1 @@
-import '@storybook/addon-options/register'
+import '@storybook/addon-viewport/register'

.storybook/config.js

@@ -1,29 +1,46 @@
 import React from 'react'
-import { configure, addDecorator } from '@storybook/react'
-import { setOptions } from '@storybook/addon-options'
-import '../modules/primer/index.scss'
-import { version } from '../modules/primer/package.json'
+import {configure, addParameters, addDecorator} from '@storybook/react'
+import {name, homepage, version} from '../package.json'
+import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport'
 
-setOptions({
-  name: `Primer v${version}`,
-  url: 'http://primer.github.io/',
-  showDownPanel: false,
-})
+// this enables HMR for the SCSS source files
+import '../src/index.scss'
 
-addDecorator(story => (
-  <div className='p-4'>
-    {story()}
-  </div>
-))
+// wrap every view in 4x padding
+addDecorator(story => <div className="p-4">{story()}</div>)
 
-const contexts = [
-  require.context('../modules', true, /stories.*\.js$/),
-]
+addParameters({
+  options: {
+    brandTitle: `${name}@${version}`,
+    brandUrl: homepage,
+    showAddonsPanel: false
+  },
+  viewport: {
+    viewports: {
+      sm: {
+        name: 'Small ($width-sm)',
+        styles: {width: '544px', height: 'auto'}
+      },
+      md: {
+        name: 'Medium ($width-md)',
+        styles: {width: '768px', height: 'auto'}
+      },
+      lg: {
+        name: 'Large ($width-lg)',
+        styles: {width: '1012px', height: 'auto'}
+      },
+      xl: {
+        name: 'XL ($width-xl)',
+        styles: {width: '1280px', height: 'auto'}
+      },
+      ...INITIAL_VIEWPORTS
+    }
+  }
+})
 
 configure(() => {
-  contexts.forEach(context => {
-    context.keys()
-      .filter(key => !key.includes('node_modules'))
-      .forEach(context)
-  })
+  const loadMarkdown = require.context('../pages/css', true, /\.md$/)
+  for (const path of loadMarkdown.keys()) {
+    loadMarkdown(path)
+  }
 }, module)

.storybook/preview-head.html

@@ -1,2 +1,2 @@
-<link rel="stylesheet" href="https://unpkg.com/octicons@7.0.1/build/build.css">
+<link rel="stylesheet" href="https://unpkg.com/octicons@8.5.0/build/build.css">
 <script src="https://github.com/site/assets/styleguide.js" async></script>

.storybook/story-loader.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-console */
+const {basename, dirname, join} = require('path')
+const parseFromString = require('code-blocks/lib/fromString')
+
+module.exports = function storyLoader(markdown) {
+  // resourcePath is the full path ("/Users/probot/primer/css/...") to the file being parsed
+  // rootContext is really just dirname(resourcePath)
+  const {resourcePath = '', rootContext} = this
+
+  // the sourcePath option provides a way to collapse the
+  // navigation hierarchy by trimming even more of the
+  // resourcePath's prefix; if it's not provided, use the
+  // rootContext
+  const {sourcePath = rootContext} = this.query || {}
+
+  // strip the sourcePath from the beginning of the resourcePath
+  const file = resourcePath.replace(`${sourcePath}/`, '')
+  const path = join(dirname(file), basename(file, '.md'))
+
+  const stories = storiesFromMarkdown(markdown, file)
+  if (stories.length) {
+    console.warn(`${stories.length} stories found in ${file}!`)
+    return `
+const {storiesOf} = require('@storybook/react')
+const htmlToReact = require('html-to-react')
+
+const chapter = storiesOf(${JSON.stringify(path)}, module)
+const stories = ${JSON.stringify(stories)}
+
+const htmlParser = new htmlToReact.Parser()
+for (const {title, value} of stories) {
+  chapter.add(title, () => htmlParser.parse(value))
+}
+`
+  } else {
+    return `module.exports = {markdown: ${JSON.stringify(markdown)}}`
+  }
+}
+
+function storiesFromMarkdown(markdown, file) {
+  const path = file.replace(/^\.\//, '')
+  return parseFromString(markdown, path).filter(block => {
+    // yes: ```html
+    // no:  ```html dead
+    // no:  ```html inert
+    return block.lang === 'html' && !block.info.dead && !block.info.inert
+  })
+}

.storybook/webpack.config.js

@@ -1,27 +1,27 @@
-const path = require('path');
+const {resolve} = require('path')
+const pagesPath = resolve(__dirname, '../pages/css')
 
-const modulesPath = path.resolve(__dirname, '../modules')
+module.exports = ({config}) => {
+  const babel = config.module.rules[0].use[0]
 
-module.exports = (config, env) => {
-
-  if (env === 'PRODUCTION') {
-    config.plugins = config.plugins
-      .filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
-  }
-
-  const rules = config.module.rules
-
-  rules.forEach((rule, index) => {
-    if ('README.md'.match(rule.test)) {
-      // console.warn('replacing MD rule:', rule)
-      rules.splice(index, 1, {
-        test: /\.md$/,
-        loader: 'raw-loader',
-      })
-    }
+  config.module.rules = config.module.rules.filter(rule => {
+    return !rule.test.test('test.md')
   })
 
-  rules.push(
+  config.module.rules.push(
+    {
+      test: /\.md$/,
+      include: pagesPath,
+      loaders: [
+        babel,
+        {
+          loader: require.resolve('./story-loader'),
+          options: {
+            sourcePath: pagesPath
+          }
+        }
+      ]
+    },
     {
       test: /\.scss$/,
       loaders: [
@@ -31,20 +31,11 @@ module.exports = (config, env) => {
           loader: 'postcss-loader',
           options: {
             config: {
-              path: require.resolve('./postcss.config.js'),
-            },
-          },
-        },
-        {
-          loader: 'sass-loader',
-          options: {
-            includePaths: [
-              modulesPath,
-            ],
+              path: require.resolve('../postcss.config.js')
+            }
           }
-        },
-      ],
-      include: modulesPath,
+        }
+      ]
     }
   )
 

DEVELOP.md

@@ -96,23 +96,12 @@ Our Storybook setup allows you to view every HTML code block in Primer CSS's Mar
 npm run start-storybook
 ```
 
-Then visit http://localhost:8000 to test your work.
+This should open up the site in your browser (if not, navigate to `http://localhost:8001`).
 
 ### Code blocks
 All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and listed under the relevant module's name in the left-hand nav. File changes should trigger a live reload automatically (after a brief delay).
 
-If the bundle you're working on has a `stories.js`, it probably includes a snippet like this:
-
-```js
-const stories = storiesOf('Module name', module)
-
-storiesFromMarkdown(require.context('.', true, /\.md$/))
-  .forEach(({title, story}) => {
-    stories.add(title, story)
-  })
-```
-
-This is how we find all of the Markdown files in the bundle directory and generate stories from their code blocks. Storybook sections are labeled by the first argument to `storiesOf()` (in the above example, "Module name"), and individual stories get their titles from either the previous Markdown heading or the `title` attribute in the fenced code block. See the [`code-blocks` docs](https://npmjs.com/package/code-blocks) and the [`storiesFromMarkdown()` source](./.storybook/lib/storiesFromMarkdown.js) for more info.
+Note: At this time, we do not load any stories from `src/**/stories.js`.
 
 ## Scripts
 Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS, notably:
@@ -121,7 +110,7 @@ Our [`package.json`](package.json) houses a collection of [run-scripts] that we
 * `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
 * `lint` lints all of our SCSS source files.
 * `lint-js` lints the docs site and supporting scripts.
-* `now-build` and `now-start` are run on [Now] to build and start the docs site server.
+* `now-build` and `now-start` are run on [Now] to build and start the docs site server. `now-test` runs them both in order.
 * `sync` copies Markdown docs from `src/` to `pages/css/` and preps them for inclusion in the docs site.
 * `test-urls` compares a (pre-generated) list of paths from the [Primer Style Guide](https://styleguide.github.com/primer/) to files in `pages/css`, and lets us know if we've inadvertently deleted or renamed anything.
 * `test-migrate` tests the [`primer-migrate`](MIGRATING.md#primer-migrate) command line utility.

docs/CodeExample.js

@@ -8,7 +8,7 @@ import Frame from './Frame'
 
 import 'prism-github/prism-github.scss'
 
-const LANG_PATTERN = /\blanguage-\.?(jsx?|html)\b/
+const LANG_PATTERN = /\blanguage-\.?(jsx|html)\b/
 
 const converter = new HTMLtoJSX({
   indent: '  ',
@@ -23,9 +23,9 @@ const languageTransforms = {
 }
 
 export default function CodeExample(props) {
-  const {children, dangerouslySetInnerHTML, dead, source, ...rest} = props
+  const {children, dangerouslySetInnerHTML, inert, source, ...rest} = props
   const lang = getLanguage(props.className)
-  if (lang && !dead) {
+  if (lang && !inert) {
     const liveProps = {
       code: source,
       scope: {Octicon, getIconByName},