diff --git a/apps/zod/.gitignore b/apps/zod/.gitignore new file mode 100644 index 0000000..49ceb21 --- /dev/null +++ b/apps/zod/.gitignore @@ -0,0 +1,22 @@ +# build output +dist/ +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store +.vercel diff --git a/apps/zod/README.md b/apps/zod/README.md new file mode 100644 index 0000000..1dae553 --- /dev/null +++ b/apps/zod/README.md @@ -0,0 +1,3 @@ +# Guia - Next Auth + +Guia construído com [Starlight](https://starlight.astro.build) para workshop do codante de Next Auth. diff --git a/apps/zod/astro.config.mjs b/apps/zod/astro.config.mjs new file mode 100644 index 0000000..070cb32 --- /dev/null +++ b/apps/zod/astro.config.mjs @@ -0,0 +1,78 @@ +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +import tailwind from '@astrojs/tailwind'; + +// https://astro.build/config +export default defineConfig({ + base: '/zod/', + integrations: [ + starlight({ + favicon: '/favicon.ico', + title: 'Zod', + editLink: { + baseUrl: 'https://github.com/codante-io/guias/edit/main/apps/zod/', + }, + social: { + github: 'https://github.com/robertotcestari', + 'x.com': 'https://x.com/robertotcestari', + linkedin: 'https://www.linkedin.com/in/robertotcestari/', + email: 'mailto:robertotcestari@gmail.com', + }, + customCss: ['./src/tailwind.css'], + sidebar: [ + { + label: 'Intro ao Workshop', + autogenerate: { + directory: '00-intro', + }, + }, + + { + label: '1. Introdução ao Zod', + autogenerate: { + directory: '01-intro-zod', + }, + }, + { + label: '2. Configurando o Ambiente de Desenvolvimento', + autogenerate: { + directory: '02-setup-zod', + }, + }, + + { + label: '3. Uso Básico', + autogenerate: { + directory: '03-basic-usage', + }, + }, + { + label: '4. Recursos Avançados', + autogenerate: { + directory: '04-advanced-features', + }, + }, + { + label: '5. Formulários React', + autogenerate: { + directory: '05-react-forms', + }, + }, + { + label: '6. Validação de API', + autogenerate: { + directory: '06-api-validation', + }, + }, + { + label: '7. Projetos TypeScript', + autogenerate: { + directory: '07-ts-projects', + }, + }, + ], + }), + tailwind({ applyBaseStyles: false }), + ], +}); diff --git a/apps/zod/package.json b/apps/zod/package.json new file mode 100644 index 0000000..08c0aa6 --- /dev/null +++ b/apps/zod/package.json @@ -0,0 +1,22 @@ +{ + "name": "zod", + "type": "module", + "version": "0.0.1", + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro check --minimumSeverity warning && astro build", + "preview": "astro preview", + "astro": "astro" + }, + "dependencies": { + "@astrojs/check": "^0.4.1", + "@astrojs/starlight": "^0.17.2", + "@astrojs/starlight-tailwind": "^2.0.1", + "@astrojs/tailwind": "^5.1.0", + "astro": "^4.2.1", + "sharp": "^0.32.5", + "tailwindcss": "^3.4.1", + "typescript": "^5.3.3" + } +} diff --git a/apps/zod/public/about.txt b/apps/zod/public/about.txt new file mode 100644 index 0000000..cbf0103 --- /dev/null +++ b/apps/zod/public/about.txt @@ -0,0 +1,6 @@ +This favicon was generated using the following graphics from Twitter Twemoji: + +- Graphics Title: 1f47e.svg +- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji) +- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f47e.svg +- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/) diff --git a/apps/zod/public/android-chrome-192x192.png b/apps/zod/public/android-chrome-192x192.png new file mode 100644 index 0000000..ca3caca Binary files /dev/null and b/apps/zod/public/android-chrome-192x192.png differ diff --git a/apps/zod/public/android-chrome-512x512.png b/apps/zod/public/android-chrome-512x512.png new file mode 100644 index 0000000..b39d25e Binary files /dev/null and b/apps/zod/public/android-chrome-512x512.png differ diff --git a/apps/zod/public/apple-touch-icon.png b/apps/zod/public/apple-touch-icon.png new file mode 100644 index 0000000..ddfebb1 Binary files /dev/null and b/apps/zod/public/apple-touch-icon.png differ diff --git a/apps/zod/public/favicon-16x16.png b/apps/zod/public/favicon-16x16.png new file mode 100644 index 0000000..a5e84cb Binary files /dev/null and b/apps/zod/public/favicon-16x16.png differ diff --git a/apps/zod/public/favicon-32x32.png b/apps/zod/public/favicon-32x32.png new file mode 100644 index 0000000..68a17d3 Binary files /dev/null and b/apps/zod/public/favicon-32x32.png differ diff --git a/apps/zod/public/favicon.ico b/apps/zod/public/favicon.ico new file mode 100644 index 0000000..efe1836 Binary files /dev/null and b/apps/zod/public/favicon.ico differ diff --git a/apps/zod/public/site.webmanifest b/apps/zod/public/site.webmanifest new file mode 100644 index 0000000..45dc8a2 --- /dev/null +++ b/apps/zod/public/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/apps/zod/src/assets/images/app1.png b/apps/zod/src/assets/images/app1.png new file mode 100644 index 0000000..b9ef591 Binary files /dev/null and b/apps/zod/src/assets/images/app1.png differ diff --git a/apps/zod/src/assets/images/image.png b/apps/zod/src/assets/images/image.png new file mode 100644 index 0000000..227ceaf Binary files /dev/null and b/apps/zod/src/assets/images/image.png differ diff --git a/apps/zod/src/assets/nextauth.png b/apps/zod/src/assets/nextauth.png new file mode 100644 index 0000000..ccedbc4 Binary files /dev/null and b/apps/zod/src/assets/nextauth.png differ diff --git a/apps/zod/src/assets/zod.svg b/apps/zod/src/assets/zod.svg new file mode 100644 index 0000000..0595f51 --- /dev/null +++ b/apps/zod/src/assets/zod.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/zod/src/content/config.ts b/apps/zod/src/content/config.ts new file mode 100644 index 0000000..45f60b0 --- /dev/null +++ b/apps/zod/src/content/config.ts @@ -0,0 +1,6 @@ +import { defineCollection } from 'astro:content'; +import { docsSchema } from '@astrojs/starlight/schema'; + +export const collections = { + docs: defineCollection({ schema: docsSchema() }), +}; diff --git "a/apps/zod/src/content/docs/00-intro/01-Introdu\303\247\303\243o.md" "b/apps/zod/src/content/docs/00-intro/01-Introdu\303\247\303\243o.md" new file mode 100644 index 0000000..1914a04 --- /dev/null +++ "b/apps/zod/src/content/docs/00-intro/01-Introdu\303\247\303\243o.md" @@ -0,0 +1,11 @@ +--- +title: Boas Vindas +description: Boas vindas ao workshop de Next Auth (Auth.js) +--- + +Boas vindas ao nosso Workshop de Zod! + +Este guia/website foi preparado para que você possa acompanhar o Workshop de forma mais eficaz! +Qualquer dúvida, sugestão ou correção, ficarei muito feliz se você enviar uma Issue ou um PR para o repositório. + +Vamos com tudo! diff --git a/apps/zod/src/content/docs/00-intro/02-o-que-vamos-aprender.md b/apps/zod/src/content/docs/00-intro/02-o-que-vamos-aprender.md new file mode 100644 index 0000000..d1056e9 --- /dev/null +++ b/apps/zod/src/content/docs/00-intro/02-o-que-vamos-aprender.md @@ -0,0 +1,60 @@ +--- +title: Conteúdo do Workshop +--- + +Vamos começar? Antes de mais nada, um overview do que iremos tratar no Workshop de hoje. Vamos em todo o workshop utilizar uma única aplicação que possuirá **várias formas de validação utilizando a biblioteca Zod**. + +### **Agenda do Workshop** + +--- + +### **1. Introdução ao Zod** + +- O que é o Zod? +- Por que o Zod é útil? +- O que são schemas? +- Quais são os tipos suportados? +- Exemplos básicos de validação + +### **2. Configurando o Ambiente de Desenvolvimento** + +- Instalando o Zod +- Configurando o projeto +- Entendendo nossos schemas +- Validação simples de campos obrigatórios (`required`) + +### **3. Uso Básico** + +- Cobrir os tipos básicos e validações do Zod. +- Tipos primitivos: `string`, `number`, `boolean`, `bigint`, `date`, etc. +- Campos opcionais e anuláveis. +- Métodos de validação embutidos. + +### **4. Recursos Avançados** + +- Arrays, enums e uniões. +- Compondo esquemas com `.merge` e `.extend`. +- Manipulação de mensagens de erro e erros de parsing. + +### **5. Formulários React** + +- Usando o Zod para validar entradas de formulários. +- Como o Zod funciona junto com bibliotecas como `react-hook-form` ou `formik`. + +### **6. Validação de API** + +- Parsing e validação de respostas de APIs. +- Garantindo estruturas de dados e tipos corretos. + +### **7. Projetos TypeScript** + +- Garantindo segurança em tempo de execução quando tipos TypeScript não podem ser usados. +- Usando `z.infer` para inferir tipos TypeScript a partir de esquemas Zod. + +### **Recursos Adicionais** + +- [Documentação do Zod](https://zod.dev/) +- [Documentação do React Hook Form](https://react-hook-form.com/) +- [Documentação do Vite](https://vitejs.dev/) + +Este plano garante que você cubra todos os aspectos essenciais do Zod enquanto mantém o público engajado com exemplos práticos e atividades hands-on. A estrutura inclui tanto explicações teóricas quanto codificação ao vivo, tornando o workshop interativo e informativo. diff --git a/apps/zod/src/content/docs/00-intro/03-pre-requisitos.md b/apps/zod/src/content/docs/00-intro/03-pre-requisitos.md new file mode 100644 index 0000000..ace9e2f --- /dev/null +++ b/apps/zod/src/content/docs/00-intro/03-pre-requisitos.md @@ -0,0 +1,8 @@ +--- +title: Pré requisitos +--- + +Vamos aprender **Zod** usando uma aplicação React na versão 19. Para que você consiga aproveitar o máximo esse workshop recomendamos que você possua: + +- Conhecimento básico sobre React +- Conhecimento básico sobre HTML, CSS e JS diff --git a/apps/zod/src/content/docs/00-intro/04-repositorio.md b/apps/zod/src/content/docs/00-intro/04-repositorio.md new file mode 100644 index 0000000..6d57dc0 --- /dev/null +++ b/apps/zod/src/content/docs/00-intro/04-repositorio.md @@ -0,0 +1,19 @@ +--- +title: Repositório e Aplicação usados +--- + + diff --git a/apps/zod/src/content/docs/01-intro-zod/01-o-que-e-zod.md b/apps/zod/src/content/docs/01-intro-zod/01-o-que-e-zod.md new file mode 100644 index 0000000..ea4efa1 --- /dev/null +++ b/apps/zod/src/content/docs/01-intro-zod/01-o-que-e-zod.md @@ -0,0 +1,26 @@ +--- +title: O que é o Zod? +--- + +O Zod é uma biblioteca de validação de esquemas para JavaScript e TypeScript. Ele permite que você defina esquemas para seus dados e, em seguida, valide esses dados em tempo de execução. Isso é especialmente útil em aplicações TypeScript, onde você pode garantir que os dados que você está manipulando correspondem aos tipos esperados, mesmo que esses dados venham de fontes externas, como APIs ou entradas de usuário. + +### Principais Características do Zod + +- **Definição de Esquemas**: Com o Zod, você pode definir esquemas para objetos, arrays, strings, números, e muito mais. Esses esquemas podem incluir validações complexas, como comprimentos mínimos e máximos, padrões regex, e validações personalizadas. +- **Validação em Tempo de Execução**: Diferente do TypeScript, que só verifica tipos em tempo de compilação, o Zod valida seus dados em tempo de execução. Isso significa que você pode pegar erros de tipo que só se manifestariam quando seu código está realmente sendo executado. +- **Mensagens de Erro Detalhadas**: Quando a validação falha, o Zod fornece mensagens de erro detalhadas que ajudam a identificar exatamente onde e por que a validação falhou. +- **Integração com TypeScript**: O Zod foi projetado para funcionar perfeitamente com TypeScript. Ele pode inferir tipos TypeScript a partir de seus esquemas, o que significa que você não precisa duplicar suas definições de tipos. + +### História do Zod + +O Zod foi criado por Colin McDonnell em 2020. A motivação por trás da criação do Zod foi a necessidade de uma biblioteca de validação de esquemas que fosse simples de usar, mas poderosa o suficiente para lidar com casos de uso complexos. Colin queria uma ferramenta que pudesse ser facilmente integrada com TypeScript, fornecendo validação em tempo de execução e inferência de tipos. + +### Inspirações + +Durante o desenvolvimento do Zod, várias bibliotecas influenciaram seu design e funcionalidade. Algumas das principais inspirações incluem: + +- **Joi**: Uma biblioteca de validação de esquemas para JavaScript que permite a definição de esquemas complexos e validação de dados. O Zod se inspirou na sintaxe intuitiva e nas capacidades de validação robustas do Joi. +- **Yup**: Outra biblioteca de validação de esquemas que é popular no ecossistema JavaScript. O Yup oferece uma API declarativa para a definição de esquemas e validação de dados, algo que o Zod também busca proporcionar. +- **io-ts**: Uma biblioteca de validação de tipos para TypeScript que permite a definição de tipos e validação de dados em tempo de execução. O Zod foi inspirado pela integração estreita do io-ts com TypeScript, mas buscou simplificar a API e melhorar a experiência do desenvolvedor. + +Essas bibliotecas ajudaram a moldar o Zod, resultando em uma ferramenta que combina o melhor de cada uma delas, oferecendo uma experiência de validação de esquemas eficiente e amigável para desenvolvedores JavaScript e TypeScript. diff --git a/apps/zod/src/content/docs/01-intro-zod/02-por-que-zod-e-util.md b/apps/zod/src/content/docs/01-intro-zod/02-por-que-zod-e-util.md new file mode 100644 index 0000000..db108b1 --- /dev/null +++ b/apps/zod/src/content/docs/01-intro-zod/02-por-que-zod-e-util.md @@ -0,0 +1,48 @@ +--- +title: Por que o Zod é útil? +--- + +O **Zod** é uma ferramenta extremamente útil para desenvolvedores que trabalham com **JavaScript** e **TypeScript**, especialmente quando se trata de **validação de dados**. Hoje, vamos explorar por que o Zod é tão valioso e como ele pode ser utilizado para garantir que os dados em sua aplicação estejam sempre no formato correto. + +## Validação de dados + +Em muitas aplicações, os dados vêm de fontes externas, como **APIs** ou entradas de usuário. Não podemos garantir que esses dados estejam no formato esperado. A validação é uma prática essencial para garantir que a integridade dos dados seja mantida ao longo do ciclo de vida da aplicação. Com o Zod, você pode definir **schemas** (esquemas) para esses dados e validá-los de maneira eficiente em **tempo de execução**. + +## Exemplo de validação de objetos + +Vamos criar um exemplo onde temos um objeto representando um usuário, e precisamos garantir que esse objeto tenha as propriedades `name`, `email` e `age`. A propriedade `name` e `email` devem ser strings, enquanto `age` deve ser um número. + +### Exemplo 1: Definindo e validando o schema do usuário + +```ts +import { z } from 'zod'; + +// Definindo o schema para um objeto 'User' +const UserSchema = z.object({ + name: z.string(), // 'name' deve ser uma string + email: z.string().email(), // 'email' deve ser uma string válida de email + age: z.number().min(18), // 'age' deve ser um número e a idade mínima é 18 +}); + +// Validando um objeto de usuário +const user = { + name: 'Lucas', + email: 'lucas@email.com', + age: 24, +}; + +try { + UserSchema.parse(user); // Valida o objeto 'user' + console.log('Usuário validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +### Explicação + +Nesse exemplo, criamos um schema para o objeto `User`, que define as regras que `name`, `email` e `age` devem seguir. O método `parse` valida se o objeto `user` segue essas regras e lança um erro se houver qualquer inconsistência. Por exemplo, se `email` não for um e-mail válido, ou se `age` for menor que 18, a validação falhará. + +## Por que usar Zod? + +O Zod facilita a vida dos desenvolvedores ao fornecer uma API simples e declarativa para definir as regras de validação de dados. Ao integrá-lo no seu projeto, você ganha controle sobre a **consistência dos dados**, reduzindo significativamente a chance de erros provenientes de dados mal formados. diff --git a/apps/zod/src/content/docs/01-intro-zod/03-schemas.md b/apps/zod/src/content/docs/01-intro-zod/03-schemas.md new file mode 100644 index 0000000..ecf2dc2 --- /dev/null +++ b/apps/zod/src/content/docs/01-intro-zod/03-schemas.md @@ -0,0 +1,113 @@ +--- +title: O que são schemas? +--- + +Um **schema** é basicamente uma definição da estrutura e das regras de um dado. Ele diz respeito ao tipo e às características que esse dado deve ter. Por exemplo, podemos definir que o dado de um usuário precisa conter um nome (string) e uma idade (número). + +Os schemas são muito úteis para garantir que nossos dados estejam no formato correto, especialmente quando estamos recebendo informações de fontes externas, como APIs ou formulários de usuário. + +Em Zod, um schema não só define a estrutura de dados, mas também faz a validação deles de maneira simples e eficiente. + +## Criando Schemas com Zod + +Agora que entendemos o conceito de schema, vamos ver como o Zod nos permite criar e validar esses schemas de forma prática. + +Vamos começar com um exemplo básico: validar os dados de um usuário. + +### Exemplo 1: Definindo um schema para um usuário + +```ts +import { z } from 'zod'; + +// Definindo o schema para um objeto 'User' +const UserSchema = z.object({ + name: z.string(), // 'name' deve ser uma string + age: z.number().min(18), // 'age' deve ser um número e a idade mínima é 18 +}); + +// Validando um objeto válido +const user = { + name: 'Lucas', + age: 24, +}; + +try { + UserSchema.parse(user); // Valida o objeto 'user' + console.log('Validação bem-sucedida!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +### Explicação + +Aqui, criamos um schema chamado `UserSchema` com duas propriedades: `name`, que deve ser uma string, e `age`, que deve ser um número maior ou igual a 18. Usamos o método `parse` para validar o dado. Se o dado não cumprir as regras definidas no schema, um erro será lançado. + +### Exemplo 2: Validando arrays + +Agora, vamos adicionar uma lista de hobbies para o usuário, onde cada hobby deve ser uma string. + +```ts +const UserWithHobbiesSchema = z.object({ + name: z.string(), + age: z.number().min(18), + hobbies: z.array(z.string()), // 'hobbies' deve ser um array de strings +}); + +// Validando um objeto com hobbies +const userWithHobbies = { + name: 'Lucas', + age: 24, + hobbies: ['programar', 'cozinhar', 'ler'], +}; + +try { + UserWithHobbiesSchema.parse(userWithHobbies); + console.log('Validação com hobbies bem-sucedida!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Agora, além do nome e da idade, também validamos uma lista de hobbies, garantindo que seja um array de strings. Se qualquer hobby for de um tipo diferente, como um número, o Zod lançará um erro. + +### Exemplo 3: Valores opcionais e padrões + +Às vezes, alguns campos são opcionais ou têm valores padrão. Vamos ver como Zod trata isso: + +```ts +const UserWithOptionalSchema = z.object({ + name: z.string(), + age: z.number().min(18).default(30), // Idade terá valor padrão de 30 se não for fornecida + bio: z.string().optional(), // 'bio' é um campo opcional +}); + +// Validando um objeto sem idade e bio +const userWithoutAgeAndBio = { + name: 'Lucas', +}; + +try { + const validatedUser = UserWithOptionalSchema.parse(userWithoutAgeAndBio); + console.log('Usuário validado com valor padrão de idade:', validatedUser); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Aqui, a `age` tem um valor padrão de 30, e `bio` é opcional. Se não fornecer esses campos no dado, o Zod irá preencher automaticamente o valor da `age` com 30, e a `bio` simplesmente será ignorada. + +## Por que Zod? + +Zod é uma ferramenta poderosa para garantir que os dados que entram no seu sistema tenham o formato correto, ajudando a evitar erros que poderiam ocorrer no uso dos dados. Ele é fácil de integrar com TypeScript e oferece uma API intuitiva e declarativa. + +--- + +### Recapitulando + +- **Schemas** definem a estrutura e as regras para os dados. +- Usamos o **Zod** para criar e validar esses schemas de maneira fácil e eficiente. +- O método `.parse()` faz a validação e lança um erro se o dado não cumprir o schema. +- Podemos validar objetos, arrays, e até definir valores opcionais ou padrões. + +Espero que tenham entendido bem o conceito de schemas e como utilizá-los com Zod. Agora, vamos seguir com mais exemplos e explorar como o Zod pode se integrar com bibliotecas de formulários como **React Hook Forms**! diff --git a/apps/zod/src/content/docs/01-intro-zod/04-tipos-suportados.md b/apps/zod/src/content/docs/01-intro-zod/04-tipos-suportados.md new file mode 100644 index 0000000..92b33cd --- /dev/null +++ b/apps/zod/src/content/docs/01-intro-zod/04-tipos-suportados.md @@ -0,0 +1,148 @@ +--- +title: Quais são os tipos suportados? +--- + +O **Zod** oferece suporte a uma ampla gama de tipos que podem ser usados para definir os schemas. Isso garante que você possa validar diferentes estruturas de dados de forma precisa, independentemente da complexidade ou formato dos dados. Vamos explorar os tipos mais comuns suportados pelo Zod. + +## Tipos Primitivos + +Os tipos primitivos são aqueles que usamos com frequência em JavaScript e TypeScript. O Zod oferece suporte total a eles, permitindo validar strings, números, booleans, e mais. + +### Exemplo 1: Tipos Primitivos + +```ts +import { z } from 'zod'; + +const primitiveSchema = z.object({ + name: z.string(), // string + age: z.number(), // number + isAdmin: z.boolean(), // boolean +}); + +const data = { + name: 'Lucas', + age: 24, + isAdmin: true, +}; + +try { + primitiveSchema.parse(data); + console.log('Dados validados com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Nesse exemplo, validamos um objeto que contém uma string (`name`), um número (`age`), e um booleano (`isAdmin`). Se qualquer um desses tipos estiver incorreto, o Zod irá lançar um erro de validação. + +## Arrays + +Zod também permite a validação de arrays. Você pode definir o tipo de dado que o array deve conter, garantindo que todos os itens dentro do array estejam no formato correto. + +### Exemplo 2: Arrays + +```ts +const arraySchema = z.array(z.string()); // Array de strings + +const data = ['futebol', 'programar', 'cozinhar']; + +try { + arraySchema.parse(data); + console.log('Array validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Neste caso, garantimos que o array `data` contenha apenas strings. Se um dos itens do array fosse de outro tipo, como um número, a validação falharia. + +## Objetos + +O Zod também suporta objetos, permitindo que você valide não só tipos primitivos e arrays, mas também estruturas mais complexas com propriedades aninhadas. + +### Exemplo 3: Objetos + +```ts +const complexObjectSchema = z.object({ + user: z.object({ + name: z.string(), + age: z.number(), + }), + permissions: z.array(z.string()), +}); + +const data = { + user: { + name: 'Lucas', + age: 24, + }, + permissions: ['read', 'write'], +}; + +try { + complexObjectSchema.parse(data); + console.log('Objeto complexo validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Aqui estamos validando um objeto que contém outro objeto dentro (`user`), além de um array de permissões. Essa estrutura aninhada é muito comum em aplicações modernas, e o Zod lida com isso de maneira eficiente. + +## Valores Opcionais e Valores Padrão + +Com o Zod, você também pode definir campos opcionais ou atribuir valores padrões para propriedades que podem estar ausentes. + +### Exemplo 4: Valores Opcionais e Padrões + +```ts +const optionalSchema = z.object({ + name: z.string(), + age: z.number().optional(), // Campo opcional + role: z.string().default('user'), // Valor padrão +}); + +const data = { + name: 'Lucas', +}; + +try { + const result = optionalSchema.parse(data); + console.log('Dados validados com sucesso!', result); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Nesse exemplo, a `age` é opcional, e o campo `role` terá o valor padrão `"user"` se não for fornecido. Isso torna a validação mais flexível, acomodando casos em que algumas informações podem não estar disponíveis. + +## Outros Tipos Suportados + +Além dos tipos primitivos, arrays e objetos, o Zod também suporta outros tipos como: + +- **Enums**: Para validar valores que devem ser um de um conjunto limitado de opções. +- **Tuples**: Para validar arrays com um número fixo de elementos, onde cada elemento pode ter um tipo diferente. +- **Unions**: Para validar que um valor corresponde a pelo menos um de vários tipos. +- **Date**: Para validação de datas. +- **Custom Types**: É possível definir validações personalizadas utilizando `z.custom()`. + +### Exemplo 5: Unions e Enums + +```ts +const roleSchema = z.union([z.literal('admin'), z.literal('user')]); // União de valores permitidos +const enumSchema = z.enum(['red', 'green', 'blue']); // Enum com três opções + +try { + roleSchema.parse('admin'); + enumSchema.parse('green'); + console.log('Validação de union e enum realizada com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Neste exemplo, validamos que o valor do `role` deve ser `"admin"` ou `"user"` usando `z.union()`, e validamos a cor usando um `z.enum()`. + +## Conclusão + +O Zod suporta uma grande variedade de tipos que cobrem praticamente qualquer estrutura de dado que você precisará validar em suas aplicações. Desde tipos primitivos e arrays, até objetos complexos e enums, você pode garantir que seus dados estejam sempre no formato correto, aumentando a robustez e segurança da sua aplicação. diff --git a/apps/zod/src/content/docs/01-intro-zod/05-exemplos-validacao.md b/apps/zod/src/content/docs/01-intro-zod/05-exemplos-validacao.md new file mode 100644 index 0000000..10ff715 --- /dev/null +++ b/apps/zod/src/content/docs/01-intro-zod/05-exemplos-validacao.md @@ -0,0 +1,131 @@ +--- +title: Exemplos básicos de validação +--- + +Agora que entendemos os tipos suportados pelo Zod, vamos explorar alguns exemplos básicos de como utilizar a biblioteca para validar dados. O Zod permite realizar validações de maneira muito simples e clara. Vamos ver como isso funciona na prática com alguns exemplos de validação. + +## Validação de Strings + +O Zod facilita a validação de strings, seja para verificar se o valor realmente é uma string ou se cumpre critérios específicos, como ser um e-mail válido. + +### Exemplo 1: Validando uma string simples + +```ts +import { z } from 'zod'; + +const stringSchema = z.string(); // Definindo que o dado deve ser uma string + +try { + stringSchema.parse('Olá, mundo!'); // Dado válido + console.log('Validação bem-sucedida!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Neste exemplo, validamos se o dado passado é uma string. Se tentarmos passar um número ou qualquer outro tipo, o Zod lançará um erro de validação. + +### Exemplo 2: Validando um e-mail + +```ts +const emailSchema = z.string().email(); // Validação específica para e-mail + +try { + emailSchema.parse('john@email.com'); // E-mail válido + console.log('E-mail validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +O Zod permite validar se uma string é um e-mail válido com a função `email()`. Se o formato do e-mail estiver incorreto, a validação falhará. + +## Validação de Números + +Você também pode validar números e aplicar restrições, como verificar se um número é maior que um determinado valor. + +### Exemplo 3: Validando um número com restrição de valor mínimo + +```ts +const numberSchema = z.number().min(18); // Número deve ser maior ou igual a 18 + +try { + numberSchema.parse(42); // Número válido + console.log('Número validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Aqui estamos validando que o número seja no mínimo 18. Se passarmos um número menor, o Zod retornará um erro de validação. + +## Validação de Booleanos + +Vamos ver como validar valores booleanos (true ou false). + +### Exemplo 4: Validando um booleano + +```ts +const booleanSchema = z.boolean(); // Definindo que o dado deve ser um booleano + +try { + booleanSchema.parse(true); // Dado válido + console.log('Booleano validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Esse exemplo mostra a validação de um booleano. Qualquer valor que não seja `true` ou `false` falhará na validação. + +## Validação de Arrays + +O Zod também facilita a validação de arrays, garantindo que todos os elementos sigam um formato específico. + +### Exemplo 5: Validando um array de números + +```ts +const numberArraySchema = z.array(z.number()); // Array deve conter apenas números + +const data = [1, 2, 3, 4, 5]; + +try { + numberArraySchema.parse(data); // Array válido + console.log('Array validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Aqui estamos validando que o array contenha apenas números. Se qualquer elemento do array for de um tipo diferente, a validação falhará. + +## Validação de Objetos + +Validação de objetos é um dos recursos mais utilizados no Zod, pois permite definir estruturas complexas de dados. + +### Exemplo 6: Validando um objeto simples + +```ts +const objectSchema = z.object({ + name: z.string(), + age: z.number(), +}); + +const userData = { + name: 'John', + age: 42, +}; + +try { + objectSchema.parse(userData); // Objeto válido + console.log('Objeto validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Neste exemplo, validamos um objeto `user` que contém duas propriedades: `name` como string e `age` como número. + +## Conclusão + +Esses exemplos mostram como o Zod facilita a validação de dados básicos como strings, números, booleanos, arrays e objetos. A flexibilidade e simplicidade do Zod tornam sua aplicação em validação de dados bastante eficiente, além de melhorar a qualidade e segurança dos dados nas aplicações. diff --git a/apps/zod/src/content/docs/02-setup-zod/01-instalando-zod.md b/apps/zod/src/content/docs/02-setup-zod/01-instalando-zod.md new file mode 100644 index 0000000..6302520 --- /dev/null +++ b/apps/zod/src/content/docs/02-setup-zod/01-instalando-zod.md @@ -0,0 +1,54 @@ +--- +title: Instalando o Zod +--- + +Para começar a utilizar o **Zod** em seus projetos, você precisa instalá-lo. O processo é simples e direto, seja você utilizando **npm** ou **yarn**. Vamos ver como fazer essa instalação. + +## Usando npm + +Se você utiliza o **npm** como seu gerenciador de pacotes, basta rodar o seguinte comando no terminal: + +```bash +npm install zod +``` + +Esse comando irá adicionar o Zod ao seu projeto e o tornará disponível para uso imediato. + +## Usando yarn + +Se você prefere o **yarn**, o comando para instalar o Zod é igualmente simples: + +```bash +yarn add zod +``` + +Assim como com npm, o Zod será adicionado ao seu projeto, permitindo que você comece a utilizá-lo rapidamente. + +## Usando CDN + +Caso você queira usar o Zod em um projeto sem configurar npm ou yarn, também é possível carregá-lo diretamente em um arquivo HTML via CDN: + +```html + +``` + +Dessa forma, você terá acesso ao Zod diretamente no navegador, sem necessidade de configurar um ambiente de desenvolvimento completo. + +## Verificando a Instalação + +Após instalar o Zod, você pode verificar se está funcionando corretamente importando-o em seu código: + +```ts +import { z } from 'zod'; + +const exampleSchema = z.string(); +console.log(exampleSchema.parse('Teste bem-sucedido!')); +``` + +Se tudo estiver configurado corretamente, você verá a string sendo validada com sucesso no console. + +## Conclusão + +Com o Zod instalado, você está pronto para começar a definir schemas e validar seus dados de forma eficiente. Agora que a instalação foi concluída, vamos explorar como utilizá-lo em seus projetos! + +--- diff --git a/apps/zod/src/content/docs/02-setup-zod/02-configurando-o-projeto.md b/apps/zod/src/content/docs/02-setup-zod/02-configurando-o-projeto.md new file mode 100644 index 0000000..a3ccca2 --- /dev/null +++ b/apps/zod/src/content/docs/02-setup-zod/02-configurando-o-projeto.md @@ -0,0 +1,50 @@ +--- +title: Configurando o projeto +--- + +Antes de começarmos a validar nossos dados com o Zod, é importante configurar um ambiente básico para trabalharmos. Aqui está o passo a passo para configurar seu projeto. + +## Passo 1: Inicialize o Projeto + +Se você ainda não criou seu projeto, inicie um novo projeto com **npm** ou **yarn**: + +```bash +npm init -y +``` + +Ou, se estiver usando **yarn**: + +```bash +yarn init -y +``` + +Esse comando criará um `package.json` para gerenciar as dependências do seu projeto. + +## Passo 2: Instale o Zod + +Conforme vimos anteriormente, instale o Zod usando o comando: + +```bash +npm install zod +``` + +Ou com yarn: + +```bash +yarn add zod +``` + +Agora que o Zod está instalado, podemos começar a utilizá-lo. + +## Passo 3: Estrutura do Projeto + +Sua estrutura de diretórios pode ser algo simples como: + +``` +/meu-projeto + ├── /src + │ └── index.ts + └── package.json +``` + +No arquivo `index.ts`, faremos nossos exemplos de validação com o Zod. diff --git a/apps/zod/src/content/docs/02-setup-zod/03-entendendo-nossos-schemas.md b/apps/zod/src/content/docs/02-setup-zod/03-entendendo-nossos-schemas.md new file mode 100644 index 0000000..0a813ed --- /dev/null +++ b/apps/zod/src/content/docs/02-setup-zod/03-entendendo-nossos-schemas.md @@ -0,0 +1,22 @@ +--- +title: Entendendo nossos schemas +--- + +No Zod, **schemas** são utilizados para definir a estrutura e regras de validação dos dados que sua aplicação manipula. Um schema pode descrever qualquer tipo de dado, desde valores primitivos (como strings e números) até objetos e arrays complexos. + +## O que é um Schema? + +Um **schema** é como um contrato. Ele define o tipo de dado que você espera e as regras que esse dado deve cumprir. Por exemplo, se você tem um formulário de cadastro de usuário, pode criar um schema para validar que os campos `name` e `age` são do tipo correto. + +### Exemplo 1: Criando um schema básico + +```ts +import { z } from 'zod'; + +const UserSchema = z.object({ + name: z.string(), + age: z.number(), +}); +``` + +Aqui, criamos um schema chamado `UserSchema` que espera um objeto contendo `name` (uma string) e `age` (um número). Quando aplicamos esse schema em um dado, o Zod garante que o dado siga essas regras. diff --git a/apps/zod/src/content/docs/02-setup-zod/04-validacao-campos-obrigatorios.md b/apps/zod/src/content/docs/02-setup-zod/04-validacao-campos-obrigatorios.md new file mode 100644 index 0000000..2e7e5cf --- /dev/null +++ b/apps/zod/src/content/docs/02-setup-zod/04-validacao-campos-obrigatorios.md @@ -0,0 +1,53 @@ +--- +title: Validação simples de campos obrigatórios +--- + +Agora que entendemos o conceito de schemas, vamos ver como o Zod facilita a validação de **campos obrigatórios** em seus dados. + +Em muitas aplicações, certos campos precisam ser preenchidos obrigatoriamente, como o nome de um usuário ou a idade. O Zod permite definir essas regras de forma simples. + +## Exemplo 1: Validando campos obrigatórios + +```ts +const UserSchema = z.object({ + name: z.string(), // Campo obrigatório + age: z.number(), // Campo obrigatório +}); + +const userData = { + name: 'Lucas', + age: 24, +}; + +try { + UserSchema.parse(userData); + console.log('Usuário validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Nesse exemplo, `name` e `age` são obrigatórios. Se tentarmos validar um objeto que omite qualquer um desses campos, o Zod lançará um erro, garantindo que esses dados estejam presentes. + +## Exemplo 2: Lidando com erros de validação + +Se os dados não atenderem às exigências do schema, o Zod retorna um erro detalhado. Vamos ver como capturar esses erros: + +```ts +const invalidUserData = { + name: 'Lucas', + // 'age' está faltando +}; + +try { + UserSchema.parse(invalidUserData); +} catch (err) { + console.error('Erro de validação:', err.errors); // Exibe detalhes dos campos inválidos +} +``` + +Quando o campo `age` estiver ausente, o Zod retornará uma mensagem de erro explicando qual campo não está presente e qual era o tipo esperado. + +## Conclusão + +Com o Zod, você pode garantir que campos obrigatórios sejam sempre validados de forma eficaz. Se os dados não estiverem no formato correto, o Zod retorna mensagens de erro detalhadas, permitindo que você capture e trate esses erros facilmente em sua aplicação. diff --git a/apps/zod/src/content/docs/03-basic-usage/01-tipos-basicos-validacoes-zod.md b/apps/zod/src/content/docs/03-basic-usage/01-tipos-basicos-validacoes-zod.md new file mode 100644 index 0000000..cd8c7d6 --- /dev/null +++ b/apps/zod/src/content/docs/03-basic-usage/01-tipos-basicos-validacoes-zod.md @@ -0,0 +1,5 @@ +--- +title: Tipos básicos e validações do Zod +--- + +O **Zod** oferece suporte a uma série de tipos básicos que permitem realizar validações detalhadas nos dados. Desde tipos primitivos até validações mais complexas, o Zod facilita a garantia de que os dados recebidos pela aplicação estejam no formato correto. Vamos explorar esses tipos e ver como utilizá-los na prática. diff --git a/apps/zod/src/content/docs/03-basic-usage/02-tipos-primitivos.md b/apps/zod/src/content/docs/03-basic-usage/02-tipos-primitivos.md new file mode 100644 index 0000000..62d92a4 --- /dev/null +++ b/apps/zod/src/content/docs/03-basic-usage/02-tipos-primitivos.md @@ -0,0 +1,39 @@ +--- +title: Tipos primitivos +--- + +O Zod oferece suporte a validações simples e diretas de **tipos primitivos**, como strings, números, booleanos e mais. Esses tipos são a base para muitas validações em aplicações reais. + +### Exemplo 1: Validando strings + +```ts +import { z } from 'zod'; + +const stringSchema = z.string(); // Deve ser uma string + +try { + stringSchema.parse('Olá, Zod!'); // Válido + console.log('String validada com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Neste exemplo, garantimos que o valor seja uma string. Se outro tipo for passado, o Zod lançará um erro de validação. + +### Exemplo 2: Validando números + +```ts +const numberSchema = z.number(); // Deve ser um número + +try { + numberSchema.parse(42); // Válido + console.log('Número validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Aqui, o número é validado para garantir que o valor seja do tipo `number`. O Zod também oferece métodos adicionais para números, como limites mínimo e máximo. + +--- diff --git a/apps/zod/src/content/docs/03-basic-usage/03-campos-opcionais-e-nulaveis.md b/apps/zod/src/content/docs/03-basic-usage/03-campos-opcionais-e-nulaveis.md new file mode 100644 index 0000000..47b21a5 --- /dev/null +++ b/apps/zod/src/content/docs/03-basic-usage/03-campos-opcionais-e-nulaveis.md @@ -0,0 +1,51 @@ +--- +title: Campos opcionais e anuláveis +--- + +Nem todos os campos de um objeto precisam ser obrigatórios. O Zod facilita a criação de **campos opcionais** e **anuláveis**, permitindo flexibilidade no tratamento de dados incompletos ou com valores nulos. + +## Exemplo 1: Campos opcionais + +```ts +const optionalSchema = z.object({ + name: z.string(), + age: z.number().optional(), // Campo opcional +}); + +const data = { + name: 'Lucas', + // 'age' é opcional +}; + +try { + const result = optionalSchema.parse(data); + console.log('Dados validados com sucesso!', result); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Aqui, o campo `age` é opcional. Se não for fornecido, a validação ainda passará, sem erros. + +## Exemplo 2: Campos anuláveis + +```ts +const nullableSchema = z.object({ + name: z.string(), + age: z.number().nullable(), // Pode ser um número ou null +}); + +const data = { + name: 'Lucas', + age: null, +}; + +try { + const result = nullableSchema.parse(data); + console.log('Dados com campo nulável validados com sucesso!', result); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Com `nullable()`, você pode permitir que um campo seja nulo, o que pode ser útil para dados que podem estar incompletos ou vazios. diff --git a/apps/zod/src/content/docs/03-basic-usage/04-metodos-validacao-embutidos.md b/apps/zod/src/content/docs/03-basic-usage/04-metodos-validacao-embutidos.md new file mode 100644 index 0000000..3f70e5c --- /dev/null +++ b/apps/zod/src/content/docs/03-basic-usage/04-metodos-validacao-embutidos.md @@ -0,0 +1,60 @@ +--- +title: Métodos de validação embutidos +--- + +Além de validar tipos básicos, o Zod oferece uma série de **métodos de validação embutidos** que permitem aplicar regras adicionais, como restrições de tamanho ou formatos específicos. + +## Exemplo 1: Validação de strings com tamanho mínimo e máximo + +```ts +const constrainedStringSchema = z.string().min(5).max(10); // Tamanho mínimo de 5 e máximo de 10 caracteres + +try { + constrainedStringSchema.parse('Zodinho'); // Válido + console.log('String validada com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Aqui, definimos que a string deve ter entre 5 e 10 caracteres. Se passar um valor fora desse intervalo, a validação falhará. + +## Exemplo 2: Validando números com limites + +```ts +const constrainedNumberSchema = z.number().min(18).max(60); // Número entre 18 e 60 + +try { + constrainedNumberSchema.parse(25); // Válido + console.log('Número validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Nesse exemplo, o número deve estar entre 18 e 60. O Zod oferece métodos como `min()` e `max()` para facilitar essas restrições. + +## Exemplo 3: Validação de e-mails + +O Zod oferece métodos para validação de padrões comuns, como endereços de e-mail: + +```ts +const emailSchema = z.string().email(); // Validação específica para e-mails + +try { + emailSchema.parse('lucas@email.com'); // E-mail válido + console.log('E-mail validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Aqui, garantimos que a string seja um e-mail válido, usando o método `.email()`. + +--- + +## Conclusão + +O Zod oferece uma abordagem poderosa e flexível para validar tipos básicos, campos opcionais e anuláveis, além de métodos de validação embutidos que tornam a verificação de dados robusta e eficaz. Esses recursos permitem que você construa aplicações mais seguras e confiáveis, garantindo a integridade dos dados. + +--- diff --git a/apps/zod/src/content/docs/04-advanced-features/01-arrays-enums-unions.md b/apps/zod/src/content/docs/04-advanced-features/01-arrays-enums-unions.md new file mode 100644 index 0000000..62b7e03 --- /dev/null +++ b/apps/zod/src/content/docs/04-advanced-features/01-arrays-enums-unions.md @@ -0,0 +1,64 @@ +--- +title: Arrays, enums e uniões +--- + +O Zod oferece suporte a **arrays**, **enums** e **uniões**, permitindo uma validação ainda mais poderosa para dados que podem ter múltiplos valores ou estruturas variadas. + +## Arrays + +Com o Zod, você pode garantir que um array contenha apenas elementos de um tipo específico, como strings ou números. + +### Exemplo 1: Validando um array de strings + +```ts +import { z } from 'zod'; + +const stringArraySchema = z.array(z.string()); // Definindo um array de strings + +try { + stringArraySchema.parse(['apple', 'banana', 'cherry']); // Válido + console.log('Array validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Aqui, garantimos que o array contenha apenas strings. Se qualquer elemento do array não for uma string, a validação falhará. + +## Enums + +Enums são úteis para definir um conjunto limitado de valores permitidos. O Zod facilita a criação e validação de enums. + +### Exemplo 2: Validando com enums + +```ts +const fruitEnum = z.enum(['apple', 'banana', 'cherry']); + +try { + fruitEnum.parse('apple'); // Válido + console.log('Enum validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Com enums, garantimos que o valor seja um dos definidos no conjunto permitido. + +## Uniões + +Uniões permitem que você valide que um dado seja de um **tipo ou outro**. Isso é útil para cenários onde o dado pode ter diferentes formatos válidos. + +### Exemplo 3: Validando uniões + +```ts +const unionSchema = z.union([z.string(), z.number()]); // Pode ser uma string ou um número + +try { + unionSchema.parse(42); // Válido + console.log('União validada com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Aqui, o dado pode ser tanto uma string quanto um número, tornando a validação mais flexível. diff --git a/apps/zod/src/content/docs/04-advanced-features/02-compondo-schemas.md b/apps/zod/src/content/docs/04-advanced-features/02-compondo-schemas.md new file mode 100644 index 0000000..df1a7b8 --- /dev/null +++ b/apps/zod/src/content/docs/04-advanced-features/02-compondo-schemas.md @@ -0,0 +1,57 @@ +--- +title: Compondo esquemas com .merge e .extend +--- + +O Zod permite que você componha e modifique schemas facilmente usando os métodos `.merge()` e `.extend()`. Esses métodos são úteis para quando você precisa reutilizar ou expandir a estrutura de um schema. + +## .merge + +O método `.merge()` permite combinar dois schemas de objetos. Isso é útil quando você tem dois objetos distintos e deseja unificá-los em um só. + +### Exemplo 1: Combinando esquemas com .merge + +```ts +const baseSchema = z.object({ + name: z.string(), +}); + +const extraSchema = z.object({ + age: z.number(), +}); + +const mergedSchema = baseSchema.merge(extraSchema); + +try { + mergedSchema.parse({ name: 'John', age: 30 }); // Válido + console.log('Schema combinado validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Aqui, os schemas `baseSchema` e `extraSchema` são combinados em um só, permitindo a validação de um objeto que contenha ambos `name` e `age`. + +## .extend + +O método `.extend()` permite adicionar novas propriedades a um schema existente. + +### Exemplo 2: Expandindo um schema com .extend + +```ts +const originalSchema = z.object({ + name: z.string(), +}); + +const extendedSchema = originalSchema.extend({ + age: z.number(), +}); + +try { + extendedSchema.parse({ name: 'John', age: 25 }); // Válido + console.log('Schema expandido validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); +} +``` + +Aqui, o `originalSchema` é expandido para incluir a propriedade `age`, criando um schema mais completo. diff --git a/apps/zod/src/content/docs/04-advanced-features/03-mensagens-de-erro.md b/apps/zod/src/content/docs/04-advanced-features/03-mensagens-de-erro.md new file mode 100644 index 0000000..014e36c --- /dev/null +++ b/apps/zod/src/content/docs/04-advanced-features/03-mensagens-de-erro.md @@ -0,0 +1,54 @@ +--- +title: Manipulação de mensagens de erro e erros de parsing +--- + +O Zod permite uma manipulação refinada das **mensagens de erro**, tornando mais fácil personalizar as respostas de erro para o usuário final. Você pode ajustar mensagens padrão ou fornecer mensagens personalizadas para casos específicos. + +## Mensagens de Erro Personalizadas + +Para adicionar uma mensagem personalizada a um campo, você pode usar o método `.refine()` ou diretamente ao definir as regras do schema. + +### Exemplo 1: Personalizando mensagens de erro + +```ts +const ageSchema = z + .number() + .min(18, { message: 'A idade mínima permitida é 18 anos.' }); + +try { + ageSchema.parse(16); // Inválido +} catch (err) { + console.error('Erro de validação:', err.errors); // Exibe a mensagem personalizada +} +``` + +Nesse exemplo, a validação falha e a mensagem de erro personalizada é exibida ao invés da mensagem padrão. + +## Capturando e Tratando Erros de Parsing + +Quando o Zod falha na validação, ele lança uma exceção com detalhes sobre o erro. Você pode capturar esses erros e tratá-los como achar necessário. + +### Exemplo 2: Capturando erros de parsing + +```ts +const userSchema = z.object({ + name: z.string(), + age: z.number(), +}); + +const invalidData = { name: 'John', age: 'não é um número' }; // Dado inválido + +try { + userSchema.parse(invalidData); +} catch (err) { + if (err instanceof z.ZodError) { + console.error('Erros de validação:', err.errors); + } +} +``` + +Aqui, capturamos os erros lançados pelo Zod e acessamos o array `err.errors` para obter detalhes específicos de onde e por que a validação falhou. + +## Conclusão + +O Zod facilita não só a validação de dados, mas também o controle detalhado de **mensagens de erro** e **tratamento de erros** de parsing, proporcionando uma experiência mais amigável e eficaz para o desenvolvedor e o usuário final. diff --git a/apps/zod/src/content/docs/05-react-forms/01-intro.md b/apps/zod/src/content/docs/05-react-forms/01-intro.md new file mode 100644 index 0000000..69cb793 --- /dev/null +++ b/apps/zod/src/content/docs/05-react-forms/01-intro.md @@ -0,0 +1,40 @@ +--- +title: Usando o Zod para validar entradas de formulários +--- + +A validação de entradas de formulário é uma parte crucial no desenvolvimento de aplicações. O **Zod** se integra facilmente com formulários para garantir que os dados recebidos estejam no formato correto antes de serem processados ou enviados para o servidor. Vamos ver como o Zod pode ser usado para validar formulários de forma eficaz. + +## Validando Formulários com Zod + +Em um cenário básico, você pode usar o Zod para validar diretamente os dados de um formulário após o envio. Veja um exemplo simples de validação de formulário. + +### Exemplo 1: Validando um formulário de login + +```ts +import { z } from 'zod'; + +const loginSchema = z.object({ + email: z.string().email('Por favor, insira um e-mail válido.'), + password: z.string().min(6, 'A senha deve ter pelo menos 6 caracteres.'), +}); + +const formData = { + email: 'user@example.com', + password: '123456', +}; + +try { + loginSchema.parse(formData); // Validação dos dados do formulário + console.log('Formulário validado com sucesso!'); +} catch (err) { + console.error('Erro de validação:', err.errors); // Captura e exibe os erros de validação +} +``` + +Nesse exemplo, usamos o Zod para garantir que o e-mail seja válido e que a senha tenha pelo menos 6 caracteres. Se qualquer uma dessas validações falhar, o Zod retorna mensagens de erro específicas. + +## Tratando Mensagens de Erro + +Você pode capturar os erros de validação e exibir mensagens de erro personalizadas para o usuário, melhorando a experiência no preenchimento do formulário. + +--- diff --git a/apps/zod/src/content/docs/05-react-forms/02-zod-react-hook-forms-formik.md b/apps/zod/src/content/docs/05-react-forms/02-zod-react-hook-forms-formik.md new file mode 100644 index 0000000..1a0dd88 --- /dev/null +++ b/apps/zod/src/content/docs/05-react-forms/02-zod-react-hook-forms-formik.md @@ -0,0 +1,97 @@ +--- +title: Zod + react-hook-form e Formik. +--- + +O Zod pode ser integrado com bibliotecas populares de formulários como **React Hook Form** e **Formik** para simplificar a validação e melhorar a gestão de estados nos formulários. A integração dessas ferramentas torna a validação declarativa e mais fácil de gerenciar. + +## Usando Zod com React Hook Form + +**React Hook Form** é uma biblioteca leve e eficiente para lidar com formulários em React. Você pode integrar o Zod para realizar a validação dos dados de entrada com facilidade. + +### Exemplo 1: Integração com React Hook Form + +```ts +import { useForm } from 'react-hook-form'; +import { z } from 'zod'; +import { zodResolver } from '@hookform/resolvers/zod'; + +const schema = z.object({ + email: z.string().email('E-mail inválido.'), + password: z.string().min(6, 'A senha deve ter pelo menos 6 caracteres.'), +}); + +function LoginForm() { + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: zodResolver(schema), // Zod como resolvedor de validação + }); + + const onSubmit = (data) => { + console.log('Dados validados:', data); + }; + + return ( +
+ + {errors.email &&

{errors.email.message}

} {/* Exibe mensagem de erro */} + + {errors.password &&

{errors.password.message}

} {/* Exibe mensagem de erro */} + +
+ ); +} +``` + +Aqui, usamos o `zodResolver` para conectar o schema do Zod ao **React Hook Form**. Quando o formulário é enviado, o Zod valida os dados e, se houver erros, eles são exibidos automaticamente nas mensagens de erro. + +## Usando Zod com Formik + +O **Formik** é outra biblioteca popular para lidar com formulários em React. Ele também pode ser integrado ao Zod para adicionar uma camada de validação robusta. + +### Exemplo 2: Integração com Formik + +```ts +import { Formik, Field, Form, ErrorMessage } from 'formik'; +import { z } from 'zod'; +import { toFormikValidationSchema } from 'zod-formik-adapter'; + +const schema = z.object({ + email: z.string().email('E-mail inválido.'), + password: z.string().min(6, 'A senha deve ter pelo menos 6 caracteres.'), +}); + +function LoginForm() { + return ( + { + console.log('Dados validados:', values); + }} + > +
+ + + + + + + + +
+ ); +} +``` + +Neste exemplo, usamos o **Formik** para gerenciar o estado do formulário e o **Zod** para validar os dados. A biblioteca `zod-formik-adapter` facilita a conversão do schema do Zod para o formato esperado pelo Formik. + +--- + +## Conclusão + +A integração do **Zod** com **React Hook Form** e **Formik** oferece uma forma poderosa e simples de validar dados de formulários em **React**. Com validação declarativa, mensagens de erro customizáveis e suporte a dados complexos, o Zod torna o processo de validação de formulários muito mais eficiente e flexível. + +--- diff --git a/apps/zod/src/content/docs/06-api-validation/00-parsing-validacao-apis.md b/apps/zod/src/content/docs/06-api-validation/00-parsing-validacao-apis.md new file mode 100644 index 0000000..83d85d3 --- /dev/null +++ b/apps/zod/src/content/docs/06-api-validation/00-parsing-validacao-apis.md @@ -0,0 +1,52 @@ +--- +title: Parsing e validação de respostas de APIs +--- + +Quando trabalhamos com APIs, especialmente no Next.js, é essencial garantir que os dados recebidos estejam no formato esperado. O **Zod** facilita o parsing e a validação de dados retornados pelas APIs, assegurando que os dados recebidos ou enviados estejam no formato correto. + +No Next.js, podemos usar **API Route Handlers** para criar nossas APIs e aplicar a validação de dados diretamente nas rotas. Vamos ver como usar o Zod para garantir que os dados recebidos em uma requisição de API sejam válidos. + +## Exemplo 1: Validação de dados recebidos em uma rota de API + +Aqui, criamos uma API em Next.js que recebe um objeto com `name` e `age`, validando esses dados com o Zod. + +```ts +// src/app/api/users/route.ts + +import { z } from 'zod'; +import { NextResponse } from 'next/server'; + +// Definindo o schema para validação +const userSchema = z.object({ + name: z.string().min(1, 'O nome é obrigatório.'), + age: z.number().min(18, 'A idade mínima é 18 anos.'), +}); + +export async function POST(request: Request) { + try { + const body = await request.json(); + + // Validando os dados recebidos + const parsedData = userSchema.parse(body); + + // Processando os dados após validação + return NextResponse.json({ + message: 'Dados validados com sucesso', + data: parsedData, + }); + } catch (error) { + if (error instanceof z.ZodError) { + return NextResponse.json({ errors: error.errors }, { status: 400 }); + } + return NextResponse.json({ error: 'Erro desconhecido' }, { status: 500 }); + } +} +``` + +### Explicação + +- **Schema**: O `userSchema` define que o campo `name` é uma string obrigatória e `age` deve ser um número com idade mínima de 18. +- **Validação**: Usamos `userSchema.parse()` para validar os dados enviados no corpo da requisição. Se houver erros, eles são capturados e enviados de volta ao cliente com status 400. +- **Resposta**: Caso os dados sejam válidos, retornamos uma resposta de sucesso com os dados validados. + +--- diff --git a/apps/zod/src/content/docs/06-api-validation/01-estruturas-dados-tipos-corretos.md b/apps/zod/src/content/docs/06-api-validation/01-estruturas-dados-tipos-corretos.md new file mode 100644 index 0000000..95b65d6 --- /dev/null +++ b/apps/zod/src/content/docs/06-api-validation/01-estruturas-dados-tipos-corretos.md @@ -0,0 +1,63 @@ +--- +title: Garantindo estruturas de dados e tipos corretos +--- + +Além de validar entradas, podemos usar o Zod para garantir que as respostas enviadas por uma API sigam uma estrutura de dados específica. Isso é crucial para garantir que o cliente que consome a API receba sempre uma resposta no formato correto. + +Vamos ver um exemplo onde garantimos que os dados retornados pela API estejam corretos, tanto em formato quanto em tipo. + +## Exemplo 2: Garantindo tipos corretos na resposta da API + +Neste exemplo, validamos os dados antes de enviá-los de volta ao cliente para garantir que a estrutura está correta. + +```ts +// src/app/api/products/route.ts + +import { z } from 'zod'; +import { NextResponse } from 'next/server'; + +// Definindo o schema para a estrutura dos produtos +const productSchema = z.object({ + id: z.number(), + name: z.string(), + price: z.number().positive(), + inStock: z.boolean(), +}); + +// Definindo o schema para uma lista de produtos +const productsSchema = z.array(productSchema); + +export async function GET() { + const products = [ + { id: 1, name: 'Produto 1', price: 99.99, inStock: true }, + { id: 2, name: 'Produto 2', price: 149.99, inStock: false }, + ]; + + try { + // Validando a estrutura de dados antes de enviar a resposta + const validatedProducts = productsSchema.parse(products); + + return NextResponse.json(validatedProducts); + } catch (error) { + if (error instanceof z.ZodError) { + return NextResponse.json({ errors: error.errors }, { status: 400 }); + } + return NextResponse.json( + { error: 'Erro ao processar a resposta' }, + { status: 500 } + ); + } +} +``` + +### Explicação + +- **Schema**: O `productSchema` define a estrutura que cada produto deve seguir: `id` (número), `name` (string), `price` (número positivo), e `inStock` (booleano). +- **Validação**: Antes de enviar a lista de produtos, utilizamos `productsSchema.parse()` para garantir que cada item da lista siga o formato correto. Isso assegura que o cliente sempre receba os dados com a estrutura correta. +- **Erro**: Se os dados não estiverem no formato esperado, retornamos um erro com status 400. + +--- + +## Conclusão + +Usando **Zod** com as **API Routes** do Next.js, podemos garantir que tanto os dados recebidos quanto os dados enviados sigam a estrutura correta, assegurando que nossa API seja robusta e confiável. Isso evita problemas com dados mal formatados e melhora a comunicação entre o backend e o frontend. diff --git "a/apps/zod/src/content/docs/07-ts-projects/01-garantindo-seguran\303\247a-tipos.md" "b/apps/zod/src/content/docs/07-ts-projects/01-garantindo-seguran\303\247a-tipos.md" new file mode 100644 index 0000000..92d848e --- /dev/null +++ "b/apps/zod/src/content/docs/07-ts-projects/01-garantindo-seguran\303\247a-tipos.md" @@ -0,0 +1,43 @@ +--- +title: Garantindo segurança em tempo de execução quando tipos TypeScript não podem ser usados +--- + +O **TypeScript** é uma excelente ferramenta para garantir segurança de tipos em tempo de desenvolvimento, mas esses tipos são removidos durante a compilação para JavaScript. Isso significa que, em **tempo de execução**, o TypeScript não oferece nenhuma garantia sobre a estrutura dos dados. É aqui que o **Zod** entra em cena, fornecendo validação em tempo real para garantir que os dados estão corretos enquanto sua aplicação está sendo executada. + +O Zod oferece uma maneira de garantir a integridade dos dados em situações onde a tipagem estática do TypeScript não pode atuar, como no caso de dados vindos de APIs, formulários ou outras fontes externas. Usando o Zod, você valida os dados em tempo de execução e garante que eles seguem os tipos e formatos esperados. + +### Exemplo 1: Validando dados de uma API externa + +Vamos supor que estamos buscando dados de uma API externa. O TypeScript sozinho não pode garantir que os dados recebidos estão no formato correto. + +```ts +import { z } from 'zod'; + +const externalDataSchema = z.object({ + id: z.number(), + title: z.string(), + completed: z.boolean(), +}); + +async function fetchExternalData() { + const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); + const data = await response.json(); + + try { + // Validando os dados recebidos da API em tempo de execução + const validatedData = externalDataSchema.parse(data); + console.log('Dados validados:', validatedData); + } catch (err) { + console.error('Erro de validação:', err.errors); + } +} + +fetchExternalData(); +``` + +### Explicação + +- **Validação em tempo de execução**: Mesmo que o TypeScript tipifique `data` como um objeto, só o Zod pode garantir que os dados realmente correspondem à estrutura esperada no momento em que são recebidos. Se a API enviar dados inesperados, a validação falha e podemos lidar com isso imediatamente. +- **Segurança**: Esse nível de verificação adiciona uma camada de segurança contra dados malformados que podem causar erros no sistema, garantindo a integridade dos dados processados pela aplicação. + +--- diff --git a/apps/zod/src/content/docs/07-ts-projects/02-usando-infer.md b/apps/zod/src/content/docs/07-ts-projects/02-usando-infer.md new file mode 100644 index 0000000..2d9fc19 --- /dev/null +++ b/apps/zod/src/content/docs/07-ts-projects/02-usando-infer.md @@ -0,0 +1,52 @@ +--- +title: Usando z.infer para inferir tipos TypeScript a partir de esquemas Zod +--- + +Além de fornecer validação de dados em tempo de execução, o Zod também pode ser usado para **inferir tipos TypeScript** diretamente a partir de schemas Zod. Isso ajuda a manter uma única fonte de verdade para a validação e a tipagem, eliminando a necessidade de duplicar definições de tipos. + +O método `z.infer` permite derivar automaticamente um tipo TypeScript a partir de um schema Zod. Isso é especialmente útil para evitar a necessidade de definir manualmente os tipos TypeScript separados dos schemas de validação. + +### Exemplo 2: Inferindo tipos a partir de um schema Zod + +```ts +import { z } from 'zod'; + +// Definindo o schema +const userSchema = z.object({ + name: z.string(), + age: z.number(), +}); + +// Inferindo o tipo TypeScript a partir do schema +type User = z.infer; + +const userData: User = { + name: 'John Doe', + age: 30, +}; + +console.log(userData); +``` + +### Explicação + +- **Schema e tipo**: Aqui, o `userSchema` define a estrutura do dado, e o `z.infer` cria automaticamente um tipo TypeScript chamado `User`, que reflete essa estrutura. +- **Manutenção simplificada**: Ao usar `z.infer`, você garante que o tipo TypeScript será sempre consistente com o schema de validação do Zod. Se o schema for alterado, o tipo será atualizado automaticamente. + +### Exemplo 3: Uso de inferência em uma função + +```ts +function createUser(user: z.infer) { + console.log('Usuário criado:', user); +} + +createUser({ name: 'Alice', age: 25 }); // Valido +``` + +Aqui, usamos o tipo inferido diretamente como o tipo do argumento da função, garantindo que os dados passados para `createUser` sempre sigam a estrutura definida no schema. + +--- + +## Conclusão + +O Zod é uma ferramenta poderosa que complementa o TypeScript fornecendo **validação em tempo de execução** para garantir a integridade dos dados em cenários onde o TypeScript não pode atuar. Além disso, com `z.infer`, é possível unificar a definição de tipos e validação, evitando inconsistências e facilitando a manutenção do código. Isso ajuda a criar aplicações mais seguras e robustas. diff --git a/apps/zod/src/content/docs/index.mdx b/apps/zod/src/content/docs/index.mdx new file mode 100644 index 0000000..a59216a --- /dev/null +++ b/apps/zod/src/content/docs/index.mdx @@ -0,0 +1,17 @@ +--- +title: Zod +description: Um workshop do Codante.io +template: doc +hero: + tagline: Um guia escrito para o workshop "Zod" do Codante.io + image: + file: ../../assets/zod.svg + actions: + - text: Comece por aqui + link: 01-intro-zod/01-o-que-e-zod/ + icon: right-arrow + variant: primary + - text: Repositório deste guia + link: https://github.com/codante-io/workshop-zod-guia + icon: external +--- diff --git a/apps/zod/src/env.d.ts b/apps/zod/src/env.d.ts new file mode 100644 index 0000000..acef35f --- /dev/null +++ b/apps/zod/src/env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/apps/zod/src/tailwind.css b/apps/zod/src/tailwind.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/apps/zod/src/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/apps/zod/tailwind.config.mjs b/apps/zod/tailwind.config.mjs new file mode 100644 index 0000000..93f091b --- /dev/null +++ b/apps/zod/tailwind.config.mjs @@ -0,0 +1,18 @@ + +import starlightPlugin from '@astrojs/starlight-tailwind'; +import colors from 'tailwindcss/colors'; + + +/** @type {import('tailwindcss').Config} */ +export default { + content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + theme: { + extend: { + colors: { + accent: colors.cyan, + gray: colors.zinc, + } + }, + }, + plugins: [starlightPlugin()], +} diff --git a/apps/zod/tsconfig.json b/apps/zod/tsconfig.json new file mode 100644 index 0000000..77da9dd --- /dev/null +++ b/apps/zod/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "astro/tsconfigs/strict" +} \ No newline at end of file