orcheo-studio 0.21.1

package/src/features/workflow/components/layouts/use-sidebar-resize.ts

@@ -0,0 +1,164 @@
+import { useCallback, useEffect, useRef } from "react";
+
+interface UseSidebarResizeProps {
+  resizable: boolean;
+  isCollapsed: boolean;
+  sidebarWidth: number;
+  minWidth: number;
+  maxWidth: number;
+  position: "left" | "right";
+  onWidthChange?: (width: number) => void;
+  onLiveWidthChange?: (width: number) => void;
+  onResizeStart?: () => void;
+  onResizeEnd?: () => void;
+}
+
+export const useSidebarResize = ({
+  resizable,
+  isCollapsed,
+  sidebarWidth,
+  minWidth,
+  maxWidth,
+  position,
+  onWidthChange,
+  onLiveWidthChange,
+  onResizeStart,
+  onResizeEnd,
+}: UseSidebarResizeProps) => {
+  const resizingRef = useRef(false);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(sidebarWidth);
+  const liveWidthRef = useRef(sidebarWidth);
+  const frameRef = useRef<number | null>(null);
+  const detachDragListenersRef = useRef<() => void>(() => undefined);
+
+  useEffect(() => {
+    if (resizingRef.current) {
+      return;
+    }
+    startWidthRef.current = sidebarWidth;
+    liveWidthRef.current = sidebarWidth;
+  }, [sidebarWidth]);
+
+  const applyLiveWidth = useCallback(
+    (width: number) => {
+      liveWidthRef.current = width;
+      if (frameRef.current !== null) {
+        return;
+      }
+
+      frameRef.current = window.requestAnimationFrame(() => {
+        frameRef.current = null;
+        onLiveWidthChange?.(liveWidthRef.current);
+      });
+    },
+    [onLiveWidthChange],
+  );
+
+  const clearDragState = useCallback(() => {
+    document.body.style.removeProperty("cursor");
+    document.body.style.removeProperty("user-select");
+  }, []);
+
+  const finishResize = useCallback(
+    (commitWidth: boolean) => {
+      if (!resizingRef.current) {
+        return;
+      }
+
+      resizingRef.current = false;
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+        onLiveWidthChange?.(liveWidthRef.current);
+      }
+      detachDragListenersRef.current();
+      clearDragState();
+      if (commitWidth) {
+        onWidthChange?.(liveWidthRef.current);
+      }
+      onResizeEnd?.();
+    },
+    [clearDragState, onLiveWidthChange, onResizeEnd, onWidthChange],
+  );
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!resizingRef.current) return;
+      if ((e.buttons & 1) !== 1) {
+        finishResize(true);
+        return;
+      }
+
+      const delta =
+        position === "left"
+          ? e.clientX - startXRef.current
+          : startXRef.current - e.clientX;
+      let newWidth = startWidthRef.current + delta;
+      newWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
+
+      if (newWidth === liveWidthRef.current) {
+        return;
+      }
+
+      applyLiveWidth(newWidth);
+    },
+    [applyLiveWidth, finishResize, maxWidth, minWidth, position],
+  );
+
+  const handleMouseUp = useCallback(() => {
+    finishResize(true);
+  }, [finishResize]);
+
+  const detachDragListeners = useCallback(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+    window.removeEventListener("blur", handleMouseUp);
+  }, [handleMouseMove, handleMouseUp]);
+
+  useEffect(() => {
+    detachDragListenersRef.current = detachDragListeners;
+  }, [detachDragListeners]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!resizable || isCollapsed || e.button !== 0) return;
+
+      resizingRef.current = true;
+      startXRef.current = e.clientX;
+      startWidthRef.current = sidebarWidth;
+      liveWidthRef.current = sidebarWidth;
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      window.addEventListener("blur", handleMouseUp);
+      onResizeStart?.();
+      e.preventDefault();
+    },
+    [
+      handleMouseMove,
+      handleMouseUp,
+      isCollapsed,
+      onResizeStart,
+      resizable,
+      sidebarWidth,
+    ],
+  );
+
+  useEffect(() => {
+    return () => {
+      detachDragListenersRef.current();
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current);
+      }
+      clearDragState();
+    };
+  }, [clearDragState]);
+
+  return { handleMouseDown };
+};

package/src/features/workflow/components/layouts/workflow-page-layout.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export interface WorkflowPageLayoutProps {
+  /**
+   * Header content (e.g., navigation, title, actions)
+   */
+  header?: React.ReactNode;
+
+  /**
+   * Main content area
+   */
+  children: React.ReactNode;
+
+  /**
+   * Additional CSS classes for the container
+   */
+  className?: string;
+
+  /**
+   * Additional CSS classes for the header
+   */
+  headerClassName?: string;
+
+  /**
+   * Additional CSS classes for the main content
+   */
+  mainClassName?: string;
+}
+
+/**
+ * WorkflowPageLayout - A reusable page layout component for workflow pages.
+ *
+ * This component provides:
+ * - Consistent full-height layout
+ * - Optional header area
+ * - Main content area that fills remaining space
+ * - Proper overflow handling
+ */
+export default function WorkflowPageLayout({
+  header,
+  children,
+  className,
+  headerClassName,
+  mainClassName,
+}: WorkflowPageLayoutProps) {
+  return (
+    <div
+      className={cn(
+        "h-screen w-full flex flex-col overflow-hidden bg-background",
+        className,
+      )}
+    >
+      {header && (
+        <header
+          className={cn(
+            "flex-shrink-0 border-b border-border bg-card",
+            headerClassName,
+          )}
+        >
+          {header}
+        </header>
+      )}
+      <main className={cn("flex-1 overflow-hidden min-h-0", mainClassName)}>
+        {children}
+      </main>
+    </div>
+  );
+}

