Ir para o conteúdo

Galeria de Exemplos 🎨

Bem-vindo à galeria do tempestweb! 🚀 Aqui você encontra apps completos e prontos para rodar, cada um focado em um conceito — estado, formulários, listas, navegação, tema, i18n, canvas, capacidades nativas e muito mais.

Os três modos, o mesmo código

Cada exemplo é um módulo view(app) -> Widget em Python tipado. O mesmo app.py roda sem mudar uma linha:

  • Modo A (WASM/Pyodide) — Python direto no browser.
  • Modo B (servidor) — Python no servidor FastAPI + cliente fino por WebSocket.
  • Modo C (transpile) — o app transcrito para JS nativo, bundle estático.

A árvore de view nunca nomeia um transporte. Você escreve a lógica uma vez e escolhe o modo na hora de servir.

Os selos de modo

Cada linha traz um selo: [A/B] roda nos modos interativos (WASM e servidor); [A/B/C] roda também transpilado para JS nativo. A maioria dos exemplos usa componentes prontos ou o formato Python de evento (event.value), por isso vive em A/B. O Modo C roda o subconjunto de widgets puros — o exemplo-vitrine é o Tour do Modo C.

Como ler cada página

Toda página segue o padrão do tutorial: o que você vai construir → o código completo → explicação peça por peça → um Recap no final. Comece pelo Contador e pela Lista de tarefas se for novo por aqui.

Fundamentos

Os blocos básicos — o ponto de partida para todo mundo.

  • Contador — o "olá mundo" reativo: estado + handler + patch. [A/B/C]
  • Lista de tarefas — Input controlado, LazyColumn virtualizado e Checkbox por item. [A/B]
  • Formulário — Form + FormField + validadores tipados que espelham erros no estado. [A/B]
  • Fetch assíncrono — transição idle → loading → loaded/error com handler async. [A/B]

Estado e dados

Gerencie tempo, conversões, tabelas e gráficos de forma 100% determinística.

  • Cronômetro — Start/Stop/Lap/Reset com tempo guardado como inteiro de décimos de segundo. [A/B]
  • Conversor de temperatura — dois campos controlados (Celsius/Fahrenheit) sincronizados via two-way binding. [A/B]
  • Tabela de dados — busca ao vivo + ordenação por coluna (ASC/DESC), dirigida pelo estado. [A/B]
  • Grade de dados — grade densa com colunas tipadas e formatação por célula. [A/B]
  • Dashboard de gráficos — cards de métricas + gráficos desenhados a partir do estado. [A/B]

Formulários e fluxos

Da validação simples ao wizard de múltiplos passos.

  • Formulário de login — EmailInput/PasswordInput, validação em três camadas e Banner de erro. [A/B]
  • Wizard de cadastro — três passos (Conta/Perfil/Revisão) com validadores que liberam o "Próximo". [A/B]
  • Cadastro brasileiro — PF/PJ com máscaras de CPF/CNPJ/telefone/endereço e validadores BR em tempo real. [A/B]
  • Quiz com pontuação — 5 perguntas com RadioGroup, ProgressBar e tela final de resultado. [A/B]

Componentes prontos (core)

Os componentes de alto nível do tempest_core — cascas, cards e feedback prontos.

Layout e navegação

Cascas de app, abas, drawers e rotas.

Listas, mídia e entrada

Listas virtualizadas, galerias, chat, busca e drag-and-drop.

  • Galeria de imagens — LazyGrid virtualizado de 12 fotos + Dialog lightbox. [A/B]
  • Chat UI — LazyColumn virtualizado, Input two-way e Button de envio. [A/B]
  • Busca com autocomplete — filtragem ao vivo via Autocomplete + filtro de categoria por Chip. [A/B]
  • Kanban board — três colunas com cards Draggable e DragTarget para mover/excluir. [A/B]

Seleção e feedback

Controles, disclosure e estados de feedback.

  • Modo escuro — o tema chega ao widget: theme=app.theme e app.set_theme, com os mesmos valores nos três modos. [A/B/C]
  • Painel de configurações — Switch, Checkbox, Slider, RadioGroup e SegmentedControl ligados ao estado. [A/B]
  • Formulário de reserva — DatePicker, TimePicker, RangeSlider, Dropdown e FilePicker, os controles nativos do navegador. [A/B/C]
  • Avaliação e review — estrelas Rating + Chip tags + TextArea num formulário validado. [A/B]
  • FAQ accordion — Accordion com política de "um aberto por vez" e filtro de busca. [A/B]
  • Central de notificações — Banner, Badge de não-lidas e EmptyState na caixa vazia. [A/B]

