@tmf/ui (0.3.0)
Installation
@tmf:registry=npm install @tmf/ui@0.3.0"@tmf/ui": "0.3.0"About this package
@tmf/ui
Biblioteca de primitivas de UI brand-agnostic da plataforma TMF: componentes shadcn/ui construídos sobre Radix UI
- CVA (
class-variance-authority). Os componentes não embutem nenhuma cor de marca — toda a aparência vem de CSS vars (hsl(var(--primary)), …) fornecidas em runtime pelo tema canônico@tmf/design-tokens/<brand>/shadcn.css. Assim o mesmo<Button />se adapta à brand de cada produto (Hub, TMF9, DANI, HelpCor, Priceshow) e a dark/light, sem fork.
Versão atual:
0.1.0.
1. Pré-requisitos (peerDependencies)
O pacote NÃO embute as libs — o consumidor instala os peers que usar (todos
optional em peerDependenciesMeta):
| peer | versão | observação |
|---|---|---|
react / react-dom |
>=18 |
obrigatório |
class-variance-authority |
>=0.7 |
variantes (Button/Badge/Label) |
tailwindcss |
>=3 |
host processa as classes utilitárias |
lucide-react |
>=0.3 |
ícones do Dialog/Select |
@radix-ui/react-slot |
>=1 |
Button asChild |
@radix-ui/react-dialog |
>=1 |
Dialog |
@radix-ui/react-label |
>=2 |
Label |
@radix-ui/react-select |
>=2 |
Select |
@radix-ui/react-separator |
>=1 |
Separator |
@radix-ui/react-switch |
>=1 |
Switch |
@radix-ui/react-tooltip |
>=1 |
Tooltip |
Dependências próprias (embutidas): clsx, tailwind-merge.
2. Registry + instalação
Publicado no registry npm do Forgejo da TMF. Garanta o .npmrc do projeto:
# .npmrc
@tmf:registry=https://git.trademarketingforce.com/api/packages/TMF/npm/
//git.trademarketingforce.com/api/packages/TMF/npm/:_authToken=${FORGEJO_NPM_TOKEN}
npm install @tmf/ui @tmf/design-tokens
# + os peers que usar (react, class-variance-authority, tailwindcss, lucide-react, @radix-ui/*)
3. Consumo (3 passos)
a) Importar o tema da brand (CSS vars) — uma vez na app:
import '@tmf/design-tokens/hub/shadcn.css' // troque "hub" pela brand do produto
b) Estender o tailwind.config com o preset:
// tailwind.config.js (CommonJS) ou .cjs
const tmfUiPreset = require('@tmf/ui/tailwind-preset')
module.exports = {
presets: [tmfUiPreset],
darkMode: 'class',
content: [
'./src/**/*.{ts,tsx}',
'./node_modules/@tmf/ui/dist/**/*.{js,jsx}', // gera o CSS das classes usadas pelo pacote
],
}
c) Importar os componentes:
import { Button, Card, CardHeader, CardTitle, CardContent } from '@tmf/ui'
export function Demo() {
return (
<Card>
<CardHeader>
<CardTitle>Olá</CardTitle>
</CardHeader>
<CardContent>
<Button variant="default">Confirmar</Button>
</CardContent>
</Card>
)
}
Dark mode: aplique a classe dark no <html>/<body> (darkMode: 'class'); as CSS
vars do tema já trazem a paleta dark.
4. Símbolos exportados
Button · Badge · Card (+ CardHeader/CardTitle/CardDescription/CardContent/CardFooter) ·
Dialog (+ DialogTrigger/DialogContent/DialogHeader/DialogFooter/DialogTitle/DialogDescription/DialogClose/DialogPortal/DialogOverlay) ·
Input · Label · Select (+ SelectTrigger/SelectContent/SelectItem/SelectValue/SelectGroup/SelectLabel/SelectSeparator/…) ·
Separator · Switch · Textarea · Tooltip (+ TooltipProvider/TooltipTrigger/TooltipContent) ·
utilitário cn · version.
Os variants (buttonVariants, badgeVariants) também são exportados. O pacote
não reexporta @radix-ui/* — importe-os direto se precisar do primitivo cru.
Dependencies
Dependencies
| ID | Version |
|---|---|
| clsx | ^2.1.1 |
| tailwind-merge | ^3.5.0 |
Development dependencies
| ID | Version |
|---|---|
| @radix-ui/react-dialog | ^1.1.15 |
| @radix-ui/react-label | ^2.1.8 |
| @radix-ui/react-select | ^2.2.6 |
| @radix-ui/react-separator | ^1.1.8 |
| @radix-ui/react-slot | ^1.2.4 |
| @radix-ui/react-switch | ^1.2.6 |
| @radix-ui/react-tooltip | ^1.2.8 |
| @types/react | ^18.2.47 |
| @types/react-dom | ^18.2.18 |
| class-variance-authority | ^0.7.1 |
| lucide-react | ^0.303.0 |
| react | ^18.2.0 |
| react-dom | ^18.2.0 |
| typescript | ^5.3.3 |
Peer dependencies
| ID | Version |
|---|---|
| @radix-ui/react-dialog | >=1 |
| @radix-ui/react-label | >=2 |
| @radix-ui/react-select | >=2 |
| @radix-ui/react-separator | >=1 |
| @radix-ui/react-slot | >=1 |
| @radix-ui/react-switch | >=1 |
| @radix-ui/react-tooltip | >=1 |
| class-variance-authority | >=0.7 |
| lucide-react | >=0.3 |
| react | >=18 |
| react-dom | >=18 |
| tailwindcss | >=3 |