feat: Design system foundation — Storybook + design tokens

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  framework: '@storybook/nextjs',
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  docs: {
+    autodocs: 'tag',
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+};
+
+export default config;

.storybook/manager-head.html

@@ -0,0 +1,5 @@
+<!-- Storybook Manager Head Configuration -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="theme-color" content="#1976d2" />
+<title>StormCom Component Library</title>

.storybook/preview.ts

@@ -0,0 +1,29 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    layout: 'centered',
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for all stories',
+      defaultValue: 'light',
+      toolbar: {
+        icon: 'lightning',
+        items: [
+          { value: 'light', title: 'Light' },
+          { value: 'dark', title: 'Dark' },
+        ],
+      },
+    },
+  },
+};
+
+export default preview;

docs/components/DESIGN_TOKENS_SYSTEM.md

@@ -0,0 +1,72 @@
+# Design Tokens System
+
+## Overview
+
+StormCom uses a centralized design tokens system to maintain consistency across components and enable easy theming and customization.
+
+## Token Categories
+
+### Colors
+Base and semantic color tokens for consistent color usage across the application.
+
+```typescript
+import { colors } from '@/lib/design-tokens';
+
+const primaryColor = colors.primary;
+const errorColor = colors.error;
+```
+
+### Spacing
+Consistent spacing scale based on 4px unit for margins, padding, and gaps.
+
+```typescript
+import { spacing } from '@/lib/design-tokens';
+
+const padding = spacing['4'];  // 1rem
+const gap = spacing['8'];      // 2rem
+```
+
+### Typography
+Font families, sizes, weights, and line heights for text styling.
+
+```typescript
+import { fonts, fontSizes, fontWeights } from '@/lib/design-tokens';
+
+const fontFamily = fonts.sans;
+const fontSize = fontSizes.lg;
+const fontWeight = fontWeights.semibold;
+```
+
+### Shadows
+Elevation system for depth and visual hierarchy.
+
+```typescript
+import { shadows } from '@/lib/design-tokens';
+
+const elevation = shadows.md;
+```
+
+### Animations
+Timing and easing functions for smooth transitions.
+
+```typescript
+import { durations, easings } from '@/lib/design-tokens';
+
+const duration = durations.normal;
+const easing = easings.easeOut;
+```
+
+## Running Storybook
+
+To view and interact with component stories:
+
+```bash
+npm run storybook
+```
+
+This starts the Storybook dev server on `http://localhost:6006`.
+
+## Per-Store Theming
+
+StormCom supports per-tenant theming via the `data-store-theme` attribute. Custom CSS variables can override default token values per store.
+

src/components/ui/stories/Button.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../button';
+
+const meta: Meta<typeof Button> = {
+  title: 'UI/Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg', 'icon'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Click me',
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    variant: 'destructive',
+    children: 'Delete',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    children: 'Outline',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Secondary',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: 'ghost',
+    children: 'Ghost',
+  },
+};
+
+export const Link: Story = {
+  args: {
+    variant: 'link',
+    children: 'Link Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    children: 'Small Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    children: 'Large Button',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: 'Disabled',
+  },
+};

src/components/ui/stories/Card.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../card';
+
+const meta: Meta<typeof Card> = {
+  title: 'UI/Card',
+  component: Card,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Card>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card description goes here</CardDescription>
+      </CardHeader>
+      <CardContent>
+        This is the main content of the card.
+      </CardContent>
+    </Card>
+  ),
+};
+
+export const WithFooter: Story = {
+  render: () => (
+    <Card>
+      <CardHeader>
+        <CardTitle>Card with Footer</CardTitle>
+      </CardHeader>
+      <CardContent>
+        Main content area with footer below.
+      </CardContent>
+      <CardFooter>
+        Footer content
+      </CardFooter>
+    </Card>
+  ),
+};

src/components/ui/stories/Dialog.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '../dialog';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'UI/Dialog',
+  component: Dialog,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Dialog open={true}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Dialog Title</DialogTitle>
+          <DialogDescription>
+            This is a dialog description
+          </DialogDescription>
+        </DialogHeader>
+        <div>Dialog content goes here</div>
+        <DialogFooter>
+          Footer actions
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};

src/components/ui/stories/Input.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input } from '../input';
+
+const meta: Meta<typeof Input> = {
+  title: 'UI/Input',
+  component: Input,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    value: 'Sample input value',
+    readOnly: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Disabled input',
+    disabled: true,
+  },
+};
+
+export const Email: Story = {
+  args: {
+    type: 'email',
+    placeholder: 'user@example.com',
+  },
+};
+
+export const Password: Story = {
+  args: {
+    type: 'password',
+    placeholder: 'Enter password',
+  },
+};

src/components/ui/stories/Select.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
+
+const meta: Meta<typeof Select> = {
+  title: 'UI/Select',
+  component: Select,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger>
+        <SelectValue placeholder="Select an option..." />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option1">Option 1</SelectItem>
+        <SelectItem value="option2">Option 2</SelectItem>
+        <SelectItem value="option3">Option 3</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};

src/lib/design-tokens/animations.ts

@@ -0,0 +1,20 @@
+/**
+ * Design Tokens: Animations
+ * Timing, easing functions, and animation definitions
+ */
+
+export const durations = {
+  fast: '150ms',
+  normal: '300ms',
+  slow: '500ms',
+} as const;
+
+export const easings = {
+  linear: 'linear',
+  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+  easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
+  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+} as const;
+
+export type Durations = typeof durations;
+export type Easings = typeof easings;