Upgrade storybook to 10

Signed-off-by: Émile Ré <emile@getprobo.com>

packages/ui/.storybook/main.ts

@@ -0,0 +1,14 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    import.meta.resolve("@chromatic-com/storybook"),
+    import.meta.resolve("@storybook/addon-vitest"),
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

packages/ui/.storybook/preview.css

@@ -0,0 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "../src/theme.css";
+@source "../../helpers/src";

packages/ui/.storybook/preview.tsx

@@ -0,0 +1,33 @@
+import type { Preview } from "@storybook/react";
+import { useEffect } from "react";
+import { BrowserRouter } from "react-router";
+
+import "../src/theme.css";
+import "./preview.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      useEffect(() => {
+        document.body.classList.add("bg-level-0");
+      }, []);
+      return (
+        <BrowserRouter>
+          <div className="text-txt-primary">
+            <Story />
+          </div>
+        </BrowserRouter>
+      );
+    },
+  ],
+};
+
+export default preview;

packages/ui/package.json

@@ -6,6 +6,7 @@
   "main": "src/index.ts",
   "scripts": {
     "lint": "eslint . --concurrency 2",
+    "dev": "storybook dev -p 6006 --no-open",
     "check": "tsc --noEmit -p tsconfig.app.json",
     "icons": "bun run src/Atoms/Icons/generator.ts"
   },
@@ -35,8 +36,12 @@
     "zustand": "^5.0.4"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
     "@probo/eslint-config": "1.0.0",
     "@rollup/pluginutils": "^5.1.4",
+    "@storybook/addon-vitest": "^10.2.8",
+    "@storybook/react": "^10.2.8",
+    "@storybook/react-vite": "^10.2.8",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.17",
     "@types/react": "^19.1.2",
@@ -50,6 +55,7 @@
     "react-docgen": "^7.1.1",
     "react-dom": "^19.1.0",
     "react-router": "^7.12.0",
+    "storybook": "^10.2.8",
     "typescript": "~5.8.3",
     "vite": "^7.3.1",
     "vitest": "^3.1.3"

packages/ui/src/Molecules/Table/DataTable.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
 import { type FC, Fragment, useState } from "react";
+import { fn } from "storybook/test";
 
 import { Badge } from "../../Atoms/Badge/Badge";
 import { CellHead, DataTable, Row } from "../../Atoms/DataTable/DataTable";