Kit de UI e blocos

Antes de começar

Abra seu projeto supastack baixado em Visual Studio Code usando Arquivo → Abrir pasta e escolha Terminal → Novo Terminal. A raiz do repositório é a pasta que contém package.json, apps e pacotes. Execute o comando abaixo e deixe seu terminal aberto. Se um comando não for reconhecido, conclua o guia de instalação da ferramenta antes de continuar.

Leia o tutorial da plataforma primeiro. Um servidor é o processo do aplicativo que responde às solicitações do navegador ou do telefone. A Web lê apps/web-tanstack/.env.local, Expo lê apps/mobile/.env.local e os comandos de migração de banco de dados leem root .env. A demonstração sem banco de dados/painel é separada das contas reais/auth, que precisam migrar para Postgres. Uma finalização de compra somente por telefone ou desktop precisa de um back-end da Web executado separadamente.

• Instale as ferramentas e obtenha o código
• Aprenda comandos, arquivos e configuração
• Conclua o tutorial inicial da Web

corepack pnpm --filter @supastack/web-tanstack dev

Instalação e configuração

O packages/ui-web contém os componentes de produto partilhados (botões, inputs, cards, badges, dialogs, peças de shell) e o packages/design-tokens a fonte de tokens que app-theme.css mapeia para variáveis CSS. A rota /kit-blocks monta o catálogo de blocos — secções compostas que podes levar para o teu produto.

O apps/mobile consome packages/ui-native para os primitivos nativos equivalentes, por isso o estilo das superfícies fica por plataforma enquanto os contratos ficam partilhados.

# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web-tanstack dev
# Then open http://localhost:3000/kit-blocks in your browser

# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)

Fluxo de implementação

Compõe ecrãs primeiro a partir dos componentes partilhados; recorre a um elemento personalizado apenas quando o kit não consegue expressar o padrão. As novas peças partilhadas pertencem a ui-web com estilo orientado por tokens para que cada pack de tema se aplique automaticamente.

Mantém os componentes de marketing (src/marketing) fora das superfícies de produto e vice-versa — os dois sistemas de chrome estão intencionalmente separados.

Verificação e resolução de problemas

Verifica um novo componente contra cada preset de densidade/raio/fonte e pelo menos um pack claro e um escuro. Confirma o foco de teclado, o layout a 320px e a reduced motion; a galeria do kit em /settings/appearance é a varredura mais rápida.