Chromatic Visual Regression Setup

Chromatic runs automatically on every pull request via the chromatic job in .github/workflows/ci.yml. It builds the Storybook in apps/storybook/ and compares it against the last accepted baseline, surfacing visual diffs as a PR check.

Prerequisites

• A Chromatic account linked to the bloomsparkagency GitHub organization.

Obtaining the project token

1. Sign in to https://www.chromatic.com/.
2. Select the map project (or create it if this is the first run).
3. Go to Manage → Configure and copy the Project Token.

Setting the repository secret

1. Open the GitHub repository → Settings → Secrets and variables → Actions.
2. Click New repository secret.
3. Name: CHROMATIC_PROJECT_TOKEN
4. Value: paste the token copied above.
5. Click Add secret.

Once the secret is set, every PR will run a visual diff and post the Chromatic diff link as a GitHub check. PRs with unreviewed visual changes will show a failing check until the changes are accepted (or rejected) in the Chromatic UI.

Local usage

Run Chromatic locally against the current branch:

pnpm --filter storybook chromatic -- --project-token=<your-token>

Or using npx from the storybook directory:

cd apps/storybook
npx chromatic --project-token=<your-token>

Flags in use

Flag	Purpose
--exit-zero-on-changes	CI exits 0 even when visual changes are detected. Remove this flag once a baseline is established and you want regressions to block merges.
fetch-depth: 0	Full git history checkout so Chromatic can locate the ancestor build for diffing.