@eureca/eureca-ui/.storybook/preview.js

UI component library of Eureca's user and admin apps

import React from 'react';
import { addParameters, addDecorator } from '@storybook/react';
import '@storybook/addon-console';

import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
import { ptBR } from 'date-fns/locale';
import { ThemeProvider } from '@material-ui/core';

import MuiTheme from '@/theme/mui';

const newViewPorts = {
  responsive: {
    name: 'Responsive',
    styles: {
      width: '95%',
      height: '95%',
    },
  },
  mobile: {
    name: 'Mobile',
    styles: {
      width: '320px',
      height: '567px',
    },
  },
  tablet: {
    name: 'Tablet',
    styles: {
      width: '768px',
      height: '1024px',
    },
  },
  Desktop: {
    name: 'Desktop',
    styles: {
      width: '1280px',
      height: '720px',
    },
  },
  Widescreen: {
    name: 'Widescreen',
    styles: {
      width: '1920px',
      height: '1080px',
    },
  },
};

addParameters({
  backgrounds: [
    {
      name: 'White',
      value: '#FFF',
    },
    {
      name: 'Light Gray',
      value: '#E5E5E5',
      default: true,
    },
    {
      name: 'Dark Gray',
      value: '#2A2934',
    },
  ],
  viewport: {
    viewports: newViewPorts,
    defaultViewport: 'responsive',
  },
  options: {
    showRoots: true,
  },
  knobs: {
    escapeHTML: false,
  },
});

addDecorator(story => (
  <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBR}>
    <ThemeProvider theme={MuiTheme}>{story()}</ThemeProvider>
  </MuiPickersUtilsProvider>
));