Merge pull request #3 from mechamobau/feat/react-hook-form-workshop

feat(react-hook-form): adiciona conteúdo do worshop rhf

.github/workflows/deploy.yml

@@ -37,6 +37,7 @@ jobs:
             apps/next-introdutorio/node_modules/.astro
             apps/ts-no-react/node_modules/.astro
             apps/zod/node_modules/.astro
+            apps/react-hook-form/node_modules/.astro
           key: ${{ runner.os }}-astro-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-astro-
@@ -56,6 +57,7 @@ jobs:
             apps/next-introdutorio/dist/
             apps/ts-no-react/dist/
             apps/zod/dist/
+            apps/react-hook-form/dist/
           # Add more apps as needed
 
   deploy:
@@ -79,6 +81,9 @@ jobs:
           - name: 'zod'
             path: './zod/dist/'
             remote_path: '/var/www/guias/zod/'
+          - name: 'react-hook-form'
+            path: './react-hook-form/dist/'
+            remote_path: '/var/www/guias/react-hook-form/'
           # Add more apps as needed
 
     steps:

apps/home/app/resources.tsx

@@ -13,6 +13,7 @@ import { ChatBubbleIcon } from '@/components/icons/ChatBubbleIcon';
 import { NextJsIcon } from '@/components/icons/NextJsIcon';
 import { UsersIcon } from '@/components/icons/UsersIcon';
 import { SiZod } from '@icons-pack/react-simple-icons';
+import { SiReact } from '@icons-pack/react-simple-icons';
 
 interface Resource {
   href: string;
@@ -86,6 +87,18 @@ const resources: Array<Resource> = [
       ],
     },
   },
+  {
+    // full href
+    href: 'https://guias.codante.io/react-hook-form',
+    name: 'React Hook Form',
+    description:
+      'Aprenda a biblioteca mais popular de validação e criação de formulários em React.',
+    icon: SiReact,
+    pattern: {
+      y: 32,
+      squares: [[0, 2]],
+    },
+  },
   // {
   //   href: '/messages',
   //   name: 'Mensagens',

apps/react-hook-form/.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/react-hook-form/README.md

@@ -0,0 +1,3 @@
+# Guia - React Hook Form
+
+Guia construído com [Starlight](https://starlight.astro.build) para workshop do codante de React Hook Form.

apps/react-hook-form/astro.config.mjs

@@ -0,0 +1,67 @@
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+import tailwind from '@astrojs/tailwind';
+
+// https://astro.build/config
+export default defineConfig({
+  base: '/react-hook-form/',
+  integrations: [
+    starlight({
+      favicon: '/favicon.ico',
+      title: 'React Hook Form',
+      editLink: {
+        baseUrl:
+          'https://github.com/codante-io/guias/edit/main/apps/react-hook-form/',
+      },
+      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 React Hook Form',
+          autogenerate: {
+            directory: '01-intro-react-hook-form',
+          },
+        },
+        {
+          label: '2. Configurando o Ambiente de Desenvolvimento',
+          autogenerate: {
+            directory: '02-setup-react-hook-form',
+          },
+        },
+
+        {
+          label: '3. Uso Básico',
+          autogenerate: {
+            directory: '03-basic-usage',
+          },
+        },
+        {
+          label: '4. Exemplos de Formulários com React Hook Form',
+          autogenerate: {
+            directory: '04-exemplos-de-formularios-com-react-hook-form',
+          },
+        },
+        {
+          label: '5. Recursos Avançados do React Hook Form',
+          autogenerate: {
+            directory: '05-react-forms',
+          },
+        },
+      ],
+    }),
+    tailwind({ applyBaseStyles: false }),
+  ],
+});

apps/react-hook-form/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "react-hook-form",
+  "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/react-hook-form/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/react-hook-form/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/react-hook-form/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/react-hook-form/src/content/docs/00-intro/01-Introdução.md

@@ -0,0 +1,11 @@
+---
+title: Boas Vindas
+description: Boas vindas ao workshop de React Hook Form!
+---
+
+Boas vindas ao nosso Workshop de React Hook Form!
+
+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/react-hook-form/src/content/docs/00-intro/02-o-que-vamos-aprender.md

