({\n id: 'order-processing',\n name: 'Order Processing',\n stages: [\n { id: 'order-received', name: 'Order Received', order: 0 },\n { id: 'payment', name: 'Payment', order: 1 },\n { id: 'fulfillment', name: 'Fulfillment', order: 2 },\n { id: 'shipped', name: 'Shipped', order: 3 }\n ],\n transitions: [\n { id: 't1', from: 'order-received', to: 'payment' },\n { id: 't2', from: 'payment', to: 'fulfillment' },\n { id: 't3', from: 'fulfillment', to: 'shipped' }\n ]\n });\n\n return (\n \n {\n setWorkflow(updated);\n console.log('Workflow updated:', updated);\n }}\n onNodeClick={(stageId) => console.log('Stage clicked:', stageId)}\n onEdgeClick={(transitionId) => console.log('Transition clicked:', transitionId)}\n readOnly={false}\n />\n
\n );\n}\n```\n\n### Example 3: Mode Toggle in Builder\n\n```tsx\nimport { GenericWorkflowBuilderV2 } from '@bernierllc/generic-workflow-ui';\n\nfunction WorkflowDesigner() {\n const handleSave = ({ generic, json }) => {\n // Save to backend\n fetch('/api/workflows', {\n method: 'POST',\n body: JSON.stringify({ workflow: generic, json })\n });\n };\n\n return (\n \n );\n}\n```\n\n### Example 4: JSON Import/Export in Graph Mode\n\n```tsx\nimport {\n GenericWorkflowCanvas,\n workflowToJSON,\n jsonToWorkflow,\n validateWorkflowJSON\n} from '@bernierllc/generic-workflow-ui';\n\nfunction WorkflowWithJSONSupport() {\n const [workflow, setWorkflow] = useState(initialWorkflow);\n\n const handleExport = () => {\n const json = workflowToJSON(workflow);\n const blob = new Blob([JSON.stringify(json, null, 2)], {\n type: 'application/json'\n });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'workflow.json';\n a.click();\n };\n\n const handleImport = async (file: File) => {\n const text = await file.text();\n const json = JSON.parse(text);\n\n const validation = validateWorkflowJSON(json);\n if (!validation.valid) {\n alert('Invalid workflow JSON: ' + validation.errors.join(', '));\n return;\n }\n\n const importedWorkflow = jsonToWorkflow(json);\n setWorkflow(importedWorkflow);\n };\n\n return (\n \n \n handleImport(e.target.files[0])} />\n\n \n
\n );\n}\n```\n\n## Configuration\n\n### CanvasConfig Options\n\nComplete configuration options for graph-based canvas:\n\n```typescript\ninterface CanvasConfig {\n // Node styling\n nodeStyle?: {\n width?: number; // Default: 150\n height?: number; // Default: 80\n borderRadius?: number; // Default: 8\n backgroundColor?: string; // Default: from theme\n borderColor?: string; // Default: from theme\n fontSize?: number; // Default: 14\n };\n\n // Edge styling\n edgeStyle?: {\n strokeWidth?: number; // Default: 2\n strokeColor?: string; // Default: from theme\n animated?: boolean; // Default: false\n type?: 'default' | 'straight' | 'step' | 'smoothstep';\n };\n\n // Canvas features\n minimap?: boolean; // Default: false\n controls?: boolean; // Default: true\n background?: 'dots' | 'lines' | 'cross' | 'none'; // Default: 'dots'\n\n // Layout options\n fitView?: boolean; // Default: true\n snapToGrid?: boolean; // Default: false\n gridSize?: number; // Default: 15\n\n // Interaction\n readOnly?: boolean; // Default: false\n nodesDraggable?: boolean; // Default: true\n nodesConnectable?: boolean; // Default: true\n elementsSelectable?: boolean; // Default: true\n}\n```\n\n## Testing\n\nThe package includes comprehensive test coverage:\n\n- **Coverage**: 77% (statements, branches, lines, functions)\n- **Test Types**: Unit tests, integration tests, component tests\n- **Test Framework**: Jest with React Testing Library\n- **Test Files**: 15 test suites, 166 tests total\n\nRun tests:\n\n```bash\nnpm test # Watch mode\nnpm run test:run # Single run\nnpm run test:coverage # With coverage report\n```\n\n## TypeScript Support\n\nFull generic type support for custom metadata:\n\n```tsx\ninterface MyStageMetadata {\n assignee?: string;\n dueDate?: Date;\n priority?: 'low' | 'medium' | 'high';\n}\n\ninterface MyTransitionMetadata {\n permissions: string[];\n requiresApproval?: boolean;\n}\n\nconst workflow: GenericWorkflow = {\n id: 'my-workflow',\n name: 'My Workflow',\n stages: [\n {\n id: 'review',\n name: 'Review',\n order: 0,\n metadata: {\n assignee: 'user@example.com',\n priority: 'high'\n }\n }\n ],\n transitions: [\n {\n id: 't1',\n from: 'draft',\n to: 'review',\n metadata: {\n permissions: ['editor'],\n requiresApproval: true\n }\n }\n ]\n};\n```\n\n## Integration Status\n\n- **Logger**: not-applicable - Pure UI package with no backend operations\n- **Docs-Suite**: ready - Full TypeDoc documentation available\n- **NeverHub**: not-applicable - UI components do not require service discovery\n\n## See Also\n\n- [@bernierllc/content-workflow-ui](../content-workflow-ui) - Content-specific workflow wrapper\n- [@bernierllc/workflow-service](../../service/workflow-service) - Workflow orchestration service\n\n## Package Information\n\n- **Type**: UI Package\n- **Category**: Generic Workflow UI\n- **Version**: 1.1.0\n- **Test Coverage**: 77%\n- **React Version**: 19.0.0\n- **Tamagui Version**: 1.135.1\n- **react-flow Version**: @xyflow/react 12.3.5\n\n## License\n\nCopyright (c) 2025 Bernier LLC. All rights reserved.\n\nThis file is licensed to the client under a limited-use license.\nThe client may use and modify this code *only within the scope of the project it was delivered for*.\nRedistribution or use in other products or commercial offerings is not permitted without written consent from Bernier LLC.\n","readmeFilename":"README.md"}