@squadbase/vantage 0.6.2-dev1.54bde93 → 0.6.2-dev1.5c79ef5

package/registry/ui/searchable-select.tsx

@@ -14,11 +14,143 @@ import { cn } from "@squadbase/vantage/ui"
 import { Button } from "@squadbase/vantage/ui"
 import { Popover, PopoverContent, PopoverTrigger } from "@squadbase/vantage/ui"
 import { flattenOptions, type SelectOptions } from "@squadbase/vantage/components"
+import { useSyncExternalStore } from "react"
 import type { KeyboardEvent, MouseEvent } from "react"
 import { CheckIcon, LoaderIcon, XIcon } from "lucide-react"
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@squadbase/vantage/ui"
 import { isGroupedOptions, type SelectOption } from "@squadbase/vantage/components"
 
+/* ---------- 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
+}
+
 /* ---------- inlined from @squadbase/squadkit registry/components/option-command.tsx (internal to @squadbase/vantage) ---------- */
 
 interface OptionCommandListProps {
@@ -136,6 +268,11 @@ export interface SearchableSelectProps {
   className?: string
 }
 
+const TEXT = {
+  ja: { placeholder: "選択してください", search: "検索...", empty: "見つかりませんでした", clear: "クリア" },
+  en: { placeholder: "Select an option", search: "Search...", empty: "No results found.", clear: "Clear" },
+}
+
 /** Not given yet (a draft fills props in steps): render empty, keep the same value between renders. */
 const NO_OPTIONS: never[] = []
 
@@ -146,9 +283,9 @@ export const SearchableSelect = forwardRef<HTMLDivElement, SearchableSelectProps
       value,
       onChange,
       onSearch,
-      placeholder = "選択してください",
-      searchPlaceholder = "検索...",
-      emptyText = "見つかりませんでした",
+      placeholder,
+      searchPlaceholder,
+      emptyText,
       isLoading = false,
       disabled = false,
       clearable = true,
@@ -157,6 +294,7 @@ export const SearchableSelect = forwardRef<HTMLDivElement, SearchableSelectProps
     ref,
   ) {
     const [open, setOpen] = useState(false)
+    const t = TEXT[uiLanguage(useLocale())]
 
     const allOptions = useMemo(() => flattenOptions(options), [options])
     const selectedOption = useMemo(
@@ -187,10 +325,10 @@ export const SearchableSelect = forwardRef<HTMLDivElement, SearchableSelectProps
             role="combobox"
             aria-expanded={open}
           >
-            <span className="truncate">{selectedOption ? selectedOption.label : placeholder}</span>
+            <span className="truncate">{selectedOption ? selectedOption.label : (placeholder ?? t.placeholder)}</span>
             <span className="flex shrink-0 items-center gap-1">
               {clearable && value && (
-                <RemoveButton label="クリア" onRemove={() => onChange?.(undefined)} />
+                <RemoveButton label={t.clear} onRemove={() => onChange?.(undefined)} />
               )}
               <ChevronDownIcon className="size-4 opacity-50" />
             </span>
@@ -202,8 +340,8 @@ export const SearchableSelect = forwardRef<HTMLDivElement, SearchableSelectProps
               onSelect={handleSelect}
               onSearch={onSearch}
               isLoading={isLoading}
-              searchPlaceholder={searchPlaceholder}
-              emptyText={emptyText}
+              searchPlaceholder={searchPlaceholder ?? t.search}
+              emptyText={emptyText ?? t.empty}
             />
           </PopoverContent>
         </Popover>

package/registry/ui/states.tsx

@@ -4,9 +4,9 @@
 
 /**
  * Loading / Empty / ErrorState — the three non-data states of a panel, worded for
- * business users. Defaults are Japanese and say what is happening, not why the
- * system failed: keep raw errors ("upstream timeout after 30s") in `details`,
- * which stays folded behind "詳細を表示".
+ * business users. Defaults follow the page language (`<html lang>`: Japanese for `ja`, else
+ * English) and say what is happening, not why the system failed: keep raw errors
+ * ("upstream timeout after 30s") in `details`, which stays folded behind "Show details" (ja: "詳細を表示").
  *
  * @example
  * import { ErrorState } from "@/components/ui/states"
@@ -21,20 +21,174 @@
  */
 import type { ReactNode } from "react"
 import { cn } from "@squadbase/vantage/ui"
+import { useSyncExternalStore } from "react"
 
-export function Loading({ label = "読み込んでいます…", className }: { label?: string; className?: string }) {
+/* ---------- 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 ---------- */
+
+const TEXT = {
+  ja: {
+    loading: "読み込んでいます…",
+    empty: "表示できるデータがありません",
+    errorTitle: "データを読み込めませんでした",
+    errorMessage: "時間をおいて再試行してください。解決しない場合は管理者にお問い合わせください。",
+    details: "詳細を表示",
+  },
+  en: {
+    loading: "Loading…",
+    empty: "No data to display",
+    errorTitle: "Couldn't load the data",
+    errorMessage: "Try again in a moment. If the problem continues, contact your administrator.",
+    details: "Show details",
+  },
+}
+
+const useText = () => TEXT[uiLanguage(useLocale())]
+
+export function Loading({ label, className }: { label?: string; className?: string }) {
+  const t = useText()
   return (
     <div className={cn("flex min-h-[30vh] items-center justify-center", className)} role="status" aria-live="polite">
       <div className="flex items-center gap-3 text-sm text-muted-foreground">
         <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-        {label}
+        {label ?? t.loading}
       </div>
     </div>
   )
 }
 
 export function Empty({
-  title = "表示できるデータがありません",
+  title,
   description,
   icon,
   action,
@@ -46,10 +200,11 @@ export function Empty({
   action?: ReactNode
   className?: string
 }) {
+  const t = useText()
   return (
     <div className={cn("flex flex-col items-center justify-center gap-2 p-10 text-center", className)}>
       {icon ? <div className="text-3xl text-muted-foreground">{icon}</div> : null}
-      <p className="font-medium">{title}</p>
+      <p className="font-medium">{title ?? t.empty}</p>
       {description ? <p className="max-w-sm text-sm text-muted-foreground">{description}</p> : null}
       {action ? <div className="mt-2">{action}</div> : null}
     </div>
@@ -57,8 +212,8 @@ export function Empty({
 }
 
 export function ErrorState({
-  title = "データを読み込めませんでした",
-  message = "時間をおいて再試行してください。解決しない場合は管理者にお問い合わせください。",
+  title,
+  message,
   details,
   action,
   className,
@@ -66,21 +221,23 @@ export function ErrorState({
   title?: string
   /** What happened and what to do next, in plain words. */
   message?: ReactNode
-  /** Technical detail (error message, status code), folded behind "詳細を表示". */
+  /** Technical detail (error message, status code), folded behind "Show details" (ja: "詳細を表示"). */
   details?: ReactNode
   action?: ReactNode
   className?: string
 }) {
+  const t = useText()
+  const shownMessage = message === undefined ? t.errorMessage : message
   return (
     <div
       className={cn("rounded-xl border border-destructive/30 bg-destructive/5 p-6", className)}
       role="alert"
     >
-      <p className="font-semibold text-destructive">{title}</p>
-      {message ? <p className="mt-1 text-sm text-muted-foreground">{message}</p> : null}
+      <p className="font-semibold text-destructive">{title ?? t.errorTitle}</p>
+      {shownMessage ? <p className="mt-1 text-sm text-muted-foreground">{shownMessage}</p> : null}
       {details ? (
         <details className="mt-2 text-xs text-muted-foreground">
-          <summary className="cursor-pointer select-none">詳細を表示</summary>
+          <summary className="cursor-pointer select-none">{t.details}</summary>
           <div className="mt-1 font-mono break-all">{details}</div>
         </details>
       ) : null}