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

package/src/components/popover.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Button } from "./button";
+
+const meta = {
+  title: "Components/Popover",
+  component: Popover,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="space-y-2">
+          <h4 className="font-medium leading-none">Dimensions</h4>
+          <p className="text-sm text-muted-foreground">
+            Set the dimensions for the layer.
+          </p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+
+export const WithForm: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open form</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Dimensions</h4>
+            <p className="text-sm text-muted-foreground">
+              Set the dimensions for the layer.
+            </p>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <label htmlFor="width" className="text-sm">
+                Width
+              </label>
+              <input
+                id="width"
+                defaultValue="100%"
+                className="col-span-2 h-8 rounded-md border px-2 text-sm"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <label htmlFor="height" className="text-sm">
+                Height
+              </label>
+              <input
+                id="height"
+                defaultValue="25px"
+                className="col-span-2 h-8 rounded-md border px-2 text-sm"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+
+export const WithList: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">View options</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56">
+        <div className="space-y-2">
+          <h4 className="font-medium">Options</h4>
+          <ul className="space-y-1 text-sm">
+            <li className="cursor-pointer hover:bg-accent p-2 rounded">
+              Option 1
+            </li>
+            <li className="cursor-pointer hover:bg-accent p-2 rounded">
+              Option 2
+            </li>
+            <li className="cursor-pointer hover:bg-accent p-2 rounded">
+              Option 3
+            </li>
+          </ul>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+

package/src/components/popover.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/src/components/progress.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Progress } from "./progress";
+
+const meta = {
+  title: "Components/Progress",
+  component: Progress,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+      description: "The progress value (0-100).",
+    },
+  },
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: 33,
+  },
+};
+
+export const Values: Story = {
+  render: () => (
+    <div className="space-y-4 w-[350px]">
+      <div className="space-y-2">
+        <div className="flex justify-between text-sm">
+          <span>0%</span>
+        </div>
+        <Progress value={0} />
+      </div>
+      <div className="space-y-2">
+        <div className="flex justify-between text-sm">
+          <span>25%</span>
+        </div>
+        <Progress value={25} />
+      </div>
+      <div className="space-y-2">
+        <div className="flex justify-between text-sm">
+          <span>50%</span>
+        </div>
+        <Progress value={50} />
+      </div>
+      <div className="space-y-2">
+        <div className="flex justify-between text-sm">
+          <span>75%</span>
+        </div>
+        <Progress value={75} />
+      </div>
+      <div className="space-y-2">
+        <div className="flex justify-between text-sm">
+          <span>100%</span>
+        </div>
+        <Progress value={100} />
+      </div>
+    </div>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="space-y-2 w-[350px]">
+      <div className="flex justify-between text-sm">
+        <span>Uploading...</span>
+        <span>45%</span>
+      </div>
+      <Progress value={45} />
+    </div>
+  ),
+};
+

package/src/components/progress.test.tsx

@@ -0,0 +1,36 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { Progress } from "./progress";
+
+describe("Progress", () => {
+  it("should render progress", () => {
+    const { container } = render(<Progress value={50} />);
+    const progress = container.querySelector('[data-slot="progress"]');
+    expect(progress).toBeInTheDocument();
+  });
+
+  it("should render progress indicator", () => {
+    const { container } = render(<Progress value={50} />);
+    const indicator = container.querySelector('[data-slot="progress-indicator"]');
+    expect(indicator).toBeInTheDocument();
+  });
+
+  it("should apply value correctly", () => {
+    const { container } = render(<Progress value={75} />);
+    const indicator = container.querySelector('[data-slot="progress-indicator"]') as HTMLElement;
+    expect(indicator.style.transform).toContain("25%");
+  });
+
+  it("should handle 0 value", () => {
+    const { container } = render(<Progress value={0} />);
+    const indicator = container.querySelector('[data-slot="progress-indicator"]') as HTMLElement;
+    expect(indicator.style.transform).toContain("100%");
+  });
+
+  it("should handle 100 value", () => {
+    const { container } = render(<Progress value={100} />);
+    const indicator = container.querySelector('[data-slot="progress-indicator"]') as HTMLElement;
+    expect(indicator.style.transform).toContain("0%");
+  });
+});
+

package/src/components/progress.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

