[DRAFT] Fix/stack-trpc

stack/trpc/explicacao.md

@@ -1,13 +1,36 @@
 ---
-order: 3
+order: a
 icon: question
 label: "O que é tRPC?"
 ---
 
-# O que é tRPC
+# O que é tRPC?
 
-A denominação tRPC é uma abreviação de "TypeScript Remote Procedure Call", uma biblioteca do TypeScript que se insipira no RPC (Remote Procedure Call), um protocolo específico de comunicação que permite a comunicação entre um cliente e servidor em diferentes dipostivos.
+tRPC é uma **biblioteca para desenvolvedores TypeScript** de aplicações web, que permite a **criação de APIs** totalmente **tipadas** de ponta a ponta.
 
-Essa biblioteca trabalha com uma estrutura que facilita a visualização dos endpoints (pontos de comunicação) e a compreensão do que se passa por eles. Deste modo, temos acesso aos tipos de dados, que estão sendo comunicados, pelo lado cliente e, assim, temos um melhor monitoramento do funcionamento e de possíveis erros.
+Utilizando o poder do TypeScript para garantir segurança de tipos em todo o fluxo de dados, ela torna também fácil a maneira de escrever endpoints no backend, para serem usados de maneira segura no frontend, a partir dos contratos de API pré-estabelecidos no design do projeto
 
-Em resumo, tRPC ajuda a tornar a comunicação entre cliente e servidor mais clara, segura e eficiente, uma vez que possibilita uma maior transparência dos dados percorridos no sistema.
+## Conceitos Básicos de RPC e tRPC
+
+### O que é RPC?
+
+RPC, ou _Remote Procedure Call_, é um protocolo que permite chamar **procedimentos** (ou rotinas) em um computador (servidor), a partir de outro computador na rede (cliente), sem que o programador precise codificar explicitamente os detalhes que permitem essa interação remota. O RPC **abstrai a complexidade da comunicação de rede**, permitindo que o desenvolvedor se concentre na lógica do procedimento.
+
+Em _APIs HTTP/REST tradicionais_, você realiza uma requisição, por meio de um `URL`, e obtém uma resposta. Em uma _API RPC_, você chama uma `função` e obtém uma resposta.
+
+==- Rest x RPC
+
+```tsx
+// HTTP/REST
+const res = await fetch("/api/users/1");
+const user = await res.json();
+
+// RPC
+const user = await api.users.getById({ id: 1 });
+```
+
+===
+
+### Como o tRPC se Relaciona com RPC?
+
+tRPC é uma biblioteca que implementa o RPC e é projetada para _monorepos_ com TypeScript full-stack.

stack/trpc/instalacao.md

@@ -1,41 +1,27 @@
 ---
-order: 2
+order: b
 icon: tools
-label: "Instalação"
+label: "Como instalar o tRPC?"
 ---
 
-# Instalação
+## Escolha seu ambiente
 
-O tRPC possui vários tipos de pacotes com conteúdos extras, para instalar o pacote padrão:
+O tRPC pode ser utilizado em uma varidade muito ampla de **_stacks_ diferentes**. Então, o seu **primeiro passo** é escolher **onde você quer utilizar o tRPC**.
 
-!!! Requisitos
+## Exemplos de Aplicações
 
-- Deve-se certificar que a versão do TypeScript seja igual ou superior à versão 4.7.0.
-- É recomendado a atribuição "strict": true no arquivo `tsconfig.json`, já que não há suporte para o contrário.
-  !!!
+A documentação do tRPC inclui uma seção de `Example Apps`, que são _templates_ e _exemplos práticos_ para você **aproveitar** e implementar o tRPC em **diferentes cenários**.
 
