@squadbase/vantage 0.6.2-dev1.5aae04e → 0.6.2-dev1.5c79ef5

package/registry/ui/attention-list.tsx

@@ -37,6 +37,140 @@ import { formatDate } from "@squadbase/vantage/components"
 import { cn } from "@squadbase/vantage/ui"
 import { Empty } from "@squadbase/vantage/ui"
 import { StatusBadge } from "@squadbase/vantage/components"
+import { useSyncExternalStore } from "react"
+
+/* ---------- inlined from @squadbase/squadkit registry/lib/locale.ts (internal to @squadbase/vantage) ---------- */
+
+/**
+ * The display language of the parts and the defaults that follow it.
+ *
+ * The language comes from `<html lang>`: a tag starting with `ja` reads Japanese, anything else English.
+ * Without a usable `lang` (missing, invalid, or no `document` — SSR, Node) the locale is `FALLBACK_LOCALE`
+ * (`en-US`). A `locale` passed explicitly (a prop, an argument) always wins.
+ *
+ * Parts read the locale through `useLocale` (`hooks/use-locale`) and pass it down; the pure helpers here
+ * and in `format` / `comparison` / `chart-*` take it as an argument and fall back to `documentLocale()`.
+ */
+
+/** The language of the built-in wording: Japanese or English. */
+type UiLanguage = "ja" | "en"
+
+/** The locale used when `<html lang>` gives none (and on the server). */
+const FALLBACK_LOCALE = "en-US"
+
+/** `"ja"` when `locale` starts with `ja` (`ja`, `ja-JP`), else `"en"`. A missing locale is `"en"`. */
+function uiLanguage(locale: string | null | undefined): UiLanguage {
+  return typeof locale === "string" && locale.trim().toLowerCase().startsWith("ja") ? "ja" : "en"
+}
+
+/** A BCP 47 tag in its canonical form (`en-gb` → `en-GB`), or `FALLBACK_LOCALE` when it is empty or invalid. */
+function normalizeLocale(tag: string | null | undefined): string {
+  const value = tag?.trim()
+  if (!value) return FALLBACK_LOCALE
+  try {
+    return Intl.getCanonicalLocales(value)[0] ?? FALLBACK_LOCALE
+  } catch {
+    return FALLBACK_LOCALE
+  }
+}
+
+/**
+ * The locale of the page: `document.documentElement.lang`, canonicalized. `FALLBACK_LOCALE` when it is empty or
+ * invalid, or there is no `document`. Parts read it through `useLocale`, never while rendering.
+ */
+function documentLocale(): string {
+  if (typeof document === "undefined") return FALLBACK_LOCALE
+  return normalizeLocale(document.documentElement?.getAttribute("lang"))
+}
+
+/** `locale` when given, else the page's locale (`documentLocale()`). */
+function resolveLocale(locale?: string | null): string {
+  return locale || documentLocale()
+}
+
+/** Picks the wording table of the locale's language. */
+function pickLocale<T>(table: { ja: T; en: T }, locale?: string | null): T {
+  return table[uiLanguage(resolveLocale(locale))]
+}
+
+/** The currency `format="currency"` uses without a `currency`: JPY for Japanese, USD otherwise. */
+function defaultCurrency(locale?: string | null): string {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? "JPY" : "USD"
+}
+
+/** The month a fiscal year starts in (1–12) when none is given: April for Japanese, January otherwise. */
+function defaultFiscalYearStartMonth(locale?: string | null): number {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? 4 : 1
+}
+
+/** A day of the week, 0 = Sunday … 6 = Saturday (the `Date#getDay` / date-fns numbering). */
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+/** Locales whose week starts on Sunday when the runtime has no week data. */
+const SUNDAY_FIRST = new Set(["en", "en-US", "en-CA"])
+
+/**
+ * The first day of the week: Monday for Japanese; otherwise the locale's convention from `Intl.Locale`
+ * (`en-US` Sunday, `en-GB` Monday). Without week data in the runtime: Sunday for `en` / `en-US` / `en-CA`,
+ * Monday for the rest.
+ */
+function weekStartsOn(locale?: string | null): WeekDay {
+  const tag = normalizeLocale(resolveLocale(locale))
+  if (uiLanguage(tag) === "ja") return 1
+  try {
+    const info = new Intl.Locale(tag) as Intl.Locale & {
+      getWeekInfo?: () => { firstDay: number }
+      weekInfo?: { firstDay: number }
+    }
+    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
+    if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) return (firstDay % 7) as WeekDay
+  } catch {
+    // Fall through to the table below.
+  }
+  return SUNDAY_FIRST.has(tag) ? 0 : 1
+}
+
+/* ---------- inlined from @squadbase/squadkit registry/hooks/use-locale.ts (internal to @squadbase/vantage) ---------- */
+
+const listeners = new Set<() => void>()
+let observer: MutationObserver | null = null
+
+/** One observer on `<html lang>` for every subscribed part. */
+function subscribe(onChange: () => void): () => void {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {}
+  listeners.add(onChange)
+  if (!observer) {
+    observer = new MutationObserver(() => {
+      for (const listener of [...listeners]) listener()
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] })
+  }
+  return () => {
+    listeners.delete(onChange)
+    if (listeners.size === 0 && observer) {
+      observer.disconnect()
+      observer = null
+    }
+  }
+}
+
+const serverLocale = () => FALLBACK_LOCALE
+
+/**
+ * The page's locale (`<html lang>`), following changes made while the page runs. On the server and during
+ * hydration it is `FALLBACK_LOCALE` (`en-US`), so the markup matches; it switches right after.
+ */
+function useDocumentLocale(): string {
+  return useSyncExternalStore(subscribe, documentLocale, serverLocale)
+}
+
+/** The locale a part renders in: its `locale` prop when given, else the page's (`useDocumentLocale`). */
+function useLocale(locale?: string | null): string {
+  const page = useDocumentLocale()
+  return locale || page
+}
+
+/* ---------- end of inlined code ---------- */
 
 export type AttentionKind = "overdue" | "risk" | "dueSoon" | "stale"
 
