How to use @kadira/storybook - 10 common examples

async function main() {
  try {
    // Channel for addons is created by storybook manager from the client side.
    // We need to polyfill it for the server side.
    const addons = require('@kadira/storybook-addons').default;
    const channel = new EventEmitter();
    addons.setChannel(channel);

    const content = babel.transformFileSync(configPath, babelConfig).code;
    const contextOpts = {
      filename: configPath,
      dirname: path.resolve(configDir),
    };
    runWithRequireContext(content, contextOpts);
    const storybook = require('@kadira/storybook').getStorybook();
    const result = await runner.run(filterStorybook(storybook, grep, exclude));
    const fails = result.errored + result.unmatched;
    const exitCode = fails > 0 ? 1: 0;
    if(!program.watch){
      process.exit(exitCode);
    }
  } catch (e) {
    console.log(e.stack || e);

    if(!program.watch){
      process.exit(1);
    }
  }
}

global.navigator.userAgent = 'screener';

  // Channel for addons is created by storybook manager from the client side.
  // We need to polyfill it for the server side.
  var addons = require('@kadira/storybook-addons').default;
  var channel = new EventEmitter();
  addons.setChannel(channel);

  var content = babel.transformFileSync(configPath, babelConfig).code;
  var contextOpts = {
    filename: configPath,
    dirname: path.resolve(configDir),
  };
  try {
    runWithRequireContext(content, contextOpts);
    var storybook = require('@kadira/storybook').getStorybook();
    callback(null, storybook);
  } catch(ex) {
    if (!options || !options.port) return callback(ex);
    // Exception may be caused by global dependencies injected into browser's Window object.
    // We are not running through an actual browser, so try JSDom.
    var jsdom = require('jsdom');
    var request = require('request');
    // try to retrieve preview bundle from local storybook server
    request.get('http://localhost:' + options.port + '/static/preview.bundle.js', function(err, response, body) {
      if (err || response.statusCode != 200 || !body) return callback(ex);
      if (options.debug && ex.stack) {
        console.log('DEBUG:', ex.stack);
      } else {
        console.log(ex.message || ex.toString());
      }
      console.log('Retrying...');

/* eslint-disable import/no-extraneous-dependencies */

import React from 'react';
import { storiesOf } from '@kadira/storybook';
import { setOptions } from '@kadira/storybook-addon-options';

import ThemeSwitcher from './ThemeSwitcher';
import App from './App';

storiesOf('Theme Switcher', module)
    .addDecorator((story) => {
        const storyKind = story();
        return (
          <div style="{{">
            <div style="{{">
              {storyKind}
            </div>
          </div>);
    })
    .add('Component', () =&gt; {
        setOptions({
            name: 'React Theme Provider',
            url: 'https://github.com/sm-react/react-theme-provider',
        });
        return (<div></div>);
    })

import '@skatejs/web-components';

import { configure, addDecorator } from '@kadira/storybook';
import { withKnobs } from '@kadira/storybook-addon-knobs';

import WithExample from './addons/example-addon';

function loadStories() {
  require('../stories/button.js');
  require('../stories/select');
  require('../stories/datepicker');
  // You can require as many stories as you need.
}

addDecorator(WithExample);
addDecorator(withKnobs)

configure(loadStories, module);

withKeyboardSupport,
  withMultipleDates,
  withRange,
} from '../';
import styles from './stories.scss';

// Date manipulation utils
import addDays from 'date-fns/add_days';
import addMonths from 'date-fns/add_months';
import endOfMonth from 'date-fns/end_of_month';
import format from 'date-fns/format';
import isBefore from 'date-fns/is_before';
import subMonths from 'date-fns/sub_months';

const CenterDecorator = story =&gt; <div>{story()}</div>;
addDecorator(CenterDecorator);

const today = new Date();

storiesOf('Basic settings', module)
  .add('Default Configuration', () =&gt; )
  .add('Initially Selected Date', () =&gt; )
  .add('Blank Initial State', () =&gt; )
  .add('Min Date', () =&gt; (
    
  ))
  .add('Max Date', () =&gt; (

import { withKnobs, select } from '@kadira/storybook-addon-knobs';

import Arrange from '../src/Arrange';

setOptions({
  name: 'Terra Arrange Storybook',
  url: 'https://github.com/cerner/terra-arrange',
  goFullScreen: false,
  showLeftPanel: true,
  showDownPanel: true,
  showSearchBox: false,
  downPanelInRight: true,
  sortStoriesByKind: false,
});

addDecorator(checkA11y);
addDecorator(withKnobs);

const icon = <svg viewBox="0 0 1000 1000" fill="#8bc34a" style="{{" height="100" width="75" xmlns="http://www.w3.org/2000/svg"><path d="M525 841.3c-7.5 6.7-16 10.2-25 10.2-9.6 0-17.8-3.4-24.3-10.2L204.5 571.2c-1.2-.5-7-6.6-17.5-18-10.4-11.4-21.9-26.5-34-45-12.5-18.7-23.7-40.1-34-64.5-10.2-24.2-15.4-50.2-15.4-77.8 0-40.2 6.3-74.2 19-101.9 12.6-27.7 29-50.1 49.4-67.3 20.4-17.2 43.4-29.4 68.8-37 25.5-7.4 51.5-11.2 77.9-11.2 18.5 0 36.8 3.2 54.8 9.4 18.4 6.4 35 14.2 50.6 23.7 15.6 9.3 29.8 19.7 42.7 30.8 13 11.1 23.9 21.1 33 29.9 9-9.1 20.1-19.2 33.4-30.1 13.3-11.1 27.6-21.3 43.1-30.6 15.5-9.5 32.1-17.3 49.8-23.7 17.8-6.3 36.5-9.4 55.7-9.4 25.8 0 51.5 3.8 76.9 11.2 25.7 7.6 48.4 19.9 68.9 37 20.5 17.2 36.7 39.5 49.5 67.3 12.5 27.7 18.9 61.7 18.9 101.9 0 27.6-5.1 53.6-15.1 77.8-10.1 24.5-21.3 45.8-33.7 64.5-12.3 18.5-23.8 33.6-34.9 45-10.7 11.4-16.4 17.7-17 18.8L525 841.3z"></path></svg>;
// Block style is required since images are inline by default. This could be resolved by someones normalize.css
const image = <img alt="a happy panda" src="http://3w6kx9401skz1bup4i1gs9ne.wpengine.netdna-cdn.com/wp-content/uploads/2016/09/telegraph-1.jpg" width="150" height="100" style="{{">;
const ipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
const simpleText = <div>{ipsum}</div>;
const textWithPadding = <div style="{{">{ipsum}</div>;

const ArrangeWrapper = props =&gt; (
  <div style="{{">
    {props.children}
  </div>
);

ArrangeWrapper.propTypes = {

import Arrange from '../src/Arrange';

setOptions({
  name: 'Terra Arrange Storybook',
  url: 'https://github.com/cerner/terra-arrange',
  goFullScreen: false,
  showLeftPanel: true,
  showDownPanel: true,
  showSearchBox: false,
  downPanelInRight: true,
  sortStoriesByKind: false,
});

addDecorator(checkA11y);
addDecorator(withKnobs);

const icon = <svg viewBox="0 0 1000 1000" fill="#8bc34a" style="{{" height="100" width="75" xmlns="http://www.w3.org/2000/svg"><path d="M525 841.3c-7.5 6.7-16 10.2-25 10.2-9.6 0-17.8-3.4-24.3-10.2L204.5 571.2c-1.2-.5-7-6.6-17.5-18-10.4-11.4-21.9-26.5-34-45-12.5-18.7-23.7-40.1-34-64.5-10.2-24.2-15.4-50.2-15.4-77.8 0-40.2 6.3-74.2 19-101.9 12.6-27.7 29-50.1 49.4-67.3 20.4-17.2 43.4-29.4 68.8-37 25.5-7.4 51.5-11.2 77.9-11.2 18.5 0 36.8 3.2 54.8 9.4 18.4 6.4 35 14.2 50.6 23.7 15.6 9.3 29.8 19.7 42.7 30.8 13 11.1 23.9 21.1 33 29.9 9-9.1 20.1-19.2 33.4-30.1 13.3-11.1 27.6-21.3 43.1-30.6 15.5-9.5 32.1-17.3 49.8-23.7 17.8-6.3 36.5-9.4 55.7-9.4 25.8 0 51.5 3.8 76.9 11.2 25.7 7.6 48.4 19.9 68.9 37 20.5 17.2 36.7 39.5 49.5 67.3 12.5 27.7 18.9 61.7 18.9 101.9 0 27.6-5.1 53.6-15.1 77.8-10.1 24.5-21.3 45.8-33.7 64.5-12.3 18.5-23.8 33.6-34.9 45-10.7 11.4-16.4 17.7-17 18.8L525 841.3z"></path></svg>;
// Block style is required since images are inline by default. This could be resolved by someones normalize.css
const image = <img alt="a happy panda" src="http://3w6kx9401skz1bup4i1gs9ne.wpengine.netdna-cdn.com/wp-content/uploads/2016/09/telegraph-1.jpg" width="150" height="100" style="{{">;
const ipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
const simpleText = <div>{ipsum}</div>;
const textWithPadding = <div style="{{">{ipsum}</div>;

const ArrangeWrapper = props =&gt; (
  <div style="{{">
    {props.children}
  </div>
);

ArrangeWrapper.propTypes = {
  children: PropTypes.element,

import '@skatejs/web-components';

import { configure, addDecorator } from '@kadira/storybook';
import { withKnobs } from '@kadira/storybook-addon-knobs';

import WithExample from './addons/example-addon';

function loadStories() {
  require('../stories/button.js');
  require('../stories/select');
  require('../stories/datepicker');
  // You can require as many stories as you need.
}

addDecorator(WithExample);
addDecorator(withKnobs)

configure(loadStories, module);

module.exports = function(config, env) {

  var config = genDefaultConfig(config, env);

  // Extend it as you need.

  config.module.loaders = [...config.module.loaders,
    {
      test: /\.scss$/,
      loaders: ["style", "css", "resolve-url", "sass?sourceMap"],
    }
  ];

  config.resolve.extensions = [...config.resolve.extensions, '.scss'];

  return config;
};

.option('--extension [string]', 'File extension to use for storyshot files. Default is `.shot`')
  .option('--polyfills [string]', 'Add global polyfills')
  .option('--loaders [string]', 'Add loaders')
  .parse(process.argv);

const {
  configDir = './.storybook',
  polyfills: polyfillsPath = require.resolve('./default_config/polyfills.js'),
  loaders: loadersPath = require.resolve('./default_config/loaders.js'),
  grep,
  exclude,
} = program;

const configPath = path.resolve(configDir, 'config.js');

const babelConfig = loadBabelConfig(configDir);

// cacheDir is webpack babel loader specific. We don't run webpack.
delete babelConfig.cacheDirectory;

require('babel-register')(babelConfig);
require('babel-polyfill');

// load loaders
const loaders = require(path.resolve(loadersPath));

Object.keys(loaders).forEach(ext => {
  const loader = loaders[ext];
  require.extensions[`.${ext}`] = (m, filepath) => {
    m.exports = loader(filepath);
  };
})