Skip to main content

​
Layout Customizado

Você pode construir seu próprio layout usando os componentes individuais: 
import {
  TriglitProvider,
  WorkflowCanvas,
  WorkflowNodesList,
  WorkflowTriggersList,
  WorkflowEditorHeader,
} from '@triglit/react-sdk';

function CustomWorkflowEditor({ workflowId }: { workflowId: string }) {
  return (
    <TriglitProvider config={{ apiKey: 'pk_...' }}>
      <div className="flex h-screen">
        {/* Sidebar com nodes */}
        <aside className="w-64 border-r">
          <WorkflowNodesList
            onNodeSelect={(node) => {
              // Adicionar node ao canvas
            }}
          />
        </aside>
        
        {/* Área principal */}
        <main className="flex-1 flex flex-col">
          <WorkflowEditorHeader workflowId={workflowId} />
          <WorkflowCanvas
            workflowId={workflowId}
            // ... outras props
          />
        </main>
        
        {/* Sidebar com triggers */}
        <aside className="w-64 border-l">
          <WorkflowTriggersList
            workflowVersionId="wfv_123"
            onTriggerSelect={(trigger) => {
              // Configurar trigger
            }}
          />
        </aside>
      </div>
    </TriglitProvider>
  );
}

​
Implementação Manual com Hooks

Você pode construir sua própria UI usando apenas os hooks: 
import {
  TriglitProvider,
  useWorkflow,
  useWorkflowVersion,
  useTriggers,
} from '@triglit/react-sdk';

function CustomWorkflowUI({ workflowId }: { workflowId: string }) {
  const { workflow, isLoading: workflowLoading } = useWorkflow(workflowId);
  const { data: versions } = useWorkflowVersions({ workflowId });
  const currentVersionId = versions?.data?.[0]?.id;
  const { version } = useWorkflowVersion(currentVersionId || '', {
    enabled: !!currentVersionId,
  });
  const { data: triggersData } = useTriggers({
    workflowVersionId: currentVersionId,
  });
  
  if (workflowLoading) return <div>Carregando...</div>;
  
  return (
    <div>
      <h1>{workflow?.name}</h1>
      <div>
        <h2>Versões</h2>
        {versions?.data?.map((v) => (
          <div key={v.id}>Versão {v.version}</div>
        ))}
      </div>
      <div>
        <h2>Triggers</h2>
        {triggersData?.data?.map((trigger) => (
          <div key={trigger.id}>{trigger.type}</div>
        ))}
      </div>
    </div>
  );
}

function App() {
  return (
    <TriglitProvider config={{ apiKey: 'pk_...' }}>
      <CustomWorkflowUI workflowId="wf_123" />
    </TriglitProvider>
  );
}

​
Integração com React Query

O SDK usa React Query internamente. Você pode acessar o QueryClient para configurações avançadas: 
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { TriglitProvider } from '@triglit/react-sdk';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 3,
      staleTime: 5 * 60 * 1000, // 5 minutos
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <TriglitProvider config={{ apiKey: 'pk_...' }}>
        {/* Sua aplicação */}
      </TriglitProvider>
    </QueryClientProvider>
  );
}

​
Server-Side Rendering (Next.js)

Para usar o SDK com Next.js App Router: 
// app/workflows/[id]/page.tsx
'use client';

import { TriglitProvider, WorkflowEditor } from '@triglit/react-sdk';
import '@triglit/react-sdk/styles.css';

export default function WorkflowPage({ params }: { params: { id: string } }) {
  return (
    <TriglitProvider
      config={{
        apiKey: process.env.NEXT_PUBLIC_TRIGLIT_PUBLISHABLE_KEY!,
      }}
    >
      <WorkflowEditor workflowId={params.id} />
    </TriglitProvider>
  );
}