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

package/src/components/checkbox.test.tsx

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Checkbox } from "./checkbox";
+
+describe("Checkbox", () => {
+  it("should render checkbox", () => {
+    const { container } = render(<Checkbox />);
+    const checkbox = container.querySelector('[data-slot="checkbox"]');
+    expect(checkbox).toBeInTheDocument();
+  });
+
+  it("should be checked when checked prop is true", () => {
+    const { container } = render(<Checkbox checked />);
+    const checkbox = container.querySelector('[data-slot="checkbox"]');
+    expect(checkbox).toHaveAttribute("data-state", "checked");
+  });
+
+  it("should be unchecked by default", () => {
+    const { container } = render(<Checkbox />);
+    const checkbox = container.querySelector('[data-slot="checkbox"]');
+    expect(checkbox).toHaveAttribute("data-state", "unchecked");
+  });
+
+  it("should call onCheckedChange when clicked", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    const { container } = render(<Checkbox onCheckedChange={handleChange} />);
+    const checkbox = container.querySelector(
+      '[data-slot="checkbox"]'
+    ) as HTMLElement;
+    await user.click(checkbox);
+    expect(handleChange).toHaveBeenCalledWith(true);
+  });
+
+  it("should toggle checked state when clicked", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    const { container } = render(
+      <Checkbox checked={false} onCheckedChange={handleChange} />
+    );
+    const checkbox = container.querySelector(
+      '[data-slot="checkbox"]'
+    ) as HTMLElement;
+    await user.click(checkbox);
+    expect(handleChange).toHaveBeenCalledWith(true);
+  });
+
+  it("should be disabled when disabled prop is true", () => {
+    const { container } = render(<Checkbox disabled />);
+    const checkbox = container.querySelector('[data-slot="checkbox"]');
+    expect(checkbox).toHaveAttribute("data-disabled");
+  });
+
+  it("should not call onCheckedChange when disabled", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    const { container } = render(
+      <Checkbox disabled onCheckedChange={handleChange} />
+    );
+    const checkbox = container.querySelector(
+      '[data-slot="checkbox"]'
+    ) as HTMLElement;
+    await user.click(checkbox);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+});

package/src/components/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-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 size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/src/components/collapsible.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./collapsible";
+import { Button } from "./button";
+import { ChevronDownIcon } from "lucide-react";
+
+const meta = {
+  title: "Components/Collapsible",
+  component: Collapsible,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Collapsible open={open} onOpenChange={setOpen} className="w-[350px]">
+        <div className="flex items-center justify-between space-x-4 px-4">
+          <h4 className="text-sm font-semibold">
+            @peduarte starred 3 repositories
+          </h4>
+          <CollapsibleTrigger asChild>
+            <Button variant="ghost" size="icon">
+              <ChevronDownIcon className="h-4 w-4" />
+              <span className="sr-only">Toggle</span>
+            </Button>
+          </CollapsibleTrigger>
+        </div>
+        <div className="px-4 py-2 space-y-2">
+          <div className="rounded-md border px-4 py-2 text-sm">
+            @radix-ui/primitives
+          </div>
+        </div>
+        <CollapsibleContent className="space-y-2">
+          <div className="rounded-md border px-4 py-2 text-sm">
+            @radix-ui/colors
+          </div>
+          <div className="rounded-md border px-4 py-2 text-sm">
+            @stitches/react
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  },
+};
+
+export const Simple: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Collapsible open={open} onOpenChange={setOpen} className="w-[350px]">
+        <CollapsibleTrigger asChild>
+          <Button variant="outline" className="w-full justify-between">
+            Click to {open ? "collapse" : "expand"}
+            <ChevronDownIcon
+              className={`h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`}
+            />
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="mt-2 space-y-2">
+          <div className="rounded-md border p-4">
+            <p className="text-sm">
+              This is the collapsible content. It can contain any content you
+              want.
+            </p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  },
+};
+
+export const DefaultOpen: Story = {
+  render: () => (
+    <Collapsible defaultOpen className="w-[350px]">
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">Open by default</h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <ChevronDownIcon className="h-4 w-4" />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent className="space-y-2 px-4">
+        <div className="rounded-md border px-4 py-2 text-sm">
+          This content is visible by default.
+        </div>
+        <div className="rounded-md border px-4 py-2 text-sm">
+          You can collapse it by clicking the button.
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  ),
+};
+

package/src/components/collapsible.test.tsx

