From 2c93552d9b5d7193203f82b2f4fbe7a0c78ebe01 Mon Sep 17 00:00:00 2001 From: Richard Scarrott Date: Tue, 11 Oct 2016 15:52:50 +0100 Subject: [PATCH 1/2] Add React Storybook --- package.json | 6 +++-- src/components/lib/button/Button.css | 10 ++++++++ src/components/lib/button/Button.js | 17 ++++++++++++++ src/components/lib/button/Button.test.js | 0 src/components/notfound/NotFound.js | 2 +- src/stories/index.js | 11 +++++++++ tasks/storybook/config.js | 7 ++++++ tasks/storybook/webpack.config.js | 29 ++++++++++++++++++++++++ 8 files changed, 79 insertions(+), 3 deletions(-) create mode 100644 src/components/lib/button/Button.css create mode 100644 src/components/lib/button/Button.js create mode 100644 src/components/lib/button/Button.test.js create mode 100644 src/stories/index.js create mode 100644 tasks/storybook/config.js create mode 100644 tasks/storybook/webpack.config.js diff --git a/package.json b/package.json index b605861..2f2be47 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "start": "npm run serve", "serve": "node -r ./server/environment ./server", "build": "node ./tasks/build", - "test": "jest" + "test": "jest", + "storybook": "start-storybook -c ./tasks/storybook/ -p 6006" }, "author": "", "license": "ISC", @@ -49,7 +50,8 @@ "webpack": "^1.12.15", "webpack-dev-middleware": "^1.6.1", "webpack-hot-middleware": "^2.13.0", - "webpack-hot-server-middleware": "~0.0.2" + "webpack-hot-server-middleware": "~0.0.2", + "@kadira/storybook": "^2.21.0" }, "dependencies": { "babel-polyfill": "^6.7.4", diff --git a/src/components/lib/button/Button.css b/src/components/lib/button/Button.css new file mode 100644 index 0000000..3a564ac --- /dev/null +++ b/src/components/lib/button/Button.css @@ -0,0 +1,10 @@ +.root { + border: 1px solid #ccc; + border-radius: 3px; + background-color: #fff; + background: #fff; + background: linear-gradient(to bottom, rgb(255, 255, 255) 0%,rgb(219, 219, 219) 100%); + cursor: pointer; + font-size: 16px; + padding: 8px 16px; +} diff --git a/src/components/lib/button/Button.js b/src/components/lib/button/Button.js new file mode 100644 index 0000000..a169740 --- /dev/null +++ b/src/components/lib/button/Button.js @@ -0,0 +1,17 @@ +import React, { PropTypes } from 'react'; +import styles from 'components/lib/button/Button.css'; + +function Button({ onClick, children }) { + return ( + + ); +} + +Button.propTypes = { + children: PropTypes.string.isRequired, + onClick: PropTypes.func, +}; + +export default Button; diff --git a/src/components/lib/button/Button.test.js b/src/components/lib/button/Button.test.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/notfound/NotFound.js b/src/components/notfound/NotFound.js index 4768452..6290931 100644 --- a/src/components/notfound/NotFound.js +++ b/src/components/notfound/NotFound.js @@ -1,5 +1,5 @@ import React from 'react'; -import styles from './NotFound.css'; +import styles from 'components/notfound/NotFound.css'; function NotFound() { return ( diff --git a/src/stories/index.js b/src/stories/index.js new file mode 100644 index 0000000..7328ba6 --- /dev/null +++ b/src/stories/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { storiesOf, action } from '@kadira/storybook'; +import Button from 'components/lib/button/Button'; + +storiesOf('Button', module) + .add('with text', () => ( + + )) + .add('with some emoji', () => ( + + )); diff --git a/tasks/storybook/config.js b/tasks/storybook/config.js new file mode 100644 index 0000000..afe754a --- /dev/null +++ b/tasks/storybook/config.js @@ -0,0 +1,7 @@ +import { configure } from '@kadira/storybook'; + +function loadStories() { + require('../../src/stories'); +} + +configure(loadStories, module); diff --git a/tasks/storybook/webpack.config.js b/tasks/storybook/webpack.config.js new file mode 100644 index 0000000..dd08e46 --- /dev/null +++ b/tasks/storybook/webpack.config.js @@ -0,0 +1,29 @@ +'use strict'; + +const generateConfig = require('../build/generateConfig'); + +module.exports = (storybookBaseConfig, configType) => { + let options; + if (configType === 'DEVELOPMENT') { + options = { + sourceMaps: true + }; + } else { + options = { + optimize: true, + revision: true + // extractCss: true, + // stats: true + } + } + + const config = generateConfig(options); + + // Copy over app loader and resolve config. + storybookBaseConfig.module = config.module; + storybookBaseConfig.resolve = config.resolve; + // storybookBaseConfig.plugins = config.plugins; Prob not a good idea to try + // and use plugins from app config as it includes things specific to app entry + // e.g. HotReloading requires the client to be injected etc. + return storybookBaseConfig; +}; From e2766b16837b197fc59f5037dfcad7e0ca0806b5 Mon Sep 17 00:00:00 2001 From: Richard Scarrott Date: Tue, 11 Oct 2016 16:10:14 +0100 Subject: [PATCH 2/2] fixup! Add React Storybook --- src/components/lib/button/Button.test.js | 19 +++++++++++++++++++ .../button/__snapshots__/Button.test.js.snap | 7 +++++++ src/stories/index.js | 1 + 3 files changed, 27 insertions(+) create mode 100644 src/components/lib/button/__snapshots__/Button.test.js.snap diff --git a/src/components/lib/button/Button.test.js b/src/components/lib/button/Button.test.js index e69de29..31207a2 100644 --- a/src/components/lib/button/Button.test.js +++ b/src/components/lib/button/Button.test.js @@ -0,0 +1,19 @@ +/* eslint-env jasmine */ + +import React from 'react'; +import renderer from 'react-test-renderer'; +import Button from 'components/lib/button/Button'; + +describe('components/lib/button/Button', () => { + + it('renders correctly', () => { + const component = renderer.create( + + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + +}); diff --git a/src/components/lib/button/__snapshots__/Button.test.js.snap b/src/components/lib/button/__snapshots__/Button.test.js.snap new file mode 100644 index 0000000..59678cc --- /dev/null +++ b/src/components/lib/button/__snapshots__/Button.test.js.snap @@ -0,0 +1,7 @@ +exports[`components/lib/button/Button renders correctly 1`] = ` + +`; diff --git a/src/stories/index.js b/src/stories/index.js index 7328ba6..f61494e 100644 --- a/src/stories/index.js +++ b/src/stories/index.js @@ -1,3 +1,4 @@ +import 'css-reset'; import React from 'react'; import { storiesOf, action } from '@kadira/storybook'; import Button from 'components/lib/button/Button';