How to use storybook-host - 6 common examples

import { configure, addDecorator } from '@storybook/react'
import { host } from 'storybook-host'
import { combineReducers, createStore } from 'redux'
import { Provider } from 'react-redux'
import { MemoryRouter } from 'react-router-dom'

import modal from '../src/reducers/modal'
import GlobalComponents from '../src/bootstrap/global-components'

import '../src/bootstrap/fontawesome'

import '../src/bootstrap/app.css'

// Storybook Host
addDecorator(
  host({
    title: 'Doges on Trial UI-Kit',
    align: 'center middle'
  })
)

// Integration Wrapper
const store = createStore(combineReducers({ modal }))
addDecorator(story => (
  
    <div>
      {story()}
      
    </div>
  
))

it("should validate on default usage", () => {
    storiesOf("button", module)
      .addDecorator(host({}))
      .add("", () =&gt; <div>);
  });
</div>

import React from 'react';
import { storiesOf } from '@storybook/react';
import { host } from 'storybook-host';
import LoadableWrapper from './index';

storiesOf('LoadableWrapper', module)
  .addDecorator(host({
    align: 'center middle',
    width: '60%',
  }))
  .add('Component', () => (
    Component}
    />
  ));

import React from 'react';
import { storiesOf } from '@storybook/react';
import { host } from 'storybook-host';
import Title from './index';

storiesOf('Title', module)
  .addDecorator(host({
    align: 'center middle',
    width: '60%',
  }))
  .add('Title', () => (
    <title>
      I'm the Title
    </title>
  ));

import React from 'react';
import { storiesOf } from '@storybook/react';
import { host } from 'storybook-host';
import Loading from './index';

storiesOf('Loading', module)
  .addDecorator(host({
    align: 'center middle',
    width: '60%',
  }))
  .add('Loading', () => (
    
  ));

import React from 'react';
import { storiesOf } from '@storybook/react';
import { host } from 'storybook-host';
import Label from './index';

storiesOf('Label', module)
  .addDecorator(host({
    align: 'center middle',
    width: '60%',
  }))
  .add('Label', () => (
    <label>I am a label</label>
  ));