@godxjp/ui 5.0.2 → 6.0.0

package/src/components/data-display/empty-state.tsx

@@ -0,0 +1,22 @@
+import { cn } from "../../lib/utils";
+import type { EmptyStateProp } from "../../props/components/data-display.prop";
+
+export type {
+  EmptyStateProp,
+  EmptyStateProp as EmptyStateProps,
+} from "../../props/components/data-display.prop";
+
+export function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProp) {
+  return (
+    <div data-slot="empty-state" className={cn("ui-empty-state", className)}>
+      {Icon && (
+        <div className="ui-empty-state-icon">
+          <Icon className="text-muted-foreground size-6" aria-hidden="true" />
+        </div>
+      )}
+      <h3 className="ui-empty-state-title">{title}</h3>
+      {description && <p className="ui-empty-state-description">{description}</p>}
+      {action && <div>{action}</div>}
+    </div>
+  );
+}

package/src/components/data-display/index.ts

@@ -0,0 +1,41 @@
+export { Badge } from "./badge";
+export type { BadgeProps } from "./badge";
+export {
+  Card,
+  CardContent,
+  CardCover,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CardAction,
+  CardStat,
+} from "./card";
+export type { CardStatProps } from "./card";
+export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
+export { KeyValueGrid } from "./key-value-grid";
+export { StatusBadge } from "./status-badge";
+export { DataTable } from "./data-table";
+export type { ColumnDef, Density as TableDensity } from "./data-table";
+export { EmptyState } from "./empty-state";
+export { CodeBadge } from "./code-badge";
+export type { CodeBadgeKind, CodeBadgeProps } from "./code-badge";
+export { ProgressMeter } from "./progress-meter";
+export type { ProgressMeterProps, ProgressMeterTone } from "./progress-meter";
+export { TreeList } from "./tree-list";
+export type { TreeListItem, TreeListProps } from "./tree-list";
+export { Timeline } from "./timeline";
+export type { TimelineItem, TimelineProps } from "./timeline";
+export { ScanPanel } from "./scan-panel";
+export type { ScanPanelProps } from "./scan-panel";
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "./popover";
+export { ScrollArea, ScrollBar } from "./scroll-area";
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./collapsible";

package/src/components/data-display/key-value-grid.tsx

@@ -0,0 +1,46 @@
+// KeyValueGrid — for detail-page metadata. Replaces hand-rolled <dl><dt><dd> layouts.
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+interface KeyValueGridProps {
+  columns?: 1 | 2 | 3;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function KeyValueGrid({ columns = 2, className, children }: KeyValueGridProps) {
+  const colsClass =
+    columns === 1
+      ? "grid-cols-1"
+      : columns === 3
+        ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+        : "grid-cols-1 sm:grid-cols-2";
+  return <dl className={cn("grid gap-x-6 gap-y-3", colsClass, className)}>{children}</dl>;
+}
+
+interface KeyValueGridItemProps {
+  label: React.ReactNode;
+  /** Use mono spacing for IDs, paths, JSON. */
+  mono?: boolean;
+  /** Span full row(s) when value is long. */
+  span?: 2 | 3;
+  className?: string;
+  children: React.ReactNode;
+}
+
+KeyValueGrid.Item = function KeyValueGridItem({
+  label,
+  mono,
+  span,
+  className,
+  children,
+}: KeyValueGridItemProps) {
+  const spanClass = span === 2 ? "sm:col-span-2" : span === 3 ? "sm:col-span-2 lg:col-span-3" : "";
+  return (
+    <div className={cn(spanClass, className)}>
+      <dt className="text-muted-foreground text-xs">{label}</dt>
+      <dd className={cn("text-sm break-all", mono && "font-mono")}>{children}</dd>
+    </div>
+  );
+};

package/src/components/data-display/popover.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../../lib/utils";
+
+export function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+export function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+export function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export const PopoverContent = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      data-slot="popover-content"
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-popover text-popover-foreground z-50 w-72 origin-[var(--radix-popover-content-transform-origin)] rounded-md border p-4 shadow-md outline-none",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export const PopoverHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    data-slot="popover-header"
+    className={cn("flex flex-col gap-1 text-sm", className)}
+    {...props}
+  />
+);
+
+export const PopoverTitle = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div data-slot="popover-title" className={cn("font-medium", className)} {...props} />
+);
+
+export const PopoverDescription = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) => (
+  <p
+    data-slot="popover-description"
+    className={cn("text-muted-foreground", className)}
+    {...props}
+  />
+);

package/src/components/data-display/progress-meter.tsx

@@ -0,0 +1,20 @@
+export type ProgressMeterTone = "success" | "warning";
+
+export type ProgressMeterProps = {
+  value: number;
+  label?: string;
+  tone?: ProgressMeterTone;
+};
+
+export function ProgressMeter({ value, label, tone = "success" }: ProgressMeterProps) {
+  const boundedValue = Math.max(0, Math.min(100, value));
+
+  return (
+    <div className="ui-progress-meter" data-tone={tone}>
+      <div className="ui-progress-track">
+        <div className="ui-progress-bar" style={{ width: `${boundedValue}%` }} />
+      </div>
+      {label ? <div className="ui-progress-label">{label}</div> : null}
+    </div>
+  );
+}

package/src/components/data-display/scan-panel.tsx

@@ -0,0 +1,16 @@
+import { ScanLine } from "lucide-react";
+
+export type ScanPanelProps = {
+  title: string;
+  description?: string;
+};
+
+export function ScanPanel({ title, description }: ScanPanelProps) {
+  return (
+    <div className="ui-scan-panel">
+      <ScanLine aria-hidden="true" />
+      <div className="ui-scan-title">{title}</div>
+      {description ? <div className="ui-scan-description">{description}</div> : null}
+    </div>
+  );
+}

package/src/components/data-display/scroll-area.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "../../lib/utils";
+
+export const ScrollArea = React.forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+export const ScrollBar = React.forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none transition-colors select-none",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

package/src/components/data-display/status-badge.tsx

@@ -0,0 +1,83 @@
+// StatusBadge — globally consistent status display. Adding a new status:
+// extend STATUS_MAP below + add key to i18n JSON (`status.*`), never inline `<Badge>`.
+import * as React from "react";
+import {
+  AlertCircle,
+  CheckCircle2,
+  Circle,
+  Clock,
+  type LucideIcon,
+  Pause,
+  Play,
+  Trash2,
+  XCircle,
+} from "lucide-react";
+
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import {
+  toneDestructiveClass,
+  toneInfoClass,
+  toneNeutralClass,
+  toneSuccessClass,
+  toneWarningClass,
+} from "../../lib/control-styles";
+
+type Tone = "success" | "warning" | "destructive" | "info" | "neutral";
+
+interface StatusDef {
+  tone: Tone;
+  icon: LucideIcon;
+}
+
+const STATUS_MAP: Record<string, StatusDef> = {
+  active: { tone: "success", icon: CheckCircle2 },
+  completed: { tone: "success", icon: CheckCircle2 },
+  delivered: { tone: "success", icon: CheckCircle2 },
+  done: { tone: "success", icon: CheckCircle2 },
+  permanent: { tone: "success", icon: CheckCircle2 },
+  succeeded: { tone: "success", icon: CheckCircle2 },
+  draft: { tone: "neutral", icon: Circle },
+  pending: { tone: "warning", icon: Clock },
+  scheduled: { tone: "info", icon: Clock },
+  sending: { tone: "info", icon: Play },
+  temporary: { tone: "warning", icon: Clock },
+  bounced: { tone: "destructive", icon: AlertCircle },
+  cancelled: { tone: "neutral", icon: Pause },
+  deleted: { tone: "destructive", icon: Trash2 },
+  failed: { tone: "destructive", icon: XCircle },
+  private: { tone: "neutral", icon: Circle },
+  internal: { tone: "info", icon: Circle },
+  public: { tone: "info", icon: Circle },
+  ASSIGNMENT_STATUS_ACTIVE: { tone: "success", icon: CheckCircle2 },
+  ASSIGNMENT_STATUS_SUSPENDED: { tone: "warning", icon: Pause },
+  ASSIGNMENT_STATUS_TERMINATED: { tone: "destructive", icon: XCircle },
+};
+
+const TONE_CLASSES: Record<Tone, string> = {
+  success: toneSuccessClass,
+  warning: toneWarningClass,
+  destructive: toneDestructiveClass,
+  info: toneInfoClass,
+  neutral: toneNeutralClass,
+};
+
+interface StatusBadgeProps {
+  status: string;
+  className?: string;
+  label?: React.ReactNode;
+}
+
+export function StatusBadge({ status, className, label: labelOverride }: StatusBadgeProps) {
+  const { t } = useTranslation();
+  const def = STATUS_MAP[status] ?? { tone: "neutral" as const, icon: Circle };
+  const Icon = def.icon;
+  const resolvedLabel = labelOverride ?? (status in STATUS_MAP ? t(`status.${status}`) : status);
+
+  return (
+    <span data-slot="status-badge" className={cn(TONE_CLASSES[def.tone], className)}>
+      <Icon data-slot="status-badge-icon" aria-hidden="true" />
+      <span>{resolvedLabel}</span>
+    </span>
+  );
+}

package/src/components/data-display/table.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { tableHeadHeightClass } from "../../lib/control-styles";
+import { cn } from "../../lib/utils";
+
+export const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  ),
+);
+Table.displayName = "Table";
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "ui-table-row hover:bg-accent/70 data-[state=selected]:bg-primary/[0.06] border-b transition-colors",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+export const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th ref={ref} data-slot="table-head" className={cn(tableHeadHeightClass, className)} {...props} />
+));
+TableHead.displayName = "TableHead";
+
+export const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td ref={ref} data-slot="table-cell" className={cn(className)} {...props} />
+));
+TableCell.displayName = "TableCell";

package/src/components/data-display/timeline.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { CheckCircle2, Plane } from "lucide-react";
+
+export type TimelineItem = {
+  title: ReactNode;
+  location?: ReactNode;
+  time?: ReactNode;
+  note?: ReactNode;
+  current?: boolean;
+};
+
+export type TimelineProps = {
+  items: TimelineItem[];
+};
+
+export function Timeline({ items }: TimelineProps) {
+  return (
+    <div className="ui-timeline">
+      {items.map((item, index) => {
+        const Icon = item.current ? Plane : CheckCircle2;
+        return (
+          <div className="ui-timeline-item" key={index}>
+            <div className="ui-timeline-rail">
+              <span className="ui-timeline-dot" data-current={item.current ? "true" : undefined}>
+                <Icon aria-hidden="true" />
+              </span>
+              {index !== items.length - 1 ? <span className="ui-timeline-line" /> : null}
+            </div>
+            <div className="ui-timeline-body">
+              <div className="ui-timeline-head">
+                <span className="ui-timeline-title">{item.title}</span>
+                {item.time ? <span className="ui-timeline-time">{item.time}</span> : null}
+              </div>
+              {item.location ? <div className="ui-timeline-location">{item.location}</div> : null}
+              {item.note ? <p className="ui-timeline-note">{item.note}</p> : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/data-display/tree-list.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { ChevronRight, Package } from "lucide-react";
+
+import { Badge } from "./badge";
+
+export type TreeListItem = {
+  id: string;
+  title: ReactNode;
+  description?: ReactNode;
+  depth?: number;
+  active?: boolean;
+  badge?: ReactNode;
+};
+
+export type TreeListProps = {
+  items: TreeListItem[];
+};
+
+export function TreeList({ items }: TreeListProps) {
+  return (
+    <div className="ui-tree-list">
+      {items.map((item) => (
+        <div
+          className="ui-tree-item"
+          data-active={item.active ? "true" : undefined}
+          data-depth={item.depth ?? 0}
+          key={item.id}
+        >
+          <ChevronRight aria-hidden="true" />
+          <Package aria-hidden="true" />
+          <div className="ui-tree-item-body">
+            <div className="ui-tree-item-title">{item.title}</div>
+            {item.description ? (
+              <div className="ui-tree-item-description">{item.description}</div>
+            ) : null}
+          </div>
+          {item.badge ? <Badge variant="secondary">{item.badge}</Badge> : null}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/data-entry/__fixtures__/tree-options.ts

@@ -0,0 +1,80 @@
+import type { TreeOptionProp } from "../../../props/components/data-entry.prop";
+
+/** Demo data - VN/JP region hierarchy for preview examples and tests. */
+export const REGION_OPTIONS: TreeOptionProp[] = [
+  {
+    value: "vn",
+    label: "Việt Nam",
+    children: [
+      {
+        value: "hcm",
+        label: "TP. Hồ Chí Minh",
+        children: [
+          { value: "q1", label: "Quận 1" },
+          { value: "q3", label: "Quận 3" },
+        ],
+      },
+      {
+        value: "hn",
+        label: "Hà Nội",
+        children: [
+          { value: "badinh", label: "Ba Đình" },
+          { value: "caugiay", label: "Cầu Giấy" },
+        ],
+      },
+    ],
+  },
+  {
+    value: "jp",
+    label: "日本",
+    children: [
+      {
+        value: "osaka",
+        label: "大阪府",
+        children: [
+          { value: "chuo", label: "中央区" },
+          { value: "kita", label: "北区" },
+        ],
+      },
+      {
+        value: "tokyo",
+        label: "東京都",
+        children: [
+          { value: "shinjuku", label: "新宿区" },
+          { value: "shibuya", label: "渋谷区" },
+        ],
+      },
+    ],
+  },
+];
+
+export const ORG_TREE: TreeOptionProp[] = [
+  {
+    value: "godx",
+    label: "GODX",
+    children: [
+      {
+        value: "logistics",
+        label: "Logistics",
+        children: [
+          { value: "warehouse-osaka", label: "Kho Osaka" },
+          { value: "warehouse-hcm", label: "Kho HCM" },
+        ],
+      },
+      {
+        value: "platform",
+        label: "Platform",
+        children: [
+          { value: "identity", label: "Identity" },
+          { value: "media", label: "Media" },
+        ],
+      },
+    ],
+  },
+];
+
+export const TRANSFER_MOCK = Array.from({ length: 12 }, (_, i) => ({
+  key: `user-${i + 1}`,
+  title: `NV-${String(i + 1).padStart(3, "0")}`,
+  description: i % 3 === 0 ? "Kho Osaka" : "Kho HCM",
+}));