@mzc-fe/design-system 0.0.1 → 0.0.2

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

@@ -1,80 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "./alert-dialog";
-
-describe("AlertDialog", () => {
-  it("should render alert dialog trigger", () => {
-    const { getByText } = render(
-      <AlertDialog>
-        <AlertDialogTrigger>Open</AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Title</AlertDialogTitle>
-            <AlertDialogDescription>Description</AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction>Confirm</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    );
-    expect(getByText("Open")).toBeInTheDocument();
-  });
-
-  it("should open dialog when trigger is clicked", async () => {
-    const user = userEvent.setup();
-    const { getByText } = render(
-      <AlertDialog>
-        <AlertDialogTrigger>Open</AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Title</AlertDialogTitle>
-            <AlertDialogDescription>Description</AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction>Confirm</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    );
-    const trigger = getByText("Open");
-    await user.click(trigger);
-    expect(getByText("Title")).toBeInTheDocument();
-    expect(getByText("Description")).toBeInTheDocument();
-  });
-
-  it("should call onAction when action button is clicked", async () => {
-    const user = userEvent.setup();
-    const handleAction = vi.fn();
-    const { getByText } = render(
-      <AlertDialog>
-        <AlertDialogTrigger>Open</AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Title</AlertDialogTitle>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogAction onClick={handleAction}>Confirm</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    );
-    await user.click(getByText("Open"));
-    await user.click(getByText("Confirm"));
-    expect(handleAction).toHaveBeenCalled();
-  });
-});
-

package/src/components/alert-dialog.tsx

@@ -1,155 +0,0 @@
-import * as React from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/button";
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  );
-}
-
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  );
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  );
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};

package/src/components/alert.stories.tsx

@@ -1,84 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Alert, AlertTitle, AlertDescription } from "./alert";
-import { AlertCircleIcon, InfoIcon } from "lucide-react";
-
-const meta = {
-  title: "Components/Alert",
-  component: Alert,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "destructive"],
-      description: "The visual style variant of the alert.",
-    },
-  },
-} satisfies Meta<typeof Alert>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    variant: "default",
-  },
-  render: (args) => (
-    <Alert {...args}>
-      <InfoIcon />
-      <AlertTitle>Heads up!</AlertTitle>
-      <AlertDescription>
-        You can add components to your app using the cli.
-      </AlertDescription>
-    </Alert>
-  ),
-};
-
-export const Destructive: Story = {
-  args: {
-    variant: "destructive",
-  },
-  render: (args) => (
-    <Alert {...args}>
-      <AlertCircleIcon />
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>
-        Your session has expired. Please log in again.
-      </AlertDescription>
-    </Alert>
-  ),
-};
-
-export const WithoutIcon: Story = {
-  render: () => (
-    <Alert>
-      <AlertTitle>Notice</AlertTitle>
-      <AlertDescription>
-        This alert doesn't have an icon, but the layout still works correctly.
-      </AlertDescription>
-    </Alert>
-  ),
-};
-
-export const LongContent: Story = {
-  render: () => (
-    <Alert>
-      <InfoIcon />
-      <AlertTitle>Important Information</AlertTitle>
-      <AlertDescription>
-        <p>
-          This is a longer alert message that demonstrates how the component
-          handles multiple paragraphs and extended content. The alert should
-          maintain proper spacing and readability even with longer text.
-        </p>
-        <p className="mt-2">
-          You can include additional information, links, or any other content
-          within the alert description.
-        </p>
-      </AlertDescription>
-    </Alert>
-  ),
-};
-

package/src/components/alert.test.tsx

@@ -1,35 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
-import { Alert, AlertTitle, AlertDescription } from "./alert";
-
-describe("Alert", () => {
-  it("should render alert with role", () => {
-    const { container } = render(<Alert>Test alert</Alert>);
-    const alert = container.querySelector('[data-slot="alert"]');
-    expect(alert).toHaveAttribute("role", "alert");
-  });
-
-  it("should render alert title and description", () => {
-    const { getByText } = render(
-      <Alert>
-        <AlertTitle>Alert Title</AlertTitle>
-        <AlertDescription>Alert description</AlertDescription>
-      </Alert>
-    );
-    expect(getByText("Alert Title")).toBeInTheDocument();
-    expect(getByText("Alert description")).toBeInTheDocument();
-  });
-
-  it("should apply variant classes", () => {
-    const { container } = render(<Alert variant="destructive">Error</Alert>);
-    const alert = container.querySelector('[data-slot="alert"]');
-    expect(alert).toHaveClass("text-destructive");
-  });
-
-  it("should render with default variant", () => {
-    const { container } = render(<Alert>Default alert</Alert>);
-    const alert = container.querySelector('[data-slot="alert"]');
-    expect(alert).toBeInTheDocument();
-  });
-});
-

package/src/components/alert.tsx

@@ -1,66 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Alert, AlertTitle, AlertDescription }

