How to use storybook-addon-material-ui - 10 common examples

import React from 'react'

import { storiesOf } from '@storybook/react'
// import { action } from '@storybook/addon-actions'
import { muiTheme } from 'storybook-addon-material-ui'
import SuperSelectField from '../src'
import welcome from './welcome'
import { multiple, multipleWithClose } from './multiple'
import customStyle from './customStyle'
import autocomplete from './autocomplete'
import optionsGrouping from './optionsGrouping'

storiesOf('Welcome', module).addDecorator(muiTheme()).add('to SuperSelectField', welcome)

storiesOf('SuperSelectField', module)
  .addDecorator(muiTheme())

  .add('No child', () =>
    
    )
  .add('Single child', () =>
    
      <span label="Option 1" value="{1}">Option 1</span>
    )
  .add('Error text', () =&gt;
    
      <span label="Option 1" value="{1}">Option 1</span>
      <span label="Option 2" value="{2}">Option 2</span>

import { configure } from '@kadira/storybook';
import { addDecorator } from '@kadira/storybook';
import { muiTheme } from 'storybook-addon-material-ui';

// Add material-ui context for all stories
addDecorator(muiTheme());

const req = require.context('../src/components', true, /.stories.js$/)

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


configure(loadStories, module);

const reqThemes = require.context('../.themes/', true, /.json/);
const themesList = [];
reqThemes.keys().forEach((filename) => {
    themesList.push(reqThemes(filename));
});

/** note: decorators
 *  You can add decorator globally:
 *  addDecorator(muiTheme(greyTheme));
 *  You can pass a single object or an array of themes
 */


storiesOf('React App', module)
    .storyDecorator(muiTheme(themesList)) /* [lightTheme, darkTheme, greyTheme]*/
    .storyDecorator(story => (
      <div style="{{">
        <div style="{{">
          {story()}
          {/* SHOW_SUPPORT ?  : null*/}
        </div>
      </div>
    ))
    .storyDecorator(withKnobs)
    .chapter('App')
        .add('App', () =&gt; {
            setOptions({
                name: 'React Theming',
                url: 'https://github.com/sm-react/react-theming',
            });
            return ();

function loadStories() {
  addDecorator(muiTheme([theme, 'Light Theme', 'Dark Theme']))
  require('../stories/index.js');
  // You can require as many stories as you need.
}

import { addDecorator, configure } from "@storybook/react"
import centered from "@storybook/addon-centered"
import "storybook-addon-material-ui/register"
import { muiTheme } from "storybook-addon-material-ui"
import theme from "../src/theme"

function loadStories() {
  require("../stories/index")
}

addDecorator(centered)
addDecorator(muiTheme([theme]))
configure(loadStories, module)

import { muiTheme } from 'storybook-addon-material-ui'
import { createMuiTheme } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import JavascriptTimeAgo from 'javascript-time-ago'
import en from 'javascript-time-ago/locale/en'
import TimeAgo from '../components/TimeAgo'
import Logo from '../components/Logo'
import theme from '../theme'

const customTheme = createMuiTheme(theme)

window.JavascriptTimeAgo = JavascriptTimeAgo
JavascriptTimeAgo.locale(en)

storiesOf('Custom', module)
  .addDecorator(muiTheme([customTheme]))
  .add('Logo', () => )
  .add('TimeAgo', () => (
    
      2018-11-27T02:26:42.014852Z
    
  ))

const themesList = [];
reqThemes.keys().forEach((filename) => {
    themesList.push(reqThemes(filename));
});

storiesOf('Material-UI', module)
    .storyDecorator((story) => {
        const storyKind = story();
        return (
          <div style="{{">
            <div style="{{">
              {storyKind}
            </div>
          </div>);
    })
    .storyDecorator(muiTheme(themesList))
    .chapter('Themes')
        .add('All components', () =&gt; {
            setOptions({
                name: 'storybook-addon material-ui',
                url: 'https://github.com/sm-react/storybook-addon-material-ui',
                goFullScreen: false,
                downPanelInRight: false,
            });
            return ;
        })
        .endOfChapter()
    .chapter('Single examples')
    .add('Card', () =&gt; (
      
    ));

import React from 'react'
import { storiesOf } from '@storybook/react'
import { muiTheme } from 'storybook-addon-material-ui'
import { createMuiTheme } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import theme from '../theme'

const customTheme = createMuiTheme(theme)

storiesOf('Typography', module)
  .addDecorator(muiTheme([customTheme]))
  .add('V2 Variants', () => (
    
      
        h1. Heading
      
      
        h2. Heading
      
      
        h3. Heading
      
      
        h4. Heading
      
      
        h5. Heading

<div>italic</div>
      <div>noDecoration</div>
      <div>underline</div>
      <div>m3</div>
    
  ))

storiesOf('Full Page', module)
  .addDecorator(withKnobs)
  .addDecorator(
    withBackgrounds([
      { name: 'Gray', value: '#f2f2f2', default: true },
      { name: 'White', value: '#fff' },
    ]),
  )
  .addDecorator(muiTheme())
  .add('StoryHost', () =&gt; StoryHost)
  .add('StoryHost Border', () =&gt; StoryHost)
  .add('StoryHost Border/Dimensions', () =&gt; {
    const border = boolean('Border', true)
    const dimensions = boolean('Dimensions', true)
    const width = number('Width', 100)
    const height = number('height', 30)

    return (
      
        <div height="" style="{{">StoryHost</div>
      
    )
  })
  .add('StoryHost Width', () =&gt; (

hover: 'rgba(0, 0, 0, 0.08)',
    selected: 'rgba(0, 0, 0, 0.14)',
    disabledBackground: 'rgba(0, 0, 0, 0.12)',
    disabled: 'rgba(0, 0, 0, 0.26)',
    active: 'rgba(0, 0, 0, 0.54)',
  },
  primary: {
    main: '#42A5F5',
    light: 'rgb(103, 183, 247)',
    dark: 'rgb(46, 115, 171)',
    contrastText: 'rgba(0, 0, 0, 0.87)',
  },
};

storiesOf('Button', module)
  .addDecorator(muiTheme(theme))
  .add('Title', () =&gt; <title>)
  .add('ThemesList', () =&gt; (
    &lt;ThemesList
      themesList={[
        {
          name: 'Theme 1',
          query: '123',
        },
      ]}
    /&gt;
  ))
  .add('ThemeAva', () =&gt; (
    &lt;div style={{display: 'flex'}}&gt;
      &lt;div style={{ width: 200, height: 200, margin: 28, }}&gt;
        &lt;ThemeAva palette={palette}/&gt;
      &lt;/div&gt;</title>