@@ -0,0 +1,92 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "./collapsible";
+
+describe("Collapsible", () => {
+  it("should render collapsible", () => {
+    const { container } = render(
+      <Collapsible>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>Content</CollapsibleContent>
+      </Collapsible>
+    );
+    const collapsible = container.querySelector('[data-slot="collapsible"]');
+    expect(collapsible).toBeInTheDocument();
+  });
+
+  it("should render trigger and content", () => {
+    const { getByText, container } = render(
+      <Collapsible>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>Content</CollapsibleContent>
+      </Collapsible>
+    );
+    expect(getByText("Toggle")).toBeInTheDocument();
+    // Content is in DOM but may be hidden when closed
+    const content = container.querySelector(
+      '[data-slot="collapsible-content"]'
+    );
+    expect(content).toBeInTheDocument();
+  });
+
+  it("should toggle content visibility when trigger is clicked", async () => {
+    const user = userEvent.setup();
+    const { getByText, container } = render(
+      <Collapsible>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>Content</CollapsibleContent>
+      </Collapsible>
+    );
+    const trigger = getByText("Toggle");
+    const contentElement = container.querySelector(
+      '[data-slot="collapsible-content"]'
+    );
+
+    // Content is in DOM but may be hidden when closed
+    expect(contentElement).toBeInTheDocument();
+
+    // Open
+    await user.click(trigger);
+    expect(contentElement).toBeInTheDocument();
+    expect(contentElement).toHaveAttribute("data-state", "open");
+
+    // Close
+    await user.click(trigger);
+    expect(contentElement).toBeInTheDocument();
+    expect(contentElement).toHaveAttribute("data-state", "closed");
+  });
+
+  it("should be open by default when defaultOpen is true", () => {
+    const { container } = render(
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>Content</CollapsibleContent>
+      </Collapsible>
+    );
+    const content = container.querySelector(
+      '[data-slot="collapsible-content"]'
+    );
+    // Content should be in document and open when defaultOpen is true
+    expect(content).toBeInTheDocument();
+    expect(content).toHaveAttribute("data-state", "open");
+  });
+
+  it("should call onOpenChange when state changes", async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    const { getByText } = render(
+      <Collapsible onOpenChange={handleChange}>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>Content</CollapsibleContent>
+      </Collapsible>
+    );
+    const trigger = getByText("Toggle");
+    await user.click(trigger);
+    expect(handleChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/components/collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/components/command.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command";
+import { Button } from "./button";
+
+const meta = {
+  title: "Components/Command",
+  component: Command,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Command>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Command className="rounded-lg border shadow-md max-w-[450px]">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>Calendar</CommandItem>
+          <CommandItem>Search Emoji</CommandItem>
+          <CommandItem>Calculator</CommandItem>
+        </CommandGroup>
+        <CommandGroup heading="Settings">
+          <CommandItem>Profile</CommandItem>
+          <CommandItem>Billing</CommandItem>
+          <CommandItem>Settings</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+};
+
+export const Dialog: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Command</Button>
+        <CommandDialog open={open} onOpenChange={setOpen}>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+              <CommandItem>Calendar</CommandItem>
+              <CommandItem>Search Emoji</CommandItem>
+              <CommandItem>Calculator</CommandItem>
+            </CommandGroup>
+            <CommandGroup heading="Settings">
+              <CommandItem>Profile</CommandItem>
+              <CommandItem>Billing</CommandItem>
+              <CommandItem>Settings</CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </CommandDialog>
+      </>
+    );
+  },
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <Command className="rounded-lg border shadow-md max-w-[450px]">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Fruits">
+          <CommandItem>🍎 Apple</CommandItem>
+          <CommandItem>🍌 Banana</CommandItem>
+          <CommandItem>🍊 Orange</CommandItem>
+          <CommandItem>🍇 Grape</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+};
+

package/src/components/command.tsx

@@ -0,0 +1,182 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/dialog";
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

package/src/components/context-menu.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "./context-menu";
+
+const meta = {
+  title: "Components/ContextMenu",
+  component: ContextMenu,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ContextMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Back</ContextMenuItem>
+        <ContextMenuItem>Forward</ContextMenuItem>
+        <ContextMenuItem>Reload</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>Save As...</ContextMenuItem>
+        <ContextMenuItem>Print</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>View Page Source</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+
+export const WithGroups: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click for grouped menu
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuLabel>File</ContextMenuLabel>
+        <ContextMenuItem>New</ContextMenuItem>
+        <ContextMenuItem>Open</ContextMenuItem>
+        <ContextMenuItem>Save</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuLabel>Edit</ContextMenuLabel>
+        <ContextMenuItem>Cut</ContextMenuItem>
+        <ContextMenuItem>Copy</ContextMenuItem>
+        <ContextMenuItem>Paste</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+