@mzc-fe/design-system 0.0.1 → 0.0.2

package/src/components/button.stories.tsx

@@ -1,118 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "./button";
-import { DownloadIcon } from "lucide-react";
-
-const meta = {
-  title: "Components/Button",
-  component: Button,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: [
-        "default",
-        "destructive",
-        "outline",
-        "secondary",
-        "ghost",
-        "link",
-      ],
-      description: "The visual style variant of the button.",
-    },
-    size: {
-      control: "select",
-      options: ["default", "sm", "lg", "icon", "icon-sm", "icon-lg"],
-      description: "The size of the button.",
-    },
-    disabled: {
-      control: "boolean",
-      description: "Whether the button is disabled.",
-    },
-    asChild: {
-      control: "boolean",
-      description: "Render as a child component instead of a button element.",
-    },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: "Button",
-    variant: "default",
-    size: "default",
-  },
-};
-
-export const Variants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-4">
-      <Button variant="default">Default</Button>
-      <Button variant="destructive">Destructive</Button>
-      <Button variant="outline">Outline</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="ghost">Ghost</Button>
-      <Button variant="link">Link</Button>
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Button size="sm">Small</Button>
-      <Button size="default">Default</Button>
-      <Button size="lg">Large</Button>
-    </div>
-  ),
-};
-
-export const WithIcon: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-4">
-      <Button>
-        <DownloadIcon />
-        Download
-      </Button>
-      <Button variant="outline">
-        <DownloadIcon />
-        Download
-      </Button>
-    </div>
-  ),
-};
-
-export const IconOnly: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Button size="icon-sm" variant="outline">
-        <DownloadIcon />
-      </Button>
-      <Button size="icon" variant="outline">
-        <DownloadIcon />
-      </Button>
-      <Button size="icon-lg" variant="outline">
-        <DownloadIcon />
-      </Button>
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-4">
-      <Button disabled>Disabled</Button>
-      <Button variant="outline" disabled>
-        Disabled Outline
-      </Button>
-      <Button variant="destructive" disabled>
-        Disabled Destructive
-      </Button>
-    </div>
-  ),
-};

package/src/components/button.test.tsx

