@godxjp/ui 5.0.2 → 6.0.0

package/src/i18n/messages/ja.json

@@ -0,0 +1,171 @@
+{
+  "common": {
+    "cancel": "キャンセル",
+    "continue": "続行",
+    "delete": "削除",
+    "error": "エラーが発生しました",
+    "working": "処理中…",
+    "retry": "再試行",
+    "search": "検索",
+    "clearSearch": "検索をクリア",
+    "clearFilters": "フィルターをクリア",
+    "first": "最初",
+    "next": "次へ →",
+    "selectedCount": "{count} 件選択",
+    "typeToConfirm": "確認のため {phrase} と入力"
+  },
+  "dataEntry": {
+    "datePicker": {
+      "placeholder": "日付を選択"
+    },
+    "dateRangePicker": {
+      "placeholder": "期間を選択"
+    },
+    "timePicker": {
+      "placeholder": "時刻を選択",
+      "hour": "時",
+      "minute": "分",
+      "typeLabel": "HH:mm を入力"
+    },
+    "searchInput": {
+      "placeholder": "検索…"
+    },
+    "autocomplete": {
+      "placeholder": "検索または選択…",
+      "empty": "結果が見つかりません"
+    },
+    "colorPicker": {
+      "ariaLabel": "色を選択"
+    },
+    "upload": {
+      "dropzoneLabel": "ファイルをアップロード",
+      "dropzoneHint": "ここにドラッグ＆ドロップ、またはクリックして選択",
+      "dropzoneMeta": "一時ストレージに保存 — フォーム保存時に promote",
+      "buttonLabel": "ファイルを選択",
+      "addImage": "画像を追加",
+      "uploading": "アップロード中…",
+      "pendingReplace": "新しい画像",
+      "pendingReplaceHint": "新しい画像を保留中 — 保存で反映",
+      "avatarLabel": "プロフィール写真",
+      "change": "変更",
+      "removeAvatar": "写真を削除",
+      "markedForDelete": "保存時に写真が削除されます",
+      "undo": "元に戻す",
+      "cropTitle": "写真を切り抜き",
+      "cropZoom": "ズーム",
+      "cropConfirm": "この写真を使用"
+    },
+    "cascader": {
+      "placeholder": "選択…",
+      "searchPlaceholder": "検索…",
+      "empty": "結果なし"
+    },
+    "treeSelect": {
+      "placeholder": "選択…",
+      "searchPlaceholder": "検索…",
+      "empty": "データなし",
+      "expand": "展開",
+      "collapse": "折りたたむ"
+    },
+    "transfer": {
+      "source": "ソース",
+      "target": "ターゲット",
+      "searchPlaceholder": "検索…",
+      "empty": "データなし",
+      "moveRight": "ターゲットへ移動",
+      "moveLeft": "ソースへ戻す"
+    }
+  },
+  "feedback": {
+    "errorPanel": {
+      "title": "このセクションを読み込めませんでした"
+    },
+    "genericError": "問題が発生しました。もう一度お試しください。"
+  },
+  "navigation": {
+    "localePicker": {
+      "ariaLabel": "言語"
+    },
+    "timezonePicker": {
+      "ariaLabel": "タイムゾーン"
+    },
+    "timeFormatPicker": {
+      "ariaLabel": "時刻形式"
+    },
+    "dateFormatPicker": {
+      "ariaLabel": "日付形式"
+    },
+    "pagination": {
+      "ariaLabel": "ページネーション",
+      "prev": "前のページ",
+      "next": "次のページ",
+      "page": "ページ {page}",
+      "pageSize": "ページサイズ",
+      "pageSizeOption": "{size} / ページ",
+      "total": "全 {total} 件"
+    }
+  },
+  "locale": {
+    "vi": "Tiếng Việt",
+    "en": "English",
+    "ja": "日本語"
+  },
+  "timeFormat": {
+    "24h": "24時間",
+    "12h": "12時間 (午前/午後)"
+  },
+  "dateFormat": {
+    "iso": "YYYY-MM-DD（年-月-日）",
+    "dmy": "日/月/年",
+    "mdy": "月/日/年"
+  },
+  "timezone": {
+    "Asia/Ho_Chi_Minh": "ベトナム（ホーチミン）",
+    "Asia/Tokyo": "日本（東京）",
+    "Asia/Bangkok": "タイ（バンコク）",
+    "Asia/Singapore": "シンガポール",
+    "Asia/Seoul": "韓国（ソウル）",
+    "Asia/Shanghai": "中国（上海）",
+    "Asia/Taipei": "台湾（台北）",
+    "Asia/Hong_Kong": "香港",
+    "UTC": "UTC",
+    "Europe/London": "英国（ロンドン）",
+    "America/Los_Angeles": "米国（ロサンゼルス）",
+    "America/New_York": "米国（ニューヨーク）"
+  },
+  "dataTable": {
+    "selectAll": "すべての行を選択",
+    "selectRow": "行 {id} を選択",
+    "bulkActions": "一括操作",
+    "densityCompact": "コンパクト",
+    "densityComfortable": "快適",
+    "densitySwitch": "{density} 表示に切り替え",
+    "rowActions": "行の操作"
+  },
+  "status": {
+    "active": "有効",
+    "completed": "完了",
+    "delivered": "配達済み",
+    "done": "完了",
+    "permanent": "永久",
+    "succeeded": "成功",
+    "draft": "下書き",
+    "pending": "保留",
+    "scheduled": "予定",
+    "sending": "送信中",
+    "temporary": "一時",
+    "bounced": "バウンス",
+    "cancelled": "キャンセル",
+    "deleted": "削除済み",
+    "failed": "失敗",
+    "private": "非公開",
+    "internal": "内部",
+    "public": "公開",
+    "ASSIGNMENT_STATUS_ACTIVE": "有効",
+    "ASSIGNMENT_STATUS_SUSPENDED": "停止",
+    "ASSIGNMENT_STATUS_TERMINATED": "終了"
+  },
+  "query": {
+    "loadMore": "さらに読み込む"
+  }
+}

