@squadbase/vantage 0.6.2-dev1.9365dcd → 0.6.2-dev1.9d7130b

package/registry/ui/status-badge.tsx

@@ -12,50 +12,214 @@
  * `gray` are still accepted and map to positive / negative / warning / info /
  * neutral. Unknown statuses and tones fall back to `neutral`.
  *
- * The default label comes from `STATUS_VOCABULARY` (one table of status, 日本語ラベル and tone), so the same
- * state is worded the same everywhere (Tracker legends import it too):
+ * The default label comes from `STATUS_VOCABULARY` (one table of status, label and tone; the label follows the
+ * page's language, `<html lang>`), so the same state is worded the same everywhere (Tracker legends import it too):
  *
- * | status | ラベル | 色調 |
+ * | status | ラベル（ja / en） | 色調 |
  * |---|---|---|
- * | `success` | 正常 | positive |
- * | `partial` | 一部失敗 | warning |
- * | `failed` | 失敗 | negative |
- * | `delayed` | 遅延 | warning |
- * | `running` | 実行中 | info |
- * | `stopped` | 停止中 | neutral |
- * | `active` / `inactive` | 有効 / 無効 | positive / neutral |
- * | `warning` / `error` / `pending` | 警告 / エラー / 保留中 | warning / negative / info |
+ * | `success` | 正常 / Healthy | positive |
+ * | `partial` | 一部失敗 / Partially failed | warning |
+ * | `failed` | 失敗 / Failed | negative |
+ * | `delayed` | 遅延 / Delayed | warning |
+ * | `running` | 実行中 / Running | info |
+ * | `stopped` | 停止中 / Stopped | neutral |
+ * | `active` / `inactive` | 有効 / 無効、Active / Inactive | positive / neutral |
+ * | `warning` / `error` / `pending` | 警告 / エラー / 保留中、Warning / Error / Pending | warning / negative / info |
  */
 import { forwardRef } from "react"
 
 import { cn } from "@squadbase/vantage/ui"
 import { Badge } from "@squadbase/vantage/ui"
+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 ---------- */
 
 type StatusTone = "positive" | "negative" | "warning" | "info" | "neutral"
 
+const STATUS_LABELS = {
+  ja: {
+    success: "正常",
+    partial: "一部失敗",
+    failed: "失敗",
+    delayed: "遅延",
+    running: "実行中",
+    stopped: "停止中",
+    active: "有効",
+    inactive: "無効",
+    warning: "警告",
+    error: "エラー",
+    pending: "保留中",
+  },
+  en: {
+    success: "Healthy",
+    partial: "Partially failed",
+    failed: "Failed",
+    delayed: "Delayed",
+    running: "Running",
+    stopped: "Stopped",
+    active: "Active",
+    inactive: "Inactive",
+    warning: "Warning",
+    error: "Error",
+    pending: "Pending",
+  },
+} as const
+
 /**
- * 状態の語彙の正本: status → 日本語ラベルと色調。StatusBadge の既定の表示と、Tracker の凡例など
- * 同じ状態を語る他の場所が、同じ語を使うためにここから参照する。
+ * 状態の語彙の正本: status → ラベルと色調。StatusBadge の既定の表示と、Tracker の凡例など
+ * 同じ状態を語る他の場所が、同じ語を使うためにここから参照する。`label` は英語（フォールバック）で、
+ * ページの言語に合わせた語は `statusLabel(status, locale)` で引く。
  */
 export const STATUS_VOCABULARY = {
-  success: { label: "正常", tone: "positive" },
-  partial: { label: "一部失敗", tone: "warning" },
-  failed: { label: "失敗", tone: "negative" },
-  delayed: { label: "遅延", tone: "warning" },
-  running: { label: "実行中", tone: "info" },
-  stopped: { label: "停止中", tone: "neutral" },
-  active: { label: "有効", tone: "positive" },
-  inactive: { label: "無効", tone: "neutral" },
-  warning: { label: "警告", tone: "warning" },
-  error: { label: "エラー", tone: "negative" },
-  pending: { label: "保留中", tone: "info" },
+  success: { label: STATUS_LABELS.en.success, tone: "positive" },
+  partial: { label: STATUS_LABELS.en.partial, tone: "warning" },
+  failed: { label: STATUS_LABELS.en.failed, tone: "negative" },
+  delayed: { label: STATUS_LABELS.en.delayed, tone: "warning" },
+  running: { label: STATUS_LABELS.en.running, tone: "info" },
+  stopped: { label: STATUS_LABELS.en.stopped, tone: "neutral" },
+  active: { label: STATUS_LABELS.en.active, tone: "positive" },
+  inactive: { label: STATUS_LABELS.en.inactive, tone: "neutral" },
+  warning: { label: STATUS_LABELS.en.warning, tone: "warning" },
+  error: { label: STATUS_LABELS.en.error, tone: "negative" },
+  pending: { label: STATUS_LABELS.en.pending, tone: "info" },
 } as const satisfies Record<string, { label: string; tone: StatusTone }>
 
 export type StatusKey = keyof typeof STATUS_VOCABULARY
 
-/** 状態の日本語ラベル。語彙に無い status は渡された文字列のまま返す。 */
-export function statusLabel(status: string): string {
-  return Object.hasOwn(STATUS_VOCABULARY, status) ? STATUS_VOCABULARY[status as StatusKey].label : status
+/** 状態のラベル（`locale` の言語。既定はページのロケール）。語彙に無い status は渡された文字列のまま返す。 */
+export function statusLabel(status: string, locale?: string): string {
+  return Object.hasOwn(STATUS_VOCABULARY, status) ? STATUS_LABELS[uiLanguage(resolveLocale(locale))][status as StatusKey] : status
 }
 
 const defaultColorMap: Record<string, string> = Object.fromEntries(
@@ -75,12 +239,12 @@ const legacyColorTones: Record<string, StatusTone> = {
  * One literal class set per tone — Tailwind only emits classes it can see
  * literally in the source.
  */
-const toneStyles: Record<StatusTone, { dot: string; bg: string; text: string }> = {
-  positive: { dot: "bg-positive", bg: "bg-positive-subtle", text: "text-positive" },
-  negative: { dot: "bg-negative", bg: "bg-negative-subtle", text: "text-negative" },
-  warning: { dot: "bg-warning", bg: "bg-warning-subtle", text: "text-warning" },
-  info: { dot: "bg-info", bg: "bg-info-subtle", text: "text-info" },
-  neutral: { dot: "bg-neutral", bg: "bg-neutral-subtle", text: "text-neutral" },
+const toneStyles: Record<StatusTone, { dot: string; bg: string; text: string; border: string }> = {
+  positive: { dot: "bg-positive", bg: "bg-positive-subtle", text: "text-positive", border: "border-positive/20 dark:border-positive/25" },
+  negative: { dot: "bg-negative", bg: "bg-negative-subtle", text: "text-negative", border: "border-negative/20 dark:border-negative/25" },
+  warning: { dot: "bg-warning", bg: "bg-warning-subtle", text: "text-warning", border: "border-warning/20 dark:border-warning/25" },
+  info: { dot: "bg-info", bg: "bg-info-subtle", text: "text-info", border: "border-info/20 dark:border-info/25" },
+  neutral: { dot: "bg-neutral", bg: "bg-neutral-subtle", text: "text-neutral", border: "border-neutral/20 dark:border-neutral/25" },
 }
 
 const resolveTone = (color: string | undefined): StatusTone => {
@@ -101,19 +265,20 @@ export const StatusBadge = forwardRef<HTMLSpanElement, StatusBadgeProps>(functio
   { status, label, colorMap, className },
   ref,
 ) {
+  const locale = useLocale()
   const mergedColorMap = { ...defaultColorMap, ...colorMap }
   const style = toneStyles[resolveTone(mergedColorMap[status])]
-  const displayLabel = label ?? statusLabel(status)
+  const displayLabel = label ?? statusLabel(status, locale)
 
   return (
     <Badge
       ref={ref}
       data-slot="status-badge"
       variant="outline"
-      className={cn("gap-1.5 border-transparent", style.bg, style.text, className)}
+      className={cn("gap-1.5 rounded-md", style.border, style.bg, style.text, className)}
       aria-label={displayLabel}
     >
-      <span className={cn("inline-block size-2 rounded-full", style.dot)} aria-hidden="true" />
+      <span className={cn("inline-block size-1.5 rounded-full", style.dot)} aria-hidden="true" />
       {displayLabel}
     </Badge>
   )

package/registry/ui/tooltip.tsx

@@ -34,14 +34,18 @@ function TooltipContent({
   align = "center",
   alignOffset = 0,
   children,
+  container,
   ...props
 }: TooltipPrimitive.Popup.Props &
   Pick<
     TooltipPrimitive.Positioner.Props,
     "align" | "alignOffset" | "side" | "sideOffset"
-  >) {
+  > & {
+    /** ポータルの親要素。ローカルテーマ内の要素を渡すと、その CSS 変数を継承する。省略時は body。 */
+    container?: TooltipPrimitive.Portal.Props["container"]
+  }) {
   return (
-    <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Portal container={container} className={container ? "contents" : undefined}>
       <TooltipPrimitive.Positioner
         align={align}
         alignOffset={alignOffset}