package/src/features/workflow/components/panels/json-object-field.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useMemo, useState } from "react";
+import type { FieldProps } from "@rjsf/utils";
+
+import { Label } from "@/design-system/ui/label";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
+import { Textarea } from "@/design-system/ui/textarea";
+import { HelpCircle } from "lucide-react";
+
+const formatJson = (value: unknown): string => {
+  if (value === undefined || value === null) {
+    return "{}";
+  }
+  try {
+    return JSON.stringify(value, null, 2) ?? "{}";
+  } catch {
+    return "{}";
+  }
+};
+
+const parseJsonObject = (
+  value: string,
+): { value: Record<string, unknown> | undefined; error: string | null } => {
+  if (!value.trim()) {
+    return { value: {}, error: null };
+  }
+
+  try {
+    const parsed = JSON.parse(value) as unknown;
+    if (
+      typeof parsed !== "object" ||
+      parsed === null ||
+      Array.isArray(parsed)
+    ) {
+      return {
+        value: undefined,
+        error: "Value must be a JSON object.",
+      };
+    }
+    return { value: parsed as Record<string, unknown>, error: null };
+  } catch {
+    return { value: undefined, error: "Value must be valid JSON." };
+  }
+};
+
+function JsonObjectField({
+  idSchema,
+  name,
+  schema,
+  formData,
+  required,
+  disabled,
+  readonly,
+  autofocus,
+  onChange,
+  onBlur,
+  onFocus,
+  rawErrors,
+}: FieldProps<Record<string, unknown>>) {
+  const [text, setText] = useState(() => formatJson(formData));
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const label = schema.title ?? name;
+  const description = schema.description;
+  const errors = useMemo(
+    () => [...(rawErrors ?? []), ...(localError ? [localError] : [])],
+    [localError, rawErrors],
+  );
+
+  useEffect(() => {
+    setText(formatJson(formData));
+    setLocalError(null);
+  }, [formData]);
+
+  const handleChange = (nextValue: string) => {
+    setText(nextValue);
+    const parsed = parseJsonObject(nextValue);
+    setLocalError(parsed.error);
+    if (parsed.value !== undefined) {
+      onChange(parsed.value);
+    }
+  };
+
+  return (
+    <div className="grid gap-2 mb-4">
+      <div className="flex items-center gap-1.5">
+        <Label htmlFor={idSchema.$id}>
+          {label}
+          {required && <span className="ml-1 text-destructive">*</span>}
+        </Label>
+        {description && (
+          <TooltipProvider delayDuration={300}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  aria-label={`${label} help`}
+                  className="inline-flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                >
+                  <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>
+      <Textarea
+        id={idSchema.$id}
+        value={text}
+        onChange={(event) => handleChange(event.target.value)}
+        onBlur={() => onBlur(idSchema.$id, formData)}
+        onFocus={() => onFocus(idSchema.$id, formData)}
+        autoFocus={autofocus}
+        disabled={disabled}
+        readOnly={readonly}
+        spellCheck={false}
+        className="min-h-40 font-mono text-xs"
+        aria-invalid={errors.length > 0}
+      />
+      {errors.length > 0 && (
+        <div className="space-y-1 text-xs text-destructive">
+          {errors.map((error) => (
+            <p key={error}>{error}</p>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { JsonObjectField };

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

@@ -0,0 +1,21 @@
+/**
+ * Aggregates the basic widget sets to keep the theme entry tidy.
+ */
+
+import { RegistryWidgetsType } from "@rjsf/utils";
+import { primitiveWidgets } from "./rjsf-input-widgets";
+import { textWidgets } from "./rjsf-text-widgets";
+
+export const basicWidgets = {
+  ...textWidgets,
+  ...primitiveWidgets,
+} satisfies Pick<
+  RegistryWidgetsType,
+  | "TextWidget"
+  | "TextareaWidget"
+  | "NumberWidget"
+  | "CheckboxWidget"
+  | "SelectWidget"
+>;
+
+export { primitiveWidgets, textWidgets };

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

@@ -0,0 +1,105 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * Primitive input widgets (number, checkbox, select).
+ */
+
+import React from "react";
+import { RegistryWidgetsType, WidgetProps } from "@rjsf/utils";
+import { Input } from "@/design-system/ui/input";
+import { Label } from "@/design-system/ui/label";
+import { Switch } from "@/design-system/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/design-system/ui/select";
+
+function NumberWidget(props: WidgetProps) {
+  const {
+    id,
+    value,
+    onChange,
+    required,
+    disabled,
+    readonly,
+    placeholder,
+    schema,
+  } = props;
+
+  return (
+    <Input
+      id={id}
+      type="number"
+      value={value ?? ""}
+      onChange={(e) => {
+        const val = e.target.value;
+        onChange(val === "" ? undefined : Number(val));
+      }}
+      required={required}
+      disabled={disabled}
+      readOnly={readonly}
+      placeholder={placeholder}
+      min={schema.minimum}
+      max={schema.maximum}
+      step={schema.multipleOf || (schema.type === "integer" ? 1 : "any")}
+    />
+  );
+}
+
+function CheckboxWidget(props: WidgetProps) {
+  const { id, value, onChange, label, disabled, readonly } = props;
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch
+        id={id}
+        checked={Boolean(value)}
+        onCheckedChange={onChange}
+        disabled={disabled || readonly}
+      />
+      <Label htmlFor={id}>{label}</Label>
+    </div>
+  );
+}
+
+function SelectWidget(props: WidgetProps) {
+  const { id, value, onChange, options, disabled, readonly, placeholder } =
+    props;
+  const { enumOptions } = options;
+
+  return (
+    <Select
+      value={value ? String(value) : undefined}
+      onValueChange={onChange}
+      disabled={disabled || readonly}
+    >
+      <SelectTrigger id={id}>
+        <SelectValue placeholder={placeholder || "Select an option"} />
+      </SelectTrigger>
+      <SelectContent>
+        {(enumOptions as Array<{ value: string; label: string }>)?.map(
+          (option) => (
+            <SelectItem key={option.value} value={String(option.value)}>
+              {option.label}
+            </SelectItem>
+          ),
+        )}
+      </SelectContent>
+    </Select>
+  );
+}
+
+type PrimitiveWidgetMap = Pick<
+  RegistryWidgetsType,
+  "NumberWidget" | "CheckboxWidget" | "SelectWidget"
+>;
+
+export const primitiveWidgets: PrimitiveWidgetMap = {
+  NumberWidget,
+  CheckboxWidget,
+  SelectWidget,
+};
+
+export { NumberWidget, CheckboxWidget, SelectWidget };

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

@@ -0,0 +1,147 @@
+/* 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 { HelpCircle, Plus, X } 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"
+                    aria-label={`${label} help`}
+                    className="inline-flex items-center justify-center rounded-full h-4 w-4 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                  >
+                    <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 };