@trend-pro/ui
v0.2.10
Published
Trend Pro design system — tokens, primitives, blocks, templates
Readme
@trend-pro/ui
Design system Trend Pro — tokens, primitivos, blocos, templates e renderPage / renderPageTemplate.
Defaults de marca são neutros (override no projeto consumidor). Distribuição: npmjs.org (público).
Comece aqui
Quem instala o pacote recebe o kit de documentação em docs/:
| Doc | Conteúdo |
|-----|----------|
| docs/00-getting-started.md | Fluxo install → wiring → brand → pages-data |
| docs/create-consumer-project.md | Checklist scaffold Next |
| docs/page-as-data.md | Montar PageDefinition / templates (prompt IA) |
| docs/copy-manual.md | Copy, budgets e ritmo de seções |
| docs/brand-and-tokens.md | Override --brand-*, fontes, logo |
| docs/ai-rules-for-consumer.md | Regras coláveis no Cursor do cliente |
| docs/samples/ | Landing mínima + link-bio |
Changelog / semver: CHANGELOG.md.
Install
Pacote público no npmjs — sem token e sem .npmrc especial:
npm install @trend-pro/[email protected]Release (mantenedores)
Bump + CHANGELOG + tag ui/vX.Y.Z → workflow de publish no npmjs. Guia no monorepo: docs/guides/publish-npm.md.
Como consumir (wiring)
Checklist mínimo para um app Next.js (App Router) + Tailwind CSS v4. Passo a passo completo: docs/create-consumer-project.md.
1. Peer dependencies
| Peer | Faixa alvo |
|------|------------|
| react / react-dom | ^19 |
| next | ^16 |
2. Next — transpilePackages
// next.config.ts
const nextConfig = {
transpilePackages: ["@trend-pro/ui"],
};3. Tailwind v4 — @source
No CSS global do app (ex.: src/app/globals.css):
@import "tailwindcss";
@import "@trend-pro/ui/styles.css";
/* Ajuste ../ conforme a profundidade do globals.css */
@source "../../node_modules/@trend-pro/ui/src";4. Barrel público
import { renderPage, Button, ThemeScript } from "@trend-pro/ui";Proibido: deep-imports (@trend-pro/ui/blocks/…).
5. ThemeScript no root layout
import { ThemeScript } from "@trend-pro/ui";
// root layout: <body><ThemeScript />…</body>
// Injeta bootstrap via useServerInsertedHTML; retorna null (React 19-safe)6. Defaults neutros + override de marca
- Override de
--brand-*e--font-brand*no CSS do projeto —docs/brand-and-tokens.md - Logo via
BrandProvider+ componente no projeto (logo.brandno header) - Conteúdo em
pages-data/ rotas — nunca componentes duplicados do tema
7. Página como dados
import { renderPage } from "@trend-pro/ui";
import { home } from "@/pages-data/home";
export default function Page() {
return renderPage(home);
}Guia: docs/page-as-data.md · sample: docs/samples/landing-minimal.ts.