Create official Chakra UI Storybook addon

The goal of this issue is to create an official Storybook preset addon for Chakra UI. Offering an official preset means that users need only install the preset to quickly get up and running with Chakra inside Storybook.

Tasks

• Automatically decorate stories with ChakraProvider
• Enable customization of ChakraProvider
  • Custom theme
  • resetCSS, portalZIndex, etc. props
• Handle overriding Storybook emotion package conflicts? (see https://github.com/storybookjs/storybook/issues/13114 and #2527 for more context)
• Dogfood the preset package for our own internal Storybook setup (the ultimate test!)

Possible stretch goals

• Add a color mode toggle button to the UI Toolbar to allow users to quickly switch color mode of the current story

[with-heart]

I’d like to tackle this sometime this week. Going to reopen.

[TimKolberger]

We just released @chakra-ui/storybook-addon:

Use the official Storybook Addon for Chakra UI to configure Storybook to automatically wrap your stories with the <ChakraProvider /> and add a color mode toggle.

Installation

yarn add -D @chakra-ui/storybook-addon
yarn add @chakra-ui/icons

or

npm i -D @chakra-ui/storybook-addon
npm i @chakra-ui/icons

Usage

Add the addon to your configuration in .storybook/main.js:

module.exports = {
  addons: ['@chakra-ui/storybook-addon'],
}

You can specify global parameters for the addon in .storybook/preview.js. These options are the same as the props to ChakraProvider (without children).

// .storybook/preview.js

const theme = require('../path/to/your/theme')

export const parameters = {
  chakra: {
    theme,
  },
}