Uttara · Page Builder
demo
Exemplos
Etapa 1 · análise do mockup
uttara-ui via subtree

Um construtor de blocos
para todo o ecossistema Uttara.

Esta app é a vitrine do @uttara-dev/page-builder. Ela consome o design system @uttara-dev/ui exatamente como qualquer outra ferramenta do ecossistema vai consumir — e provê, por sua vez, o construtor de conteúdo complexo como peça reutilizável.

O ecossistema Uttara em uma página

Várias ferramentas independentes, conectadas por um CAS de identidade e coerentes esteticamente porque consomem o mesmo design system.

Pacote de UI
v1.0.0
@uttara-dev/ui
Componentes registrados
50
primitivos, enriquecidos, compostos, layout
Distribuição
GitHub Packages
+ Git subtree em apps consumidoras
Identidade compartilhada
CAS
Auth + perfil único do ecossistema
@uttara-dev/ui

Um design system que assume a identidade — e a oferece para o resto do ecossistema

O que você está vendo nesta página já é o tema oficial Uttara aplicado: tipografia Lexend (display) e Red Hat Text (corpo), paleta oklch, e claro/escuro reagindo ao toggle no topo. O pacote injeta tudo via applyTheme(); o styles.css desta app não declara cor própria.

Camadas oferecidas
Importação granular via subpath exports. Cada camada se compõe sobre a anterior.
  • Primitivos shadcn
    Botões, inputs, dialogs — base reutilizada
    3
  • Enriquecidos
    FormInput, MaskedInput, PasswordStrength…
    9
  • Compostos
    DataTable, Combobox, FileUpload, IconPicker…
    18
  • Layout
    AppShell, AppHeader, AppSidebar, AppLauncher
    7
  • Providers
    ThemeProvider, I18nProvider, AuthProvider
    3
Como esta app consome
Git subtree, sem dependência de build secret
# uma vez:
git subtree add --prefix=src/lib/uttara-ui \
  uttara-ui main --squash

# atualizar para um release novo:
git subtree pull --prefix=src/lib/uttara-ui \
  uttara-ui v0.2.0 --squash

O código vive em src/lib/uttara-ui/ como source tracked, mas alinhado com tags de release do repositório upstream. Pacote NPM continua publicado para apps que tenham build secrets.

@uttara-dev/page-builder

A funcionalidade core que esta app entrega ao ecossistema

Mesma mecânica de entrega do @uttara-dev/ui: pacote NPM em pkg/, source compartilhado, tipos exportados, storage delegado para a app cliente.

O que vem no pacote
Editor + Renderer + tipos
import { PageBuilderEditor }
  from "@uttara-dev/page-builder/editor";
import { PageRenderer }
  from "@uttara-dev/page-builder/renderer";
import type { Page, Block, BlockInstance }
  from "@uttara-dev/page-builder/types";
import { defineBlock, builtinBlocks }
  from "@uttara-dev/page-builder/blocks";
O que a app cliente fornece
StorageAdapter — 4 métodos assíncronos
const adapter: StorageAdapter = {
  load:   (pageId) => /* sua query */,
  save:   (page)   => /* sua mutation */,
  list:   ()       => /* sua listagem */,
  delete: (pageId) => /* sua remoção */,
};

<PageBuilderEditor
  adapter={adapter}
  pageId={id}
/>

Editor ainda não plugado nesta rota

Próximo marco: ler docs/briefing/ e começar a implementação do PageBuilderEditor sobre o esqueleto em pkg/.

Distribuição

Dois canais, mesma fonte de verdade

GitHub Packages
Para apps com build-time secrets disponíveis

Instalação via npm install autenticado por .npmrc + PAT em variável de ambiente. Caminho ideal para CI e ambientes de hospedagem que expõem secrets de build.

Git subtree
Quando o ambiente de build não expõe secrets

Source vive dentro do repo da app consumidora, alinhado a tags de release. Sem token, sem registry, sem bleeding edge. Custo: um git subtree pull por upgrade.