Skip to main content

​
WorkflowEditor

Editor visual completo de workflows com drag-and-drop, configuração de nodes e triggers. 
import { TriglitProvider, WorkflowEditor } from '@triglit/react-sdk';
import '@triglit/react-sdk/styles.css';

function WorkflowPage() {
  return (
    <TriglitProvider config={{ apiKey: 'pk_...' }}>
      <WorkflowEditor 
        workflowId="wf_123"
        initialVersionId="wfv_456"
        onSave={(versionId) => console.log('Salvo:', versionId)}
        className="min-h-screen"
      />
    </TriglitProvider>
  );
}

​
Props do WorkflowEditor

  • workflowId (obrigatório): ID do workflow a ser editado
  • initialVersionId (opcional): ID da versão inicial a carregar
  • onSave (opcional): Callback chamado quando uma versão é salva
  • className (opcional): Classes CSS adicionais

​
WorkflowEditorHeader

Cabeçalho do editor com controles de salvar, publicar e seleção de versão. 
import { WorkflowEditorHeader } from '@triglit/react-sdk';

<WorkflowEditorHeader
  workflowId="wf_123"
  currentVersionId="wfv_456"
  onVersionChange={(versionId) => {
    // Carregar nova versão
  }}
  onSave={() => {
    // Salvar versão
  }}
  onPublish={() => {
    // Publicar versão
  }}
/>

​
WorkflowNodesList

Lista de nodes disponíveis para adicionar ao workflow. 
import { WorkflowNodesList } from '@triglit/react-sdk';

<WorkflowNodesList
  onNodeSelect={(node) => {
    console.log('Node selecionado:', node);
  }}
/>

​
WorkflowTriggersList

Lista de triggers de uma versão de workflow. 
import { WorkflowTriggersList } from '@triglit/react-sdk';

<WorkflowTriggersList
  workflowVersionId="wfv_456"
  onTriggerSelect={(trigger) => {
    console.log('Trigger selecionado:', trigger);
  }}
/>

​
Componentes de Status

Componentes para exibir status da API: 
import { 
  TriglitLoading, 
  TriglitError, 
  TriglitDegraded 
} from '@triglit/react-sdk';

// Loading
<TriglitLoading />

// Erro
<TriglitError />

// API degradada
<TriglitDegraded />