Industry standard frontend workshop. Develop, test, and document components with ease. Open-source & maintained by @chromaticcom
- Tweets 7,014
- Following 393
- Followers 25,682
- Likes 6,645
ALT 10.4. Anthropic, OpenAI, Gemini, and TanStack logos
ALT How to review agent-built UI with Storybook webinar
ALT how to review agent-build ui with storybook webinar
ALT TanStack + Storybook
ALT Orders.stories.ts file containing: import { mocked } from 'storybook/test'; // 👇 Automatically mocked import { getOrders } from '../server/orders'; import { OrdersList } from './OrdersList'; const meta = { component: OrdersList, } satisfies Meta<typeof OrdersList>; export default meta; type Story = StoryObj<typeof meta>; // 👇 This story will render with a network error export const OrdersFailed: Story = { beforeEach: async () => { mocked(getOrders).mockRejectedValueOnce(new Error('Network unreachable')); }, };
ALT Page.stories.ts file containing: import type { Meta, StoryObj } from '@storybook/tanstack-react'; import { Route } from './Page'; const meta = { parameters: { layout: 'fullscreen', tanstack: { router: { route: Route, // 👈 Supply the Route here // 👇 Rest of these properties are type-safe params: { id: '42' }, query: { tab: 'details' }, }, }, }, } satisfies Meta<typeof Route>; export default meta; type Story = StoryObj<typeof meta>; export const Default: Story = {};
ALT from prototype to production webinar bolt and chromatic
ALT vitest-chromatic-integration-early-access-program
ALT react native early access program chromatic
![Terminal window displaying:
Summary:
- Ran `storybook init` (Storybook 10.4.0 + React/Vite framework, addons:
vitest, a11y, docs, chromatic-com, mcp)
- Ran `storybook ai setup` and followed its playbook
- Installed MSW deps: `msw`, `msw-storybook-addon`, `mockdate`; ran
`msw init ./public`
- Configured `.storybook/main.ts` with staticDirs: `['../public']`
- Built shared `.storybook/preview.tsx` with the real provider tree
(MemoryRouter + Redux store + styled-components ThemeProvider + GlobalStyle),
MSW loader, MockDate, and a #modal portal-root decorator
- Wrote MSW handlers for mealdrop.netlify.app/.netlify/functions/restaurants
(list + by-id)
- Created 10 colocated `*.stories.tsx` files (Button, Badge, Heading, Body,
Review, Logo, Spinner, TopBanner, ErrorBlock, RestaurantCard) — 37 stories
total, plus matching names (Default, Disabled, New, Closed, Loading) that
the pre-existing `.test.tsx` files compose
- Included one CssCheck story on Button assert](/pic/orig/media%2FHIsyscRWgAAithl.jpg)
ALT Terminal window displaying: Summary: - Ran `storybook init` (Storybook 10.4.0 + React/Vite framework, addons: vitest, a11y, docs, chromatic-com, mcp) - Ran `storybook ai setup` and followed its playbook - Installed MSW deps: `msw`, `msw-storybook-addon`, `mockdate`; ran `msw init ./public` - Configured `.storybook/main.ts` with staticDirs: `['../public']` - Built shared `.storybook/preview.tsx` with the real provider tree (MemoryRouter + Redux store + styled-components ThemeProvider + GlobalStyle), MSW loader, MockDate, and a #modal portal-root decorator - Wrote MSW handlers for mealdrop.netlify.app/.netlify/functions/restaurants (list + by-id) - Created 10 colocated `*.stories.tsx` files (Button, Badge, Heading, Body, Review, Logo, Spinner, TopBanner, ErrorBlock, RestaurantCard) — 37 stories total, plus matching names (Default, Disabled, New, Closed, Loading) that the pre-existing `.test.tsx` files compose - Included one CssCheck story on Button assert
ALT Page.stories.ts file, containing: import type { Meta, StoryObj } from '@storybook/tanstack-react'; import { Route } from './Page'; const meta = { parameters: { layout: 'fullscreen', tanstack: { router: { route: Route, // 👈 Supply the Route here // 👇 Rest of these properties are type-safe params: { id: '42' }, query: { tab: 'details' }, }, }, }, } satisfies Meta<typeof Route>; export default meta;