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

package/src/components/scroll-area.stories.tsx

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ScrollArea } from "./scroll-area";
-
-const meta = {
-  title: "Components/ScrollArea",
-  component: ScrollArea,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof ScrollArea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
-      <div className="space-y-2">
-        {Array.from({ length: 20 }, (_, i) => (
-          <div key={i} className="text-sm">
-            Item {i + 1}
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  ),
-};
-
-export const LongContent: Story = {
-  render: () => (
-    <ScrollArea className="h-[300px] w-[400px] rounded-md border p-4">
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Long Content</h3>
-        {Array.from({ length: 10 }, (_, i) => (
-          <div key={i} className="space-y-2">
-            <h4 className="font-medium">Section {i + 1}</h4>
-            <p className="text-sm text-muted-foreground">
-              This is a longer content section that demonstrates how the scroll
-              area handles extended text. The content will scroll when it
-              exceeds the container height.
-            </p>
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  ),
-};
-
-export const WithList: Story = {
-  render: () => (
-    <ScrollArea className="h-72 w-48 rounded-md border">
-      <div className="p-4">
-        <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
-        {Array.from({ length: 50 }, (_, i) => (
-          <div key={i} className="text-sm py-1.5">
-            Tag {i + 1}
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  ),
-};
-

package/src/components/scroll-area.test.tsx

@@ -1,46 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
-import { ScrollArea } from "./scroll-area";
-
-describe("ScrollArea", () => {
-  it("should render scroll area", () => {
-    const { container } = render(
-      <ScrollArea>
-        <div>Content</div>
-      </ScrollArea>
-    );
-    const scrollArea = container.querySelector('[data-slot="scroll-area"]');
-    expect(scrollArea).toBeInTheDocument();
-  });
-
-  it("should render scroll area viewport", () => {
-    const { container } = render(
-      <ScrollArea>
-        <div>Content</div>
-      </ScrollArea>
-    );
-    const viewport = container.querySelector('[data-slot="scroll-area-viewport"]');
-    expect(viewport).toBeInTheDocument();
-  });
-
-  it("should render scroll bar", () => {
-    const { container } = render(
-      <ScrollArea>
-        <div style={{ height: "200px" }}>Content</div>
-      </ScrollArea>
-    );
-    // Scrollbar may only appear when content overflows
-    const scrollArea = container.querySelector('[data-slot="scroll-area"]');
-    expect(scrollArea).toBeInTheDocument();
-  });
-
-  it("should render content", () => {
-    const { getByText } = render(
-      <ScrollArea>
-        <div>Scrollable content</div>
-      </ScrollArea>
-    );
-    expect(getByText("Scrollable content")).toBeInTheDocument();
-  });
-});
-

package/src/components/scroll-area.tsx

@@ -1,58 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-
-import { cn } from "@/lib/utils"
-
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  )
-}
-
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
-        className
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
-}
-
-export { ScrollArea, ScrollBar }

package/src/components/select.stories.tsx

@@ -1,111 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  SelectGroup,
-  SelectLabel,
-} from "./select";
-import { Label } from "./label";
-
-const meta = {
-  title: "Components/Select",
-  component: Select,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Select>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Select>
-      <SelectTrigger className="w-[180px]">
-        <SelectValue placeholder="Select a fruit" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="apple">Apple</SelectItem>
-        <SelectItem value="banana">Banana</SelectItem>
-        <SelectItem value="orange">Orange</SelectItem>
-        <SelectItem value="grape">Grape</SelectItem>
-      </SelectContent>
-    </Select>
-  ),
-};
-
-export const WithLabel: Story = {
-  render: () => (
-    <div className="space-y-2">
-      <Label htmlFor="fruit">Fruit</Label>
-      <Select>
-        <SelectTrigger id="fruit" className="w-[180px]">
-          <SelectValue placeholder="Select a fruit" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="apple">Apple</SelectItem>
-          <SelectItem value="banana">Banana</SelectItem>
-          <SelectItem value="orange">Orange</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  ),
-};
-
-export const WithGroups: Story = {
-  render: () => (
-    <Select>
-      <SelectTrigger className="w-[200px]">
-        <SelectValue placeholder="Select a framework" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectGroup>
-          <SelectLabel>Frontend</SelectLabel>
-          <SelectItem value="react">React</SelectItem>
-          <SelectItem value="vue">Vue</SelectItem>
-          <SelectItem value="angular">Angular</SelectItem>
-        </SelectGroup>
-        <SelectGroup>
-          <SelectLabel>Backend</SelectLabel>
-          <SelectItem value="node">Node.js</SelectItem>
-          <SelectItem value="python">Python</SelectItem>
-          <SelectItem value="java">Java</SelectItem>
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <Select disabled>
-      <SelectTrigger className="w-[180px]">
-        <SelectValue placeholder="Disabled select" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="option1">Option 1</SelectItem>
-        <SelectItem value="option2">Option 2</SelectItem>
-      </SelectContent>
-    </Select>
-  ),
-};
-
-export const DefaultValue: Story = {
-  render: () => (
-    <Select defaultValue="banana">
-      <SelectTrigger className="w-[180px]">
-        <SelectValue />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="apple">Apple</SelectItem>
-        <SelectItem value="banana">Banana</SelectItem>
-        <SelectItem value="orange">Orange</SelectItem>
-      </SelectContent>
-    </Select>
-  ),
-};
-

package/src/components/select.test.tsx

@@ -1,90 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render } from "@testing-library/react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./select";
-
-describe("Select", () => {
-  it("should render select trigger", () => {
-    const { container } = render(
-      <Select>
-        <SelectTrigger>
-          <SelectValue placeholder="Select..." />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-        </SelectContent>
-      </Select>
-    );
-    const trigger = container.querySelector('[data-slot="select-trigger"]');
-    expect(trigger).toBeInTheDocument();
-  });
-
-  it("should display placeholder", () => {
-    const { getByText } = render(
-      <Select>
-        <SelectTrigger>
-          <SelectValue placeholder="Select an option" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-        </SelectContent>
-      </Select>
-    );
-    expect(getByText("Select an option")).toBeInTheDocument();
-  });
-
-  it("should display selected value", () => {
-    const { getByText } = render(
-      <Select defaultValue="option1">
-        <SelectTrigger>
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-        </SelectContent>
-      </Select>
-    );
-    expect(getByText("Option 1")).toBeInTheDocument();
-  });
-
-  it("should call onValueChange when item is selected", async () => {
-    const handleChange = vi.fn();
-    const { container } = render(
-      <Select onValueChange={handleChange}>
-        <SelectTrigger>
-          <SelectValue placeholder="Select..." />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-          <SelectItem value="option2">Option 2</SelectItem>
-        </SelectContent>
-      </Select>
-    );
-    const trigger = container.querySelector('[data-slot="select-trigger"]');
-    expect(trigger).toBeInTheDocument();
-    // Note: Select content is rendered in a portal, and interaction requires
-    // the select to be opened first. For now, verify the trigger exists.
-    // Full interaction testing would require waiting for portal content to appear.
-  });
-
-  it("should be disabled when disabled prop is true", () => {
-    const { container } = render(
-      <Select disabled>
-        <SelectTrigger>
-          <SelectValue placeholder="Select..." />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-        </SelectContent>
-      </Select>
-    );
-    const trigger = container.querySelector('[data-slot="select-trigger"]');
-    // Radix UI select may use aria-disabled or disabled attribute
-    expect(trigger).toBeInTheDocument();
-  });
-});

package/src/components/select.tsx

@@ -1,188 +0,0 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
-}
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground 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 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "item-aligned",
-  align = "center",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
-        )}
-        position={position}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span
-        data-slot="select-item-indicator"
-        className="absolute right-2 flex size-3.5 items-center justify-center"
-      >
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}

