@godxjp/ui 5.0.1 → 6.0.0

package/src/components/layout/mobile-frame.tsx

@@ -0,0 +1,57 @@
+import type { ComponentType, ReactNode, SVGProps } from "react";
+
+import { Badge } from "../data-display/badge";
+
+export type MobileFrameNavItem = {
+  label: string;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  active?: boolean;
+};
+
+export type MobileFrameProps = {
+  title: string;
+  subtitle?: string;
+  status?: string;
+  children: ReactNode;
+  navItems?: MobileFrameNavItem[];
+};
+
+export function MobileFrame({
+  title,
+  subtitle,
+  status,
+  children,
+  navItems = [],
+}: MobileFrameProps) {
+  return (
+    <div className="ui-mobile-stage">
+      <div className="ui-mobile-frame">
+        <header className="ui-mobile-header">
+          <div>
+            <div className="ui-mobile-title">{title}</div>
+            {subtitle ? <div className="ui-mobile-subtitle">{subtitle}</div> : null}
+          </div>
+          {status ? <Badge variant="secondary">{status}</Badge> : null}
+        </header>
+        <main className="ui-mobile-main">{children}</main>
+        {navItems.length > 0 ? (
+          <footer className="ui-mobile-nav">
+            {navItems.map((item) => {
+              const Icon = item.icon;
+              return (
+                <div
+                  className="ui-mobile-nav-item"
+                  data-active={item.active ? "true" : undefined}
+                  key={item.label}
+                >
+                  <Icon aria-hidden="true" />
+                  <span>{item.label}</span>
+                </div>
+              );
+            })}
+          </footer>
+        ) : null}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,81 @@
+/** PageContainer — mandatory shell for every admin page (Ant Design PageHeader equivalent). */
+import { Link } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import { densityClass, pageContainerVariantClass } from "../../lib/variants";
+import type { PageContainerProp } from "../../props/components/layout.prop";
+
+export type {
+  PageContainerProp,
+  PageContainerProp as PageContainerProps,
+} from "../../props/components/layout.prop";
+export type {
+  BreadcrumbItemProp,
+  BreadcrumbItemProp as BreadcrumbItem,
+} from "../../props/vocabulary/navigation.prop";
+
+export function PageContainer({
+  title,
+  subtitle,
+  extra,
+  footer,
+  breadcrumb,
+  density = "default",
+  variant = "default",
+  stickyFooter = false,
+  children,
+  className,
+}: PageContainerProp) {
+  return (
+    <div
+      className={cn(
+        "ui-page-container",
+        densityClass[density],
+        pageContainerVariantClass[variant],
+        stickyFooter && "ui-page-container--sticky-footer",
+        className,
+      )}
+    >
+      <header className="ui-page-header">
+        {breadcrumb && breadcrumb.length > 0 && (
+          <nav aria-label="Breadcrumb" className="ui-breadcrumb">
+            <ol className="ui-breadcrumb-list">
+              {breadcrumb.map((item, i) => {
+                const isLast = i === breadcrumb.length - 1;
+                return (
+                  <li key={i} className="ui-inline-xs">
+                    {item.to && !isLast ? (
+                      <Link to={item.to} className="hover:text-foreground hover:underline">
+                        {item.label}
+                      </Link>
+                    ) : (
+                      <span
+                        className={isLast ? "text-foreground" : ""}
+                        aria-current={isLast ? "page" : undefined}
+                      >
+                        {item.label}
+                      </span>
+                    )}
+                    {!isLast && <ChevronRight className="size-3" aria-hidden="true" />}
+                  </li>
+                );
+              })}
+            </ol>
+          </nav>
+        )}
+        <div className="ui-page-header-row">
+          <div className="min-w-0">
+            <h1 className="ui-page-title">{title}</h1>
+            {subtitle && <p className="ui-page-subtitle">{subtitle}</p>}
+          </div>
+          {extra && <div className="ui-page-header-extra">{extra}</div>}
+        </div>
+      </header>
+
+      {children != null && <div className="ui-page-body">{children}</div>}
+
+      {footer && <footer className="ui-page-footer">{footer}</footer>}
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+/** Horizontal padding aligned with PageContainer header — use inside `variant="flush"`. */
+import { cn } from "../../lib/utils";
+import type { PageInsetProp } from "../../props/components/layout.prop";
+
+export type {
+  PageInsetProp,
+  PageInsetProp as PageInsetProps,
+} from "../../props/components/layout.prop";
+
+export function PageInset({ className, children, ...props }: PageInsetProp) {
+  return (
+    <div className={cn("ui-page-inset", className)} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/components/layout/responsive-grid.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+
+export type ResponsiveGridProps = {
+  columns?: 2 | 3 | 4;
+  children: ReactNode;
+};
+
+export function ResponsiveGrid({ columns = 3, children }: ResponsiveGridProps) {
+  return (
+    <div className="ui-responsive-grid" data-columns={columns}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+import { AppShell } from "./app-shell";
+import { Topbar } from "./topbar";
+
+export type ShellAppProps = {
+  menu: ReactNode;
+  breadcrumb?: ReactNode;
+  children: ReactNode;
+};
+
+export function ShellApp({ menu, breadcrumb, children }: ShellAppProps) {
+  return (
+    <AppShell
+      sidebar={menu}
+      breadcrumb={breadcrumb}
+      topbar={
+        <Topbar
+          product={{ name: "GodX", color: "hsl(var(--attention))" }}
+          project={{ name: "Japan to SEA lanes" }}
+          onSearchOpen={() => undefined}
+          onNotificationsOpen={() => undefined}
+          unread
+        />
+      }
+    >
+      {children}
+    </AppShell>
+  );
+}

package/src/components/layout/sidebar.tsx

@@ -0,0 +1,98 @@
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import type { SidebarProp } from "../../props/components/layout.prop";
+
+export type {
+  SidebarItemProp as SidebarItem,
+  SidebarProductProp as SidebarProduct,
+  SidebarProp,
+  SidebarProp as SidebarProps,
+  SidebarSectionProp as SidebarSection,
+} from "../../props/components/layout.prop";
+
+export function Sidebar({
+  activeId,
+  onSelect,
+  sections,
+  product,
+  onProductClick,
+  brand,
+  collapsed = false,
+  footer,
+}: SidebarProp) {
+  return (
+    <div className="sb-root" data-collapsed={collapsed ? "true" : undefined}>
+      {brand !== undefined ? (
+        <div className="sb-brand">{brand}</div>
+      ) : product ? (
+        <button
+          type="button"
+          className="sb-product"
+          onClick={onProductClick}
+          aria-label={product.name}
+        >
+          <span
+            className="sb-logo-mark"
+            style={{ background: product.color ?? "hsl(var(--attention))" }}
+          >
+            {product.name[0]?.toUpperCase() ?? "?"}
+          </span>
+          {!collapsed && (
+            <span className="sb-product-meta">
+              <span className="sb-product-name">{product.name}</span>
+              {product.role ? <span className="sb-product-tenant">{product.role}</span> : null}
+            </span>
+          )}
+          {!collapsed && (
+            <span className="sb-product-caret">
+              <ChevronDown aria-hidden="true" />
+            </span>
+          )}
+        </button>
+      ) : null}
+
+      <div className="sb-nav-scroll">
+        {sections.map((section, sectionIndex) => (
+          <div className="sb-section" key={section.label ?? sectionIndex}>
+            {section.label && !collapsed ? (
+              <div className="sb-section-label">{section.label}</div>
+            ) : null}
+            <div className="sb-nav" role="navigation">
+              {section.items.map((item) => {
+                const Icon = item.icon;
+                const isActive = item.id === activeId;
+
+                return (
+                  <button
+                    type="button"
+                    className={cn("sb-nav-item")}
+                    data-active={isActive ? "true" : undefined}
+                    aria-current={isActive ? "page" : undefined}
+                    aria-disabled={item.disabled}
+                    aria-label={collapsed ? item.label : undefined}
+                    title={collapsed ? item.label : undefined}
+                    key={item.id}
+                    onClick={() => {
+                      if (!item.disabled) onSelect?.(item.id);
+                    }}
+                  >
+                    <span className="sb-icon">
+                      <Icon aria-hidden="true" />
+                    </span>
+                    {!collapsed && <span className="sb-label">{item.label}</span>}
+                    {!collapsed && item.badge !== undefined && item.badge !== "" ? (
+                      <span className="sb-badge">{item.badge}</span>
+                    ) : null}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {footer ? <div className="sb-footer">{footer}</div> : null}
+    </div>
+  );
+}

package/src/components/layout/split-pane.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+
+export type SplitPaneProps = {
+  children: ReactNode;
+  aside: ReactNode;
+  asideWidth?: "sm" | "md";
+};
+
+export function SplitPane({ children, aside, asideWidth = "md" }: SplitPaneProps) {
+  return (
+    <div className="ui-split-pane" data-aside-width={asideWidth}>
+      <div className="ui-split-pane-main">{children}</div>
+      <aside className="ui-split-pane-aside">{aside}</aside>
+    </div>
+  );
+}

package/src/components/layout/stack.tsx

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

package/src/components/layout/topbar.tsx

@@ -0,0 +1,108 @@
+import {
+  Bell,
+  ChevronDown,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Search,
+  SlidersHorizontal,
+} from "lucide-react";
+
+import type { TopbarProp } from "../../props/components/layout.prop";
+
+export type {
+  TopbarProductProp as TopbarProduct,
+  TopbarProjectProp as TopbarProject,
+  TopbarProp,
+  TopbarProp as TopbarProps,
+} from "../../props/components/layout.prop";
+
+export function Topbar({
+  product,
+  project,
+  onProductOpen,
+  onProjectOpen,
+  onSearchOpen,
+  onTweaksOpen,
+  collapsed = false,
+  onToggleCollapsed,
+  rightSlot,
+  unread = false,
+  onNotificationsOpen,
+  user,
+}: TopbarProp) {
+  return (
+    <>
+      {onToggleCollapsed ? (
+        <button
+          type="button"
+          className="tb-icon-btn"
+          aria-label="Toggle sidebar"
+          aria-pressed={collapsed}
+          onClick={onToggleCollapsed}
+        >
+          {collapsed ? <PanelLeftOpen aria-hidden="true" /> : <PanelLeftClose aria-hidden="true" />}
+        </button>
+      ) : null}
+
+      <div className="tb-switcher">
+        <button type="button" className="tb-chip" aria-label={product.name} onClick={onProductOpen}>
+          <span
+            className="tb-chip-icon"
+            style={{ background: product.color ?? "hsl(var(--attention))" }}
+          >
+            {product.name[0]?.toUpperCase() ?? "?"}
+          </span>
+          <span className="tb-chip-label">{product.name}</span>
+          <span className="tb-chip-caret">
+            <ChevronDown aria-hidden="true" />
+          </span>
+        </button>
+        <span className="tb-chip-sep">/</span>
+        <button
+          type="button"
+          className={`tb-chip ${project ? "" : "tb-chip-empty"}`}
+          aria-label={project ? project.name : "Pick project"}
+          onClick={onProjectOpen}
+        >
+          <span className="tb-chip-label">{project ? project.name : "Pick project"}</span>
+          <span className="tb-chip-caret">
+            <ChevronDown aria-hidden="true" />
+          </span>
+        </button>
+      </div>
+
+      <button type="button" className="tb-search" onClick={onSearchOpen}>
+        <Search aria-hidden="true" />
+        <span>Search...</span>
+        <kbd className="kbd">⌘K</kbd>
+      </button>
+
+      {rightSlot}
+
+      {onNotificationsOpen ? (
+        <button
+          type="button"
+          className="tb-icon-btn tb-bell"
+          aria-label="Notifications"
+          onClick={onNotificationsOpen}
+        >
+          <Bell aria-hidden="true" />
+          {unread ? <span className="tb-bell-dot" aria-hidden="true" /> : null}
+        </button>
+      ) : null}
+
+      {user}
+
+      {onTweaksOpen ? (
+        <button
+          type="button"
+          className="tb-icon-btn"
+          aria-label="Open tweaks"
+          onClick={onTweaksOpen}
+        >
+          <SlidersHorizontal aria-hidden="true" />
+        </button>
+      ) : null}
+    </>
+  );
+}

package/src/components/navigation/__tests__/app-pickers.test.tsx

@@ -0,0 +1,118 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AppProvider } from "../../../app/app-provider";
+import { LocalePicker } from "../locale-picker";
+import { DateFormatPicker } from "../date-format-picker";
+import { TimeFormatPicker } from "../time-format-picker";
+import { TimezonePicker } from "../timezone-picker";
+
+describe("LocalePicker", () => {
+  it("renders current locale from AppProvider", () => {
+    render(
+      <AppProvider persist={false} defaultLocale="vi">
+        <LocalePicker />
+      </AppProvider>,
+    );
+
+    expect(screen.getByRole("combobox", { name: "Ngôn ngữ" })).toBeInTheDocument();
+    expect(screen.getByText("Tiếng Việt")).toBeInTheDocument();
+  });
+
+  it("works in controlled mode without AppProvider", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(<LocalePicker value="en" onChange={onChange} />);
+    await user.click(screen.getByRole("combobox", { name: "Ngôn ngữ" }));
+    await user.click(screen.getByRole("option", { name: "日本語" }));
+
+    expect(onChange).toHaveBeenCalledWith("ja");
+  });
+});
+
+describe("TimezonePicker", () => {
+  it("lists configured timezones from AppProvider", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <AppProvider
+        persist={false}
+        defaultLocale="en"
+        defaultTimezone="Asia/Tokyo"
+        timezoneOptions={["Asia/Tokyo", "Asia/Ho_Chi_Minh"]}
+      >
+        <TimezonePicker />
+      </AppProvider>,
+    );
+
+    await user.click(screen.getByRole("combobox", { name: "Timezone" }));
+    expect(screen.getByRole("option", { name: "Japan (Tokyo)" })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: "Vietnam (Ho Chi Minh)" })).toBeInTheDocument();
+    expect(screen.queryByRole("option", { name: /Paris/ })).not.toBeInTheDocument();
+  });
+});
+
+describe("DateFormatPicker", () => {
+  it("renders dmy for vi locale by default", () => {
+    render(
+      <AppProvider persist={false} defaultLocale="vi">
+        <DateFormatPicker />
+      </AppProvider>,
+    );
+
+    expect(screen.getByText("Ngày / Tháng / Năm")).toBeInTheDocument();
+  });
+
+  it("renders iso for ja locale by default", () => {
+    render(
+      <AppProvider persist={false} defaultLocale="ja">
+        <DateFormatPicker />
+      </AppProvider>,
+    );
+
+    expect(screen.getByText("YYYY-MM-DD（年-月-日）")).toBeInTheDocument();
+  });
+
+  it("works in controlled mode", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(
+      <AppProvider persist={false} defaultLocale="en">
+        <DateFormatPicker value="mdy" onChange={onChange} />
+      </AppProvider>,
+    );
+    await user.click(screen.getByRole("combobox", { name: "Date format" }));
+    await user.click(screen.getByRole("option", { name: "ISO (yyyy-MM-dd)" }));
+
+    expect(onChange).toHaveBeenCalledWith("iso");
+  });
+});
+
+describe("TimeFormatPicker", () => {
+  it("renders 24h for vi locale by default", () => {
+    render(
+      <AppProvider persist={false} defaultLocale="vi">
+        <TimeFormatPicker />
+      </AppProvider>,
+    );
+
+    expect(screen.getByText("24 giờ")).toBeInTheDocument();
+  });
+
+  it("works in controlled mode", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(
+      <AppProvider persist={false} defaultLocale="en">
+        <TimeFormatPicker value="24h" onChange={onChange} />
+      </AppProvider>,
+    );
+    await user.click(screen.getByRole("combobox", { name: "Time format" }));
+    await user.click(screen.getByRole("option", { name: "12-hour (AM/PM)" }));
+
+    expect(onChange).toHaveBeenCalledWith("12h");
+  });
+});

package/src/components/navigation/__tests__/dropdown-menu.test.tsx

@@ -0,0 +1,104 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderWithUi, screen, userEvent } from "@/test/render";
+import { Button } from "../../general/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "../dropdown-menu";
+
+describe("DropdownMenu", () => {
+  it("invokes menu item onSelect", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    renderWithUi(
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button type="button">Actions</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem onSelect={onSelect}>Xuất CSV</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole("button", { name: "Actions" }));
+    const item = screen.getByRole("menuitem", { name: "Xuất CSV" });
+    expect(item).toHaveAttribute("data-slot", "dropdown-menu-item");
+    await user.click(item);
+    expect(onSelect).toHaveBeenCalled();
+  });
+
+  it("renders label and separator", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button type="button">Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Hành động</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Sửa</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole("button", { name: "Menu" }));
+    expect(screen.getByText("Hành động")).toHaveAttribute("data-slot", "dropdown-menu-label");
+    expect(screen.getByRole("menuitem", { name: "Sửa" })).toBeInTheDocument();
+  });
+
+  it("closes after selecting an item", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button type="button">Actions</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Xóa</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole("button", { name: "Actions" }));
+    await user.click(screen.getByRole("menuitem", { name: "Xóa" }));
+    expect(screen.queryByRole("menuitem", { name: "Xóa" })).not.toBeInTheDocument();
+  });
+
+  it("renders checkbox, radio, and shortcut slots", async () => {
+    const user = userEvent.setup();
+    renderWithUi(
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button type="button">Advanced</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuCheckboxItem checked>Notify</DropdownMenuCheckboxItem>
+          <DropdownMenuRadioGroup value="air">
+            <DropdownMenuRadioItem value="air">Air</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+          <DropdownMenuItem>
+            Export
+            <DropdownMenuShortcut>Ctrl+E</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole("button", { name: "Advanced" }));
+    expect(screen.getByRole("menuitemcheckbox", { name: "Notify" })).toHaveAttribute(
+      "data-slot",
+      "dropdown-menu-checkbox-item",
+    );
+    expect(screen.getByRole("menuitemradio", { name: "Air" })).toHaveAttribute(
+      "data-slot",
+      "dropdown-menu-radio-item",
+    );
+    expect(screen.getByText("Ctrl+E")).toHaveAttribute("data-slot", "dropdown-menu-shortcut");
+  });
+});