@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/i18n/useLocale.ts

@@ -0,0 +1,19 @@
+import { useContext } from 'react';
+import { LocaleContext } from './LocaleProvider';
+
+/**
+ * Read the active locale. Resolution order:
+ * 1. The nearest `<LocaleProvider>` value (if mounted above).
+ * 2. `navigator.language` (browser fallback).
+ * 3. `'en-US'` (SSR / Node test fallback).
+ *
+ * Consumers don't need to wrap their app in `<LocaleProvider>` to get a
+ * sensible default; mount it only when you want to override the browser
+ * default or pin a subtree to a specific locale.
+ */
+export function useLocale(): string {
+  const ctx = useContext(LocaleContext);
+  if (ctx !== null) return ctx;
+  if (typeof navigator !== 'undefined' && navigator.language) return navigator.language;
+  return 'en-US';
+}

package/src/i18n/useTranslation.ts

@@ -0,0 +1,58 @@
+import { useContext, useMemo } from 'react';
+import { I18nContext } from './I18nProvider';
+import type { MessageKey } from './messages';
+import { lookupKey } from './format';
+
+/**
+ * Read the active translations and return a `t(key, params?)` function.
+ *
+ * - `key` is a dotted path into the `Messages` interface (e.g.
+ *   `'alert.dismiss'`). TypeScript narrows the union to whatever keys are
+ *   defined in `Messages` — agents can autocomplete every valid key.
+ * - String leaves are returned verbatim. Function leaves are invoked with
+ *   `params`. Array leaves (months, weekdays) are JSON-stringified so misuse
+ *   is loud at runtime — use `useTranslationArray` for those.
+ * - A missing key logs a `console.warn` and returns the literal key string so
+ *   the UI still renders something.
+ *
+ * @example
+ *   const t = useTranslation();
+ *   <button aria-label={t('alert.dismiss')}>×</button>
+ */
+export function useTranslation() {
+  const { messages } = useContext(I18nContext);
+  return useMemo(() => {
+    return function t<K extends MessageKey>(key: K, params?: Record<string, unknown>): string {
+      const leaf = lookupKey(messages as unknown as Record<string, unknown>, key as string);
+      if (leaf == null) {
+        if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
+          console.warn('[i18n] missing key:', key);
+        }
+        return key as string;
+      }
+      if (typeof leaf === 'function') {
+        return (leaf as (p: Record<string, unknown>) => string)(params ?? {});
+      }
+      if (typeof leaf === 'string') return leaf;
+      // Array leaves (months, weekdays) — caller indexes; we return the raw
+      // JSON so misuse via `t()` is loud at runtime. Use `useTranslationArray`.
+      return JSON.stringify(leaf);
+    };
+  }, [messages]);
+}
+
+/**
+ * Convenience for components that need raw array messages such as
+ * `calendar.months` or `calendar.weekdaysShort`. Returns the array directly so
+ * the caller can index into it (`months[date.getMonth()]`). If the key isn't
+ * an array, returns `[]` and lets the caller render a graceful fallback.
+ */
+export function useTranslationArray() {
+  const { messages } = useContext(I18nContext);
+  return useMemo(() => {
+    return function ta(key: string): readonly string[] {
+      const leaf = lookupKey(messages as unknown as Record<string, unknown>, key);
+      return Array.isArray(leaf) ? (leaf as readonly string[]) : [];
+    };
+  }, [messages]);
+}