Noções Básicas de Zod

import { z } from "zod";
 
// 1. Defina um esquema
const UserSchema = z.object({
  name: z.string().min(1, "O nome é obrigatório"),
  email: z.string().email("Email inválido"),
  age: z.number().int().min(18, "Deve ter 18+ anos"),
});
 
// 2. Parse (lança em caso de falha)
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 lança)
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, "O nome é obrigatório").max(100, "Nome muito longo"),
  email: z.string().email("Por favor, insira um email válido"),
  message: z
    .string()
    .min(10, "A mensagem deve ter pelo menos 10 caracteres")
    .max(1000, "Mensagem muito longa"),
});
 
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="Nome" 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="Mensagem" 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 é obrigatório",
  invalid_type_error: "Esperava uma string",
}).min(1, { message: "Não pode estar vazio" });

z.setErrorMap((issue, ctx) => {
  if (issue.code === z.ZodIssueCode.too_small) {
    return { message: `O comprimento mínimo é ${issue.minimum}` };
  }
  return { message: ctx.defaultError };
});

const result = schema.safeParse(data);
if (!result.success) {
  // Achatado - ótimo para formulários simples
  result.error.flatten();
  // { formErrors: string[], fieldErrors: { name?: string[], email?: string[] } }
 
  // Formatado - ótimo para objetos aninhados
  result.error.format();
  // { name: { _errors: string[] }, address: { city: { _errors: string[] } } }
}

// O tipo inferido corresponde exatamente ao esquema
type User = z.infer<typeof UserSchema>;
// { name: string; email: string; age: number }
 
// ZodError é genérico - você pode tipá-lo
const result = UserSchema.safeParse(data);
if (!result.success) {
  const err: z.ZodError<User> = result.error;
}
 
// Use z.ZodType para aceitar qualquer esquema como parâmetro
function validate<T>(schema: z.ZodType<T>, data: unknown): T {
  return schema.parse(data);
}

// Exemplo de produção: Esquema de Banner com padrões, anulável e validação entre campos
// Arquivo: src/schemas/banner.ts
import { z } from 'zod';
 
export const BannerSchema = z.object({
  title: z.string().min(1, 'O título é obrigatório').max(100),
  subtitle: z.string().optional().default(''),
  imageUrl: z.string().url('Deve ser uma URL válida').nullable(),
  linkUrl: z.string().url('Deve ser uma URL válida').optional(),
  linkText: z.string().optional().default('Saiba mais'),
  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: 'A data de término deve ser posterior à data de início',
    path: ['endDate'],
  }
);
 
// Extrai o tipo TypeScript do esquema
export type Banner = z.infer<typeof BannerSchema>;
// {
//   title: string;
//   subtitle: string;       // padrão ''
//   imageUrl: string | null; // anulável
//   linkUrl?: string;        // opcional, sem padrão
//   linkText: string;        // padrão 'Saiba mais'
//   isActive: boolean;       // padrão true
//   startDate: Date;
//   endDate: Date | null;
//   priority: number;        // padrão 50
// }