added storybook

web/.eslintrc.json

@@ -1,5 +1,8 @@
 {
-  "extends": "next/core-web-vitals",
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ],
   "env": {
     "jest": true,
     "node": true

web/.gitignore

@@ -44,3 +44,5 @@ next-env.d.ts
 # Million Lint
 .million
 .million/store.json
+
+*storybook.log

web/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {}
+  },
+  staticDirs: ['../public']
+};
+export default config;

web/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+import '../src/styles/styles.scss';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+};
+
+export default preview;

web/package.json

@@ -9,7 +9,9 @@
     "lint": "next lint",
     "cy:run": "npx cypress run --browser chrome",
     "test": "jest",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "engines": {
     "node": ">=20.0.0"
@@ -101,6 +103,14 @@
     "virtua": "^0.40.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.4",
+    "@storybook/addon-essentials": "^8.5.8",
+    "@storybook/addon-interactions": "^8.5.8",
+    "@storybook/addon-onboarding": "^8.5.8",
+    "@storybook/blocks": "^8.5.8",
+    "@storybook/nextjs": "^8.5.8",
+    "@storybook/react": "^8.5.8",
+    "@storybook/test": "^8.5.8",
     "@tailwindcss/postcss": "^4.0.8",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -124,11 +134,13 @@
     "eslint-config-next": "14.2.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-storybook": "^0.11.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
     "postcss": "8.5.3",
     "sass": "^1.83.4",
+    "storybook": "^8.5.8",
     "tailwindcss": "^4.0.8",
     "tailwindcss-animate": "^1.0.7",
     "ts-jest": "^29.2.5",

web/src/components/ui/switch.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
-
-import { cn } from "@/lib/classMerge"
-
-function Switch({
-  className,
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          "bg-background pointer-events-none block size-4 rounded-full ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-        )}
-      />
-    </SwitchPrimitive.Root>
-  )
-}
-
-export { Switch }

web/src/components/ui/switch/AppSwitch.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Switch } from './AppSwitch';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Base/Switch',
+  component: Switch,
+  argTypes: {
+    className: { control: 'text' },
+    defaultChecked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    checked: { control: 'boolean' }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  args: {}
+};
+
+export const Checked: Story = {
+  args: {
+    defaultChecked: true
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true
+  }
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    disabled: true,
+    defaultChecked: true
+  }
+};
+
+export const WithCustomClassName: Story = {
+  args: {
+    className: 'bg-blue-500 data-[state=checked]:bg-green-500'
+  }
+};

web/src/components/ui/switch/AppSwitch.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+import { cn } from '@/lib/classMerge';
+
+type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  required?: boolean;
+  onCheckedChange?(checked: boolean): void;
+};
+
+function Switch({ className, ...props }: SwitchProps) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}>
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          'bg-background pointer-events-none block size-4 rounded-full ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

web/src/styles/buster.scss

@@ -0,0 +1 @@
+

web/src/styles/styles.scss

@@ -1,4 +1,5 @@
 @import './fonts';
+@import './buster';
 @import './tailwind';
 @import './sql';
 @import './monaco';

web/src/styles/tailwind.css

@@ -41,8 +41,34 @@
   --color-primary-light: #a26cff;
   --color-primary-dark: #6d28d9;
 
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(0 0% 3.9%);
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(0 0% 3.9%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(0 0% 3.9%);
+  --color-secondary: hsl(0 0% 96.1%);
+  --color-secondary-foreground: hsl(0 0% 9%);
+  --color-muted: hsl(0 0% 96.1%);
+  --color-muted-foreground: hsl(0 0% 45.1%);
+  --color-accent: hsl(0 0% 96.1%);
+  --color-accent-foreground: hsl(0 0% 9%);
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(0 0% 98%);
+  --color-border: hsl(0 0% 89.8%);
+  --color-ring: hsl(0 0% 3.9%);
+
   /* component color */
-  --color-input: var(--color-primary);
+  --color-input: hsl(0 0% 89.8%);
 }
 
 @import './tailwindAnimations.css';
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}