Refactor Storybook structure and remove boilerplate code

packages/serverless-workflow-diagram-editor/.storybook/preview.ts → packages/serverless-workflow-diagram-editor/.storybook/preview.tsx

@@ -15,7 +15,11 @@
  */
 
 import "../src/styles.css";
-import type { Preview } from "@storybook/react-vite";
+import type { Preview, Decorator } from "@storybook/react-vite";
+
+const withColorMode: Decorator = (Story, context) => {
+  return <Story />;
+};
 
 const preview: Preview = {
   parameters: {
@@ -33,6 +37,25 @@ const preview: Preview = {
       test: "todo",
     },
   },
+
+  globalTypes: {
+    colorMode: {
+      description: "Global color mode for components",
+      defaultValue: "system",
+      toolbar: {
+        title: "Color Mode",
+        icon: "circlehollow",
+        items: [
+          { value: "light", icon: "sun", title: "Light" },
+          { value: "dark", icon: "moon", title: "Dark" },
+          { value: "system", icon: "browser", title: "System" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+
+  decorators: [withColorMode],
 };
 
 export default preview;

packages/serverless-workflow-diagram-editor/package.json

@@ -35,6 +35,7 @@
     "build:dev": "pnpm clean && tsc -p tsconfig.json && vite build",
     "build:prod": "pnpm lint && pnpm clean && tsc -p tsconfig.json && vite build && pnpm test && pnpm test-e2e",
     "test": "vitest run --passWithNoTests",
+    "test:browser": "vitest run --passWithNoTests --browser.enabled=true --browser.name=playwright --browser.headless",
     "start": "storybook dev -p 6006 --no-open",
     "build:storybook": "pnpm clean:storybook && storybook build --output-dir ./dist-storybook",
     "test-e2e": "playwright test",
@@ -65,6 +66,8 @@
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "@vitest/browser": "catalog:",
+    "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "catalog:",
     "@vitest/ui": "catalog:",
     "jsdom": "catalog:",