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

To help you get started, we’ve selected a few storybook-addon-material-ui examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Sharlaan / material-ui-superselectfield / stories / index.js View on Github external
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', () =>
    <SuperSelectField
      style={{ width: 300, margin: 20 }}>
    </SuperSelectField>)
  .add('Single child', () =>
    <SuperSelectField
      style={{ width: 300, margin: 20 }}>
      <span value={1} label='Option 1'>Option 1</span>
    </SuperSelectField>)
  .add('Error text', () =>
    <SuperSelectField
      errorText='Error text warning something is wrong!'
      style={{ width: 300, margin: 20 }}>
      <span value={1} label='Option 1'>Option 1</span>
      <span value={2} label='Option 2'>Option 2</span>
github mongodb / stitch-examples / PlateSpace / Web / .storybook / config.js View on Github external
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);
github sm-react / storybook-chapters / example / basic / src / stories / index.js View on Github external
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={{ display: 'flex', justifyContent: 'center' }}>
        <div style={{ width: '50%', maxWidth: 500, minWidth: 200 }}>
          {story()}
          {/* SHOW_SUPPORT ? <SupportProject /> : null*/}
        </div>
      </div>
    ))
    .storyDecorator(withKnobs)
    .chapter('App')
        .add('App', () => {
            setOptions({
                name: 'React Theming',
                url: 'https://github.com/sm-react/react-theming',
            });
            return (<App />);
github ETCDEVTeam / emerald-wallet / packages / desktop / .storybook / config.js View on Github external
function loadStories() {
  addDecorator(muiTheme([theme, 'Light Theme', 'Dark Theme']))
  require('../stories/index.js');
  // You can require as many stories as you need.
}
github satoshipay / solar / .storybook / config.js View on Github external
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)
github smartcontractkit / chainlink / styleguide / stories / custom.stories.js View on Github external
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', () => <Logo width={40} height={50} />)
  .add('TimeAgo', () => (
    <Typography>
      <TimeAgo>2018-11-27T02:26:42.014852Z</TimeAgo>
    </Typography>
  ))
github sm-react / storybook-chapters / example / basic / src / MaterialUI / index.story.jsx View on Github external
const themesList = [];
reqThemes.keys().forEach((filename) => {
    themesList.push(reqThemes(filename));
});

storiesOf('Material-UI', module)
    .storyDecorator((story) => {
        const storyKind = story();
        return (
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div style={{ width: '60%', maxWidth: 1000, minWidth: 600 }} >
              {storyKind}
            </div>
          </div>);
    })
    .storyDecorator(muiTheme(themesList))
    .chapter('Themes')
        .add('All components', () => {
            setOptions({
                name: 'storybook-addon material-ui',
                url: 'https://github.com/sm-react/storybook-addon-material-ui',
                goFullScreen: false,
                downPanelInRight: false,
            });
            return <Components />;
        })
        .endOfChapter()
    .chapter('Single examples')
    .add('Card', () => (
      <Card />
    ));
github smartcontractkit / chainlink / styleguide / stories / typography.stories.js View on Github external
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', () => (
    <React.Fragment>
      <Typography component="h2" variant="h1" gutterBottom>
        h1. Heading
      </Typography>
      <Typography variant="h2" gutterBottom>
        h2. Heading
      </Typography>
      <Typography variant="h3" gutterBottom>
        h3. Heading
      </Typography>
      <Typography variant="h4" gutterBottom>
        h4. Heading
      </Typography>
      <Typography variant="h5" gutterBottom>
        h5. Heading
github sharynjs / sharyn / src / stories / index.stories.js View on Github external
<Div italic>italic</Div>
      <Div noDecoration>noDecoration</Div>
      <Div underline>underline</Div>
      <Div m3>m3</Div>
    </div>
  ))

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

    return (
      <StoryHost {...{ border, dimensions }}>
        <div style={{ width, height }}>StoryHost</div>
      </StoryHost>
    )
  })
  .add('StoryHost Width', () => (
    <StoryHost border width={200}>
github react-theming / create-mui-theme / src / stories / index.js View on Github external
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', () => <Title />)
  .add('ThemesList', () => (
    <ThemesList
      themesList={[
        {
          name: 'Theme 1',
          query: '123',
        },
      ]}
    />
  ))
  .add('ThemeAva', () => (
    <div style={{display: 'flex'}}>
      <div style={{ width: 200, height: 200, margin: 28, }}>
        <ThemeAva palette={palette}/>
      </div>

storybook-addon-material-ui

Storybook Addon for Material UI Library

MIT
Latest version published 2 years ago

Package Health Score

62 / 100
Full package analysis

Popular storybook-addon-material-ui functions

Popular JavaScript code snippets

Find secure code to use in your application or website