@godxjp/ui 2.2.0 → 5.0.1

package/dist/hooks.js

@@ -1,91 +1,152 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useSyncExternalStore, useMemo } from 'react';
 import i18next from 'i18next';
 import 'i18next-browser-languagedetector';
 import 'react-i18next';
 
-var FORGE_LOCALE_STORAGE_KEY = "forge.locale";
-var i18n_default = i18next;
+// src/hooks/useTweaks.ts
+
+// src/preferences/holder.ts
+var DEFAULT = {
+  locale: "ja",
+  timezone: "Asia/Tokyo"
+};
+var CURRENT = { ...DEFAULT };
+var subscribers = /* @__PURE__ */ new Set();
+function getGodxConfig() {
+  return CURRENT;
+}
+function subscribeGodxConfig(fn) {
+  subscribers.add(fn);
+  return () => {
+    subscribers.delete(fn);
+  };
+}
 
-// src/data/products.ts
-var PRODUCTS = [
-  {
-    id: "restaurant",
-    name: "godx-restaurant",
-    tenant: "restaurant",
-    role: "\u30EC\u30B9\u30C8\u30E9\u30F3\u7BA1\u7406",
-    desc: "\u5E97\u8217\u5411\u3051\u7D71\u5408\u7BA1\u7406\u30D7\u30E9\u30C3\u30C8\u30D5\u30A9\u30FC\u30E0",
-    color: "oklch(58% 0.18 25)",
-    owner: "Satoshi F",
-    devs: 6,
-    projects: [
-      { id: "api", name: "restaurant-api", stack: "NestJS \xB7 PostgreSQL", kind: "service", devs: 3, status: "active", branch: "main", lastCommit: "12\u5206\u524D", openIssues: 8, prs: 2, sandbox: true },
-      { id: "admin", name: "restaurant-admin", stack: "Next.js 14 \xB7 React", kind: "web", devs: 2, status: "active", branch: "main", lastCommit: "1\u6642\u9593\u524D", openIssues: 5, prs: 1, sandbox: true },
-      { id: "pos", name: "restaurant-pos", stack: "Tauri \xB7 Vue 3", kind: "desktop", devs: 1, status: "active", branch: "feature/print", lastCommit: "30\u5206\u524D", openIssues: 3, prs: 1, sandbox: true },
-      { id: "kds", name: "restaurant-kds", stack: "React \xB7 Electron", kind: "workstation", devs: 1, status: "review", branch: "main", lastCommit: "\u6628\u65E5", openIssues: 2, prs: 1, sandbox: true },
-      { id: "kintai", name: "restaurant-kintai", stack: "Vue 3 \xB7 Laravel", kind: "service", devs: 2, status: "active", branch: "main", lastCommit: "5\u5206\u524D", openIssues: 4, prs: 0, sandbox: true },
-      { id: "mobile", name: "restaurant-mobile", stack: "React Native", kind: "mobile", devs: 1, status: "planning", branch: "develop", lastCommit: "3\u65E5\u524D", openIssues: 1, prs: 0, sandbox: false }
-    ]
-  },
-  {
-    id: "godx",
-    name: "godx-admin",
-    tenant: "godx",
-    role: "Platform admin",
-    desc: "GoDX Forge developer workspace",
-    color: "oklch(60% 0.137 163)",
-    owner: "Satoshi F",
-    devs: 4,
-    projects: [
-      { id: "frontend", name: "godx-admin-frontend", stack: "React \xB7 Vite", kind: "web", devs: 2, status: "active", branch: "master", lastCommit: "2\u6642\u9593\u524D", openIssues: 6, prs: 2, sandbox: true },
-      { id: "api", name: "godx-admin-api", stack: "Go \xB7 Gin", kind: "service", devs: 1, status: "active", branch: "master", lastCommit: "4\u6642\u9593\u524D", openIssues: 3, prs: 1, sandbox: true },
-      { id: "ui", name: "@godxjp/ui", stack: "TypeScript \xB7 React", kind: "library", devs: 2, status: "active", branch: "master", lastCommit: "1\u6642\u9593\u524D", openIssues: 2, prs: 0, sandbox: false }
-    ]
-  },
-  {
-    id: "kintai",
-    name: "dxs-kintai",
-    tenant: "kintai",
-    role: "HR / Attendance",
-    desc: "\u52E4\u6020\u7BA1\u7406\u30D7\u30E9\u30C3\u30C8\u30D5\u30A9\u30FC\u30E0",
-    color: "oklch(56% 0.15 240)",
-    owner: "Naoki N",
-    devs: 3,
-    projects: [
-      { id: "frontend", name: "kintai-web", stack: "Vue 3 \xB7 Vite", kind: "web", devs: 2, status: "active", branch: "main", lastCommit: "20\u5206\u524D", openIssues: 7, prs: 1, sandbox: true },
-      { id: "backend", name: "kintai-api", stack: "Laravel 11", kind: "service", devs: 1, status: "active", branch: "main", lastCommit: "1\u65E5\u524D", openIssues: 4, prs: 0, sandbox: true }
-    ]
-  },
-  {
-    id: "tempo",
-    name: "dxs-tempo",
-    tenant: "tempo",
-    role: "Shop / Inventory",
-    desc: "\u5E97\u8217\u30FB\u5728\u5EAB\u30D0\u30C3\u30AF\u30A8\u30F3\u30C9",
-    color: "oklch(48% 0.16 285)",
-    owner: "Naoki N",
-    devs: 2,
-    projects: [
-      { id: "api", name: "tempo-api", stack: "Go \xB7 Echo", kind: "service", devs: 2, status: "active", branch: "main", lastCommit: "5\u6642\u9593\u524D", openIssues: 9, prs: 1, sandbox: true },
-      { id: "ops", name: "tempo-ops", stack: "Terraform", kind: "infra", devs: 1, status: "planning", branch: "main", lastCommit: "1\u9031\u9593\u524D", openIssues: 1, prs: 0, sandbox: false }
-    ]
-  },
-  {
-    id: "betoya",
-    name: "betoya",
-    tenant: "betoya",
-    role: "Vietnamese restaurant",
-    desc: "\u30D9\u30C8\u5C4B Tenant",
-    color: "oklch(58% 0.159 150)",
-    owner: "Anh K",
-    devs: 1,
-    projects: [
-      { id: "site", name: "betoya-site", stack: "Astro", kind: "web", devs: 1, status: "active", branch: "main", lastCommit: "\u6628\u65E5", openIssues: 2, prs: 0, sandbox: false }
-    ]
+// src/i18n/format.ts
+function resolveLocale(opts) {
+  return opts?.locale ?? getGodxConfig().locale;
+}
+function resolveTimezone(opts) {
+  return opts?.timezone ?? getGodxConfig().timezone;
+}
+function toDate(value) {
+  if (value instanceof Date) return value;
+  if (typeof value === "number") return new Date(value);
+  if (typeof value === "string") return new Date(value);
+  if (typeof value === "object" && value !== null && "toDate" in value) {
+    const v = value;
+    return v.toDate(getGodxConfig().timezone);
   }
-];
+  throw new TypeError(`format helpers: unsupported value ${String(value)}`);
+}
+function extractIntlOpts(opts) {
+  if (!opts) return {};
+  const { locale: _l, timezone: _t, ...rest } = opts;
+  return rest;
+}
+function formatDate(value, opts) {
+  const locale = resolveLocale(opts);
+  const timezone = resolveTimezone(opts);
+  const intlOpts = {
+    dateStyle: "medium",
+    ...extractIntlOpts(opts),
+    timeZone: timezone
+  };
+  return new Intl.DateTimeFormat(locale, intlOpts).format(toDate(value));
+}
+function formatTime(value, opts) {
+  const locale = resolveLocale(opts);
+  const timezone = resolveTimezone(opts);
+  const intlOpts = {
+    timeStyle: "short",
+    ...extractIntlOpts(opts),
+    timeZone: timezone
+  };
+  return new Intl.DateTimeFormat(locale, intlOpts).format(toDate(value));
+}
+function formatDateTime(value, opts) {
+  const locale = resolveLocale(opts);
+  const timezone = resolveTimezone(opts);
+  const intlOpts = {
+    dateStyle: "medium",
+    timeStyle: "short",
+    ...extractIntlOpts(opts),
+    timeZone: timezone
+  };
+  return new Intl.DateTimeFormat(locale, intlOpts).format(toDate(value));
+}
+function formatNumber(value, opts) {
+  const locale = resolveLocale(opts);
+  return new Intl.NumberFormat(locale, extractIntlOpts(opts)).format(value);
+}
+function formatCurrency(value, opts) {
+  const locale = resolveLocale(opts);
+  const intlOpts = {
+    style: "currency",
+    ...extractIntlOpts(opts)
+  };
+  return new Intl.NumberFormat(locale, intlOpts).format(value);
+}
+
+// src/i18n/relative.ts
+var SECOND = 1e3;
+var MINUTE = 60 * SECOND;
+var HOUR = 60 * MINUTE;
+var DAY = 24 * HOUR;
+var WEEK = 7 * DAY;
+var MONTH = 30 * DAY;
+var YEAR = 365 * DAY;
+function toMs(value) {
+  if (value instanceof Date) return value.getTime();
+  if (typeof value === "number") return value;
+  if (typeof value === "string") return new Date(value).getTime();
+  if (typeof value === "object" && value !== null && "toDate" in value) {
+    return value.toDate(getGodxConfig().timezone).getTime();
+  }
+  throw new TypeError(`formatRelative: unsupported value ${String(value)}`);
+}
+function formatRelative(value, opts = {}) {
+  const locale = opts.locale ?? getGodxConfig().locale;
+  const nowMs = opts.now instanceof Date ? opts.now.getTime() : opts.now ?? Date.now();
+  const valueMs = toMs(value);
+  const diffMs = valueMs - nowMs;
+  const abs = Math.abs(diffMs);
+  let unit;
+  let amount;
+  if (abs < MINUTE) {
+    unit = "second";
+    amount = Math.round(diffMs / SECOND);
+  } else if (abs < HOUR) {
+    unit = "minute";
+    amount = Math.round(diffMs / MINUTE);
+  } else if (abs < DAY) {
+    unit = "hour";
+    amount = Math.round(diffMs / HOUR);
+  } else if (abs < WEEK) {
+    unit = "day";
+    amount = Math.round(diffMs / DAY);
+  } else if (abs < MONTH) {
+    unit = "week";
+    amount = Math.round(diffMs / WEEK);
+  } else if (abs < YEAR) {
+    unit = "month";
+    amount = Math.round(diffMs / MONTH);
+  } else {
+    unit = "year";
+    amount = Math.round(diffMs / YEAR);
+  }
+  return new Intl.RelativeTimeFormat(locale, {
+    numeric: opts.numeric ?? "auto",
+    style: opts.style ?? "long"
+  }).format(amount, unit);
+}
+
+// src/i18n/index.ts
+var GODX_LOCALE_STORAGE_KEY = "godx.locale";
+var i18n_default = i18next;
 
 // src/hooks/useTweaks.ts
-var STORAGE_KEY = "forge.tweaks";
+var STORAGE_KEY = "godx.tweaks";
 var DEFAULTS = {
   density: "default",
   theme: "light",
@@ -124,10 +185,11 @@ function useTweaks() {
     html.lang = tweaks.locale;
   }, [tweaks.theme, tweaks.density, tweaks.tenant, tweaks.locale]);
   useEffect(() => {
+    if (!i18n_default.isInitialized) return;
     if (i18n_default.language?.slice(0, 2) !== tweaks.locale) {
       void i18n_default.changeLanguage(tweaks.locale);
       try {
-        window.localStorage.setItem(FORGE_LOCALE_STORAGE_KEY, tweaks.locale);
+        window.localStorage.setItem(GODX_LOCALE_STORAGE_KEY, tweaks.locale);
       } catch {
       }
     }
@@ -137,8 +199,360 @@ function useTweaks() {
   }, []);
   return { tweaks, setTweak, setTweaks };
 }
-var PRODUCT_OPTIONS = PRODUCTS.map((p) => ({ value: p.tenant, label: p.name }));
+function productOptions(products) {
+  return products.map((p) => ({ value: p.tenant, label: p.name }));
+}
+var BP_ORDER = ["xxl", "xl", "lg", "md", "sm", "xs"];
+var BP_ORDER_ASC = ["xs", "sm", "md", "lg", "xl", "xxl"];
+var FALLBACK_WIDTH = {
+  xs: "0px",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  xxl: "1536px"
+};
+function widthOf(bp) {
+  if (typeof window === "undefined") return FALLBACK_WIDTH[bp];
+  const v = getComputedStyle(document.documentElement).getPropertyValue(`--breakpoint-${bp}`).trim();
+  return v || FALLBACK_WIDTH[bp];
+}
+function currentBreakpoint() {
+  if (typeof window === "undefined") return "xs";
+  for (const bp of BP_ORDER) {
+    if (window.matchMedia(`(min-width: ${widthOf(bp)})`).matches) {
+      return bp;
+    }
+  }
+  return "xs";
+}
+function useBreakpoint() {
+  const [bp, setBp] = useState(() => currentBreakpoint());
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mqls = BP_ORDER.map(
+      (b) => window.matchMedia(`(min-width: ${widthOf(b)})`)
+    );
+    const update = () => setBp(currentBreakpoint());
+    mqls.forEach((mql) => mql.addEventListener("change", update));
+    update();
+    return () => {
+      mqls.forEach((mql) => mql.removeEventListener("change", update));
+    };
+  }, []);
+  return bp;
+}
+function matchBreakpoint(current, target) {
+  return BP_ORDER_ASC.indexOf(current) >= BP_ORDER_ASC.indexOf(target);
+}
+function useFormatters() {
+  const { locale, timezone } = useSyncExternalStore(
+    subscribeGodxConfig,
+    getGodxConfig,
+    getGodxConfig
+  );
+  return useMemo(
+    () => ({
+      locale,
+      timezone,
+      formatDate: (value, opts) => formatDate(value, { ...opts, locale, timezone }),
+      formatTime: (value, opts) => formatTime(value, { ...opts, locale, timezone }),
+      formatDateTime: (value, opts) => formatDateTime(value, { ...opts, locale, timezone }),
+      formatRelative: (value, opts) => formatRelative(value, { ...opts, locale }),
+      formatNumber: (value, opts) => formatNumber(value, { ...opts, locale }),
+      formatCurrency: (value, opts) => formatCurrency(value, { ...opts, locale })
+    }),
+    [locale, timezone]
+  );
+}
+function useTablePagination(options = {}) {
+  const {
+    defaultPage = 1,
+    defaultPageSize = 20,
+    page: controlledPage,
+    pageSize: controlledPageSize,
+    onChange
+  } = options;
+  const [internalPage, setInternalPage] = useState(defaultPage);
+  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+  const page = controlledPage ?? internalPage;
+  const pageSize = controlledPageSize ?? internalPageSize;
+  const setPage = useCallback(
+    (nextPage) => {
+      if (controlledPage === void 0) setInternalPage(nextPage);
+      onChange?.(nextPage, pageSize);
+    },
+    [controlledPage, onChange, pageSize]
+  );
+  const setPageSize = useCallback(
+    (nextPageSize) => {
+      if (controlledPageSize === void 0) setInternalPageSize(nextPageSize);
+      if (controlledPage === void 0) setInternalPage(1);
+      onChange?.(1, nextPageSize);
+    },
+    [controlledPage, controlledPageSize, onChange]
+  );
+  const handleChange = useCallback(
+    (nextPage, nextPageSize) => {
+      if (controlledPage === void 0) setInternalPage(nextPage);
+      if (controlledPageSize === void 0) setInternalPageSize(nextPageSize);
+      onChange?.(nextPage, nextPageSize);
+    },
+    [controlledPage, controlledPageSize, onChange]
+  );
+  const resetPage = useCallback(() => {
+    if (controlledPage === void 0) setInternalPage(1);
+    onChange?.(1, pageSize);
+  }, [controlledPage, onChange, pageSize]);
+  const reset = useCallback(() => {
+    if (controlledPage === void 0) setInternalPage(defaultPage);
+    if (controlledPageSize === void 0) setInternalPageSize(defaultPageSize);
+    onChange?.(defaultPage, defaultPageSize);
+  }, [
+    controlledPage,
+    controlledPageSize,
+    defaultPage,
+    defaultPageSize,
+    onChange
+  ]);
+  return {
+    page,
+    pageSize,
+    setPage,
+    setPageSize,
+    onChange: handleChange,
+    resetPage,
+    reset
+  };
+}
+function useTableSelection(options = {}) {
+  const {
+    mode = "multiple",
+    defaultSelected = [],
+    selected: controlledSelected,
+    onChange
+  } = options;
+  const [internal, setInternal] = useState(defaultSelected);
+  const selectedRowKeys = controlledSelected ?? internal;
+  const setSelectedRowKeys = useCallback(
+    (next) => {
+      if (controlledSelected === void 0) setInternal(next);
+      onChange?.(next);
+    },
+    [controlledSelected, onChange]
+  );
+  const select = useCallback(
+    (key) => {
+      const next = mode === "single" ? [key] : selectedRowKeys.includes(key) ? selectedRowKeys : [...selectedRowKeys, key];
+      if (next === selectedRowKeys) return;
+      setSelectedRowKeys(next);
+    },
+    [mode, selectedRowKeys, setSelectedRowKeys]
+  );
+  const deselect = useCallback(
+    (key) => {
+      if (!selectedRowKeys.includes(key)) return;
+      setSelectedRowKeys(selectedRowKeys.filter((k) => k !== key));
+    },
+    [selectedRowKeys, setSelectedRowKeys]
+  );
+  const toggle = useCallback(
+    (key) => {
+      if (selectedRowKeys.includes(key)) {
+        setSelectedRowKeys(selectedRowKeys.filter((k) => k !== key));
+      } else {
+        setSelectedRowKeys(mode === "single" ? [key] : [...selectedRowKeys, key]);
+      }
+    },
+    [mode, selectedRowKeys, setSelectedRowKeys]
+  );
+  const clear = useCallback(() => {
+    if (selectedRowKeys.length === 0) return;
+    setSelectedRowKeys([]);
+  }, [selectedRowKeys.length, setSelectedRowKeys]);
+  const isSelected = useCallback(
+    (key) => selectedRowKeys.includes(key),
+    [selectedRowKeys]
+  );
+  return {
+    selectedRowKeys,
+    setSelectedRowKeys,
+    toggle,
+    select,
+    deselect,
+    clear,
+    isSelected,
+    count: selectedRowKeys.length
+  };
+}
+function readPersisted(storage, storageKey, currentVersion, migrate) {
+  if (!storage) return void 0;
+  try {
+    const raw = storage.getItem(storageKey);
+    if (raw === null) return void 0;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed !== "object" || parsed === null) return void 0;
+    const envelope = parsed;
+    if (typeof envelope.version !== "number" || !("value" in envelope))
+      return void 0;
+    if (envelope.version === currentVersion) return envelope.value;
+    if (migrate)
+      return migrate({
+        version: envelope.version,
+        value: envelope.value
+      });
+    return void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writePersisted(storage, storageKey, version, value) {
+  if (!storage) return;
+  try {
+    storage.setItem(
+      storageKey,
+      JSON.stringify({ version, value })
+    );
+  } catch {
+  }
+}
+function resolveStorage(override) {
+  if (override !== void 0) return override;
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function useTableState(options) {
+  const {
+    storageKey,
+    defaultValue,
+    version = 1,
+    migrate,
+    storage: storageOverride
+  } = options;
+  const storage = resolveStorage(storageOverride);
+  const [value, setValue] = useState(() => {
+    if (storageKey === void 0) return defaultValue;
+    const persisted = readPersisted(storage, storageKey, version, migrate);
+    return persisted !== void 0 ? persisted : defaultValue;
+  });
+  useEffect(() => {
+    if (storageKey === void 0) return;
+    writePersisted(storage, storageKey, version, value);
+  }, [storage, storageKey, value, version]);
+  const setNext = useCallback(
+    (next) => {
+      setValue(
+        (prev) => typeof next === "function" ? next(prev) : next
+      );
+    },
+    []
+  );
+  return [value, setNext];
+}
+var CUSTOM_KEY = "custom";
+function isPersistableLabel(label) {
+  return typeof label === "string";
+}
+function generateKey() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return `view-${crypto.randomUUID()}`;
+  }
+  return `view-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function useTableViews(options) {
+  const {
+    items: builtInItems,
+    defaultActive,
+    activeKey: controlledActiveKey,
+    onActiveKeyChange,
+    onSavedViewsChange,
+    storageKey,
+    maxSavedViews = 20
+  } = options;
+  const [internalActiveKey, setInternalActiveKey] = useState(
+    defaultActive ?? builtInItems[0]?.key
+  );
+  const activeKey = controlledActiveKey ?? internalActiveKey;
+  const [savedViews, setSavedViewsState] = useTableState({
+    storageKey,
+    defaultValue: [],
+    version: 1
+  });
+  const updateSavedViews = useCallback(
+    (next) => {
+      setSavedViewsState((prev) => {
+        const resolved = typeof next === "function" ? next(prev) : next;
+        const trimmed = resolved.slice(-maxSavedViews);
+        onSavedViewsChange?.(trimmed);
+        return trimmed;
+      });
+    },
+    [maxSavedViews, onSavedViewsChange, setSavedViewsState]
+  );
+  const setActiveKey = useCallback(
+    (key) => {
+      if (controlledActiveKey === void 0) setInternalActiveKey(key);
+      onActiveKeyChange?.(key);
+    },
+    [controlledActiveKey, onActiveKeyChange]
+  );
+  const applyView = useCallback(
+    (view) => {
+      setActiveKey(view.key);
+      return {
+        filters: view.filters,
+        sort: view.sort,
+        columnVisibility: view.columnVisibility
+      };
+    },
+    [setActiveKey]
+  );
+  const saveView = useCallback(
+    (label, snapshot) => {
+      const next = {
+        key: generateKey(),
+        label,
+        ...snapshot,
+        deletable: true
+      };
+      updateSavedViews((prev) => [...prev, next]);
+      setActiveKey(next.key);
+      return next;
+    },
+    [setActiveKey, updateSavedViews]
+  );
+  const deleteView = useCallback(
+    (key) => {
+      const target = savedViews.find((view) => view.key === key);
+      if (!target || !isPersistableLabel(target.label)) return;
+      updateSavedViews((prev) => prev.filter((view) => view.key !== key));
+      if (activeKey === key) {
+        const firstBuiltIn = builtInItems[0]?.key;
+        if (firstBuiltIn !== void 0) setActiveKey(firstBuiltIn);
+      }
+    },
+    [activeKey, builtInItems, savedViews, setActiveKey, updateSavedViews]
+  );
+  const markCustom = useCallback(() => {
+    if (activeKey === CUSTOM_KEY) return;
+    setActiveKey(CUSTOM_KEY);
+  }, [activeKey, setActiveKey]);
+  return {
+    items: [...builtInItems, ...savedViews],
+    savedViews,
+    activeKey,
+    setActiveKey,
+    applyView,
+    saveView,
+    deleteView,
+    markCustom
+  };
+}
 
-export { PRODUCT_OPTIONS, useTweaks };
+export { matchBreakpoint, productOptions, useBreakpoint, useFormatters, useTablePagination, useTableSelection, useTableState, useTableViews, useTweaks };
 //# sourceMappingURL=hooks.js.map
 //# sourceMappingURL=hooks.js.map