@axzydev/axzy_ui_system 1.4.8 → 1.5.1

package/src/i18n/locales/es.ts

@@ -0,0 +1,165 @@
+import type { ITMessages } from "../types";
+
+/**
+ * Catálogo base en español (locale por defecto de la librería).
+ *
+ * Las keys siguen `docs/i18n/conventions.md` (`namespace.clave`) y el inventario de
+ * `docs/i18n/strings.md`. Añade nuevas keys aquí y en `en.ts` a la vez.
+ */
+const es: ITMessages = {
+  // ---------------------------------------------------------------- common
+  "common.loading": "Cargando...",
+  "common.loadingOptions": "Cargando opciones...",
+  "common.loadError": "Error cargando",
+  "common.search": "Buscar...",
+  "common.clear": "Limpiar",
+  "common.clearSelection": "Limpiar selección",
+  "common.all": "Todos",
+  "common.true": "Verdadero",
+  "common.false": "Falso",
+  "common.back": "Atrás",
+  "common.next": "Siguiente",
+  "common.finish": "Finalizar",
+  "common.accept": "Aceptar",
+  "common.confirm": "Confirmar",
+  "common.cancel": "Cancelar",
+  "common.close": "Cerrar",
+  "common.dismiss": "Descartar",
+  "common.closeNotification": "Cerrar notificación",
+  "common.menu": "Menú",
+  "common.userAvatar": "Usuario actual",
+  "common.retry": "Reintentar",
+  "common.error": "Error",
+  "common.noData": "Sin datos",
+  "common.empty": "No hay información para mostrar",
+  "common.noResults": "No se encontraron resultados",
+  "common.delete": "Eliminar",
+  "common.copy": "Copiar",
+
+  // ------------------------------------------------------------- validation
+  "field.required": "Este campo es requerido",
+
+  // ------------------------------------------------------------------ atoms
+  "image.fallbackAlt": "Fallback",
+  "chip.remove": "Quitar {label}",
+  "input.invalidFormat": "Formato inválido",
+  "input.showPassword": "Mostrar contraseña",
+  "input.hidePassword": "Ocultar contraseña",
+
+  // -------------------------------------------------------------- molecules
+  "card.imageAlt": "Imagen de tarjeta",
+  "select.placeholder": "Selecciona una opción",
+  "select.noResults": "No se encontraron resultados",
+  "multiSelect.placeholder": "Selecciona opciones",
+  "chipInput.placeholder": "Escribe y presiona Enter",
+  "chipInput.maxTags": "Máximo {count} etiquetas",
+  "chipInput.duplicate": "Etiqueta duplicada",
+  "dropdownMenu.open": "Abrir menú",
+  "lineBarChart.lineLabel": "Serie A",
+  "lineBarChart.barLabel": "Serie B",
+  "datePicker.invalid": "Fecha inválida",
+  "datePicker.placeholder": "dd/mm/aaaa",
+  "datePicker.rangePlaceholder": "dd/mm/aaaa - dd/mm/aaaa",
+  "calendar.today": "Hoy",
+  "timePicker.accept": "Aceptar",
+  "timePicker.placeholder": "HH:MM",
+  "timePicker.invalid": "Hora inválida",
+  "timePicker.hours": "Horas",
+  "timePicker.minutes": "Minutos",
+  "table.showAll": "Mostrar todos",
+  "table.filterTrue": "Filtrar solo verdaderos",
+  "table.filterFalse": "Filtrar solo falsos",
+  "table.sortBy": "Ordenar por {label}",
+  "table.filterToggle": "{action} para {label}",
+  "table.viewTable": "Tabla",
+  "table.viewCards": "Tarjetas",
+  "table.noResults": "No se encontraron resultados",
+  "table.adjustFilters": "Intenta ajustar los filtros",
+  "table.loading": "Cargando datos...",
+  "table.selectAll": "Seleccionar todo",
+  "wysiwyg.bold": "Negrita",
+  "wysiwyg.italic": "Itálica",
+  "wysiwyg.underline": "Subrayado",
+  "wysiwyg.highlight": "Marcador",
+  "wysiwyg.bulletList": "Lista con viñetas",
+  "wysiwyg.numberedList": "Lista numerada",
+  "wysiwyg.clearFormat": "Limpiar formato",
+  "pagination.itemsPerPage": "Mostrar",
+  "pagination.of": "de",
+  "breadcrumbs.aria": "Ruta de navegación",
+  "pageHeader.back": "Volver",
+  "pagination.showing": "Mostrando {from}-{to} de {total}",
+  "pagination.page": "Página {page}",
+  "pagination.aria": "Paginación",
+  "pagination.previous": "Página anterior",
+  "pagination.next": "Página siguiente",
+  "stepper.stepOf": "Paso {current} de {total}",
+  "stepper.stepAria": "Paso {n} {label}",
+
+  // -------------------------------------------------------------- organisms
+  "confirmDialog.title": "Confirmar acción",
+  "confirmDialog.message": "¿Estás seguro de que deseas continuar?",
+  "dropfile.upload": "Subir archivo",
+  "dropfile.status.pending": "Pendiente",
+  "dropfile.status.uploading": "Subiendo...",
+  "dropfile.status.uploaded": "Subido",
+  "dropfile.status.error": "Error",
+  "dropfile.dropHere": "¡Suelta aquí!",
+  "dropfile.clickOrDrag": "Haz clic o arrastra",
+  "dropfile.imageLoaded": "Imagen cargada",
+  "dropfile.noPreview": "Sin vista previa",
+  "dropfile.previewAlt": "Vista previa",
+  "dropfile.fileTypeNotAllowed": "Tipo de archivo no permitido.",
+  "dropfile.fileLoaded": "Archivo cargado",
+  "sidebar.notifications": "Notificaciones",
+  "sidebar.navAria": "Componentes de la librería",
+  "sidebar.noSubmenu": "No hay submenú",
+  // ---------------------------------------------------------------- sandbox
+  "searchTable.searchPlaceholder": "Buscar en todos los campos...",
+  "searchTable.showing": "Mostrando {from}-{to} de {total} resultados",
+  "searchTable.emptySearch": "No se encontraron resultados para tu búsqueda",
+  "searchTable.empty": "No se encontraron resultados",
+  "searchTable.showLabel": "Mostrar:",
+  "searchTable.pageOf": "Página {current} de {total}",
+  "searchTable.prev": "Página anterior",
+  "searchTable.next": "Página siguiente",
+  "searchTable.sort": "Ordenar",
+  "searchTable.sortAsc": "Asc ↑",
+  "searchTable.sortDesc": "Desc ↓",
+  "searchTable.clearSearch": "Limpiar búsqueda",
+  "searchTable.showingCount": "Mostrando {from} de {total} resultados",
+  "searchTable.sortTable": "Ordenar tabla",
+  "searchTable.sortAria": "Ordenar tabla {direction}",
+  "searchTable.sortAscending": "ascendente",
+  "searchTable.sortDescending": "descendente",
+  "formBuilder.arrayField": "Array Field: {label}",
+  "formBuilder.loadingOptions": "Cargando opciones...",
+
+  // ------------------------------------------------- ITThemeProvider (editor)
+  "themeProvider.fab.ariaLabel": "Configurar Paleta de Colores",
+  "themeProvider.designer.title": "Diseñador de Temas",
+  "themeProvider.designer.appearance": "Apariencia",
+  "themeProvider.designer.presets": "Presets",
+  "themeProvider.designer.myThemes": "Mis Temas",
+  "themeProvider.designer.presetNamePlaceholder": "Nombre del tema...",
+  "themeProvider.designer.save": "Guardar",
+  "themeProvider.designer.cancelSave": "X",
+  "themeProvider.designer.saveCurrent": "Guardar actual",
+  "themeProvider.designer.reset": "Restaurar default",
+  "themeProvider.designer.autosave": "Los cambios se guardan automáticamente",
+  "themeProvider.designer.close": "Cerrar",
+  "themeProvider.designer.deletePreset": "Eliminar",
+  "themeProvider.tabs.brand": "Marca",
+  "themeProvider.tabs.layout": "Nav & Sidebar",
+  "themeProvider.tabs.tables": "Tablas",
+  "themeProvider.mode.light": "Claro",
+  "themeProvider.mode.dark": "Oscuro",
+  "themeProvider.mode.system": "Sistema",
+  "themeProvider.presets.midnightIndigo": "Midnight Indigo 🌌",
+  "themeProvider.presets.coralReef": "Coral Reef 🪸",
+  "themeProvider.presets.oceanicTeal": "Oceanic Teal 🌊",
+  "themeProvider.presets.goldenHour": "Golden Hour ☀️",
+  "themeProvider.presets.deepForest": "Deep Forest 🌲",
+};
+
+export default es;

package/src/i18n/provider.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { ITI18nContext } from "./context";
+import { createI18n } from "./translator";
+import type { ITI18nProviderProps } from "./types";
+
+/**
+ * Provee locale y mensajes al árbol de componentes.
+ *
+ * Sin provider, los componentes usan el catálogo base en español. Con provider,
+ * cualquier prop de texto explícita de un componente sigue teniendo prioridad
+ * sobre el catálogo.
+ *
+ * @example
+ * ```tsx
+ * <ITThemeProvider>
+ *   <ITI18nProvider locale="en">
+ *     <App />
+ *   </ITI18nProvider>
+ * </ITThemeProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Overrides parciales sobre el catálogo incluido
+ * <ITI18nProvider locale="es" messages={{ es: { "common.cancel": "Abortar" } }}>
+ *   <App />
+ * </ITI18nProvider>
+ * ```
+ */
+export function ITI18nProvider({
+  locale,
+  fallbackLocale,
+  messages,
+  children,
+}: ITI18nProviderProps) {
+  const value = useMemo(
+    () => createI18n({ locale, fallbackLocale, messages }),
+    [locale, fallbackLocale, messages]
+  );
+
+  return <ITI18nContext.Provider value={value}>{children}</ITI18nContext.Provider>;
+}
+
+export default ITI18nProvider;

package/src/i18n/translator.ts

@@ -0,0 +1,82 @@
+import { enUS, es as esDateLocale } from "date-fns/locale";
+import type { Locale } from "date-fns";
+import es from "./locales/es";
+import en from "./locales/en";
+import type { ITI18nOptions, ITI18nValue, ITMessagesByLocale } from "./types";
+
+/** Locale por defecto de la librería (mantiene el comportamiento histórico). */
+export const DEFAULT_LOCALE = "es";
+
+/** Catálogo base incluido en el paquete. */
+export const baseCatalog: ITMessagesByLocale = { es, en };
+
+const INTL_LOCALES: Record<string, string> = { es: "es-MX", en: "en-US" };
+const DATE_LOCALES: Record<string, Locale> = { es: esDateLocale, en: enUS };
+
+/** Mapea `es`/`en` a una locale BCP-47 para `Intl.*` (default: la propia locale). */
+export function toIntlLocale(locale: string): string {
+  return INTL_LOCALES[locale] ?? locale;
+}
+
+/** Devuelve la locale de `date-fns` para la locale dada (fallback: español). */
+export function toDateLocale(locale: string): Locale {
+  return DATE_LOCALES[locale] ?? DATE_LOCALES[DEFAULT_LOCALE];
+}
+
+/** Sustituye los placeholders `{var}` de un texto. */
+export function interpolate(template: string, vars?: Record<string, string | number>): string {
+  if (!vars) return template;
+  return template.replace(/\{(\w+)\}/g, (match, key) =>
+    vars[key] !== undefined ? String(vars[key]) : match
+  );
+}
+
+/**
+ * Fusiona el catálogo base con los mensajes propios.
+ * Prioridad (mayor → menor): `messages[locale]` → `messages[fallback]` →
+ * catálogo base `[locale]` → catálogo base `[fallback]` → la propia key.
+ */
+export function resolveMessages({ locale, fallbackLocale, messages }: Required<Pick<ITI18nOptions, "locale" | "fallbackLocale">> & Pick<ITI18nOptions, "messages">): Record<string, string> {
+  const custom = messages ?? {};
+  return {
+    ...BASE[fallbackLocale],
+    ...BASE[locale],
+    ...custom[fallbackLocale],
+    ...custom[locale],
+  };
+}
+
+const BASE: Record<string, Record<string, string> | undefined> = { es, en };
+
+/**
+ * Construye el valor de contexto de i18n (traductor + formateadores).
+ *
+ * @example
+ * ```ts
+ * const i18n = createI18n({ locale: "en" });
+ * i18n.t("common.cancel"); // "Cancel"
+ * i18n.formatCurrency(1234.5); // "$1,234.50"
+ * ```
+ */
+export function createI18n(options: ITI18nOptions = {}): ITI18nValue {
+  const locale = options.locale ?? DEFAULT_LOCALE;
+  const fallbackLocale = options.fallbackLocale ?? DEFAULT_LOCALE;
+  const messages = resolveMessages({ locale, fallbackLocale, messages: options.messages });
+  const intlLocale = toIntlLocale(locale);
+
+  const t = (key: string, vars?: Record<string, string | number>): string =>
+    interpolate(messages[key] ?? key, vars);
+
+  return {
+    locale,
+    fallbackLocale,
+    t,
+    dateLocale: toDateLocale(locale),
+    formatNumber: (value: number, opts?: Intl.NumberFormatOptions): string =>
+      new Intl.NumberFormat(intlLocale, opts).format(value),
+    formatCurrency: (value: number, currency = "MXN", opts?: Intl.NumberFormatOptions): string =>
+      new Intl.NumberFormat(intlLocale, { style: "currency", currency, ...opts }).format(value),
+    formatDate: (value: Date | number | string, opts?: Intl.DateTimeFormatOptions): string =>
+      new Intl.DateTimeFormat(intlLocale, opts).format(value instanceof Date ? value : new Date(value)),
+  };
+}

