@mzc-fe/design-system 0.0.1 → 0.0.2

package/src/components/popover.stories.tsx

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

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

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

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

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

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

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

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

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

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