@@ -0,0 +1,51 @@
+---
+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 o React Hook Form**.
+
+### **Agenda do Workshop**
+
+---
+
+### **1. Introdução ao React Hook Form**
+
+- O que é o React Hook Form?
+- Por que o React Hook Form é útil?
+
+### **2. Configurando o Ambiente de Desenvolvimento**
+
+- Instalando o React Hook Form
+- Configurando o projeto
+- Exemplos básicos de uso.
+
+### **3. Uso Básico**
+
+- Validando uma string simples
+- Validando um e-mail
+- Validando um número com restrição de valor mínimo
+- Validando um checkbox
+- Validando um array de e-mails
+- Validando um objeto simples
+
+### **4. Exemplos de Formulários com React Hook Form**
+
+- **Formulário Simples**: Validação de um campo de nome.
+- **Validação Personalizada**: Campo de senha com requisitos de comprimento.
+- **Componentes Controlados**: Checkbox para aceitar termos de uso.
+- **Gestão do Estado do Formulário**: Uso do `watch` para visualizar mudanças em tempo real.
+- **Field Array**: Manipulação de uma lista de e-mails usando `useFieldArray`.
+- **Componentes de UI Externos**: Integração com bibliotecas de componentes, como `react-select`.
+- **Submissão Assíncrona**: Simulando requisições assíncronas durante a submissão.
+
+### **5. Recursos Avançados do React Hook Form**
+
+- Uso do `Controller` para componentes não nativos.
+- Estratégias para lidar com formulários complexos.
+
+### **Recursos Adicionais**
+
+- [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 React Hook Form 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/react-hook-form/src/content/docs/00-intro/03-pre-requisitos.md

@@ -0,0 +1,8 @@
+---
+title: Pré requisitos
+---
+
+Vamos aprender **React Hook Form** 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/react-hook-form/src/content/docs/00-intro/04-repositorio.md

@@ -0,0 +1,11 @@
+---
+title: Repositório e Aplicação usados
+---
+
+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-react-hook-form-workshop](https://github.com/mechamobau/codante-react-hook-form-workshop)

apps/react-hook-form/src/content/docs/01-intro-react-hook-form/01-o-que-e-react-hook-form.md

@@ -0,0 +1,25 @@
+---
+title: O que é o React Hook Form?
+---
+
+O React Hook Form é uma biblioteca para gerenciamento de formulários em aplicações React. Ele permite que você crie, valide e gerencie formulários de maneira eficiente e com menos código. A biblioteca é leve e otimizada para desempenho, tornando-a uma escolha popular entre os desenvolvedores React.
+
+### Principais Características do React Hook Form
+
+- **Fácil Integração**: O React Hook Form se integra facilmente com componentes de formulário existentes e bibliotecas de UI, como Material-UI e Ant Design.
+- **Validação Simplificada**: A biblioteca oferece suporte a validação de formulários usando validações nativas do HTML5, bem como bibliotecas de validação de terceiros, como Yup e Zod.
+- **Desempenho**: O React Hook Form é otimizado para minimizar re-renderizações, resultando em melhor desempenho em comparação com outras bibliotecas de formulários.
+- **Controle Total**: Você tem controle total sobre os dados do formulário e pode facilmente gerenciar estados complexos de formulários.
+
+### História do React Hook Form
+
+O React Hook Form foi criado por Bill Luo em 2019. A motivação por trás da criação do React Hook Form foi a necessidade de uma solução de gerenciamento de formulários que fosse simples de usar, mas poderosa o suficiente para lidar com casos de uso complexos. Bill queria uma ferramenta que pudesse ser facilmente integrada com React, fornecendo uma experiência de desenvolvimento mais suave e eficiente.
+
+### Inspirações
+
+Durante o desenvolvimento do React Hook Form, várias bibliotecas influenciaram seu design e funcionalidade. Algumas das principais inspirações incluem:
+
+- **Formik**: Uma biblioteca popular para gerenciamento de formulários em React. O React Hook Form se inspirou na simplicidade e na abordagem declarativa do Formik.
+- **Redux Form**: Outra biblioteca de gerenciamento de formulários que é popular no ecossistema React. O React Hook Form buscou oferecer uma solução mais leve e com melhor desempenho em comparação com o Redux Form.
+
+Essas bibliotecas ajudaram a moldar o React Hook Form, resultando em uma ferramenta que combina o melhor de cada uma delas, oferecendo uma experiência de gerenciamento de formulários eficiente e amigável para desenvolvedores React.

apps/react-hook-form/src/content/docs/01-intro-react-hook-form/02-por-que-react-hook-form-e-util.md

@@ -0,0 +1,50 @@
+---
+title: Por que o React Hook Form é útil?
+---
+
+O **React Hook Form** é uma ferramenta extremamente útil para desenvolvedores que trabalham com **React**, especialmente quando se trata de **gerenciamento de formulários**. Hoje, vamos explorar por que o React Hook Form é tão valioso e como ele pode ser utilizado para garantir que os formulários em sua aplicação sejam gerenciados de maneira eficiente e com menos código.
+
+## Gerenciamento de formulários
+
+Em muitas aplicações, os formulários são uma parte essencial da interação do usuário. Gerenciar o estado dos formulários e validar os dados de entrada pode ser uma tarefa complexa e propensa a erros. O React Hook Form simplifica esse processo, fornecendo uma API intuitiva e eficiente para lidar com formulários em aplicações React.
+
+## Exemplo de uso básico
+
+Vamos criar um exemplo onde temos um formulário de login, e precisamos gerenciar o estado dos campos `username` e `password`. O React Hook Form nos permite fazer isso de maneira simples e eficiente.
+
+```jsx
+import React from 'react';
+import { useForm } from 'react-hook-form';
+
+function LoginForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+
+  const onSubmit = (data) => {
+    console.log(data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div>
+        <label>Username</label>
+        <input {...register('username', { required: true })} />
+        {errors.username && <span>Este campo é obrigatório</span>}
+      </div>
+
+      <div>
+        <label>Password</label>
+        <input type="password" {...register('password', { required: true })} />
+        {errors.password && <span>Este campo é obrigatório</span>}
+      </div>
+
+      <input type="submit" />
+    </form>
+  );
+}
+
+export default LoginForm;
+```