fix #127 - feat: Implement Storybook structure and styling

.changeset/grumpy-buttons-cheat.md

@@ -0,0 +1,5 @@
+---
+"@serverlessworkflow/diagram-editor": minor
+---
+
+Implemented Storybook enhancements including color theme selector, folder restructuring, test setup, collapsible sections, and removed 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

@@ -66,6 +66,8 @@
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "@vitest/browser": "catalog:",
+    "@vitest/browser-playwright": "catalog:",
     "@vitest/coverage-v8": "catalog:",
     "@vitest/ui": "catalog:",
     "jsdom": "catalog:",