@burdenoff/fluidgrids-fe-sdk

FluidGrids Workflow Builder SDK - Embeddable visual workflow automation for React applications.

Installation

npm install @burdenoff/fluidgrids-fe-sdk
# or
bun add @burdenoff/fluidgrids-fe-sdk

Quick Start

Standalone Workflow Builder

Use WorkflowBuilder when you want a self-contained workflow builder with its own Apollo client:

import { WorkflowBuilder } from '@burdenoff/fluidgrids-fe-sdk';
import '@burdenoff/fluidgrids-fe-sdk/styles.css';

function App() {
  return (
    <WorkflowBuilder
      apiGatewayUrl={process.env.NEXT_PUBLIC_FLUIDGRIDS_API_URL!}
      authToken="your-auth-token"
      workspaceId="your-workspace-id"
      onSave={(workflow) => {
        console.log('Workflow saved:', workflow);
      }}
      onExecute={(runId) => {
        console.log('Execution started:', runId);
      }}
    />
  );
}

Full Workflow Module with Routing

Use FluidGridsRoot for complete workflow management including list, builder, runs, and credentials:

import { FluidGridsRoot } from '@burdenoff/fluidgrids-fe-sdk';
import '@burdenoff/fluidgrids-fe-sdk/styles.css';
import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();

  return (
    <FluidGridsRoot
      basePath="/workflows"
      apiGatewayUrl={process.env.NEXT_PUBLIC_FLUIDGRIDS_API_URL!}
      authToken="your-auth-token"
      workspaceId="your-workspace-id"
      navigate={(path) => navigate(path)}
      onWorkflowSave={(workflow) => {
        console.log('Workflow saved:', workflow);
      }}
    />
  );
}

Core Builder (BYO Apollo Client)

Use WorkflowBuilderCore when you want to provide your own Apollo client:

import { WorkflowBuilderCore, FluidGridsProvider } from '@burdenoff/fluidgrids-fe-sdk';
import { ApolloProvider } from '@apollo/client';
import { yourApolloClient } from './apollo';

function App() {
  return (
    <FluidGridsProvider
      apiGatewayUrl={process.env.NEXT_PUBLIC_FLUIDGRIDS_API_URL!}
      authToken="your-auth-token"
      workspaceId="your-workspace-id"
      trustedOrigins={[window.location.origin]}
      apolloClient={yourApolloClient}
    >
      <WorkflowBuilderCore
        workflow={yourWorkflowData}
        onSave={(workflow) => console.log('Saved:', workflow)}
      />
    </FluidGridsProvider>
  );
}

API Reference

WorkflowBuilder Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiGatewayUrl | string | Yes | Workspace API Gateway URL | | authToken | string | No | Authentication token | | workspaceId | string | Yes | Current workspace ID | | tenantId | string | No | Current tenant ID | | workflowId | string | No | Workflow ID to load | | workflowVersion | string | No | Workflow version to load | | initialWorkflow | WorkflowData | No | Initial workflow data | | readonly | boolean | No | Disable editing | | hideHeader | boolean | No | Hide the header toolbar | | hideSidebar | boolean | No | Hide the sidebar | | hideLogsPanel | boolean | No | Hide the logs panel | | onSave | (workflow) => void | No | Save callback | | onExecute | (runId) => void | No | Execute callback | | onNodeClick | (node) => void | No | Node click callback | | onBack | () => void | No | Back button callback | | className | string | No | Custom CSS class |

FluidGridsRoot Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | basePath | string | No | Base path for routing | | apiGatewayUrl | string | Yes | Workspace API Gateway URL | | authToken | string | No | Authentication token | | workspaceId | string | Yes | Current workspace ID | | tenantId | string | No | Current tenant ID | | currentUser | User | No | Current user info | | navigate | (path) => void | No | Navigation function | | readonly | boolean | No | Global readonly mode | | onWorkflowSave | (workflow) => void | No | Save callback | | onWorkflowExecute | (runId, workflowId) => void | No | Execute callback | | className | string | No | Custom CSS class |

Styling

The SDK uses Tailwind CSS for styling. Make sure you have Tailwind configured in your project, or import the pre-built styles:

import '@burdenoff/fluidgrids-fe-sdk/styles.css';

Security Notes

• Pass runtime URLs through environment variables instead of hardcoded localhost defaults.
• Use trustedOrigins when embedding the SDK into known host applications.
• Avoid logging or persisting authToken values in app telemetry or error reports.

License

Proprietary - Copyright Algoshred Technologies Pvt Ltd.