@d34dman/flowdrop 0.0.5 → 0.0.7

package/README.md

@@ -42,34 +42,34 @@ npm install @d34dman/flowdrop
 ### Basic Import
 
 ```javascript
-import { WorkflowEditor } from "@d34dman/flowdrop";
-import "@d34dman/flowdrop/styles/base.css";
+import { WorkflowEditor } from '@d34dman/flowdrop';
+import '@d34dman/flowdrop/styles/base.css';
 ```
 
 ### Using the WorkflowEditor Component
 
 ```svelte
 <script lang="ts">
-  import { WorkflowEditor } from "@d34dman/flowdrop";
-  import type { NodeMetadata, Workflow } from "@d34dman/flowdrop";
-
-  let nodes: NodeMetadata[] = [
-    {
-      id: "text_input",
-      name: "Text Input",
-      category: "input_output",
-      description: "User input field",
-      inputs: [],
-      outputs: [{ id: "value", name: "Value", type: "output", dataType: "string" }]
-    }
-  ];
-
-  let workflow: Workflow = {
-    id: "workflow_1",
-    name: "My Workflow",
-    nodes: [],
-    edges: []
-  };
+	import { WorkflowEditor } from '@d34dman/flowdrop';
+	import type { NodeMetadata, Workflow } from '@d34dman/flowdrop';
+
+	let nodes: NodeMetadata[] = [
+		{
+			id: 'text_input',
+			name: 'Text Input',
+			category: 'input_output',
+			description: 'User input field',
+			inputs: [],
+			outputs: [{ id: 'value', name: 'Value', type: 'output', dataType: 'string' }]
+		}
+	];
+
+	let workflow: Workflow = {
+		id: 'workflow_1',
+		name: 'My Workflow',
+		nodes: [],
+		edges: []
+	};
 </script>
 
 <WorkflowEditor {nodes} />
@@ -81,34 +81,34 @@ import "@d34dman/flowdrop/styles/base.css";
 
 ```svelte
 <script>
-  import { WorkflowEditor, NodeSidebar } from "@d34dman/flowdrop";
+	import { WorkflowEditor, NodeSidebar } from '@d34dman/flowdrop';
 </script>
 
 <div class="editor-container">
-  <NodeSidebar {nodes} />
-  <WorkflowEditor {nodes} />
+	<NodeSidebar {nodes} />
+	<WorkflowEditor {nodes} />
 </div>
 ```
 
 #### 2. Using Mount Functions (Vanilla JS/Other Frameworks)
 
 ```javascript
-import { mountWorkflowEditor } from "@d34dman/flowdrop";
+import { mountWorkflowEditor } from '@d34dman/flowdrop';
 
-const container = document.getElementById("workflow-container");
+const container = document.getElementById('workflow-container');
 const editor = mountWorkflowEditor(container, {
-  nodes: availableNodes,
-  endpointConfig: {
-    baseUrl: "/api/flowdrop",
-    endpoints: {
-      workflows: {
-        list: "/workflows",
-        get: "/workflows/{id}",
-        create: "/workflows",
-        update: "/workflows/{id}"
-      }
-    }
-  }
+	nodes: availableNodes,
+	endpointConfig: {
+		baseUrl: '/api/flowdrop',
+		endpoints: {
+			workflows: {
+				list: '/workflows',
+				get: '/workflows/{id}',
+				create: '/workflows',
+				update: '/workflows/{id}'
+			}
+		}
+	}
 });
 
 // Cleanup
@@ -121,15 +121,15 @@ editor.destroy();
 
 ```javascript
 Drupal.behaviors.flowdropEditor = {
-  attach: function (context, settings) {
-    const container = context.querySelector(".flowdrop-container");
-    if (container && window.FlowDrop) {
-      window.FlowDrop.mountWorkflowEditor(container, {
-        endpointConfig: settings.flowdrop.endpointConfig,
-        nodes: settings.flowdrop.nodes
-      });
-    }
-  }
+	attach: function (context, settings) {
+		const container = context.querySelector('.flowdrop-container');
+		if (container && window.FlowDrop) {
+			window.FlowDrop.mountWorkflowEditor(container, {
+				endpointConfig: settings.flowdrop.endpointConfig,
+				nodes: settings.flowdrop.nodes
+			});
+		}
+	}
 };
 ```
 
