Merge branch 'dev' into master

Author: shawnbot

.storybook/Octicon.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import {storiesOf} from '@storybook/react'
+import octicons from 'octicons'
+import SVGInline from 'react-svg-inline'
+
+const Octicon = (props) => {
+  const {name} = props
+  if (name in octicons) {
+    return <SVGInline svg={octicons[name].toSVG(props)} />
+  } else {
+    throw new Error(`No such octicon: "${name}"!`)
+  }
+}
+
+const story = storiesOf('Octicons', module)
+const sizes = [64, 32, 16]
+
+Object.keys(octicons).forEach(name => {
+  story.add(name, () => (
+    <div>{sizes.map((size, i) => (
+      <Octicon name={name} width={size} height={size} key={i} />
+    ))}</div>
+  ))
+})

.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-options/register'

.storybook/config.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { configure, addDecorator } from '@storybook/react'
+import { setOptions } from '@storybook/addon-options'
+import '../modules/primer-css/index.scss'
+
+setOptions({
+  name: 'Primer',
+  url: 'http://primercss.io/',
+  showDownPanel: false,
+})
+
+addDecorator(story => (
+  <div className='p-4'>
+    {story()}
+  </div>
+))
+
+const contexts = [
+  require.context('.', true, /\.js$/),
+  require.context('../modules', true, /stories.*\.js$/),
+]
+
+configure(() => {
+  contexts.forEach(context => {
+    context.keys()
+      .filter(key => !key.includes('node_modules'))
+      .forEach(context)
+  })
+}, module)

.storybook/lib/storiesFromMarkdown.js

@@ -0,0 +1,45 @@
+import remark from 'remark'
+import parents from 'unist-util-parents'
+import select from 'unist-util-select'
+import findBefore from 'unist-util-find-before'
+import htmlToReact from 'html-to-react'
+import parsePairs from 'parse-pairs'
+
+const htmlParser = new htmlToReact.Parser()
+
+const nodeToStory = (node, file) => {
+  const html = node.value
+  const element = htmlParser.parse(html)
+  const pairs = node.lang.replace(/^html\s*/, '')
+  const attrs = pairs.length ? parsePairs(pairs) : {}
+  const title = attrs.title || getPreviousHeading(node) ||
+    `story @ ${file}:${node.position.start.line}`
+  return {
+    title,
+    story: () => element,
+    attrs,
+    html,
+    file,
+    node,
+  }
+}
+
+const getPreviousHeading = node => {
+  const heading = findBefore(node.parent, node, 'heading')
+  return (heading && !heading.used)
+    ? (heading.used = true, heading.children.map(c => c.value).join(''))
+    : undefined
+}
+
+export default req => {
+  return req.keys().reduce((stories, file) => {
+    const content = req(file)
+    const ast = parents(remark.parse(content))
+    const path = file.replace(/^\.\//, '')
+    return stories.concat(
+      select(ast, 'code[lang^=html]')
+        .map(node => nodeToStory(node, path))
+        .filter(({attrs}) => attrs.story !== "false")
+    )
+  }, [])
+}

.storybook/postcss.config.js

@@ -0,0 +1,8 @@
+// FIXME this should go away when we merge and release:
+// <https://github.com/primer/primer-module-build/pull/19>
+const plugins = require("primer-module-build/lib/.postcss.json")
+delete plugins.use
+
+module.exports = {
+  plugins,
+}

.storybook/preview-head.html

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

.storybook/webpack.config.js

@@ -0,0 +1,38 @@
+const path = require("path");
+
+const modulesPath = path.resolve(__dirname, "../modules")
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.md$/,
+        use: "raw-loader",
+      },
+      {
+        test: /\.scss$/,
+        loaders: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "postcss-loader",
+            options: {
+              config: {
+                path: require.resolve("./postcss.config.js"),
+              },
+            },
+          },
+          {
+            loader: "sass-loader",
+            options: {
+              includePaths: [
+                modulesPath,
+              ],
+            }
+          },
+        ],
+        include: modulesPath,
+      },
+    ],
+  },
+}

