Feat/issues 662 663 664 665

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../components/**/*.stories.ts?(x)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/react";
+import "../app/globals.css";
+
+const preview: Preview = {
+  parameters: {
+    layout: "centered",
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

components/ui/badge.stories.tsx

@@ -0,0 +1,178 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "./badge";
+
+const meta = {
+  title: "UI/Badge",
+  component: Badge,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "secondary", "destructive", "outline", "ghost", "link"],
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default variant
+export const Default: Story = {
+  args: {
+    variant: "default",
+    children: "Default Badge",
+  },
+};
+
+// Secondary variant
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary Badge",
+  },
+};
+
+// Destructive variant
+export const Destructive: Story = {
+  args: {
+    variant: "destructive",
+    children: "Destructive Badge",
+  },
+};
+
+// Outline variant
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Outline Badge",
+  },
+};
+
+// Ghost variant
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    children: "Ghost Badge",
+  },
+};
+
+// Link variant
+export const Link: Story = {
+  args: {
+    variant: "link",
+    children: "Link Badge",
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="ghost">Ghost</Badge>
+      <Badge variant="link">Link</Badge>
+    </div>
+  ),
+};
+
+// With different text lengths
+export const LongText: Story = {
+  args: {
+    variant: "default",
+    children: "This is a longer badge text",
+  },
+};
+
+export const ShortText: Story = {
+  args: {
+    variant: "default",
+    children: "New",
+  },
+};
+
+// Status badges examples
+export const StatusActive: Story = {
+  args: {
+    variant: "default",
+    children: "Active",
+  },
+};
+
+export const StatusInactive: Story = {
+  args: {
+    variant: "outline",
+    children: "Inactive",
+  },
+};
+
+export const StatusError: Story = {
+  args: {
+    variant: "destructive",
+    children: "Error",
+  },
+};
+
+export const StatusWarning: Story = {
+  args: {
+    variant: "secondary",
+    children: "Warning",
+  },
+};
+
+// Tag-like badges
+export const TagDefault: Story = {
+  args: {
+    variant: "default",
+    children: "React",
+  },
+};
+
+export const TagSecondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "TypeScript",
+  },
+};
+
+export const TagOutline: Story = {
+  args: {
+    variant: "outline",
+    children: "CSS",
+  },
+};
+
+// Combination showcase
+export const VariantShowcase: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Variants</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="default">Default</Badge>
+          <Badge variant="secondary">Secondary</Badge>
+          <Badge variant="destructive">Destructive</Badge>
+          <Badge variant="outline">Outline</Badge>
+          <Badge variant="ghost">Ghost</Badge>
+          <Badge variant="link">Link</Badge>
+        </div>
+      </div>
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Common Use Cases</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="default">Featured</Badge>
+          <Badge variant="secondary">New</Badge>
+          <Badge variant="destructive">Urgent</Badge>
+          <Badge variant="outline">Pending</Badge>
+          <Badge variant="ghost">Draft</Badge>
+          <Badge variant="link">Learn more</Badge>
+        </div>
+      </div>
+    </div>
+  ),
+};

components/ui/button.stories.tsx

@@ -0,0 +1,180 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+
+const meta = {
+  title: "UI/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "outline", "secondary", "ghost", "destructive", "link"],
+    },
+    size: {
+      control: "select",
+      options: ["default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"],
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default variant stories
+export const Default: Story = {
+  args: {
+    variant: "default",
+    size: "default",
+    children: "Click me",
+  },
+};
+
+export const DefaultSmall: Story = {
+  args: {
+    variant: "default",
+    size: "sm",
+    children: "Small button",
+  },
+};
+
+export const DefaultLarge: Story = {
+  args: {
+    variant: "default",
+    size: "lg",
+    children: "Large button",
+  },
+};
+
+// Ghost variant stories
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    size: "default",
+    children: "Ghost button",
+  },
+};
+
+export const GhostSmall: Story = {
+  args: {
+    variant: "ghost",
+    size: "sm",
+    children: "Small ghost",
+  },
+};
+
+export const GhostLarge: Story = {
+  args: {
+    variant: "ghost",
+    size: "lg",
+    children: "Large ghost",
+  },
+};
+
+// Secondary variant stories
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    size: "default",
+    children: "Secondary button",
+  },
+};
+
+export const SecondarySmall: Story = {
+  args: {
+    variant: "secondary",
+    size: "sm",
+    children: "Small secondary",
+  },
+};
+
+export const SecondaryLarge: Story = {
+  args: {
+    variant: "secondary",
+    size: "lg",
+    children: "Large secondary",
+  },
+};
+
+// Destructive variant stories
+export const Destructive: Story = {
+  args: {
+    variant: "destructive",
+    size: "default",
+    children: "Delete",
+  },
+};
+
+export const DestructiveSmall: Story = {
+  args: {
+    variant: "destructive",
+    size: "sm",
+    children: "Delete",
+  },
+};
+
+export const DestructiveLarge: Story = {
+  args: {
+    variant: "destructive",
+    size: "lg",
+    children: "Delete",
+  },
+};
+
+// Icon size stories
+export const IconDefault: Story = {
+  args: {
+    variant: "default",
+    size: "icon",
+    children: "🔍",
+  },
+};
+
+export const IconSmall: Story = {
+  args: {
+    variant: "default",
+    size: "icon-sm",
+    children: "📝",
+  },
+};
+
+export const IconLarge: Story = {
+  args: {
+    variant: "default",
+    size: "icon-lg",
+    children: "⚙️",
+  },
+};
+
+// Disabled state
+export const Disabled: Story = {
+  args: {
+    variant: "default",
+    size: "default",
+    children: "Disabled button",
+    disabled: true,
+  },
+};
+
+export const DisabledGhost: Story = {
+  args: {
+    variant: "ghost",
+    size: "default",
+    children: "Disabled ghost",
+    disabled: true,
+  },
+};
+
+export const DisabledDestructive: Story = {
+  args: {
+    variant: "destructive",
+    size: "default",
+    children: "Disabled delete",
+    disabled: true,
+  },
+};