@burnsred/utils-storybook

BurnsRED Storybook Utils

[!WARNING] Deprecated, prefer https://github.com/chakra-ui/chakra-ui/tree/main/tooling/storybook-addon/

@chakra-ui/storybook-addon is not yet supported by Storybook v7; this package provides a custom decorator to fill the gap.

Attention: We've detected that you're using the following addons in versions which are known to be incompatible with Storybook 7:

• @chakra-ui/storybook-addon@4.0.16

Storybook 7.0 - Use the new framework API · Issue #7402 · chakra-ui/chakra-ui

Installing in a client project

npm i -D @burnsred/utils-storybook

import type { Preview } from '@storybook/react';
import { createChakraThemeDecorator } from '@burnsred/utils-storybook';

import { localTheme } from '../src/theme';

const preview: Preview = {
  // ...
};

// note that `decorators` needs to be defined as a separate export to work properly
export const decorators = [
  createChakraThemeDecorator(localTheme),
];

export default preview;

Stories will now be rendered with the ChakraThemeDecorator 👍

MDX

Rendering with a Chakra theme in MDX files requires use of the withTheme or Themed helpers:

// Introduction.mdx
import { Themed } from '@burnsred/utils-storybook';
import { Button } from '@chakra-ui/react';
import { Meta } from '@storybook/blocks';

import { localTheme as theme } from '../src/theme';
import MySpike from './MySpike.tsx';

<Meta title="Introduction" />

## Using `withTheme`

✅ Preferred:

<MySpike />

## Using `Themed`

❌ Avoid: DX in MDX files is atrocious:

<Themed theme={theme}>
  <Button variant="solid">Chakra Button</Button>
</Themed>

// MySpike.tsx
import { withTheme } from '@burnsred/utils-storybook';

export const MySpike = () => <Button variant="solid">Chakra Button</Button>

export default withTheme(theme, MySpike)
``