feat: refact web

apps/storybook/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+storybook-static
+

apps/storybook/.storybook/main.ts

@@ -0,0 +1,32 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          '@lib': path.resolve(__dirname, '../../../packages/design-system/src/lib'),
+          '@components': path.resolve(__dirname, '../../../packages/design-system/src/components'),
+        },
+      },
+    });
+  },
+};
+
+export default config;
+

apps/storybook/.storybook/preview-head.html

@@ -0,0 +1,15 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+  rel="stylesheet"
+/>
+<style>
+  :root {
+    --font-poppins: 'Poppins', system-ui, sans-serif;
+  }
+  body {
+    font-family: var(--font-poppins);
+  }
+</style>
+

apps/storybook/.storybook/preview.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import "@react-shop/design-system/src/styles/global.css";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: "light",
+      values: [
+        { name: "light", value: "#ffffff" },
+        { name: "dark", value: "#1a1a1a" },
+      ],
+    },
+  },
+};
+
+export default preview;

apps/storybook/README.md

@@ -0,0 +1,59 @@
+# Storybook - Design System Documentation
+
+This is the Storybook documentation app for `@react-shop/design-system`.
+
+## Getting Started
+
+```bash
+# Install dependencies (from root)
+pnpm install
+
+# Start Storybook
+cd apps/storybook
+pnpm dev
+```
+
+Storybook will be available at `http://localhost:6006`
+
+## Building
+
+```bash
+pnpm build
+```
+
+## Writing Stories
+
+Create stories in the `stories/` directory:
+
+```typescript
+// stories/Button.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@react-shop/design-system';
+
+const meta = {
+  title: 'Atoms/Button',
+  component: Button,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Button',
+    variant: 'solid',
+  },
+};
+```
+
+## Structure
+
+```
+stories/
+├── Atoms/          → Basic components (Button, Text, Input)
+├── Molecules/      → Composite components (Card, Rating)
+├── Organisms/      → Complex components (Modal, ProductCard)
+└── Layout/         → Layout components (Header, Footer)
+```
+

apps/storybook/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "storybook",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build",
+    "preview": "storybook preview"
+  },
+  "dependencies": {
+    "@react-shop/design-system": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "storybook": "^8.0.0",
+    "tailwindcss": "^3.4.0",
+    "tsconfig": "workspace:*",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}

apps/storybook/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+

apps/storybook/stories/Atoms/Avatar.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from '@react-shop/design-system';
+
+const meta = {
+  title: 'Atoms/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl'],
+    },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    src: 'https://i.pravatar.cc/150?img=1',
+    alt: 'User Avatar',
+  },
+};
+
+export const WithFallback: Story = {
+  args: {
+    src: undefined,
+    fallback: 'JD',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar src="https://i.pravatar.cc/150?img=2" alt="Small" size="sm" />
+      <Avatar src="https://i.pravatar.cc/150?img=3" alt="Medium" size="md" />
+      <Avatar src="https://i.pravatar.cc/150?img=4" alt="Large" size="lg" />
+      <Avatar src="https://i.pravatar.cc/150?img=5" alt="Extra Large" size="xl" />
+    </div>
+  ),
+};
+
+export const Fallbacks: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar fallback="AB" size="md" />
+      <Avatar fallback="CD" size="md" />
+      <Avatar fallback="EF" size="md" />
+    </div>
+  ),
+};
+

apps/storybook/stories/Atoms/Badge.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from '@react-shop/design-system';
+
+const meta = {
+  title: 'Atoms/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'primary', 'success', 'error', 'warning'],
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Badge',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    children: 'Primary',
+    variant: 'primary',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    children: 'Success',
+    variant: 'success',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    children: 'Error',
+    variant: 'error',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    children: 'Warning',
+    variant: 'warning',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Badge>Default</Badge>
+      <Badge variant="primary">Primary</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="error">Error</Badge>
+      <Badge variant="warning">Warning</Badge>
+    </div>
+  ),
+};
+

apps/storybook/stories/Atoms/Button.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@react-shop/design-system';
+
+const meta = {
+  title: 'Atoms/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['solid', 'outline', 'ghost', 'link'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    fullWidth: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Solid: Story = {
+  args: {
+    children: 'Solid Button',
+    variant: 'solid',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: 'Outline Button',
+    variant: 'outline',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: 'Ghost Button',
+    variant: 'ghost',
+  },
+};
+
+export const Link: Story = {
+  args: {
+    children: 'Link Button',
+    variant: 'link',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    children: 'Small Button',
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: 'Large Button',
+    size: 'lg',
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    children: 'Full Width Button',
+    fullWidth: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled Button',
+    disabled: true,
+  },
+};
+