@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/templates/node-forms/LoopNode.tsx

@@ -0,0 +1,149 @@
+import { useCallback, useEffect, useState } from 'react';
+import ExpressionInput from '../../atoms/ExpressionInput';
+import { useTranslation } from 'react-i18next';
+import { Expression } from '../../types/ndoe-form-types';
+import { useFormValidation } from '../../hooks/useFormValidation';
+import ValidationError from '../../atoms/ValidationError';
+import { Box, Stack, Collapse, Typography, IconButton } from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+
+interface LoopNodeFormProps {
+  formData: {
+    condition: Expression;
+    conditionDataType?: string;
+    childNodesExpanded?: boolean;
+  };
+  handleInputChange: (field: string, value: Expression | boolean) => void;
+}
+
+export const LoopNodeForm = ({
+  formData,
+  handleInputChange,
+}: LoopNodeFormProps) => {
+  const { t } = useTranslation();
+  const [childNodesExpanded, setChildNodesExpanded] = useState(formData.childNodesExpanded ?? true);
+
+  const {
+    validateLoopNodeForm,
+    setFieldTouched,
+    shouldShowFieldError,
+    getFieldError,
+    clearFieldError,
+    setFieldError,
+    validationState,
+  } = useFormValidation();
+
+  // Keep local state in sync with formData if formData changes
+  useEffect(() => {
+    setChildNodesExpanded(formData.childNodesExpanded ?? true);
+  }, [formData.childNodesExpanded]);
+
+  // Validate form when data changes, but only after user interaction
+  useEffect(() => {
+    // Only validate if the field has been touched by the user
+    if (validationState.touched.condition) {
+      // Add a small delay to give users time to type before showing validation errors
+      const timeoutId = setTimeout(() => {
+        validateLoopNodeForm(formData);
+      }, 500); // 500ms delay
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [formData, validateLoopNodeForm, validationState.touched.condition]);
+
+  const handleConditionChange = useCallback((newValue: Expression) => {
+    // Mark the field as touched when user starts typing
+    setFieldTouched('condition', true);
+
+    // Clear error when user starts typing
+    if (getFieldError('condition')) {
+      clearFieldError('condition');
+    }
+
+    handleInputChange('condition', newValue);
+  }, [handleInputChange, setFieldTouched, getFieldError, clearFieldError]);
+
+  // Handle field blur for validation
+  const handleFieldBlur = (fieldName: string) => {
+    setFieldTouched(fieldName, true);
+  };
+
+  // Toggle child nodes section expansion
+  const toggleChildNodesExpansion = () => {
+    const newExpandedState = !childNodesExpanded;
+    setChildNodesExpanded(newExpandedState);
+    handleInputChange('childNodesExpanded', newExpandedState);
+  };
+
+  return (
+    <div>
+      <Stack spacing={2}>
+        <Box>
+          <ExpressionInput
+            label={t('loopNodeForm.condition')}
+            value={formData.condition}
+            onChange={handleConditionChange}
+            showDataTypeDropdown={true}
+            dataType={formData.conditionDataType || 'String'}
+            onDataTypeChange={(dataType) => {
+              handleInputChange('conditionDataType', dataType);
+              // Only re-validate if user has interacted with this field
+              if (validationState.touched.condition) {
+                setTimeout(() => {
+                  validateLoopNodeForm({ ...formData, conditionDataType: dataType });
+                }, 100);
+              }
+            }}
+            onValidationChange={(isValid, errors) => {
+              // Handle validation from ExpressionInput
+              if (!isValid && errors.length > 0) {
+                setFieldError('condition', errors[0]);
+              } else {
+                clearFieldError('condition');
+              }
+            }}
+          />
+          <ValidationError
+            error={getFieldError('condition')}
+            show={shouldShowFieldError('condition')}
+          />
+        </Box>
+
+        {/* Collapsible Child Nodes Section Header */}
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          onClick={toggleChildNodesExpansion}
+          sx={{
+            cursor: 'pointer',
+            '&:hover': { bgcolor: 'action.hover' },
+            borderRadius: 2,
+            border: '1px solid #3a3a3a',
+            bgcolor: '#3a3a3a'
+          }}
+        >
+          <Typography variant="subtitle1" fontWeight="medium">
+            {t('loopNodeForm.childNodes')}
+          </Typography>
+          <IconButton size="small" onClick={(e) => {
+            e.stopPropagation();
+            toggleChildNodesExpansion();
+          }}>
+            {childNodesExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+          </IconButton>
+        </Box>
+
+        {/* Collapsible Child Nodes Content */}
+        <Collapse in={childNodesExpanded}>
+          <Stack spacing={2} sx={{ pl: 2 }}>
+            <Typography variant="body2" color="text.secondary">
+              {t('loopNodeForm.childNodesDescription')}
+            </Typography>
+          </Stack>
+        </Collapse>
+      </Stack>
+    </div>
+  );
+};

package/packages/diagrams/src/lib/templates/node-forms/NodeForm.tsx

@@ -0,0 +1,383 @@
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+  Box,
+  Collapse,
+  Typography,
+  IconButton,
+} from '@mui/material';
+import React, { useState, useEffect } from 'react';
+import { produce } from 'immer';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import FunctionForm from './FunctionForm';
+import { IfNodeForm } from './IfNodeForm';
+import { LetNodeForm } from './LetNodeForm';
+import { SetNodeForm } from './SetNodeForm';
+import { ReturnNodeForm } from './ReturnNodeForm';
+import { LoopNodeForm } from './LoopNode';
+import { CallForm } from './CallForm';
+import { SwitchNodeForm } from './SwitchNodeForm';
+import { useTranslation } from 'react-i18next';
+import { ForLoopNodeForm } from './ForLoopNode';
+import ApiForm from './ApiForm';
+import GraphQLForm from './GraphQLForm';
+
+interface NodeFormProps {
+  data: any;
+  setNodeData: (data: any) => void;
+}
+
+export const NodeForm: React.FC<NodeFormProps> = ({
+  data,
+  setNodeData,
+}) => {
+  const { t } = useTranslation();
+  const formData = data.formData || {}; // Default to an empty object if formData is undefined
+  const [childNodesExpanded, setChildNodesExpanded] = useState(formData.childNodesExpanded ?? true);
+
+  // Keep local state in sync with formData if formData changes
+  useEffect(() => {
+    setChildNodesExpanded(formData.childNodesExpanded ?? true);
+  }, [formData.childNodesExpanded]);
+
+  // Handle input changes, storing them in `formData`
+  const handleInputChange = (key: string, value: any) => {
+    setNodeData(
+      produce(data, (draft: any) => {
+        draft.formData = draft.formData || {};
+        draft.formData[key] = value;
+      }),
+    );
+  };
+
+  // Toggle child nodes section expansion
+  const toggleChildNodesExpansion = () => {
+    const newExpandedState = !childNodesExpanded;
+    setChildNodesExpanded(newExpandedState);
+    handleInputChange('childNodesExpanded', newExpandedState);
+  };
+  const handleMultipleInputChanges = (changes: { [key: string]: any }) => {
+    setNodeData(
+      produce(data, (draft: any) => {
+        draft.formData = draft.formData || {};
+        Object.keys(changes).forEach((key) => {
+          draft.formData[key] = changes[key];
+        });
+      }),
+    );
+  };
+  const renderStack = (children: React.ReactNode) => (
+    <Stack spacing={2} sx={{ py: 2 }}>
+      {children}
+    </Stack>
+  );
+
+  switch (data.type) {
+    case 'call':
+      return renderStack(
+        <CallForm
+          formData={formData}
+          handleMultipleInputChanges={handleMultipleInputChanges}
+        />,
+      );
+    case 'function':
+      return renderStack(
+        <FunctionForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+          handleMultipleInputChanges={handleMultipleInputChanges}
+        />,
+      );
+    case 'branch':
+      return renderStack(
+        <IfNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+
+    case 'let':
+      return renderStack(
+        <LetNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+    case 'try':
+      return renderStack(
+        <>
+          {/* Collapsible Child Nodes Section Header */}
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            onClick={toggleChildNodesExpansion}
+            sx={{
+              cursor: 'pointer',
+              '&:hover': { bgcolor: 'action.hover' },
+              borderRadius: 2,
+              border: '1px solid #3a3a3a',
+              bgcolor: '#3a3a3a'
+            }}
+          >
+            <Typography variant="subtitle1" fontWeight="medium">
+              {t('nodeForm.childNodes')}
+            </Typography>
+            <IconButton size="small" onClick={(e) => {
+              e.stopPropagation();
+              toggleChildNodesExpansion();
+            }}>
+              {childNodesExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+            </IconButton>
+          </Box>
+
+          {/* Collapsible Child Nodes Content */}
+          <Collapse in={childNodesExpanded}>
+            <Stack spacing={2} sx={{ pl: 2 }}>
+              <Typography variant="body2" color="text.secondary">
+                {t('nodeForm.childNodesDescription')}
+              </Typography>
+            </Stack>
+          </Collapse>
+        </>,
+      );
+    case 'catch':
+      return renderStack(
+        <>
+          {/* Collapsible Child Nodes Section Header */}
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            onClick={toggleChildNodesExpansion}
+            sx={{
+              cursor: 'pointer',
+              '&:hover': { bgcolor: 'action.hover' },
+              borderRadius: 2,
+              border: '1px solid #3a3a3a',
+              bgcolor: '#3a3a3a'
+            }}
+          >
+            <Typography variant="subtitle1" fontWeight="medium">
+              {t('nodeForm.childNodes')}
+            </Typography>
+            <IconButton size="small" onClick={(e) => {
+              e.stopPropagation();
+              toggleChildNodesExpansion();
+            }}>
+              {childNodesExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+            </IconButton>
+          </Box>
+
+          {/* Collapsible Child Nodes Content */}
+          <Collapse in={childNodesExpanded}>
+            <Stack spacing={2} sx={{ pl: 2 }}>
+              <Typography variant="body2" color="text.secondary">
+                {t('nodeForm.childNodesDescription')}
+              </Typography>
+            </Stack>
+          </Collapse>
+        </>,
+      );
+    case 'loop':
+      return renderStack(
+        <LoopNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+    case 'forLoop':
+      return renderStack(
+        <ForLoopNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+    case 'set':
+      return renderStack(
+        <SetNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+    case 'return':
+      return renderStack(
+        <ReturnNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+
+    case 'parallel':
+      return renderStack(
+        <>
+          <TextField
+            label={t('nodeForm.executionCount')}
+            type="number"
+            value={formData.executionCount ?? ''}
+            onChange={(e) =>
+              handleInputChange('executionCount', Number(e.target.value))
+            }
+            size="small"
+          />
+          <TextField
+            label={t('nodeForm.maxThreads')}
+            type="number"
+            value={formData.maxThreads ?? ''}
+            onChange={(e) =>
+              handleInputChange('maxThreads', Number(e.target.value))
+            }
+            size="small"
+          />
+          <TextField
+            label={t('nodeForm.timeout')}
+            type="number"
+            value={formData.timeout ?? ''}
+            onChange={(e) =>
+              handleInputChange('timeout', Number(e.target.value))
+            }
+            size="small"
+          />
+
+          {/* Collapsible Child Nodes Section Header */}
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            onClick={toggleChildNodesExpansion}
+            sx={{
+              cursor: 'pointer',
+              '&:hover': { bgcolor: 'action.hover' },
+              borderRadius: 2,
+              border: '1px solid #3a3a3a',
+              bgcolor: '#3a3a3a'
+            }}
+          >
+            <Typography variant="subtitle1" fontWeight="medium">
+              {t('nodeForm.childNodes')}
+            </Typography>
+            <IconButton size="small" onClick={(e) => {
+              e.stopPropagation();
+              toggleChildNodesExpansion();
+            }}>
+              {childNodesExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+            </IconButton>
+          </Box>
+
+          {/* Collapsible Child Nodes Content */}
+          <Collapse in={childNodesExpanded}>
+            <Stack spacing={2} sx={{ pl: 2 }}>
+              <Typography variant="body2" color="text.secondary">
+                {t('nodeForm.childNodesDescription')}
+              </Typography>
+            </Stack>
+          </Collapse>
+        </>,
+      );
+    case 'switch':
+      return renderStack(
+        <SwitchNodeForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+        />,
+      );
+
+    case 'group':
+      return renderStack(
+        <>
+          <TextField
+            label={t('nodeForm.groupName')}
+            value={formData.groupName || ''}
+            onChange={(e) => handleInputChange('groupName', e.target.value)}
+            size="small"
+          />
+          <TextField
+            label={t('nodeForm.groupSize')}
+            type="number"
+            value={formData.groupSize ?? ''}
+            onChange={(e) =>
+              handleInputChange('groupSize', Number(e.target.value))
+            }
+            size="small"
+          />
+          <TextField
+            label={t('nodeForm.description')}
+            value={formData.description || ''}
+            onChange={(e) => handleInputChange('description', e.target.value)}
+            size="small"
+          />
+
+          {/* Collapsible Child Nodes Section Header */}
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            onClick={toggleChildNodesExpansion}
+            sx={{
+              cursor: 'pointer',
+              '&:hover': { bgcolor: 'action.hover' },
+              borderRadius: 2,
+              border: '1px solid #3a3a3a',
+              bgcolor: '#3a3a3a'
+            }}
+          >
+            <Typography variant="subtitle1" fontWeight="medium">
+              {t('nodeForm.childNodes')}
+            </Typography>
+            <IconButton size="small" onClick={(e) => {
+              e.stopPropagation();
+              toggleChildNodesExpansion();
+            }}>
+              {childNodesExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+            </IconButton>
+          </Box>
+
+          {/* Collapsible Child Nodes Content */}
+          <Collapse in={childNodesExpanded}>
+            <Stack spacing={2} sx={{ pl: 2 }}>
+              <Typography variant="body2" color="text.secondary">
+                {t('nodeForm.childNodesDescription')}
+              </Typography>
+            </Stack>
+          </Collapse>
+        </>,
+      );
+    case 'emptyNode':
+      return (
+        <div>
+          {t('nodeForm.noData')}
+        </div>
+      );
+    case 'api':
+      return renderStack(
+        <ApiForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+          handleMultipleInputChanges={handleMultipleInputChanges}
+        />,
+      );
+    case 'graphql':
+      return renderStack(
+        <GraphQLForm
+          formData={formData}
+          handleInputChange={handleInputChange}
+          handleMultipleInputChanges={handleMultipleInputChanges}
+        />,
+      );
+    case 'rest':
+      return <div>{t('nodeForm.restApi')}</div>;
+    default:
+      return (
+        <div>
+          {t('nodeForm.unsupportedType', { type: data.type })}
+        </div>
+      );
+  }
+};
+
+export default NodeForm;

package/packages/diagrams/src/lib/templates/node-forms/ReturnNodeForm.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect } from 'react';
+import ExpressionInput from '../../atoms/ExpressionInput';
+import { useTranslation } from 'react-i18next';
+import { Expression } from '../../types/ndoe-form-types';
+import { useFormValidation } from '../../hooks/useFormValidation';
+import ValidationError from '../../atoms/ValidationError';
+import { Box } from '@mui/material';
+
+interface ReturnNodeFormData {
+  value: Expression;
+  dataType?: string;
+}
+
+interface ReturnNodeFormProps {
+  formData: ReturnNodeFormData;
+  handleInputChange: (field: keyof ReturnNodeFormData, value: Expression | string) => void;
+}
+
+export const ReturnNodeForm = ({
+  formData,
+  handleInputChange,
+}: ReturnNodeFormProps) => {
+  const { t } = useTranslation();
+
+  const {
+    validateReturnNodeForm,
+    setFieldTouched,
+    shouldShowFieldError,
+    getFieldError,
+    clearFieldError,
+  } = useFormValidation();
+
+  // Validate form when data changes
+  useEffect(() => {
+    // Add a small delay to give users time to type before showing validation errors
+    const timeoutId = setTimeout(() => {
+      validateReturnNodeForm(formData);
+
+      // Mark field as touched when validation runs to ensure errors are shown
+      if (formData.value) {
+        setFieldTouched('value', true);
+      }
+    }, 500); // 500ms delay
+
+    return () => clearTimeout(timeoutId);
+  }, [formData, validateReturnNodeForm, setFieldTouched]);
+
+  // Handle field blur for validation
+  const handleFieldBlur = (fieldName: string) => {
+    setFieldTouched(fieldName, true);
+  };
+
+  // Handle value change with validation
+  const handleValueChange = (newValue: Expression) => {
+    // Mark the field as touched when user starts typing
+    setFieldTouched('value', true);
+
+    // Clear error when user starts typing
+    if (getFieldError('value')) {
+      clearFieldError('value');
+    }
+
+    handleInputChange('value', newValue);
+  };
+
+  // Handle data type change
+  const handleDataTypeChange = (dataType: string) => {
+    handleInputChange('dataType', dataType);
+  };
+
+  return (
+    <div>
+      <Box>
+        <ExpressionInput
+          label={t('returnNodeForm.value')}
+          value={formData.value}
+          onChange={handleValueChange}
+          showDataTypeDropdown={true}
+          dataType={formData.dataType || 'String'}
+          onDataTypeChange={handleDataTypeChange}
+          onValidationChange={(isValid, errors) => {
+            // Clear old validation errors when new validation takes over
+            if (isValid) {
+              clearFieldError('value');
+            }
+          }}
+        />
+        {/* Commented out old validation error display as ExpressionInput now handles its own validation */}
+        {/* <ValidationError
+          error={getFieldError('value')}
+          show={shouldShowFieldError('value')}
+        /> */}
+      </Box>
+    </div>
+  );
+};