Move stories to CSF Next

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.storybook/main.ts

@@ -1,7 +1,6 @@
-// This file has been automatically migrated to valid ESM format by Storybook.
+import { defineMain } from '@storybook/react-vite/node';
 import { fileURLToPath } from 'node:url';
 import { createRequire } from 'node:module';
-import type { StorybookConfig } from '@storybook/react-vite';
 
 import { join, dirname, posix } from 'path';
 
@@ -42,7 +41,7 @@ function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')));
 }
 
-const config: StorybookConfig = {
+export default defineMain({
   stories,
   addons: [
     getAbsolutePath('@storybook/addon-links'),
@@ -130,6 +129,4 @@ const config: StorybookConfig = {
 
     return config;
   },
-};
-
-export default config;
+});

.storybook/preview.tsx

@@ -1,8 +1,13 @@
+import addonA11y from '@storybook/addon-a11y';
+import addonDocs from '@storybook/addon-docs';
+import addonThemes from '@storybook/addon-themes';
+import addonLinks from '@storybook/addon-links';
+import { definePreview } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
 import { TestApiProvider } from '@backstage/test-utils';
 import { Content, AlertDisplay } from '@backstage/core-components';
 import { apis } from './support/apis';
-import type { Decorator, Preview } from '@storybook/react-vite';
+import type { Decorator } from '@storybook/react-vite';
 import { useGlobals } from 'storybook/preview-api';
 import { UnifiedThemeProvider, themes } from '@backstage/theme';
 import { allModes } from './modes';
@@ -16,7 +21,7 @@ import './storybook.css';
 // Custom themes
 import './themes/spotify.css';
 
-const preview: Preview = {
+export default definePreview({
   globalTypes: {
     themeMode: {
       name: 'Theme Mode',
@@ -47,10 +52,12 @@ const preview: Preview = {
       },
     },
   },
+
   initialGlobals: {
     themeMode: 'light',
     themeName: 'backstage',
   },
+
   parameters: {
     layout: 'fullscreen',
 
@@ -102,6 +109,7 @@ const preview: Preview = {
       },
     },
   },
+
   decorators: [
     Story => {
       const [globals] = useGlobals();
@@ -140,6 +148,6 @@ const preview: Preview = {
       );
     },
   ],
-};
 
-export default preview;
+  addons: [addonLinks(), addonThemes(), addonDocs(), addonA11y()],
+});