@@ -1,64 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Button } from "./button";
-
-describe("Button", () => {
-  it("should render button with text", () => {
-    const { getByText } = render(<Button>Click me</Button>);
-    expect(getByText("Click me")).toBeInTheDocument();
-  });
-
-  it("should apply variant classes", () => {
-    const { container } = render(<Button variant="destructive">Delete</Button>);
-    const button = container.querySelector('[data-slot="button"]');
-    expect(button).toHaveAttribute("data-variant", "destructive");
-  });
-
-  it("should apply size classes", () => {
-    const { container } = render(<Button size="lg">Large</Button>);
-    const button = container.querySelector('[data-slot="button"]');
-    expect(button).toHaveAttribute("data-size", "lg");
-  });
-
-  it("should be disabled when disabled prop is true", () => {
-    const { container } = render(<Button disabled>Disabled</Button>);
-    const button = container.querySelector(
-      '[data-slot="button"]'
-    ) as HTMLButtonElement;
-    expect(button).toBeDisabled();
-  });
-
-  it("should call onClick handler when clicked", async () => {
-    const user = userEvent.setup();
-    const handleClick = vi.fn();
-    const { getByText } = render(
-      <Button onClick={handleClick}>Click me</Button>
-    );
-    await user.click(getByText("Click me"));
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("should not call onClick when disabled", async () => {
-    const user = userEvent.setup();
-    const handleClick = vi.fn();
-    const { getByText } = render(
-      <Button disabled onClick={handleClick}>
-        Disabled
-      </Button>
-    );
-    await user.click(getByText("Disabled"));
-    expect(handleClick).not.toHaveBeenCalled();
-  });
-
-  it("should render as child component when asChild is true", () => {
-    const { container } = render(
-      <Button asChild>
-        <a href="/test">Link Button</a>
-      </Button>
-    );
-    const link = container.querySelector("a");
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveTextContent("Link Button");
-  });
-});

package/src/components/button.tsx

@@ -1,62 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }

package/src/components/calendar.stories.tsx

@@ -1,81 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import { Calendar } from "./calendar";
-
-const meta = {
-  title: "Components/Calendar",
-  component: Calendar,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Calendar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => {
-    const [date, setDate] = useState<Date | undefined>(new Date());
-    return (
-      <Calendar
-        mode="single"
-        selected={date}
-        onSelect={setDate}
-        className="rounded-md border"
-      />
-    );
-  },
-};
-
-export const Range: Story = {
-  render: () => {
-    const [dateRange, setDateRange] = useState<{
-      from: Date | undefined;
-      to: Date | undefined;
-    }>({ from: undefined, to: undefined });
-    return (
-      <Calendar
-        mode="range"
-        selected={dateRange}
-        onSelect={(range) =>
-          setDateRange({
-            from: range?.from,
-            to: range?.to,
-          })
-        }
-        className="rounded-md border"
-      />
-    );
-  },
-};
-
-export const Multiple: Story = {
-  render: () => {
-    const [dates, setDates] = useState<Date[] | undefined>([]);
-    return (
-      <Calendar
-        mode="multiple"
-        selected={dates}
-        onSelect={setDates}
-        className="rounded-md border"
-      />
-    );
-  },
-};
-
-export const WithDisabledDates: Story = {
-  render: () => {
-    const [date, setDate] = useState<Date | undefined>(new Date());
-    return (
-      <Calendar
-        mode="single"
-        selected={date}
-        onSelect={setDate}
-        disabled={(date) => date < new Date()}
-        className="rounded-md border"
-      />
-    );
-  },
-};
-

package/src/components/calendar.tsx

@@ -1,220 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react";
-import {
-  DayPicker,
-  getDefaultClassNames,
-  type DayButton,
-} from "react-day-picker";
-
-import { cn } from "@/lib/utils";
-import { Button, buttonVariants } from "@/components/button";
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
-}) {
-  const defaultClassNames = getDefaultClassNames();
-
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
-          defaultClassNames.months
-        ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
-        nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
-          defaultClassNames.dropdown
-        ),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
-          defaultClassNames.weekday
-        ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
-        week_number_header: cn(
-          "select-none w-(--cell-size)",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
-          props.showWeekNumber
-            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "rounded-l-md bg-accent",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          );
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            );
-          }
-
-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            );
-          }
-
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          );
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          );
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  );
-}
-
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames();
-
-  const ref = React.useRef<HTMLButtonElement>(null);
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus();
-  }, [modifiers.focused]);
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Calendar, CalendarDayButton };

package/src/components/card.stories.tsx

@@ -1,110 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
-} from "./card";
-import { Button } from "./button";
-
-const meta = {
-  title: "Components/Card",
-  component: Card,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Card>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Card Title</CardTitle>
-        <CardDescription>Card description goes here.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p>Card content area. You can put any content here.</p>
-      </CardContent>
-      <CardFooter>
-        <Button>Action</Button>
-      </CardFooter>
-    </Card>
-  ),
-};
-
-export const WithoutFooter: Story = {
-  render: () => (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Simple Card</CardTitle>
-        <CardDescription>This card doesn't have a footer.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p>Just the header and content sections.</p>
-      </CardContent>
-    </Card>
-  ),
-};
-
-export const LongContent: Story = {
-  render: () => (
-    <Card className="w-[400px]">
-      <CardHeader>
-        <CardTitle>Article Title</CardTitle>
-        <CardDescription>Published on January 1, 2024</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-2">
-          <p>
-            This is a longer card content that demonstrates how the card
-            component handles extended text and multiple paragraphs.
-          </p>
-          <p>
-            The card maintains proper spacing and layout even with longer
-            content. You can include images, lists, or any other content within
-            the card content area.
-          </p>
-        </div>
-      </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button variant="outline">Cancel</Button>
-        <Button>Save</Button>
-      </CardFooter>
-    </Card>
-  ),
-};
-
-export const MultipleCards: Story = {
-  render: () => (
-    <div className="grid grid-cols-3 gap-4">
-      <Card>
-        <CardHeader>
-          <CardTitle>Card 1</CardTitle>
-          <CardDescription>First card</CardDescription>
-        </CardHeader>
-        <CardContent>Content for card 1</CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Card 2</CardTitle>
-          <CardDescription>Second card</CardDescription>
-        </CardHeader>
-        <CardContent>Content for card 2</CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>Card 3</CardTitle>
-          <CardDescription>Third card</CardDescription>
-        </CardHeader>
-        <CardContent>Content for card 3</CardContent>
-      </Card>
-    </div>
-  ),
-};
-