O **Fluig Kit** é um conjunto moderno de ferramentas e bibliotecas criado para **substituir o desenvolvimento legado baseado em jQuery e FreeMarker** no TOTVS Fluig.
npm install @fluig-kit/cli
@fluig-kit/core
apiClient)
DebugLogger)
parentProxy
window.top
@fluig-kit/ecm
FluigWorkflowForm
useFluigApi, useSection, etc.)
@fluig-kit/cli
window.parent e window.top
@fluig-kit/extension
.env)
.env na raiz do projeto React:
env
URL base do ambiente Fluig
VITE_FLUIG_BASE_URL=https://SEUDOMINIO.fluig.cloudtotvs.com.br
Credenciais OAuth (Fluig > Painel de Controle > OAuth Application)
CONSUMER_KEY=SEU_CONSUMER_KEY
CONSUMER_SECRET=SEU_CONSUMER_SECRET
ACCESS_TOKEN=SEU_ACCESS_TOKEN
TOKEN_SECRET=SEU_TOKEN_SECRET
`
Essas variáveis são usadas exclusivamente pelo Proxy Local para assinar as requisições.
---
#### 2️⃣ Instalação da Extensão do Chrome
Passos:
1. Execute:
`
npm run dev
`
2. No Chrome, abra:
`
chrome://extensions
`
3. Ative Modo do Desenvolvedor
4. Clique em Carregar sem compactação
5. Selecione a pasta .fluig-extension gerada na raiz do projeto
>⚠️ A extensão injeta um script no Fluig para permitir comunicação segura com o localhost.
💻 Desenvolvimento do Formulário
#### Inicialização da Aplicação (App.jsx)
O app deve ser envolvido pelos Providers do Fluig Kit:
`jsx
import React from "react";
import { createRoot } from "react-dom/client";
import {
FluigApiProvider,
FluigRuntimeProvider,
SchemaRegistryProvider,
FluigWorkflowForm
} from "@fluig-kit/ecm";
import { schemaBase } from "./form/schemas/schema";
import { WORKFLOW_STRUCTURE, SECTIONS_REGISTRY } from "./config/workflow";
const DEV_CONFIG = {
enabled: true,
activityId: 5,
showDebugLogs: true
};
const CONFIG_API = {
baseURL: import.meta.env.VITE_FLUIG_BASE_URL,
localProxyURL: "http://localhost:4000/fluig-proxy-api"
};
createRoot(document.getElementById("root")).render(
workflowStructure={WORKFLOW_STRUCTURE}
sectionsRegistry={SECTIONS_REGISTRY}
/>
);
`
🧱 Seções do Formulário (
Section)
Uma Section representa um bloco lógico do formulário e controla:
- Visibilidade
- ReadOnly
- Regras por atividade
`jsx
import { Section, useSection } from "@fluig-kit/ecm";
import { Input } from "@diefra/fluig-ui";
import { useWatch } from "react-hook-form";
function EngCargoContent() {
const { form } = useSection();
const salario = useWatch({ control: form.control, name: "SALARIO" });
return (
);
}
export default function EngCargo(props) {
return (
);
}
`
⚙️ Configuração do Workflow (
workflow.ts)
Define o comportamento do formulário por atividade.
#### Conceitos principais
- Sections: controlam blocos inteiros
- Fields: controlam campos individuais
- Rules: regras condicionais
`ts
export const WORKFLOW_STRUCTURE = {
0: {
sections: {
active: ["InfSolicitante", "EngCargo"],
hidden: ["AprovacaoRH"]
},
fields: {
active: ["NOMECARGO"]
}
},
5: {
sections: {
active: ["AprovacaoRH"],
readonly: ["InfSolicitante", "EngCargo"]
},
fields: {
active: ["PARECER_RH"],
rules: [
{
target: ["OBS_REPROVACAO"],
when: { field: "PARECER_RH", equals: "REPROVAR" },
type: "active"
}
]
}
}
};
`
📡 Consumo da API Fluig (
useFluigApi)
`jsx
import { useFluigApi } from "@fluig-kit/ecm";
import { useEffect, useState } from "react";
export function useUsuarios() {
const api = useFluigApi();
const [users, setUsers] = useState([]);
useEffect(() => {
async function fetchUsers() {
const res = await api.get("/api/public/2.0/users/list/ACTIVE");
setUsers(res.content);
}
fetchUsers();
}, [api]);
return users;
}
`
O hook decide automaticamente:
- Localhost → Proxy OAuth
- Produção → Cookie de sessão
🔄 Movimentação do Workflow
`jsx
import { useSection } from "@fluig-kit/ecm";
function MinhaAprovacao() {
const { next } = useSection();
return (
);
}
`
🏗️ Geração de HTML e Build (generateHtmlTemplate)
O Fluig não executa React nativamente no salvamento do formulário, ele busca campos HTML.
`html
`
A função generateHtmlTemplate gera um HTML estático com inputs ocultos (type="hidden") baseados nos seus Schemas Zod.
Script de Build (build.cjs)
Crie este script na raiz para gerar o form.html final:
`js
const fs = require("fs");
const path = require("path");
const { generateHtmlTemplate } = require("@fluig-kit/ecm");
// EXEMPLO SECTIONS_REGISTRY
// export const SECTIONS_REGISTRY = {
// InfSolicitante: { Component: InfSolicitante, schema: schemaSolicitante },
// EngCargo: { Component: EngCargo, schema: schemaEngCargo },
// InfVaga: { Component: InfVaga, schema: schemaInfVaga },
// ...
//}
try {
// 1. Extrai schemas Zod
const schemas = Object.values(SECTIONS_REGISTRY).map((s) => s.schema).filter(Boolean);
// 2. Gera HTML com inputs hidden
const finalHtml = generateHtmlTemplate(schemas);
// 3. Salva o arquivo
const distPath = path.resolve(__dirname, "./dist/form.html");
fs.mkdirSync(path.dirname(distPath), { recursive: true });
fs.writeFileSync(distPath, finalHtml);
console.log("✅ form.html gerado com sucesso!");
} catch (error) {
console.error("❌ Erro:", error);
process.exit(1);
}
`
Atualize o package.json:
`JSON
"scripts": {
"build": "vite build && node build.cjs"
}
```