Upgrade to Storybook 10.1

.storybook/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 import { mergeConfig } from 'vite';
 import turbosnap from 'vite-plugin-turbosnap';
 
-import { CHROMATIC_BASE_URL } from '../src/constants';
+import { CHROMATIC_BASE_URL } from '../src/constants.ts';
 
 const useDistVersion = process.env.CHROMATIC_USE_DIST_VERSION === 'true';
 

.storybook/preview.tsx

@@ -22,7 +22,6 @@ import { GraphQLClientProvider } from '../src/utils/graphQLClient';
 import { storyWrapper } from '../src/utils/storyWrapper';
 import { TelemetryProvider } from '../src/utils/TelemetryContext';
 import { useSessionState } from '../src/utils/useSessionState';
-import { action } from 'storybook/actions';
 
 // Initialize MSW
 initialize({
@@ -225,11 +224,11 @@ const preview: Preview = {
       argTypesRegex: '^on[A-Z].*',
     },
     backgrounds: {
-      disable: true,
+      disabled: true,
     },
     viewport: {
       disable: true,
-      viewports: {
+      options: {
         default: { name: 'Default', styles: { width: '960px', height: '720px' } },
       },
     },

package.json

@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@neoconfetti/react": "^1.0.0",
-    "chromatic": "^13.3.3",
+    "chromatic": "^13.3.4",
     "filesize": "^10.0.12",
     "jsonfile": "^6.1.0",
     "strip-ansi": "^7.1.0"
@@ -67,10 +67,10 @@
     "@graphql-codegen/cli": "^5.0.5",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@parcel/watcher": "^2.4.1",
-    "@storybook/addon-designs": "^10.0.1",
-    "@storybook/addon-docs": "^9.0.0",
-    "@storybook/icons": "^1.4.0",
-    "@storybook/react-vite": "^9.0.0",
+    "@storybook/addon-designs": "^11.0.3",
+    "@storybook/addon-docs": "^10.1.0",
+    "@storybook/icons": "^2.0.1",
+    "@storybook/react-vite": "^10.1.0",
     "@types/jsonfile": "^6.1.1",
     "@types/node": "^22.13.5",
     "@types/pluralize": "^0.0.29",
@@ -91,10 +91,10 @@
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^9.0.0",
+    "eslint-plugin-storybook": "^10.1.0",
     "graphql": "^16.8.1",
     "msw": "^2.0.0",
-    "msw-storybook-addon": "2.0.4",
+    "msw-storybook-addon": "^2.0.6",
     "npm-run-all": "^4.1.5",
     "pluralize": "^8.0.0",
     "polished": "^4.2.2",
@@ -105,7 +105,7 @@
     "react-dom": "^18.3.1",
     "react-joyride": "^2.7.2",
     "rimraf": "^3.0.2",
-    "storybook": "^9.0.0",
+    "storybook": "^10.1.0",
     "ts-dedent": "^2.2.0",
     "tsup": "^6.6.3",
     "typescript": "^5.7.3",
@@ -119,7 +119,7 @@
     "zx": "^1.14.1"
   },
   "peerDependencies": {
-    "storybook": "^0.0.0-0 || ^9.0.0 || ^9.1.0-0 || ^9.2.0-0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0"
+    "storybook": "^10.1.0"
   },
   "packageManager": "[email protected]",
   "engines": {

src/TestProviderRender.tsx

@@ -3,7 +3,7 @@ import { PlayHollowIcon, StopAltIcon } from '@storybook/icons';
 import pluralize from 'pluralize';
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { Link } from 'storybook/internal/components';
-import { Button, ProgressSpinner, TooltipNote, WithTooltip } from 'storybook/internal/components';
+import { Button, ProgressSpinner } from 'storybook/internal/components';
 import {
   experimental_getTestProviderStore,
   experimental_useStatusStore,
@@ -235,43 +235,31 @@ export const TestProviderRender = () => {
 
       <Actions>
         {warning ? null : testProviderState === 'test-provider-state:running' ? (
-          <WithTooltip
-            hasChrome={false}
-            trigger="hover"
-            tooltip={<TooltipNote note="Stop Visual tests" />}
+          <Button
+            ariaLabel="Stop visual tests"
+            size="medium"
+            variant="ghost"
+            padding="none"
+            onClick={stopBuild}
+            disabled={
+              !['initialize', 'build', 'upload'].includes(localBuildProgress?.currentStep ?? '')
+            }
           >
-            <Button
-              aria-label="Stop Visual tests"
-              size="medium"
-              variant="ghost"
-              padding="none"
-              onClick={stopBuild}
-              disabled={
-                !['initialize', 'build', 'upload'].includes(localBuildProgress?.currentStep ?? '')
-              }
-            >
-              <Progress percentage={localBuildProgress?.buildProgressPercentage}>
-                <StopIcon />
-              </Progress>
-            </Button>
-          </WithTooltip>
+            <Progress percentage={localBuildProgress?.buildProgressPercentage}>
+              <StopIcon />
+            </Progress>
+          </Button>
         ) : (
-          <WithTooltip
-            hasChrome={false}
-            trigger="hover"
-            tooltip={<TooltipNote note="Start Visual tests" />}
+          <Button
+            ariaLabel="Start visual tests"
+            size="medium"
+            variant="ghost"
+            padding="small"
+            disabled={!isRunnable}
+            onClick={startBuildIfPossible}
           >
-            <Button
-              aria-label="Start Visual tests"
-              size="medium"
-              variant="ghost"
-              padding="small"
-              disabled={!isRunnable}
-              onClick={startBuildIfPossible}
-            >
-              <PlayHollowIcon />
-            </Button>
-          </WithTooltip>
+            <PlayHollowIcon />
+          </Button>
         )}
       </Actions>
     </Container>

src/components/Accordions.tsx

@@ -6,10 +6,9 @@ import {
   StopIcon as Stop,
   TimerIcon as Timer,
 } from '@storybook/icons';
+import { ActionList } from 'storybook/internal/components';
 import { styled } from 'storybook/theming';
 
-import { IconButton } from './IconButton';
-
 export const Accordions = styled.div({
   display: 'flex',
   flexDirection: 'column',
@@ -77,7 +76,7 @@ export const CloseIcon = styled(Close)({
   marginLeft: 'auto',
 });
 
-export const CloseButton: typeof IconButton = styled(IconButton)({
+export const CloseButton = styled(ActionList.Button)({
   margin: -5,
   marginLeft: 'auto',
 });

src/components/ActionButton.tsx

@@ -1,100 +1,13 @@
-import { darken, lighten } from 'polished';
-import { ComponentProps } from 'react';
-import { styled, type Theme } from 'storybook/theming';
+import { ActionList } from 'storybook/internal/components';
+import { styled } from 'storybook/theming';
 
-import { IconButton } from './IconButton';
-
-const themeColors = ({ theme, status, variant }: { theme: Theme } & ActionButtonProps) => {
-  if (variant === 'outline') {
-    return {
-      color: theme.base === 'light' ? theme.color.dark : theme.color.medium,
-      backgroundColor: theme.background.app,
-      borderColor: theme.base === 'light' ? theme.color.medium : theme.color.darker,
-      '&:hover': {
-        color: theme.base === 'light' ? theme.color.darkest : theme.color.lighter,
-        backgroundColor: darken(0.03, theme.background.app),
-      },
-    };
-  }
-  if (status === 'positive') {
-    return {
-      color: theme.color.positiveText,
-      backgroundColor: theme.background.positive,
-      borderColor: lighten(0.5, theme.color.positiveText),
-      '&:hover': {
-        color: theme.color.positiveText,
-        backgroundColor: darken(0.05, theme.background.positive),
-      },
-    };
-  }
-  if (status === 'warning') {
-    return {
-      color: theme.color.warningText,
-      backgroundColor: theme.background.warning,
-      borderColor: lighten(0.5, theme.color.warningText),
-      '&:hover': {
-        color: theme.color.warningText,
-        backgroundColor: darken(0.05, theme.background.warning),
-      },
-    };
-  }
-  return {
-    color: theme.color.lightest,
-    backgroundColor: theme.color.secondary,
-    borderWidth: 0,
-    borderColor:
-      theme.base === 'light'
-        ? lighten(0.2, theme.color.secondary)
-        : darken(0.1, theme.color.secondary),
-    '&:hover': {
-      color: theme.color.lightest,
-      backgroundColor: darken(0.05, theme.color.secondary),
-    },
-  };
-};
-
-interface ActionButtonProps extends ComponentProps<typeof IconButton> {
-  square?: boolean;
-  side?: 'left' | 'right';
-}
-
-export const ActionButton: React.FC<ActionButtonProps> = styled(IconButton)<ActionButtonProps>(
-  ({ square }) => ({
-    border: `1px solid transparent`,
-    boxShadow: 'none',
-    fontSize: 12,
-    fontWeight: 700,
+export const ActionButton = styled(ActionList.Button)({
+  '@container (max-width: 299px)': {
     height: 28,
-    padding: square ? '8px 6px' : 8,
-    transition: 'background-color 150ms ease-out',
-    '@container (min-width: 300px)': {
-      height: 32,
-      width: square ? 32 : 'auto',
-      padding: square ? '9px 8px' : 9,
-    },
-    '@container (min-width: 800px)': {
-      height: 28,
-      fontSize: 12,
-      width: square ? 28 : 'auto',
-      padding: square ? '8px 6px' : 8,
-    },
-  }),
-  themeColors,
-  ({ side }) => ({
-    ...(side === 'left' && {
-      borderRightWidth: 1,
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0,
-    }),
-    ...(side === 'right' && {
-      borderLeftWidth: 0,
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0,
-    }),
-  })
-);
-
-export const ButtonGroup = styled.div({
-  display: 'flex',
-  flexDirection: 'row',
+    padding: '0 7px',
+  },
+  '@container (min-width: 800px)': {
+    height: 28,
+    padding: '0 7px',
+  },
 });