# @burnsred/utils-storybook

> Workaround for lagging @chakra-ui/storybook

Latest version **1.1.2** (published 2023-12-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @burnsred/utils-storybook
pnpm add @burnsred/utils-storybook
yarn add @burnsred/utils-storybook
bun add @burnsred/utils-storybook
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2023-12-26 |
| First published | 2023-06-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | burnsred |

## Links

- npm: https://www.npmjs.com/package/@burnsred/utils-storybook
- npm.io page: https://npm.io/package/@burnsred/utils-storybook

## Dependencies (1)

- [@chakra-ui/storybook-addon](https://npm.io/package/@chakra-ui/storybook-addon.md) ^4.0.16

## Recent versions

- 1.1.2 (latest) — 2023-12-26
- 1.1.1 — 2023-06-13
- 1.1.0 — 2023-06-13
- 1.0.1 — 2023-06-08

## README

# 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](https://github.com/chakra-ui/chakra-ui/issues/7402)

## Installing in a client project

```sh
npm i -D @burnsred/utils-storybook
```

```tsx
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:

```jsx
// 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>

```

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

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

export default withTheme(theme, MySpike)
``

---
_Source: https://npm.io/package/@burnsred/utils-storybook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._