Storybook Cheat Sheet

// Button.stories.tsximport type { Meta, StoryObj } from '@storybook/react'import { Button } from './Button'const meta: Meta<typeof Button> = {  title: 'Components/Button',  component: Button,  args: { children: 'Click me' },  argTypes: {    variant: { control: 'select', options: ['primary', 'secondary', 'ghost'] },  },}export default metatype Story = StoryObj<typeof Button>export const Primary: Story = { args: { variant: 'primary' } }export const Disabled: Story = { args: { disabled: true } }

const meta: Meta<typeof Cart> = {  component: Cart,  decorators: [    (Story) => (      <ThemeProvider theme="light">        <Story />      </ThemeProvider>    ),  ],}// .storybook/preview.tsx — applies globallyexport const decorators = [  (Story) => <QueryClientProvider client={queryClient}><Story /></QueryClientProvider>,]

import { within, userEvent, expect } from '@storybook/test'export const SubmitsForm: Story = {  play: async ({ canvasElement }) => {    const canvas = within(canvasElement)    await userEvent.type(canvas.getByLabelText('Email'), 'a@b.com')    await userEvent.click(canvas.getByRole('button', { name: /submit/i }))    await expect(canvas.getByText('Success')).toBeInTheDocument()  },}

import { http, HttpResponse } from 'msw'export const LoadedState: Story = {  parameters: {    msw: {      handlers: [        http.get('/api/user', () => HttpResponse.json({ name: 'Ana' })),      ],    },  },}