@mzc-fe/design-system 0.0.1 → 0.0.2

package/src/components/accordion.test.tsx

@@ -1,390 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from "./accordion";
-
-describe("Accordion", () => {
-  describe("Default (Single type with collapsible)", () => {
-    it("should render accordion with multiple items", () => {
-      const { getByText } = render(
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="item-1">
-            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-            <AccordionContent>
-              Yes. It adheres to the WAI-ARIA design pattern and is fully
-              accessible.
-            </AccordionContent>
-          </AccordionItem>
-          <AccordionItem value="item-2">
-            <AccordionTrigger>Is it styled?</AccordionTrigger>
-            <AccordionContent>
-              Yes. It comes with default styles that match the other components'
-              aesthetic.
-            </AccordionContent>
-          </AccordionItem>
-          <AccordionItem value="item-3">
-            <AccordionTrigger>Is it animated?</AccordionTrigger>
-            <AccordionContent>
-              Yes. It's animated by default, but you can disable it if you
-              prefer.
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      expect(getByText("Is it accessible?")).toBeInTheDocument();
-      expect(getByText("Is it styled?")).toBeInTheDocument();
-      expect(getByText("Is it animated?")).toBeInTheDocument();
-    });
-
-    it("should show content when trigger is clicked", async () => {
-      const user = userEvent.setup();
-      const { getByText } = render(
-        <Accordion type="single" collapsible>
-          <AccordionItem value="item-1">
-            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-            <AccordionContent>
-              Yes. It adheres to the WAI-ARIA design pattern and is fully
-              accessible.
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const trigger = getByText("Is it accessible?");
-      await user.click(trigger);
-
-      expect(
-        getByText(
-          "Yes. It adheres to the WAI-ARIA design pattern and is fully accessible."
-        )
-      ).toBeInTheDocument();
-    });
-
-    it("should close content when trigger is clicked again (collapsible)", async () => {
-      const user = userEvent.setup();
-      const { getByText, queryByText } = render(
-        <Accordion type="single" collapsible>
-          <AccordionItem value="item-1">
-            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-            <AccordionContent>
-              Yes. It adheres to the WAI-ARIA design pattern and is fully
-              accessible.
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const trigger = getByText("Is it accessible?");
-
-      // Open
-      await user.click(trigger);
-      expect(
-        getByText(
-          "Yes. It adheres to the WAI-ARIA design pattern and is fully accessible."
-        )
-      ).toBeInTheDocument();
-
-      // Close
-      await user.click(trigger);
-      expect(
-        queryByText(
-          "Yes. It adheres to the WAI-ARIA design pattern and is fully accessible."
-        )
-      ).not.toBeInTheDocument();
-    });
-
-    it("should only allow one item open at a time in single mode", async () => {
-      const user = userEvent.setup();
-      const { getByText, queryByText } = render(
-        <Accordion type="single" collapsible>
-          <AccordionItem value="item-1">
-            <AccordionTrigger>Item 1</AccordionTrigger>
-            <AccordionContent>Content 1</AccordionContent>
-          </AccordionItem>
-          <AccordionItem value="item-2">
-            <AccordionTrigger>Item 2</AccordionTrigger>
-            <AccordionContent>Content 2</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const trigger1 = getByText("Item 1");
-      const trigger2 = getByText("Item 2");
-
-      // Open first item
-      await user.click(trigger1);
-      expect(getByText("Content 1")).toBeInTheDocument();
-      expect(queryByText("Content 2")).not.toBeInTheDocument();
-
-      // Open second item (should close first)
-      await user.click(trigger2);
-      expect(queryByText("Content 1")).not.toBeInTheDocument();
-      expect(getByText("Content 2")).toBeInTheDocument();
-    });
-  });
-
-  describe("Multiple type", () => {
-    it("should allow multiple items to be open simultaneously", async () => {
-      const user = userEvent.setup();
-      const { getByText } = render(
-        <Accordion type="multiple">
-          <AccordionItem value="item-1">
-            <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
-            <AccordionContent>
-              Yes! With the "multiple" type, you can have multiple items open at
-              the same time.
-            </AccordionContent>
-          </AccordionItem>
-          <AccordionItem value="item-2">
-            <AccordionTrigger>How does it work?</AccordionTrigger>
-            <AccordionContent>
-              Each accordion item can be independently opened or closed,
-              allowing users to view multiple sections simultaneously.
-            </AccordionContent>
-          </AccordionItem>
-          <AccordionItem value="item-3">
-            <AccordionTrigger>What are the use cases?</AccordionTrigger>
-            <AccordionContent>
-              This is useful for FAQ sections, settings panels, or any content
-              where users might want to compare information across different
-              sections.
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const trigger1 = getByText("Can I open multiple items?");
-      const trigger2 = getByText("How does it work?");
-
-      // Open first item
-      await user.click(trigger1);
-      expect(
-        getByText(
-          'Yes! With the "multiple" type, you can have multiple items open at the same time.'
-        )
-      ).toBeInTheDocument();
-
-      // Open second item (first should still be open)
-      await user.click(trigger2);
-      expect(
-        getByText(
-          'Yes! With the "multiple" type, you can have multiple items open at the same time.'
-        )
-      ).toBeInTheDocument();
-      expect(
-        getByText(
-          "Each accordion item can be independently opened or closed, allowing users to view multiple sections simultaneously."
-        )
-      ).toBeInTheDocument();
-    });
-  });
-
-  describe("SingleItem", () => {
-    it("should render single accordion item", () => {
-      const { getByText } = render(
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="item-1">
-            <AccordionTrigger>What is this component?</AccordionTrigger>
-            <AccordionContent>
-              This is an accordion component built with Radix UI. It provides a
-              collapsible content area that can be toggled open and closed.
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      expect(getByText("What is this component?")).toBeInTheDocument();
-    });
-  });
-
-  describe("LongContent", () => {
-    it("should render accordion with long content", async () => {
-      const user = userEvent.setup();
-      const { getByText } = render(
-        <Accordion type="single" collapsible className="w-full">
-          <AccordionItem value="item-1">
-            <AccordionTrigger>Item with long content</AccordionTrigger>
-            <AccordionContent>
-              <div className="space-y-2">
-                <p>
-                  This accordion item contains longer content to demonstrate how
-                  the component handles text that spans multiple lines or
-                  paragraphs.
-                </p>
-                <p>
-                  The content area will expand to accommodate the full text, and
-                  the animation will smoothly transition between the collapsed
-                  and expanded states.
-                </p>
-                <ul className="list-disc list-inside space-y-1 ml-4">
-                  <li>First bullet point</li>
-                  <li>Second bullet point</li>
-                  <li>Third bullet point</li>
-                </ul>
-              </div>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const trigger = getByText("Item with long content");
-      await user.click(trigger);
-
-      expect(
-        getByText(
-          "This accordion item contains longer content to demonstrate how the component handles text that spans multiple lines or paragraphs."
-        )
-      ).toBeInTheDocument();
-      expect(getByText("First bullet point")).toBeInTheDocument();
-      expect(getByText("Second bullet point")).toBeInTheDocument();
-      expect(getByText("Third bullet point")).toBeInTheDocument();
-    });
-  });
-
-  describe("WithCustomStyling", () => {
-    it("should apply custom className to accordion", () => {
-      const { container } = render(
-        <Accordion type="single" collapsible className="w-full max-w-2xl">
-          <AccordionItem value="item-1" className="border-2 border-primary/20">
-            <AccordionTrigger className="text-lg font-semibold">
-              Custom styled item
-            </AccordionTrigger>
-            <AccordionContent className="text-base">
-              This accordion item has custom styling applied to demonstrate how
-              you can customize the appearance of individual items.
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const accordion = container.querySelector('[data-slot="accordion"]');
-      expect(accordion).toHaveClass("w-full", "max-w-2xl");
-    });
-
-    it("should apply custom className to accordion item", () => {
-      const { container } = render(
-        <Accordion type="single" collapsible>
-          <AccordionItem value="item-1" className="border-2 border-primary/20">
-            <AccordionTrigger>Custom styled item</AccordionTrigger>
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const item = container.querySelector('[data-slot="accordion-item"]');
-      expect(item).toHaveClass("border-2", "border-primary/20");
-    });
-
-    it("should apply custom className to accordion trigger", () => {
-      const { container } = render(
-        <Accordion type="single" collapsible>
-          <AccordionItem value="item-1">
-            <AccordionTrigger className="text-lg font-semibold">
-              Custom styled item
-            </AccordionTrigger>
-            <AccordionContent>Content</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const trigger = container.querySelector(
-        '[data-slot="accordion-trigger"]'
-      );
-      expect(trigger).toHaveClass("text-lg", "font-semibold");
-    });
-  });
-
-  describe("Accessibility", () => {
-    it("should have proper ARIA attributes", () => {
-      const { getByText } = render(
-        <Accordion type="single" collapsible>
-          <AccordionItem value="item-1">
-            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-            <AccordionContent>
-              Yes. It adheres to the WAI-ARIA design pattern and is fully
-              accessible.
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const trigger = getByText("Is it accessible?");
-      expect(trigger).toHaveAttribute("aria-expanded");
-    });
-
-    it("should update aria-expanded when opened", async () => {
-      const user = userEvent.setup();
-      const { getByText } = render(
-        <Accordion type="single" collapsible>
-          <AccordionItem value="item-1">
-            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-            <AccordionContent>
-              Yes. It adheres to the WAI-ARIA design pattern and is fully
-              accessible.
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const trigger = getByText("Is it accessible?");
-
-      // Initially closed
-      expect(trigger).toHaveAttribute("aria-expanded", "false");
-
-      // Open
-      await user.click(trigger);
-      expect(trigger).toHaveAttribute("aria-expanded", "true");
-    });
-  });
-
-  describe("Controlled mode", () => {
-    it("should work in controlled mode with value prop", async () => {
-      const user = userEvent.setup();
-      const onValueChange = vi.fn();
-
-      const { getByText } = render(
-        <Accordion type="single" value="item-1" onValueChange={onValueChange}>
-          <AccordionItem value="item-1">
-            <AccordionTrigger>Item 1</AccordionTrigger>
-            <AccordionContent>Content 1</AccordionContent>
-          </AccordionItem>
-          <AccordionItem value="item-2">
-            <AccordionTrigger>Item 2</AccordionTrigger>
-            <AccordionContent>Content 2</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      const trigger2 = getByText("Item 2");
-      await user.click(trigger2);
-
-      expect(onValueChange).toHaveBeenCalledWith("item-2");
-    });
-  });
-
-  describe("Default value", () => {
-    it("should open item with defaultValue", () => {
-      const { getByText, queryByText } = render(
-        <Accordion type="single" defaultValue="item-2">
-          <AccordionItem value="item-1">
-            <AccordionTrigger>Item 1</AccordionTrigger>
-            <AccordionContent>Content 1</AccordionContent>
-          </AccordionItem>
-          <AccordionItem value="item-2">
-            <AccordionTrigger>Item 2</AccordionTrigger>
-            <AccordionContent>Content 2</AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      );
-
-      expect(getByText("Content 2")).toBeInTheDocument();
-      expect(queryByText("Content 1")).not.toBeInTheDocument();
-    });
-  });
-});

package/src/components/accordion.tsx

@@ -1,64 +0,0 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/alert-dialog.stories.tsx

@@ -1,213 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "./alert-dialog";
-import { Button } from "./button";
-
-const meta = {
-  title: "Components/AlertDialog",
-  component: AlertDialog,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    open: {
-      control: "boolean",
-      description: "The controlled open state of the dialog.",
-      table: {
-        type: { summary: "boolean" },
-      },
-    },
-    defaultOpen: {
-      control: "boolean",
-      description: "The default open state of the dialog.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-  },
-} satisfies Meta<typeof AlertDialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <AlertDialog open={open} onOpenChange={setOpen}>
-        <AlertDialogTrigger asChild>
-          <Button>Open Dialog</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete your
-              account and remove your data from our servers.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction>Continue</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    );
-  },
-};
-
-export const Destructive: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <AlertDialog open={open} onOpenChange={setOpen}>
-        <AlertDialogTrigger asChild>
-          <Button variant="destructive">Delete Account</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete your
-              account and remove your data from our servers.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    );
-  },
-};
-
-export const WithoutCancel: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <AlertDialog open={open} onOpenChange={setOpen}>
-        <AlertDialogTrigger asChild>
-          <Button>Show Information</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Information</AlertDialogTitle>
-            <AlertDialogDescription>
-              This is an informational dialog without a cancel button. The user
-              must click the action button to close it.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogAction>Got it</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    );
-  },
-};
-
-export const LongContent: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <AlertDialog open={open} onOpenChange={setOpen}>
-        <AlertDialogTrigger asChild>
-          <Button>View Terms</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Terms and Conditions</AlertDialogTitle>
-            <AlertDialogDescription className="max-h-[60vh] overflow-y-auto">
-              <div className="space-y-4">
-                <p>
-                  Please read these terms and conditions carefully before using
-                  our service. By accessing or using our service, you agree to
-                  be bound by these terms.
-                </p>
-                <p>
-                  <strong>1. Acceptance of Terms</strong>
-                </p>
-                <p>
-                  By accessing and using this service, you accept and agree to
-                  be bound by the terms and provision of this agreement.
-                </p>
-                <p>
-                  <strong>2. Use License</strong>
-                </p>
-                <p>
-                  Permission is granted to temporarily download one copy of the
-                  materials on our website for personal, non-commercial
-                  transitory viewing only.
-                </p>
-                <p>
-                  <strong>3. Disclaimer</strong>
-                </p>
-                <p>
-                  The materials on our website are provided on an 'as is' basis.
-                  We make no warranties, expressed or implied, and hereby
-                  disclaim and negate all other warranties.
-                </p>
-                <p>
-                  <strong>4. Limitations</strong>
-                </p>
-                <p>
-                  In no event shall we or our suppliers be liable for any
-                  damages arising out of the use or inability to use the
-                  materials on our website.
-                </p>
-              </div>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Decline</AlertDialogCancel>
-            <AlertDialogAction>Accept</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    );
-  },
-};
-
-export const CustomActions: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <AlertDialog open={open} onOpenChange={setOpen}>
-        <AlertDialogTrigger asChild>
-          <Button variant="outline">Custom Actions</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Choose an option</AlertDialogTitle>
-            <AlertDialogDescription>
-              This dialog demonstrates custom action buttons with different
-              styles.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction className="bg-secondary text-secondary-foreground hover:bg-secondary/80">
-              Save Draft
-            </AlertDialogAction>
-            <AlertDialogAction>Publish</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    );
-  },
-};