ada-ds-fake

Design System (PoC) do fluxo ADA. Fonte única de UI compartilhada por vários apps (o primeiro é ada-engage-fake).

• Stack: React + Vite (library mode) + TypeScript.
• Tokens: src/tokens/tokens.json é a fonte de verdade (cores, espaçamento, raio, tipografia). Também exportado tipado via ada-ds-fake/tokens e como dado cru via ada-ds-fake/tokens.json (consumido depois pelo lovable-context/).
• Componentes base: Button, Card, Input em src/shared/components/.
• Estilos: src/styles.css (CSS custom properties derivadas dos tokens). Importado automaticamente pelo entry.

Scripts

pnpm install
pnpm build              # gera dist/ (JS + tipos + style.css)
pnpm dev                # build em watch
pnpm typecheck
pnpm prepublish:check   # build + valida tarball antes do npm publish

Publicar no npm

O nome ada-ds-fake está configurado para o registry público. Passos completos em docs/publishing.md. Resumo:

npm login
npm publish             # prepublishOnly roda o build automaticamente

Depois de publicar, troque file:../ada-ds-fake por "^0.1.2" no ada-engage-fake.

Uso em um app

import { Button, Card, Input } from "ada-ds-fake";
import "ada-ds-fake/styles.css";

Papel no fluxo

1. Entrada do Lovable: a allowlist de componentes sai daqui e alimenta o Knowledge do Lovable — o Lovable só desenha telas com estes componentes.
2. Saída (implementação): os apps consomem estes componentes/tokens; o Claude implementa os deltas usando-os.

Evoluções do próprio Design System passam pelo mesmo pipeline (delta → revisão de engenharia).