New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,376
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-grommet
A storybook addon to select grommet themes
npm install storybook-addon-grommet
Last updated over 2 years ago
1.4k
Downloads per week
Readme View on GitHub

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

Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI