@godxjp/ui 6.0.0 → 6.0.1

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

@@ -1,57 +0,0 @@
-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

@@ -1,81 +0,0 @@
-/** 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

@@ -1,16 +0,0 @@
-/** 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

@@ -1,14 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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");
-  });
-});