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

package/src/components/switch.test.tsx

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

package/src/components/switch.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/table.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+
+const meta = {
+  title: "Components/Table",
+  component: Table,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell className="font-medium">INV001</TableCell>
+          <TableCell>Paid</TableCell>
+          <TableCell>Credit Card</TableCell>
+          <TableCell className="text-right">$250.00</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">INV002</TableCell>
+          <TableCell>Pending</TableCell>
+          <TableCell>PayPal</TableCell>
+          <TableCell className="text-right">$150.00</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">INV003</TableCell>
+          <TableCell>Unpaid</TableCell>
+          <TableCell>Bank Transfer</TableCell>
+          <TableCell className="text-right">$350.00</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">INV004</TableCell>
+          <TableCell>Paid</TableCell>
+          <TableCell>Credit Card</TableCell>
+          <TableCell className="text-right">$450.00</TableCell>
+        </TableRow>
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right">$1,200.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  ),
+};
+
+export const Simple: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>John Doe</TableCell>
+          <TableCell>john@example.com</TableCell>
+          <TableCell>Admin</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Jane Smith</TableCell>
+          <TableCell>jane@example.com</TableCell>
+          <TableCell>User</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Bob Johnson</TableCell>
+          <TableCell>bob@example.com</TableCell>
+          <TableCell>User</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  ),
+};
+
+export const WithoutFooter: Story = {
+  render: () => (
+    <Table>
+      <TableCaption>Product inventory</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Product</TableHead>
+          <TableHead>Category</TableHead>
+          <TableHead>Stock</TableHead>
+          <TableHead className="text-right">Price</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell className="font-medium">Laptop</TableCell>
+          <TableCell>Electronics</TableCell>
+          <TableCell>15</TableCell>
+          <TableCell className="text-right">$999.00</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Mouse</TableCell>
+          <TableCell>Accessories</TableCell>
+          <TableCell>50</TableCell>
+          <TableCell className="text-right">$29.99</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Keyboard</TableCell>
+          <TableCell>Accessories</TableCell>
+          <TableCell>30</TableCell>
+          <TableCell className="text-right">$79.99</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  ),
+};
+

package/src/components/table.test.tsx

@@ -0,0 +1,85 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableFooter,
+  TableCaption,
+} from "./table";
+
+describe("Table", () => {
+  it("should render table", () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>Cell</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+    const table = container.querySelector('[data-slot="table"]');
+    expect(table).toBeInTheDocument();
+  });
+
+  it("should render table header", () => {
+    const { container } = render(
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Header</TableHead>
+          </TableRow>
+        </TableHeader>
+      </Table>
+    );
+    const header = container.querySelector('[data-slot="table-header"]');
+    expect(header).toBeInTheDocument();
+  });
+
+  it("should render table body", () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>Cell</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+    const body = container.querySelector('[data-slot="table-body"]');
+    expect(body).toBeInTheDocument();
+  });
+
+  it("should render table footer", () => {
+    const { container } = render(
+      <Table>
+        <TableFooter>
+          <TableRow>
+            <TableCell>Footer</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    );
+    const footer = container.querySelector('[data-slot="table-footer"]');
+    expect(footer).toBeInTheDocument();
+  });
+
+  it("should render table caption", () => {
+    const { getByText } = render(
+      <Table>
+        <TableCaption>Table caption</TableCaption>
+        <TableBody>
+          <TableRow>
+            <TableCell>Cell</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+    expect(getByText("Table caption")).toBeInTheDocument();
+  });
+});
+

package/src/components/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/tabs.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+
+const meta = {
+  title: "Components/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        Make changes to your account here.
+      </TabsContent>
+      <TabsContent value="password">Change your password here.</TabsContent>
+    </Tabs>
+  ),
+};
+
+export const MultipleTabs: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" className="w-[500px]">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        <TabsTrigger value="reports">Reports</TabsTrigger>
+        <TabsTrigger value="notifications">Notifications</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Overview</h3>
+          <p>View your account overview and recent activity.</p>
+        </div>
+      </TabsContent>
+      <TabsContent value="analytics">
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Analytics</h3>
+          <p>View detailed analytics and metrics.</p>
+        </div>
+      </TabsContent>
+      <TabsContent value="reports">
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Reports</h3>
+          <p>Generate and view reports.</p>
+        </div>
+      </TabsContent>
+      <TabsContent value="notifications">
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Notifications</h3>
+          <p>Manage your notification settings.</p>
+        </div>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const LongContent: Story = {
+  render: () => (
+    <Tabs defaultValue="tab1" className="w-[500px]">
+      <TabsList>
+        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1" className="space-y-4">
+        <h3 className="text-lg font-semibold">Tab 1 Content</h3>
+        <p>
+          This is a longer content section that demonstrates how tabs handle
+          extended content. The content area will expand to accommodate the
+          full text.
+        </p>
+        <p>
+          You can include multiple paragraphs, lists, or any other content
+          within a tab content area.
+        </p>
+        <ul className="list-disc list-inside space-y-1 ml-4">
+          <li>First item</li>
+          <li>Second item</li>
+          <li>Third item</li>
+        </ul>
+      </TabsContent>
+      <TabsContent value="tab2">
+        <h3 className="text-lg font-semibold">Tab 2 Content</h3>
+        <p>This is the content for the second tab.</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+

package/src/components/tabs.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+
+describe("Tabs", () => {
+  it("should render tabs", () => {
+    const { container } = render(
+      <Tabs>
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+      </Tabs>
+    );
+    const tabs = container.querySelector('[data-slot="tabs"]');
+    expect(tabs).toBeInTheDocument();
+  });
+
+  it("should render tabs list", () => {
+    const { container } = render(
+      <Tabs>
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+      </Tabs>
+    );
+    const tabsList = container.querySelector('[data-slot="tabs-list"]');
+    expect(tabsList).toBeInTheDocument();
+  });
+
+  it("should display content for active tab", () => {
+    const { getByText } = render(
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>
+    );
+    expect(getByText("Content 1")).toBeInTheDocument();
+  });
+
+  it("should switch tabs when trigger is clicked", async () => {
+    const user = userEvent.setup();
+    const { getByText, queryByText } = render(
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>
+    );
+    const tab2 = getByText("Tab 2");
+    await user.click(tab2);
+    expect(getByText("Content 2")).toBeInTheDocument();
+    expect(queryByText("Content 1")).not.toBeInTheDocument();
+  });
+});

package/src/components/tabs.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }