From 71e7537330596adbaa5521c0515e03f701ec7ef9 Mon Sep 17 00:00:00 2001 From: Kai Schaper <303@posteo.de> Date: Tue, 11 Oct 2016 03:21:06 +0200 Subject: [PATCH] setup React Storybook; add example story for LoadingIndicator component --- .nvmrc | 1 + package.json | 12 ++++++++---- storybook/config.js | 14 ++++++++++++++ storybook/stories/loading_indicator.story.jsx | 6 ++++++ 4 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 .nvmrc create mode 100644 storybook/config.js create mode 100644 storybook/stories/loading_indicator.story.jsx diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 000000000..f0e13c509 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +6.7.0 diff --git a/package.json b/package.json index 1ea514e1f..12efbcf8c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,11 @@ { "name": "mastodon", + "scripts": { + "storybook": "start-storybook -p 9001 -c storybook" + }, "devDependencies": { + "@kadira/storybook": "^2.24.0", + "axios": "^0.14.0", "babel-plugin-react-transform": "^2.0.2", "babel-plugin-transform-object-rest-spread": "^6.8.0", "babel-preset-es2015": "^6.13.2", @@ -8,17 +13,16 @@ "babelify": "^7.3.0", "browserify": "^13.1.0", "browserify-incremental": "^3.1.1", - "react": "^15.3.0", - "react-dom": "^15.3.0", - "react-proxy": "^1.1.8", - "axios": "^0.14.0", "es6-promise": "^3.2.1", "immutable": "^3.8.1", "moment": "^2.14.1", + "react": "^15.3.0", "react-addons-perf": "^15.3.2", "react-addons-pure-render-mixin": "^15.3.1", + "react-dom": "^15.3.0", "react-immutable-proptypes": "^2.1.0", "react-notification": "^6.1.1", + "react-proxy": "^1.1.8", "react-redux": "^5.0.0-beta.3", "react-redux-loading-bar": "^2.3.3", "react-router": "^2.8.0", diff --git a/storybook/config.js b/storybook/config.js new file mode 100644 index 000000000..a14e75e0c --- /dev/null +++ b/storybook/config.js @@ -0,0 +1,14 @@ +import { configure } from '@kadira/storybook'; +import React from 'react'; +import { storiesOf, action } from '@kadira/storybook'; + +window.storiesOf = storiesOf; +window.action = action; +window.React = React; + +function loadStories () { + require('./stories/loading_indicator.story.jsx'); + // You can require as many stories as you need. +} + +configure(loadStories, module); diff --git a/storybook/stories/loading_indicator.story.jsx b/storybook/stories/loading_indicator.story.jsx new file mode 100644 index 000000000..d169e4f55 --- /dev/null +++ b/storybook/stories/loading_indicator.story.jsx @@ -0,0 +1,6 @@ +import LoadingIndicator from '../../app/assets/javascripts/components/components/loading_indicator.jsx' + +storiesOf('LoadingIndicator', module) + .add('default state', () => ( + + ));