@stackwright-pro/workflow-components

React step components and useWorkflow hook for Stackwright workflow pages.

Components

| Component | Step type | Description | | ----------------------- | ---------------- | ----------------------------------------------------------------------------- | | WorkflowFormStep | form | Field collection with client-side required validation | | WorkflowReviewPanel | review_panel | Read-only data display + action buttons + requires_note support | | WorkflowActionPanel | action_panel | Action buttons only + requires_note support | | WorkflowSummary | summary | Aggregated data review before final submit | | WorkflowTerminal | terminal | End state with status theming (success / error / warning / neutral / pending) | | WorkflowStatusDisplay | status_display | Waiting/loading spinner | | WorkflowStepRenderer | any | Unified dispatcher — renders the correct component by step.type | | WorkflowPage | — | Full-page orchestrator with optional numbered progress indicator |

Hook

const { currentStep, stepData, send, isComplete, terminalStepId, reset } = useWorkflow(
  workflowDefinition,
  { persistenceKey: 'my-workflow' }
);

• Evaluates declarative conditions: blocks on SUBMIT against accumulated step data
• Restores state from sessionStorage on page reload when persistenceKey is provided
• reset() clears state and removes the sessionStorage entry

Usage

import { WorkflowPage } from '@stackwright-pro/workflow-components';
import procurementApprovalWorkflow from '../generated/workflow/procurement-approval';

export default function ProcurementPage() {
  return (
    <WorkflowPage workflow={procurementApprovalWorkflow} persistenceKey="procurement-approval" />
  );
}