orcheo-canvas 0.0.1

package/src/features/workflow/components/panels/rjsf-templates.tsx

@@ -0,0 +1,146 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * Field templates that control layout/styling of form sections.
+ */
+
+import React from "react";
+import {
+  ArrayFieldTemplateProps,
+  FieldTemplateProps,
+  ObjectFieldTemplateProps,
+} from "@rjsf/utils";
+import { Label } from "@/design-system/ui/label";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
+import { Button } from "@/design-system/ui/button";
+import { Plus, X, HelpCircle } from "lucide-react";
+
+/**
+ * Custom Field Template
+ */
+function FieldTemplate(props: FieldTemplateProps) {
+  const {
+    id,
+    label,
+    children,
+    errors,
+    help,
+    description,
+    hidden,
+    required,
+    displayLabel,
+  } = props;
+
+  if (hidden) {
+    return <div className="hidden">{children}</div>;
+  }
+
+  return (
+    <div className="grid gap-2 mb-4">
+      {displayLabel && label && (
+        <div className="flex items-center gap-1.5">
+          <Label htmlFor={id}>
+            {label}
+            {required && <span className="text-destructive ml-1">*</span>}
+          </Label>
+          {description && (
+            <TooltipProvider delayDuration={300}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className="inline-flex items-center justify-center rounded-full h-4 w-4 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                  >
+                    <HelpCircle className="h-3.5 w-3.5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="right" className="max-w-[300px]">
+                  <p className="text-xs">{description}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+        </div>
+      )}
+      {children}
+      {errors && <div className="text-xs text-destructive">{errors}</div>}
+      {help && <p className="text-xs text-muted-foreground">{help}</p>}
+    </div>
+  );
+}
+
+/**
+ * Custom Object Field Template
+ */
+function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
+  const { title, description, properties } = props;
+
+  return (
+    <div className="space-y-4">
+      {title && <h4 className="font-medium text-sm">{title}</h4>}
+      {description && (
+        <p className="text-xs text-muted-foreground mb-2">{description}</p>
+      )}
+      <div className="space-y-3">
+        {properties.map((element) => (
+          <div key={element.name}>{element.content}</div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Custom Array Field Template
+ */
+function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
+  const { title, items, canAdd, onAddClick } = props;
+
+  return (
+    <div className="space-y-3">
+      {title && <h4 className="font-medium text-sm">{title}</h4>}
+      <div className="space-y-3">
+        {items.map((element) => (
+          <div
+            key={element.key}
+            className="rounded-md border border-border bg-muted/30 p-3 space-y-3"
+          >
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-medium text-muted-foreground">
+                Item {element.index + 1}
+              </span>
+              {element.hasRemove && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 text-muted-foreground"
+                  onClick={element.onDropIndexClick(element.index)}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              )}
+            </div>
+            {element.children}
+          </div>
+        ))}
+      </div>
+      {canAdd && (
+        <Button variant="outline" size="sm" onClick={onAddClick}>
+          <Plus className="h-3 w-3 mr-1" /> Add Item
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export const customTemplates = {
+  FieldTemplate,
+  ObjectFieldTemplate,
+  ArrayFieldTemplate,
+};
+
+export { FieldTemplate, ObjectFieldTemplate, ArrayFieldTemplate };

package/src/features/workflow/components/panels/rjsf-text-widgets.tsx

@@ -0,0 +1,139 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * Text-based widgets (input + textarea) with schema drag-and-drop support.
+ */
+
+import React from "react";
+import { RegistryWidgetsType, WidgetProps, getUiOptions } from "@rjsf/utils";
+import { Input } from "@/design-system/ui/input";
+import { Textarea } from "@/design-system/ui/textarea";
+import {
+  hasSchemaFieldData,
+  insertSchemaFieldReference,
+  readSchemaFieldDragData,
+} from "./schema-dnd";
+
+const useSchemaFieldDnd = <
+  Element extends HTMLInputElement | HTMLTextAreaElement,
+>(
+  disabled: boolean | undefined,
+  readonly: boolean | undefined,
+  onChange: (value: string) => void,
+) => {
+  const handleDragOver = React.useCallback(
+    (event: React.DragEvent<Element>) => {
+      if (disabled || readonly) {
+        return;
+      }
+      if (hasSchemaFieldData(event.dataTransfer)) {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+      }
+    },
+    [disabled, readonly],
+  );
+
+  const handleDrop = React.useCallback(
+    (event: React.DragEvent<Element>) => {
+      if (disabled || readonly) {
+        return;
+      }
+
+      const payload = readSchemaFieldDragData(event.dataTransfer);
+      if (!payload?.path) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const target = event.target as Element;
+      const { value: nextValue, selectionStart } = insertSchemaFieldReference(
+        target,
+        payload.path,
+      );
+
+      target.value = nextValue;
+      target.focus();
+      const restoreSelection = () =>
+        target.setSelectionRange(selectionStart, selectionStart);
+      if (typeof window !== "undefined" && window.requestAnimationFrame) {
+        window.requestAnimationFrame(restoreSelection);
+      } else {
+        restoreSelection();
+      }
+
+      onChange(nextValue);
+    },
+    [disabled, onChange, readonly],
+  );
+
+  return { handleDragOver, handleDrop };
+};
+
+/**
+ * Custom Text Input Widget
+ */
+function TextWidget(props: WidgetProps) {
+  const { id, value, onChange, required, disabled, readonly, placeholder } =
+    props;
+  const { handleDragOver, handleDrop } = useSchemaFieldDnd<HTMLInputElement>(
+    disabled,
+    readonly,
+    onChange,
+  );
+
+  return (
+    <Input
+      id={id}
+      type="text"
+      value={value || ""}
+      onChange={(e) => onChange(e.target.value)}
+      required={required}
+      disabled={disabled}
+      readOnly={readonly}
+      placeholder={placeholder}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    />
+  );
+}
+
+/**
+ * Custom Textarea Widget
+ */
+function TextareaWidget(props: WidgetProps) {
+  const { id, value, onChange, required, disabled, readonly, placeholder } =
+    props;
+  const uiOptions = getUiOptions(props.uiSchema || {});
+  const rows = (uiOptions.rows as number) || 3;
+  const { handleDragOver, handleDrop } = useSchemaFieldDnd<HTMLTextAreaElement>(
+    disabled,
+    readonly,
+    onChange,
+  );
+
+  return (
+    <Textarea
+      id={id}
+      value={value || ""}
+      onChange={(e) => onChange(e.target.value)}
+      required={required}
+      disabled={disabled}
+      readOnly={readonly}
+      placeholder={placeholder}
+      rows={rows}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    />
+  );
+}
+
+type TextWidgetMap = Pick<RegistryWidgetsType, "TextWidget" | "TextareaWidget">;
+
+export const textWidgets: TextWidgetMap = {
+  TextWidget,
+  TextareaWidget,
+};
+
+export { TextWidget, TextareaWidget };

package/src/features/workflow/components/panels/rjsf-theme.tsx

@@ -0,0 +1,16 @@
+/**
+ * Entry point that assembles the custom widgets/templates for RJSF.
+ */
+
+import { RegistryWidgetsType } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
+import { basicWidgets } from "./rjsf-basic-widgets";
+import { conditionWidgets } from "./rjsf-condition-widgets";
+import { customTemplates } from "./rjsf-templates";
+
+export const customWidgets = {
+  ...basicWidgets,
+  ...conditionWidgets,
+} satisfies RegistryWidgetsType;
+
+export { customTemplates, validator };

package/src/features/workflow/components/panels/schema-dnd.ts

@@ -0,0 +1,79 @@
+export const SCHEMA_FIELD_DRAG_TYPE = "application/x.orcheo.schema-field";
+
+export type SchemaFieldDragPayload = {
+  path: string;
+  name?: string;
+  type?: string;
+  description?: string;
+};
+
+export function writeSchemaFieldDragData(
+  dataTransfer: DataTransfer,
+  field: SchemaFieldDragPayload,
+): void {
+  dataTransfer.effectAllowed = "copy";
+  dataTransfer.setData(SCHEMA_FIELD_DRAG_TYPE, JSON.stringify(field));
+  dataTransfer.setData("text/plain", field.path);
+}
+
+export function hasSchemaFieldData(dataTransfer: DataTransfer | null): boolean {
+  if (!dataTransfer) {
+    return false;
+  }
+
+  const types = Array.from(dataTransfer.types ?? []);
+  if (types.includes(SCHEMA_FIELD_DRAG_TYPE)) {
+    return true;
+  }
+  if (types.includes("text/plain")) {
+    const preview = dataTransfer.getData("text/plain");
+    return preview.trim().length > 0;
+  }
+  return false;
+}
+
+export function readSchemaFieldDragData(
+  dataTransfer: DataTransfer | null,
+): SchemaFieldDragPayload | null {
+  if (!dataTransfer) {
+    return null;
+  }
+
+  const rawPayload = dataTransfer.getData(SCHEMA_FIELD_DRAG_TYPE);
+  if (rawPayload) {
+    try {
+      const parsed = JSON.parse(rawPayload) as SchemaFieldDragPayload;
+      if (parsed && typeof parsed.path === "string" && parsed.path.length > 0) {
+        return parsed;
+      }
+    } catch (error) {
+      console.warn("Failed to parse schema field payload", error);
+    }
+  }
+
+  const fallbackPath = dataTransfer.getData("text/plain");
+  if (fallbackPath && fallbackPath.trim().length > 0) {
+    return { path: fallbackPath.trim() };
+  }
+
+  return null;
+}
+
+export function insertSchemaFieldReference(
+  target: HTMLInputElement | HTMLTextAreaElement,
+  path: string,
+): { value: string; selectionStart: number } {
+  const moustache = `{{ ${path} }}`;
+  const currentValue = target.value ?? "";
+  const selectionStart = target.selectionStart ?? currentValue.length;
+  const selectionEnd = target.selectionEnd ?? selectionStart;
+
+  const value =
+    currentValue.slice(0, selectionStart) +
+    moustache +
+    currentValue.slice(selectionEnd);
+
+  const caretPosition = selectionStart + moustache.length;
+
+  return { value, selectionStart: caretPosition };
+}

package/src/features/workflow/components/panels/sidebar-node-item.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import { getNodeIcon } from "@features/workflow/lib/node-icons";
+
+import type { SidebarNode } from "./sidebar-panel.types";
+
+interface NodeItemProps {
+  node: SidebarNode;
+  onSelect?: (node: SidebarNode) => void;
+}
+
+export const SidebarNodeItem = ({ node, onSelect }: NodeItemProps) => {
+  const icon = node.icon ?? getNodeIcon(node.iconKey);
+
+  const handleClick = () => {
+    onSelect?.(node);
+  };
+
+  const handleDragStart: React.DragEventHandler<HTMLDivElement> = (event) => {
+    const serializableNode = { ...node, icon: undefined };
+    event.dataTransfer.setData(
+      "application/reactflow",
+      JSON.stringify(serializableNode),
+    );
+    event.dataTransfer.effectAllowed = "move";
+  };
+
+  return (
+    <div
+      className="flex items-start gap-3 p-2 rounded-md hover:bg-accent cursor-pointer"
+      onClick={handleClick}
+      draggable
+      onDragStart={handleDragStart}
+    >
+      <div className="mt-0.5">{icon}</div>
+      <div>
+        <div className="font-medium text-sm">{node.name}</div>
+        <div className="text-xs text-muted-foreground">{node.description}</div>
+      </div>
+    </div>
+  );
+};

package/src/features/workflow/components/panels/sidebar-nodes/actions.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Globe } from "lucide-react";
+
+import { buildSidebarNode, type NodeCategory } from "../sidebar-panel.types";
+
+export const actionCategory: NodeCategory = {
+  id: "actions",
+  name: "Actions",
+  icon: <Globe className="h-4 w-4 text-blue-500" />,
+  nodes: [
+    buildSidebarNode({
+      id: "http-request",
+      name: "HTTP Request",
+      description: "Make HTTP requests to external APIs",
+      iconKey: "http",
+      type: "api",
+    }),
+    buildSidebarNode({
+      id: "email-send",
+      name: "Send Email",
+      description: "Send and receive emails",
+      iconKey: "email",
+      type: "api",
+    }),
+    buildSidebarNode({
+      id: "slack",
+      name: "Slack",
+      description: "Interact with Slack channels",
+      iconKey: "slack",
+      type: "api",
+      backendType: "SlackNode",
+    }),
+  ],
+};

package/src/features/workflow/components/panels/sidebar-nodes/ai.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Sparkles } from "lucide-react";
+
+import { buildSidebarNode, type NodeCategory } from "../sidebar-panel.types";
+
+export const aiCategory: NodeCategory = {
+  id: "ai",
+  name: "AI & ML",
+  icon: <Sparkles className="h-4 w-4 text-indigo-500" />,
+  nodes: [
+    buildSidebarNode({
+      id: "text-generation",
+      name: "Text Generation",
+      description: "Generate text with AI models",
+      iconKey: "textGeneration",
+      type: "ai",
+    }),
+    buildSidebarNode({
+      id: "chat-completion",
+      name: "Chat Completion",
+      description: "Generate chat responses",
+      iconKey: "chatCompletion",
+      type: "ai",
+    }),
+    buildSidebarNode({
+      id: "classification",
+      name: "Classification",
+      description: "Classify content with ML models",
+      iconKey: "classification",
+      type: "ai",
+    }),
+    buildSidebarNode({
+      id: "image-generation",
+      name: "Image Generation",
+      description: "Generate images with AI",
+      iconKey: "imageGeneration",
+      type: "ai",
+    }),
+  ],
+};

package/src/features/workflow/components/panels/sidebar-nodes/data.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Database } from "lucide-react";
+
+import { DEFAULT_PYTHON_CODE } from "@features/workflow/lib/python-node";
+
+import { buildSidebarNode, type NodeCategory } from "../sidebar-panel.types";
+
+export const dataCategory: NodeCategory = {
+  id: "data",
+  name: "Data Processing",
+  icon: <Database className="h-4 w-4 text-green-500" />,
+  nodes: [
+    buildSidebarNode({
+      id: "database",
+      name: "Database",
+      description: "Query databases with SQL",
+      iconKey: "database",
+      type: "data",
+    }),
+    buildSidebarNode({
+      id: "transform",
+      name: "Transform",
+      description: "Transform data between steps",
+      iconKey: "transform",
+      type: "data",
+    }),
+    buildSidebarNode({
+      id: "python-code",
+      name: "Python Code",
+      description: "Execute custom Python scripts",
+      iconKey: "python",
+      type: "python",
+      data: {
+        code: DEFAULT_PYTHON_CODE,
+        backendType: "PythonCode",
+      },
+    }),
+    buildSidebarNode({
+      id: "filter",
+      name: "Filter Data",
+      description: "Filter data based on conditions",
+      iconKey: "filterData",
+      type: "data",
+    }),
+    buildSidebarNode({
+      id: "aggregate",
+      name: "Aggregate",
+      description: "Group and aggregate data",
+      iconKey: "aggregate",
+      type: "data",
+    }),
+  ],
+};

package/src/features/workflow/components/panels/sidebar-nodes/index.ts

@@ -0,0 +1,2 @@
+export { nodeCategories } from "./node-categories";
+export { favoriteNodes, recentNodes } from "./node-lists";

package/src/features/workflow/components/panels/sidebar-nodes/logic.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import { GitBranch } from "lucide-react";
+
+import { buildSidebarNode, type NodeCategory } from "../sidebar-panel.types";
+
+export const logicCategory: NodeCategory = {
+  id: "logic",
+  name: "Logic & Flow",
+  icon: <GitBranch className="h-4 w-4 text-purple-500" />,
+  nodes: [
+    buildSidebarNode({
+      id: "condition",
+      name: "If / Else",
+      description: "Branch based on a comparison",
+      iconKey: "condition",
+      type: "function",
+      backendType: "IfElseNode",
+      data: {
+        conditionLogic: "and",
+        conditions: [
+          {
+            id: "condition-1",
+            left: "{{previous.result}}",
+            operator: "equals",
+            right: "expected",
+            caseSensitive: false,
+          },
+        ],
+        outputs: [
+          { id: "true", label: "True" },
+          { id: "false", label: "False" },
+        ],
+      },
+    }),
+    buildSidebarNode({
+      id: "loop",
+      name: "While Loop",
+      description: "Iterate while a condition remains true",
+      iconKey: "loop",
+      type: "function",
+      backendType: "WhileNode",
+      data: {
+        conditionLogic: "and",
+        conditions: [
+          {
+            id: "condition-1",
+            operator: "less_than",
+            right: 3,
+          },
+        ],
+        maxIterations: 10,
+        outputs: [
+          { id: "continue", label: "Continue" },
+          { id: "exit", label: "Exit" },
+        ],
+      },
+    }),
+    buildSidebarNode({
+      id: "switch",
+      name: "Switch",
+      description: "Multiple conditional branches",
+      iconKey: "switch",
+      type: "function",
+      backendType: "SwitchNode",
+      data: {
+        value: "{{previous.status}}",
+        caseSensitive: false,
+        defaultBranchKey: "default",
+        cases: [
+          {
+            id: "case-1",
+            match: "approved",
+            label: "Approved",
+            branchKey: "approved",
+          },
+          {
+            id: "case-2",
+            match: "rejected",
+            label: "Rejected",
+            branchKey: "rejected",
+          },
+        ],
+        outputs: [
+          { id: "approved", label: "Approved" },
+          { id: "rejected", label: "Rejected" },
+          { id: "default", label: "Default" },
+        ],
+      },
+    }),
+    buildSidebarNode({
+      id: "delay",
+      name: "Delay",
+      description: "Pause workflow execution",
+      iconKey: "delay",
+      type: "function",
+      backendType: "DelayNode",
+      data: {
+        durationSeconds: 5,
+      },
+    }),
+    buildSidebarNode({
+      id: "error-handler",
+      name: "Error Handler",
+      description: "Handle errors in workflow",
+      iconKey: "errorHandler",
+      type: "function",
+    }),
+    buildSidebarNode({
+      id: "set-variable",
+      name: "Set Variable",
+      description: "Store a value for downstream steps",
+      iconKey: "setVariable",
+      type: "function",
+      backendType: "SetVariableNode",
+      data: {
+        variables: [
+          {
+            name: "my_variable",
+            valueType: "string",
+            value: "sample",
+          },
+        ],
+        outputs: [{ id: "default" }],
+      },
+    }),
+  ],
+};