Super big project upgrade: React 19, Storybook 10, Vite 7, ESLint 9 and Vitest

.prettierignore

@@ -0,0 +1,14 @@
+# Dependencies
+node_modules
+
+# Build outputs
+dist
+dist-cjs
+storybook-static
+
+# Logs
+*.log
+npm-debug.log*
+
+# Lock files
+package-lock.json

.storybook/main.ts

@@ -1,39 +1,23 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
-import path from 'path';
+import { fileURLToPath } from "node:url";
+import type { StorybookConfig } from '@storybook/react-vite';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        actions: false,
-      },
-    },
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
+
   framework: {
-    name: '@storybook/react-webpack5',
-    options: {
-      fastRefresh: true,
-      builder: {
-        useSWC: true,
-      },
-    },
+    name: '@storybook/react-vite',
+    options: {},
   },
-  swc: () => ({
-    jsc: {
-      transform: {
-        react: {
-          runtime: 'automatic',
-        },
-      },
-    },
-  }),
+
   docs: {
-    autodocs: true,
-    defaultName: 'Documentation',
+    defaultName: 'Documentation'
   },
+
   typescript: {
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
@@ -52,27 +36,29 @@ const config: StorybookConfig = {
       },
     },
   },
-  webpackFinal: async (config) => {
-    if (!config.resolve) {
-      config.resolve = {};
-    }
-
-    if (!config.module) {
-      config.module = {};
-    }
-
-    if (!config.module.rules) {
-      config.module.rules = [];
-    }
 
-    config.resolve.modules = [
-      ...(config.resolve.modules || []),
-      path.resolve(__dirname, '../src'),
-    ];
+  async viteFinal(config) {
+    // Add path aliases for imports
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      'components': join(__dirname, '../src/components'),
+      'helpers': join(__dirname, '../src/helpers'),
+      'hooks': join(__dirname, '../src/hooks'),
+      'icons': join(__dirname, '../src/icons'),
+      'types': join(__dirname, '../src/types'),
+      // Only alias our local storybook/controls, not all storybook/* imports
+      'storybook/controls': join(__dirname, '../src/storybook/controls'),
+    };
 
     return config;
   },
+
   staticDirs: ['./media'],
+
+  core: {
+    disableTelemetry: true,
+  },
 };
 
 export default config;

.storybook/manager.ts

@@ -1,20 +1,7 @@
-import { create } from '@storybook/theming';
 import logo from './media/logo.png';
 
-import { addons } from '@storybook/manager-api';
-
-const favicon = document.querySelector('link[rel="icon"]');
+const favicon = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
 if (favicon) {
   favicon.type = 'image/png';
   favicon.href = logo;
 }
-
-addons.setConfig({
-  theme: create({
-    base: 'light',
-    brandTitle: `<img alt="Logo" src="${logo}" width="32px" height="32px"/>`
-  }),
-  toolbar: {
-    zoom: { hidden: true },
-  },
-});

.storybook/preview.tsx

@@ -2,7 +2,6 @@ import type { Preview } from '@storybook/react';
 import { AppearanceDecorator } from './decorators/appearance';
 import { AppRootDecorator } from './decorators/root';
 import { StrictDecorator } from './decorators/strict';
-import { Controls, Description, Primary, Stories, Subtitle, Title } from '@storybook/blocks';
 
 const preview: Preview = {
   parameters: {
@@ -11,16 +10,6 @@ const preview: Preview = {
       source: {
         state: 'open',
       },
-      page: () => (
-        <>
-          <Title />
-          <Subtitle />
-          <Description />
-          <Primary />
-          <Controls />
-          <Stories includePrimary={false} />
-        </>
-      ),
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
@@ -30,9 +19,10 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-    backgrounds: { disable: true },
+    backgrounds: { disabled: true },
     centered: true,
   },
+
   globalTypes: {
     platform: {
       name: 'Platform',
@@ -56,11 +46,14 @@ const preview: Preview = {
       },
     },
   },
+
   decorators: [
     StrictDecorator,
     AppRootDecorator,
     AppearanceDecorator,
   ],
+
+  tags: ['autodocs']
 };
 
 export default preview;