Merge pull request #24203 from storybookjs/upgrade-to-VT-version-77

Build: Upgrade Chromatic addon to v77 and use `chromatic.config.json`

code/chromatic.config.json

@@ -0,0 +1,8 @@
+{
+  "projectId": "Project:635781f3500dd2c49e189caf",
+  "projectToken": "80b312430ec4",
+  "buildScriptName": "storybook:ui:build",
+  "onlyChanged": true,
+  "storybookConfigDir": "./ui/.storybook",
+  "storybookBaseDir": "./code"
+}

code/ui/.storybook/main.ts

@@ -51,14 +51,7 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
     '@storybook/addon-designs',
-    {
-      name: '@chromaui/addon-visual-tests',
-      options: {
-        projectId: 'Project:635781f3500dd2c49e189caf',
-        projectToken: '80b312430ec4',
-        buildScriptName: 'storybook:ui:build',
-      },
-    },
+    '@chromaui/addon-visual-tests',
   ],
   framework: {
     name: '@storybook/react-vite',

code/ui/components/package.json

@@ -71,7 +71,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@chromaui/addon-visual-tests": "^0.0.49",
+    "@chromaui/addon-visual-tests": "^0.0.77",
     "@popperjs/core": "^2.6.0",
     "@storybook/icons": "^1.1.6",
     "@types/react-syntax-highlighter": "11.0.5",

code/yarn.lock

@@ -2371,14 +2371,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chromaui/addon-visual-tests@npm:^0.0.49":
-  version: 0.0.49
-  resolution: "@chromaui/addon-visual-tests@npm:0.0.49"
+"@chromaui/addon-visual-tests@npm:^0.0.77":
+  version: 0.0.77
+  resolution: "@chromaui/addon-visual-tests@npm:0.0.77"
   dependencies:
-    "@storybook/csf-tools": 7.4.0
     "@storybook/design-system": ^7.15.15
-    chromatic: 6.24.0
+    chromatic: 7.2.0-next.1
     date-fns: ^2.30.0
+    filesize: ^10.0.12
+    jsonfile: ^6.1.0
     pluralize: ^8.0.0
     ts-dedent: ^2.2.0
     urql: ^4.0.3
@@ -2399,7 +2400,7 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: af5860520f2652d866017ca24d11fc38c18030c7452ba430c2f399c41ef5808af9187ded1f1fdcf936e97c68e821f8cce53495a54d8f40a75b07dfc7b94da3c4
+  checksum: e1f51e73bb95a66f9753a3f9acdcdfad2975c450588f2403e20840a1b4e9ba7a71906db53adcb3d6baecce1f329166835f24cabe9ff40f51609848f9c1b67988
   languageName: node
   linkType: hard
 
@@ -6639,20 +6640,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/channels@npm:7.4.0":
-  version: 7.4.0
-  resolution: "@storybook/channels@npm:7.4.0"
-  dependencies:
-    "@storybook/client-logger": 7.4.0
-    "@storybook/core-events": 7.4.0
-    "@storybook/global": ^5.0.0
-    qs: ^6.10.0
-    telejson: ^7.2.0
-    tiny-invariant: ^1.3.1
-  checksum: 5f12fe715b33aaf1889a51ed2c68d37c286d0c6a1d546606451d421bf4514a66757db8171a69f09d454cf875f7c9857245939a7a70a5612517b9e88f168bbcfa
-  languageName: node
-  linkType: hard
-
 "@storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels":
   version: 0.0.0-use.local
   resolution: "@storybook/channels@workspace:lib/channels"
@@ -6735,15 +6722,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/client-logger@npm:7.4.0":
-  version: 7.4.0
-  resolution: "@storybook/client-logger@npm:7.4.0"
-  dependencies:
-    "@storybook/global": ^5.0.0
-  checksum: 00d73356f506dbc85616739fd7ebbc175990664aee7e0ca0e2f2a7244337ba2ea8f0a86d7003b461548b31a514268fea32a34ea74a18299060a62e0825ceb402
-  languageName: node
-  linkType: hard
-
 "@storybook/client-logger@npm:7.4.1":
   version: 7.4.1
   resolution: "@storybook/client-logger@npm:7.4.1"
@@ -6802,7 +6780,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/components@workspace:ui/components"
   dependencies:
-    "@chromaui/addon-visual-tests": ^0.0.49
+    "@chromaui/addon-visual-tests": ^0.0.77
     "@popperjs/core": ^2.6.0
     "@radix-ui/react-select": ^1.2.2
     "@radix-ui/react-toolbar": ^1.0.4
@@ -6878,15 +6856,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-events@npm:7.4.0":
-  version: 7.4.0
-  resolution: "@storybook/core-events@npm:7.4.0"
-  dependencies:
-    ts-dedent: ^2.0.0
-  checksum: 6a80acb1c333363b03f69f22e5d98a50b94f11f9743cc075d0442e0153aaf2cb7fc37baee3c4b480b89e5f1f98d997e866db2800286f5252ee78dfa9f116bd6d
-  languageName: node
-  linkType: hard
-
 "@storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events":
   version: 0.0.0-use.local
   resolution: "@storybook/core-events@workspace:lib/core-events"
@@ -6981,23 +6950,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/csf-tools@npm:7.4.0":
-  version: 7.4.0
-  resolution: "@storybook/csf-tools@npm:7.4.0"
-  dependencies:
-    "@babel/generator": ^7.22.9
-    "@babel/parser": ^7.22.7
-    "@babel/traverse": ^7.22.8
-    "@babel/types": ^7.22.5
-    "@storybook/csf": ^0.1.0
-    "@storybook/types": 7.4.0
-    fs-extra: ^11.1.0
-    recast: ^0.23.1
-    ts-dedent: ^2.0.0
-  checksum: 85ec0953ed82dfcade9eab296e55479a71f965f740bf3befc9eb155e161e510b9ee78c8a89f729bd91887f3f988b78f03076655f26444d62155d5c6c35daefe6
-  languageName: node
-  linkType: hard
-
 "@storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools":
   version: 0.0.0-use.local
   resolution: "@storybook/csf-tools@workspace:lib/csf-tools"
@@ -8237,19 +8189,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/types@npm:7.4.0":
-  version: 7.4.0
-  resolution: "@storybook/types@npm:7.4.0"
-  dependencies:
-    "@storybook/channels": 7.4.0
-    "@types/babel__core": ^7.0.0
-    "@types/express": ^4.7.0
-    "@types/react": ^16.14.34
-    file-system-cache: 2.3.0
-  checksum: 982a21466def5312dd87078abdd83c85d58445e00ea3aed7dcdf27279721eee67b390e41b91c886bb8d4364f675bfd1333d3812d1d398e66170eca1fe6015ff7
-  languageName: node
-  linkType: hard
-
 "@storybook/types@workspace:*, @storybook/types@workspace:lib/types":
   version: 0.0.0-use.local
   resolution: "@storybook/types@workspace:lib/types"
@@ -13137,25 +13076,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:6.24.0":
-  version: 6.24.0
-  resolution: "chromatic@npm:6.24.0"
+"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: e5ebc1ff78076e5112d79fd5f4f133febf789cb4713149507f755741cd069daf3f0a2c7f13b7b176becde7734cf010d1d7628a22f3e28087a6faa17f28ffd798
+  checksum: d5bc18f97b7829799673018e8eaa0ef6537a47e3050208b791e083bef6753c44a2506f1fef2180b71fbf05c67bc80cdaf253ea599924dee82103e58ed344ef8a
   languageName: node
   linkType: hard
 
-"chromatic@npm:7.1.0":
-  version: 7.1.0
-  resolution: "chromatic@npm:7.1.0"
+"chromatic@npm:7.2.0-next.1":
+  version: 7.2.0-next.1
+  resolution: "chromatic@npm:7.2.0-next.1"
   bin:
     chroma: dist/bin.js
     chromatic: dist/bin.js
     chromatic-cli: dist/bin.js
-  checksum: d5bc18f97b7829799673018e8eaa0ef6537a47e3050208b791e083bef6753c44a2506f1fef2180b71fbf05c67bc80cdaf253ea599924dee82103e58ed344ef8a
+  checksum: bae3db70834766b82488e2c419f9e4dc297f372ba6987b1abf7688f875b1405caa37375c43f0a02b391b6c23514f04e9a5ff759ef5c3c42d6a11aed22ff4b910
   languageName: node
   linkType: hard
 
@@ -17088,6 +17027,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"filesize@npm:^10.0.12":
+  version: 10.0.12
+  resolution: "filesize@npm:10.0.12"
+  checksum: bbf73a99de198be75c26cec5f1082cde4e9e25c4a63dd4cb315063da9eb23ba4d3868b6010f6d485594c6b9823435c32d9c8a90470083197e25b093599470897
+  languageName: node
+  linkType: hard
+
 "fill-range@npm:^4.0.0":
   version: 4.0.0
   resolution: "fill-range@npm:4.0.0"
@@ -21273,7 +21219,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonfile@npm:^6.0.1":
+"jsonfile@npm:^6.0.1, jsonfile@npm:^6.1.0":
   version: 6.1.0
   resolution: "jsonfile@npm:6.1.0"
   dependencies: