Merge pull request #1 from mechamobau/zod-workshop

feat: cria guia para workshop zod

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

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. 

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 }),
+  ],
+});

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"
+  }
+}

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/)

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"}

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() }),
+};

apps/zod/src/content/docs/00-intro/01-Introdução.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!

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.

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

apps/zod/src/content/docs/00-intro/04-repositorio.md

@@ -0,0 +1,19 @@
+---
+title: Repositório e Aplicação usados
+---
+
+<!--
+Como já falamos por aqui, vamos usar uma aplicação simples em que teremos poucas páginas:
+
+- Uma página `home` com os botões para autenticação com diversos métodos;
+- Uma página `dashboard` que deverá ser protegida e apenas acessada por usuários logados. Nesta página também teremos o botão de `logout`.
+- Uma página `register` para cadastro de novos usuários com email e senha;
+- Páginas de `login` para cada um dos métodos de autenticação que iremos utilizar.
+
+A página inicial da aplicação é essa:
+
+![Página do App](../../../assets/images/app1.png)
+
+### Link do Repositório
+
+O repositório do exemplo da aula pode ser encontrado neste link: [https://github.com/mechamobau/codante-zod-workshop](https://github.com/mechamobau/codante-zod-workshop) -->

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.

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.