Merge pull request #26233 from storybookjs/norbert/upgrade-chromatic

Build: Move chromatic to `scripts` directory

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -3,7 +3,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 import { userEvent, within, waitFor, expect } from '@storybook/test';
-import isChromatic from 'chromatic/isChromatic';
+import { isChromatic } from '../../../../ui/.storybook/isChromatic';
 
 import { getCalls, getInteractions } from '../mocks';
 import { InteractionsPanel } from './InteractionsPanel';

code/package.json

@@ -47,8 +47,8 @@
     "storybook:blocks:build": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:build",
     "storybook:blocks:chromatic": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}",
     "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook",
-    "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook",
-    "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded",
+    "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook --webpack-stats-json",
+    "storybook:ui:chromatic": "../scripts/node_modules/.bin/chromatic --build-script-name storybook:ui:build --storybook-base-dir ./ --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded",
     "task": "yarn --cwd ../scripts task",
     "test": "NODE_OPTIONS=--max_old_space_size=4096 vitest run",
     "test:watch": "NODE_OPTIONS=--max_old_space_size=4096 vitest watch"
@@ -187,7 +187,6 @@
     "@typescript-eslint/parser": "^6.18.1",
     "@vitejs/plugin-react": "^3.0.1",
     "@vitest/coverage-v8": "^1.2.2",
-    "chromatic": "7.1.0",
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.3",
     "danger": "^11.2.6",
@@ -222,7 +221,6 @@
     "typescript": "^5.3.2",
     "util": "^0.12.4",
     "vite": "^4.0.0",
-    "vite-plugin-turbosnap": "^1.0.1",
     "vitest": "^1.2.2",
     "wait-on": "^7.0.1"
   },

code/ui/.storybook/isChromatic.ts

@@ -0,0 +1,8 @@
+export function isChromatic(windowArg?: any) {
+  const windowToCheck = windowArg || (typeof window !== 'undefined' && window);
+  return !!(
+    windowToCheck &&
+    (windowToCheck.navigator.userAgent.match(/Chromatic/) ||
+      windowToCheck.location.href.match(/chromatic=true/))
+  );
+}

code/ui/.storybook/main.ts

@@ -1,5 +1,4 @@
 import path from 'path';
-import pluginTurbosnap from 'vite-plugin-turbosnap';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { mergeConfig } from 'vite';
 import type { StorybookConfig } from '../../frameworks/react-vite';
@@ -79,11 +78,6 @@ const config: StorybookConfig = {
             : {}),
         },
       },
-      plugins: [
-        configType === 'PRODUCTION'
-          ? pluginTurbosnap({ rootDir: path.resolve(__dirname, '../..') })
-          : [],
-      ],
       optimizeDeps: { force: true },
       build: {
         // disable sourcemaps in CI to not run out of memory

code/ui/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import { global } from '@storybook/global';
 import React, { Fragment, useEffect } from 'react';
-import isChromatic from 'chromatic/isChromatic';
+import { isChromatic } from './isChromatic';
 import {
   Global,
   ThemeProvider,

code/ui/manager/src/typings.d.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-underscore-dangle,  @typescript-eslint/naming-convention */
-declare module 'chromatic/isChromatic';
 
 declare var DOCS_OPTIONS: any;
 declare var CONFIG_TYPE: 'DEVELOPMENT' | 'PRODUCTION';

code/yarn.lock

@@ -6547,7 +6547,6 @@ __metadata:
     "@typescript-eslint/parser": "npm:^6.18.1"
     "@vitejs/plugin-react": "npm:^3.0.1"
     "@vitest/coverage-v8": "npm:^1.2.2"
-    chromatic: "npm:7.1.0"
     concurrently: "npm:^5.3.0"
     cross-env: "npm:^7.0.3"
     danger: "npm:^11.2.6"
@@ -6582,7 +6581,6 @@ __metadata:
     typescript: "npm:^5.3.2"
     util: "npm:^0.12.4"
     vite: "npm:^4.0.0"
-    vite-plugin-turbosnap: "npm:^1.0.1"
     vitest: "npm:^1.2.2"
     wait-on: "npm:^7.0.1"
   dependenciesMeta:
@@ -11473,17 +11471,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:7.1.0":
-  version: 7.1.0
-  resolution: "chromatic@npm:7.1.0"
-  bin:
-    chroma: dist/bin.js
-    chromatic: dist/bin.js
-    chromatic-cli: dist/bin.js
-  checksum: d5bc18f97b7829799673018e8eaa0ef6537a47e3050208b791e083bef6753c44a2506f1fef2180b71fbf05c67bc80cdaf253ea599924dee82103e58ed344ef8a
-  languageName: node
-  linkType: hard
-
 "chromatic@npm:^9.0.0":
   version: 9.1.0
   resolution: "chromatic@npm:9.1.0"
@@ -29136,13 +29123,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-turbosnap@npm:^1.0.1":
-  version: 1.0.3
-  resolution: "vite-plugin-turbosnap@npm:1.0.3"
-  checksum: fd4a283708e24b54442b5db05461f8302bc57094234fd5b0dae1a6f76bb79078c68a729e516f352d04b89fea7c459f8272921f788bd3cd20d1488c7e73d7238e
-  languageName: node
-  linkType: hard
-
 "vite@npm:4.5.0":
   version: 4.5.0
   resolution: "vite@npm:4.5.0"

scripts/package.json

@@ -113,6 +113,7 @@
     "boxen": "^7.1.1",
     "browser-assert": "^1.2.1",
     "chalk": "^4.1.0",
+    "chromatic": "^11.0.0",
     "codecov": "^3.8.1",
     "commander": "^6.2.1",
     "cross-env": "^7.0.3",

scripts/yarn.lock

@@ -2760,6 +2760,7 @@ __metadata:
     boxen: "npm:^7.1.1"
     browser-assert: "npm:^1.2.1"
     chalk: "npm:^4.1.0"
+    chromatic: "npm:^11.0.0"
     codecov: "npm:^3.8.1"
     commander: "npm:^6.2.1"
     cross-env: "npm:^7.0.3"
@@ -5206,6 +5207,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chromatic@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "chromatic@npm:11.0.0"
+  peerDependencies:
+    "@chromatic-com/cypress": ^0.5.2 || ^1.0.0
+    "@chromatic-com/playwright": ^0.5.2 || ^1.0.0
+  peerDependenciesMeta:
+    "@chromatic-com/cypress":
+      optional: true
+    "@chromatic-com/playwright":
+      optional: true
+  bin:
+    chroma: dist/bin.js
+    chromatic: dist/bin.js
+    chromatic-cli: dist/bin.js
+  checksum: edd92b3fb370c8d358cd587392686e83af34aec0e5d6592bfc637d6b6c1f670f3910ff572182192dcf1adf8e34384f785597dcdcb89196482f0c6fa55547d1bf
+  languageName: node
+  linkType: hard
+
 "ci-info@npm:^2.0.0":
   version: 2.0.0
   resolution: "ci-info@npm:2.0.0"