From 6cfefc0685d6c35f55c28fdca0993f65aaa42bdd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?McKayla=20=E3=81=AF=E3=81=AA?= Date: Thu, 30 Jul 2026 11:47:26 -0600 Subject: [PATCH] chore: replace `isChromatic` with `isPixel` (#26832) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Swaps `chromatic/isChromatic` for `@coder/pixel-storybook`'s `isPixel()` so the snapshot-determinism gates (fixed workspace name, frozen Spinner, fixed CLI origin, no scroll, font loader) fire under pixel instead of Chromatic. Drops the now-unused `chromatic` dependency. Stacked on #27658 (pixel-storybook 0.3); `isPixel` comes from the new `@coder/pixel-storybook/storyapi` subpath. Verified the app and Storybook builds both bundle `isPixel` cleanly, and `tsc` passes with the dependency removed. This is the last piece of the Chromatic removal; the story params migrated in #26844 and the addon came out in #27353.
Chromatic removal sequence 1. Remove the Chromatic CI job + scripts + docs reference. (#26777, merged) 2. **This PR** — `isChromatic()` → `isPixel()`; drop the `chromatic` dependency. 3. `data-pixel` + `pixel.exclude`; drop `delay` / `pauseAnimationAtEnd`. (#26778, merged) 4. Migrate story snapshot params (`viewports` / `diffThreshold` / theme modes → `pixel.matrix`); delete `testHelpers/chromatic.ts`. (#26844, merged) 5. Remove the `@chromatic-com/storybook` addon. (done on main in #27353)
--- > Generated by Coder Agents on behalf of @aslilac. --- site/.knip.jsonc | 1 - site/.storybook/preview.tsx | 12 +----------- site/package.json | 1 - site/pnpm-lock.yaml | 17 ----------------- site/src/components/Spinner/Spinner.tsx | 4 ++-- .../modules/workspaces/generateWorkspaceName.ts | 4 ++-- .../src/pages/CliInstallPage/CliInstallPage.tsx | 4 ++-- site/src/pages/TaskPage/TaskPage.tsx | 4 ++-- 8 files changed, 9 insertions(+), 38 deletions(-) diff --git a/site/.knip.jsonc b/site/.knip.jsonc index 536f5b035b..8235f2e8f1 100644 --- a/site/.knip.jsonc +++ b/site/.knip.jsonc @@ -23,7 +23,6 @@ "ignoreBinaries": ["make", "protoc"], "ignoreDependencies": [ "@babel/plugin-syntax-typescript", - "@coder/pixel-storybook", "@types/react-virtualized-auto-sizer", "ts-proto" ] diff --git a/site/.storybook/preview.tsx b/site/.storybook/preview.tsx index 3810e033c9..5d554465f0 100644 --- a/site/.storybook/preview.tsx +++ b/site/.storybook/preview.tsx @@ -7,8 +7,7 @@ import { StyledEngineProvider, } from "@mui/material/styles"; import { DecoratorHelpers } from "@storybook/addon-themes"; -import type { Decorator, Loader, Parameters } from "@storybook/react-vite"; -import isChromatic from "chromatic/isChromatic"; +import type { Decorator, Parameters } from "@storybook/react-vite"; import { StrictMode } from "react"; import { QueryClient, QueryClientProvider } from "react-query"; import { withRouter } from "storybook-addon-remix-react-router"; @@ -132,12 +131,3 @@ const withTheme: Decorator = (Story, context) => { }; export const decorators: Decorator[] = [withRouter, withQuery, withTheme]; - -// Try to fix storybook rendering fonts inconsistently -// https://www.chromatic.com/docs/font-loading/#solution-c-check-fonts-have-loaded-in-a-loader -const fontLoader = async () => ({ - fonts: await document.fonts.ready, -}); - -export const loaders: Loader[] = - isChromatic() && document.fonts ? [fontLoader] : []; diff --git a/site/package.json b/site/package.json index d82bc86817..aededc1127 100644 --- a/site/package.json +++ b/site/package.json @@ -161,7 +161,6 @@ "@vitest/browser-playwright": "4.1.7", "autoprefixer": "10.5.0", "babel-plugin-react-compiler": "1.0.0", - "chromatic": "11.29.0", "dpdm": "3.15.1", "express": "4.21.2", "jest-canvas-mock": "2.5.2", diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index d8c14abd19..322a6a9205 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -399,9 +399,6 @@ importers: babel-plugin-react-compiler: specifier: 1.0.0 version: 1.0.0 - chromatic: - specifier: 11.29.0 - version: 11.29.0 dpdm: specifier: 3.15.1 version: 3.15.1 @@ -3313,18 +3310,6 @@ packages: chroma-js@2.6.0: resolution: {integrity: sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A==, tarball: https://registry.npmjs.org/chroma-js/-/chroma-js-2.6.0.tgz} - chromatic@11.29.0: - resolution: {integrity: sha512-yisBlntp9hHVj19lIQdpTlcYIXuU9H/DbFuu6tyWHmj6hWT2EtukCCcxYXL78XdQt1vm2GfIrtgtKpj/Rzmo4A==, tarball: https://registry.npmjs.org/chromatic/-/chromatic-11.29.0.tgz} - hasBin: true - peerDependencies: - '@chromatic-com/cypress': ^0.*.* || ^1.0.0 - '@chromatic-com/playwright': ^0.*.* || ^1.0.0 - peerDependenciesMeta: - '@chromatic-com/cypress': - optional: true - '@chromatic-com/playwright': - optional: true - class-variance-authority@0.7.1: resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==, tarball: https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz} @@ -9518,8 +9503,6 @@ snapshots: chroma-js@2.6.0: {} - chromatic@11.29.0: {} - class-variance-authority@0.7.1: dependencies: clsx: 2.1.1 diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/Spinner/Spinner.tsx index b8abc7f9e5..847aa26ab7 100644 --- a/site/src/components/Spinner/Spinner.tsx +++ b/site/src/components/Spinner/Spinner.tsx @@ -4,7 +4,7 @@ * https://v0.dev/ help. */ -import isChromatic from "chromatic/isChromatic"; +import { isPixel } from "@coder/pixel-storybook/storyapi"; import { cva, type VariantProps } from "class-variance-authority"; import type { ReactNode } from "react"; import { cn } from "#/utils/cn"; @@ -59,7 +59,7 @@ export function Spinner({ rx="1" // 0.8 = leaves * 0.1 className={ - isChromatic() ? "" : "animate-[loading_0.8s_ease-in-out_infinite]" + isPixel() ? "" : "animate-[loading_0.8s_ease-in-out_infinite]" } style={{ transform: `rotate(${leaf * (360 / leaves.length)}deg)`, diff --git a/site/src/modules/workspaces/generateWorkspaceName.ts b/site/src/modules/workspaces/generateWorkspaceName.ts index 9dff54a59b..5edf72f877 100644 --- a/site/src/modules/workspaces/generateWorkspaceName.ts +++ b/site/src/modules/workspaces/generateWorkspaceName.ts @@ -1,4 +1,4 @@ -import isChromatic from "chromatic/isChromatic"; +import { isPixel } from "@coder/pixel-storybook/storyapi"; import { animals, colors, @@ -7,7 +7,7 @@ import { } from "unique-names-generator"; export const generateWorkspaceName = () => { - if (isChromatic()) { + if (isPixel()) { return "yellow-bird-23"; } const numberDictionary = NumberDictionary.generate({ min: 0, max: 99 }); diff --git a/site/src/pages/CliInstallPage/CliInstallPage.tsx b/site/src/pages/CliInstallPage/CliInstallPage.tsx index b48fb8b753..d406834ef5 100644 --- a/site/src/pages/CliInstallPage/CliInstallPage.tsx +++ b/site/src/pages/CliInstallPage/CliInstallPage.tsx @@ -1,10 +1,10 @@ -import isChromatic from "chromatic/isChromatic"; +import { isPixel } from "@coder/pixel-storybook/storyapi"; import type { FC } from "react"; import { pageTitle } from "#/utils/page"; import { CliInstallPageView } from "./CliInstallPageView"; const CliInstallPage: FC = () => { - const origin = isChromatic() ? "https://example.com" : location.origin; + const origin = isPixel() ? "https://example.com" : location.origin; return ( <> diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx index d6bc91a4c6..1c15ec4db2 100644 --- a/site/src/pages/TaskPage/TaskPage.tsx +++ b/site/src/pages/TaskPage/TaskPage.tsx @@ -1,4 +1,4 @@ -import isChromatic from "chromatic/isChromatic"; +import { isPixel } from "@coder/pixel-storybook/storyapi"; import { ArrowLeftIcon, PauseIcon, @@ -487,7 +487,7 @@ const TaskLogPreview: FC = ({ }) => { // Scroll to the bottom on mount since snapshot logs are static. const scrollToBottom = useCallback((el: HTMLDivElement | null) => { - if (!isChromatic() && el) { + if (!isPixel() && el) { el.scrollIntoView({ block: "end" }); } }, []);