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

package/src/components/textarea.stories.tsx

@@ -1,89 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Textarea } from "./textarea";
-import { Label } from "./label";
-
-const meta = {
-  title: "Components/Textarea",
-  component: Textarea,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    disabled: {
-      control: "boolean",
-      description: "Whether the textarea is disabled.",
-    },
-    placeholder: {
-      control: "text",
-      description: "Placeholder text.",
-    },
-    rows: {
-      control: "number",
-      description: "Number of visible text lines.",
-    },
-  },
-} satisfies Meta<typeof Textarea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    placeholder: "Type your message here...",
-  },
-};
-
-export const WithLabel: Story = {
-  render: () => (
-    <div className="space-y-2 w-[350px]">
-      <Label htmlFor="message">Message</Label>
-      <Textarea id="message" placeholder="Type your message here..." />
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="space-y-4 w-[350px]">
-      <div className="space-y-2">
-        <Label>Small (3 rows)</Label>
-        <Textarea rows={3} placeholder="Small textarea..." />
-      </div>
-      <div className="space-y-2">
-        <Label>Medium (5 rows)</Label>
-        <Textarea rows={5} placeholder="Medium textarea..." />
-      </div>
-      <div className="space-y-2">
-        <Label>Large (10 rows)</Label>
-        <Textarea rows={10} placeholder="Large textarea..." />
-      </div>
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="space-y-2 w-[350px]">
-      <Label>Disabled</Label>
-      <Textarea disabled placeholder="This textarea is disabled" />
-    </div>
-  ),
-};
-
-export const WithError: Story = {
-  render: () => (
-    <div className="space-y-2 w-[350px]">
-      <Label htmlFor="error">Message</Label>
-      <Textarea
-        id="error"
-        placeholder="Type your message here..."
-        aria-invalid="true"
-      />
-      <p className="text-sm text-destructive">
-        Message must be at least 10 characters.
-      </p>
-    </div>
-  ),
-};
-

package/src/components/textarea.test.tsx

@@ -1,53 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Textarea } from "./textarea";
-
-describe("Textarea", () => {
-  it("should render textarea element", () => {
-    const { container } = render(<Textarea />);
-    const textarea = container.querySelector('[data-slot="textarea"]');
-    expect(textarea).toBeInTheDocument();
-  });
-
-  it("should display placeholder text", () => {
-    const { getByPlaceholderText } = render(
-      <Textarea placeholder="Enter your message..." />
-    );
-    expect(getByPlaceholderText("Enter your message...")).toBeInTheDocument();
-  });
-
-  it("should accept and display value", () => {
-    const { container } = render(<Textarea value="test value" readOnly />);
-    const textarea = container.querySelector('[data-slot="textarea"]') as HTMLTextAreaElement;
-    expect(textarea.value).toBe("test value");
-  });
-
-  it("should be disabled when disabled prop is true", () => {
-    const { container } = render(<Textarea disabled />);
-    const textarea = container.querySelector('[data-slot="textarea"]') as HTMLTextAreaElement;
-    expect(textarea).toBeDisabled();
-  });
-
-  it("should call onChange handler when value changes", async () => {
-    const user = userEvent.setup();
-    const handleChange = vi.fn();
-    const { container } = render(<Textarea onChange={handleChange} />);
-    const textarea = container.querySelector('[data-slot="textarea"]') as HTMLTextAreaElement;
-    await user.type(textarea, "test");
-    expect(handleChange).toHaveBeenCalled();
-  });
-
-  it("should apply aria-invalid attribute when invalid", () => {
-    const { container } = render(<Textarea aria-invalid="true" />);
-    const textarea = container.querySelector('[data-slot="textarea"]');
-    expect(textarea).toHaveAttribute("aria-invalid", "true");
-  });
-
-  it("should support rows attribute", () => {
-    const { container } = render(<Textarea rows={5} />);
-    const textarea = container.querySelector('[data-slot="textarea"]') as HTMLTextAreaElement;
-    expect(textarea.rows).toBe(5);
-  });
-});
-

package/src/components/textarea.tsx

@@ -1,18 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Textarea }

package/src/components/toggle-group.stories.tsx

