Use when adding or writing Storybook stories for React components in this project — covers file structure, meta config, named exports, decorators, and required variants
Stories live co-located with their component (ComponentName.stories.tsx). Each story file exports a default meta object and named Story exports for each variant. This project uses @storybook/react with TanStack Router and next-themes.
export default meta for the meta object (framework config file — the one exception to the named-export rule)export const Default: Story = {}Default storytags: ['autodocs'] in meta unless there's a reason not toReact — JSX transform handles itsrc/components/MyComponent.stories.tsx
import { MyComponent } from './MyComponent';
import type { Meta, StoryObj } from '@storybook/react';
const meta: Meta<typeof MyComponent> = {
component: MyComponent,
tags: ['autodocs'],
args: {
// shared default props
},
argTypes: {
// Add a control for every non-callback, non-JSX prop. See "Controls Policy" below.
},
};
export default meta;
type Story = StoryObj<typeof MyComponent>;
export const Default: Story = {};
export const SomeVariant: Story = {
args: { propName: value },
};
Use decorators when the component depends on context providers:
| Needs | Decorator |
|---|---|
TanStack Router (useNavigate, Link, params) | withRouter from ../../.storybook/decorators/withRouter |
Database / RxDB (useSettings, useRxDB, any DB hook) | withDb from ../../.storybook/decorators/withDb |
| Theme toggle | withTheme — already applied globally via preview.tsx |
| ThemeProvider | Already applied globally — do NOT add again |
When both are needed, put withDb first (outermost), then withRouter:
import { withDb } from '../../.storybook/decorators/withDb';
import { withRouter } from '../../.storybook/decorators/withRouter';
const meta: Meta<typeof MyComponent> = {
component: MyComponent,
tags: ['autodocs'],
decorators: [withDb, withRouter],
};
When a story wraps in AnswerGameProvider, withDb must come before the provider wrapper: