@xtr-dev/payload-automation 0.0.37 → 0.0.39

package/README.md

@@ -56,7 +56,10 @@ The plugin uses separate exports to avoid bundling server-side code in client bu
 import { workflowsPlugin } from '@xtr-dev/payload-automation/server'
 
 // Client-side components  
-import { TriggerWorkflowButton } from '@xtr-dev/payload-automation/client'
+import { StatusCell, ErrorDisplay } from '@xtr-dev/payload-automation/client'
+
+// Helper utilities
+import { /* helpers */ } from '@xtr-dev/payload-automation/helpers'
 
 // Types only (safe for both server and client)
 import type { WorkflowsPluginConfig } from '@xtr-dev/payload-automation'
@@ -216,6 +219,8 @@ export default async function handler(req, res) {
 
 **Benefits**: Better reliability, proper process isolation, easier debugging, and leverages existing infrastructure.
 
+**Note**: Built-in cron triggers have been removed in v0.0.37+ to focus on webhook-based scheduling which provides better reliability and debugging capabilities.
+
 ## Documentation
 
 Full documentation coming soon. For now, explore the development environment in the repository for examples and patterns.

package/dist/collections/Workflow.js

@@ -82,15 +82,13 @@ export const createWorkflowCollection = (options)=>{
                         options: steps.map((t)=>t.slug)
                     },
                     {
-                        name: 'parameters',
+                        name: 'input',
                         type: 'json',
                         admin: {
-                            hidden: true
+                            description: 'Step input configuration. Use JSONPath expressions to reference dynamic data (e.g., {"url": "$.trigger.doc.webhookUrl", "data": "$.steps.previousStep.output.result"})'
                         },
                         defaultValue: {}
                     },
-                    // Virtual fields for custom triggers
-                    ...steps.flatMap((step)=>(step.inputSchema || []).map((s)=>parameter(step.slug, s))),
                     {
                         name: 'dependencies',
                         type: 'text',

package/dist/collections/Workflow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/collections/Workflow.ts"],"sourcesContent":["import type {CollectionConfig} from 'payload'\n\nimport type {WorkflowsPluginConfig} from \"../plugin/config-types.js\"\n\nimport {parameter} from \"../fields/parameter.js\"\nimport {collectionTrigger, globalTrigger} from \"../triggers/index.js\"\n\nexport const createWorkflowCollection: <T extends string>(options: WorkflowsPluginConfig<T>) => CollectionConfig = (options) => {\n  const steps = options.steps || []\n  const triggers = (options.triggers || []).map(t => t(options)).concat(collectionTrigger(options), globalTrigger(options))\n  return {\n    slug: 'workflows',\n    access: {\n      create: () => true,\n      delete: () => true,\n      read: () => true,\n      update: () => true,\n    },\n    admin: {\n      defaultColumns: ['name', 'updatedAt'],\n      description: 'Create and manage automated workflows.',\n      group: 'Automation',\n      useAsTitle: 'name',\n    },\n    fields: [\n      {\n        name: 'name',\n        type: 'text',\n        admin: {\n          description: 'Human-readable name for the workflow',\n        },\n        required: true,\n      },\n      {\n        name: 'description',\n        type: 'textarea',\n        admin: {\n          description: 'Optional description of what this workflow does',\n        },\n      },\n      {\n        name: 'triggers',\n        type: 'array',\n        fields: [\n          {\n            name: 'type',\n            type: 'select',\n            options: [\n              ...triggers.map(t => t.slug)\n            ]\n          },\n          {\n            name: 'parameters',\n            type: 'json',\n            admin: {\n              hidden: true,\n            },\n            defaultValue: {}\n          },\n          // Virtual fields for custom triggers\n          ...triggers.flatMap(t => (t.parameters || []).map(p => parameter(t.slug, p as any))),\n          {\n            name: 'condition',\n            type: 'text',\n            admin: {\n              description: 'JSONPath expression that must evaluate to true for this trigger to execute the workflow (e.g., \"$.trigger.doc.status == \\'published\\'\")'\n            },\n            required: false\n          },\n        ]\n      },\n      {\n        name: 'steps',\n        type: 'array',\n        fields: [\n          {\n            name: 'name',\n            type: 'text',\n            defaultValue: 'Unnamed Step'\n          },\n          {\n            name: 'type',\n            type: 'select',\n            options: steps.map(t => t.slug)\n          },\n          {\n            name: 'parameters',\n            type: 'json',\n            admin: {\n              hidden: true,\n            },\n            defaultValue: {}\n          },\n          // Virtual fields for custom triggers\n          ...steps.flatMap(step => (step.inputSchema || []).map(s => parameter(step.slug, s as any))),\n          {\n            name: 'dependencies',\n            type: 'text',\n            admin: {\n              description: 'Step names that must complete before this step can run'\n            },\n            hasMany: true,\n            required: false\n          },\n          {\n            name: 'condition',\n            type: 'text',\n            admin: {\n              description: 'JSONPath expression that must evaluate to true for this step to execute (e.g., \"$.trigger.doc.status == \\'published\\'\")'\n            },\n            required: false\n          },\n        ],\n      }\n    ],\n    versions: {\n      drafts: {\n        autosave: false,\n      },\n      maxPerDoc: 10,\n    },\n  }\n}\n"],"names":["parameter","collectionTrigger","globalTrigger","createWorkflowCollection","options","steps","triggers","map","t","concat","slug","access","create","delete","read","update","admin","defaultColumns","description","group","useAsTitle","fields","name","type","required","hidden","defaultValue","flatMap","parameters","p","step","inputSchema","s","hasMany","versions","drafts","autosave","maxPerDoc"],"mappings":"AAIA,SAAQA,SAAS,QAAO,yBAAwB;AAChD,SAAQC,iBAAiB,EAAEC,aAAa,QAAO,uBAAsB;AAErE,OAAO,MAAMC,2BAAsG,CAACC;IAClH,MAAMC,QAAQD,QAAQC,KAAK,IAAI,EAAE;IACjC,MAAMC,WAAW,AAACF,CAAAA,QAAQE,QAAQ,IAAI,EAAE,AAAD,EAAGC,GAAG,CAACC,CAAAA,IAAKA,EAAEJ,UAAUK,MAAM,CAACR,kBAAkBG,UAAUF,cAAcE;IAChH,OAAO;QACLM,MAAM;QACNC,QAAQ;YACNC,QAAQ,IAAM;YACdC,QAAQ,IAAM;YACdC,MAAM,IAAM;YACZC,QAAQ,IAAM;QAChB;QACAC,OAAO;YACLC,gBAAgB;gBAAC;gBAAQ;aAAY;YACrCC,aAAa;YACbC,OAAO;YACPC,YAAY;QACd;QACAC,QAAQ;YACN;gBACEC,MAAM;gBACNC,MAAM;gBACNP,OAAO;oBACLE,aAAa;gBACf;gBACAM,UAAU;YACZ;YACA;gBACEF,MAAM;gBACNC,MAAM;gBACNP,OAAO;oBACLE,aAAa;gBACf;YACF;YACA;gBACEI,MAAM;gBACNC,MAAM;gBACNF,QAAQ;oBACN;wBACEC,MAAM;wBACNC,MAAM;wBACNnB,SAAS;+BACJE,SAASC,GAAG,CAACC,CAAAA,IAAKA,EAAEE,IAAI;yBAC5B;oBACH;oBACA;wBACEY,MAAM;wBACNC,MAAM;wBACNP,OAAO;4BACLS,QAAQ;wBACV;wBACAC,cAAc,CAAC;oBACjB;oBACA,qCAAqC;uBAClCpB,SAASqB,OAAO,CAACnB,CAAAA,IAAK,AAACA,CAAAA,EAAEoB,UAAU,IAAI,EAAE,AAAD,EAAGrB,GAAG,CAACsB,CAAAA,IAAK7B,UAAUQ,EAAEE,IAAI,EAAEmB;oBACzE;wBACEP,MAAM;wBACNC,MAAM;wBACNP,OAAO;4BACLE,aAAa;wBACf;wBACAM,UAAU;oBACZ;iBACD;YACH;YACA;gBACEF,MAAM;gBACNC,MAAM;gBACNF,QAAQ;oBACN;wBACEC,MAAM;wBACNC,MAAM;wBACNG,cAAc;oBAChB;oBACA;wBACEJ,MAAM;wBACNC,MAAM;wBACNnB,SAASC,MAAME,GAAG,CAACC,CAAAA,IAAKA,EAAEE,IAAI;oBAChC;oBACA;wBACEY,MAAM;wBACNC,MAAM;wBACNP,OAAO;4BACLS,QAAQ;wBACV;wBACAC,cAAc,CAAC;oBACjB;oBACA,qCAAqC;uBAClCrB,MAAMsB,OAAO,CAACG,CAAAA,OAAQ,AAACA,CAAAA,KAAKC,WAAW,IAAI,EAAE,AAAD,EAAGxB,GAAG,CAACyB,CAAAA,IAAKhC,UAAU8B,KAAKpB,IAAI,EAAEsB;oBAChF;wBACEV,MAAM;wBACNC,MAAM;wBACNP,OAAO;4BACLE,aAAa;wBACf;wBACAe,SAAS;wBACTT,UAAU;oBACZ;oBACA;wBACEF,MAAM;wBACNC,MAAM;wBACNP,OAAO;4BACLE,aAAa;wBACf;wBACAM,UAAU;oBACZ;iBACD;YACH;SACD;QACDU,UAAU;YACRC,QAAQ;gBACNC,UAAU;YACZ;YACAC,WAAW;QACb;IACF;AACF,EAAC"}
+{"version":3,"sources":["../../src/collections/Workflow.ts"],"sourcesContent":["import type {CollectionConfig} from 'payload'\n\nimport type {WorkflowsPluginConfig} from \"../plugin/config-types.js\"\n\nimport {parameter} from \"../fields/parameter.js\"\nimport {collectionTrigger, globalTrigger} from \"../triggers/index.js\"\n\nexport const createWorkflowCollection: <T extends string>(options: WorkflowsPluginConfig<T>) => CollectionConfig = (options) => {\n  const steps = options.steps || []\n  const triggers = (options.triggers || []).map(t => t(options)).concat(collectionTrigger(options), globalTrigger(options))\n  return {\n    slug: 'workflows',\n    access: {\n      create: () => true,\n      delete: () => true,\n      read: () => true,\n      update: () => true,\n    },\n    admin: {\n      defaultColumns: ['name', 'updatedAt'],\n      description: 'Create and manage automated workflows.',\n      group: 'Automation',\n      useAsTitle: 'name',\n    },\n    fields: [\n      {\n        name: 'name',\n        type: 'text',\n        admin: {\n          description: 'Human-readable name for the workflow',\n        },\n        required: true,\n      },\n      {\n        name: 'description',\n        type: 'textarea',\n        admin: {\n          description: 'Optional description of what this workflow does',\n        },\n      },\n      {\n        name: 'triggers',\n        type: 'array',\n        fields: [\n          {\n            name: 'type',\n            type: 'select',\n            options: [\n              ...triggers.map(t => t.slug)\n            ]\n          },\n          {\n            name: 'parameters',\n            type: 'json',\n            admin: {\n              hidden: true,\n            },\n            defaultValue: {}\n          },\n          // Virtual fields for custom triggers\n          ...triggers.flatMap(t => (t.parameters || []).map(p => parameter(t.slug, p as any))),\n          {\n            name: 'condition',\n            type: 'text',\n            admin: {\n              description: 'JSONPath expression that must evaluate to true for this trigger to execute the workflow (e.g., \"$.trigger.doc.status == \\'published\\'\")'\n            },\n            required: false\n          },\n        ]\n      },\n      {\n        name: 'steps',\n        type: 'array',\n        fields: [\n          {\n            name: 'name',\n            type: 'text',\n            defaultValue: 'Unnamed Step'\n          },\n          {\n            name: 'type',\n            type: 'select',\n            options: steps.map(t => t.slug)\n          },\n          {\n            name: 'input',\n            type: 'json',\n            admin: {\n              description: 'Step input configuration. Use JSONPath expressions to reference dynamic data (e.g., {\"url\": \"$.trigger.doc.webhookUrl\", \"data\": \"$.steps.previousStep.output.result\"})'\n            },\n            defaultValue: {}\n          },\n          {\n            name: 'dependencies',\n            type: 'text',\n            admin: {\n              description: 'Step names that must complete before this step can run'\n            },\n            hasMany: true,\n            required: false\n          },\n          {\n            name: 'condition',\n            type: 'text',\n            admin: {\n              description: 'JSONPath expression that must evaluate to true for this step to execute (e.g., \"$.trigger.doc.status == \\'published\\'\")'\n            },\n            required: false\n          },\n        ],\n      }\n    ],\n    versions: {\n      drafts: {\n        autosave: false,\n      },\n      maxPerDoc: 10,\n    },\n  }\n}\n"],"names":["parameter","collectionTrigger","globalTrigger","createWorkflowCollection","options","steps","triggers","map","t","concat","slug","access","create","delete","read","update","admin","defaultColumns","description","group","useAsTitle","fields","name","type","required","hidden","defaultValue","flatMap","parameters","p","hasMany","versions","drafts","autosave","maxPerDoc"],"mappings":"AAIA,SAAQA,SAAS,QAAO,yBAAwB;AAChD,SAAQC,iBAAiB,EAAEC,aAAa,QAAO,uBAAsB;AAErE,OAAO,MAAMC,2BAAsG,CAACC;IAClH,MAAMC,QAAQD,QAAQC,KAAK,IAAI,EAAE;IACjC,MAAMC,WAAW,AAACF,CAAAA,QAAQE,QAAQ,IAAI,EAAE,AAAD,EAAGC,GAAG,CAACC,CAAAA,IAAKA,EAAEJ,UAAUK,MAAM,CAACR,kBAAkBG,UAAUF,cAAcE;IAChH,OAAO;QACLM,MAAM;QACNC,QAAQ;YACNC,QAAQ,IAAM;YACdC,QAAQ,IAAM;YACdC,MAAM,IAAM;YACZC,QAAQ,IAAM;QAChB;QACAC,OAAO;YACLC,gBAAgB;gBAAC;gBAAQ;aAAY;YACrCC,aAAa;YACbC,OAAO;YACPC,YAAY;QACd;QACAC,QAAQ;YACN;gBACEC,MAAM;gBACNC,MAAM;gBACNP,OAAO;oBACLE,aAAa;gBACf;gBACAM,UAAU;YACZ;YACA;gBACEF,MAAM;gBACNC,MAAM;gBACNP,OAAO;oBACLE,aAAa;gBACf;YACF;YACA;gBACEI,MAAM;gBACNC,MAAM;gBACNF,QAAQ;oBACN;wBACEC,MAAM;wBACNC,MAAM;wBACNnB,SAAS;+BACJE,SAASC,GAAG,CAACC,CAAAA,IAAKA,EAAEE,IAAI;yBAC5B;oBACH;oBACA;wBACEY,MAAM;wBACNC,MAAM;wBACNP,OAAO;4BACLS,QAAQ;wBACV;wBACAC,cAAc,CAAC;oBACjB;oBACA,qCAAqC;uBAClCpB,SAASqB,OAAO,CAACnB,CAAAA,IAAK,AAACA,CAAAA,EAAEoB,UAAU,IAAI,EAAE,AAAD,EAAGrB,GAAG,CAACsB,CAAAA,IAAK7B,UAAUQ,EAAEE,IAAI,EAAEmB;oBACzE;wBACEP,MAAM;wBACNC,MAAM;wBACNP,OAAO;4BACLE,aAAa;wBACf;wBACAM,UAAU;oBACZ;iBACD;YACH;YACA;gBACEF,MAAM;gBACNC,MAAM;gBACNF,QAAQ;oBACN;wBACEC,MAAM;wBACNC,MAAM;wBACNG,cAAc;oBAChB;oBACA;wBACEJ,MAAM;wBACNC,MAAM;wBACNnB,SAASC,MAAME,GAAG,CAACC,CAAAA,IAAKA,EAAEE,IAAI;oBAChC;oBACA;wBACEY,MAAM;wBACNC,MAAM;wBACNP,OAAO;4BACLE,aAAa;wBACf;wBACAQ,cAAc,CAAC;oBACjB;oBACA;wBACEJ,MAAM;wBACNC,MAAM;wBACNP,OAAO;4BACLE,aAAa;wBACf;wBACAY,SAAS;wBACTN,UAAU;oBACZ;oBACA;wBACEF,MAAM;wBACNC,MAAM;wBACNP,OAAO;4BACLE,aAAa;wBACf;wBACAM,UAAU;oBACZ;iBACD;YACH;SACD;QACDO,UAAU;YACRC,QAAQ;gBACNC,UAAU;YACZ;YACAC,WAAW;QACb;IACF;AACF,EAAC"}

