React-starter-kit: Storybook Support

Created on 8 Feb 2018 · 14Comments · Source: kriasoft/react-starter-kit

On fresh master branch:

langpavel@lang:~/Projects/work/kriasoft/rsk (master)$ getstorybook

 getstorybook - the simplest way to add a storybook to your project. 

 • Detecting project type. ✓
 • Adding storybook support to your "Webpack React" app. ✓
 • Preparing to install dependencies. ✓

yarn install v1.3.2
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0".
warning "@storybook/react > [email protected]" has unmet peer dependency "babel-runtime@^6.23.0".
[5/5] Building fresh packages...
success Saved lockfile.
Done in 37.99s.

 • Installing dependencies. ✓

To run your storybook, type:

   yarn run storybook 

For more information visit: https://storybook.js.org

langpavel@lang:~/Projects/work/kriasoft/rsk (master *%)$ yarn run storybook
yarn run v1.3.2
$ start-storybook -p 6006
info @storybook/react v3.3.12
info 
Failed to load ./.env.
info => Loading custom webpack config (extending mode).
webpack built 1c69fbfae66a4977cbea in 5844ms                                            
Hash: 1c69fbfae66a4977cbea
Version: webpack 3.10.0
Time: 5844ms
                       Asset       Size  Chunks                    Chunk Names
    static/manager.bundle.js    2.62 MB       0  [emitted]  [big]  manager
    static/preview.bundle.js     469 kB       1  [emitted]  [big]  preview
static/manager.bundle.js.map    3.21 MB       0  [emitted]         manager
static/preview.bundle.js.map     556 kB       1  [emitted]         preview
                  index.html     1.2 kB          [emitted]         
                 iframe.html  583 bytes          [emitted]         
 [130] ./node_modules/@storybook/react/dist/server/config/polyfills.js 113 bytes {0} {1} [built]
 [288] ./node_modules/@storybook/ui/dist/index.js 2.42 kB {0} [built]
 [357] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/addons.js ./node_modules/@storybook/react/dist/client/manager/index.js 52 bytes {0} [built]
 [358] ./node_modules/@storybook/react/dist/server/addons.js 105 bytes {0} [built]
 [359] ./node_modules/@storybook/addon-actions/register.js 30 bytes {0} [built]
 [484] ./node_modules/@storybook/react/dist/client/manager/index.js 404 bytes {0} [built]
 [706] ./node_modules/@storybook/react/dist/client/manager/provider.js 3.31 kB {0} [built]
 [711] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js 64 bytes {1} [built]
 [712] ./node_modules/@storybook/react/dist/server/config/globals.js 105 bytes {1} [built]
 [713] (webpack)-hot-middleware/client.js?reload=true 7.35 kB {1} [built]
 [714] ./node_modules/querystring-es3/index.js 127 bytes {1} [built]
 [717] ./node_modules/strip-ansi/index.js 161 bytes {1} [built]
 [719] (webpack)-hot-middleware/client-overlay.js 2.21 kB {1} [built]
 [724] (webpack)-hot-middleware/process-update.js 4.33 kB {1} [built]
 [725] ./.storybook/config.js 2.02 kB {1} [built] [failed] [1 error]
    + 711 hidden modules

