@tmf/flow-ui (6.0.1)
Installation
@tmf:registry=npm install @tmf/flow-ui@6.0.1"@tmf/flow-ui": "6.0.1"About this package
@tmf/flow-ui
Biblioteca de primitivas de editor de fluxo (canvas/nós ReactFlow) compartilhadas da
plataforma TMF. Fornece nós reaproveitáveis (BaseFlowNode, TriggerNode, EndNode)
construídos sobre o @xyflow/react (reactflow v12), usados pelos
editores visuais de fluxo da plataforma — hoje o único consumidor é o @tmf/service-desk-front
(que o embute no bundle; ver INTEGRATION.md). É um pacote-base auto-contido: só depende de react e da peerDependency
@xyflow/react, sem acoplamento lateral a outros pacotes de feature. O canvas em si (o
<ReactFlow> com pan/zoom/arestas) é montado pelo host; este pacote entrega os nós que
o host registra em nodeTypes.
Versão atual:
6.0.1— linha gerada depackage.jsonporscripts/gen-packages-table.py; não editar à mão.
Histórico completo em
CHANGELOG.md.
1. Pré-requisitos (peerDependencies)
O pacote NÃO embute as libs — o consumidor deve instalá-las:
| peer | versão | observação |
|---|---|---|
react |
>=18 |
obrigatório |
react-dom |
>=18 |
obrigatório |
@xyflow/react |
>=12 |
reactflow v12 — fornece Handle, Position, NodeProps, <ReactFlow> |
Os nós usam classes utilitárias Tailwind (texto, handles, dark mode
dark:*, etc.). O host deve ter Tailwind configurado e processar essas classes no seu build.A cor de identidade de cada nó (borda e tint de fundo) vem da CSS var categórica
--color-node-<papel>do@tmf/design-tokens(emitida notokens.cssda brand, não noshadcn.css), com o hex Tailwind -500 como fallback quando a var não existe. Para o light/dark da cor de nó acompanhar a brand, importe também@tmf/design-tokens/<brand>/tokens.css.
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/
Auth para instalar (NUNCA commitar o token — use env/CI):
//git.trademarketingforce.com/api/packages/TMF/npm/:_authToken=${FORGEJO_NPM_TOKEN}
Instalar o pacote e os peers:
npm install @tmf/flow-ui
npm install @xyflow/react react react-dom
3. CSS base (obrigatório, uma vez)
O CSS base do reactflow NÃO é importado pelo pacote (a saída CommonJS é sem bundler). O consumidor DEVE importar uma única vez na aplicação:
import '@xyflow/react/dist/style.css'
4. Uso básico
O host monta o <ReactFlow> e registra os nós do @tmf/flow-ui em nodeTypes:
import { ReactFlow, Background, Controls } from '@xyflow/react'
import { TriggerNode, EndNode } from '@tmf/flow-ui'
import '@xyflow/react/dist/style.css'
const nodeTypes = {
trigger: TriggerNode,
end: EndNode,
}
const nodes = [
{
id: '1',
type: 'trigger',
position: { x: 0, y: 0 },
data: { triggerType: 'message_received', channel: 'whatsapp' },
},
{
id: '2',
type: 'end',
position: { x: 0, y: 200 },
data: { closeTicket: true },
},
]
const edges = [{ id: 'e1-2', source: '1', target: '2' }]
export function BotFlowEditor() {
return (
<div style={{ width: '100%', height: 600 }}>
<ReactFlow nodes={nodes} edges={edges} nodeTypes={nodeTypes}>
<Background />
<Controls />
</ReactFlow>
</div>
)
}
Para criar nós customizados próprios, use o BaseFlowNode como casca (header com ícone +
label, handles configuráveis, suporte a dark mode):
import { Handle } from '@xyflow/react'
import { BaseFlowNode } from '@tmf/flow-ui'
function ActionNode({ data, selected }) {
return (
<BaseFlowNode
label={data.label ?? 'Ação'}
icon="⚙️"
color="blue"
selected={selected}
handles={{ inputs: 1, outputs: 1 }}
>
<div>{data.description}</div>
</BaseFlowNode>
)
}
5. Símbolos exportados
BaseFlowNode · TriggerNode · EndNode · PACKAGE_VERSION — ver detalhes em
FUNCIONALIDADES.md.
Dependencies
Development dependencies
| ID | Version |
|---|---|
| @types/react | ^18.2.47 |
| @types/react-dom | ^18.2.18 |
| @xyflow/react | ^12.10.1 |
| typescript | ^5.3.3 |
Peer dependencies
| ID | Version |
|---|---|
| @xyflow/react | >=12 |
| react | >=18 |
| react-dom | >=18 |