package/src/i18n/messages/vi.json

@@ -0,0 +1,171 @@
+{
+  "common": {
+    "cancel": "Hủy",
+    "continue": "Tiếp tục",
+    "delete": "Xóa",
+    "error": "Đã xảy ra lỗi",
+    "working": "Đang xử lý…",
+    "retry": "Thử lại",
+    "search": "Tìm kiếm",
+    "clearSearch": "Xóa tìm kiếm",
+    "clearFilters": "Xóa bộ lọc",
+    "first": "Đầu",
+    "next": "Tiếp →",
+    "selectedCount": "{count} đã chọn",
+    "typeToConfirm": "Nhập {phrase} để xác nhận"
+  },
+  "dataEntry": {
+    "datePicker": {
+      "placeholder": "Chọn ngày"
+    },
+    "dateRangePicker": {
+      "placeholder": "Chọn khoảng ngày"
+    },
+    "timePicker": {
+      "placeholder": "Chọn giờ",
+      "hour": "Giờ",
+      "minute": "Phút",
+      "typeLabel": "Nhập giờ HH:mm"
+    },
+    "searchInput": {
+      "placeholder": "Tìm kiếm…"
+    },
+    "autocomplete": {
+      "placeholder": "Tìm hoặc chọn…",
+      "empty": "Không tìm thấy kết quả"
+    },
+    "colorPicker": {
+      "ariaLabel": "Chọn màu"
+    },
+    "upload": {
+      "dropzoneLabel": "Tải file lên",
+      "dropzoneHint": "Kéo thả file vào đây, hoặc bấm để chọn",
+      "dropzoneMeta": "Upload vào temp — promote khi lưu form",
+      "buttonLabel": "Chọn file",
+      "addImage": "Thêm ảnh",
+      "uploading": "Đang tải lên…",
+      "pendingReplace": "Ảnh mới",
+      "pendingReplaceHint": "Ảnh mới đang chờ — lưu form để áp dụng",
+      "avatarLabel": "Ảnh đại diện",
+      "change": "Đổi",
+      "removeAvatar": "Xóa ảnh",
+      "markedForDelete": "Ảnh sẽ bị xóa khi bạn lưu",
+      "undo": "Hoàn tác",
+      "cropTitle": "Cắt ảnh",
+      "cropZoom": "Thu phóng",
+      "cropConfirm": "Dùng ảnh này"
+    },
+    "cascader": {
+      "placeholder": "Chọn…",
+      "searchPlaceholder": "Tìm kiếm…",
+      "empty": "Không có kết quả"
+    },
+    "treeSelect": {
+      "placeholder": "Chọn…",
+      "searchPlaceholder": "Tìm kiếm…",
+      "empty": "Không có dữ liệu",
+      "expand": "Mở rộng",
+      "collapse": "Thu gọn"
+    },
+    "transfer": {
+      "source": "Nguồn",
+      "target": "Đích",
+      "searchPlaceholder": "Tìm kiếm…",
+      "empty": "Không có dữ liệu",
+      "moveRight": "Chuyển sang đích",
+      "moveLeft": "Chuyển về nguồn"
+    }
+  },
+  "feedback": {
+    "errorPanel": {
+      "title": "Không tải được nội dung này"
+    },
+    "genericError": "Đã xảy ra lỗi. Vui lòng thử lại."
+  },
+  "navigation": {
+    "localePicker": {
+      "ariaLabel": "Ngôn ngữ"
+    },
+    "timezonePicker": {
+      "ariaLabel": "Múi giờ"
+    },
+    "timeFormatPicker": {
+      "ariaLabel": "Định dạng giờ"
+    },
+    "dateFormatPicker": {
+      "ariaLabel": "Định dạng ngày"
+    },
+    "pagination": {
+      "ariaLabel": "Phân trang",
+      "prev": "Trang trước",
+      "next": "Trang sau",
+      "page": "Trang {page}",
+      "pageSize": "Số dòng mỗi trang",
+      "pageSizeOption": "{size} / trang",
+      "total": "Tổng {total} mục"
+    }
+  },
+  "locale": {
+    "vi": "Tiếng Việt",
+    "en": "English",
+    "ja": "日本語"
+  },
+  "timeFormat": {
+    "24h": "24 giờ",
+    "12h": "12 giờ (SA/CH)"
+  },
+  "dateFormat": {
+    "iso": "ISO (yyyy-MM-dd)",
+    "dmy": "Ngày / Tháng / Năm",
+    "mdy": "Tháng / Ngày / Năm"
+  },
+  "timezone": {
+    "Asia/Ho_Chi_Minh": "Việt Nam (HCM)",
+    "Asia/Tokyo": "Nhật Bản (Tokyo)",
+    "Asia/Bangkok": "Thái Lan (Bangkok)",
+    "Asia/Singapore": "Singapore",
+    "Asia/Seoul": "Hàn Quốc (Seoul)",
+    "Asia/Shanghai": "Trung Quốc (Shanghai)",
+    "Asia/Taipei": "Đài Loan (Taipei)",
+    "Asia/Hong_Kong": "Hồng Kông",
+    "UTC": "UTC",
+    "Europe/London": "Anh (London)",
+    "America/Los_Angeles": "Mỹ (Los Angeles)",
+    "America/New_York": "Mỹ (New York)"
+  },
+  "dataTable": {
+    "selectAll": "Chọn tất cả các dòng",
+    "selectRow": "Chọn dòng {id}",
+    "bulkActions": "Thao tác hàng loạt",
+    "densityCompact": "Gọn",
+    "densityComfortable": "Thoải mái",
+    "densitySwitch": "Chuyển sang mật độ {density}",
+    "rowActions": "Thao tác dòng"
+  },
+  "status": {
+    "active": "Đang hoạt động",
+    "completed": "Hoàn thành",
+    "delivered": "Đã giao",
+    "done": "Xong",
+    "permanent": "Vĩnh viễn",
+    "succeeded": "Thành công",
+    "draft": "Nháp",
+    "pending": "Chờ xử lý",
+    "scheduled": "Đã lên lịch",
+    "sending": "Đang gửi",
+    "temporary": "Tạm thời",
+    "bounced": "Bị trả lại",
+    "cancelled": "Đã hủy",
+    "deleted": "Đã xóa",
+    "failed": "Thất bại",
+    "private": "Riêng tư",
+    "internal": "Nội bộ",
+    "public": "Công khai",
+    "ASSIGNMENT_STATUS_ACTIVE": "Đang hoạt động",
+    "ASSIGNMENT_STATUS_SUSPENDED": "Tạm ngưng",
+    "ASSIGNMENT_STATUS_TERMINATED": "Chấm dứt"
+  },
+  "query": {
+    "loadMore": "Tải thêm"
+  }
+}

