chore(maintenance): 🤖 upgrade vite to v8

.storybook/Introduction.stories.tsx

@@ -0,0 +1,94 @@
+// NOTE: Using `tsx` instead of `mdx` due to an error
+// The Storybook MDX plugin doesn't set moduleType
+// which Roldown requires.
+// Can revisit and put back mdx later once plugin updated
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const DocsPage = () => (
+  <>
+    <div style={{ marginBottom: '20px' }}>
+      <img
+        src="/clickhouse-backs.png"
+        alt="Click UI"
+        style={{ width: '100%', borderRadius: '4px' }}
+      />
+    </div>
+
+    <h1>Click UI</h1>
+
+    <p>
+      Click UI is the ClickHouse design system and component library. Our aim with Click UI is to
+      provide an accessible, theme-able, modern, and attractive interface with which to experience
+      the speed and power of ClickHouse.
+    </p>
+
+    <p>
+      This site is a reference for inspecting components and their props. Official documentation
+      lives at{' '}
+      <a href="https://clickhouse.design/click-ui" target="_blank" rel="noopener noreferrer">
+        clickhouse.design/click-ui
+      </a>
+      .
+    </p>
+
+    <h2>Resources</h2>
+
+    <ul>
+      <li>
+        <strong>Source Code:</strong> Available on{' '}
+        <a href="https://github.com/ClickHouse/click-ui" target="_blank" rel="noopener noreferrer">
+          GitHub
+        </a>
+      </li>
+      <li>
+        <strong>Package:</strong> Found on{' '}
+        <a
+          href="https://www.npmjs.com/package/@clickhouse/click-ui"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          NPM
+        </a>
+      </li>
+      <li>
+        <strong>Figma:</strong> We will be publishing Click UI to the Figma community soon.
+      </li>
+    </ul>
+
+    <p>
+      To get started, please refer to the{' '}
+      <a
+        href="https://github.com/ClickHouse/click-ui?tab=readme-ov-file#quick-start"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Quick Start Guide
+      </a>
+      .
+    </p>
+  </>
+);
+
+const Introduction = () => null;
+
+const meta: Meta<typeof Introduction> = {
+  title: 'Introduction',
+  component: Introduction,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      page: DocsPage,
+    },
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+    viewMode: 'docs',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Introduction>;
+
+export const Docs: Story = {};

.storybook/main.ts

@@ -4,7 +4,7 @@ const config: StorybookConfig = {
     disableTelemetry: true
   },
   stories: [
-    "./Introduction.mdx",
+    "./Introduction.stories.tsx",
     "../src/**/*.stories.@(ts|tsx)",
   ],
 
@@ -31,31 +31,17 @@ const config: StorybookConfig = {
     },
   },
 