-+++ npm
-`npm install @trpc/server @trpc/client`
-+++ yarn
-`yarn add @trpc/server @trpc/client`
-+++ pnpm
-`pnpm add @trpc/server @trpc/client`
-+++ bun
-`bun add @trpc/server @trpc/client`
-+++
+[!ref icon="/assets/logos-tecnologias/trpc.svg"](https://trpc.io/docs/example-apps)
 
-## Pacotes recomendados
+## Sobre a configuração
 
-Para projetos em Next.js é recomendado a instalação de uma versão que é uma combinação da versão para React (React Query) com algumas ferramentas específicas a mais de integração para o Next:
+Para configurar o tRPC no backend, existem [adapters para diferentes frameworks](https://trpc.io/docs/server/adapters), bem como para [um simples repositório com Node.js](https://trpc.io/docs/quickstart).
 
-+++ npm
-`npm install @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query zod`
-+++ yarn
-`yarn add @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query zod`
-+++ pnpm
-`pnpm add @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query zod`
-+++ bun
-`bun add @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query zod`
-+++
+Para o frontend, você pode olhar as integrações do próprio tRPC com [React (construiído a partir do React Query)](https://trpc.io/docs/client/react) ou com [Next.js](https://trpc.io/docs/client/nextjs), ou olhar por integrações de terceiros para uma série de frameworks, ou pode até mesmo configurar para [um simples repositório com TypeScript rodando](https://trpc.io/docs/client/vanilla/setup).
 
-Para projetos somente em React, basta o mesmo procedimento anterior, agora sem o parâmetro `@trpc/next` e `zod` (caso não use zod em React)
+## Próximos passos
+
+Escolhida sua **stack** e instaldao o **tRPC**, basta agora criar sua aplicação seguindo modelos ou design patterns definidos com sua equipe do projeto.
+
+Na próxima seção da nossa documentação, ["Como utilizar o tRPC?"](./utilizacao.md), abordaremos a configuração do tRPC utilizando o [T3 Stack](/stack/), uma combinação popular que inclui Next.js, Prisma, Tailwind CSS, entre outros. Fique atento!

stack/trpc/utilizacao/chamando-rotas.md

@@ -0,0 +1,21 @@
+---
+order: c
+icon: package-dependencies
+label: Chamando as rotas
+---
+
+!!!
+Essa documentação assume que você esteja usando o tRPC em um repositório T3 Stack
+!!!
+
+## Server-side
+
+Para chamar uma rota tRPC e algumas procedures suas em um server component, assista ao vídeo abaixo:
+
+[!embed](https://youtu.be/j3pjQItk9Co?si=IZNdP1-IVxx27gW8)
+
+## Client-side
+
+Para chamar uma rota tRPC e algumas procedures suas em um client component, assista ao vídeo abaixo:
+
+[!embed](https://youtu.be/j3pjQItk9Co?si=IZNdP1-IVxx27gW8)

stack/trpc/utilizacao/conceitos.md

@@ -0,0 +1,19 @@
+---
+order: a
+icon: project-roadmap
+label: Alguns conceitos
+---
+
+Veremos aqui alguns termos que são **frequentemente usados no ecossistema do tRPC**, incluindo essa seção da documentação de como utilziar o tRPC.
+
+=== Procedure
+Um endpoint da API, que criaremos em uma rota do backend e, então, chamaremos no frontend. Pode ser uma **query**, uma **mutation** ou uma **subscription**, porém só trataremos de queries e mutations aqui nesta documentação;
+=== Query
+Uma procedure para obter dados;
+=== Mutation
+Uma procedure para criar, atualizar ou deletar dados armazenados;
+=== Router
+Uma coleção de procedures (e/ou outros routers);
+=== Context
+Material externo que toda procedure pode acessar, para sua lógica interna.
+===

stack/trpc/utilizacao/definindo-rotas.md

@@ -0,0 +1,28 @@
+---
+order: b
+icon: package-dependents
+label: Definindo rotas
+---
+
+!!!
+Essa documentação assume que você esteja usando o tRPC em um repositório T3 Stack
+!!!
+
+## Criando uma query
+
+Para criar uma procedure cujo objetivo é recuperar dados do banco de dados, assista ao vídeo abaixo, onde demonstramos como:
+
+- Criar uma rota
+- Criar uma query publica
+- Utilizar o context em uma procedure
+
+[!embed](https://youtu.be/j3pjQItk9Co?si=IZNdP1-IVxx27gW8)
+
+## Criando uma mutation
+
+Para criar uma procedure cujo objetivo é alterar dados armazenados em um banco de dados, assista ao vídeo abaixo, onde demonstramos como:
+
+- Criar uma mutation protegida
+- Utilizar o input em uma procedure
+
+[!embed](https://youtu.be/j3pjQItk9Co?si=IZNdP1-IVxx27gW8)

stack/trpc/utilizacao/index.yml

@@ -0,0 +1,3 @@
+icon: command-palette
+label: Como utilizar o tRPC?
+order: c