kaizen-lib 0.2.1 → 0.2.3

package/README.md

@@ -12,7 +12,7 @@ styled-components con `moduleResolution: "bundler"`, así que lo transpilan ello
 |---|---|---|
 | `kaizen-lib/tokens` | Referencias `var(--kz-*)` tipadas | listo |
 | `kaizen-lib/tokens.css` | Valores por defecto, tema oscuro y claro | listo |
-| `kaizen-lib/ui` | Componentes (`IconButton`, `ReactionButton`, `Medidor`, `Relieve`) | en curso |
+| `kaizen-lib/ui` | Componentes (`IconButton`, `ReactionButton`, `Medidor`, `Relieve`, `LangSelector`) | en curso |
 
 ## Instalación
 
@@ -171,6 +171,32 @@ intercepta el `as` de cualquier componente que envuelve, así que envolverlo as
 saltear toda su lógica. El relieve es neutro por defecto (negro/blanco) — un producto con
 marca lo tiñe redefiniendo esos tres tokens, igual que con cualquier otro.
 
+```tsx
+import { LangSelector } from 'kaizen-lib/ui';
+
+<LangSelector
+  actual={i18n.language}
+  onChange={(codigo) => i18n.changeLanguage(codigo)}
+  etiqueta={(siguiente) => `Cambiar idioma a ${siguiente.nombre}`}
+  opciones={[
+    { codigo: 'es', nombre: 'Español', icono: <ReactCountryFlag countryCode="AR" /> },
+    { codigo: 'en', nombre: 'English', icono: <ReactCountryFlag countryCode="US" /> },
+  ]}
+/>
+```
+
+**`LangSelector`** es el botón de idioma de una topbar: cicla a la siguiente opción en
+cada tap y muestra el ícono del idioma actual, con el relieve de `Relieve` ya incluido
+(a diferencia de `IconButton`, acá no hace falta envolverlo aparte — todo consumidor lo
+quería). No trae banderas — mismo criterio que `IconButton` no trae íconos —, así que
+`icono` es cosa del producto; `react-country-flag` (ya usado en tuxon-front) es una
+opción probada. `etiqueta` arma el nombre accesible a partir de la opción siguiente y la
+actual — es obligatoria y sin default: la frase y el idioma son del producto (dos ya
+difieren: uno anuncia el destino, "Cambiar idioma a English"; otro el estado, "Idioma:
+English. Cambiar idioma"). `onChange` recibe el código de la opción siguiente; qué hacer
+con eso (`i18n.changeLanguage`, `next-intl`, lo que sea) es del producto — la librería no
+sabe qué mecanismo de traducción hay atrás.
+
 ## Desarrollo
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaizen-lib",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Tokens y componentes compartidos entre los fronts de Kaizen.",
   "license": "MIT",
   "author": "Nicolás Sandobal",

package/src/ui/LangSelector.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { IconButton } from './IconButton';
+import { Relieve } from './Relieve';
+import type { IconButtonSize } from './shell';
+
+/**
+ * Una opción del selector: el código de idioma, su nombre (para el nombre
+ * accesible) y el ícono que lo representa. La librería no trae banderas —
+ * mismo criterio que `IconButton` no trae íconos — porque una bandera bien
+ * hecha es un SVG por país, no algo que valga la pena embeber en un paquete
+ * sin build. `react-country-flag` (ya usado en tuxon-front) es una opción
+ * probada; cualquier ícono sirve.
+ */
+export type OpcionDeIdioma<T extends string> = {
+  codigo: T;
+  /** Nombre del idioma, en ese idioma ("English", no "Inglés"). */
+  nombre: string;
+  icono: ReactNode;
+};
+
+type Props<T extends string> = {
+  opciones: OpcionDeIdioma<T>[];
+  actual: T;
+  onChange: (codigo: T) => void;
+  /**
+   * Arma el nombre accesible del botón, a partir de la opción actual y la
+   * siguiente (a la que se pasa al tocar). Obligatoria y sin default: qué
+   * frase decir y en qué idioma es del producto, la librería no lo fija.
+   * Dos productos ya difieren en esto mismo — uno anuncia el destino
+   * ("Cambiar idioma a English"), otro el estado ("Idioma: English. Cambiar
+   * idioma") — y los dos son legítimos.
+   */
+  etiqueta: (siguiente: OpcionDeIdioma<T>, actual: OpcionDeIdioma<T>) => string;
+  size?: IconButtonSize;
+};
+
+/**
+ * El botón de idioma de una topbar: cicla a la siguiente opción en cada tap
+ * y muestra el ícono del idioma actual. No es un `<select>` ni un menú — es
+ * el mismo patrón que ya tenían, cada uno por su cuenta, mixbol-front,
+ * nsandev-front, tutipoker-school-front y valle-verde antes de esto.
+ *
+ * Trae el relieve neumórfico (`Relieve`) incluido: a diferencia de
+ * `IconButton`, acá no hace falta envolverlo aparte, porque el 100% de los
+ * consumidores lo quería.
+ *
+ * `onChange` recibe el CÓDIGO de la opción siguiente — qué hacer con eso
+ * (`i18n.changeLanguage`, guardarlo en `localStorage`, lo que sea) es del
+ * producto. La librería no sabe qué mecanismo de traducción hay atrás.
+ *
+ * ```tsx
+ * <LangSelector
+ *   actual={idiomaActual}
+ *   onChange={(codigo) => i18n.changeLanguage(codigo)}
+ *   etiqueta={(siguiente) => `Cambiar idioma a ${siguiente.nombre}`}
+ *   opciones={[
+ *     { codigo: 'es', nombre: 'Español', icono: <ReactCountryFlag countryCode="AR" /> },
+ *     { codigo: 'en', nombre: 'English', icono: <ReactCountryFlag countryCode="US" /> },
+ *   ]}
+ * />
+ * ```
+ */
+export function LangSelector<T extends string>({ opciones, actual, onChange, etiqueta, size = 'lg' }: Props<T>) {
+  // Sin opciones no hay nada que ciclar. Defensivo: un selector de idioma
+  // vacío es un error de uso, no algo que la librería deba explicar.
+  if (opciones.length === 0) return null;
+
+  const indiceActual = opciones.findIndex((opcion) => opcion.codigo === actual);
+  const opcionActual = opciones[indiceActual < 0 ? 0 : indiceActual] as OpcionDeIdioma<T>;
+  const siguiente = opciones[(indiceActual + 1 + opciones.length) % opciones.length] as OpcionDeIdioma<T>;
+
+  return (
+    <Relieve>
+      <IconButton size={size} label={etiqueta(siguiente, opcionActual)} onClick={() => onChange(siguiente.codigo)}>
+        {opcionActual.icono}
+      </IconButton>
+    </Relieve>
+  );
+}

package/src/ui/index.ts

@@ -5,3 +5,5 @@ export type { MedidorSentido } from './Medidor';
 export { Relieve } from './Relieve';
 export { ReactionButton } from './ReactionButton';
 export type { ReactionTone } from './ReactionButton';
+export { LangSelector } from './LangSelector';
+export type { OpcionDeIdioma } from './LangSelector';