This is a Storybook project demonstrating StyleX integration with component documentation and visual testing.

First, run the development server:

npm run storybook
# or
yarn storybook
# or
pnpm storybook

Open http://localhost:6006 with your browser to see the Storybook interface.

You can start editing the components by modifying files in the stories/ directory. Storybook will automatically reload as you edit the files.

This project includes both snapshot tests and visual regression tests:

Run unit tests with snapshot testing:

npm run test
# or
pnpm test

Update snapshots after intentional changes:

npm run test:update
# or
pnpm test:update

Run Playwright visual tests to capture and compare component screenshots:

# First, build Storybook
npm run build

# Run visual tests
npm run test:visual
# or
pnpm test:visual

Update visual baselines after intentional UI changes:

npm run test:visual -- --update-snapshots
# or
pnpm test:visual --update-snapshots

Visual test results are available at visual-tests/playwright-report/.

To build the static Storybook for deployment:

npm run build
# or
pnpm build

The static build will be output to storybook-static/.

To learn more about Storybook and StyleX, take a look at the following resources:

• Storybook Documentation - learn about Storybook features and API.
• StyleX Documentation - learn about StyleX features and usage.
• Learn Storybook - interactive Storybook tutorials.
• Playwright Documentation - learn about visual testing with Playwright.

You can check out the Storybook GitHub repository and the StyleX GitHub repository - your feedback and contributions are welcome!