@proyecto-viviana/solidaria 0.2.2 → 0.2.4

package/src/i18n/createDateFormatter.ts

@@ -0,0 +1,83 @@
+/**
+ * createDateFormatter hook for solidaria
+ *
+ * Provides localized date formatting with caching.
+ *
+ * Port of @react-aria/i18n useDateFormatter.
+ */
+
+import { createMemo } from 'solid-js';
+import { useLocale } from './locale';
+import { createCacheKey } from './utils';
+
+// ============================================
+// CACHE
+// ============================================
+
+const dateFormatterCache = new Map<string, Intl.DateTimeFormat>();
+
+/**
+ * Gets or creates a cached date formatter.
+ */
+function getCachedDateFormatter(
+  locale: string,
+  options?: Intl.DateTimeFormatOptions
+): Intl.DateTimeFormat {
+  const cacheKey = createCacheKey(locale, options as Record<string, unknown>);
+
+  if (dateFormatterCache.has(cacheKey)) {
+    return dateFormatterCache.get(cacheKey)!;
+  }
+
+  const formatter = new Intl.DateTimeFormat(locale, options);
+  dateFormatterCache.set(cacheKey, formatter);
+  return formatter;
+}
+
+// ============================================
+// HOOK
+// ============================================
+
+/**
+ * Provides localized date and time formatting for the current locale.
+ * Automatically updates when the locale changes.
+ *
+ * @example
+ * ```tsx
+ * function DateDisplay(props: { date: Date }) {
+ *   const formatter = createDateFormatter({
+ *     year: 'numeric',
+ *     month: 'long',
+ *     day: 'numeric',
+ *   });
+ *
+ *   return <span>{formatter().format(props.date)}</span>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Short date
+ * const shortDate = createDateFormatter({ dateStyle: 'short' });
+ * shortDate().format(new Date()); // '1/19/26' (US) or '19/01/26' (UK)
+ *
+ * // Full date with time
+ * const fullDateTime = createDateFormatter({
+ *   dateStyle: 'full',
+ *   timeStyle: 'short',
+ * });
+ *
+ * // Time only
+ * const timeFormatter = createDateFormatter({
+ *   hour: 'numeric',
+ *   minute: '2-digit',
+ * });
+ * ```
+ */
+export function createDateFormatter(
+  options?: Intl.DateTimeFormatOptions
+): () => Intl.DateTimeFormat {
+  const locale = useLocale();
+
+  return createMemo(() => getCachedDateFormatter(locale().locale, options));
+}

package/src/i18n/createFilter.ts

@@ -0,0 +1,131 @@
+/**
+ * createFilter hook for solidaria
+ *
+ * Provides localized string filtering with collation support.
+ *
+ * Port of @react-aria/i18n useFilter.
+ */
+
+import { createMemo } from 'solid-js';
+import { createCollator } from './createCollator';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface Filter {
+  /** Returns whether a string starts with a given substring. */
+  startsWith(string: string, substring: string): boolean;
+  /** Returns whether a string ends with a given substring. */
+  endsWith(string: string, substring: string): boolean;
+  /** Returns whether a string contains a given substring. */
+  contains(string: string, substring: string): boolean;
+}
+
+// ============================================
+// HOOK
+// ============================================
+
+/**
+ * Provides localized string search functionality for filtering or matching items.
+ * Respects locale-specific collation rules for case and diacritic sensitivity.
+ *
+ * @example
+ * ```tsx
+ * function SearchableList(props: { items: { name: string }[] }) {
+ *   const [query, setQuery] = createSignal('');
+ *   const filter = createFilter({ sensitivity: 'base' });
+ *
+ *   const filteredItems = () =>
+ *     props.items.filter((item) =>
+ *       filter().contains(item.name, query())
+ *     );
+ *
+ *   return (
+ *     <>
+ *       <input
+ *         value={query()}
+ *         onInput={(e) => setQuery(e.target.value)}
+ *         placeholder="Search..."
+ *       />
+ *       <ul>
+ *         <For each={filteredItems()}>
+ *           {(item) => <li>{item.name}</li>}
+ *         </For>
+ *       </ul>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Case-insensitive, diacritic-insensitive filtering
+ * const filter = createFilter({ sensitivity: 'base' });
+ * filter().contains('Café', 'cafe'); // true
+ * filter().startsWith('Hello', 'hello'); // true
+ * ```
+ */
+export function createFilter(options?: Intl.CollatorOptions): () => Filter {
+  const collator = createCollator({
+    usage: 'search',
+    ...options,
+  });
+
+  return createMemo(() => {
+    const coll = collator();
+
+    const startsWith = (str: string, substring: string): boolean => {
+      if (substring.length === 0) {
+        return true;
+      }
+
+      // Normalize both strings for safe slicing
+      const normalizedStr = str.normalize('NFC');
+      const normalizedSub = substring.normalize('NFC');
+
+      return (
+        coll.compare(normalizedStr.slice(0, normalizedSub.length), normalizedSub) ===
+        0
+      );
+    };
+
+    const endsWith = (str: string, substring: string): boolean => {
+      if (substring.length === 0) {
+        return true;
+      }
+
+      const normalizedStr = str.normalize('NFC');
+      const normalizedSub = substring.normalize('NFC');
+
+      return (
+        coll.compare(normalizedStr.slice(-normalizedSub.length), normalizedSub) === 0
+      );
+    };
+
+    const contains = (str: string, substring: string): boolean => {
+      if (substring.length === 0) {
+        return true;
+      }
+
+      const normalizedStr = str.normalize('NFC');
+      const normalizedSub = substring.normalize('NFC');
+      const sliceLen = normalizedSub.length;
+
+      for (let scan = 0; scan + sliceLen <= normalizedStr.length; scan++) {
+        const slice = normalizedStr.slice(scan, scan + sliceLen);
+        if (coll.compare(normalizedSub, slice) === 0) {
+          return true;
+        }
+      }
+
+      return false;
+    };
+
+    return {
+      startsWith,
+      endsWith,
+      contains,
+    };
+  });
+}

package/src/i18n/createNumberFormatter.ts

@@ -0,0 +1,52 @@
+/**
+ * createNumberFormatter hook for solidaria
+ *
+ * Provides localized number formatting with automatic locale updates.
+ *
+ * Port of @react-aria/i18n useNumberFormatter.
+ */
+
+import { createMemo } from 'solid-js';
+import { useLocale } from './locale';
+import { NumberFormatter, type NumberFormatOptions } from './NumberFormatter';
+
+/**
+ * Provides localized number formatting for the current locale.
+ * Automatically updates when the locale changes.
+ *
+ * @example
+ * ```tsx
+ * function PriceDisplay(props: { value: number }) {
+ *   const formatter = createNumberFormatter({
+ *     style: 'currency',
+ *     currency: 'USD',
+ *   });
+ *
+ *   return <span>{formatter().format(props.value)}</span>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Percent formatting
+ * const percentFormatter = createNumberFormatter({
+ *   style: 'percent',
+ *   minimumFractionDigits: 1,
+ * });
+ * percentFormatter().format(0.125); // '12.5%'
+ *
+ * // Unit formatting
+ * const tempFormatter = createNumberFormatter({
+ *   style: 'unit',
+ *   unit: 'celsius',
+ * });
+ * tempFormatter().format(25); // '25°C'
+ * ```
+ */
+export function createNumberFormatter(
+  options: NumberFormatOptions = {}
+): () => NumberFormatter {
+  const locale = useLocale();
+
+  return createMemo(() => new NumberFormatter(locale().locale, options));
+}

package/src/i18n/createStringFormatter.ts

@@ -0,0 +1,87 @@
+/**
+ * String formatter for localized strings with ICU MessageFormat support.
+ * Port of @react-aria/i18n useLocalizedStringFormatter.
+ */
+
+import {
+  LocalizedString,
+  LocalizedStringDictionary,
+  LocalizedStringFormatter,
+  type LocalizedStrings,
+} from '@internationalized/string';
+import { createMemo, type Accessor } from 'solid-js';
+import { useLocale } from './locale';
+
+// Cache for dictionaries to avoid recreating them
+const cache = new WeakMap<LocalizedStrings<string, LocalizedString>, LocalizedStringDictionary<string, LocalizedString>>();
+
+function getCachedDictionary<K extends string, T extends LocalizedString>(
+  strings: LocalizedStrings<K, T>
+): LocalizedStringDictionary<K, T> {
+  let dictionary = cache.get(strings as LocalizedStrings<string, LocalizedString>);
+  if (!dictionary) {
+    dictionary = new LocalizedStringDictionary(strings as LocalizedStrings<string, LocalizedString>);
+    cache.set(strings as LocalizedStrings<string, LocalizedString>, dictionary);
+  }
+  return dictionary as LocalizedStringDictionary<K, T>;
+}
+
+/**
+ * Returns a cached LocalizedStringDictionary for the given strings.
+ */
+export function createStringDictionary<K extends string = string, T extends LocalizedString = string>(
+  strings: LocalizedStrings<K, T>,
+  packageName?: string
+): LocalizedStringDictionary<K, T> {
+  return (
+    (packageName && LocalizedStringDictionary.getGlobalDictionaryForPackage(packageName)) ||
+    getCachedDictionary(strings)
+  );
+}
+
+/**
+ * Provides localized string formatting for the current locale.
+ * Supports interpolating variables, selecting the correct pluralization,
+ * and formatting numbers. Automatically updates when the locale changes.
+ *
+ * @param strings - A mapping of languages to localized strings by key.
+ * @param packageName - Optional package name for global dictionary lookup.
+ *
+ * @example
+ * ```tsx
+ * const strings = {
+ *   'en-US': {
+ *     greeting: 'Hello, {name}!',
+ *     count: '{count, plural, one {# item} other {# items}}'
+ *   }
+ * };
+ *
+ * function MyComponent() {
+ *   const stringFormatter = createStringFormatter(strings);
+ *
+ *   return (
+ *     <div>
+ *       {stringFormatter().format('greeting', { name: 'World' })}
+ *       {stringFormatter().format('count', { count: 5 })}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function createStringFormatter<K extends string = string, T extends LocalizedString = string>(
+  strings: LocalizedStrings<K, T>,
+  packageName?: string
+): Accessor<LocalizedStringFormatter<K, T>> {
+  const localeAccessor = useLocale();
+  const dictionary = createStringDictionary(strings, packageName);
+
+  return createMemo(() => new LocalizedStringFormatter(localeAccessor().locale, dictionary));
+}
+
+// Re-export types for convenience
+export type {
+  LocalizedString,
+  LocalizedStringDictionary,
+  LocalizedStringFormatter,
+  LocalizedStrings,
+};

package/src/i18n/index.ts

@@ -0,0 +1,40 @@
+// Locale context and provider
+export {
+  I18nProvider,
+  useLocale,
+  createDefaultLocale,
+  getDefaultLocale,
+  type Direction,
+  type Locale,
+  type I18nProviderProps,
+} from './locale';
+
+// RTL utilities
+export { isRTL, createCacheKey } from './utils';
+
+// Number formatting
+export {
+  NumberFormatter,
+  type NumberFormatOptions,
+} from './NumberFormatter';
+
+export { createNumberFormatter } from './createNumberFormatter';
+
+// Date formatting
+export { createDateFormatter } from './createDateFormatter';
+
+// String collation
+export { createCollator } from './createCollator';
+
+// String filtering
+export { createFilter, type Filter } from './createFilter';
+
+// String formatting (ICU MessageFormat)
+export {
+  createStringFormatter,
+  createStringDictionary,
+  type LocalizedString,
+  type LocalizedStringDictionary,
+  type LocalizedStringFormatter,
+  type LocalizedStrings,
+} from './createStringFormatter';

package/src/i18n/locale.tsx

@@ -0,0 +1,188 @@
+/**
+ * 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>
+  );
+}

package/src/i18n/utils.ts

@@ -0,0 +1,99 @@
+/**
+ * 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()
+  );
+}