-  async viteFinal(config, { configType }) {
-    // Workaround for Storybook 10.0.7 bug where MDX files generate file:// imports
-    // See: https://github.com/storybookjs/storybook/issues (mdx-react-shim resolution)
+  async viteFinal(config) {
     config.plugins = config.plugins || [];
-    config.plugins.push({
-      name: 'fix-storybook-mdx-shim',
-      resolveId(source) {
-        // Intercept the malformed file:// URL and resolve to the correct package
-        if (source.includes('mdx-react-shim')) {
-          return this.resolve('@mdx-js/react', undefined, { skipSelf: true });
-        }
-        return null;
-      },
-    });
 
-    // Suppress Rollup warnings for production builds
-    if (configType === 'PRODUCTION') {
-      config.build = config.build || {};
-      config.build.rollupOptions = config.build.rollupOptions || {};
-      const originalOnWarn = config.build.rollupOptions.onwarn;
-      config.build.rollupOptions.onwarn = (warning, warn) => {
-        if (warning.message?.includes('mdx-react-shim')) return;
-        originalOnWarn ? originalOnWarn(warning, warn) : warn(warning);
-      };
-    }
+    // NOTE: Vite 8 workaround: Remove vite-plugin-externalize-deps from Storybook builds due to plugin use of function externals which Rolldown doesn't support
+    config.plugins = config.plugins.filter(
+      (plugin): plugin is NonNullable<typeof plugin> =>
+        plugin != null &&
+        typeof plugin === 'object' &&
+        'name' in plugin &&
+        plugin.name !== 'vite-plugin-externalize-deps'
+    );
 
     return config;
   },

package.json

@@ -422,10 +422,10 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
     "@playwright/test": "^1.57.0",
-    "@storybook/addon-a11y": "^10.1.10",
-    "@storybook/addon-docs": "^10.1.10",
-    "@storybook/addon-links": "^10.1.10",
-    "@storybook/react-vite": "^10.1.10",
+    "@storybook/addon-a11y": "10.3.0-alpha.16",
+    "@storybook/addon-docs": "10.3.0-alpha.16",
+    "@storybook/addon-links": "10.3.0-alpha.16",
+    "@storybook/react-vite": "10.3.0-alpha.16",
     "@svgr/cli": "^8.1.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.5",
@@ -441,7 +441,7 @@
     "@types/react-window": "^1.8.8",
     "@types/sortablejs": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "^8.54.0",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-react": "^6.0.0",
     "babel-plugin-styled-components": "^2.1.4",
     "chromatic": "^13.3.4",
     "date-fns": "4.1.0",
@@ -451,7 +451,7 @@
     "eslint-plugin-prefer-arrow-functions": "^3.3.2",
     "eslint-plugin-react-hooks": "^5",
     "eslint-plugin-react-refresh": "0.4.7",
-    "eslint-plugin-storybook": "^10.1.10",
+    "eslint-plugin-storybook": "10.3.0-alpha.16",
     "globals": "^16.5.0",
     "husky": "^9.1.7",
     "jsdom": "^24.0.0",
@@ -461,17 +461,16 @@
     "react-dom": "18.3.1",
     "rollup-plugin-visualizer": "^6.0.5",
     "skott": "^0.35.4",
-    "storybook": "^10.1.10",
-    "storybook-addon-pseudo-states": "^10.1.10",
+    "storybook": "10.3.0-alpha.16",
+    "storybook-addon-pseudo-states": "10.3.0-alpha.16",
     "style-dictionary": "^5.0.0",
     "stylis": "^4.3.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8",
-    "vite": "^7.3.0",
+    "vite": "^8.0.0",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-externalize-deps": "^0.10.0",
-    "vite-tsconfig-paths": "^6.0.5",
     "vitest": "^2.1.8",
     "watch": "^1.0.2"
   },

vite.config.ts

@@ -4,7 +4,6 @@ import react from '@vitejs/plugin-react';
 import path from 'path';
 import dts from 'vite-plugin-dts';
 import { externalizeDeps } from 'vite-plugin-externalize-deps';
-import tsconfigPaths from 'vite-tsconfig-paths';
 import { visualizer } from 'rollup-plugin-visualizer';
 
 const srcDir = path.resolve(__dirname, 'src').replace(/\\/g, '/');
@@ -41,7 +40,7 @@ const buildOptions: BuildOptions = {
       'hooks/index': path.resolve(srcDir, 'hooks/index.ts'),
     },
   },
-  rollupOptions: {
+  rolldownOptions: {
     output: [
       {
         format: 'es',
@@ -54,7 +53,6 @@ const buildOptions: BuildOptions = {
           chunk.name === 'index' || chunk.name === 'hooks/index'
             ? `'use client';`
             : '',
-        interop: 'auto',
       },
       {
         format: 'cjs',
@@ -67,7 +65,6 @@ const buildOptions: BuildOptions = {
           chunk.name === 'index' || chunk.name === 'hooks/index'
             ? `'use client';`
             : '',
-        interop: 'auto',
         exports: 'named',
       },
     ],
@@ -111,7 +108,6 @@ const viteConfig = defineConfig({
       peerDeps: true,
       useFile: path.join(process.cwd(), 'package.json'),
     }),
-    tsconfigPaths(),
     // WARNING: Keep the visualizer last
     ...(process.env.ANALYZE === 'true'
       ? [
@@ -128,6 +124,7 @@ const viteConfig = defineConfig({
     alias: {
       '@': srcDir,
     },
+    tsconfigPaths: true,
   },
   build: buildOptions,
 });