@mzc-fe/design-system 0.0.1 → 0.0.2

package/src/components/chart.tsx

@@ -1,357 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-import { cn } from "@/lib/utils";
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode;
-    icon?: React.ComponentType;
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  );
-};
-
-type ChartContextProps = {
-  config: ChartConfig;
-};
-
-const ChartContext = React.createContext<ChartContextProps | null>(null);
-
-function useChart() {
-  const context = React.useContext(ChartContext);
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
-  }
-
-  return context;
-}
-
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  ...props
-}: React.ComponentProps<"div"> & {
-  config: ChartConfig;
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"];
-}) {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-slot="chart"
-        data-chart={chartId}
-        className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  );
-}
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color
-  );
-
-  if (!colorConfig.length) {
-    return null;
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  );
-};
-
-const ChartTooltip = RechartsPrimitive.Tooltip;
-
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  indicator = "dot",
-  hideLabel = false,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  labelClassName,
-  formatter,
-  color,
-  nameKey,
-  labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<"div"> & {
-    hideLabel?: boolean;
-    hideIndicator?: boolean;
-    indicator?: "line" | "dot" | "dashed";
-    nameKey?: string;
-    labelKey?: string;
-  }) {
-  const { config } = useChart();
-
-  const tooltipLabel = React.useMemo(() => {
-    if (hideLabel || !payload?.length) {
-      return null;
-    }
-
-    const [item] = payload;
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
-    const itemConfig = getPayloadConfigFromPayload(config, item, key);
-    const value =
-      !labelKey && typeof label === "string"
-        ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label;
-
-    if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      );
-    }
-
-    if (!value) {
-      return null;
-    }
-
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ]);
-
-  if (!active || !payload?.length) {
-    return null;
-  }
-
-  const nestLabel = payload.length === 1 && indicator !== "dot";
-
-  return (
-    <div
-      className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-        className
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload
-          .filter((item) => item.type !== "none")
-          .map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`;
-            const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color || item.payload.fill || item.color;
-
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            );
-          })}
-      </div>
-    </div>
-  );
-}
-
-const ChartLegend = RechartsPrimitive.Legend;
-
-function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = "bottom",
-  nameKey,
-}: React.ComponentProps<"div"> &
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean;
-    nameKey?: string;
-  }) {
-  const { config } = useChart();
-
-  if (!payload?.length) {
-    return null;
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
-      )}
-    >
-      {payload
-        .filter((item) => item.type !== "none")
-        .map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`;
-          const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          );
-        })}
-    </div>
-  );
-}
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined;
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined;
-
-  let configLabelKey: string = key;
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string;
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string;
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config];
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-};

package/src/components/checkbox.stories.tsx

@@ -1,108 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import { Checkbox } from "./checkbox";
-import { Label } from "./label";
-import type { CheckedState } from "@radix-ui/react-checkbox";
-
-const meta = {
-  title: "Components/Checkbox",
-  component: Checkbox,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    checked: {
-      control: "boolean",
-      description: "Whether the checkbox is checked.",
-    },
-    disabled: {
-      control: "boolean",
-      description: "Whether the checkbox is disabled.",
-    },
-  },
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => {
-    const [checked, setChecked] = useState<CheckedState>();
-    return (
-      <div className="flex items-center space-x-2">
-        <Checkbox id="terms" checked={checked} onCheckedChange={setChecked} />
-        <Label htmlFor="terms">Accept terms and conditions</Label>
-      </div>
-    );
-  },
-};
-
-export const Checked: Story = {
-  render: () => (
-    <div className="flex items-center space-x-2">
-      <Checkbox id="checked" defaultChecked />
-      <Label htmlFor="checked">Checked by default</Label>
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="flex items-center space-x-2">
-        <Checkbox id="disabled" disabled />
-        <Label htmlFor="disabled">Disabled unchecked</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <Checkbox id="disabled-checked" disabled defaultChecked />
-        <Label htmlFor="disabled-checked">Disabled checked</Label>
-      </div>
-    </div>
-  ),
-};
-
-export const Multiple: Story = {
-  render: () => {
-    const [items, setItems] = useState({
-      item1: false,
-      item2: true,
-      item3: false,
-    });
-
-    return (
-      <div className="space-y-3">
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="item1"
-            checked={items.item1}
-            onCheckedChange={(checked) =>
-              setItems({ ...items, item1: checked as boolean })
-            }
-          />
-          <Label htmlFor="item1">Item 1</Label>
-        </div>
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="item2"
-            checked={items.item2}
-            onCheckedChange={(checked) =>
-              setItems({ ...items, item2: checked as boolean })
-            }
-          />
-          <Label htmlFor="item2">Item 2</Label>
-        </div>
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="item3"
-            checked={items.item3}
-            onCheckedChange={(checked) =>
-              setItems({ ...items, item3: checked as boolean })
-            }
-          />
-          <Label htmlFor="item3">Item 3</Label>
-        </div>
-      </div>
-    );
-  },
-};

