Conceptos básicos de Zod

import { z } from "zod";
 
// 1. Define un esquema
const UserSchema = z.object({
  name: z.string().min(1, "El nombre es requerido"),
  email: z.string().email("Email inválido"),
  age: z.number().int().min(18, "Debe ser mayor de 18"),
});
 
// 2. Parse (lanza en caso de fallo)
try {
  const user = UserSchema.parse({ name: "Ada", email: "ada@example.com", age: 30 });
  console.log(user); // tipado como { name: string; email: string; age: number }
} catch (err) {
  if (err instanceof z.ZodError) {
    console.error(err.issues);
  }
}
 
// 3. safeParse (nunca lanza)
const result = UserSchema.safeParse({ name: "", email: "bad", age: 15 });
if (!result.success) {
  console.error(result.error.flatten());
} else {
  console.log(result.data);
}

"use client";
 
import { useState } from "react";
import { z } from "zod";
 
const ContactSchema = z.object({
  name: z.string().min(1, "El nombre es requerido").max(100, "El nombre es muy largo"),
  email: z.string().email("Por favor ingresa un email válido"),
  message: z
    .string()
    .min(10, "El mensaje debe tener al menos 10 caracteres")
    .max(1000, "El mensaje es muy largo"),
});
 
type ContactData = z.infer<typeof ContactSchema>;
 
export function ContactValidator() {
  const [errors, setErrors] = useState<Record<string, string[]>>({});
  const [success, setSuccess] = useState<ContactData | null>(null);
 
  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const raw = {
      name: formData.get("name"),
      email: formData.get("email"),
      message: formData.get("message"),
    };
 
    const result = ContactSchema.safeParse(raw);
 
    if (!result.success) {
      const flat = result.error.flatten();
      setErrors(flat.fieldErrors as Record<string, string[]>);
      setSuccess(null);
    } else {
      setErrors({});
      setSuccess(result.data);
    }
  }
 
  return (
    <form onSubmit={handleSubmit} className="flex max-w-md flex-col gap-3">
      <div>
        <input name="name" placeholder="Nombre" className="w-full rounded border p-2" />
        {errors.name && <p className="text-sm text-red-600">{errors.name[0]}</p>}
      </div>
      <div>
        <input name="email" placeholder="Email" className="w-full rounded border p-2" />
        {errors.email && <p className="text-sm text-red-600">{errors.email[0]}</p>}
      </div>
      <div>
        <textarea name="message" placeholder="Mensaje" className="w-full rounded border p-2" />
        {errors.message && <p className="text-sm text-red-600">{errors.message[0]}</p>}
      </div>
      <button type="submit" className="rounded bg-blue-600 px-4 py-2 text-white">
        Validar
      </button>
      {success && (
        <pre className="rounded bg-green-50 p-3 text-sm">{JSON.stringify(success, null, 2)}</pre>
      )}
    </form>
  );
}

const schema = z.string({
  required_error: "Este campo es requerido",
  invalid_type_error: "Se esperaba un string",
}).min(1, { message: "No puede estar vacío" });

z.setErrorMap((issue, ctx) => {
  if (issue.code === z.ZodIssueCode.too_small) {
    return { message: `La longitud mínima es ${issue.minimum}` };
  }
  return { message: ctx.defaultError };
});

const result = schema.safeParse(data);
if (!result.success) {
  // Aplanado - excelente para formularios simples
  result.error.flatten();
  // { formErrors: string[], fieldErrors: { name?: string[], email?: string[] } }
 
  // Formateado - excelente para objetos anidados
  result.error.format();
  // { name: { _errors: string[] }, address: { city: { _errors: string[] } } }
}

// El tipo inferido coincide exactamente con el esquema
type User = z.infer<typeof UserSchema>;
// { name: string; email: string; age: number }
 
// ZodError es genérico - puedes tiparlo
const result = UserSchema.safeParse(data);
if (!result.success) {
  const err: z.ZodError<User> = result.error;
}
 
// Usa z.ZodType para aceptar cualquier esquema como parámetro
function validate<T>(schema: z.ZodType<T>, data: unknown): T {
  return schema.parse(data);
}

// Ejemplo de producción: esquema Banner con defaults, nullable y validación entre campos
// Archivo: src/schemas/banner.ts
import { z } from 'zod';
 
export const BannerSchema = z.object({
  title: z.string().min(1, 'El título es requerido').max(100),
  subtitle: z.string().optional().default(''),
  imageUrl: z.string().url('Debe ser una URL válida').nullable(),
  linkUrl: z.string().url('Debe ser una URL válida').optional(),
  linkText: z.string().optional().default('Más información'),
  isActive: z.boolean().default(true),
  startDate: z.coerce.date(),
  endDate: z.coerce.date().nullable(),
  priority: z.number().int().min(0).max(100).default(50),
}).refine(
  (data) => {
    if (data.endDate && data.startDate) {
      return data.endDate > data.startDate;
    }
    return true;
  },
  {
    message: 'La fecha de fin debe ser después de la fecha de inicio',
    path: ['endDate'],
  }
);
 
// Extrae el tipo TypeScript del esquema
export type Banner = z.infer<typeof BannerSchema>;
// {
//   title: string;
//   subtitle: string;       // defaults a ''
//   imageUrl: string | null; // nullable
//   linkUrl?: string;        // optional, sin default
//   linkText: string;        // defaults a 'Más información'
//   isActive: boolean;       // defaults a true
//   startDate: Date;
//   endDate: Date | null;
//   priority: number;        // defaults a 50
// }