Nonlinear Performance Magnification

    storybook-addon-grommet
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    storybook-addon-grommet

    A storybook addon to add a grommet theme selector in the toolbar

    Theme selector

    Live demo

    grommet-controls

    Installation

    npm i -D storybook-addon-grommet

    Configuration

    in the addons.js file in your storybook config, register storybook-addon-grommet:

    import 'storybook-addon-grommet/register'

    Usage

    In your config.js, define your theme configuration and pass it in to the addDecorator function

    import { addDecorator } from '@storybook/react'; // <- or your storybook framework
    import { withGrommet } from 'storybook-addon-grommet';
    import { grommet, dark } from 'grommet';
    import { black, light, materialdark, materiallight, metro } from 'grommet-controls';
     
    addDecorator(withGrommet({
        theme: 'grommet',
        themes: {
          grommet,
          dark,
          black,
          light,
          materialdark,
          materiallight,
          metro,
        },
        boxProps: {
          align: 'start',
        },
        grommetProps: {
            full: true,
        }
      }
    ));

    Preview

    storybook-addon-grommet wraps the preview stories with a <Grommet /> and a <Box/> components which properties are configurable

    <Grommet theme={themes[state]} {...grommetProps}>
      <Box {...boxProps}>
        {children}
      </Box>  
    </Grommet>
    

    Options

    theme: initially selected theme
    themes: object with keys being the name of the theme and the values being the theme object
    boxProps: <Box /> properties
    grommetProps: <Grommet /> properties

    Install

    npm i storybook-addon-grommet

    DownloadsWeekly Downloads

    1,259

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    10.4 kB

    Total Files

    12

    Last publish

    Collaborators

    • atanasster