package/src/components/radio-group.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RadioGroup, RadioGroupItem } from "./radio-group";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/RadioGroup",
+  component: RadioGroup,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-one">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-one" id="option-one" />
+        <Label htmlFor="option-one">Option One</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-two" id="option-two" />
+        <Label htmlFor="option-two">Option Two</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-three" id="option-three" />
+        <Label htmlFor="option-three">Option Three</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-one" className="flex gap-6">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-one" id="h-option-one" />
+        <Label htmlFor="h-option-one">Option One</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-two" id="h-option-two" />
+        <Label htmlFor="h-option-two">Option Two</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-three" id="h-option-three" />
+        <Label htmlFor="h-option-three">Option Three</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-one">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-one" id="d-option-one" />
+        <Label htmlFor="d-option-one">Option One</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-two" id="d-option-two" disabled />
+        <Label htmlFor="d-option-two">Option Two (Disabled)</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-three" id="d-option-three" />
+        <Label htmlFor="d-option-three">Option Three</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+

package/src/components/radio-group.test.tsx

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { RadioGroup, RadioGroupItem } from "./radio-group";
+
+describe("RadioGroup", () => {
+  it("should render radio group with items", () => {
+    const { container } = render(
+      <RadioGroup>
+        <RadioGroupItem value="option1" id="option1" />
+        <RadioGroupItem value="option2" id="option2" />
+      </RadioGroup>
+    );
+    const radioGroup = container.querySelector('[data-slot="radio-group"]');
+    expect(radioGroup).toBeInTheDocument();
+  });
+
+  it("should have default value when defaultValue is provided", () => {
+    const { container } = render(
+      <RadioGroup defaultValue="option1">
+        <RadioGroupItem value="option1" id="option1" />
+        <RadioGroupItem value="option2" id="option2" />
+      </RadioGroup>
+    );
+    const option1 = container.querySelector('[value="option1"]') as HTMLInputElement;
+    // Radix UI radio group uses data attributes for state
+    expect(option1).toBeInTheDocument();
+  });
+
+  it("should call onValueChange when item is clicked", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    const { container } = render(
+      <RadioGroup onValueChange={handleChange}>
+        <RadioGroupItem value="option1" id="option1" />
+        <RadioGroupItem value="option2" id="option2" />
+      </RadioGroup>
+    );
+    const option2 = container.querySelector('[value="option2"]') as HTMLElement;
+    await user.click(option2);
+    expect(handleChange).toHaveBeenCalledWith("option2");
+  });
+
+  it("should only allow one item to be selected at a time", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    const { container } = render(
+      <RadioGroup onValueChange={handleChange}>
+        <RadioGroupItem value="option1" id="option1" />
+        <RadioGroupItem value="option2" id="option2" />
+      </RadioGroup>
+    );
+    const option1 = container.querySelector('[value="option1"]') as HTMLElement;
+    const option2 = container.querySelector('[value="option2"]') as HTMLElement;
+    
+    await user.click(option1);
+    expect(handleChange).toHaveBeenCalledWith("option1");
+    
+    await user.click(option2);
+    expect(handleChange).toHaveBeenCalledWith("option2");
+  });
+
+  it("should disable items when disabled prop is true", () => {
+    const { container } = render(
+      <RadioGroup disabled>
+        <RadioGroupItem value="option1" id="option1" />
+        <RadioGroupItem value="option2" id="option2" />
+      </RadioGroup>
+    );
+    const option1 = container.querySelector('[value="option1"]') as HTMLInputElement;
+    expect(option1).toBeDisabled();
+  });
+});
+

package/src/components/radio-group.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

package/src/components/resizable.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "./resizable";
+
+const meta = {
+  title: "Components/Resizable",
+  component: ResizablePanelGroup,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ResizablePanelGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    direction: "horizontal",
+  },
+  render: () => (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="max-w-md rounded-lg border"
+    >
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">Two</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const Vertical: Story = {
+  args: {
+    direction: "vertical",
+  },
+  render: () => (
+    <ResizablePanelGroup
+      direction="vertical"
+      className="min-h-[200px] max-w-md rounded-lg border"
+    >
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Two</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const ThreePanels: Story = {
+  args: {
+    direction: "horizontal",
+  },
+  render: () => (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="max-w-md rounded-lg border"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">Two</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">Three</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};
+
+export const WithHandle: Story = {
+  args: {
+    direction: "horizontal",
+  },
+  render: () => (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="max-w-md rounded-lg border"
+    >
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">Two</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ),
+};

package/src/components/resizable.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { GripVerticalIcon } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }