kaizen-lib 0.2.4 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,6 +14,26 @@ styled-components con `moduleResolution: "bundler"`, así que lo transpilan ello
|
|
|
14
14
|
| `kaizen-lib/tokens.css` | Valores por defecto, tema oscuro y claro | listo |
|
|
15
15
|
| `kaizen-lib/ui` | Componentes (`IconButton`, `ReactionButton`, `Medidor`, `Relieve`, `LangSelector`) | en curso |
|
|
16
16
|
|
|
17
|
+
## ¿Qué uso para qué?
|
|
18
|
+
|
|
19
|
+
Antes de escribir un `styled.button` a mano o un ciclador de idioma propio, revisá esta
|
|
20
|
+
tabla. Si tu caso está acá, es un defecto reconstruirlo local — usá esto, y si no
|
|
21
|
+
alcanza, extendé el componente en vez de bypassearlo (ver `implement.md` del harness:
|
|
22
|
+
"un duplicado local de algo que ya existe compartido se reemplaza por el compartido").
|
|
23
|
+
|
|
24
|
+
| Necesito... | Uso | No es... |
|
|
25
|
+
|---|---|---|
|
|
26
|
+
| Un botón redondo de sólo ícono en una topbar (notificaciones, perfil, cerrar) | `IconButton` | — |
|
|
27
|
+
| Que ese botón tenga fondo teñido cuando está seleccionado (la página actual, un filtro aplicado) | `IconButton` con `active` | `ReactionButton` (ver abajo, distinción a propósito) |
|
|
28
|
+
| Un ícono que cambia de color al reaccionar (me gusta, guardar, favorito) — **sin** fondo teñido | `ReactionButton` | `IconButton` con `active` |
|
|
29
|
+
| El relieve neumórfico (círculo con sombra, sin relleno) alrededor de un `IconButton` | `Relieve` envolviendo el `IconButton` | una prop de `IconButton` — ver por qué en su docblock |
|
|
30
|
+
| Un ciclador de idioma con banderas en la topbar | `LangSelector` | reconstruir el ciclado a mano — ya lo resuelve, con `Relieve` incluido |
|
|
31
|
+
| Un arco/medidor que muestra cuánto de un total está ocupado | `Medidor` | un `<progress>` o una barra propia |
|
|
32
|
+
| Espaciado, radios, color, tipografía, sombra | `kaizen-lib/tokens` (`space`, `radius`, `fg`, `accent`, `font`, `shadow`, `relief`...) | un valor a mano — cada uno es una referencia `var(--kz-*)` |
|
|
33
|
+
|
|
34
|
+
Ningún componente trae íconos ni banderas: los recibe como `children`/`icono`, y el
|
|
35
|
+
producto elige de dónde salen (`react-icons`, `react-country-flag`, SVG propio).
|
|
36
|
+
|
|
17
37
|
## Instalación
|
|
18
38
|
|
|
19
39
|
```bash
|