AUTH (Sistema de Autenticação - Login, Criar Conta)Auth
ZIP
Bibliotecade módulosPastas e ZIPsDocumentação
do módulo
Módulos prontos.Novos projetos à frente.
Uma biblioteca própria para reaproveitar módulos React e Next.js.
Biblioteca de módulos React com preview antes de instalar.
- Tauri 2
- React 18
- Rust
- Next.js
Biblioteca de módulosPastas e ZIPsDocumentação do móduloMódulos prontos.Novos projetos à frente.
Uma biblioteca própria para reaproveitar módulos React e Next.js.
- Tauri 2
- React 18
- Rust
- Next.js
Biblioteca de módulos React com preview antes de instalar.
- Tauri 2
- React 18
- Rust
- Next.js
A biblioteca
Cinquenta e quatro módulos, separados pelo nome.
A biblioteca é uma pasta: cada ZIP (ou pasta com documentação) vira um módulo, e a categoria sai do próprio nome, sem cadastro. Estes são os 54 módulos de verdade. Troque a aba ou teste um nome qualquer.
BACKUP-CORRIGIDOOutros
ZIPCATEGORIA-PAGE - VesteForeverOutros
ZIPCHECKOUT (Página de Finalização de Compra)Checkout
ZIPDASHBOARD-CLIENTE-DASHBOARD-BASECliente
ZIPDASHBOARD-CLIENTE-FAVORITOSCliente
ZIPDASHBOARD-CLIENTE-MINHA-CONTA (10 MODULOS JUNTOS)Cliente
ZIPDASHBOARD-CLIENTE-RASTREARCliente
ZIPDASHBOARD-CLIENTE-TAB-ACCOUNTCliente
ZIPDASHBOARD-CLIENTE-TAB-CLUBCliente
ZIPDASHBOARD-CLIENTE-TAB-FAVORITESCliente
ZIPDASHBOARD-CLIENTE-TAB-ORDERSCliente
ZIPModulo - CARRINHO (cart drawer)A palavra "cart" decidiu.
CheckoutA regra é a do programa (commands.rs, detect_category), nesta ordem: admin; cliente ou dashboard; auth ou login; checkout ou cart; produto; layout, header ou footer; tema; hook; api; o resto vai para Outros. Por isso abas como Admin e API ficam vazias neste acervo, nenhum nome tem essas palavras.
Veja antes. Escolha melhor.
Pré-visualização local e arquivos do módulo no mesmo ambiente.
Preview localArquivos e códigoSandbox Next.jsAntes de levar um módulo para um projeto, dá para vê-lo funcionando: o programa sobe um Next.js de teste e desenha o componente numa janela. Escolha um módulo e inicie o preview.
Escolha o módulo
- 1Sobe o sandbox: npm run dev, porta 3333 (espera 3 s)
- 2Copia os .ts e .tsx para components/modules/dashboard-cliente-tab-orders
- 3Abre /preview?module=dashboard-cliente-tab-orders numa janela
- 4A página importa o componente e o desenha
No módulo
- components/TabOrders.tsx
- components/OrderCard.tsx
- lib/format.ts
- DOCUMENTACAO.md
components/modules/dashboard-cliente-tab-orders/
- …
localhost:3333/preview?module=dashboard-cliente-tab-orders
▷
Como no programa (commands.rs e preview-sandbox): os arquivos são achatados pelo nome e o componente precisa ter export default. O sandbox tem só react, framer-motion, lucide-react e Tailwind, um módulo que importa outra coisa não aparece. O cartão desenhado aqui é um exemplo.
Do módulo ao projeto. Um fluxo sob medida.
Uma ferramenta própria para escolher módulos e levar os arquivos ao projeto de destino.
Ferramenta autoralSeleção de módulosProjeto de destinoCópia de arquivosEscolhidos os módulos, o programa olha o projeto de destino pelo package.json e copia tudo de uma vez, anotando cada passo. Marque módulos, ajuste o projeto e instale.
Módulos marcados
Projeto de destino
Next.jsTailwind
No package.json
Raiz do projeto
- app/
- components/
- package.json
Registro
- Nada instalado ainda.
As telas de verdade
Como no programa (commands.rs): a análise lê só o package.json, Next.js, React, Prisma e Tailwind; a cópia leva tudo da raiz do módulo para a raiz do projeto e substitui o que já existir com o mesmo nome; nenhuma dependência é instalada. Os nomes dos módulos aqui estão encurtados.
As tecnologias
Do que é feito, peça por peça
Um programa de computador leve: a tela é React com Tailwind dentro do Tauri 2; o Rust lê a biblioteca de módulos, analisa o projeto de destino e copia os arquivos, em 12 comandos; e um Next.js de teste ao lado desenha o módulo antes da instalação. Escolha uma peça para ver o que ela faz aqui e em que arquivo está.
9tecnologias, em 2 camadas
Tela
Programa
Ferramentas para criação e desenvolvimentoVideoForge