@mzc-fe/design-system 0.0.1-rc.0

package/src/components/skeleton.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Skeleton } from "./skeleton";
+
+const meta = {
+  title: "Components/Skeleton",
+  component: Skeleton,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Skeleton className="h-4 w-[250px]" />,
+};
+
+export const Shapes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Skeleton className="h-4 w-[250px]" />
+      <Skeleton className="h-4 w-[200px]" />
+      <Skeleton className="h-4 w-[150px]" />
+    </div>
+  ),
+};
+
+export const CardSkeleton: Story = {
+  render: () => (
+    <div className="flex items-center space-x-4 w-[350px]">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2 flex-1">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+      </div>
+    </div>
+  ),
+};
+
+export const ArticleSkeleton: Story = {
+  render: () => (
+    <div className="space-y-4 w-[400px]">
+      <Skeleton className="h-8 w-3/4" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-5/6" />
+      <Skeleton className="h-[200px] w-full rounded-md" />
+    </div>
+  ),
+};
+

package/src/components/skeleton.test.tsx

@@ -0,0 +1,24 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { Skeleton } from "./skeleton";
+
+describe("Skeleton", () => {
+  it("should render skeleton", () => {
+    const { container } = render(<Skeleton />);
+    const skeleton = container.querySelector('[data-slot="skeleton"]');
+    expect(skeleton).toBeInTheDocument();
+  });
+
+  it("should apply custom className", () => {
+    const { container } = render(<Skeleton className="w-20 h-20" />);
+    const skeleton = container.querySelector('[data-slot="skeleton"]');
+    expect(skeleton).toHaveClass("w-20", "h-20");
+  });
+
+  it("should have animate-pulse class", () => {
+    const { container } = render(<Skeleton />);
+    const skeleton = container.querySelector('[data-slot="skeleton"]');
+    expect(skeleton).toHaveClass("animate-pulse");
+  });
+});
+

package/src/components/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/slider.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Slider } from "./slider";
+
+const meta = {
+  title: "Components/Slider",
+  component: Slider,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    defaultValue: {
+      control: "object",
+      description: "The default value of the slider.",
+    },
+    min: {
+      control: "number",
+      description: "The minimum value.",
+    },
+    max: {
+      control: "number",
+      description: "The maximum value.",
+    },
+    step: {
+      control: "number",
+      description: "The step value.",
+    },
+  },
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: [50],
+    max: 100,
+  },
+};
+
+export const WithValue: Story = {
+  render: () => {
+    const [value, setValue] = useState([50]);
+    return (
+      <div className="space-y-4 w-[350px]">
+        <Slider value={value} onValueChange={setValue} max={100} />
+        <div className="text-sm text-muted-foreground">
+          Value: {value[0]}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Range: Story = {
+  render: () => {
+    const [value, setValue] = useState([20, 80]);
+    return (
+      <div className="space-y-4 w-[350px]">
+        <Slider value={value} onValueChange={setValue} max={100} />
+        <div className="text-sm text-muted-foreground">
+          Range: {value[0]} - {value[1]}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const CustomRange: Story = {
+  render: () => {
+    const [value, setValue] = useState([25]);
+    return (
+      <div className="space-y-4 w-[350px]">
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          min={0}
+          max={1000}
+          step={10}
+        />
+        <div className="text-sm text-muted-foreground">
+          Value: {value[0]} (0-1000, step 10)
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[350px]">
+      <Slider defaultValue={[50]} max={100} disabled />
+    </div>
+  ),
+};
+

package/src/components/slider.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import { Slider } from "./slider";
+
+describe("Slider", () => {
+  it("should render slider", () => {
+    const { container } = render(<Slider defaultValue={[50]} />);
+    const slider = container.querySelector('[data-slot="slider"]');
+    expect(slider).toBeInTheDocument();
+  });
+
+  it("should render slider track", () => {
+    const { container } = render(<Slider defaultValue={[50]} />);
+    const track = container.querySelector('[data-slot="slider-track"]');
+    expect(track).toBeInTheDocument();
+  });
+
+  it("should render slider thumb", () => {
+    const { container } = render(<Slider defaultValue={[50]} />);
+    const thumb = container.querySelector('[data-slot="slider-thumb"]');
+    expect(thumb).toBeInTheDocument();
+  });
+
+  it("should call onValueChange when value changes", async () => {
+    const handleChange = vi.fn();
+    const { container } = render(
+      <Slider value={[50]} onValueChange={handleChange} />
+    );
+    const thumb = container.querySelector(
+      '[data-slot="slider-thumb"]'
+    ) as HTMLElement;
+    // Note: 실제 슬라이더 드래그는 더 복잡한 상호작용이 필요합니다
+    expect(thumb).toBeInTheDocument();
+  });
+
+  it("should support range values", () => {
+    const { container } = render(<Slider value={[20, 80]} />);
+    const thumbs = container.querySelectorAll('[data-slot="slider-thumb"]');
+    expect(thumbs.length).toBe(2);
+  });
+
+  it("should respect min and max values", () => {
+    const { container } = render(
+      <Slider defaultValue={[25]} min={0} max={100} />
+    );
+    const slider = container.querySelector('[data-slot="slider"]');
+    expect(slider).toBeInTheDocument();
+  });
+});

package/src/components/slider.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

package/src/components/sonner.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Toaster } from "./sonner";
+import { Button } from "./button";
+import { toast } from "sonner";
+
+const meta = {
+  title: "Components/Sonner",
+  component: Toaster,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Toaster>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <Toaster />
+      <div className="flex flex-wrap gap-4">
+        <Button
+          onClick={() => toast("Event has been created", { description: "Monday, January 3rd at 6:00pm" })}
+        >
+          Show Toast
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => toast.success("Success!", { description: "Your changes have been saved." })}
+        >
+          Success
+        </Button>
+        <Button
+          variant="destructive"
+          onClick={() => toast.error("Error!", { description: "Something went wrong." })}
+        >
+          Error
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => toast.info("Info", { description: "Here's some information." })}
+        >
+          Info
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => toast.warning("Warning", { description: "Please be careful." })}
+        >
+          Warning
+        </Button>
+      </div>
+    </>
+  ),
+};
+
+export const WithActions: Story = {
+  render: () => (
+    <>
+      <Toaster />
+      <div className="flex gap-4">
+        <Button
+          onClick={() =>
+            toast("Event has been created", {
+              description: "Monday, January 3rd at 6:00pm",
+              action: {
+                label: "Undo",
+                onClick: () => console.log("Undo"),
+              },
+            })
+          }
+        >
+          Toast with Action
+        </Button>
+      </div>
+    </>
+  ),
+};
+
+export const LongDuration: Story = {
+  render: () => (
+    <>
+      <Toaster />
+      <Button
+        onClick={() =>
+          toast("This toast will stay for 10 seconds", {
+            duration: 10000,
+          })
+        }
+      >
+        Long Duration Toast
+      </Button>
+    </>
+  ),
+};
+

package/src/components/sonner.tsx

@@ -0,0 +1,38 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/src/components/spinner.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Spinner } from "./spinner";
+
+const meta = {
+  title: "Components/Spinner",
+  component: Spinner,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Spinner />,
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Spinner className="size-4" />
+      <Spinner className="size-6" />
+      <Spinner className="size-8" />
+      <Spinner className="size-12" />
+    </div>
+  ),
+};
+
+export const InButton: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <button className="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-primary-foreground">
+        <Spinner className="size-4" />
+        Loading...
+      </button>
+      <button className="inline-flex items-center gap-2 rounded-md border px-4 py-2">
+        <Spinner className="size-4" />
+        Processing
+      </button>
+    </div>
+  ),
+};
+
+export const WithText: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Spinner />
+      <span className="text-sm text-muted-foreground">Loading data...</span>
+    </div>
+  ),
+};
+

