@komensal/ui 0.2.2 → 0.4.0
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 +92 -0
- package/dist/index.d.ts +550 -3
- package/dist/index.js +101 -20
- package/dist/index.js.map +1 -1
- package/package.json +11 -7
package/README.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# @komensal/ui
|
|
2
|
+
|
|
3
|
+
Design system y librería de componentes React compartida de Komensal. Empaquetada con [tsup](https://tsup.egoist.dev/) y publicada en npm para consumirse desde los fronts standalone (`@komensal/admin`, `@komensal/menu`).
|
|
4
|
+
|
|
5
|
+
## Instalación
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @komensal/ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
### Peer dependencies
|
|
12
|
+
|
|
13
|
+
El paquete las espera instaladas en el proyecto consumidor:
|
|
14
|
+
|
|
15
|
+
| Paquete | Rango |
|
|
16
|
+
|---|---|
|
|
17
|
+
| `react` | `^19.0.0` |
|
|
18
|
+
| `react-dom` | `^19.0.0` |
|
|
19
|
+
| `react-hook-form` | `^7.0.0` |
|
|
20
|
+
| `react-i18next` | `^16.0.0` |
|
|
21
|
+
| `i18next` | `^25.0.0` |
|
|
22
|
+
|
|
23
|
+
## Uso
|
|
24
|
+
|
|
25
|
+
### 1. Estilos
|
|
26
|
+
|
|
27
|
+
El paquete trae sus tokens (Tailwind v4) y estilos. Importalos una vez en tu CSS global, junto a Tailwind:
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import 'tailwindcss';
|
|
31
|
+
@import '@komensal/ui/styles';
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### 2. Componentes
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { Button, InputField, Dialog } from '@komensal/ui'
|
|
38
|
+
|
|
39
|
+
export function Example() {
|
|
40
|
+
return <Button variant='primary'>Continuar</Button>
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 3. Internacionalización (i18n)
|
|
45
|
+
|
|
46
|
+
El paquete es **autocontenido**: tiene su propia instancia de i18next con sus textos (español por defecto), así que **no hace falta registrar ningún namespace** en la instancia del consumidor. Los componentes resuelven sus textos internos solos.
|
|
47
|
+
|
|
48
|
+
Si el app cambia de idioma, sincronizá la instancia del paquete:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
import { setUiLanguage } from '@komensal/ui'
|
|
52
|
+
|
|
53
|
+
await setUiLanguage('en')
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
#### Override de textos por props
|
|
57
|
+
|
|
58
|
+
Si un texto interno no te sirve, podés pasarlo por prop al componente; gana el tuyo sobre el del paquete:
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
<Spinner loadingLabel='Procesando...' />
|
|
62
|
+
<SelectInput noResultsLabel='Nada por aquí' searchPlaceholder='Buscar plato...' />
|
|
63
|
+
<InputField clearLabel='Borrar' showPasswordLabel='Ver' hidePasswordLabel='Ocultar' />
|
|
64
|
+
<DialogContent closeLabel='Cerrar' />
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Componentes disponibles
|
|
68
|
+
|
|
69
|
+
- **Acciones:** `Button`
|
|
70
|
+
- **Formularios (React Hook Form):** `Input`, `SelectInput`, `Select`, `OTPInput`, `Form`, `InputField`, `LabelField`, `SelectField`, `OtpField`, `MapPickerField`, `Label`, `PasswordChecklist`
|
|
71
|
+
- **Overlays:** `Dialog`, `Popover`, `Tooltip`, `Command`
|
|
72
|
+
- **Feedback / estado:** `Alert`, `Toast` + `ToastProvider`, `Spinner`, `Loading`
|
|
73
|
+
- **Layout:** `AuthHeader`, `StepHeader`, `Stepper`, `Wrapper`
|
|
74
|
+
- **Mapas:** `GoogleMapPicker`
|
|
75
|
+
- **Utils:** `cn`, `inputBase`, `inputFocus`, `inputDisabled`, `inputPlaceholder`, `toast`, `registerToastEmitter`
|
|
76
|
+
|
|
77
|
+
## Exports
|
|
78
|
+
|
|
79
|
+
| Entry | Contenido |
|
|
80
|
+
|---|---|
|
|
81
|
+
| `@komensal/ui` | Componentes, utils, tipos, `uiI18n`, `setUiLanguage` |
|
|
82
|
+
| `@komensal/ui/styles` | CSS con tokens del design system |
|
|
83
|
+
| `@komensal/ui/locales` | `uiLocales` (textos del paquete, por si los necesitás aparte) |
|
|
84
|
+
|
|
85
|
+
## Desarrollo
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
pnpm build # tsup + copia de assets a dist/
|
|
89
|
+
pnpm typecheck # tsc --noEmit
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
Para publicar una versión nueva: subir `version` en `package.json`, `pnpm build` y `pnpm publish`. Los consumidores la toman actualizando su rango de `@komensal/ui`.
|