storybook-addon-grommet
A storybook addon to add a grommet theme selector in the toolbar
Live demo
Installation
npm i -D storybook-addon-grommet
Configuration
in the addons.js
file in your storybook config, register storybook-addon-grommet
:
Usage
In your config.js, define your theme configuration and pass it in to the addDecorator
function
; // <- or your storybook framework;;; ;
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