chore(maintenance): 🤖 upgrade vite to v8

[punkbit]

Why?

This upgrade vite to the latest v8 by keeping the current project's build tooling or setup. Consequently, storybooks have also upgraded to the 10.3.0 version for compatibility with Vite 8.

⏳ The branch/PR will be kept on the side for further iterations and confirmation's healthy.

How?

• Upgraded Vite from ^7.3.0 to ^8.0.0
• Upgraded Storybook packages from 10.1.10 to 10.3.0-alpha.16 (required for Vite 8 support)
• Upgraded @vitejs/plugin-react from ^5.1.2 to ^6.0.0
• Migrated from MDX to TSX for Introduction stories due to Rolldown's stricter module requirements
• Removed vite-tsconfig-paths (no longer needed)
• Added Vite 8 workaround in storybook config to filter vite-plugin-externalize-deps (Rolldown doesn't support function-based externals)
• Cleaned up old MDX shim workarounds from Storybook config

Preview?

N/A

[changeset-bot]

⚠️ No Changeset found

Latest commit: f236aeb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Claude finished @punkbit's task in 1m 29s —— View job

---

PR Review: chore(maintenance): 🤖 upgrade vite to v8

• Read CLAUDE.md and conventions
• Analyze changed files
• Provide review feedback

---

Good work on the migration! The changes are well-structured and all workarounds are clearly documented. This is a clean tooling upgrade with no impact on public component APIs.

💡 Suggestions (non-blocking)

• .storybook/main.ts — plugin filter safety: The filter in viteFinal (lines 38–44) uses typeof plugin === 'object' && 'name' in plugin to identify plugins. Vite's PluginOption type allows nested arrays and Promise-based plugins — both satisfy typeof x === 'object' but don't have a name property, so they'd be silently dropped by this filter. In practice, Storybook's auto-generated config likely doesn't produce those shapes, but a more defensive approach would be to only drop the one known plugin by name and keep everything else:

  config.plugins = config.plugins.filter(
    (plugin) => {
      if (plugin == null || plugin === false) return false;
      if (Array.isArray(plugin)) return true; // keep nested arrays
      if (typeof plugin === 'object' && 'name' in plugin) {
        return plugin.name !== 'vite-plugin-externalize-deps';
      }
      return true; // keep Promises and other shapes
    }
  );

  Fix this →

• package.json — alpha Storybook packages: All Storybook packages are pinned to 10.3.0-alpha.16 (no ^, which is correct for alphas). Worth tracking the stable 10.3.x release and upgrading once available to avoid long-term reliance on pre-release packages.

• vite.config.ts — interop: 'auto' removal: Removing interop: 'auto' from CJS output is the right move for Rolldown compatibility, but if downstream consumers rely on the CJS build for mixed ESM/CJS module interop, it's worth a smoke test to confirm no regressions in the shipped dist/cjs output.

---

No blocking issues. The rollupOptions → rolldownOptions rename, resolve.tsconfigPaths: true migration, and MDX → TSX conversion are all correct Vite 8 migration steps. 🙌

[github-actions]

Claude finished @punkbit's task in 1m 5s —— View job

---

PR Review: chore(maintenance): 🤖 upgrade vite to v8

• Read CLAUDE.md and conventions
• Analyze changed files
• Provide review feedback

---

Clean tooling upgrade with no impact on public component APIs. All migration steps (rollupOptions → rolldownOptions, resolve.tsconfigPaths: true, MDX → TSX) are correct Vite 8 patterns. 🙌

💡 Suggestions (non-blocking)

• .storybook/main.ts:38-44 — plugin filter drops nested arrays: The current filter requires typeof plugin === 'object' && 'name' in plugin. In Vite, PluginOption also allows nested arrays (PluginOption[]), which are objects but don't have a name property — they'd be silently dropped. This was flagged in the previous review and is still present. Storybook's generated config is unlikely to produce nested arrays today, but it's worth hardening before stable Storybook 10.3.x is released:

  config.plugins = config.plugins.filter(plugin => {
    if (plugin == null || plugin === false) return true; // let Vite handle these
    if (Array.isArray(plugin)) return true;              // keep nested arrays
    if (typeof plugin === 'object' && 'name' in plugin) {
      return plugin.name !== 'vite-plugin-externalize-deps';
    }
    return true;
  });

• package.json — alpha Storybook pins: All Storybook packages are pinned to 10.3.0-alpha.16. Worth tracking the stable 10.3.x release and upgrading when available.

• vite.config.ts — rollup-plugin-visualizer: The rollup-plugin-visualizer import is unchanged. It works with Rolldown in Vite 8 today, but keep an eye on any compatibility warnings surfacing in ANALYZE=true builds — a rolldown-plugin-visualizer equivalent may be needed if the plugin's use of Rollup-specific hooks causes issues in the future.

No blocking issues. Nice work keeping the build tooling current! 🙌

[DreaminDani]

why are we pinning to an alpha version? can we just wait to update until these are supported in the non-alpha versions?

[punkbit]

The version which supports vite 8 at the time of writing (2 weeks ago). Today, I can see 10.3.1 is now released, so I'll update it once I switch to this branch

[punkbit]

Updated to latest available at time of writing.

[github-actions]

Claude finished @punkbit's task in 1m 4s —— View job

---

PR Review: chore(maintenance): 🤖 upgrade vite to v8

• Read CLAUDE.md and conventions
• Analyze changed files
• Provide review feedback

---

Clean tooling upgrade — no impact on public component APIs. The rollupOptions → rolldownOptions rename, resolve.tsconfigPaths: true migration, and MDX → TSX conversion are all correct Vite 8 patterns. 🙌

What's improved since the last review cycle:

• Storybook packages are now on stable ^10.3.1 (no longer alpha — the concern raised by @DreaminDani is resolved ✅)
• Old MDX shim workarounds cleanly removed from viteFinal

💡 Suggestion (non-blocking — flagged in previous reviews, still present)

• .storybook/main.ts:38-44 — plugin filter drops false and nested arrays: The filter requires typeof plugin === 'object' && 'name' in plugin. This silently drops:

  • false (a valid PluginOption value Vite ignores, but here it gets removed instead of passed through)
  • Nested PluginOption[] arrays (objects without a name property)

  Since Storybook 10.3.x's generated config is unlikely to produce these shapes today, this is low risk — but worth hardening before this branch is merged to stable:

  config.plugins = config.plugins.filter(plugin => {
    if (plugin == null || plugin === false) return true; // let Vite handle falsy values
    if (Array.isArray(plugin)) return true;              // keep nested arrays
    if (typeof plugin === 'object' && 'name' in plugin) {
      return plugin.name !== 'vite-plugin-externalize-deps';
    }
    return true;
  });

  Fix this →

No blocking issues. 🙌

[github-actions]

Claude finished @punkbit's task in 54s —— View job

---

PR Review: chore(maintenance): 🤖 upgrade vite to v8

• Read CLAUDE.md and conventions
• Analyze changed files
• Provide review feedback

---

Clean tooling upgrade — no impact on public component APIs. The rollupOptions → rolldownOptions rename, resolve.tsconfigPaths: true migration, and MDX → TSX conversion are all correct Vite 8 patterns. 🙌

What's improved since last review:

• Storybook packages upgraded to stable ^10.3.3 ✅ (DreaminDani's alpha concern resolved)
• MDX → TSX migration clearly explained via comment in Introduction.stories.tsx ✅

💡 Suggestion (non-blocking — flagged in 3 prior review cycles, still present)

• .storybook/main.ts:38-44 — plugin filter is more restrictive than intended: The current filter keeps only plugins that are non-null objects with a name property. This silently drops:

  • false / null (valid PluginOption values that Vite ignores — they should pass through, not be removed)
  • Nested PluginOption[] arrays (objects, but no name → dropped)

  The goal is only to remove vite-plugin-externalize-deps. Everything else should pass through:

  config.plugins = config.plugins.filter(plugin => {
    if (plugin == null || plugin === false) return true; // let Vite handle falsy values
    if (Array.isArray(plugin)) return true;              // keep nested arrays
    if (typeof plugin === 'object' && 'name' in plugin) {
      return plugin.name !== 'vite-plugin-externalize-deps';
    }
    return true; // keep Promises and other shapes
  });

  Fix this →

No blocking issues. Nice work keeping the build tooling current! 🙌

[workflow-authentication-public]

📚 Storybook Preview Deployed

✅ Preview URL: https://click-960yr6zr4-clickhouse.vercel.app

Built from commit: 191fa9b14b4d7d0d716e34de3d750d5cd329d988