@tmf/communication-ui (1.0.0)

Published 2026-06-16 11:34:54 -03:00 by tarcisio

Setup this registry in your project .npmrc file:

@tmf:registry=

To install the package using npm, run the following command:

npm install @tmf/communication-ui@1.0.0

or add it to the package.json file:

"@tmf/communication-ui": "1.0.0"

For more information on the npm registry, see the documentation.

@tmf/communication-ui

Casca de UI replicável do módulo de Comunicação da TMF (campanhas de marketing, e-mail, SMS, WhatsApp, push, provedores, financeiro/wallets, bots e o gestor de campanhas WAManager).

Segue o mesmo molde do @tmf/service-desk-ui: componentes desacoplados que consomem um contrato (@tmf/module-kit) + um CommunicationApiClient. Adoção por configuração, não por código — o produto host (TMF9, DANI, Priceshow, HelpCor) só instala, fornece o contrato e renderiza. A regra de negócio e os dados vivem no Hub (backend /api/service/communication/*).

Versão atual: 0.2.0-beta.0 (dist-tag beta).

1. Pré-requisitos

O pacote NÃO embute libs pesadas — elas são peerDependencies (o host fornece):

peer	versão	observação
`react` / `react-dom`	`>=18`	obrigatório
`@tmf/module-kit`	`>=0.1.2 <1`	contrato + ports (obrigatório)
`@tanstack/react-query`	`>=5`	data fetching dos componentes
`lucide-react`	`>=0.303`	ícones (TMF9 pina 0.303 — use `legacy-peer-deps`)
`sonner`	`>=1`	toasts (ou injete um ToastPort próprio)
`react-i18next`	`>=14`	i18n (ou use o DictI18nPort embutido)
`recharts`	`>=2`	gráficos (financeiro, analytics) — optional
`@xyflow/react`	`>=12`	editor visual de fluxo de bots — optional
`@tmf/service-desk-ui`	`>=0.1.0`	só para reuso de primitivas no editor de bots — optional

O TMF9 já tem todos esses (consome o @tmf/service-desk-ui).

2. Registry + instalação

O pacote é publicado no registry npm do Forgejo da TMF. No frontend do TMF9, garanta o .npmrc (já existe se o SD foi acoplado):

# frontend/.npmrc
@tmf:registry=https://git.trademarketingforce.com/api/packages/TMF/npm/
legacy-peer-deps=true

Auth para instalar (NUNCA commitar o token — use env/CI):

//git.trademarketingforce.com/api/packages/TMF/npm/:_authToken=${FORGEJO_NPM_TOKEN}

Instalar:

npm install @tmf/communication-ui@beta --legacy-peer-deps

3. Como o TMF9 alcança o backend (S2S via proxy do Hub)

A Comunicação roda no Hub. O TMF9 consome os endpoints S2S /api/service/communication/* (42 rotas, dual-auth) através do catch-all proxy do Hub — exatamente como o Service Desk (path B):

TMF9 frontend ─► /api/v1/hub/proxy/service/communication/*  (TMF9 backend)
                       │  injeta Authorization (token do Hub) + X-Client-Code
                       ▼
                 Hub /api/service/communication/*  (resolve_communication_scope → escopo do cliente)

Dual-auth no Hub: JWT do Hub (agente interno = cross-client) OU TenantToken S2S (mst_…, single-client). Via proxy, o TMF9 manda o próprio JWT e o proxy injeta a identidade do Hub + X-Client-Code (config DB-first do TMF9: hub.url, etc.).
Isolamento por cliente é garantido no Hub (IDOR → 404). Credenciais de provider nunca trafegam.

Ou seja: não há backend novo no TMF9 — só o proxy (que já existe para o SD) apontando para o namespace service/communication.

4. Acoplamento mínimo ("config, não código")

import { useAppContract } from '@tmf/module-kit'
import { CommunicationApp } from '@tmf/communication-ui'
import '@tmf/communication-ui/dist/esm/index.css' // se houver estilos; senão use Tailwind do host

export function CommunicationPage() {
  const { contract, loading } = useAppContract({
    baseUrl: window.location.origin,
    getToken: () => getAccessToken() ?? '',
  })
  if (loading || !contract) return <Loader />

  return (
    <CommunicationApp
      contract={contract}
      tenantMode="multi"           // TMF9 é multi-tenant; Hub usa "single" por cliente selecionado
      getToken={() => getAccessToken() ?? ''}
      // sem `client` → usa o createHubCommunicationClient default,
      // que chama contract.services['communication'].baseUrl
    />
  )
}

No contrato servido ao TMF9, inclua o endpoint de comunicação apontando para o proxy:

// AppContract.services[]
{ "key": "communication", "baseUrl": "/api/v1/hub/proxy/service/communication" }

Pré-requisitos no app:

Envolver a árvore num QueryClientProvider (@tanstack/react-query).
Se usar o editor de bots, importar import '@xyflow/react/dist/style.css'.

5. Adapter próprio (opcional)

Se o produto preferir mapear para sua própria camada de API (em vez do client default), implemente a interface CommunicationApiClient e injete via prop client:

import type { CommunicationApiClient } from '@tmf/communication-ui'

const myClient: CommunicationApiClient = {
  listCampaigns: (p) => myApi.campaigns.list(p),
  getCampaign:   (id) => myApi.campaigns.get(id),
  // … apenas os métodos que o produto usa (todos são opcionais)
}

<CommunicationApp contract={contract} client={myClient} />

Todos os ~84 métodos são opcionais — um produto que só usa campanhas implementa só esses.

6. Componentes exportados

Campanhas: CampaignListView, CampaignCreateModal, CampaignDetailView, CampaignAnalyticsView
Canais: ChannelShell, ChannelTemplatesList, EmailOptOutsView
Financeiro / config: OverviewDashboard, FinancialView, ProvidersView, SandboxView
Bots: components/bots/* (BotsManagementView, BotFlowEditor, BootAttendanceView, InboundView, PauseBotView)
Gestor / WAManager: components/wa-manager/* (WaDashboardView, WaAnalyticsView, WaFunnelView, WaScoringView, WaBestTimeView, WaRoiView, WaTemplatePerfView, WaOptOutTrendsView, WaOptOutsView, CampaignManagerView)
Top-level: CommunicationApp, CommunicationProvider, useCommunicationContext
Infra: createHubCommunicationClient, commQueryKeys, tipos Comm*

7. Ports plugáveis (do `@tmf/module-kit`)

CommunicationProvider/CommunicationApp aceitam:

toast (ToastPort) — default: noop. Ex.: adapter sobre sonner/react-hot-toast.
i18n (I18nPort) — default: DictI18nPort embutido (pt-BR/en/es, namespace communication.*).
theme (ThemePort) — aplica CSS vars do contrato (design-tokens).
getToken — função que devolve o Bearer atual.

8. Checklist de adoção (TMF9)

.npmrc com registry Forgejo + legacy-peer-deps=true.
npm install @tmf/communication-ui@beta.
Proxy /api/v1/hub/proxy/service/communication/* ativo (reusa o do SD) + hub.url no config DB.
Adicionar { key: "communication", baseUrl: "/api/v1/hub/proxy/service/communication" } ao contrato.
Renderizar <CommunicationApp contract tenantMode="multi" getToken /> numa rota.
Validar tsc --noEmit + smoke (listar/criar campanha, analytics) apontando para o Hub QA.

Dúvidas de contrato/escopo: ver o backend app/auth/communication_scope.py e app/routers/service/communication/* no repo tmf-management.

Development dependencies

ID	Version
@tmf/module-kit	file:../module-kit
@tmf/service-desk-ui	file:../service-desk-ui
@types/react	^18.2.47
@types/react-dom	^18.2.18
@xyflow/react	^12.10.1
lucide-react	^0.400.0
recharts	^2.12.0
typescript	^5.3.3

Peer dependencies

ID	Version
@tanstack/react-query	>=5.0.0
@tmf/module-kit	>=0.1.2 <1
@tmf/service-desk-ui	>=0.1.0
@xyflow/react	>=12.0.0
lucide-react	>=0.400.0
react	>=18.0.0
react-dom	>=18.0.0
react-i18next	>=14.0.0
recharts	>=2.0.0
sonner	>=1.0.0

tmf messaging campaigns marketing react components

Details

npm

2026-06-16 11:34:54 -03:00

UNLICENSED

112 KiB

Assets (1)

communication-ui-1.0.0.tgz 112 KiB

Versions (9) View all

1.5.1

2026-06-16

1.5.0

2026-06-16

1.4.0

2026-06-16

1.3.0

2026-06-16

1.2.0

2026-06-16

@tmf/communication-ui (1.0.0)

Installation

About this package

@tmf/communication-ui

1. Pré-requisitos

2. Registry + instalação

3. Como o TMF9 alcança o backend (S2S via proxy do Hub)

4. Acoplamento mínimo ("config, não código")

5. Adapter próprio (opcional)

6. Componentes exportados

7. Ports plugáveis (do `@tmf/module-kit`)

8. Checklist de adoção (TMF9)

Dependencies

Keywords

@tmf/communication-ui (1.0.0)

Installation

About this package

@tmf/communication-ui

1. Pré-requisitos

2. Registry + instalação

3. Como o TMF9 alcança o backend (S2S via proxy do Hub)

4. Acoplamento mínimo ("config, não código")

5. Adapter próprio (opcional)

6. Componentes exportados

7. Ports plugáveis (do @tmf/module-kit)

8. Checklist de adoção (TMF9)

Dependencies

Keywords

7. Ports plugáveis (do `@tmf/module-kit`)