@tech-diefra/fluig-ui

Biblioteca de componentes React UI desenvolvida para agilizar a criação de formulários em processos BPM no Fluig.

Esta biblioteca abstrai a complexidade de integração com o react-hook-form e o controle de estado de visualização/edição do Fluig (fluig-workflow-react), oferecendo componentes prontos para uso como DatePickers, Selects com busca, Inputs mascarados e Badges de status.

📦 Instalação

npm install @tech-diefra/fluig-ui
# ou
yarn add @tech-diefra/fluig-ui

Peer Dependencies

npm install react react-dom react-hook-form @fluig-kit/core @fluig-kit/ecm

⚙️ Configuração Inicial

Importar Estilos

import "@tech-diefra/fluig-ui/dist/style.css"

Configurar Contextos

import { useForm, FormProvider } from "react-hook-form"
import { FluigRuntimeProvider } from "fluig-workflow-react"
import { Input } from "@tech-diefra/fluig-ui"

function App() {
  const methods = useForm()

  return (
    <FluigRuntimeProvider>
      <FormProvider {...methods}>
        <form>
          <Input name="nome_completo" label="Nome" />
        </form>
      </FormProvider>
    </FluigRuntimeProvider>
  )
}

📚 Componentes

Input

<Input name="email" label="E-mail" type="email" />
<Input name="cpf_usuario" label="CPF" mask="cpf" />
<Input name="valor_projeto" label="Valor Estimado" type="monetary" />

Select

const options = [
  { label: "Sim", value: "SIM" },
  { label: "Não", value: "NAO" },
]

<Select
  name="fornecedor"
  label="Fornecedor"
  options={options}
  enableSearch
/>

DatePicker

<DatePicker name="data_inicio" label="Data de Início" />

RadioBtn

const opcoes = [
  { label: "Opção 1", value: "op1", icon: "flaticon flaticon-arrow-up", color: "#0f0" },
  { label: "Opção 2", value: "op2", icon: "flaticon flaticon-cancel", color: "#f00" }
]

<RadioBtn name="decisao" options={opcoes} />

Checkbox

const areas = [
  { label: "Area 1", value: "area1" },
  { label: "Area 2", value: "area2" }
]

<Checkbox name="areas" options={areas} />

StatusBadge

//Mapping activity
const workflowConfig = {
  5: { label: "Status 1", color: "#006dfc" },
  14: { label: "Status 2", color: "#f0960e" }
}

<StatusBadge mapping={workflowConfig} />

TextArea

<TextArea name="observacoes" rows={4} />

🎨 Customização (CSS Variables)

:root {
  --colorPrimary: #00916d;
  --dfeErrorColor: #ff5630;
}

🔒 Controle de Permissões

<Input name="campo_sistema" forceReadOnly forceHidden />

Desenvolvido por Ketson Kersen - Diefra Engenharia.