Hooks

import { useTriglit } from '@triglit/react-sdk';

function MyComponent() {
  const { client, config, i18n, callbacks } = useTriglit();
  
  // client: instância do cliente Triglit
  // config: configuração do provider
  // i18n: configuração de i18n
  // callbacks: callbacks configurados
}

import { useWorkflow } from '@triglit/react-sdk';

function WorkflowDetails({ workflowId }: { workflowId: string }) {
  const { 
    workflow, 
    isLoading, 
    isError, 
    error,
    refetch,
    createWorkflow 
  } = useWorkflow(workflowId);
  
  if (isLoading) return <div>Carregando...</div>;
  if (isError) return <div>Erro: {error?.message}</div>;
  
  return (
    <div>
      <h1>{workflow?.name}</h1>
      <p>{workflow?.description}</p>
    </div>
  );
}

import { useWorkflowVersion } from '@triglit/react-sdk';

function VersionEditor({ versionId }: { versionId: string }) {
  const {
    version,
    isLoading,
    updateVersion,
    publishVersion,
    isUpdating,
    isPublishing,
  } = useWorkflowVersion(versionId);
  
  const handleSave = () => {
    updateVersion({
      versionId,
      nodes: [...],
      edges: [...],
    });
  };
  
  const handlePublish = () => {
    publishVersion(versionId);
  };
  
  return (
    <div>
      <button onClick={handleSave} disabled={isUpdating}>
        {isUpdating ? 'Salvando...' : 'Salvar'}
      </button>
      <button onClick={handlePublish} disabled={isPublishing}>
        {isPublishing ? 'Publicando...' : 'Publicar'}
      </button>
    </div>
  );
}

import { useTriggers } from '@triglit/react-sdk';

function TriggersList({ workflowVersionId }: { workflowVersionId: string }) {
  const { data, isLoading, error } = useTriggers({
    workflowVersionId,
    pageSize: 20,
  });
  
  if (isLoading) return <div>Carregando triggers...</div>;
  if (error) return <div>Erro: {error.message}</div>;
  
  const triggers = data?.data || [];
  
  return (
    <ul>
      {triggers.map((trigger) => (
        <li key={trigger.id}>{trigger.type}</li>
      ))}
    </ul>
  );
}

import { useTrigger } from '@triglit/react-sdk';

function TriggerDetails({ triggerId }: { triggerId: string }) {
  const {
    trigger,
    isLoading,
    updateTrigger,
    deleteTrigger,
    isUpdating,
    isDeleting,
  } = useTrigger(triggerId);
  
  return (
    <div>
      <h2>{trigger?.type}</h2>
      <button 
        onClick={() => updateTrigger({ isActive: !trigger?.isActive })}
        disabled={isUpdating}
      >
        {trigger?.isActive ? 'Desativar' : 'Ativar'}
      </button>
      <button onClick={() => deleteTrigger()} disabled={isDeleting}>
        Deletar
      </button>
    </div>
  );
}

import { useI18n } from '@triglit/react-sdk';

function MyComponent() {
  const t = useI18n();
  
  return (
    <div>
      <button>{t('workflow.editor.save')}</button>
      <p>{t('workflow.editor.version', { version: 1 })}</p>
    </div>
  );
}

import { useApiStatus } from '@triglit/react-sdk';

function ApiStatusIndicator() {
  const status = useApiStatus();
  
  if (status === 'loading') return <div>Conectando...</div>;
  if (status === 'error') return <div>Erro na conexão</div>;
  if (status === 'degraded') return <div>API com problemas</div>;
  
  return <div>API funcionando normalmente</div>;
}