ERROR in ./.storybook/config.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.
    at createDescriptor (/home/langpavel/Projects/work/kriasoft/rsk/node_modules/@babel/core/lib/config/config-descriptors.js:158:11)
    at /home/langpavel/Projects/work/kriasoft/rsk/node_modules/@babel/core/lib/config/config-descriptors.js:101:12
    at Array.map (<anonymous>)
    at createDescriptors (/home/langpavel/Projects/work/kriasoft/rsk/node_modules/@babel/core/lib/config/config-descriptors.js:100:27)
    at createPresetDescriptors (/home/langpavel/Projects/work/kriasoft/rsk/node_modules/@babel/core/lib/config/config-descriptors.js:92:10)
    at /home/langpavel/Projects/work/kriasoft/rsk/node_modules/@babel/core/lib/config/config-descriptors.js:78:14
    at cachedFunction (/home/langpavel/Projects/work/kriasoft/rsk/node_modules/@babel/core/lib/config/caching.js:40:17)
    at presets (/home/langpavel/Projects/work/kriasoft/rsk/node_modules/@babel/core/lib/config/config-descriptors.js:23:68)
    at mergeChainOpts (/home/langpavel/Projects/work/kriasoft/rsk/node_modules/@babel/core/lib/config/config-chain.js:293:68)
    at /home/langpavel/Projects/work/kriasoft/rsk/node_modules/@babel/core/lib/config/config-chain.js:246:7
    at buildRootChain (/home/langpavel/Projects/work/kriasoft/rsk/node_modules/@babel/core/lib/config/config-chain.js:64:27)
    at loadConfig (/home/langpavel/Projects/work/kriasoft/rsk/node_modules/@babel/core/lib/config/index.js:50:53)
    at transformSync (/home/langpavel/Projects/work/kriasoft/rsk/node_modules/@babel/core/lib/transform-sync.js:13:36)
    at Object.transform (/home/langpavel/Projects/work/kriasoft/rsk/node_modules/@babel/core/lib/transform.js:20:65)
    at transpile (/home/langpavel/Projects/work/kriasoft/rsk/node_modules/@storybook/react/node_modules/babel-loader/lib/index.js:50:20)
    at /home/langpavel/Projects/work/kriasoft/rsk/node_modules/@storybook/react/node_modules/babel-loader/lib/fs-cache.js:118:18
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks  Chunk Names
    index.html  569 kB       0  
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/react/dist/server/index.html.ejs 1.69 kB {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
Child html-webpack-plugin for "iframe.html":
          Asset    Size  Chunks  Chunk Names
    iframe.html  568 kB       0  
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/react/dist/server/iframe.html.ejs 966 bytes {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]

help wanted

Source

langpavel

Most helpful comment

I personally added Styleguidist and not Storybook.
It fits really well with the Component structure of the starter kit.
I forked the redux feature and changed some stuff but then also with Readme.md files inside the component folders itself so for example

Link Component:
- Link.js
- Link.md
- package.json

Forked project with the Link component as example.

rodeyseijkens on 9 Feb 2018

👍2 ❤1

All 14 comments

There is some stuff in #1538

langpavel on 8 Feb 2018

If you are going to add story book, then there should be at least a story or two?

tim-soft on 9 Feb 2018

Yeah, as an example, sure..

langpavel on 9 Feb 2018

The question is what to add?

tim-soft on 9 Feb 2018

Not sure, but there are some components.. Header..., whatever...

langpavel on 9 Feb 2018

May be that some of them can be refactored?

langpavel on 9 Feb 2018

Link Component:
- Link.js
- Link.md
- package.json

Forked project with the Link component as example.

rodeyseijkens on 9 Feb 2018

👍2 ❤1

I was able to get Storybook working with this configuration:

storybook/config.js

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import fetch from 'isomorphic-fetch';
import App from '../src/components/App';
import createApolloClient from '../src/core/createApolloClient';
import configureStore from '../src/store/configureStore';
import history from '../src/history';

require('@babel/register');

const req = require.context('../src/components', true, /\.story\.js$/)
function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

const apolloClient = createApolloClient();
const context = {
  insertCss: (...styles) => {
    // eslint-disable-next-line no-underscore-dangle
    const removeCss = styles.map(x => x._insertCss());
    return () => {
      removeCss.forEach(f => f());
    };
  },
  client: apolloClient,
  store: configureStore({}),
  fetch,
  pathname: history.location.pathname,
};

addDecorator(story => (
  <App context={context}>
    <div id="app">{ story() }</div>
  </App>
));

configure(loadStories, module);

storybook/webpack.config.js

require('@babel/register');

const config = require('../tools/webpack.config.js').default[0];

module.exports = {
  plugins: config.plugins.filter(plugin =>
    ['DefinePlugin', 'ProvidePlugin', 'ExtractTextPlugin'].includes(
      plugin.constructor.name,
    ),
  ),
  devtool: 'source-map',
  resolve: config.resolve,
  module: {
    loaders: config.module.loaders,
    rules: config.module.rules,
  },
};

Then in RSKs tools/webpack.config.js I added ejs to reScript:
const reScript = /\.(js|jsx|mjs|ejs)$/;. Its also worth updating its resolve.modules configuration so it is an absolute path: modules: ['node_modules', path.resolve(__dirname, 'src')]

Then alongside any component, such as components/DatePicker/DatePicker.js, I create a file called components/DatePicker/DatePicker.story.js

josephdonnelly on 23 Feb 2018

👍2

The only _glaring_ downside to storybook is the lack of mobile support, @rodeyseijkens styleguidist looks super cool! I think RSK should implement at least one of these

tim-soft on 23 Feb 2018

I used Styleguidist on a previous project built with RSK. I didn't like how you had to use webpack aliases to override some of its internal components.

Still new to implementing storybook, but I like that it has an abundance of addons

josephdonnelly on 23 Feb 2018

@josephdonnelly Thanks for the insight on this. Unfortunately, I tried a fresh checkout of the RSK feature/redux branch and implemented your recommendation, but I'm still getting the error above Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. Am I missing something? I've got a story on the Footer component and you can run storybook w/ the yarn storybook command.

I've got a forked repo here https://github.com/kayluhb/react-starter-kit/tree/storybook

Full trace:

ERROR in ./.storybook/config.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.
    at createDescriptor (/Users/kayluhb/Projects/react/react-starter-kit/node_modules/@babel/core/lib/config/config-descriptors.js:158:11)
    at /Users/kayluhb/Projects/react/react-starter-kit/node_modules/@babel/core/lib/config/config-descriptors.js:101:12
    at Array.map (<anonymous>)
    at createDescriptors (/Users/kayluhb/Projects/react/react-starter-kit/node_modules/@babel/core/lib/config/config-descriptors.js:100:27)
    at createPresetDescriptors (/Users/kayluhb/Projects/react/react-starter-kit/node_modules/@babel/core/lib/config/config-descriptors.js:92:10)
    at /Users/kayluhb/Projects/react/react-starter-kit/node_modules/@babel/core/lib/config/config-descriptors.js:78:14
    at cachedFunction (/Users/kayluhb/Projects/react/react-starter-kit/node_modules/@babel/core/lib/config/caching.js:40:17)
    at presets (/Users/kayluhb/Projects/react/react-starter-kit/node_modules/@babel/core/lib/config/config-descriptors.js:23:68)
    at mergeChainOpts (/Users/kayluhb/Projects/react/react-starter-kit/node_modules/@babel/core/lib/config/config-chain.js:293:68)
    at /Users/kayluhb/Projects/react/react-starter-kit/node_modules/@babel/core/lib/config/config-chain.js:246:7
    at buildRootChain (/Users/kayluhb/Projects/react/react-starter-kit/node_modules/@babel/core/lib/config/config-chain.js:64:27)
    at loadConfig (/Users/kayluhb/Projects/react/react-starter-kit/node_modules/@babel/core/lib/config/index.js:50:53)
    at transformSync (/Users/kayluhb/Projects/react/react-starter-kit/node_modules/@babel/core/lib/transform-sync.js:13:36)
    at Object.transform (/Users/kayluhb/Projects/react/react-starter-kit/node_modules/@babel/core/lib/transform.js:20:65)
    at transpile (/Users/kayluhb/Projects/react/react-starter-kit/node_modules/@storybook/react/node_modules/babel-loader/lib/index.js:50:20)
    at /Users/kayluhb/Projects/react/react-starter-kit/node_modules/@storybook/react/node_modules/babel-loader/lib/fs-cache.js:118:18
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js

thanks