@@ -1,108 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
-import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
-
-const meta = {
-  title: "Components/ToggleGroup",
-  component: ToggleGroup,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    type: {
-      control: "select",
-      options: ["single", "multiple"],
-      description: "The type of toggle group.",
-    },
-  },
-} satisfies Meta<typeof ToggleGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    type: "single",
-  },
-  render: () => (
-    <ToggleGroup type="single">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <BoldIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <ItalicIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <UnderlineIcon />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-export const Multiple: Story = {
-  args: {
-    type: "multiple",
-  },
-  render: () => (
-    <ToggleGroup type="multiple">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <BoldIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <ItalicIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <UnderlineIcon />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-export const WithText: Story = {
-  args: {
-    type: "single",
-    defaultValue: "center",
-  },
-  render: () => (
-    <ToggleGroup type="single" defaultValue="center">
-      <ToggleGroupItem value="left">Left</ToggleGroupItem>
-      <ToggleGroupItem value="center">Center</ToggleGroupItem>
-      <ToggleGroupItem value="right">Right</ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-export const Variants: Story = {
-  args: {
-    type: "single",
-  },
-  render: () => (
-    <div className="flex flex-col gap-4">
-      <ToggleGroup type="single" variant="default">
-        <ToggleGroupItem value="1">Option 1</ToggleGroupItem>
-        <ToggleGroupItem value="2">Option 2</ToggleGroupItem>
-        <ToggleGroupItem value="3">Option 3</ToggleGroupItem>
-      </ToggleGroup>
-      <ToggleGroup type="single" variant="outline">
-        <ToggleGroupItem value="1">Option 1</ToggleGroupItem>
-        <ToggleGroupItem value="2">Option 2</ToggleGroupItem>
-        <ToggleGroupItem value="3">Option 3</ToggleGroupItem>
-      </ToggleGroup>
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  args: {
-    type: "single",
-    disabled: true,
-  },
-  render: () => (
-    <ToggleGroup type="single" disabled>
-      <ToggleGroupItem value="1">Option 1</ToggleGroupItem>
-      <ToggleGroupItem value="2">Option 2</ToggleGroupItem>
-      <ToggleGroupItem value="3">Option 3</ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};

package/src/components/toggle-group.test.tsx

@@ -1,66 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
-
-describe("ToggleGroup", () => {
-  it("should render toggle group", () => {
-    const { container } = render(
-      <ToggleGroup type="single">
-        <ToggleGroupItem value="item1">Item 1</ToggleGroupItem>
-      </ToggleGroup>
-    );
-    const group = container.querySelector('[data-slot="toggle-group"]');
-    expect(group).toBeInTheDocument();
-  });
-
-  it("should render toggle group items", () => {
-    const { getByText } = render(
-      <ToggleGroup type="single">
-        <ToggleGroupItem value="item1">Item 1</ToggleGroupItem>
-        <ToggleGroupItem value="item2">Item 2</ToggleGroupItem>
-      </ToggleGroup>
-    );
-    expect(getByText("Item 1")).toBeInTheDocument();
-    expect(getByText("Item 2")).toBeInTheDocument();
-  });
-
-  it("should call onValueChange when item is clicked in single mode", async () => {
-    const user = userEvent.setup();
-    const handleChange = vi.fn();
-    const { getByText } = render(
-      <ToggleGroup type="single" onValueChange={handleChange}>
-        <ToggleGroupItem value="item1">Item 1</ToggleGroupItem>
-        <ToggleGroupItem value="item2">Item 2</ToggleGroupItem>
-      </ToggleGroup>
-    );
-    await user.click(getByText("Item 2"));
-    expect(handleChange).toHaveBeenCalledWith("item2");
-  });
-
-  it("should support multiple selection", async () => {
-    const user = userEvent.setup();
-    const handleChange = vi.fn();
-    const { getByText } = render(
-      <ToggleGroup type="multiple" onValueChange={handleChange}>
-        <ToggleGroupItem value="item1">Item 1</ToggleGroupItem>
-        <ToggleGroupItem value="item2">Item 2</ToggleGroupItem>
-      </ToggleGroup>
-    );
-    await user.click(getByText("Item 1"));
-    await user.click(getByText("Item 2"));
-    expect(handleChange).toHaveBeenCalledTimes(2);
-  });
-
-  it("should be disabled when disabled prop is true", () => {
-    const { container } = render(
-      <ToggleGroup type="single" disabled>
-        <ToggleGroupItem value="item1">Item 1</ToggleGroupItem>
-      </ToggleGroup>
-    );
-    const group = container.querySelector('[data-slot="toggle-group"]');
-    // Radix UI toggle group may use aria-disabled or data-disabled
-    expect(group).toBeInTheDocument();
-  });
-});
-

package/src/components/toggle-group.tsx

@@ -1,81 +0,0 @@
-import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-import { toggleVariants } from "@/components/toggle";
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number;
-  }
->({
-  size: "default",
-  variant: "default",
-  spacing: 0,
-});
-
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  spacing = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number;
-  }) {
-  return (
-    <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      data-spacing={spacing}
-      style={{ "--gap": spacing } as React.CSSProperties}
-      className={cn(
-        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
-        className
-      )}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
-        {children}
-      </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  );
-}
-
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      data-spacing={context.spacing}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
-        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-}
-
-export { ToggleGroup, ToggleGroupItem };

package/src/components/toggle.stories.tsx

@@ -1,98 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Toggle } from "./toggle";
-import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
-
-const meta = {
-  title: "Components/Toggle",
-  component: Toggle,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "outline"],
-      description: "The visual style variant of the toggle.",
-    },
-    size: {
-      control: "select",
-      options: ["default", "sm", "lg"],
-      description: "The size of the toggle.",
-    },
-    pressed: {
-      control: "boolean",
-      description: "Whether the toggle is pressed.",
-    },
-    disabled: {
-      control: "boolean",
-      description: "Whether the toggle is disabled.",
-    },
-  },
-} satisfies Meta<typeof Toggle>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: "Toggle",
-  },
-};
-
-export const WithIcon: Story = {
-  render: () => (
-    <div className="flex gap-2">
-      <Toggle aria-label="Toggle bold">
-        <BoldIcon />
-      </Toggle>
-      <Toggle aria-label="Toggle italic">
-        <ItalicIcon />
-      </Toggle>
-      <Toggle aria-label="Toggle underline">
-        <UnderlineIcon />
-      </Toggle>
-    </div>
-  ),
-};
-
-export const Variants: Story = {
-  render: () => (
-    <div className="flex flex-col gap-4">
-      <div className="flex gap-2">
-        <Toggle variant="default">Default</Toggle>
-        <Toggle variant="outline">Outline</Toggle>
-      </div>
-      <div className="flex gap-2">
-        <Toggle variant="default" pressed>
-          Default Pressed
-        </Toggle>
-        <Toggle variant="outline" pressed>
-          Outline Pressed
-        </Toggle>
-      </div>
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Toggle size="sm">Small</Toggle>
-      <Toggle size="default">Default</Toggle>
-      <Toggle size="lg">Large</Toggle>
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="flex gap-2">
-      <Toggle disabled>Disabled</Toggle>
-      <Toggle disabled pressed>
-        Disabled Pressed
-      </Toggle>
-    </div>
-  ),
-};
-

package/src/components/toggle.test.tsx

@@ -1,42 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Toggle } from "./toggle";
-
-describe("Toggle", () => {
-  it("should render toggle", () => {
-    const { container } = render(<Toggle>Toggle</Toggle>);
-    const toggle = container.querySelector('[data-slot="toggle"]');
-    expect(toggle).toBeInTheDocument();
-  });
-
-  it("should be pressed when pressed prop is true", () => {
-    const { container } = render(<Toggle pressed>Toggle</Toggle>);
-    const toggle = container.querySelector('[data-slot="toggle"]');
-    expect(toggle).toHaveAttribute("data-state", "on");
-  });
-
-  it("should call onPressedChange when clicked", async () => {
-    const user = userEvent.setup();
-    const handleChange = vi.fn();
-    const { container } = render(
-      <Toggle onPressedChange={handleChange}>Toggle</Toggle>
-    );
-    const toggle = container.querySelector('[data-slot="toggle"]') as HTMLElement;
-    await user.click(toggle);
-    expect(handleChange).toHaveBeenCalled();
-  });
-
-  it("should be disabled when disabled prop is true", () => {
-    const { container } = render(<Toggle disabled>Toggle</Toggle>);
-    const toggle = container.querySelector('[data-slot="toggle"]');
-    expect(toggle).toHaveAttribute("data-disabled");
-  });
-
-  it("should apply variant classes", () => {
-    const { container } = render(<Toggle variant="outline">Toggle</Toggle>);
-    const toggle = container.querySelector('[data-slot="toggle"]');
-    expect(toggle).toBeInTheDocument();
-  });
-});
-

package/src/components/toggle.tsx

@@ -1,45 +0,0 @@
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive.Root
-      data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Toggle, toggleVariants }