(complib) Add dev server for component docs

components/Makefile

@@ -34,7 +34,9 @@ uninstall:
 # development
 #####################################################################
 
-
+.PHONY: dev
+dev:
+	$(env)=development $(bin)/styleguidist server
 
 # checks
 #####################################################################

components/package.json

@@ -53,6 +53,7 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "8.0.3",
     "babel-jest": "^21.2.0",
+    "babel-loader": "^7.1.2",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-flow": "^6.23.0",
@@ -63,12 +64,16 @@
     "flow-typed": "^2.2.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^21.2.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-styleguidist": "^6.1.0",
     "react-test-renderer": "^16.2.0",
     "snazzy": "^7.0.0",
     "standard": "^10.0.3",
     "stylelint": "^8.3.1",
     "stylelint-config-css-modules": "^1.1.0",
-    "stylelint-config-standard": "^18.0.0"
+    "stylelint-config-standard": "^18.0.0",
+    "webpack": "^3.10.0"
   },
   "peerDependencies": {
     "react": "^16.2.0",

components/src/buttons/Button.js

@@ -0,0 +1,40 @@
+// @flow
+import * as React from 'react'
+
+export type ButtonProps = {
+  /** click handler */
+  onClick: (event: SyntheticEvent<>) => void,
+  /** title attribute */
+  title?: string,
+  /** disabled attribute (setting disabled removes onClick) */
+  disabled?: bool,
+  /** classes to apply */
+  className?: string,
+  /** contents of the button */
+  children?: React.Node
+}
+
+/**
+ * Basic, unstyled button. You probably want to use a styled button
+ * instead. All buttons take the same props.
+ *
+ * If you need access to the ButtonProps type, you can:
+ * ```js
+ * import {type ButtonProps} from '@opentrons/components'
+ * ```
+ */
+export default function Button (props: ButtonProps) {
+  const {disabled} = props
+  const onClick = !disabled && props.onClick
+
+  return (
+    <button
+      disabled={disabled}
+      onClick={onClick}
+      title={props.title}
+      className={props.className}
+    >
+      {props.children}
+    </button>
+  )
+}

components/src/buttons/PrimaryButton.js

@@ -0,0 +1,20 @@
+// @flow
+import * as React from 'react'
+import classnames from 'classnames'
+
+import Button, {type ButtonProps} from './Button'
+import styles from './buttons.css'
+
+/**
+ * Primary application button. Fills its container and has a dark
+ * background with white text
+ */
+export default function PrimaryButton (props: ButtonProps) {
+  const className = classnames(styles.button_primary, props.className)
+
+  return (
+    <Button {...props} className={className}>
+      {props.children}
+    </Button>
+  )
+}

components/src/buttons/PrimaryButton.md

@@ -0,0 +1,19 @@
+Basic usage:
+
+```js
+<div style={{width: '16rem'}}>
+  <PrimaryButton onClick={() => alert('you clicked me')}>
+    {'Click for alert'}
+  </PrimaryButton>
+</div>
+```
+
+Disabled:
+
+```js
+<div style={{width: '16rem'}}>
+  <PrimaryButton onClick={() => alert("can't click me")} disabled>
+    {"Can't click"}
+  </PrimaryButton>
+</div>
+```

components/src/buttons.css → components/src/buttons/buttons.css

@@ -2,6 +2,7 @@
 
 .button {
   padding: 0.5rem 1.5rem;
+  border: none;
   text-transform: uppercase;
 }
 

components/src/buttons/index.js

@@ -0,0 +1,8 @@
+// @flow
+// button components
+
+import Button from './Button'
+import PrimaryButton from './PrimaryButton'
+
+export * from './Button'
+export {Button, PrimaryButton}

components/src/icons/Icon.js

@@ -1,22 +1,35 @@
 // @flow
-// SVG icon component
-
 import * as React from 'react'
 import classnames from 'classnames'
 
 import ICON_DATA_BY_NAME, {type IconName} from './icon-data'
 import styles from './icons.css'
 
 type Props = {
+  /** name constant of the icon to display */
   name: IconName,
+  /** classes to apply */
   className?: string,
+  /** spin the icon with a CSS animation */
   spin?: boolean,
+  /** x attribute as a number or string (for nesting inside another SVG) */
   x?: number | string,
+  /** y attribute as a number or string (for nesting inside another SVG) */
   y?: number | string,
+  /** width as a number or string (for nesting inside another SVG) */
   height?: number | string,
+  /** height as a number or string (for nesting inside another SVG) */
   width?: number | string
 }
 
+/**
+ * Inline SVG icon component
+ *
+ * If you need access to the IconName type, you can:
+ * ```js
+ * import {type IconName} from '@opentrons/components'
+ * ```
+ */
 export default function Icon (props: Props) {
   const {x, y, height, width} = props
   const {viewBox, path} = ICON_DATA_BY_NAME[props.name]

components/src/icons/Icon.md

@@ -0,0 +1,33 @@
+All available icons:
+
+```js
+// import {ALERT, BACK, REFRESH, etc.} from @opentrons/components
+const {
+  ALERT, BACK, REFRESH, SPINNER, USB, WIFI, FLASK, CHECKED, UNCHECKED, EXPAND
+} = require('./icon-data')
+
+;<div>
+  <Icon width='64px' name={ALERT} />
+  <Icon width='64px' name={BACK} />
+  <Icon width='64px' name={REFRESH} />
+  <Icon width='64px' name={SPINNER} />
+  <Icon width='64px' name={USB} />
+  <Icon width='64px' name={WIFI} />
+  <Icon width='64px' name={FLASK} />
+  <Icon width='64px' name={CHECKED} />
+  <Icon width='64px' name={UNCHECKED} />
+  <Icon width='64px' name={EXPAND} />
+</div>
+```
+
+Spin any icon!
+
+```js
+// import {REFRESH, SPINNER} from @opentrons/components
+const {REFRESH, SPINNER} = require('./icon-data')
+
+;<div>
+  <Icon width='64px' name={SPINNER} spin />
+  <Icon width='64px' name={REFRESH} spin />
+</div>
+```

components/styleguide.config.js

@@ -0,0 +1,32 @@
+'use strict'
+
+const path = require('path')
+
+// TODO(mc, 2017-12-22): Create common webpack config
+const {babel, localCss} = require('../app/webpack/rules')
+
+module.exports = {
+  webpackConfig: {
+    module: {
+      rules: [babel, localCss]
+    }
+  },
+  showUsage: true,
+  showCode: true,
+  // TODO(mc, 2017-12-22): generate these sections automatically by walking src
+  sections: [
+    {
+      name: 'Buttons',
+      components: 'src/buttons/[A-Z]*.js'
+    },
+    {
+      name: 'Icons',
+      components: 'src/icons/[A-Z]*.js'
+    }
+  ],
+  getComponentPathLine (componentPath) {
+    const name = path.basename(componentPath, '.js')
+
+    return `import {${name}} from '@opentrons/components'`
+  }
+}