package/src/components/aspect-ratio.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { AspectRatio } from "./aspect-ratio";
-
-const meta = {
-  title: "Components/AspectRatio",
-  component: AspectRatio,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    ratio: {
-      control: "number",
-      description: "The aspect ratio (width / height).",
-    },
-  },
-} satisfies Meta<typeof AspectRatio>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    ratio: 16 / 9,
-  },
-  render: (args) => (
-    <div className="w-[450px]">
-      <AspectRatio {...args} className="bg-muted rounded-md overflow-hidden">
-        <img
-          src="http://placecats.com/500/500"
-          alt="Photo"
-          className="h-full w-full object-cover"
-        />
-      </AspectRatio>
-    </div>
-  ),
-};
-
-export const Ratios: Story = {
-  render: () => (
-    <div className="space-y-4 w-[450px]">
-      <div>
-        <p className="mb-2 text-sm font-medium">16:9</p>
-        <AspectRatio ratio={16 / 9} className="bg-muted rounded-md">
-          <div className="flex h-full w-full items-center justify-center">
-            16:9
-          </div>
-        </AspectRatio>
-      </div>
-      <div>
-        <p className="mb-2 text-sm font-medium">4:3</p>
-        <AspectRatio ratio={4 / 3} className="bg-muted rounded-md">
-          <div className="flex h-full w-full items-center justify-center">
-            4:3
-          </div>
-        </AspectRatio>
-      </div>
-      <div>
-        <p className="mb-2 text-sm font-medium">1:1</p>
-        <AspectRatio ratio={1} className="bg-muted rounded-md">
-          <div className="flex h-full w-full items-center justify-center">
-            1:1
-          </div>
-        </AspectRatio>
-      </div>
-    </div>
-  ),
-};
-
-export const WithImage: Story = {
-  render: () => (
-    <div className="w-[450px]">
-      <AspectRatio
-        ratio={16 / 9}
-        className="bg-muted rounded-md overflow-hidden"
-      >
-        <img
-          src="http://placecats.com/800/450"
-          alt="Photo"
-          className="h-full w-full object-cover"
-        />
-      </AspectRatio>
-    </div>
-  ),
-};
-
-export const Square: Story = {
-  render: () => (
-    <div className="w-[300px]">
-      <AspectRatio ratio={1} className="bg-muted rounded-md">
-        <div className="flex h-full w-full items-center justify-center">
-          Square
-        </div>
-      </AspectRatio>
-    </div>
-  ),
-};

package/src/components/aspect-ratio.test.tsx

@@ -1,47 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
-import { AspectRatio } from "./aspect-ratio";
-
-describe("AspectRatio", () => {
-  it("should render aspect ratio container", () => {
-    const { container } = render(
-      <AspectRatio ratio={16 / 9}>
-        <div>Content</div>
-      </AspectRatio>
-    );
-    const aspectRatio = container.querySelector('[data-slot="aspect-ratio"]');
-    expect(aspectRatio).toBeInTheDocument();
-  });
-
-  it("should apply ratio style", () => {
-    const { container } = render(
-      <AspectRatio ratio={16 / 9}>
-        <div>Content</div>
-      </AspectRatio>
-    );
-    const aspectRatio = container.querySelector('[data-slot="aspect-ratio"]') as HTMLElement;
-    // Radix UI AspectRatio uses CSS custom properties, check for ratio attribute or style
-    expect(aspectRatio).toBeInTheDocument();
-  });
-
-  it("should render children", () => {
-    const { getByText } = render(
-      <AspectRatio ratio={1}>
-        <div>Aspect ratio content</div>
-      </AspectRatio>
-    );
-    expect(getByText("Aspect ratio content")).toBeInTheDocument();
-  });
-
-  it("should support different ratios", () => {
-    const { container } = render(
-      <AspectRatio ratio={4 / 3}>
-        <div>Content</div>
-      </AspectRatio>
-    );
-    const aspectRatio = container.querySelector('[data-slot="aspect-ratio"]') as HTMLElement;
-    // Radix UI AspectRatio uses CSS custom properties
-    expect(aspectRatio).toBeInTheDocument();
-  });
-});
-

package/src/components/aspect-ratio.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-function AspectRatio({
-  ...props
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
-}
-
-export { AspectRatio }

package/src/components/avatar.stories.tsx

@@ -1,76 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Avatar, AvatarImage, AvatarFallback } from "./avatar";
-
-const meta = {
-  title: "Components/Avatar",
-  component: Avatar,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Avatar>
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-export const WithFallback: Story = {
-  render: () => (
-    <div className="flex gap-4">
-      <Avatar>
-        <AvatarImage src="https://invalid-url.png" alt="Invalid" />
-        <AvatarFallback>JD</AvatarFallback>
-      </Avatar>
-      <Avatar>
-        <AvatarFallback>AB</AvatarFallback>
-      </Avatar>
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Avatar className="size-8">
-        <AvatarFallback>SM</AvatarFallback>
-      </Avatar>
-      <Avatar className="size-12">
-        <AvatarFallback>MD</AvatarFallback>
-      </Avatar>
-      <Avatar className="size-16">
-        <AvatarFallback>LG</AvatarFallback>
-      </Avatar>
-    </div>
-  ),
-};
-
-export const Group: Story = {
-  render: () => (
-    <div className="flex -space-x-2">
-      <Avatar className="border-2 border-background">
-        <AvatarImage src="https://github.com/shadcn.png" alt="User 1" />
-        <AvatarFallback>U1</AvatarFallback>
-      </Avatar>
-      <Avatar className="border-2 border-background">
-        <AvatarImage src="https://github.com/shadcn.png" alt="User 2" />
-        <AvatarFallback>U2</AvatarFallback>
-      </Avatar>
-      <Avatar className="border-2 border-background">
-        <AvatarImage src="https://github.com/shadcn.png" alt="User 3" />
-        <AvatarFallback>U3</AvatarFallback>
-      </Avatar>
-      <Avatar className="border-2 border-background">
-        <AvatarFallback>+5</AvatarFallback>
-      </Avatar>
-    </div>
-  ),
-};
-