Tema, i18n e canvas

Personalização visual, internacionalização e desenho.

Capacidades nativas

A ponte nativa (tempestweb.native) dá acesso a geolocalização, HTTP, câmera, área de transferência, compartilhamento e armazenamento — sempre via callables injetáveis, então cada exemplo roda determinístico nos testes com um FakeBridge.

PWA e offline

Instalação como app, escritas duráveis e notificações push no browser.

  • Instalação PWA + WebPush — fluxo de consentimento em 7 fases + script build_pwa.py que emite manifesto e ícones instaláveis. [A/B]
  • Fila offline — escritas duráveis via native.offline (enqueue → size → replay) que sobrevivem a estar offline. [A/B]
  • WebPush ponta a ponta (servidor) — assinatura + entrega de push VAPID reais a partir de um servidor FastAPI. [B]

Observabilidade

Telemetria, feature flags, fronteiras de erro e autenticação — os blocos que deixam um app pronto para produção.

  • Feature flags — FeatureFlagsProvider + InMemoryFeatureFlagsAdapter: duas flags trocam variantes de widget ao vivo. [A/B]
  • Error boundary + telemetria — ErrorBoundary envolvendo um filho explosivo, com on_error ligado a Logger + TelemetryProvider. [A/B]
  • Gate de autenticação JWT — AuthStore + route_guard, JWTs decodificados offline e trilha de auditoria via Logger. [A/B]

Modos de execução

O mesmo view rodando no servidor ou transpilado, sem mudar uma linha.

  • Rodando o Modo B (servidor) — o exemplo do contador rodando unchanged em um servidor FastAPI por WebSocket via TestClient. [B]
  • Tour do Modo C (transpile) — um app com estado+métodos, navegação, i18n, tema, formulário e animação transcrito para JS nativo. [A/B/C]

Demos mínimos

Cada um isola uma única capacidade no menor código possível — ótimos para ler de uma sentada. Não têm página dedicada; rode qualquer um com:

tempestweb dev --path examples/<dir>

Todos rodam nos Modos A/B.

  • a11y_demo — a11y (Semantics → ARIA) + i18n (translate) + cor de tema num único botão.
  • anim_demo — transições CSS implícitas: um Style com Transition faz o browser tweenar a mudança.
  • async_demo — um handler async que awaita um timer e atualiza a UI sem travar a aba.
  • geo_demo — a capacidade nativa de geolocalização (native.get_position) resolvida em-processo (Modo A) ou por proxy (Modo B).
  • gesture_demo — GestureDetector roteando on_swipe/on_tap (gestos de ponteiro) para handlers Python.
  • list_demo — um LazyColumn declarando 1000 itens mas materializando só a janela visível ao rolar.
  • login_demo — a tela de login pronta via o componente LoginForm, sem layout manual.
  • overlay_demo — a camada de overlay flutuante: um Dialog acima da árvore, dispensável por id.
  • router_demo — navegação dirigida por URL: view renderiza a tela do topo de app.nav.
  • camera_demo — CameraPreview reportando frames amostrados e QrScanner decodificando código pelo BarcodeDetector da plataforma (exige contexto seguro; localhost conta).
  • reorder_demo — ReorderableList: arrastar uma linha reporta as duas posições, e mover é trabalho do estado.
  • responsive_demo — a mesma view em dois layouts, decidida por app.media (o cliente reporta o snapshot no mount e a cada resize).
  • webaudio_demo — uma frase inteira agendada numa chamada (native.webaudio.sequence, notas com envelope, start_ms igual = acorde) e o analisador medindo o próprio barramento de síntese (watch_levels, sem microfone e sem prompt de permissão).

Pronto para começar?

Escolha um exemplo que se pareça com o que você quer construir, copie o app.py, e rode nos modos que fizerem sentido. Todos passam no gate verde (build, ruff, mypy --strict). Bom código! 💡