package/src/i18n/translate.ts

@@ -0,0 +1,74 @@
+import type { AppLocale } from "../app/types";
+import en from "./messages/en.json";
+import ja from "./messages/ja.json";
+import vi from "./messages/vi.json";
+
+export type Messages = typeof vi;
+
+export const MESSAGE_CATALOG: Record<AppLocale, Messages> = {
+  vi,
+  en,
+  ja,
+};
+
+export type MessageKey = string;
+
+export type TranslateParams = Record<string, string | number>;
+
+function getNested(obj: Record<string, unknown>, path: string): string | undefined {
+  const parts = path.split(".");
+  let current: unknown = obj;
+  for (const part of parts) {
+    if (current == null || typeof current !== "object") return undefined;
+    current = (current as Record<string, unknown>)[part];
+  }
+  return typeof current === "string" ? current : undefined;
+}
+
+function interpolate(template: string, params?: TranslateParams): string {
+  if (!params) return template;
+  return Object.entries(params).reduce(
+    (text, [key, value]) => text.replaceAll(`{${key}}`, String(value)),
+    template,
+  );
+}
+
+/** Resolve a dot-path message with fallback locale chain. */
+export function translate(
+  locale: AppLocale,
+  fallbackLocale: AppLocale,
+  key: MessageKey,
+  params?: TranslateParams,
+): string {
+  const primary = getNested(MESSAGE_CATALOG[locale], key);
+  const fallback = getNested(MESSAGE_CATALOG[fallbackLocale], key);
+  const text = primary ?? fallback ?? key;
+  return interpolate(text, params);
+}
+
+/** Non-React translate using module-synced locale (see `syncI18nLocale`). */
+export function translateCurrent(key: MessageKey, params?: TranslateParams): string {
+  return translate(getSyncedLocale(), getSyncedFallbackLocale(), key, params);
+}
+
+let syncedLocale: AppLocale = "vi";
+let syncedFallbackLocale: AppLocale = "en";
+
+export function syncI18nLocale(locale: AppLocale, fallbackLocale: AppLocale): void {
+  syncedLocale = locale;
+  syncedFallbackLocale = fallbackLocale;
+}
+
+export function getSyncedLocale(): AppLocale {
+  return syncedLocale;
+}
+
+export function getSyncedFallbackLocale(): AppLocale {
+  return syncedFallbackLocale;
+}
+
+/** Reset for tests. */
+export function resetI18nLocale(): void {
+  syncedLocale = "vi";
+  syncedFallbackLocale = "en";
+}

package/src/i18n/use-translation.ts

@@ -0,0 +1,53 @@
+import type { DayPickerProps } from "react-day-picker";
+import { useMemo } from "react";
+import { useOptionalAppContext } from "../app/app-provider";
+import { getDateFnsLocale, getDayPickerLocale } from "../app/locales";
+import type { AppLocale } from "../app/types";
+import { translate, type MessageKey, type TranslateParams } from "./translate";
+
+const DEFAULT_LOCALE: AppLocale = "vi";
+const DEFAULT_FALLBACK: AppLocale = "en";
+
+type DayPickerLocale = NonNullable<DayPickerProps["locale"]>;
+
+export function useTranslation() {
+  const ctx = useOptionalAppContext();
+  const locale = ctx?.locale ?? DEFAULT_LOCALE;
+  const fallbackLocale = ctx?.fallbackLocale ?? DEFAULT_FALLBACK;
+
+  return useMemo(
+    () => ({
+      locale,
+      fallbackLocale,
+      t: (key: MessageKey, params?: TranslateParams) =>
+        translate(locale, fallbackLocale, key, params),
+    }),
+    [locale, fallbackLocale],
+  );
+}
+
+/** date-fns + react-day-picker locales + datetime prefs from AppProvider. */
+export function usePickerLocales(dayPickerOverride?: DayPickerLocale) {
+  const ctx = useOptionalAppContext();
+  const locale = ctx?.locale ?? DEFAULT_LOCALE;
+
+  return useMemo(
+    () => ({
+      locale,
+      timezone: ctx?.timezone ?? "Asia/Ho_Chi_Minh",
+      timeFormat: ctx?.timeFormat ?? "24h",
+      dateFormat: ctx?.dateFormat ?? "dmy",
+      dateFnsLocale: ctx?.dateFnsLocale ?? getDateFnsLocale(locale),
+      dayPickerLocale: dayPickerOverride ?? ctx?.dayPickerLocale ?? getDayPickerLocale(locale),
+    }),
+    [
+      ctx?.dateFnsLocale,
+      ctx?.dayPickerLocale,
+      ctx?.timeFormat,
+      ctx?.dateFormat,
+      ctx?.timezone,
+      dayPickerOverride,
+      locale,
+    ],
+  );
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./components/admin";
+export * from "./form";
+export { cn } from "./lib/utils";

package/src/lib/__tests__/control-styles.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it } from "vitest";
+import {
+  controlFieldClass,
+  controlIconClass,
+  controlIconSmClass,
+  controlMultilineClass,
+  controlTriggerClass,
+  tableCellPaddingClass,
+  tableHeadHeightClass,
+  tableRowHeightClass,
+  toneDestructiveClass,
+  toneInfoClass,
+  toneNeutralClass,
+  toneSuccessClass,
+  toneWarningClass,
+} from "../control-styles";
+
+describe("control-styles (token wiring)", () => {
+  describe("form controls", () => {
+    it("controlFieldClass uses ui-control + ring token", () => {
+      expect(controlFieldClass).toContain("ui-control");
+      expect(controlFieldClass).toContain("border-input");
+      expect(controlFieldClass).toContain("focus-visible:ring-ring");
+    });
+
+    it("controlMultilineClass uses ui-control-multiline", () => {
+      expect(controlMultilineClass).toContain("ui-control-multiline");
+      expect(controlMultilineClass).toContain("border-input");
+    });
+
+    it("controlTriggerClass uses ui-control flex layout", () => {
+      expect(controlTriggerClass).toContain("ui-control");
+      expect(controlTriggerClass).toContain("flex");
+      expect(controlTriggerClass).toContain("items-center");
+      expect(controlTriggerClass).not.toMatch(/\bh-9\b/);
+    });
+  });
+
+  describe("density-aware sizing", () => {
+    it("icon classes reference --control-height", () => {
+      expect(controlIconClass).toContain("var(--control-height)");
+      expect(controlIconSmClass).toContain("var(--control-height)");
+    });
+
+    it("table classes reference density row/cell tokens", () => {
+      expect(tableRowHeightClass).toContain("var(--table-row-height)");
+      expect(tableHeadHeightClass).toContain("var(--table-row-height)");
+      expect(tableCellPaddingClass).toContain("var(--table-cell-padding-y)");
+    });
+  });
+
+  describe("semantic tone classes (no raw palette)", () => {
+    const tones = {
+      success: toneSuccessClass,
+      warning: toneWarningClass,
+      info: toneInfoClass,
+      destructive: toneDestructiveClass,
+      neutral: toneNeutralClass,
+    };
+
+    it.each(Object.entries(tones))("tone %s avoids raw Tailwind palette", (_name, cls) => {
+      expect(cls).not.toMatch(/green-|blue-|amber-|red-|slate-/);
+      expect(cls.length).toBeGreaterThan(10);
+    });
+
+    it("success tone uses success token", () => {
+      expect(toneSuccessClass).toContain("success");
+    });
+
+    it("info tone uses info token", () => {
+      expect(toneInfoClass).toContain("info");
+    });
+
+    it("warning tone uses warning token", () => {
+      expect(toneWarningClass).toContain("warning");
+    });
+  });
+});

