Merge branch 'next' into kylegach/sbdx-167-build-out-docs-homepage

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/chromatic.config.json

@@ -3,6 +3,7 @@
   "projectToken": "80b312430ec4",
   "buildScriptName": "storybook:ui:build",
   "onlyChanged": true,
-  "storybookConfigDir": "./ui/.storybook",
-  "storybookBaseDir": "./code"
+  "storybookConfigDir": "ui/.storybook",
+  "storybookBaseDir": "./code",
+  "zip": true
 }

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"
@@ -88,6 +88,7 @@
     "type-fest": "~2.19"
   },
   "dependencies": {
+    "@chromatic-com/storybook": "^1.2.18",
     "@nx/workspace": "17.0.2",
     "@playwright/test": "1.36.0",
     "@storybook/addon-a11y": "workspace:*",
@@ -187,7 +188,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,13 +222,9 @@
     "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"
   },
-  "devDependencies": {
-    "@chromaui/addon-visual-tests": "^0.0.124"
-  },
   "dependenciesMeta": {
     "ejs": {
       "built": false

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';
@@ -53,7 +52,7 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
     '@storybook/addon-designs',
-    '@chromaui/addon-visual-tests',
+    '@chromatic-com/storybook',
   ],
   build: {
     test: {
@@ -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/components/sidebar/SearchResults.tsx

@@ -111,10 +111,10 @@ const Highlight: FC<PropsWithChildren<{ match?: Match }>> = React.memo(function
   const { value, indices } = match;
   const { nodes: result } = indices.reduce<{ cursor: number; nodes: ReactNode[] }>(
     ({ cursor, nodes }, [start, end], index, { length }) => {
-      nodes.push(<span>{value.slice(cursor, start)}</span>);
-      nodes.push(<Mark>{value.slice(start, end + 1)}</Mark>);
+      nodes.push(<span key={`${index}-1`}>{value.slice(cursor, start)}</span>);
+      nodes.push(<Mark key={`${index}-2`}>{value.slice(start, end + 1)}</Mark>);
       if (index === length - 1) {
-        nodes.push(<span>{value.slice(end + 1)}</span>);
+        nodes.push(<span key={`${index}-3`}>{value.slice(end + 1)}</span>);
       }
       return { cursor: end + 1, nodes };
     },

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';