diff --git a/.storybook/config.js b/.storybook/config.js new file mode 100644 index 000000000..021668d88 --- /dev/null +++ b/.storybook/config.js @@ -0,0 +1,10 @@ +import { configure } from '@storybook/react'; +import '../src/components/app/app.css'; + +function loadStories() { + require('../src/components/account/stories'); + require('../src/components/dialog/stories'); + require('../src/components/formattedNumber/stories'); +} + +configure(loadStories, module); diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js new file mode 100644 index 000000000..462796f4c --- /dev/null +++ b/.storybook/webpack.config.js @@ -0,0 +1,5 @@ +const config = require('../webpack.config.js'); + +module.exports = config({ + test: true, +}); diff --git a/README.md b/README.md index b49b42661..810ebab3f 100644 --- a/README.md +++ b/README.md @@ -98,6 +98,18 @@ Run the protractor tests (replace `~/git/lisk/` with your path to lisk core): npm run e2e-test ``` +## Launch React Storybook + +To launch storybook sandbox with components run +``` +npm run storybook +``` +and go to + +http://localhost:6006/ + + + ## Authors - Ricardo Ferro diff --git a/package.json b/package.json index 0cdb11af3..22a26a5d8 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,9 @@ "dist:mac": "build --mac", "dist:linux": "build --linux --ia32 --x64 --armv7l", "copy-files": "mkdir dist && cp -r ./src/index.html ./src/assets ./dist", - "clean": "del dist -f" + "clean": "del dist -f", + "storybook": "start-storybook -p 6006 -s ./src/", + "build-storybook": "build-storybook" }, "author": "Lisk Foundation , lightcurve GmbH ", "license": "GPL-3.0", @@ -99,7 +101,8 @@ "url-loader": "=0.5.7", "webpack": "=2.2.1", "webpack-bundle-analyzer": "=2.4.0", - "webpack-dev-server": "=2.4.2" + "webpack-dev-server": "=2.4.2", + "@storybook/react": "=3.1.8" }, "build": { "appId": "io.lisk.nano", diff --git a/src/components/account/stories.js b/src/components/account/stories.js new file mode 100644 index 000000000..2afe1ab26 --- /dev/null +++ b/src/components/account/stories.js @@ -0,0 +1,44 @@ +import React from 'react'; + +import { storiesOf } from '@storybook/react'; +import Account from './accountComponent'; +import Address from './address'; + +storiesOf('Account', module) + .add('delegate', () => ( + + )); + +storiesOf('Address', module) + .add('delegate', () => ( +
+ )) + .add('non-delegate', () => ( +
+ )); diff --git a/src/components/dialog/stories.js b/src/components/dialog/stories.js new file mode 100644 index 000000000..47e366a43 --- /dev/null +++ b/src/components/dialog/stories.js @@ -0,0 +1,18 @@ +import React from 'react'; + +import { storiesOf } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import Dialog from './dialogElement'; + +const dialogContent = () => (
Hello
); + +storiesOf('Dialog', module) + .add('default', () => ( + + )); diff --git a/src/components/formattedNumber/stories.js b/src/components/formattedNumber/stories.js new file mode 100644 index 000000000..c9349265e --- /dev/null +++ b/src/components/formattedNumber/stories.js @@ -0,0 +1,10 @@ +import React from 'react'; + +import { storiesOf } from '@storybook/react'; + +import FormattedNumber from './'; + +storiesOf('FormattedNumber', module) + .add('with val', () => ( + + ));