Formateo, fechas, moneda y helpers de clases. Aburrido y crítico: la mitad de los bugs de presentación son una fecha o un número formateado de dos maneras distintas.
entrada: '2026-08-22' (sáb 22 de agosto, sin hora)
| función | firma usada | salida |
|---|---|---|
| formatDate | (fecha, 'es-AR') | 22 de ago de 2026 |
| formatDateShort | (fecha, 'es-AR') | 22-ago |
| formatShortDate | (fecha) | 22 ago 26 |
| formatDateCompact | (fecha, 'es-AR') | 22/08/26 |
| formatDateTime | (fecha, 'es-AR') | 22/8/2026, 12:00:00 |
| formatDateTimeShort | (fecha, 'es-AR') | 22/08/2026 00:00 |
| toDateInputValue | (fecha) | 2026-08-22 |
en rojo: le restan un día a la entrada, o convierten la ausencia de hora en "09:00:00".
| función | entrada | salida |
|---|---|---|
| formatDate | '2026-08-22' (string) | 22 de ago de 2026 |
| formatDate | new Date(2026, 7, 22) | 22 de ago de 2026 |
| formatDateShort | '2026-08-22' (string) | 22-ago |
| formatDateShort | new Date(2026, 7, 22) | 22-ago |
| función | entrada | salida |
|---|---|---|
| formatCurrency | 1.500 (ARS, es-AR, 0 dec) | $ 1.500 |
| formatCurrency | 1.500 (default: sin pasar nada) | 1500,00 € |
| formatCurrency | 0 (ARS) | $ 0 |
| formatCurrency | -85.000, reembolso (ARS) | -$ 85.000 |
| formatCurrency | null (ARS) | — |
| formatCurrency | undefined (default) | — |
| formatCurrency | 128.450.000, franquicia (ARS) | $ 128.450.000 |
| formatCurrencyCompact | 1.500 (ARS) | 1,5 mil ARS |
| formatCurrencyCompact | 12.500.000 (ARS) | 12,5 M ARS |
en rojo: al default (EUR, símbolo €) se le cae el separador de miles en montos de 4 cifras, y la versión compacta no conoce el símbolo $ aunque se le pase ARS.
| función | entrada | salida |
|---|---|---|
| formatDuration | 135 min | 2h15m |
| formatDurationMinutes | 135 min | 2h 15min |
| formatDurationMs | 135 min → 8.100.000 ms | 2.25 h |
| formatDuration | 0 min | <1m |
| formatDurationMinutes | 0 min | 0min |
| formatDurationMs | 0 ms | - |
| formatDurationMinutes | -30 min (dato corrupto) | -1h -30min |
| formatDuration | -30 min (mismo dato corrupto) | <1m |
los mismos 135 minutos: "2h15m", "2h 15min" y "2.25 h" — tres formas sin relación visual entre sí.
| función | entrada fija | salida |
|---|---|---|
| formatRelativeTime | 2026-08-18 | ayer |
| formatTimeAgo | 2026-08-18 | Ayer |
| timeAgo | 2026-08-18 | 1d ago |
| formatRelativeTime | 2026-07-01 | hace 1mes |
| formatTimeAgo | 2026-07-01 | 1 meses |
| timeAgo | 2026-07-01 | 1mo ago |
timeAgo responde en inglés en un archivo por lo demás en español; formatTimeAgo pluraliza "1 meses". El texto exacto se corre con el calendario real — es el comportamiento esperado de una función relativa, no un mismatch de hidratación.
entrada (110 caracteres): Salón de eventos Los Álamos — locación completa con terraza, cocina industrial y estacionamiento para 40 autos
| maxLen | entrada | truncate(str, maxLen) |
|---|---|---|
| 20 | descripción de arriba | Salón de eventos Lo… |
| 40 | descripción de arriba | Salón de eventos Los Álamos — locación … |
| 80 | descripción de arriba | Salón de eventos Los Álamos — locación completa con terraza, cocina industrial … |
| 200 | más corta que el límite | Salón de eventos Los Álamos — locación completa con terraza, cocina industrial y estacionamiento para 40 autos |
| 40 | null | (cadena vacía) |
| 40 | undefined | (cadena vacía) |
| 40 | '' (string vacío) | (cadena vacía) |
| función | entrada | salida |
|---|---|---|
| formatTokens | 0 tokens | 0 |
| formatTokens | 1.234 tokens (msj. de Lucy) | 1.2K |
| formatTokens | 3.400.000 tokens (consumo del mes) | 3.4M |
| formatTokens | NaN (dato corrupto) | NaN |
| formatTokens | -500 (dato corrupto) | -500 |
| formatDayCount | 0.5 días | <1d |
| formatDayCount | 14 días (próximo pedido de insumos) | 14d |
| formatDayCount | 45 días | 2mo |
| formatDayCount | 400 días | 1y |
| formatDayCount | NaN (dato corrupto) | NaNy |
| entrada | formatPhoneDisplay | normalizePhone | isValidPhone | extractCountryCode |
|---|---|---|---|---|
| +5493511234567 | +549 3511234567 | +5493511234567 | true | 549 |
| 3511234567 | 3511234567 | 3511234567 | true | null |
| (vacío) | (cadena vacía) | null | false | null |
| null | (cadena vacía) | null | false | null |
| reservas@losalamos | reservas@losalamos | null | false | null |
Heladería Luigi
#d4e038 · claro · oscurecido #7f8622
Charter del Sur
#0f4c5c · oscuro · oscurecido #092e37
Salón Los Álamos
#c2410c · oscuro · oscurecido #742707
| cn(...) | contexto | clase resultante |
|---|---|---|
| cn('px-2 py-1', 'px-4') | padding en conflicto | py-1 px-4 |
| cn('bg-container', 'bg-upper') | fondo en conflicto | bg-upper |
| cn('text-content/50', 'text-primary') | color de texto en conflicto | text-primary |
| cn('border-content/10', activo && 'border-primary') | activo = true | border-primary |
| cn('border-content/10', activo && 'border-primary') | activo = false | border-content/10 |
Medido, no elegido: sale de cruzar los 254 símbolos del kit que aparecen en el código de GestorSalon contra los que estos especímenes montaban. Cada ficha trae el especificador de import y las props que el producto realmente le pasa.
@solu30/ui-kit/utils0 usos · 3 archivosLa paleta de temporadas y la función que elige el próximo color libre. Sin ella, cada vertical inventa su propio arreglo de colores y dos temporadas terminan del mismo color.
1 en uso · el próximo libre que devuelve el kit es #10B981
Los ocho hex de la paleta son el ÚNICO lugar del kit donde el color se escribe como valor y no como token, y es a propósito: una temporada es un dato que se guarda en la base de datos y tiene que sobrevivir a un cambio de tema. Igual sale del paquete, no de cada vertical.
@solu30/ui-kit/utils2 usos · 1 archivosLee un «mes-día» sin año (una temporada que se repite) o con año (una fecha puntual). `isConsistentYearing` valida la regla que nadie recuerda: o los dos extremos tienen año, o ninguno.
parseMonthDay(«12-01») → mes 12, día 1, sin año
parseMonthDay(«2027-01-01») → mes 1, día 1, año 2027
isConsistentYearing(12-01, 03-15) → true · los dos sin año, la temporada se repite todos los años
isConsistentYearing(2027-01-01, 03-15) → false · uno con año y el otro sin año es la combinación inválida
`parseMonthDay` LANZA con una entrada inválida — no devuelve null. Para input de usuario va `tryParseMonthDay`, que devuelve `undefined`. GestorSalon usa la que lanza; vale la pena mirar dónde.
@solu30/ui-kit/utils0 usos · 1 archivosLa cadena de clases del kit para un `<select>` nativo. No es un componente y por eso nunca aparece en un catálogo de componentes — que es exactamente por qué se reescribe a mano.
Un `<select>` nativo de verdad, con la cadena de clases del kit. Es la salida honesta cuando no hace falta el `Select` compuesto: teclado, accesibilidad y menú nativo del sistema gratis, y el aspecto igual al resto. Lo que no hay que hacer es un select nativo SIN esto, que es como quedan los nueve que tiene GestorSalon hoy.
`getNextSeasonColor` e `isConsistentYearing` están corriendo en los especímenes de arriba. `ContrastColors` no es un valor: es el tipo que devuelve `getContrastColors`, el helper que elige texto claro u oscuro sobre un color de fondo arbitrario — el que evita que el nombre de una temporada quede ilegible sobre su propio color.
| Símbolo | De dónde | Usos | Props que le pasa GestorSalon |
|---|---|---|---|
| getNextSeasonColor | @solu30/ui-kit/utils | 2 | — |
| isConsistentYearing | @solu30/ui-kit/utils | 1 | — |
| ContrastColors | sólo tipo | 0 | — |