package/src/lib/__tests__/datetime.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it, beforeEach } from "vitest";
+import { getDateFnsLocale } from "../../app/locales";
+import {
+  formatAppDateTime,
+  formatCalendarDate,
+  formatTimeOfDay,
+  normalizeHhmm,
+  resetDatetimeContextForTests,
+  syncDatetimeContext,
+} from "../datetime";
+
+describe("datetime (timezone-aware)", () => {
+  beforeEach(() => {
+    resetDatetimeContextForTests();
+  });
+
+  it("formatAppDateTime shifts instant by timezone", () => {
+    syncDatetimeContext({
+      locale: "en",
+      timezone: "Asia/Ho_Chi_Minh",
+      timeFormat: "24h",
+      dateFormat: "iso",
+      dateFnsLocale: getDateFnsLocale("en"),
+    });
+    // 2026-05-01T14:30:00Z → 21:30 in Ho Chi Minh (UTC+7)
+    expect(formatAppDateTime("2026-05-01T14:30:00Z")).toMatch(/2026-05-01 21:30/);
+  });
+
+  it("formatAppDateTime differs across timezones", () => {
+    const iso = "2026-05-01T14:30:00Z";
+    syncDatetimeContext({
+      locale: "en",
+      timezone: "Asia/Tokyo",
+      timeFormat: "24h",
+      dateFormat: "iso",
+      dateFnsLocale: getDateFnsLocale("en"),
+    });
+    expect(formatAppDateTime(iso)).toMatch(/2026-05-01 23:30/);
+
+    syncDatetimeContext({
+      locale: "en",
+      timezone: "Asia/Ho_Chi_Minh",
+      timeFormat: "24h",
+      dateFormat: "iso",
+      dateFnsLocale: getDateFnsLocale("en"),
+    });
+    expect(formatAppDateTime(iso)).toMatch(/2026-05-01 21:30/);
+  });
+
+  it("formatCalendarDate uses calendar parts in app timezone", () => {
+    syncDatetimeContext({
+      locale: "vi",
+      timezone: "Asia/Tokyo",
+      timeFormat: "24h",
+      dateFormat: "iso",
+      dateFnsLocale: getDateFnsLocale("vi"),
+    });
+    const picked = new Date(2026, 4, 2); // May 2 local — treated as calendar date
+    expect(formatCalendarDate(picked)).toBe("2026-05-02");
+  });
+
+  it("formatTimeOfDay respects 12h format", () => {
+    syncDatetimeContext({
+      locale: "en",
+      timezone: "Asia/Ho_Chi_Minh",
+      timeFormat: "12h",
+      dateFormat: "iso",
+      dateFnsLocale: getDateFnsLocale("en"),
+    });
+    expect(formatTimeOfDay("14:30")).toMatch(/2:30 PM/);
+  });
+
+  it("normalizeHhmm pads single-digit hours", () => {
+    expect(normalizeHhmm("9:30")).toBe("09:30");
+    expect(normalizeHhmm("25:00")).toBeNull();
+  });
+});