@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/i18n/locale.tsx

@@ -1,188 +1,163 @@
-/**
- * Locale context and provider for solidaria
- *
- * Provides locale and text direction to the component tree.
- *
- * Port of @react-aria/i18n context and useDefaultLocale.
- */
-
-import {
-  type Accessor,
-  type JSX,
-  type ParentProps,
-  createContext,
-  createEffect,
-  createMemo,
-  createSignal,
-  onCleanup,
-  useContext,
-} from 'solid-js';
-import { isRTL } from './utils';
-
-// ============================================
-// TYPES
-// ============================================
-
-/** Text direction: left-to-right or right-to-left. */
-export type Direction = 'ltr' | 'rtl';
-
-/** Locale information including language code and text direction. */
-export interface Locale {
-  /** The BCP47 language code for the locale (e.g., 'en-US', 'ar-SA'). */
-  locale: string;
-  /** The writing direction for the locale. */
-  direction: Direction;
-}
-
-export interface I18nProviderProps extends ParentProps {
-  /** The locale to apply to the children. If not provided, uses browser default. */
-  locale?: string;
-}
-
-// ============================================
-// GLOBAL STATE
-// ============================================
-
-// Symbol for server-provided locale
-const localeSymbol = Symbol.for('solidaria.i18n.locale');
-
-let currentLocale: Locale | null = null;
-const listeners = new Set<(locale: Locale) => void>();
-
-/**
- * Gets the default locale from the browser/system.
- */
-export function getDefaultLocale(): Locale {
-  let locale =
-    (typeof window !== 'undefined' &&
-      (window as unknown as Record<symbol, string>)[localeSymbol]) ||
-    (typeof navigator !== 'undefined' &&
-      (navigator.language ||
-        (navigator as unknown as { userLanguage?: string }).userLanguage)) ||
-    'en-US';
-
-  // Validate the locale is supported
-  try {
-    Intl.DateTimeFormat.supportedLocalesOf([locale]);
-  } catch {
-    locale = 'en-US';
-  }
-
-  return {
-    locale,
-    direction: isRTL(locale) ? 'rtl' : 'ltr',
-  };
-}
-
-function updateLocale(): void {
-  currentLocale = getDefaultLocale();
-  for (const listener of listeners) {
-    listener(currentLocale);
-  }
-}
-
-// ============================================
-// CONTEXT
-// ============================================
-
-const I18nContext = createContext<Accessor<Locale> | null>(null);
-
-// ============================================
-// HOOKS
-// ============================================
-
-/**
- * Returns the current browser/system locale, and updates when it changes.
- *
- * @example
- * ```tsx
- * const locale = createDefaultLocale();
- * console.log(locale().locale); // 'en-US'
- * console.log(locale().direction); // 'ltr'
- * ```
- */
-export function createDefaultLocale(): Accessor<Locale> {
-  if (!currentLocale) {
-    currentLocale = getDefaultLocale();
-  }
-
-  const [locale, setLocale] = createSignal<Locale>(currentLocale);
-
-  createEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    if (listeners.size === 0) {
-      window.addEventListener('languagechange', updateLocale);
-    }
-
-    listeners.add(setLocale);
-
-    onCleanup(() => {
-      listeners.delete(setLocale);
-      if (listeners.size === 0) {
-        window.removeEventListener('languagechange', updateLocale);
-      }
-    });
-  });
-
-  return locale;
-}
-
-/**
- * Returns the current locale and layout direction from context or browser default.
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const locale = useLocale();
- *   return <div dir={locale().direction}>{locale().locale}</div>;
- * }
- * ```
- */
-export function useLocale(): Accessor<Locale> {
-  const context = useContext(I18nContext);
-  const defaultLocale = createDefaultLocale();
-  return context || defaultLocale;
-}
-
-// ============================================
-// PROVIDER
-// ============================================
-
-/**
- * Provides the locale for the application to all child components.
- *
- * @example
- * ```tsx
- * // Use browser default locale
- * <I18nProvider>
- *   <App />
- * </I18nProvider>
- *
- * // Override with specific locale
- * <I18nProvider locale="ar-SA">
- *   <App /> // Will have RTL direction
- * </I18nProvider>
- * ```
- */
-export function I18nProvider(props: I18nProviderProps): JSX.Element {
-  const defaultLocale = createDefaultLocale();
-
-  const locale = createMemo<Locale>(() => {
-    if (props.locale) {
-      return {
-        locale: props.locale,
-        direction: isRTL(props.locale) ? 'rtl' : 'ltr',
-      };
-    }
-    return defaultLocale();
-  });
-
-  return (
-    <I18nContext.Provider value={locale}>
-      {props.children}
-    </I18nContext.Provider>
-  );
-}
+/**
+ * Locale context and provider for solidaria
+ *
+ * Provides locale and text direction to the component tree.
+ *
+ * Port of @react-aria/i18n context and useDefaultLocale.
+ */
+
+import {
+  type Accessor,
+  type JSX,
+  type ParentProps,
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  useContext,
+} from "solid-js";
+import { isRTL } from "./utils";
+
+/** Text direction: left-to-right or right-to-left. */
+export type Direction = "ltr" | "rtl";
+
+/** Locale information including language code and text direction. */
+export interface Locale {
+  /** The BCP47 language code for the locale (e.g., 'en-US', 'ar-SA'). */
+  locale: string;
+  /** The writing direction for the locale. */
+  direction: Direction;
+}
+
+export interface I18nProviderProps extends ParentProps {
+  /** The locale to apply to the children. If not provided, uses browser default. */
+  locale?: string;
+}
+
+// Symbol for server-provided locale
+const localeSymbol = Symbol.for("solidaria.i18n.locale");
+
+let currentLocale: Locale | null = null;
+const listeners = new Set<(locale: Locale) => void>();
+
+/**
+ * Gets the default locale from the browser/system.
+ */
+export function getDefaultLocale(): Locale {
+  let locale =
+    (typeof window !== "undefined" &&
+      (window as unknown as Record<symbol, string>)[localeSymbol]) ||
+    (typeof navigator !== "undefined" &&
+      (navigator.language || (navigator as unknown as { userLanguage?: string }).userLanguage)) ||
+    "en-US";
+
+  // Validate the locale is supported
+  try {
+    Intl.DateTimeFormat.supportedLocalesOf([locale]);
+  } catch {
+    locale = "en-US";
+  }
+
+  return {
+    locale,
+    direction: isRTL(locale) ? "rtl" : "ltr",
+  };
+}
+
+function updateLocale(): void {
+  currentLocale = getDefaultLocale();
+  for (const listener of listeners) {
+    listener(currentLocale);
+  }
+}
+
+const I18nContext = createContext<Accessor<Locale> | null>(null);
+
+/**
+ * Returns the current browser/system locale, and updates when it changes.
+ *
+ * @example
+ * ```tsx
+ * const locale = createDefaultLocale();
+ * console.log(locale().locale); // 'en-US'
+ * console.log(locale().direction); // 'ltr'
+ * ```
+ */
+export function createDefaultLocale(): Accessor<Locale> {
+  if (!currentLocale) {
+    currentLocale = getDefaultLocale();
+  }
+
+  const [locale, setLocale] = createSignal<Locale>(currentLocale);
+
+  createEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    if (listeners.size === 0) {
+      window.addEventListener("languagechange", updateLocale);
+    }
+
+    listeners.add(setLocale);
+
+    onCleanup(() => {
+      listeners.delete(setLocale);
+      if (listeners.size === 0) {
+        window.removeEventListener("languagechange", updateLocale);
+      }
+    });
+  });
+
+  return locale;
+}
+
+/**
+ * Returns the current locale and layout direction from context or browser default.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const locale = useLocale();
+ *   return <div dir={locale().direction}>{locale().locale}</div>;
+ * }
+ * ```
+ */
+export function useLocale(): Accessor<Locale> {
+  const context = useContext(I18nContext);
+  const defaultLocale = createDefaultLocale();
+  return context || defaultLocale;
+}
+
+/**
+ * Provides the locale for the application to all child components.
+ *
+ * @example
+ * ```tsx
+ * // Use browser default locale
+ * <I18nProvider>
+ *   <App />
+ * </I18nProvider>
+ *
+ * // Override with specific locale
+ * <I18nProvider locale="ar-SA">
+ *   <App /> // Will have RTL direction
+ * </I18nProvider>
+ * ```
+ */
+export function I18nProvider(props: I18nProviderProps): JSX.Element {
+  const defaultLocale = createDefaultLocale();
+
+  const locale = createMemo<Locale>(() => {
+    if (props.locale) {
+      return {
+        locale: props.locale,
+        direction: isRTL(props.locale) ? "rtl" : "ltr",
+      };
+    }
+    return defaultLocale();
+  });
+
+  return <I18nContext.Provider value={locale}>{props.children}</I18nContext.Provider>;
+}

package/src/i18n/utils.ts

@@ -1,99 +1,95 @@
-/**
- * i18n utilities for solidaria
- *
- * RTL detection and locale utilities.
- *
- * Port of @react-aria/i18n utils.
- */
-
-// https://en.wikipedia.org/wiki/Right-to-left
-const RTL_SCRIPTS = new Set([
-  'Arab',
-  'Syrc',
-  'Samr',
-  'Mand',
-  'Thaa',
-  'Mend',
-  'Nkoo',
-  'Adlm',
-  'Rohg',
-  'Hebr',
-]);
-
-const RTL_LANGS = new Set([
-  'ae',
-  'ar',
-  'arc',
-  'bcc',
-  'bqi',
-  'ckb',
-  'dv',
-  'fa',
-  'glk',
-  'he',
-  'ku',
-  'mzn',
-  'nqo',
-  'pnb',
-  'ps',
-  'sd',
-  'ug',
-  'ur',
-  'yi',
-]);
-
-/**
- * Determines if a locale is read right to left.
- * Uses Intl.Locale API when available for accurate detection.
- */
-export function isRTL(localeString: string): boolean {
-  // If the Intl.Locale API is available, use it to get the locale's text direction.
-  if (typeof Intl !== 'undefined' && Intl.Locale) {
-    try {
-      const locale = new Intl.Locale(localeString).maximize();
-
-      // Use the text info object to get the direction if possible.
-      // getTextInfo() was implemented as a property by some browsers before it was standardized as a function.
-      const localeAny = locale as unknown as {
-        getTextInfo?: () => { direction: string };
-        textInfo?: { direction: string };
-      };
-      const textInfo = typeof localeAny.getTextInfo === 'function'
-        ? localeAny.getTextInfo()
-        : localeAny.textInfo;
-
-      if (textInfo) {
-        return textInfo.direction === 'rtl';
-      }
-
-      // Fallback: guess using the script.
-      if (locale.script) {
-        return RTL_SCRIPTS.has(locale.script);
-      }
-    } catch {
-      // Fall through to language-based detection
-    }
-  }
-
-  // If not, just guess by the language (first part of the locale)
-  const lang = localeString.split('-')[0];
-  return RTL_LANGS.has(lang);
-}
-
-/**
- * Creates a cache key for formatter options.
- */
-export function createCacheKey(
-  locale: string,
-  options?: Record<string, unknown>
-): string {
-  if (!options) {
-    return locale;
-  }
-  return (
-    locale +
-    Object.entries(options)
-      .sort((a, b) => (a[0] < b[0] ? -1 : 1))
-      .join()
-  );
-}
+/**
+ * i18n utilities for solidaria
+ *
+ * RTL detection and locale utilities.
+ *
+ * Port of @react-aria/i18n utils.
+ */
+
+// https://en.wikipedia.org/wiki/Right-to-left
+const RTL_SCRIPTS = new Set([
+  "Arab",
+  "Syrc",
+  "Samr",
+  "Mand",
+  "Thaa",
+  "Mend",
+  "Nkoo",
+  "Adlm",
+  "Rohg",
+  "Hebr",
+]);
+
+const RTL_LANGS = new Set([
+  "ae",
+  "ar",
+  "arc",
+  "bcc",
+  "bqi",
+  "ckb",
+  "dv",
+  "fa",
+  "glk",
+  "he",
+  "ku",
+  "mzn",
+  "nqo",
+  "pnb",
+  "ps",
+  "sd",
+  "ug",
+  "ur",
+  "yi",
+]);
+
+/**
+ * Determines if a locale is read right to left.
+ * Uses Intl.Locale API when available for accurate detection.
+ */
+export function isRTL(localeString: string): boolean {
+  // If the Intl.Locale API is available, use it to get the locale's text direction.
+  if (typeof Intl !== "undefined" && Intl.Locale) {
+    try {
+      const locale = new Intl.Locale(localeString).maximize();
+
+      // Use the text info object to get the direction if possible.
+      // getTextInfo() was implemented as a property by some browsers before it was standardized as a function.
+      const localeAny = locale as unknown as {
+        getTextInfo?: () => { direction: string };
+        textInfo?: { direction: string };
+      };
+      const textInfo =
+        typeof localeAny.getTextInfo === "function" ? localeAny.getTextInfo() : localeAny.textInfo;
+
+      if (textInfo) {
+        return textInfo.direction === "rtl";
+      }
+
+      // Fallback: guess using the script.
+      if (locale.script) {
+        return RTL_SCRIPTS.has(locale.script);
+      }
+    } catch {
+      // Fall through to language-based detection
+    }
+  }
+
+  // If not, just guess by the language (first part of the locale)
+  const lang = localeString.split("-")[0];
+  return RTL_LANGS.has(lang);
+}
+
+/**
+ * Creates a cache key for formatter options.
+ */
+export function createCacheKey(locale: string, options?: Record<string, unknown>): string {
+  if (!options) {
+    return locale;
+  }
+  return (
+    locale +
+    Object.entries(options)
+      .sort((a, b) => (a[0] < b[0] ? -1 : 1))
+      .join()
+  );
+}