chore(deps): upgrade storybook to v10 with vite builder

.storybook/main.ts

@@ -1,64 +1,15 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
+import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
 	stories: ["../src/**/*.mdx", "../src/**/*.stories.tsx"],
 
-	addons: [
-		"@storybook/addon-links",
-		"@storybook/addon-essentials",
-		"@storybook/addon-a11y",
-		{
-			name: "@storybook/addon-styling-webpack",
-			options: {
-				rules: [
-					{
-						test: /\.css$/,
-						sideEffects: true,
-						use: [
-							"style-loader",
-							{
-								loader: "css-loader",
-								options: {
-									importLoaders: 1,
-									// Enable Interoperable CSS mode so that CSS variables can be imported into JS via the `:export` syntax.
-									// We should not need this mode if/when we use CSS modules in our codebase.
-									// https://webpack.js.org/loaders/css-loader/#separating-interoperable-css-only-and-css-module-features
-									modules: {
-										mode: "icss",
-									},
-								},
-							},
-							{
-								loader: "postcss-loader",
-							},
-						],
-					},
-				],
-			},
-		},
-		"@storybook/addon-webpack5-compiler-babel",
-	],
-
-	typescript: {
-		check: false,
-		checkOptions: {},
-		reactDocgen: "react-docgen-typescript",
-		reactDocgenTypescriptOptions: {
-			shouldExtractLiteralValuesFromEnum: true,
-			propFilter: (prop) =>
-				prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
-		},
-	},
+	addons: ["@storybook/addon-docs", "@storybook/addon-a11y"],
 
 	framework: {
-		name: "@storybook/react-webpack5",
+		name: "@storybook/react-vite",
 		options: {},
 	},
 
-	docs: {
-		autodocs: true,
-	},
-
 	staticDirs: [{ from: "../src/assets", to: "/assets" }],
 
 	managerHead: (head) => `

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from "@storybook/manager-api";
+import { addons } from "storybook/manager-api";
 import theme from "./theme";
 
 addons.setConfig({

.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
-import type { Preview, Decorator } from "@storybook/react";
+import { definePreview, type Decorator } from "@storybook/react-vite";
+import addonDocs from "@storybook/addon-docs";
 import "../src/base.css";
 import "../src/fonts.css";
 
@@ -16,11 +17,9 @@ const THEME_OPTIONS = {
 	},
 } as const;
 
-/**
- * Theme decorator that applies theme classes to the body and story container
- */
 const WithThemeProvider: Decorator = (Story, context) => {
-	const theme = context.globals.theme || THEME_OPTIONS.light.value;
+	const theme =
+		(context.globals as { theme?: string }).theme || THEME_OPTIONS.light.value;
 	const themeConfig =
 		Object.values(THEME_OPTIONS).find((t) => t.value === theme) ||
 		THEME_OPTIONS.light;
@@ -34,10 +33,7 @@ const WithThemeProvider: Decorator = (Story, context) => {
 
 		body.classList.add(theme);
 
-		// Story page
 		const canvas = document.querySelector(".sb-show-main") as HTMLElement;
-
-		// Docs page
 		const docsStories = document.querySelectorAll(".docs-story");
 
 		if (canvas) {
@@ -60,45 +56,41 @@ const WithThemeProvider: Decorator = (Story, context) => {
 	return <Story />;
 };
 
-export const globalTypes = {
+const globalTypes = {
 	theme: {
 		name: "Theme",
 		description: "Global theme for components",
 		defaultValue: THEME_OPTIONS.light.value,
 		toolbar: {
-			icon: "paintbrush",
-			// Array of plain string values or MenuItem shape
+			icon: "paintbrush" as const,
 			items: [
 				{
 					value: THEME_OPTIONS.light.value,
 					title: THEME_OPTIONS.light.name,
-					icon: "sun",
+					icon: "sun" as const,
 				},
 				{
 					value: THEME_OPTIONS.dark.value,
 					title: THEME_OPTIONS.dark.name,
-					icon: "moon",
+					icon: "moon" as const,
 				},
 			],
-			// Change title based on selected value
 			dynamicTitle: true,
 		},
 	},
 };
 
-const preview: Preview = {
+export default definePreview({
+	addons: [addonDocs()],
 	parameters: {
 		controls: {
 			matchers: {
 				color: /(background|color)$/i,
 				date: /Date$/i,
 			},
 		},
-		// Remove backgrounds to disable the default background selector
 		backgrounds: { disable: true },
 	},
 	globalTypes,
 	decorators: [WithThemeProvider],
-};
-
-export default preview;
+});

.storybook/theme.ts

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming";
+import { create } from "storybook/theming";
 
 export default create({
 	base: "light",

package.json

@@ -1,5 +1,12 @@
 {
   "name": "@freecodecamp/ui",
+  "imports": {
+    "#*": [
+      "./*",
+      "./*.ts",
+      "./*.tsx"
+    ]
+  },
   "version": "5.3.0",
   "author": "freeCodeCamp <team@freecodecamp.org>",
   "license": "BSD-3-Clause",
@@ -72,16 +79,10 @@
     "@rollup/plugin-node-resolve": "13.3.0",
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "8.5.0",
-    "@storybook/addon-a11y": "8.6.14",
-    "@storybook/addon-actions": "8.6.14",
-    "@storybook/addon-docs": "8.6.14",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/addon-links": "8.6.14",
-    "@storybook/addon-styling-webpack": "1.0.1",
-    "@storybook/addon-webpack5-compiler-babel": "3.0.6",
-    "@storybook/blocks": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/react-webpack5": "8.6.14",
+    "@storybook/addon-a11y": "10.3.1",
+    "@storybook/addon-docs": "10.3.1",
+    "@storybook/react": "10.3.1",
+    "@storybook/react-vite": "10.3.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
@@ -91,10 +92,8 @@
     "@types/sanitize-html": "2.16.0",
     "@vitest/ui": "4.0.18",
     "autoprefixer": "10.4.22",
-    "babel-loader": "8.4.1",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "cross-env": "7.0.3",
-    "css-loader": "6.11.0",
     "eslint": "9.39.2",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.5",
@@ -108,18 +107,17 @@
     "npm-run-all2": "5.0.2",
     "postcss": "8.5.6",
     "postcss-import": "14.1.0",
-    "postcss-loader": "8.2.0",
     "prettier": "3.7.1",
     "rollup": "4.59.0",
     "rollup-plugin-bundle-size": "1.0.3",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook": "8.6.17",
-    "style-loader": "3.3.4",
+    "storybook": "10.3.1",
     "tailwindcss": "3.4.18",
     "tslib": "2.8.1",
     "tsx": "4.20.6",
     "typescript": "5.9.3",
     "typescript-eslint": "8.54.0",
+    "vite": "8.0.1",
     "vitest": "4.0.18"
   },
   "keywords": [