Recetas

Recetas

Patrones que aparecen seguido cuando usás palta en producción.

Validar un campo de formulario

import { br } from '@zeluizr/palta'

function validarCpf(input: string): string | null {
  if (!input.trim()) return 'Ingresá tu CPF'
  if (!br.cpf.validate(input)) return 'CPF inválido'
  return null
}

validate acepta el valor con o sin formato, así que no hace falta limpiarlo antes.

Formatear mientras el usuario escribe

mask es la plantilla; el # marca dónde va cada dígito.

import { br } from '@zeluizr/palta'

function aplicarMascara(valor: string, mascara: string): string {
  const digitos = valor.replace(/\D/g, '')
  let salida = ''
  let i = 0

  for (const char of mascara) {
    if (i >= digitos.length) break
    salida += char === '#' ? digitos[i++] : char
  }

  return salida
}

aplicarMascara('11144477735', br.cpf.mask)  // '111.444.777-35'

En React:

const [cpf, setCpf] = useState('')

<input
  value={cpf}
  onChange={e => setCpf(aplicarMascara(e.target.value, br.cpf.mask))}
  placeholder={br.cpf.mask}
/>

Guardar limpio, mostrar formateado

La regla que evita casi todos los dolores de cabeza: en la base guardás dígitos, en la pantalla mostrás formato.

import { br } from '@zeluizr/palta'

// al guardar
const paraGuardar = br.cpf.strip(inputDelUsuario)   // '11144477735'

// al mostrar
const paraMostrar = br.cpf.format(valorDeLaBase)    // '111.444.777-35'

Así las búsquedas por documento funcionan sin importar cómo lo tipeó cada usuario.

Elegir el país en tiempo de ejecución

import * as palta from '@zeluizr/palta'

const paises = {
  BR: palta.br,
  CL: palta.cl,
  AR: palta.ar,
  DO: palta.do_,
} as const

function formatearMoneda(pais: keyof typeof paises, monto: number): string {
  return paises[pais].currency.format(monto)
}

formatearMoneda('BR', 1234.5)   // 'R$ 1.234,50'
formatearMoneda('CL', 1234.5)   // '$1.235'

Un mapa explícito es preferible a indexar el namespace con un string suelto: te da tipos y deja claro qué países soporta tu aplicación.

Un solo campo para varios países

import { detect } from '@zeluizr/palta'

function normalizarDocumento(input: string) {
  const r = detect(input)

  if (!r) return { ok: false, motivo: 'no reconocido' as const }
  if (!r.valid) return { ok: false, motivo: 'verificador inválido' as const, tipo: r.type }

  return { ok: true, pais: r.country, tipo: r.type, valor: r.formatted }
}

Los límites de detect() están en Detección. Si ya sabés el país, no la uses.

Mostrar precios de un catálogo multipaís

import * as palta from '@zeluizr/palta'

type Producto = { precio: number; pais: 'br' | 'cl' | 'co' }

function precio(p: Producto): string {
  return palta[p.pais].currency.format(p.precio)
}

Cada país aplica su convención: separadores, posición del símbolo y decimales por defecto.

Parsear un monto que llega como texto

import { br } from '@zeluizr/palta'

br.currency.parse('R$ 1.234,50')  // 1234.5
br.currency.parse('1.234,50')     // 1234.5

parse ignora símbolo, espacios y separadores de miles. Es lo correcto para leer montos de un CSV o de una API que ya devuelve texto formateado.

Proteger currency.format

format espera un número finito. Si el valor viene de afuera, verificalo:

import { br } from '@zeluizr/palta'

function precioSeguro(valor: unknown): string {
  const n = Number(valor)
  return Number.isFinite(n) ? br.currency.format(n) : '—'
}

Normalizar teléfonos para guardar

import { br } from '@zeluizr/palta'

const paraGuardar = br.phone.format('11987654321', { international: true })
// '+55 (11) 98765-4321'

const paraMostrar = br.phone.format('11987654321')
// '(11) 98765-4321'

Guardar en formato internacional evita ambigüedades cuando la base cruza países. Recordá que Brasil es el único que devuelve nacional por defecto.

Ficha de producto con medidas

import { measurements } from '@zeluizr/palta'

type Dimensiones = { alto: number; ancho: number; largo: number; peso: number }

function ficha(d: Dimensiones) {
  const { length, weight } = measurements
  return {
    alto: length.format(d.alto, 'cm'),
    ancho: length.format(d.ancho, 'cm'),
    largo: length.format(d.largo, 'cm'),
    peso: weight.format(d.peso, 'g'),
  }
}

ficha({ alto: 150, ancho: 50, largo: 30, peso: 2500 })
// { alto: '1,50 m', ancho: '50 cm', largo: '30 cm', peso: '2,50 kg' }

Más sobre esto en Medidas y VTEX IO.