package/src/components/separator.stories.tsx

@@ -1,76 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Separator } from "./separator";
-
-const meta = {
-  title: "Components/Separator",
-  component: Separator,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    orientation: {
-      control: "select",
-      options: ["horizontal", "vertical"],
-      description: "The orientation of the separator.",
-    },
-  },
-} satisfies Meta<typeof Separator>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <div>
-      <div className="space-y-1">
-        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-        <p className="text-sm text-muted-foreground">
-          An open-source UI component library.
-        </p>
-      </div>
-      <Separator className="my-4" />
-      <div className="flex h-5 items-center space-x-4 text-sm">
-        <div>Blog</div>
-        <Separator orientation="vertical" />
-        <div>Docs</div>
-        <Separator orientation="vertical" />
-        <div>Source</div>
-      </div>
-    </div>
-  ),
-};
-
-export const Horizontal: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <div>
-        <h4 className="text-sm font-medium">Section 1</h4>
-        <p className="text-sm text-muted-foreground">Content for section 1</p>
-      </div>
-      <Separator />
-      <div>
-        <h4 className="text-sm font-medium">Section 2</h4>
-        <p className="text-sm text-muted-foreground">Content for section 2</p>
-      </div>
-      <Separator />
-      <div>
-        <h4 className="text-sm font-medium">Section 3</h4>
-        <p className="text-sm text-muted-foreground">Content for section 3</p>
-      </div>
-    </div>
-  ),
-};
-
-export const Vertical: Story = {
-  render: () => (
-    <div className="flex h-20 items-center gap-4">
-      <div>Left</div>
-      <Separator orientation="vertical" />
-      <div>Center</div>
-      <Separator orientation="vertical" />
-      <div>Right</div>
-    </div>
-  ),
-};
-

package/src/components/separator.test.tsx

@@ -1,24 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
-import { Separator } from "./separator";
-
-describe("Separator", () => {
-  it("should render separator", () => {
-    const { container } = render(<Separator />);
-    const separator = container.querySelector('[data-slot="separator"]');
-    expect(separator).toBeInTheDocument();
-  });
-
-  it("should render horizontal separator by default", () => {
-    const { container } = render(<Separator />);
-    const separator = container.querySelector('[data-slot="separator"]');
-    expect(separator).toHaveAttribute("data-orientation", "horizontal");
-  });
-
-  it("should render vertical separator when orientation is vertical", () => {
-    const { container } = render(<Separator orientation="vertical" />);
-    const separator = container.querySelector('[data-slot="separator"]');
-    expect(separator).toHaveAttribute("data-orientation", "vertical");
-  });
-});
-

package/src/components/separator.tsx

@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "@/lib/utils"
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }