Upgrade to Storybook 8, Vite 5 and Vitest 1 (#2463)

.github/workflows/chromatic.yml

@@ -27,7 +27,7 @@ jobs:
         run: npm run docs:build
 
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.storybook/addons/versions/index.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import {
-  Icons,
   IconButton,
   WithTooltip,
   TooltipLinkList,
 } from '@storybook/components';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 import { useParameter } from '@storybook/manager-api';
 
 type Version = {
@@ -25,6 +25,10 @@ export function Versions() {
 
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
+  if (!config.current) {
+    return null;
+  }
+
   return (
     <WithTooltip
       placement="top"
@@ -49,7 +53,7 @@ export function Versions() {
         title="Switch to previous versions of the documentation"
         active={isTooltipVisible}
       >
-        {config.current} <Icons icon="arrowdown" />
+        {config.current} <ChevronSmallDownIcon aria-hidden="true" />
       </IconButton>
     </WithTooltip>
   );

.storybook/components/Preview.tsx

@@ -13,14 +13,10 @@
  * limitations under the License.
  */
 
-import { Canvas } from '@storybook/addon-docs';
+import type { PropsWithChildren } from 'react';
 import { ThemeProvider } from '@emotion/react';
 import { light } from '@sumup/design-tokens';
 
-const Preview = ({ children, ...props }) => (
-  <Canvas {...props}>
-    <ThemeProvider theme={light}>{children}</ThemeProvider>
-  </Canvas>
-);
-
-export default Preview;
+export default function Preview({ children }: PropsWithChildren) {
+  return <ThemeProvider theme={light}>{children}</ThemeProvider>;
+}

.storybook/components/Story.tsx

@@ -13,14 +13,14 @@
  * limitations under the License.
  */
 
-import { Story as StorybookStory } from '@storybook/addon-docs';
+import { Canvas } from '@storybook/addon-docs';
 
 import Preview from './Preview';
 
-const Story = ({ withToolbar = true, ...props }) => (
-  <Preview withToolbar={withToolbar}>
-    <StorybookStory {...props} />
-  </Preview>
-);
-
-export default Story;
+export default function Story({ withToolbar = true, ...props }) {
+  return (
+    <Preview>
+      <Canvas withToolbar={withToolbar} {...props} />
+    </Preview>
+  );
+}

.storybook/components/index.ts

@@ -13,9 +13,7 @@
  * limitations under the License.
  */
 
-import { ArgsTable as Props, PRIMARY_STORY } from '@storybook/addon-docs';
-
-Props.defaultProps = { ...Props.defaultProps, story: PRIMARY_STORY };
+import { Controls as Props } from '@storybook/addon-docs';
 
 export { Props };
 

.storybook/main.ts

@@ -2,7 +2,6 @@ import type { StorybookConfig } from '@storybook/react-vite';
 import path from 'path';
 import remarkGfm from 'remark-gfm';
 import { mergeConfig } from 'vite';
-import turbosnap from 'vite-plugin-turbosnap';
 
 const toPath = (_path: string) => path.join(process.cwd(), _path);
 
@@ -44,12 +43,11 @@ const config: StorybookConfig = {
       define: {
         'process.env.UNSAFE_DISABLE_ELEMENT_ERRORS': false,
       },
-      plugins:
-        configType === 'PRODUCTION'
-          ? [turbosnap({ rootDir: config.root ?? process.cwd() })]
-          : [],
     });
   },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };
 
 export default config;

.storybook/manager.tsx

@@ -1,4 +1,4 @@
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
 
 import { dark, light, listenToColorScheme } from './themes.js';
 import { PARAM_KEY as VERSIONS_PARAM_KEY, Versions } from './addons/versions';

.storybook/preview.tsx

@@ -44,7 +44,6 @@ export const parameters = {
     },
   },
   previewTabs: { 'storybook/docs/panel': { index: -1 } },
-  actions: { argTypesRegex: '^on.*' },
   controls: { expanded: true },
   options: {
     storySort: {

codecov.yml

@@ -1,9 +1,12 @@
 comment:
-  layout: "reach, diff, flags, files"
+  layout: 'reach, diff, flags, files'
   behavior: default
   require_changes: false
   require_base: no
   require_head: no
   branches: null
 github_checks:
   annotations: false
+ignore:
+  - '**/index.*'
+  - '**/*.stories.*'