package/src/components/checkbox.test.tsx

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

package/src/components/checkbox.tsx

@@ -1,32 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none"
-      >
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-}
-
-export { Checkbox }

package/src/components/collapsible.stories.tsx

@@ -1,106 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "./collapsible";
-import { Button } from "./button";
-import { ChevronDownIcon } from "lucide-react";
-
-const meta = {
-  title: "Components/Collapsible",
-  component: Collapsible,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Collapsible>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <Collapsible open={open} onOpenChange={setOpen} className="w-[350px]">
-        <div className="flex items-center justify-between space-x-4 px-4">
-          <h4 className="text-sm font-semibold">
-            @peduarte starred 3 repositories
-          </h4>
-          <CollapsibleTrigger asChild>
-            <Button variant="ghost" size="icon">
-              <ChevronDownIcon className="h-4 w-4" />
-              <span className="sr-only">Toggle</span>
-            </Button>
-          </CollapsibleTrigger>
-        </div>
-        <div className="px-4 py-2 space-y-2">
-          <div className="rounded-md border px-4 py-2 text-sm">
-            @radix-ui/primitives
-          </div>
-        </div>
-        <CollapsibleContent className="space-y-2">
-          <div className="rounded-md border px-4 py-2 text-sm">
-            @radix-ui/colors
-          </div>
-          <div className="rounded-md border px-4 py-2 text-sm">
-            @stitches/react
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
-    );
-  },
-};
-
-export const Simple: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <Collapsible open={open} onOpenChange={setOpen} className="w-[350px]">
-        <CollapsibleTrigger asChild>
-          <Button variant="outline" className="w-full justify-between">
-            Click to {open ? "collapse" : "expand"}
-            <ChevronDownIcon
-              className={`h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`}
-            />
-          </Button>
-        </CollapsibleTrigger>
-        <CollapsibleContent className="mt-2 space-y-2">
-          <div className="rounded-md border p-4">
-            <p className="text-sm">
-              This is the collapsible content. It can contain any content you
-              want.
-            </p>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
-    );
-  },
-};
-
-export const DefaultOpen: Story = {
-  render: () => (
-    <Collapsible defaultOpen className="w-[350px]">
-      <div className="flex items-center justify-between space-x-4 px-4">
-        <h4 className="text-sm font-semibold">Open by default</h4>
-        <CollapsibleTrigger asChild>
-          <Button variant="ghost" size="icon">
-            <ChevronDownIcon className="h-4 w-4" />
-            <span className="sr-only">Toggle</span>
-          </Button>
-        </CollapsibleTrigger>
-      </div>
-      <CollapsibleContent className="space-y-2 px-4">
-        <div className="rounded-md border px-4 py-2 text-sm">
-          This content is visible by default.
-        </div>
-        <div className="rounded-md border px-4 py-2 text-sm">
-          You can collapse it by clicking the button.
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  ),
-};
-