react-storybook samples

config.js

/**
 * dynamically loading all stories with .stories.js extension
 */ 
 
import { configure } from '@kadira/storybook';
require('es6-promise').polyfill();
import 'babel-polyfill';
const stories = require.context('../app/js/components', true, /.stories.js$/);

function loadStories() {
  stories.keys().forEach(filename => stories(filename));
}

configure(loadStories, module);

sample.stories.js

/** 
  * using redux-mock-store 
  * using redux provider
  * using stories decorators
  */

import React from 'react';
import { storiesOf } from '@kadira/storybook';
import { MenuToggle } from '../header/MenuToggle';
import Header from '../header/Header';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';

const mockStore = configureStore();
const store = mockStore({
  ui: {
    isMenuOpened: true,
  },
});

storiesOf('Header', module)
  .addDecorator(getStory => <Provider store={store}>{getStory()}</Provider>)
  .add('with text', () => {
    const config = {
      version: 'standard',
      config: {},
      isLoggedIn: true,
      user: {
        access: 'buyer',
      },
    };
    return <Header {...config} />;
  });