@godxjp/ui 5.0.2 → 6.0.0

package/src/components/feedback/skeleton.tsx

@@ -0,0 +1,95 @@
+// Skeleton family — shaped placeholders for loading states. Always pick the
+// shape closest to the final layout; spinner-overlay is forbidden.
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { tableCellPaddingClass, tableRowHeightClass } from "../../lib/control-styles";
+
+function SkeletonBlock({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      aria-busy="true"
+      aria-live="polite"
+      className={cn("ui-skeleton-block", className)}
+      {...props}
+    />
+  );
+}
+
+interface SkeletonRowsProps {
+  rows?: number;
+  columns?: number;
+  className?: string;
+}
+
+/** Skeleton for a flat list of rows (use inside a Card or section). */
+export function SkeletonRows({ rows = 6, columns = 4, className }: SkeletonRowsProps) {
+  return (
+    <div className={cn("ui-skeleton-rows", className)} aria-busy="true">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="ui-skeleton-row">
+          {Array.from({ length: columns }).map((_, j) => (
+            <SkeletonBlock
+              key={j}
+              className={cn("h-4", j === 0 ? "w-1/4" : j === columns - 1 ? "w-1/6" : "flex-1")}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** Skeleton matching the DataTable layout — header row + N body rows. */
+export function SkeletonTable({ rows = 8, columns = 5 }: SkeletonRowsProps) {
+  return (
+    <div className="ui-skeleton-table" aria-busy="true">
+      <div className={cn("ui-skeleton-table-head", tableCellPaddingClass, tableRowHeightClass)}>
+        {Array.from({ length: columns }).map((_, j) => (
+          <SkeletonBlock key={j} className={cn("h-3", j === 0 ? "w-1/5" : "flex-1")} />
+        ))}
+      </div>
+      <div className="ui-skeleton-table-body">
+        {Array.from({ length: rows }).map((_, i) => (
+          <div
+            key={i}
+            className={cn("ui-skeleton-table-row", tableCellPaddingClass, tableRowHeightClass)}
+          >
+            {Array.from({ length: columns }).map((_, j) => (
+              <SkeletonBlock key={j} className={cn("h-4", j === 0 ? "w-1/5" : "flex-1")} />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** Skeleton matching a Card detail layout — title + 6 metadata rows. */
+export function SkeletonDetail() {
+  return (
+    <div className="ui-skeleton-detail ui-skeleton-detail-stack" aria-busy="true">
+      <SkeletonBlock className="h-7 w-1/3" />
+      <SkeletonBlock className="h-4 w-1/2" />
+      <div className="ui-skeleton-detail-box ui-skeleton-detail-stack">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="ui-skeleton-detail-stack">
+            <SkeletonBlock className="h-3 w-24" />
+            <SkeletonBlock className="h-4 w-full max-w-md" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** Skeleton matching a stat card / dashboard tile. */
+export function SkeletonCard() {
+  return (
+    <div className="ui-skeleton-card" aria-busy="true">
+      <SkeletonBlock className="h-3 w-24" />
+      <SkeletonBlock className="h-[length:var(--control-height)] w-32" />
+      <SkeletonBlock className="h-3 w-20" />
+    </div>
+  );
+}

package/src/components/feedback/sonner.tsx

@@ -0,0 +1,54 @@
+// shadcn/ui Sonner — recommended toast (replaces deprecated Radix Toast).
+// @see https://ui.shadcn.com/docs/components/sonner
+import * as React from "react";
+import { CheckCircle2, Info, Loader2, OctagonX, TriangleAlert } from "lucide-react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+function useDocumentTheme(): ToasterProps["theme"] {
+  return React.useSyncExternalStore(
+    (onStoreChange) => {
+      if (typeof document === "undefined") return () => undefined;
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      mq.addEventListener("change", onStoreChange);
+      const obs = new MutationObserver(onStoreChange);
+      obs.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+      return () => {
+        mq.removeEventListener("change", onStoreChange);
+        obs.disconnect();
+      };
+    },
+    () => (document.documentElement.classList.contains("dark") ? "dark" : "light"),
+    () => "light",
+  );
+}
+
+function Toaster({ ...props }: ToasterProps) {
+  const theme = useDocumentTheme();
+
+  return (
+    <Sonner
+      theme={theme}
+      className="toaster group"
+      icons={{
+        success: <CheckCircle2 className="size-4" aria-hidden="true" />,
+        info: <Info className="size-4" aria-hidden="true" />,
+        warning: <TriangleAlert className="size-4" aria-hidden="true" />,
+        error: <OctagonX className="size-4" aria-hidden="true" />,
+        loading: <Loader2 className="size-4 animate-spin" aria-hidden="true" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      position="bottom-right"
+      mobileOffset={{ bottom: "16px", right: "16px" }}
+      {...props}
+    />
+  );
+}
+
+export { Toaster };

package/src/components/feedback/toaster.tsx

@@ -0,0 +1 @@
+export { Toaster } from "./sonner";

package/src/components/feedback/use-toast.ts

@@ -0,0 +1,62 @@
+// Toast API — Sonner (shadcn recommended).
+//
+// `toast("msg")` / `toast.success("msg")` — Sonner native API (preferred).
+// `toast({ title, description, variant })` — legacy admin compat.
+import type * as React from "react";
+import { toast as sonnerToast, type ExternalToast } from "sonner";
+
+export type { ExternalToast } from "sonner";
+export { sonnerToast };
+
+export type LegacyToastOptions = ExternalToast & {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  variant?: "default" | "destructive" | "success";
+};
+
+function nodeText(value: React.ReactNode): string {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return "";
+}
+
+function legacyToast(options: LegacyToastOptions) {
+  const { title, description, variant, ...rest } = options;
+  const titleText = nodeText(title);
+  const descText = nodeText(description);
+  const message = titleText || descText;
+  const desc = titleText && descText ? descText : undefined;
+  const sonnerOptions: ExternalToast = { ...rest, description: desc };
+
+  switch (variant) {
+    case "destructive":
+      return sonnerToast.error(message, sonnerOptions);
+    case "success":
+      return sonnerToast.success(message, sonnerOptions);
+    default:
+      return sonnerToast(message, sonnerOptions);
+  }
+}
+
+type ToastFn = typeof sonnerToast &
+  ((options: LegacyToastOptions) => ReturnType<typeof sonnerToast>);
+
+/** Sonner toast + legacy `{ title, variant }` object form. */
+const toast = Object.assign((messageOrOptions: string | LegacyToastOptions) => {
+  if (typeof messageOrOptions === "string") {
+    return sonnerToast(messageOrOptions);
+  }
+  return legacyToast(messageOrOptions);
+}, sonnerToast) as ToastFn;
+
+/** Legacy hook — prefer `toast` import directly; kept for existing admin pages. */
+function useToast() {
+  return {
+    toast: (options: LegacyToastOptions) => legacyToast(options),
+    dismiss: sonnerToast.dismiss,
+    toasts: [] as const,
+  };
+}
+
+export { toast, legacyToast, useToast };

package/src/components/general/__tests__/button.test.tsx

@@ -0,0 +1,71 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { Button } from "../button";
+
+describe("Button", () => {
+  it("renders children and default type=submit implicit button", () => {
+    renderWithUi(<Button>Click me</Button>);
+    const btn = screen.getByRole("button", { name: "Click me" });
+    expect(btn).toBeInTheDocument();
+    expect(btn.tagName).toBe("BUTTON");
+  });
+
+  it("calls onClick when clicked", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    renderWithUi(<Button onClick={onClick}>Go</Button>);
+    await user.click(screen.getByRole("button", { name: "Go" }));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it("does not fire onClick when disabled", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    renderWithUi(
+      <Button disabled onClick={onClick}>
+        Blocked
+      </Button>,
+    );
+    await user.click(screen.getByRole("button", { name: "Blocked" }));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it.each(["destructive", "outline", "secondary", "ghost", "link"] as const)(
+    "renders variant=%s",
+    (variant) => {
+      renderWithUi(<Button variant={variant}>V</Button>);
+      expect(screen.getByRole("button", { name: "V" })).toBeInTheDocument();
+    },
+  );
+
+  it.each(["xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"] as const)(
+    "renders size=%s",
+    (size) => {
+      renderWithUi(<Button size={size}>S</Button>);
+      expect(screen.getByRole("button", { name: "S" })).toBeInTheDocument();
+    },
+  );
+
+  it("exposes shadcn data-slot and state attributes", () => {
+    renderWithUi(
+      <Button variant="outline" size="sm" aria-invalid>
+        State
+      </Button>,
+    );
+    const btn = screen.getByRole("button", { name: "State" });
+    expect(btn).toHaveAttribute("data-slot", "button");
+    expect(btn).toHaveAttribute("data-variant", "outline");
+    expect(btn).toHaveAttribute("data-size", "sm");
+    expect(btn).toHaveClass("aria-invalid:border-destructive");
+  });
+
+  it("default size applies ui-button size token binding", () => {
+    renderWithUi(<Button>Density</Button>);
+    expect(screen.getByRole("button", { name: "Density" })).toHaveClass("ui-button--default-size");
+  });
+
+  it("default variant uses semantic button token class", () => {
+    renderWithUi(<Button>Primary</Button>);
+    expect(screen.getByRole("button", { name: "Primary" })).toHaveClass("ui-button--default");
+  });
+});

package/src/components/general/button.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import type { ButtonProp } from "../../props/components/general.prop";
+
+const buttonVariants = cva("ui-button", {
+  variants: {
+    variant: {
+      default: "ui-button--default bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive:
+        "ui-button--destructive bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20",
+      outline:
+        "ui-button--outline border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+      secondary:
+        "ui-button--secondary bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "ui-button--ghost hover:bg-accent hover:text-accent-foreground",
+      link: "ui-button--link text-primary underline-offset-4 hover:underline",
+    },
+    size: {
+      default: "ui-button--default-size py-2 has-[>svg]:px-3",
+      xs: "h-[calc(var(--control-height)-0.75rem)] gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+      sm: "ui-button--sm gap-1.5 rounded-md has-[>svg]:px-2.5",
+      lg: "ui-button--lg rounded-md has-[>svg]:px-4",
+      icon: "ui-button--icon",
+      "icon-xs":
+        "size-[calc(var(--control-height)-0.75rem)] rounded-md [&_svg:not([class*='size-'])]:size-3",
+      "icon-sm": "size-[calc(var(--control-height)-0.5rem)]",
+      "icon-lg": "size-[calc(var(--control-height)+0.25rem)]",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default" },
+});
+
+export type { ButtonProp, ButtonProp as ButtonProps } from "../../props/components/general.prop";
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProp>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        data-slot="button"
+        data-variant={variant ?? "default"}
+        data-size={size ?? "default"}
+        className={cn(
+          "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none",
+          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          buttonVariants({ variant, size, className }),
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { buttonVariants };

package/src/components/general/index.ts

@@ -0,0 +1,2 @@
+export { Button, buttonVariants } from "./button";
+export type { ButtonProps } from "./button";

package/src/components/layout/__tests__/page-container.test.tsx

@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+import { renderWithUi, screen } from "@/test/render";
+import { PageContainer } from "../page-container";
+import { Button } from "../../general/button";
+
+describe("PageContainer", () => {
+  it("renders title as h1", () => {
+    renderWithUi(<PageContainer title="Customers" />);
+    expect(screen.getByRole("heading", { level: 1, name: "Customers" })).toBeInTheDocument();
+  });
+
+  it("renders subtitle when provided", () => {
+    renderWithUi(<PageContainer title="Customers" subtitle="CRM list" />);
+    expect(screen.getByText("CRM list")).toHaveClass("ui-page-subtitle");
+  });
+
+  it("renders extra slot in header row", () => {
+    renderWithUi(<PageContainer title="Customers" extra={<Button>Create</Button>} />);
+    expect(screen.getByRole("button", { name: "Create" })).toBeInTheDocument();
+  });
+
+  it("renders footer slot", () => {
+    renderWithUi(<PageContainer title="Edit" footer={<Button>Save</Button>} />);
+    expect(screen.getByRole("contentinfo")).toContainElement(
+      screen.getByRole("button", { name: "Save" }),
+    );
+  });
+
+  it("renders breadcrumb trail with links", () => {
+    renderWithUi(
+      <PageContainer
+        title="Detail"
+        breadcrumb={[
+          { label: "CRM", to: "/crm" },
+          { label: "Customers", to: "/crm/customers" },
+          { label: "Detail" },
+        ]}
+      />,
+    );
+    const nav = screen.getByRole("navigation", { name: "Breadcrumb" });
+    expect(nav).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "CRM" })).toHaveAttribute("href", "/crm");
+    expect(nav).toHaveTextContent("Detail");
+  });
+
+  it("applies density class on root", () => {
+    const { container } = renderWithUi(<PageContainer title="Compact" density="compact" />);
+    expect(container.firstChild).toHaveClass("ui-density-compact");
+  });
+
+  it("applies variant modifier class", () => {
+    const { container } = renderWithUi(<PageContainer title="List" variant="flush" />);
+    expect(container.firstChild).toHaveClass("ui-page-container--flush");
+  });
+
+  it("applies sticky footer modifier when enabled", () => {
+    const { container } = renderWithUi(<PageContainer title="Form" stickyFooter />);
+    expect(container.firstChild).toHaveClass("ui-page-container--sticky-footer");
+  });
+
+  it("renders children in page body", () => {
+    renderWithUi(
+      <PageContainer title="Page">
+        <p>Body content</p>
+      </PageContainer>,
+    );
+    expect(screen.getByText("Body content")).toBeInTheDocument();
+  });
+});

package/src/components/layout/__tests__/page-inset.test.tsx

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { renderWithUi, screen } from "@/test/render";
+import { PageInset } from "../page-inset";
+
+describe("PageInset", () => {
+  it("renders children with inset class", () => {
+    renderWithUi(
+      <PageInset>
+        <p>Filter zone</p>
+      </PageInset>,
+    );
+    expect(screen.getByText("Filter zone").parentElement).toHaveClass("ui-page-inset");
+  });
+});

package/src/components/layout/__tests__/stack-inline.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { renderWithUi } from "@/test/render";
+import { Stack } from "../stack";
+import { Inline } from "../inline";
+
+describe("Stack", () => {
+  it.each([
+    ["xs", "ui-stack-xs"],
+    ["sm", "ui-stack-sm"],
+    ["md", "ui-stack-md"],
+    ["lg", "ui-stack-lg"],
+    ["xl", "ui-stack-xl"],
+  ] as const)("applies gap=%s → %s", (gap, cls) => {
+    const { container } = renderWithUi(
+      <Stack gap={gap}>
+        <span>a</span>
+        <span>b</span>
+      </Stack>,
+    );
+    expect(container.firstChild).toHaveClass(cls);
+  });
+});
+
+describe("Inline", () => {
+  it.each([
+    ["xs", "ui-inline-xs"],
+    ["sm", "ui-inline-sm"],
+    ["md", "ui-inline-md"],
+    ["lg", "ui-inline-lg"],
+  ] as const)("applies gap=%s → %s", (gap, cls) => {
+    const { container } = renderWithUi(
+      <Inline gap={gap}>
+        <span>a</span>
+        <span>b</span>
+      </Inline>,
+    );
+    expect(container.firstChild).toHaveClass(cls);
+  });
+});

package/src/components/layout/app-shell.tsx

@@ -0,0 +1,42 @@
+import type { AppShellProp } from "../../props/components/layout.prop";
+
+export type {
+  AppShellProp,
+  AppShellProp as AppShellProps,
+} from "../../props/components/layout.prop";
+
+export function AppShell({
+  sidebar,
+  topbar,
+  topbarLeft,
+  topbarRight,
+  logo,
+  breadcrumb,
+  footer,
+  children,
+  sidebarCollapsed = false,
+}: AppShellProp) {
+  const resolvedTopbar =
+    topbar !== undefined ? (
+      topbar
+    ) : (
+      <div className="app-topbar-rail">
+        {logo !== undefined && <div className="app-topbar-logo">{logo}</div>}
+        {topbarLeft !== undefined && <div className="app-topbar-left">{topbarLeft}</div>}
+        <div className="app-topbar-spacer" />
+        {topbarRight !== undefined && <div className="app-topbar-right">{topbarRight}</div>}
+      </div>
+    );
+
+  return (
+    <div className="app-root" data-collapsed={sidebarCollapsed ? "true" : undefined}>
+      <aside className="app-sidebar">{sidebar}</aside>
+      <header className="app-topbar">{resolvedTopbar}</header>
+      <main className="app-main">
+        {breadcrumb !== undefined && <div className="app-breadcrumb">{breadcrumb}</div>}
+        {children}
+      </main>
+      {footer !== undefined && <footer className="app-footer">{footer}</footer>}
+    </div>
+  );
+}

package/src/components/layout/breadcrumb.tsx

@@ -0,0 +1,35 @@
+import { ChevronRight } from "lucide-react";
+import { Link } from "react-router-dom";
+
+import type { BreadcrumbProp } from "../../props/vocabulary/navigation.prop";
+
+export type BreadcrumbProps = {
+  items: BreadcrumbProp;
+};
+
+export function Breadcrumb({ items }: BreadcrumbProps) {
+  return (
+    <nav aria-label="Breadcrumb" className="ui-breadcrumb">
+      <ol className="ui-breadcrumb-list">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+
+          return (
+            <li key={item.to ?? index} className="ui-breadcrumb-item">
+              {item.to && !isLast ? (
+                <Link to={item.to} className="ui-breadcrumb-link">
+                  {item.label}
+                </Link>
+              ) : (
+                <span className="ui-breadcrumb-current" aria-current={isLast ? "page" : undefined}>
+                  {item.label}
+                </span>
+              )}
+              {!isLast ? <ChevronRight aria-hidden="true" /> : null}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/components/layout/index.ts

@@ -0,0 +1,31 @@
+export { PageContainer } from "./page-container";
+export type {
+  PageContainerProp,
+  PageContainerProps,
+  BreadcrumbItem,
+  BreadcrumbItemProp,
+} from "./page-container";
+export { PageInset } from "./page-inset";
+export type { PageInsetProp, PageInsetProps } from "./page-inset";
+export { Stack } from "./stack";
+export type { StackProp, StackProps } from "./stack";
+export { Inline } from "./inline";
+export type { InlineProp, InlineProps } from "./inline";
+export { AppShell } from "./app-shell";
+export type { AppShellProps } from "./app-shell";
+export { ShellApp } from "./shell-app";
+export type { ShellAppProps } from "./shell-app";
+export { Menu } from "./menu";
+export type { MenuItem, MenuProps, MenuSection } from "./menu";
+export { Breadcrumb } from "./breadcrumb";
+export type { BreadcrumbProps } from "./breadcrumb";
+export { Sidebar } from "./sidebar";
+export type { SidebarItem, SidebarProduct, SidebarProps, SidebarSection } from "./sidebar";
+export { Topbar } from "./topbar";
+export type { TopbarProduct, TopbarProject, TopbarProps } from "./topbar";
+export { ResponsiveGrid } from "./responsive-grid";
+export type { ResponsiveGridProps } from "./responsive-grid";
+export { SplitPane } from "./split-pane";
+export type { SplitPaneProps } from "./split-pane";
+export { MobileFrame } from "./mobile-frame";
+export type { MobileFrameNavItem, MobileFrameProps } from "./mobile-frame";

package/src/components/layout/inline.tsx

@@ -0,0 +1,13 @@
+import { cn } from "../../lib/utils";
+import { inlineGapClass } from "../../lib/variants";
+import type { InlineProp } from "../../props/components/layout.prop";
+
+export type { InlineProp, InlineProp as InlineProps } from "../../props/components/layout.prop";
+
+export function Inline({ gap = "sm", className, children, ...props }: InlineProp) {
+  return (
+    <div className={cn(inlineGapClass[gap], className)} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/components/layout/menu.tsx

@@ -0,0 +1,34 @@
+import type { SidebarItem, SidebarSection } from "./sidebar";
+import { Sidebar } from "./sidebar";
+
+export type MenuItem = SidebarItem & {
+  active?: boolean;
+};
+
+export type MenuSection = {
+  label?: string;
+  items: MenuItem[];
+};
+
+export type MenuProps = {
+  items: MenuSection[];
+};
+
+export function Menu({ items }: MenuProps) {
+  const sections: SidebarSection[] = items.map((section) => ({
+    label: section.label,
+    items: section.items.map(({ active: _active, ...item }) => item),
+  }));
+  const activeId =
+    items.flatMap((section) => section.items).find((item) => item.active)?.id ??
+    items[0]?.items[0]?.id ??
+    "";
+
+  return (
+    <Sidebar
+      activeId={activeId}
+      sections={sections}
+      product={{ name: "Acme Console", role: "Workspace", color: "hsl(var(--attention))" }}
+    />
+  );
+}