@@ -50,11 +184,37 @@ const KIND_TONES: Record<AttentionKind, string> = {
   stale: "info",
 }
 
-export const DEFAULT_ATTENTION_LABELS: Record<AttentionKind, string> = {
-  overdue: "期日超過",
-  risk: "リスク",
-  dueSoon: "期限間近",
-  stale: "滞留",
+const daysEn = (n: number) => (n === 1 ? "1 day" : `${n} days`)
+
+const TEXT = {
+  ja: {
+    labels: { overdue: "期日超過", risk: "リスク", dueSoon: "期限間近", stale: "滞留" } as Record<AttentionKind, string>,
+    overdue: (days: number) => `期日を ${days} 日過ぎています`,
+    dueToday: "期日は今日です",
+    dueIn: (days: number) => `期日まであと ${days} 日です`,
+    stale: (days: number) => `${days} 日間動きがありません`,
+    empty: "対応が必要な項目はありません",
+    due: "期日",
+    nextAction: "次の一手: ",
+  },
+  en: {
+    labels: { overdue: "Overdue", risk: "At risk", dueSoon: "Due soon", stale: "Stalled" } as Record<AttentionKind, string>,
+    overdue: (days: number) => `${daysEn(days)} overdue`,
+    dueToday: "Due today",
+    dueIn: (days: number) => `Due in ${daysEn(days)}`,
+    stale: (days: number) => `No activity for ${daysEn(days)}`,
+    empty: "Nothing needs attention",
+    due: "Due",
+    nextAction: "Next step: ",
+  },
+} satisfies Record<UiLanguage, unknown>
+
+/** The category names in English (the fallback language). The list picks the page's language (`<html lang>`); ja reads 期日超過 / リスク / 期限間近 / 滞留. */
+export const DEFAULT_ATTENTION_LABELS: Record<AttentionKind, string> = TEXT.en.labels
+
+/** The category names in `locale`'s language (default the page's, `<html lang>`). */
+export function attentionLabels(locale?: string): Record<AttentionKind, string> {
+  return TEXT[uiLanguage(resolveLocale(locale))].labels
 }
 
 type DateInput = Date | string | null | undefined
@@ -124,14 +284,14 @@ export function compareAttention(a: AttentionJudgement | null, b: AttentionJudge
   return a.kind === "dueSoon" ? a.days - b.days : b.days - a.days
 }
 
-function defaultReason(j: AttentionJudgement, labels: Record<AttentionKind, string>): string {
+function defaultReason(j: AttentionJudgement, labels: Record<AttentionKind, string>, t: (typeof TEXT)[UiLanguage]): string {
   switch (j.kind) {
     case "overdue":
-      return `期日を ${j.days} 日過ぎています`
+      return t.overdue(j.days)
     case "dueSoon":
-      return j.days === 0 ? "期日は今日です" : `期日まであと ${j.days} 日です`
+      return j.days === 0 ? t.dueToday : t.dueIn(j.days)
     case "stale":
-      return `${j.days} 日間動きがありません`
+      return t.stale(j.days)
     case "risk":
       return labels.risk
   }
@@ -218,12 +378,14 @@ export function AttentionList<T>({
   getMeta,
   onRowClick,
   includeUnflagged = false,
-  emptyTitle = "対応が必要な項目はありません",
+  emptyTitle,
   emptyDescription,
   className,
   ...rest
 }: AttentionListProps<T> & Omit<HTMLAttributes<HTMLUListElement>, keyof AttentionListProps<T>>) {
-  const mergedLabels = useMemo(() => ({ ...DEFAULT_ATTENTION_LABELS, ...labels }), [labels])
+  const locale = useLocale()
+  const t = TEXT[uiLanguage(locale)]
+  const mergedLabels = useMemo(() => ({ ...t.labels, ...labels }), [t, labels])
   const colorMap = KIND_TONES
   const dueOf = (row: T) => (getDueDate ? getDueDate(row) : asDateInput(cell(row, dueDateKey)))
   const nextActionOf = (row: T, j: AttentionJudgement): ReactNode =>
@@ -247,7 +409,7 @@ export function AttentionList<T>({
     .sort((a, b) => compareAttention(a.judgement, b.judgement) || a.index - b.index)
 
   if (items.length === 0) {
-    return <Empty title={emptyTitle} description={emptyDescription} className={className} />
+    return <Empty title={emptyTitle ?? t.empty} description={emptyDescription} className={className} />
   }
 
   return (
@@ -264,18 +426,18 @@ export function AttentionList<T>({
               {getMeta && <span className="text-sm tabular-nums text-muted-foreground">{getMeta(row)}</span>}
               {due ? (
                 <span className="ml-auto text-sm tabular-nums text-muted-foreground">
-                  期日 {formatDate(due)}
+                  {t.due} {formatDate(due, "date", locale)}
                 </span>
               ) : null}
             </div>
             {judgement && (
               <p className="mt-1 text-sm text-muted-foreground">
-                {getReason ? getReason(row, judgement) : defaultReason(judgement, mergedLabels)}
+                {getReason ? getReason(row, judgement) : defaultReason(judgement, mergedLabels, t)}
               </p>
             )}
             {judgement && (getNextAction || nextActionKey) && nextActionOf(row, judgement) ? (
               <p className="mt-1 text-sm">
-                <span className="text-muted-foreground">次の一手: </span>
+                <span className="text-muted-foreground">{t.nextAction}</span>
                 {nextActionOf(row, judgement)}
               </p>
             ) : null}