Merge pull request #364 from primer/release-9.6.0

Release 9.6.0

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .sass-cache
 node_modules
+**/package-lock.json
 *.log
 build
 _site

.storybook/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "env",
+    "react",
+    "minify"
+  ]
+}

.storybook/Octicon.js

@@ -0,0 +1,27 @@
+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)
+
+Object.keys(octicons).forEach(name => {
+  story.add(name, () => {
+    return (
+      <div>
+        <Octicon name={name} height="64" />
+        <Octicon name={name} height="32" />
+        <Octicon name={name} height="16" />
+      </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,44 @@
+const path = require("path");
+
+const modulesPath = path.resolve(__dirname, "../modules")
+
+module.exports = (config, env) => {
+
+  if (env === 'PRODUCTION') {
+    config.plugins = config.plugins
+      .filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
+  }
+
+  config.module.rules.push(
+    {
+      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,
+    }
+  )
+
+  return config
+}

.travis.yml

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

CHANGELOG.md

@@ -1,3 +1,14 @@
+# 9.6.0
+
+### Added
+- Storybook. We've added a storybook prototyping environment for testing components in seclusion. To start the server run `npm start`
+- Adding yeoman generator for creating a primer module. `generator-primer-module`
+- Importing `stylelint-config-primer` from https://github.com/primer/stylelint-config-primer/ into monorepo.
+- Importing `stylelint-selector-no-utility` from https://github.com/primer/stylelint-selector-no-utility into monorepo.
+
+### Changes
+- Deployment and publishing scripts refinements.
+
 # 9.5.0
 
 ### Added

lerna.json

@@ -1,7 +1,8 @@
 {
-  "lerna": "2.0.0-rc.5",
+  "lerna": "2.4.0",
   "packages": [
-    "modules/*"
+    "modules/*",
+    "tools/*"
   ],
   "version": "independent"
 }

modules/primer-alerts/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 GitHub Inc.
+Copyright (c) 2017 GitHub Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

modules/primer-alerts/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0",
+  "version": "1.5.1",
   "name": "primer-alerts",
   "description": "Flash messages, or alerts, inform users of successful or pending actions.",
   "homepage": "http://primercss.io/",
@@ -21,13 +21,13 @@
     "url": "https://github.com/primer/primer-css/issues"
   },
   "scripts": {
-    "build": "primer-module-build index.scss",
+    "build": "../../script/npm-run primer-module-build index.scss",
     "prepare": "npm run build",
-    "lint": "stylelint **/*.scss -s scss",
-    "test": "npm-run-all -s build lint"
+    "lint": "../../script/lint-scss",
+    "test": "../../script/npm-run-all build lint"
   },
   "dependencies": {
-    "primer-support": "4.4.0"
+    "primer-support": "4.4.1"
   },
   "keywords": [
     "alerts",

modules/primer-alerts/stories/Flash.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Flash alerts', module)
+.add('flash', () => (
+  <div className='p-4'>
+    <div className='flash'>
+      flash
+    </div>
+  </div>
+))
+.add('flash-warn', () => (
+  <div className='p-4'>
+    <div className='flash flash-warn'>
+      flash-warn
+    </div>
+  </div>
+))
+.add('flash-error', () => (
+  <div className='p-4'>
+    <div className='flash flash-error'>
+      flash-error
+    </div>
+  </div>
+))
+.add('flash-success', () => (
+  <div className='p-4'>
+    <div className='flash flash-success'>
+      flash-success
+    </div>
+  </div>
+))
+.add('flash with action button', () => (
+  <div className='p-4'>
+    <div className="flash">
+      <button type="submit" className="btn btn-sm primary flash-action">Complete action</button>
+      Flash message with action here.
+    </div>
+  </div>
+))
+.add('flash-full', () => (
+  <div className='p-4'>
+    <div className="container-lg">
+      <div className="flash flash-full">
+        Full width flash message.
+      </div>
+    </div>
+  </div>
+))

modules/primer-avatars/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 GitHub Inc.
+Copyright (c) 2017 GitHub Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

modules/primer-avatars/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.0",
+  "version": "1.4.1",
   "name": "primer-avatars",
   "description": "Basic styles for user profile avatars.",
   "homepage": "http://primercss.io/",
@@ -21,13 +21,13 @@
     "url": "https://github.com/primer/primer-css/issues"
   },
   "scripts": {
-    "build": "primer-module-build index.scss",
+    "build": "../../script/npm-run primer-module-build index.scss",
     "prepare": "npm run build",
-    "lint": "stylelint **/*.scss -s scss",
-    "test": "npm-run-all -s build lint"
+    "lint": "../../script/lint-scss",
+    "test": "../../script/npm-run-all build lint"
   },
   "dependencies": {
-    "primer-support": "4.4.0"
+    "primer-support": "4.4.1"
   },
   "keywords": [
     "avatars",

modules/primer-avatars/stories.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Avatars', module)
+.add('avatar', () => (
+  <img className='avatar' alt='Uncle Cat' width='72' height='72' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+))
+.add('avatar-small', () => (
+  <img className='avatar avatar-small' width='32' height='32' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+))
+.add('avatar-parent-child', () => (
+  <div>
+    <div className='avatar-parent-child float-left'>
+      <img className='avatar'width='48' height='48' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+      <img className='avatar avatar-child' alt='Child cat' width='20' height='20' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+    </div>
+  </div>
+))
+.add('avatar-stack', () => (
+  <div>
+    <div className='avatar-stack'>
+      <img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+      <img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+      <img className='avatar' alt='Uncle Cat' width='39' height='39' src='https://user-images.githubusercontent.com/334891/29999089-2837c968-9009-11e7-92c1-6a7540a594d5.png'/>
+    </div>
+  </div>
+
+))
+.add('CircleBadge--small', () => (
+  <div>
+    <a className='CircleBadge CircleBadge--small' href='#url' title='Travis CI'>
+      <img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
+    </a>
+  </div>
+))
+.add('CircleBadge--medium', () => (
+  <div>
+    <a className='CircleBadge CircleBadge--medium' href='#url' title='Travis CI'>
+      <img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
+    </a>
+  </div>
+))
+.add('CircleBadge--large', () => (
+  <div>
+    <a className='CircleBadge CircleBadge--large' href='#url' title='Travis CI'>
+      <img src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png' className='CircleBadge-icon'/>
+    </a>
+  </div>
+))
+.add('DashedConnection', () => (
+  <div className='DashedConnection'>
+    <ul className='d-flex list-style-none flex-justify-between' aria-label='A sample GitHub workflow'>
+      <li className='CircleBadge CircleBadge--small' aria-label='GitHub'>
+        <img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
+      </li>
+      <li className='CircleBadge CircleBadge--small' aria-label='Slack'>
+        <img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
+      </li>
+      <li className='CircleBadge CircleBadge--small' aria-label='Travis CI'>
+        <img width='32' src='https://user-images.githubusercontent.com/334891/30004619-adc8ca86-90a0-11e7-8ccc-2322261d2ab1.png'/>
+      </li>
+    </ul>
+  </div>
+))