feat: update storybook (#114)

Author: Cahllagerfeld

.storybook/main.ts

@@ -2,19 +2,11 @@ import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
 	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-	addons: [
-		"@storybook/addon-links",
-		"@storybook/addon-essentials",
-		"@storybook/addon-onboarding",
-		"@storybook/addon-interactions",
-		"@storybook/addon-themes"
-	],
+	addons: ["@storybook/addon-docs", "@storybook/addon-onboarding", "@storybook/addon-themes"],
+
 	framework: {
 		name: "@storybook/react-vite",
 		options: {}
-	},
-	docs: {
-		autodocs: "tag"
 	}
 };
 export default config;

.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview, ReactRenderer } from "@storybook/react";
+import type { Preview, ReactRenderer } from "@storybook/react-vite";
 import { withThemeByClassName } from "@storybook/addon-themes";
 
 /* TODO: update import to your tailwind styles file. If you're using Angular, inject this through your angular.json config instead */
@@ -7,11 +7,10 @@ import "../src/index.css";
 const preview: Preview = {
 	parameters: {
 		backgrounds: {
-			default: "light",
-			values: [
-				{ name: "light", value: "#F9FAFB" },
-				{ name: "dark", value: "#1F2937" }
-			]
+			options: {
+				light: { name: "Light", value: "#F9FAFB" },
+				dark: { name: "Dark", value: "#1F2937" }
+			}
 		},
 		actions: { argTypesRegex: "^on[A-Z].*" },
 		controls: {
@@ -21,6 +20,9 @@ const preview: Preview = {
 			}
 		}
 	},
+	initialGlobals: {
+		backgrounds: { value: "light" }
+	},
 
 	decorators: [
 		// Adds theme switching support.

eslint.config.mjs

@@ -1,28 +1,34 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import js from "@eslint/js";
 import globals from "globals";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
-import storybook from "eslint-plugin-storybook";
+import { defineConfig, globalIgnores } from "eslint/config";
 
-export default tseslint.config(
-	{ ignores: ["dist"] },
+export default defineConfig([
+	globalIgnores(["dist"]),
 	{
-		extends: [js.configs.recommended, ...tseslint.configs.recommended],
+		plugins: {
+			storybook
+		},
 		files: ["**/*.{ts,tsx}"],
+		extends: [
+			js.configs.recommended,
+			tseslint.configs.recommended,
+			reactHooks.configs.flat.recommended,
+			reactRefresh.configs.vite
+		],
 		languageOptions: {
 			ecmaVersion: 2020,
 			globals: globals.browser
 		},
-		plugins: {
-			"react-hooks": reactHooks,
-			"react-refresh": reactRefresh,
-			storybook
-		},
 		rules: {
 			...reactHooks.configs.recommended.rules,
 			"react/prop-types": "off",
 			"react-refresh/only-export-components": ["off", { allowConstantExport: true }]
 		}
 	}
-);
+]);

package.json

@@ -77,34 +77,30 @@
 		"tailwind-merge": "^2.6.0"
 	},
 	"devDependencies": {
-		"@changesets/cli": "^2.28.1",
-		"@eslint/js": "^9.21.0",
-		"@storybook/addon-essentials": "^8.5.8",
-		"@storybook/addon-interactions": "^8.5.8",
-		"@storybook/addon-links": "^8.5.8",
-		"@storybook/addon-onboarding": "^8.5.8",
-		"@storybook/addon-themes": "^8.5.8",
-		"@storybook/blocks": "^8.5.8",
-		"@storybook/react": "^8.5.8",
-		"@storybook/react-vite": "^8.5.8",
-		"@storybook/testing-library": "^0.2.2",
+		"@changesets/cli": "^2.29.7",
+		"@eslint/js": "^9.39.1",
+		"@storybook/addon-docs": "10.0.7",
+		"@storybook/addon-onboarding": "^10.0.7",
+		"@storybook/addon-themes": "^10.0.7",
+		"@storybook/react-vite": "^10.0.7",
 		"autoprefixer": "^10.4.20",
-		"eslint": "^9.21.0",
-		"eslint-plugin-react-hooks": "^5.1.0",
-		"eslint-plugin-react-refresh": "^0.4.19",
-		"eslint-plugin-storybook": "^0.11.2",
-		"globals": "^15.14.0",
+		"eslint": "^9.39.1",
+		"eslint-plugin-react-hooks": "^7.0.1",
+		"eslint-plugin-react-refresh": "^0.4.24",
+		"eslint-plugin-storybook": "^10.0.7",
+		"globals": "^16.5.0",
 		"husky": "^9.1.7",
 		"lint-staged": "^15.4.3",
 		"postcss": "^8.5.3",
 		"prettier": "^3.5.2",
-		"publint": "^0.3.4",
-		"storybook": "^8.5.8",
+		"publint": "^0.3.15",
+		"storybook": "^10.0.7",
 		"tailwindcss": "^3.4.17",
 		"tailwindcss-animate": "^1.0.7",
-		"tsup": "^8.3.6",
+		"tsup": "^8.5.1",
 		"typescript": "^5.7.3",
-		"typescript-eslint": "^8.24.1",
+		"typescript-eslint": "^8.46.4",
+		"vite": "^7.2.2",
 		"vitest": "^3.0.6"
 	},
 	"peerDependencies": {