package/src/i18n/types.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import type { Locale } from "date-fns";
+
+/** Supported base locales shipped with the library. */
+export type ITLocale = "es" | "en";
+
+/** Message catalog: flat `namespace.key` → text. */
+export type ITMessages = Record<string, string>;
+
+/** Message overrides keyed by locale. */
+export type ITMessagesByLocale = Record<string, ITMessages>;
+
+/** Interpolation variables for `t()`. */
+export type ITVars = Record<string, string | number>;
+
+/** Options used to build an i18n value. */
+export interface ITI18nOptions {
+  /** Active locale. @default "es" */
+  locale?: string;
+  /** Locale used for missing keys. @default "es" */
+  fallbackLocale?: string;
+  /** Custom messages merged over the built-in catalog. */
+  messages?: ITMessagesByLocale;
+}
+
+/** Contract of the i18n context (returned by `useITTranslation()`). */
+export interface ITI18nValue {
+  /** Active locale. */
+  locale: string;
+  /** Fallback locale. */
+  fallbackLocale: string;
+  /** Translate a `namespace.key` and interpolate `{var}` placeholders. */
+  t: (key: string, vars?: ITVars) => string;
+  /** Format a number using `Intl.NumberFormat(locale)`. */
+  formatNumber: (value: number, options?: Intl.NumberFormatOptions) => string;
+  /** Format a currency using `Intl.NumberFormat(locale)`. */
+  formatCurrency: (value: number, currency?: string, options?: Intl.NumberFormatOptions) => string;
+  /** Format a date using `Intl.DateTimeFormat(locale)`. */
+  formatDate: (value: Date | number | string, options?: Intl.DateTimeFormatOptions) => string;
+  /** Matching `date-fns` locale. */
+  dateLocale: Locale;
+}
+
+/** Props for `ITI18nProvider`. */
+export interface ITI18nProviderProps {
+  /** Active locale. @default "es" */
+  locale?: string;
+  /** Fallback locale for missing keys. @default "es" */
+  fallbackLocale?: string;
+  /** Custom messages merged over the built-in catalog, keyed by locale. */
+  messages?: ITMessagesByLocale;
+  /** Application tree. */
+  children: ReactNode;
+}

package/src/i18n/useITTranslation.ts

@@ -0,0 +1,20 @@
+import { useContext } from "react";
+import { ITI18nContext } from "./context";
+import type { ITI18nValue } from "./types";
+
+/**
+ * Devuelve el traductor y los formateadores de la locale activa.
+ *
+ * Funciona aunque no exista `ITI18nProvider` (cae al catálogo base en español).
+ *
+ * @example
+ * ```tsx
+ * const { t, formatCurrency } = useITTranslation();
+ * return <ITButton label={t("common.cancel")} onClick={onCancel} />;
+ * ```
+ */
+export function useITTranslation(): ITI18nValue {
+  return useContext(ITI18nContext);
+}
+
+export default useITTranslation;

package/src/index.css

@@ -1,7 +1,6 @@
 @import "tailwindcss";
 
 @source "./**/*.{ts,tsx}";
-@source "../.storybook/**/*.{ts,tsx}";
 
 @variant dark (&:is(.dark &));
 

package/src/index.ts

@@ -138,6 +138,10 @@ import { createValidationSchema } from "./types/yup.types";
 
 import { getContrastTextColor, isLightColor, resolveCssColor } from "./utils/color.utils";
 
+// I18N
+import { ITI18nProvider, useITTranslation, esMessages, enMessages } from "./i18n";
+import type { ITI18nProviderProps, ITI18nValue, ITLocale, ITMessages, ITMessagesByLocale } from "./i18n";
+
 export {
   // Hooks
   useClickOutside, useDebouncedSearch, useEditableRow, useFloatingPanel, useTableState,
@@ -157,10 +161,12 @@ export {
   ITTable, ITTabs, ITText, ITTextarea, ITTripleFilter, ITThemeProvider,
   useITTheme, useITThemeSafe, useITFlatAppearance, ITTimePicker, ITToast, ITWysiwyg,
   UploadStatus, FileTypeEnum,
-  getContrastTextColor, isLightColor, resolveCssColor
+  getContrastTextColor, isLightColor, resolveCssColor,
+  ITI18nProvider, useITTranslation, esMessages, enMessages
 };
 
   export type {
+    ITI18nProviderProps, ITI18nValue, ITLocale, ITMessages, ITMessagesByLocale,
     Column, ColumnFilters, ColumnFilterMode, ColumnFilterValue, FieldConfig,
     FieldConfigV2,
     ITAccordionItem, ITAccordionProps,