package/dist/components/WorkflowBuilder/StepConfigurationForm.js

@@ -0,0 +1,316 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useCallback, useEffect } from 'react';
+import { Button } from '@payloadcms/ui';
+export const StepConfigurationForm = ({ selectedNode, availableStepTypes, availableSteps, onNodeUpdate, onClose })=>{
+    const [formData, setFormData] = useState(selectedNode?.data.configuration || {});
+    const [jsonText, setJsonText] = useState(()=>JSON.stringify(selectedNode?.data.configuration || {}, null, 2));
+    if (!selectedNode) return null;
+    const stepType = availableStepTypes.find((type)=>type.slug === selectedNode.data.stepType);
+    const inputSchema = stepType?.inputSchema || [];
+    // Update form data when selected node changes
+    useEffect(()=>{
+        const config = selectedNode?.data.configuration || {};
+        setFormData(config);
+        setJsonText(JSON.stringify(config, null, 2));
+    }, [
+        selectedNode
+    ]);
+    const handleSave = useCallback(()=>{
+        // Update the node with form data
+        onNodeUpdate(selectedNode.id, {
+            ...selectedNode.data,
+            configuration: formData
+        });
+        onClose();
+    }, [
+        selectedNode,
+        formData,
+        onNodeUpdate,
+        onClose
+    ]);
+    const renderStepConfiguration = ()=>{
+        if (!inputSchema.length) {
+            return /*#__PURE__*/ _jsx("div", {
+                style: {
+                    padding: '20px',
+                    textAlign: 'center',
+                    color: 'var(--theme-text-400)',
+                    fontStyle: 'italic'
+                },
+                children: "This step type has no configuration parameters."
+            });
+        }
+        return /*#__PURE__*/ _jsxs("div", {
+            style: {
+                marginBottom: '16px'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    style: {
+                        display: 'block',
+                        marginBottom: '4px',
+                        fontSize: '12px',
+                        fontWeight: '500',
+                        color: 'var(--theme-text)'
+                    },
+                    children: "Step Configuration"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        fontSize: '11px',
+                        color: 'var(--theme-text-400)',
+                        marginBottom: '8px'
+                    },
+                    children: [
+                        "Configure this step's parameters in JSON format. Use JSONPath expressions like ",
+                        /*#__PURE__*/ _jsx("code", {
+                            children: "$.trigger.doc.id"
+                        }),
+                        " to reference dynamic data."
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("details", {
+                    style: {
+                        marginBottom: '12px'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("summary", {
+                            style: {
+                                fontSize: '11px',
+                                color: 'var(--theme-text-400)',
+                                cursor: 'pointer',
+                                marginBottom: '8px'
+                            },
+                            children: "📖 Available Fields (click to expand)"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                background: 'var(--theme-elevation-50)',
+                                border: '1px solid var(--theme-elevation-100)',
+                                borderRadius: '4px',
+                                padding: '12px',
+                                fontSize: '11px',
+                                fontFamily: 'monospace'
+                            },
+                            children: inputSchema.map((field, index)=>/*#__PURE__*/ _jsxs("div", {
+                                    style: {
+                                        marginBottom: index < inputSchema.length - 1 ? '8px' : '0'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx("strong", {
+                                            children: field.name
+                                        }),
+                                        " (",
+                                        field.type,
+                                        ")",
+                                        field.required && /*#__PURE__*/ _jsx("span", {
+                                            style: {
+                                                color: 'var(--theme-error-500)'
+                                            },
+                                            children: " *required"
+                                        }),
+                                        field.admin?.description && /*#__PURE__*/ _jsx("div", {
+                                            style: {
+                                                color: 'var(--theme-text-400)',
+                                                marginTop: '2px'
+                                            },
+                                            children: field.admin.description
+                                        })
+                                    ]
+                                }, field.name))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("textarea", {
+                    value: jsonText,
+                    onChange: (e)=>{
+                        const text = e.target.value;
+                        setJsonText(text);
+                        try {
+                            const parsed = JSON.parse(text);
+                            setFormData(parsed);
+                        } catch  {
+                        // Keep invalid JSON, user is still typing
+                        // Don't update formData until JSON is valid
+                        }
+                    },
+                    rows: Math.min(Math.max(inputSchema.length * 2, 6), 15),
+                    style: {
+                        width: '100%',
+                        padding: '12px',
+                        border: '1px solid var(--theme-elevation-100)',
+                        borderRadius: '4px',
+                        fontSize: '13px',
+                        fontFamily: 'monospace',
+                        lineHeight: '1.4',
+                        background: 'var(--theme-input-bg)',
+                        color: 'var(--theme-text)',
+                        resize: 'vertical'
+                    },
+                    placeholder: '{\\n  "field1": "value1",\\n  "field2": "$.trigger.doc.id"\\n}'
+                })
+            ]
+        });
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    padding: '16px',
+                    borderBottom: '1px solid var(--theme-elevation-100)',
+                    background: 'var(--theme-elevation-50)'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("h4", {
+                                style: {
+                                    margin: 0,
+                                    fontSize: '16px',
+                                    fontWeight: '600',
+                                    color: 'var(--theme-text)'
+                                },
+                                children: "Configure Step"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                buttonStyle: "none",
+                                onClick: onClose,
+                                size: "small",
+                                children: "×"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            fontSize: '12px',
+                            color: 'var(--theme-text-400)',
+                            marginTop: '4px'
+                        },
+                        children: stepType?.label || selectedNode.data.stepType
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    flex: 1,
+                    overflow: 'auto',
+                    padding: '16px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            marginBottom: '16px'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: {
+                                    display: 'block',
+                                    marginBottom: '4px',
+                                    fontSize: '12px',
+                                    fontWeight: '500'
+                                },
+                                children: "Step Name *"
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "text",
+                                value: selectedNode.data.label || '',
+                                onChange: (e)=>onNodeUpdate(selectedNode.id, {
+                                        ...selectedNode.data,
+                                        label: e.target.value
+                                    }),
+                                style: {
+                                    width: '100%',
+                                    padding: '8px',
+                                    border: '1px solid var(--theme-elevation-100)',
+                                    borderRadius: '4px',
+                                    fontSize: '14px'
+                                },
+                                required: true
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            marginBottom: '16px'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                style: {
+                                    display: 'block',
+                                    marginBottom: '4px',
+                                    fontSize: '12px',
+                                    fontWeight: '500'
+                                },
+                                children: "Dependencies"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontSize: '11px',
+                                    color: 'var(--theme-text-400)',
+                                    marginBottom: '8px'
+                                },
+                                children: "Steps that must complete before this step can run"
+                            }),
+                            availableSteps.filter((step)=>step !== selectedNode.id).map((stepId)=>/*#__PURE__*/ _jsxs("label", {
+                                    style: {
+                                        display: 'block',
+                                        fontSize: '12px',
+                                        marginBottom: '4px'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx("input", {
+                                            type: "checkbox",
+                                            checked: (selectedNode.data.dependencies || []).includes(stepId),
+                                            onChange: (e)=>{
+                                                const currentDeps = selectedNode.data.dependencies || [];
+                                                const newDeps = e.target.checked ? [
+                                                    ...currentDeps,
+                                                    stepId
+                                                ] : currentDeps.filter((dep)=>dep !== stepId);
+                                                onNodeUpdate(selectedNode.id, {
+                                                    ...selectedNode.data,
+                                                    dependencies: newDeps
+                                                });
+                                            },
+                                            style: {
+                                                marginRight: '8px'
+                                            }
+                                        }),
+                                        stepId
+                                    ]
+                                }, stepId))
+                        ]
+                    }),
+                    renderStepConfiguration(),
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            borderTop: '1px solid var(--theme-elevation-100)',
+                            paddingTop: '16px',
+                            marginTop: '16px'
+                        },
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            buttonStyle: "primary",
+                            onClick: handleSave,
+                            children: "Save Configuration"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=StepConfigurationForm.js.map

package/dist/components/WorkflowBuilder/StepConfigurationForm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/WorkflowBuilder/StepConfigurationForm.tsx"],"sourcesContent":["'use client'\n\nimport React, { useState, useCallback, useEffect } from 'react'\nimport type { Node } from '@xyflow/react'\nimport { Button } from '@payloadcms/ui'\n\ninterface StepField {\n  name: string\n  type: string\n  label?: string\n  admin?: {\n    description?: string\n    condition?: (data: any, siblingData: any) => boolean\n  }\n  options?: Array<{ label: string; value: string }>\n  defaultValue?: any\n  required?: boolean\n  hasMany?: boolean\n  fields?: StepField[] // For group fields\n}\n\ninterface StepType {\n  slug: string\n  label?: string\n  inputSchema?: StepField[]\n  outputSchema?: StepField[]\n}\n\ninterface StepConfigurationFormProps {\n  selectedNode: Node | null\n  availableStepTypes: StepType[]\n  availableSteps: string[] // For dependency selection\n  onNodeUpdate: (nodeId: string, data: Partial<Node['data']>) => void\n  onClose: () => void\n}\n\nexport const StepConfigurationForm: React.FC<StepConfigurationFormProps> = ({\n  selectedNode,\n  availableStepTypes,\n  availableSteps,\n  onNodeUpdate,\n  onClose\n}) => {\n  const [formData, setFormData] = useState<Record<string, any>>(\n    selectedNode?.data.configuration || {}\n  )\n  const [jsonText, setJsonText] = useState<string>(() => \n    JSON.stringify(selectedNode?.data.configuration || {}, null, 2)\n  )\n\n  if (!selectedNode) return null\n\n  const stepType = availableStepTypes.find(type => type.slug === selectedNode.data.stepType)\n  const inputSchema = stepType?.inputSchema || []\n\n  // Update form data when selected node changes\n  useEffect(() => {\n    const config = selectedNode?.data.configuration || {}\n    setFormData(config)\n    setJsonText(JSON.stringify(config, null, 2))\n  }, [selectedNode])\n\n\n  const handleSave = useCallback(() => {\n    // Update the node with form data\n    onNodeUpdate(selectedNode.id, {\n      ...selectedNode.data,\n      configuration: formData\n    })\n    \n    onClose()\n  }, [selectedNode, formData, onNodeUpdate, onClose])\n\n  const renderStepConfiguration = () => {\n    if (!inputSchema.length) {\n      return (\n        <div style={{ \n          padding: '20px',\n          textAlign: 'center',\n          color: 'var(--theme-text-400)',\n          fontStyle: 'italic'\n        }}>\n          This step type has no configuration parameters.\n        </div>\n      )\n    }\n\n    return (\n      <div style={{ marginBottom: '16px' }}>\n        <label style={{ \n          display: 'block', \n          marginBottom: '4px', \n          fontSize: '12px', \n          fontWeight: '500',\n          color: 'var(--theme-text)' \n        }}>\n          Step Configuration\n        </label>\n        <div style={{ fontSize: '11px', color: 'var(--theme-text-400)', marginBottom: '8px' }}>\n          Configure this step's parameters in JSON format. Use JSONPath expressions like <code>$.trigger.doc.id</code> to reference dynamic data.\n        </div>\n        \n        {/* Schema Reference */}\n        <details style={{ marginBottom: '12px' }}>\n          <summary style={{ \n            fontSize: '11px', \n            color: 'var(--theme-text-400)', \n            cursor: 'pointer',\n            marginBottom: '8px'\n          }}>\n            📖 Available Fields (click to expand)\n          </summary>\n          <div style={{ \n            background: 'var(--theme-elevation-50)',\n            border: '1px solid var(--theme-elevation-100)',\n            borderRadius: '4px',\n            padding: '12px',\n            fontSize: '11px',\n            fontFamily: 'monospace'\n          }}>\n            {inputSchema.map((field, index) => (\n              <div key={field.name} style={{ marginBottom: index < inputSchema.length - 1 ? '8px' : '0' }}>\n                <strong>{field.name}</strong> ({field.type})\n                {field.required && <span style={{ color: 'var(--theme-error-500)' }}> *required</span>}\n                {field.admin?.description && (\n                  <div style={{ color: 'var(--theme-text-400)', marginTop: '2px' }}>\n                    {field.admin.description}\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        </details>\n\n        <textarea\n          value={jsonText}\n          onChange={(e) => {\n            const text = e.target.value\n            setJsonText(text)\n            try {\n              const parsed = JSON.parse(text)\n              setFormData(parsed)\n            } catch {\n              // Keep invalid JSON, user is still typing\n              // Don't update formData until JSON is valid\n            }\n          }}\n          rows={Math.min(Math.max(inputSchema.length * 2, 6), 15)}\n          style={{\n            width: '100%',\n            padding: '12px',\n            border: '1px solid var(--theme-elevation-100)',\n            borderRadius: '4px',\n            fontSize: '13px',\n            fontFamily: 'monospace',\n            lineHeight: '1.4',\n            background: 'var(--theme-input-bg)',\n            color: 'var(--theme-text)',\n            resize: 'vertical'\n          }}\n          placeholder='{\\n  \"field1\": \"value1\",\\n  \"field2\": \"$.trigger.doc.id\"\\n}'\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div style={{\n      height: '100%',\n      width: '100%',\n      display: 'flex',\n      flexDirection: 'column',\n      overflow: 'hidden'\n    }}>\n      {/* Header */}\n      <div style={{\n        padding: '16px',\n        borderBottom: '1px solid var(--theme-elevation-100)',\n        background: 'var(--theme-elevation-50)'\n      }}>\n        <div style={{ \n          display: 'flex', \n          justifyContent: 'space-between', \n          alignItems: 'center' \n        }}>\n          <h4 style={{ margin: 0, fontSize: '16px', fontWeight: '600', color: 'var(--theme-text)' }}>\n            Configure Step\n          </h4>\n          <Button\n            buttonStyle=\"none\"\n            onClick={onClose}\n            size=\"small\"\n          >\n            ×\n          </Button>\n        </div>\n        <div style={{ fontSize: '12px', color: 'var(--theme-text-400)', marginTop: '4px' }}>\n          {stepType?.label || (selectedNode.data.stepType as string)}\n        </div>\n      </div>\n\n      {/* Form */}\n      <div style={{ \n        flex: 1, \n        overflow: 'auto', \n        padding: '16px' \n      }}>\n        {/* Basic step info */}\n        <div style={{ marginBottom: '16px' }}>\n          <label style={{ \n            display: 'block', \n            marginBottom: '4px', \n            fontSize: '12px', \n            fontWeight: '500' \n          }}>\n            Step Name *\n          </label>\n          <input\n            type=\"text\"\n            value={(selectedNode.data.label as string) || ''}\n            onChange={(e) => onNodeUpdate(selectedNode.id, { \n              ...selectedNode.data, \n              label: e.target.value \n            })}\n            style={{\n              width: '100%',\n              padding: '8px',\n              border: '1px solid var(--theme-elevation-100)',\n              borderRadius: '4px',\n              fontSize: '14px'\n            }}\n            required\n          />\n        </div>\n\n        {/* Dependencies */}\n        <div style={{ marginBottom: '16px' }}>\n          <label style={{ \n            display: 'block', \n            marginBottom: '4px', \n            fontSize: '12px', \n            fontWeight: '500' \n          }}>\n            Dependencies\n          </label>\n          <div style={{ fontSize: '11px', color: 'var(--theme-text-400)', marginBottom: '8px' }}>\n            Steps that must complete before this step can run\n          </div>\n          {availableSteps\n            .filter(step => step !== selectedNode.id)\n            .map(stepId => (\n            <label key={stepId} style={{ \n              display: 'block', \n              fontSize: '12px', \n              marginBottom: '4px' \n            }}>\n              <input\n                type=\"checkbox\"\n                checked={((selectedNode.data.dependencies as string[]) || []).includes(stepId)}\n                onChange={(e) => {\n                  const currentDeps = (selectedNode.data.dependencies as string[]) || []\n                  const newDeps = e.target.checked\n                    ? [...currentDeps, stepId]\n                    : currentDeps.filter((dep: string) => dep !== stepId)\n                  \n                  onNodeUpdate(selectedNode.id, {\n                    ...selectedNode.data,\n                    dependencies: newDeps\n                  })\n                }}\n                style={{ marginRight: '8px' }}\n              />\n              {stepId}\n            </label>\n          ))}\n        </div>\n\n        {/* Step-specific configuration */}\n        {renderStepConfiguration()}\n\n        {/* Submit button */}\n        <div style={{ \n          borderTop: '1px solid var(--theme-elevation-100)', \n          paddingTop: '16px', \n          marginTop: '16px' \n        }}>\n          <Button\n            buttonStyle=\"primary\"\n            onClick={handleSave}\n          >\n            Save Configuration\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}"],"names":["React","useState","useCallback","useEffect","Button","StepConfigurationForm","selectedNode","availableStepTypes","availableSteps","onNodeUpdate","onClose","formData","setFormData","data","configuration","jsonText","setJsonText","JSON","stringify","stepType","find","type","slug","inputSchema","config","handleSave","id","renderStepConfiguration","length","div","style","padding","textAlign","color","fontStyle","marginBottom","label","display","fontSize","fontWeight","code","details","summary","cursor","background","border","borderRadius","fontFamily","map","field","index","strong","name","required","span","admin","description","marginTop","textarea","value","onChange","e","text","target","parsed","parse","rows","Math","min","max","width","lineHeight","resize","placeholder","height","flexDirection","overflow","borderBottom","justifyContent","alignItems","h4","margin","buttonStyle","onClick","size","flex","input","filter","step","stepId","checked","dependencies","includes","currentDeps","newDeps","dep","marginRight","borderTop","paddingTop"],"mappings":"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"}

package/dist/components/WorkflowBuilder/WorkflowBuilder.js

@@ -0,0 +1,211 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useState } from 'react';
+import { ReactFlow, addEdge, useNodesState, useEdgesState, Controls, Background, BackgroundVariant, MiniMap, Panel } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+// Import custom node types
+import { StepNode } from './nodes/StepNode.js';
+import { WorkflowToolbar } from './WorkflowToolbar.js';
+import { StepConfigurationForm } from './StepConfigurationForm.js';
+// Define node types for React Flow
+const nodeTypes = {
+    stepNode: StepNode
+};
+export const WorkflowBuilder = ({ workflow, availableStepTypes = [], onSave, readonly = false })=>{
+    const [selectedNode, setSelectedNode] = useState(null);
+    // Convert workflow steps to React Flow nodes
+    const initialNodes = useMemo(()=>{
+        if (!workflow?.steps) return [];
+        return workflow.steps.map((step, index)=>({
+                id: step.name || `step-${index}`,
+                type: 'stepNode',
+                position: step.position || {
+                    x: 100 + index * 200,
+                    y: 100
+                },
+                data: {
+                    label: step.name || 'Unnamed Step',
+                    stepType: step.type,
+                    color: step.visual?.color || '#3b82f6',
+                    icon: step.visual?.icon,
+                    dependencies: step.dependencies || []
+                }
+            }));
+    }, [
+        workflow?.steps
+    ]);
+    // Convert dependencies to React Flow edges
+    const initialEdges = useMemo(()=>{
+        if (!workflow?.steps) return [];
+        const edges = [];
+        workflow.steps.forEach((step, index)=>{
+            const targetId = step.name || `step-${index}`;
+            if (step.dependencies) {
+                step.dependencies.forEach((depName)=>{
+                    // Find the source step
+                    const sourceStep = workflow.steps?.find((s)=>s.name === depName);
+                    if (sourceStep) {
+                        const sourceId = sourceStep.name || `step-${workflow.steps?.indexOf(sourceStep)}`;
+                        edges.push({
+                            id: `${sourceId}-${targetId}`,
+                            source: sourceId,
+                            target: targetId,
+                            type: 'smoothstep'
+                        });
+                    }
+                });
+            }
+        });
+        return edges;
+    }, [
+        workflow?.steps
+    ]);
+    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+    // Handle new connections
+    const onConnect = useCallback((params)=>{
+        if (readonly) return;
+        setEdges((eds)=>addEdge({
+                ...params,
+                type: 'smoothstep'
+            }, eds));
+    }, [
+        setEdges,
+        readonly
+    ]);
+    // Handle node selection
+    const onNodeClick = useCallback((_event, node)=>{
+        console.log('Node clicked:', node.id, node.data.label);
+        setSelectedNode(node);
+    }, []);
+    // Handle adding new step
+    const onAddStep = useCallback((stepType)=>{
+        if (readonly) return;
+        const newStep = {
+            id: `step-${Date.now()}`,
+            type: 'stepNode',
+            position: {
+                x: 100,
+                y: 100
+            },
+            data: {
+                label: 'New Step',
+                stepType,
+                color: '#3b82f6',
+                dependencies: []
+            }
+        };
+        setNodes((nds)=>[
+                ...nds,
+                newStep
+            ]);
+    }, [
+        setNodes,
+        readonly
+    ]);
+    // Handle updating a node's data
+    const handleNodeUpdate = useCallback((nodeId, newData)=>{
+        setNodes((nds)=>nds.map((node)=>node.id === nodeId ? {
+                    ...node,
+                    data: {
+                        ...node.data,
+                        ...newData
+                    }
+                } : node));
+    }, [
+        setNodes
+    ]);
+    // Handle saving workflow
+    const handleSave = useCallback(()=>{
+        if (!workflow || !onSave) return;
+        // Convert nodes and edges back to workflow format
+        const updatedSteps = nodes.map((node)=>{
+            // Find dependencies from edges
+            const dependencies = edges.filter((edge)=>edge.target === node.id).map((edge)=>edge.source);
+            return {
+                name: node.id,
+                type: node.data.stepType,
+                position: node.position,
+                visual: {
+                    color: node.data.color,
+                    icon: node.data.icon
+                },
+                dependencies: dependencies.length > 0 ? dependencies : undefined
+            };
+        });
+        const updatedWorkflow = {
+            ...workflow,
+            steps: updatedSteps
+        };
+        onSave(updatedWorkflow);
+    }, [
+        workflow,
+        nodes,
+        edges,
+        onSave
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            width: '100%',
+            height: '600px',
+            display: 'flex',
+            background: 'var(--theme-bg)',
+            borderRadius: '4px',
+            border: '1px solid var(--theme-elevation-100)'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    flex: selectedNode ? '1 1 70%' : '1 1 100%',
+                    transition: 'flex 0.3s ease'
+                },
+                children: /*#__PURE__*/ _jsxs(ReactFlow, {
+                    nodes: nodes,
+                    edges: edges,
+                    onNodesChange: onNodesChange,
+                    onEdgesChange: onEdgesChange,
+                    onConnect: onConnect,
+                    onNodeClick: onNodeClick,
+                    nodeTypes: nodeTypes,
+                    fitView: true,
+                    attributionPosition: "top-right",
+                    children: [
+                        /*#__PURE__*/ _jsx(Controls, {}),
+                        /*#__PURE__*/ _jsx(MiniMap, {}),
+                        /*#__PURE__*/ _jsx(Background, {
+                            variant: BackgroundVariant.Dots,
+                            gap: 12,
+                            size: 1
+                        }),
+                        !readonly && /*#__PURE__*/ _jsx(Panel, {
+                            position: "top-left",
+                            children: /*#__PURE__*/ _jsx(WorkflowToolbar, {
+                                availableStepTypes: availableStepTypes,
+                                onAddStep: onAddStep,
+                                onSave: handleSave
+                            })
+                        })
+                    ]
+                })
+            }),
+            selectedNode && !readonly && /*#__PURE__*/ _jsx("div", {
+                style: {
+                    flex: '0 0 30%',
+                    borderLeft: '1px solid var(--theme-elevation-100)',
+                    background: 'var(--theme-elevation-0)',
+                    display: 'flex',
+                    flexDirection: 'column'
+                },
+                children: /*#__PURE__*/ _jsx(StepConfigurationForm, {
+                    selectedNode: selectedNode,
+                    availableStepTypes: availableStepTypes,
+                    availableSteps: nodes.map((node)=>node.id),
+                    onNodeUpdate: handleNodeUpdate,
+                    onClose: ()=>setSelectedNode(null)
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=WorkflowBuilder.js.map