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 e muito mais.

Os dois modos, o mesmo código

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

Modo A (WASM/Pyodide) — Python direto no browser.
Modo B (servidor) — Python no servidor FastAPI + cliente fino por WebSocket.

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

Como ler cada página

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

Fundamentos¶

Os blocos básicos — o ponto de partida para todo mundo. Esses quatro já fazem parte do Tutorial.

Contador — o "olá mundo" reativo: estado + handler + patch.
Lista de tarefas — Input controlado, lista virtualizada e checkboxes por item.
Formulário — Form + FormField + validadores que espelham erros no estado.
Fetch assíncrono — transição idle → loading → loaded com handler async.

Estado e dados¶

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

Cronômetro — Start/Stop/Lap/Reset com tempo guardado como inteiro de décimos de segundo (sem relógio de parede).
Conversor de temperatura — dois campos controlados (Celsius/Fahrenheit) sincronizados via two-way binding.
Tabela de dados — busca ao vivo + ordenação por coluna (ASC/DESC), tudo dirigido pelo estado em Python.

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.
Wizard de cadastro — três passos (Conta/Perfil/Revisão) com validadores que liberam o "Próximo".
Cadastro brasileiro — PF/PJ com máscaras de CPF/CNPJ/telefone/endereço e validadores BR em tempo real.
Quiz com pontuação — 5 perguntas com RadioGroup, ProgressBar e tela final de resultado.

Layout e navegação¶

Cascas de app, abas, drawers e rotas.

Perfil com abas — TabView + RouteChangeEvent com três seções e Switch nas configurações.
Dashboard app shell — Scaffold + AppBar + Sidebar + NavBar com quatro seções alternáveis.
Drawer de navegação e rotas — RouteDrawer deslizante, push/pop de rotas em 2 níveis e Breadcrumb.
Onboarding carousel — PageView com PageChangeEvent, indicador de pontos e tela de conclusão.

Listas, mídia e entrada¶

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

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

Componentes de seleção e feedback¶

Controles, disclosure e estados de feedback.

Painel de configurações — Switch, Checkbox, Slider, RadioGroup e SegmentedControl ligados ao estado.
Avaliação e review — estrelas Rating + Chip tags + TextArea num formulário validado.
FAQ accordion — Accordion com política de "um aberto por vez" e filtro de busca ao vivo.
Central de notificações — Banner, Badge de não-lidas e EmptyState na caixa vazia.

Tema, i18n e canvas¶

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

Alternador de tema — Theme/ThemeMode com App.set_theme, Theme.is_dark e simulação de OS via MediaQueryData.
Saudação internacionalizada — Locale + translate()/t() com inglês, português e árabe (RTL).
Sketch pad (canvas) — strokes como listas de comandos de desenho (MoveTo/LineTo), presets, undo e clear.

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.

Clima (HTTP + geolocalização) — handler async encadeado (idle → loading → loaded/error) combinando geolocation.get_position e http.request.
Copiar e compartilhar — clipboard.write + share.share injetados no estado, dirigindo dois handlers async com transições de fase.
Captura de câmera — ciclo IDLE → CAPTURING → CAPTURED/ERROR com camera.capture, preview por data URI e Card de metadados.
Notas no armazenamento do dispositivo — CRUD de notas sobre storage.put/get/list_keys/remove injetados.

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.
Error boundary + telemetria — ErrorBoundary envolvendo um filho explosivo, com on_error ligado a Logger + TelemetryProvider.
Gate de autenticação JWT — AuthStore + route_guard, JWTs decodificados offline, is_jwt_expired e trilha de auditoria via Logger.

PWA e offline¶

Instalação como app e notificações push no browser.

Instalação PWA + WebPush — fluxo de consentimento em 7 fases (notifications.request_permission/subscribe) + script build_pwa.py que emite manifesto e ícones instaláveis.

Modos de execução¶

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

Rodando o Modo B (servidor) — o exemplo do contador rodando unchanged em um servidor FastAPI por WebSocket via TestClient.

Pronto para começar?

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