Spec Frontend Com React • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 11.1 — Definição de Schema com z.object() e Inferência de Tipos z.infer

Contexto: Definição de Schema com z.object() e Inferência de Tipos z.infer no contexto de Validação de Schemas de Formulários com Zod.

Requisitos de Execução:

  1. Criar schema Zod para cadastro de usuário e inferir a interface TypeScript automaticamente.

Resultado Esperado

Schema Zod validando tipos e gerando tipos TypeScript estritos.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_11_1_SeuNome
  2. Envie na tarefa: Atividade Cap 11 - Validação de Schemas de Formulários com Zod
🔑 Gabarito de Código & Solução Comentada 
// userSchema.ts
import { z } from 'zod';

export const userSchema = z.object({
  nome: z.string().min(3, 'Nome muito curto'),
  email: z.string().email('E-mail inválido'),
  idade: z.number().min(18, 'Idade mínima 18 anos'),
});

export type UserFormData = z.infer<typeof userSchema>;

🔍 Nível 2: Prática

Problema 11.2 — Integração do Zod com React Hook Form via @hookform/resolvers/zod

Contexto: Integração do Zod com React Hook Form via @hookform/resolvers/zod no contexto de Validação de Schemas de Formulários com Zod.

Requisitos de Execução:

  1. Conectar schema Zod ao useForm({ resolver: zodResolver(userSchema) }).

Resultado Esperado

Validação completa de formulário delegada ao Zod.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_11_2_SeuNome
  2. Envie na tarefa: Atividade Cap 11 - Validação de Schemas de Formulários com Zod
🔑 Gabarito de Código & Solução Comentada 
// FormZod.tsx
import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { userSchema, UserFormData } from './userSchema';

export const FormZod = () => {
  const { register, handleSubmit, formState: { errors } } = useForm<UserFormData>({
    resolver: zodResolver(userSchema),
  });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input {...register('nome')} />
      {errors.nome && <span>{errors.nome.message}</span>}
      <button type="submit">Cadastrar</button>
    </form>
  );
};

⚡ Nível 3: Integração

Problema 11.3 — Validação Cruzada de Confirmação de Senha com .refine()

Contexto: Validação Cruzada de Confirmação de Senha com .refine() no contexto de Validação de Schemas de Formulários com Zod.

Requisitos de Execução:

  1. Validar se o campo senha e confirmarSenha são idênticos usando .refine() no schema Zod.

Resultado Esperado

Validação de confirmação de senha executada com sucesso.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_11_3_SeuNome
  2. Envie na tarefa: Atividade Cap 11 - Validação de Schemas de Formulários com Zod
🔑 Gabarito de Código & Solução Comentada 
// passwordSchema.ts
import { z } from 'zod';

export const registerSchema = z.object({
  senha: z.string().min(8, 'Mínimo 8 caracteres'),
  confirmarSenha: z.string(),
}).refine(data => data.senha === data.confirmarSenha, {
  message: 'As senhas não conferem',
  path: ['confirmarSenha'],
});

🏆 Nível 4: Desafio Corporativo

Problema 11.4 — Transformações de Dados com .transform() no Zod

Contexto: Transformações de Dados com .transform() no Zod no contexto de Validação de Schemas de Formulários com Zod.

Requisitos de Execução:

  1. Criar schema que remova caracteres não-numéricos de CEP/CPF e converta strings vazias em null.

Resultado Esperado

Dados sanitizados automaticamente durante a validação Zod.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_11_4_SeuNome
  2. Envie na tarefa: Atividade Cap 11 - Validação de Schemas de Formulários com Zod
🔑 Gabarito de Código & Solução Comentada 
// transformSchema.ts
import { z } from 'zod';

export const cpfSchema = z.string()
  .transform(val => val.replace(/\D/g, ''))
  .refine(val => val.length === 11, 'CPF deve conter exatamente 11 dígitos');
const statusConcluido = true;
console.log('Validação de execução concluída');