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

package/src/components/skeleton.stories.tsx

@@ -1,53 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,63 +0,0 @@
-"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

@@ -1,96 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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>
-    );
-  },
-};
-