package/src/components/spinner.test.tsx

@@ -0,0 +1,30 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { Spinner } from "./spinner";
+
+describe("Spinner", () => {
+  it("should render spinner", () => {
+    const { container } = render(<Spinner />);
+    const spinner = container.querySelector('[role="status"]');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it("should have aria-label", () => {
+    const { container } = render(<Spinner />);
+    const spinner = container.querySelector('[role="status"]');
+    expect(spinner).toHaveAttribute("aria-label", "Loading");
+  });
+
+  it("should apply custom className", () => {
+    const { container } = render(<Spinner className="size-8" />);
+    const spinner = container.querySelector('[role="status"]');
+    expect(spinner).toHaveClass("size-8");
+  });
+
+  it("should have animate-spin class", () => {
+    const { container } = render(<Spinner />);
+    const spinner = container.querySelector('[role="status"]');
+    expect(spinner).toHaveClass("animate-spin");
+  });
+});
+

package/src/components/spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

package/src/components/switch.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Switch } from "./switch";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/Switch",
+  component: Switch,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    checked: {
+      control: "boolean",
+      description: "Whether the switch is checked.",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the switch is disabled.",
+    },
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <div className="flex items-center space-x-2">
+        <Switch id="airplane-mode" checked={checked} onCheckedChange={setChecked} />
+        <Label htmlFor="airplane-mode">Airplane Mode</Label>
+      </div>
+    );
+  },
+};
+
+export const Checked: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Switch id="checked" defaultChecked />
+      <Label htmlFor="checked">Enabled by default</Label>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center space-x-2">
+        <Switch id="disabled" disabled />
+        <Label htmlFor="disabled">Disabled off</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Switch id="disabled-on" disabled defaultChecked />
+        <Label htmlFor="disabled-on">Disabled on</Label>
+      </div>
+    </div>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => {
+    const [settings, setSettings] = useState({
+      notifications: true,
+      email: false,
+      sms: true,
+    });
+
+    return (
+      <div className="space-y-3">
+        <div className="flex items-center space-x-2">
+          <Switch
+            id="notifications"
+            checked={settings.notifications}
+            onCheckedChange={(checked) =>
+              setSettings({ ...settings, notifications: checked as boolean })
+            }
+          />
+          <Label htmlFor="notifications">Notifications</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Switch
+            id="email"
+            checked={settings.email}
+            onCheckedChange={(checked) =>
+              setSettings({ ...settings, email: checked as boolean })
+            }
+          />
+          <Label htmlFor="email">Email</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Switch
+            id="sms"
+            checked={settings.sms}
+            onCheckedChange={(checked) =>
+              setSettings({ ...settings, sms: checked as boolean })
+            }
+          />
+          <Label htmlFor="sms">SMS</Label>
+        </div>
+      </div>
+    );
+  },
+};
+