@@ -140,6 +140,7 @@ Drupal.behaviors.flowdropEditor = {
 Main editor component for creating and editing workflows.
 
 **Props:**
+
 - `nodes`: Array of available node types
 - `endpointConfig`: API endpoint configuration
 - `height`: Editor height (default: "100vh")
@@ -152,6 +153,7 @@ Main editor component for creating and editing workflows.
 Sidebar displaying available node types.
 
 **Props:**
+
 - `nodes`: Array of node types to display
 
 ### ConfigSidebar
@@ -159,6 +161,7 @@ Sidebar displaying available node types.
 Configuration panel for selected nodes.
 
 **Props:**
+
 - `isOpen`: Sidebar visibility
 - `configSchema`: JSON schema for configuration
 - `configValues`: Current configuration values
@@ -170,29 +173,29 @@ Configuration panel for selected nodes.
 Configure the API client to connect to your backend:
 
 ```typescript
-import { createEndpointConfig } from "@d34dman/flowdrop";
+import { createEndpointConfig } from '@d34dman/flowdrop';
 
 const config = createEndpointConfig({
-  baseUrl: "https://api.example.com",
-  endpoints: {
-    nodes: {
-      list: "/nodes",
-      get: "/nodes/{id}"
-    },
-    workflows: {
-      list: "/workflows",
-      get: "/workflows/{id}",
-      create: "/workflows",
-      update: "/workflows/{id}",
-      delete: "/workflows/{id}",
-      execute: "/workflows/{id}/execute"
-    }
-  },
-  timeout: 30000,
-  auth: {
-    type: "bearer",
-    token: "your-token"
-  }
+	baseUrl: 'https://api.example.com',
+	endpoints: {
+		nodes: {
+			list: '/nodes',
+			get: '/nodes/{id}'
+		},
+		workflows: {
+			list: '/workflows',
+			get: '/workflows/{id}',
+			create: '/workflows',
+			update: '/workflows/{id}',
+			delete: '/workflows/{id}',
+			execute: '/workflows/{id}/execute'
+		}
+	},
+	timeout: 30000,
+	auth: {
+		type: 'bearer',
+		token: 'your-token'
+	}
 });
 ```
 
@@ -204,10 +207,10 @@ Override CSS custom properties:
 
 ```css
 :root {
-  --flowdrop-background-color: #f9fafb;
-  --flowdrop-primary-color: #3b82f6;
-  --flowdrop-border-color: #e5e7eb;
-  --flowdrop-text-color: #1f2937;
+	--flowdrop-background-color: #f9fafb;
+	--flowdrop-primary-color: #3b82f6;
+	--flowdrop-border-color: #e5e7eb;
+	--flowdrop-text-color: #1f2937;
 }
 ```
 
@@ -217,37 +220,37 @@ Define custom node types:
 
 ```typescript
 const customNode: NodeMetadata = {
-  id: "custom_processor",
-  name: "Custom Processor",
-  category: "data_processing",
-  description: "Process data with custom logic",
-  icon: "mdi:cog",
-  color: "#3b82f6",
-  inputs: [
-    {
-      id: "input",
-      name: "Input",
-      type: "input",
-      dataType: "mixed"
-    }
-  ],
-  outputs: [
-    {
-      id: "output",
-      name: "Output",
-      type: "output",
-      dataType: "mixed"
-    }
-  ],
-  configSchema: {
-    type: "object",
-    properties: {
-      operation: {
-        type: "string",
-        title: "Operation"
-      }
-    }
-  }
+	id: 'custom_processor',
+	name: 'Custom Processor',
+	category: 'data_processing',
+	description: 'Process data with custom logic',
+	icon: 'mdi:cog',
+	color: '#3b82f6',
+	inputs: [
+		{
+			id: 'input',
+			name: 'Input',
+			type: 'input',
+			dataType: 'mixed'
+		}
+	],
+	outputs: [
+		{
+			id: 'output',
+			name: 'Output',
+			type: 'output',
+			dataType: 'mixed'
+		}
+	],
+	configSchema: {
+		type: 'object',
+		properties: {
+			operation: {
+				type: 'string',
+				title: 'Operation'
+			}
+		}
+	}
 };
 ```
 

package/dist/api/client.js

@@ -42,7 +42,7 @@ export class FlowDropApiClient {
      * Fetch available node types and their metadata
      */
     async getAvailableNodes() {
-        const response = await this.request('/api/flowdrop/nodes');
+        const response = await this.request('/nodes');
         if (!response.success || !response.data) {
             throw new Error(response.error || 'Failed to fetch available nodes');
         }
@@ -52,7 +52,7 @@ export class FlowDropApiClient {
      * Fetch nodes by category
      */
     async getNodesByCategory(category) {
-        const response = await this.request(`/api/nodes?category=${encodeURIComponent(category)}`);
+        const response = await this.request(`/nodes?category=${encodeURIComponent(category)}`);
         if (!response.success || !response.data) {
             throw new Error(response.error || 'Failed to fetch nodes by category');
         }
@@ -62,7 +62,7 @@ export class FlowDropApiClient {
      * Fetch a specific node's metadata
      */
     async getNodeMetadata(nodeId) {
-        const response = await this.request(`/api/nodes/${encodeURIComponent(nodeId)}`);
+        const response = await this.request(`/nodes/${encodeURIComponent(nodeId)}`);
         if (!response.success || !response.data) {
             throw new Error(response.error || 'Failed to fetch node metadata');
         }
@@ -72,7 +72,7 @@ export class FlowDropApiClient {
      * Save a workflow
      */
     async saveWorkflow(workflow) {
-        const response = await this.request('/api/flowdrop/workflows', {
+        const response = await this.request('/workflows', {
             method: 'POST',
             body: JSON.stringify(workflow)
         });
@@ -85,7 +85,7 @@ export class FlowDropApiClient {
      * Update an existing workflow
      */
     async updateWorkflow(workflowId, workflow) {
-        const response = await this.request(`/api/workflows/${encodeURIComponent(workflowId)}`, {
+        const response = await this.request(`/workflows/${encodeURIComponent(workflowId)}`, {
             method: 'PUT',
             body: JSON.stringify(workflow)
         });
@@ -98,7 +98,7 @@ export class FlowDropApiClient {
      * Load a workflow by ID
      */
     async loadWorkflow(workflowId) {
-        const response = await this.request(`/api/workflows/${encodeURIComponent(workflowId)}`);
+        const response = await this.request(`/workflows/${encodeURIComponent(workflowId)}`);
         if (!response.success || !response.data) {
             throw new Error(response.error || 'Failed to load workflow');
         }
@@ -108,7 +108,7 @@ export class FlowDropApiClient {
      * List all workflows
      */
     async listWorkflows() {
-        const response = await this.request('/api/flowdrop/workflows');
+        const response = await this.request('/workflows');
         if (!response.success || !response.data) {
             throw new Error(response.error || 'Failed to list workflows');
         }
@@ -118,7 +118,7 @@ export class FlowDropApiClient {
      * Delete a workflow
      */
     async deleteWorkflow(workflowId) {
-        const response = await this.request(`/api/workflows/${encodeURIComponent(workflowId)}`, {
+        const response = await this.request(`/workflows/${encodeURIComponent(workflowId)}`, {
             method: 'DELETE'
         });
         if (!response.success) {
@@ -129,7 +129,7 @@ export class FlowDropApiClient {
      * Execute a workflow
      */
     async executeWorkflow(workflowId, inputs) {
-        const response = await this.request(`/api/workflows/${encodeURIComponent(workflowId)}/execute`, {
+        const response = await this.request(`/workflows/${encodeURIComponent(workflowId)}/execute`, {
             method: 'POST',
             body: JSON.stringify({ inputs })
         });
@@ -142,7 +142,7 @@ export class FlowDropApiClient {
      * Get execution status
      */
     async getExecutionStatus(executionId) {
-        const response = await this.request(`/api/executions/${encodeURIComponent(executionId)}`);
+        const response = await this.request(`/executions/${encodeURIComponent(executionId)}`);
         if (!response.success || !response.data) {
             throw new Error(response.error || 'Failed to get execution status');
         }
@@ -152,7 +152,7 @@ export class FlowDropApiClient {
      * Cancel workflow execution
      */
     async cancelExecution(executionId) {
-        const response = await this.request(`/api/executions/${encodeURIComponent(executionId)}/cancel`, {
+        const response = await this.request(`/executions/${encodeURIComponent(executionId)}/cancel`, {
             method: 'POST'
         });
         if (!response.success) {
@@ -163,7 +163,7 @@ export class FlowDropApiClient {
      * Get execution logs
      */
     async getExecutionLogs(executionId) {
-        const response = await this.request(`/api/executions/${encodeURIComponent(executionId)}/logs`);
+        const response = await this.request(`/executions/${encodeURIComponent(executionId)}/logs`);
         if (!response.success || !response.data) {
             throw new Error(response.error || 'Failed to get execution logs');
         }
@@ -173,7 +173,7 @@ export class FlowDropApiClient {
      * Validate workflow configuration
      */
     async validateWorkflow(workflow) {
-        const response = await this.request('/api/flowdrop/workflows/validate', {
+        const response = await this.request('/workflows/validate', {
             method: 'POST',
             body: JSON.stringify(workflow)
         });
@@ -186,7 +186,7 @@ export class FlowDropApiClient {
      * Export workflow as JSON
      */
     async exportWorkflow(workflowId) {
-        const response = await this.request(`/api/workflows/${encodeURIComponent(workflowId)}/export`);
+        const response = await this.request(`/workflows/${encodeURIComponent(workflowId)}/export`);
         if (!response.success || !response.data) {
             throw new Error(response.error || 'Failed to export workflow');
         }
@@ -196,7 +196,7 @@ export class FlowDropApiClient {
      * Import workflow from JSON
      */
     async importWorkflow(workflowJson) {
-        const response = await this.request('/api/flowdrop/workflows/import', {
+        const response = await this.request('/workflows/import', {
             method: 'POST',
             body: JSON.stringify({ workflow: workflowJson })
         });
@@ -209,7 +209,7 @@ export class FlowDropApiClient {
      * Fetch port configuration
      */
     async getPortConfig() {
-        const response = await this.request('/api/flowdrop/port-config');
+        const response = await this.request('/port-config');
         if (!response.success || !response.data) {
             throw new Error(response.error || 'Failed to fetch port configuration');
         }
@@ -219,7 +219,7 @@ export class FlowDropApiClient {
      * Fetch pipeline data including job information and status
      */
     async getPipelineData(pipelineId) {
-        const response = await this.request(`/api/flowdrop/pipeline/${encodeURIComponent(pipelineId)}`);
+        const response = await this.request(`/pipeline/${encodeURIComponent(pipelineId)}`);
         return response;
     }
 }