Merge pull request #4099 from MetaMask/i4043-storybook-dev2

Add storybook integration

.storybook/README.md

@@ -0,0 +1,10 @@
+# Storybook
+We're currently using [Storybook](https://storybook.js.org/) as part of our design system. To run Storybook and test some of our UI components, clone the repo and run the following:
+```
+npm install
+npm run storybook
+```
+You should then see:
+> info Storybook started on => http://localhost:6006/
+
+In your browser, navigate to http://localhost:6006/ to see the Storybook application. From here, you'll be able to easily view components and even modify some of their properties.

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-knobs/register'
+import '@storybook/addon-actions/register'

.storybook/config.js

@@ -0,0 +1,11 @@
+import { configure } from '@storybook/react'
+import '../ui/app/css/index.scss'
+
+const req = require.context('../ui/app/components', true, /\.stories\.js$/)
+
+function loadStories () {
+  require('./decorators')
+  req.keys().forEach((filename) => req(filename))
+}
+
+configure(loadStories, module)

.storybook/decorators.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { addDecorator } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
+import { withKnobs } from '@storybook/addon-knobs/react'
+
+const styles = {
+  height: '100vh',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}
+
+const CenterDecorator = story => (
+  <div style={styles}>
+    { story() }
+  </div>
+)
+
+addDecorator((story, context) => withInfo()(story)(context))
+addDecorator(withKnobs)
+addDecorator(CenterDecorator)

.storybook/webpack.config.js

@@ -0,0 +1,37 @@
+const path = require('path')
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
+        loaders: [{
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+            outputPath: 'fonts/',
+          },
+        }],
+      },
+      {
+        test: /\.scss$/,
+        loaders: [
+          'style-loader',
+          'css-loader',
+          'resolve-url-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      './fonts/Font_Awesome': path.resolve(__dirname, '../fonts/Font_Awesome'),
+    },
+  },
+}

package.json

@@ -42,7 +42,8 @@
     "announce": "node development/announcer.js",
     "version:bump": "node development/run-version-bump.js",
     "generateNotice": "node notices/notice-generator.js",
-    "deleteNotice": "node notices/notice-delete.js"
+    "deleteNotice": "node notices/notice-delete.js",
+    "storybook": "start-storybook -p 6006 -c .storybook"
   },
   "browserify": {
     "transform": [
@@ -192,6 +193,9 @@
   },
   "devDependencies": {
     "@sentry/cli": "^1.30.3",
+    "@storybook/addon-info": "^3.4.2",
+    "@storybook/addon-knobs": "^3.4.2",
+    "@storybook/react": "^3.4.2",
     "babel-core": "^6.24.1",
     "babel-eslint": "^8.0.0",
     "babel-plugin-transform-async-to-generator": "^6.24.1",
@@ -209,6 +213,7 @@
     "compression": "^1.7.1",
     "coveralls": "^3.0.0",
     "cross-env": "^5.1.4",
+    "css-loader": "^0.28.11",
     "deep-freeze-strict": "^1.1.1",
     "del": "^3.0.0",
     "envify": "^4.0.0",
@@ -219,6 +224,7 @@
     "eslint-plugin-mocha": "^5.0.0",
     "eslint-plugin-react": "^7.4.0",
     "eth-json-rpc-middleware": "^1.6.0",
+    "file-loader": "^1.1.11",
     "fs-promise": "^2.0.3",
     "ganache-cli": "^6.1.0",
     "ganache-core": "^2.1.0",

ui/app/components/button/button.component.js

@@ -0,0 +1,43 @@
+const { Component } = require('react')
+const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
+const classnames = require('classnames')
+
+const SECONDARY = 'secondary'
+const CLASSNAME_PRIMARY = 'btn-primary'
+const CLASSNAME_PRIMARY_LARGE = 'btn-primary--lg'
+const CLASSNAME_SECONDARY = 'btn-secondary'
+const CLASSNAME_SECONDARY_LARGE = 'btn-secondary--lg'
+
+const getClassName = (type, large = false) => {
+  let output = type === SECONDARY ? CLASSNAME_SECONDARY : CLASSNAME_PRIMARY
+
+  if (large) {
+    output += ` ${type === SECONDARY ? CLASSNAME_SECONDARY_LARGE : CLASSNAME_PRIMARY_LARGE}`
+  }
+
+  return output
+}
+
+class Button extends Component {
+  render () {
+    const { type, large, className, ...buttonProps } = this.props
+
+    return (
+      h('button', {
+        className: classnames(getClassName(type, large), className),
+        ...buttonProps,
+      }, this.props.children)
+    )
+  }
+}
+
+Button.propTypes = {
+  type: PropTypes.string,
+  large: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.string,
+}
+
+module.exports = Button
+

ui/app/components/button/button.stories.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import Button from './'
+import { text } from '@storybook/addon-knobs/react'
+
+storiesOf('Button', module)
+  .add('primary', () =>
+    <Button
+      onClick={action('clicked')}
+      type="primary"
+    >
+      {text('text', 'Click me')}
+    </Button>
+  )
+  .add('secondary', () => (
+    <Button
+      onClick={action('clicked')}
+      type="secondary"
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))
+  .add('large primary', () => (
+    <Button
+      onClick={action('clicked')}
+      type="primary"
+      large
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))
+  .add('large secondary', () => (
+    <Button
+      onClick={action('clicked')}
+      type="secondary"
+      large
+    >
+      {text('text', 'Click me')}
+    </Button>
+  ))

ui/app/components/button/index.js

@@ -0,0 +1,2 @@
+const Button = require('./button.component')
+module.exports = Button

ui/app/css/itcss/components/buttons.scss

@@ -18,6 +18,7 @@
   padding: 0 20px;
   min-width: 140px;
   text-transform: uppercase;
+  outline: none;
 }
 
 .btn-primary,

ui/app/send-v2.js

@@ -31,6 +31,7 @@ const {
 } = require('./components/send/send-utils')
 const { isValidAddress } = require('./util')
 const { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } = require('./routes')
+const Button = require('./components/button')
 
 SendTransactionScreen.contextTypes = {
   t: PropTypes.func,
@@ -497,13 +498,19 @@ SendTransactionScreen.prototype.renderFooter = function () {
   const noErrors = !amountError && toError === null
 
   return h('div.page-container__footer', [
-    h('button.btn-secondary--lg.page-container__footer-button', {
+    h(Button, {
+      type: 'secondary',
+      large: true,
+      className: 'page-container__footer-button',
       onClick: () => {
         clearSend()
         history.push(DEFAULT_ROUTE)
       },
     }, this.context.t('cancel')),
-    h('button.btn-primary--lg.page-container__footer-button', {
+    h(Button, {
+      type: 'primary',
+      large: true,
+      className: 'page-container__footer-button',
       disabled: !noErrors || !gasTotal || missingTokenBalance,
       onClick: event => this.onSubmit(event),
     }, this.context.t('next')),