.travis.yml

@@ -9,9 +9,6 @@ env:
     # github
     - secure: "J+1oWjvvXjyrwkY/4IFWKdN/weFmQcPwlRuFG4R0Gb3rYe4nqtC9l68sJvmS8asc8dQMhOhcUZCH6sjvo7l2WD4NuK4umPSbs+rJNUsfbvH4pZjStQIj/3ll1OfQelGDWAYQWhIfciYY4F3Bp0ZWTfKOppLQ2AVIYu1fPVXDdlo="
 
-before_script:
-  - lerna bootstrap
-
 script:
   - npm test
 

modules/generator-primer-module/README.md

@@ -0,0 +1,107 @@
+# Primer CSS Module Generator
+
+[![npm version](http://img.shields.io/npm/v/generator-primer-module.svg)](https://www.npmjs.org/package/generator-primer-module)
+[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css)
+
+Primer is the CSS framework that powers GitHub's front-end design. This is a
+[Yeoman] generator that we use to scaffold new Primer modules.
+
+## Usage
+
+### In the Monorepo
+
+1. `cd` to the top level directory of the `primer-css` repository
+1. Run:
+
+    ```sh
+    npm run new-module
+    ```
+
+    You can also pass the module name as a positional argument like this:
+
+    ```sh
+    npm run new-module -- primer-module-name
+    ```
+
+1. Answer the interactive prompts.
+
+    > If you don't know some of the answers (aside from the module name, which
+    > is required), it's okay to press <kbd>enter</kbd> or <kbd>return</kbd>.
+
+1. If all goes well, the new module will be bootstrapped and ready to use. You
+   should see a directory with this structure:
+
+    ```
+    modules/primer-module-name/
+    ├── LICENSE
+    ├── README.md
+    ├── index.scss
+    ├── lib
+    │   └── module-name.scss
+    └── package.json
+    ```
+
+1. If you have any TODOs left from unanswered prompts, fill them out! You can
+   list them again with:
+
+   ```sh
+   ack TODO modules/primer-module-name
+   ```
+
+   (Note: you can use `grep` if you don't have `ack` installed.)
+
+
+### Standalone installation
+
+This repository is distributed with [npm][npm]. After [installing
+npm][install-npm], you can install `generator-primer-module` with this command.
+
+```sh
+npm install --save generator-primer-module
+```
+
+You'll also need to install the [`yo` CLI](https://github.com/yeoman/yo):
+
+```sh
+npm install -g yo
+```
+
+### Standalone usage
+
+It's possible to use this generator to create "standalone" Primer modules that
+live outside of the Primer CSS monorepo, with the following caveats:
+
+* When prompted to add the new module to existing meta-packages, you will need
+  to un-select them all.
+* You will also need to manually install all of the monorepo's top-level dev
+  dependencies to get tools like `primer-module-build` and `ava`.
+* The `npm test` command will not work, because it references a test spec in
+  the monorepo.
+
+To run the generator, just pass `primer-module` to the `yo` CLI:
+
+```sh
+yo primer-module
+```
+
+Then answer the interactiv prompts. **Note that, unlike most other generators,
+this one creates a new directory with the provided module name in the current
+working directory.**
+
+You can also pass the module name as a positional argument, as in:
+
+```sh
+yo primer-module primer-foo-bar
+```
+
+
+## License
+
+[MIT](./LICENSE) &copy; [GitHub](https://github.com/)
+
+[primer]: https://github.com/primer/primer
+[docs]: http://primercss.io/
+[npm]: https://www.npmjs.com/
+[install-npm]: https://docs.npmjs.com/getting-started/installing-node
+[sass]: http://sass-lang.com/
+[yeoman]: http://yeoman.io