@komensal/ui

Design system y librería de componentes React compartida de Komensal. Empaquetada con tsup y publicada en npm para consumirse desde los fronts standalone (@komensal/admin, @komensal/menu).

Instalación

pnpm add @komensal/ui

Peer dependencies

El paquete las espera instaladas en el proyecto consumidor:

| Paquete | Rango | |---|---| | react | ^19.0.0 | | react-dom | ^19.0.0 | | react-hook-form | ^7.0.0 | | react-i18next | ^16.0.0 | | i18next | ^25.0.0 |

Uso

1. Estilos

El paquete trae sus tokens (Tailwind v4) y estilos. Importalos una vez en tu CSS global, junto a Tailwind:

@import 'tailwindcss';
@import '@komensal/ui/styles';

2. Componentes

import { Button, InputField, Dialog } from '@komensal/ui'

export function Example() {
  return <Button variant='primary'>Continuar</Button>
}

3. Internacionalización (i18n)

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.

Si el app cambia de idioma, sincronizá la instancia del paquete:

import { setUiLanguage } from '@komensal/ui'

await setUiLanguage('en')

Override de textos por props

Si un texto interno no te sirve, podés pasarlo por prop al componente; gana el tuyo sobre el del paquete:

<Spinner loadingLabel='Procesando...' />
<SelectInput noResultsLabel='Nada por aquí' searchPlaceholder='Buscar plato...' />
<InputField clearLabel='Borrar' showPasswordLabel='Ver' hidePasswordLabel='Ocultar' />
<DialogContent closeLabel='Cerrar' />

Componentes disponibles

• Acciones: Button
• Formularios (React Hook Form): Input, SelectInput, Select, OTPInput, Form, InputField, LabelField, SelectField, OtpField, MapPickerField, Label, PasswordChecklist
• Overlays: Dialog, Popover, Tooltip, Command
• Feedback / estado: Alert, Toast + ToastProvider, Spinner, Loading
• Layout: AuthHeader, StepHeader, Stepper, Wrapper
• Mapas: GoogleMapPicker
• Utils: cn, inputBase, inputFocus, inputDisabled, inputPlaceholder, toast, registerToastEmitter

Exports

| Entry | Contenido | |---|---| | @komensal/ui | Componentes, utils, tipos, uiI18n, setUiLanguage | | @komensal/ui/styles | CSS con tokens del design system | | @komensal/ui/locales | uiLocales (textos del paquete, por si los necesitás aparte) |

Desarrollo

pnpm build       # tsup + copia de assets a dist/
pnpm typecheck   # tsc --noEmit

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.