@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,370 @@
+import { memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ExpressionInput from '../../atoms/ExpressionInput';
+import { useDiagram } from '../../contexts/DiagramProvider';
+import { FunctionSignature } from '../../types/FunctionSignature';
+import { RiArrowDownSLine } from 'react-icons/ri';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Stack from '@mui/material/Stack';
+import { Box, Divider, IconButton } from '@mui/material';
+import { useDeleteFunction } from '../../contexts/DiagramProvider';
+import DeleteIcon from '@mui/icons-material/Delete';
+import DialogContentText from '@mui/material/DialogContentText';
+import {
+  CallFormData,
+  CallFormProps,
+  CustomFunctionSelectProps,
+  FunctionArgument,
+  FunctionReturnValue,
+} from '../../types/function-execution';
+import { Expression } from '../../types/ndoe-form-types';
+import { useFormValidation } from '../../hooks/useFormValidation';
+import ValidationError from '../../atoms/ValidationError';
+
+// Utility function to handle function execution and return value
+const executeFunctionAndGetReturnValue = (
+  functionId: string,
+  returnValueName: string,
+  args: FunctionArgument[],
+  availableFunctions: FunctionSignature[] | undefined,
+): FunctionReturnValue => {
+  if (!functionId || !returnValueName || !args || !args.every(arg => arg.value !== '')) {
+    return {};
+  }
+
+  const selectedFunction = availableFunctions?.find(f => f.id === functionId);
+  if (!selectedFunction) {
+    return {};
+  }
+
+  try {
+    const argNames = selectedFunction.args.map(arg => arg.name);
+    const argValues = args.map(arg => {
+      if (typeof arg.value === 'string') {
+        try {
+          return JSON.parse(arg.value);
+        } catch {
+          return arg.value;
+        }
+      }
+      // If it's an Expression object, convert it to a string representation
+      return String(arg.value);
+    });
+    // eslint-disable-next-line no-new-func
+    const fn = new Function(...argNames, selectedFunction.code);
+    const result = fn(...argValues);
+    return { [returnValueName]: result };
+  } catch (err) {
+    return { [returnValueName]: 'Error: ' + (err instanceof Error ? err.message : String(err)) };
+  }
+};
+
+const CustomFunctionSelect = memo(({
+  options,
+  value,
+  onChange,
+}: CustomFunctionSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteFuncId, setDeleteFuncId] = useState<string | null>(null);
+  const deleteFunction = useDeleteFunction();
+  const { t } = useTranslation();
+
+  const handleClickOpen = useCallback(() => {
+    setOpen(true);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const handleSelectFunction = useCallback(
+    (func: FunctionSignature) => {
+      onChange(func.id);
+      handleClose();
+    },
+    [onChange, handleClose],
+  );
+
+  const handleDelete = useCallback((id: string) => {
+    setDeleteFuncId(id);
+    setDeleteDialogOpen(true);
+  }, []);
+
+  const handleConfirmDelete = useCallback(() => {
+    if (deleteFuncId) {
+      deleteFunction(deleteFuncId);
+    }
+    setDeleteDialogOpen(false);
+    setDeleteFuncId(null);
+  }, [deleteFuncId, deleteFunction]);
+
+  const handleCloseDeleteDialog = useCallback(() => {
+    setDeleteDialogOpen(false);
+  }, []);
+
+  const handleDeleteClick = useCallback((e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    handleDelete(id);
+  }, [handleDelete]);
+
+  return (
+    <>
+      <Button
+        onClick={handleClickOpen}
+        variant="outlined"
+        endIcon={<RiArrowDownSLine />}
+        fullWidth
+        sx={{
+          backgroundColor: '#232323',
+          color: '#FFFFFF',
+          border: '1px solid #8E8E93',
+          '&:hover': { border: '1px solid #000000' },
+        }}
+      >
+        {value !== null
+          ? options.find((func) => func.id === value)?.name ||
+          t('callForm.selectFunction')
+          : t('callForm.selectFunction')}
+      </Button>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        fullWidth
+        maxWidth="sm"
+        sx={{
+          '& .MuiDialog-paper': {
+            backgroundColor: '#232323',
+            color: '#FFFFFF',
+          },
+        }}
+      >
+        <DialogTitle>
+          {t('callForm.selectFunction')}
+        </DialogTitle>
+        <DialogContent>
+          <MenuList>
+            {options.map((func) => (
+              <MenuItem
+                key={func.id}
+                onClick={() => handleSelectFunction(func)}
+              >
+                <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                  <ListItemText sx={{ flex: 1 }}>
+                    {`${func.name}(${func.args.map(a => a.name).join(', ')})`}
+                  </ListItemText>
+                  <IconButton
+                    size="small"
+                    onClick={(e) => handleDeleteClick(e, func.id)}
+                    sx={{ color: '#fff' }}
+                  >
+                    <DeleteIcon fontSize="small" />
+                  </IconButton>
+                </Box>
+              </MenuItem>
+            ))}
+          </MenuList>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="secondary" sx={{ color: '#fff' }}>{t('button.cancel')}</Button>
+        </DialogActions>
+      </Dialog>
+      <Dialog
+        open={deleteDialogOpen}
+        onClose={handleCloseDeleteDialog}
+        maxWidth="xs"
+        PaperProps={{ style: { background: '#232323', color: '#fff' } }}
+      >
+        <DialogTitle>Delete Function</DialogTitle>
+        <DialogContent>
+          <DialogContentText sx={{ color: '#fff' }}>
+            Are you sure you want to delete this function?
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseDeleteDialog} color="secondary" sx={{ color: '#fff' }}>Cancel</Button>
+          <Button onClick={handleConfirmDelete} color="error" variant="contained">Delete</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+});
+
+export const CallForm = memo(({
+  formData,
+  handleMultipleInputChanges,
+}: CallFormProps) => {
+  const availableFunctions = useDiagram((state) => state.availableFunctions);
+  const { t } = useTranslation();
+
+  const {
+    validationState,
+    setFieldError,
+    setFieldTouched,
+    shouldShowFieldError,
+    getFieldError,
+    clearFieldError,
+  } = useFormValidation();
+
+  const handleFunctionChange = useCallback(
+    (funcId: string) => {
+      const selectedFunction = availableFunctions?.find((f) => f.id === funcId);
+      const args = selectedFunction?.args || [];
+      handleMultipleInputChanges({
+        returnValueName: '',
+        functionId: funcId,
+        code: selectedFunction?.code || '',
+        functionName: selectedFunction?.name || '',
+        args: args.map((arg) => ({
+          name: typeof arg === 'string' ? arg : arg.name,
+          value: '' as string | Expression,
+          dataType: 'String'
+        })),
+      });
+    },
+    [availableFunctions, handleMultipleInputChanges],
+  );
+
+  const handleArgChange = useCallback(
+    (index: number, value: string | Expression) => {
+      const updatedArgs = [...(formData.args || [])];
+      updatedArgs[index] = { ...updatedArgs[index], value };
+      handleMultipleInputChanges({
+        args: updatedArgs,
+      });
+    },
+    [formData.args, handleMultipleInputChanges],
+  );
+
+  // Find the selected function to get argument types
+  const selectedFunction = availableFunctions?.find((f) => f.id === formData.functionId);
+
+  return (
+    <Stack spacing={1}>
+      <Stack spacing={3} direction={'column'} sx={{ width: '100%' }}>
+        {availableFunctions && (
+          <CustomFunctionSelect
+            options={availableFunctions}
+            value={formData.functionId || null}
+            onChange={(funcId: string) => {
+              handleFunctionChange(funcId);
+            }}
+          />
+        )}
+        {getFieldError('functionId') && shouldShowFieldError('functionId') && (
+          <ValidationError
+            error={getFieldError('functionId')}
+            show={true}
+          />
+        )}
+      </Stack>
+      <Divider variant={'inset'} />
+      {formData.functionId && (
+        <div>
+          {formData.args?.map((arg, index) => (
+            // Find the type for this argument from the selected function
+            (() => {
+              const argType = selectedFunction?.args?.find(a => a.name === arg.name)?.type || '';
+              return (
+                <Stack
+                  spacing={1}
+                  direction={'row'}
+                  sx={{ alignItems: 'center', mb: 2 }}
+                  key={arg.name}
+                >
+                  <Typography
+                    variant="body1"
+                    sx={{ width: '80px', fontSize: '12px', color: '#FFFFFF', fontWeight: 'bold' }}
+                  >
+                    {arg.name}:
+                  </Typography>
+                  <ExpressionInput
+                    label=""
+                    value={arg.value as string}
+                    onChange={(newValue) => {
+                      handleArgChange(index, newValue);
+                    }}
+                    showDataTypeDropdown={true}
+                    dataType={arg.dataType || 'String'}
+                    onDataTypeChange={(dataType) => {
+                      const updatedArgs = [...(formData.args || [])];
+                      updatedArgs[index] = { ...updatedArgs[index], dataType };
+                      handleMultipleInputChanges({
+                        args: updatedArgs,
+                      });
+                    }}
+                    onValidationChange={(isValid, errors) => {
+                      // Handle validation from ExpressionInput
+                      if (!isValid && errors.length > 0) {
+                        setFieldError(`args[${index}].value`, errors[0]);
+                      } else {
+                        clearFieldError(`args[${index}].value`);
+                      }
+                    }}
+                  />
+                  {getFieldError(`args[${index}].value`) && (
+                    <ValidationError
+                      error={getFieldError(`args[${index}].value`)}
+                      show={true}
+                    />
+                  )}
+                </Stack>
+              );
+            })()
+          ))}
+        </div>
+      )}
+      <Divider variant={'inset'} />
+      {formData.functionId && (
+        <Box>
+          <label style={{ fontSize: '12px', color: '#FFFFFF', fontWeight: 'bold' }}>
+            {t('callForm.returnValueName')}
+          </label>
+          <ExpressionInput
+            label=""
+            value={formData.returnValueName as string}
+            onChange={(newValue) => {
+              handleMultipleInputChanges({
+                returnValueName: newValue,
+              });
+            }}
+            showDataTypeDropdown={true}
+            dataType={formData.returnValueDataType || 'String'}
+            onDataTypeChange={(dataType) => {
+              handleMultipleInputChanges({
+                returnValueDataType: dataType,
+              });
+            }}
+            onValidationChange={(isValid, errors) => {
+              // Handle validation from ExpressionInput
+              if (!isValid && errors.length > 0) {
+                setFieldError('returnValueName', errors[0]);
+              } else {
+                clearFieldError('returnValueName');
+              }
+            }}
+          />
+          {getFieldError('returnValueName') && (
+            <ValidationError
+              error={getFieldError('returnValueName')}
+              show={true}
+            />
+          )}
+        </Box>
+      )}
+    </Stack>
+  );
+});
+
+// Add display names for memoized components
+CustomFunctionSelect.displayName = 'CustomFunctionSelect';
+CallForm.displayName = 'CallForm';

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

@@ -0,0 +1,313 @@
+import { useEffect, useState, useCallback } 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 ForLoopNodeFormProps {
+  formData: {
+    init: Expression;
+    condition: Expression;
+    update: Expression;
+    initDataType?: string;
+    conditionDataType?: string;
+    updateDataType?: string;
+    childNodesExpanded?: boolean;
+  };
+  handleInputChange: (field: string, value: Expression | boolean) => void;
+}
+
+export const ForLoopNodeForm = ({
+  formData,
+  handleInputChange,
+}: ForLoopNodeFormProps) => {
+  const { t } = useTranslation();
+  const [tempInit, setTempInit] = useState<Expression>(formData.init || '');
+  const [tempCondition, setTempCondition] = useState<Expression>(formData.condition || '');
+  const [tempUpdate, setTempUpdate] = useState<Expression>(formData.update || '');
+  const [conditionsExpanded, setConditionsExpanded] = useState(true);
+  const [childNodesExpanded, setChildNodesExpanded] = useState(formData.childNodesExpanded ?? true);
+
+  const {
+    validateForLoopNodeForm,
+    setFieldTouched,
+    shouldShowFieldError,
+    getFieldError,
+    clearFieldError,
+    setFieldError,
+    validationState,
+  } = useFormValidation();
+
+  // Keep local state in sync with formData if formData changes
+  useEffect(() => {
+    setTempInit(formData.init || '');
+    setTempCondition(formData.condition || '');
+    setTempUpdate(formData.update || '');
+    setChildNodesExpanded(formData.childNodesExpanded ?? true);
+  }, [formData.init, formData.condition, formData.update, formData.childNodesExpanded]);
+
+  // Validate form when data changes, but only after user interaction
+  useEffect(() => {
+    // Only validate if at least one field has been touched by the user
+    const hasUserInteraction = Object.keys(validationState.touched).some(key =>
+      ['init', 'condition', 'update'].includes(key)
+    );
+
+    if (hasUserInteraction) {
+      // Add a small delay to give users time to type before showing validation errors
+      const timeoutId = setTimeout(() => {
+        validateForLoopNodeForm({
+          init: tempInit,
+          condition: tempCondition,
+          update: tempUpdate,
+          initDataType: formData.initDataType,
+          conditionDataType: formData.conditionDataType,
+          updateDataType: formData.updateDataType,
+        });
+      }, 500); // 500ms delay
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [tempInit, tempCondition, tempUpdate, formData.initDataType, formData.conditionDataType, formData.updateDataType, validateForLoopNodeForm, validationState.touched]);
+
+  const handleInitChange = useCallback((val: Expression) => {
+    // Mark the field as touched when user starts typing
+    setFieldTouched('init', true);
+
+    // Clear error when user starts typing
+    if (getFieldError('init')) {
+      clearFieldError('init');
+    }
+
+    setTempInit(val);
+    handleInputChange('init', val);
+  }, [handleInputChange, setFieldTouched, getFieldError, clearFieldError]);
+
+  const handleConditionChange = useCallback((val: Expression) => {
+    // Mark the field as touched when user starts typing
+    setFieldTouched('condition', true);
+
+    // Clear error when user starts typing
+    if (getFieldError('condition')) {
+      clearFieldError('condition');
+    }
+
+    setTempCondition(val);
+    handleInputChange('condition', val);
+  }, [handleInputChange, setFieldTouched, getFieldError, clearFieldError]);
+
+  const handleUpdateChange = useCallback((val: Expression) => {
+    // Mark the field as touched when user starts typing
+    setFieldTouched('update', true);
+
+    // Clear error when user starts typing
+    if (getFieldError('update')) {
+      clearFieldError('update');
+    }
+
+    setTempUpdate(val);
+    handleInputChange('update', val);
+  }, [handleInputChange, setFieldTouched, getFieldError, clearFieldError]);
+
+  // Handle field blur for validation
+  const handleFieldBlur = (fieldName: string) => {
+    setFieldTouched(fieldName, true);
+  };
+
+  // Toggle conditions section expansion
+  const toggleConditionsExpansion = () => {
+    setConditionsExpanded(!conditionsExpanded);
+  };
+
+  // Toggle child nodes section expansion
+  const toggleChildNodesExpansion = () => {
+    const newExpandedState = !childNodesExpanded;
+    setChildNodesExpanded(newExpandedState);
+    handleInputChange('childNodesExpanded', newExpandedState);
+  };
+
+  return (
+    <div>
+      <Stack spacing={2}>
+        {/* Collapsible Conditions Section Header */}
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          onClick={toggleConditionsExpansion}
+          sx={{
+            cursor: 'pointer',
+            '&:hover': { bgcolor: 'action.hover' },
+            borderRadius: 2,
+            border: '1px solid #3a3a3a',
+            bgcolor: '#3a3a3a'
+          }}
+        >
+          <Typography variant="subtitle1" fontWeight="medium">
+            {t('forLoopNodeForm.conditions')}
+          </Typography>
+          <IconButton size="small" onClick={(e) => {
+            e.stopPropagation();
+            toggleConditionsExpansion();
+          }}>
+            {conditionsExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+          </IconButton>
+        </Box>
+
+        {/* Collapsible Conditions Content */}
+        <Collapse in={conditionsExpanded}>
+          <Stack spacing={2} sx={{ pl: 2 }}>
+            <Box>
+              <ExpressionInput
+                label={t('forLoopNodeForm.initialization')}
+                value={tempInit}
+                onChange={handleInitChange}
+                showDataTypeDropdown={true}
+                dataType={formData.initDataType || 'String'}
+                onDataTypeChange={(dataType) => {
+                  handleInputChange('initDataType', dataType);
+                  // Only re-validate if user has interacted with this field
+                  if (validationState.touched.init) {
+                    setTimeout(() => {
+                      validateForLoopNodeForm({
+                        ...formData,
+                        init: tempInit,
+                        condition: tempCondition,
+                        update: tempUpdate,
+                        initDataType: dataType,
+                      });
+                    }, 100);
+                  }
+                }}
+                onValidationChange={(isValid, errors) => {
+                  // Handle validation from ExpressionInput
+                  if (!isValid && errors.length > 0) {
+                    setFieldError('init', errors[0]);
+                  } else {
+                    clearFieldError('init');
+                  }
+                }}
+              />
+              <ValidationError
+                error={getFieldError('init')}
+                show={shouldShowFieldError('init')}
+              />
+            </Box>
+
+            <Box>
+              <ExpressionInput
+                label={t('forLoopNodeForm.condition')}
+                value={tempCondition}
+                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(() => {
+                      validateForLoopNodeForm({
+                        ...formData,
+                        init: tempInit,
+                        condition: tempCondition,
+                        update: tempUpdate,
+                        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>
+
+            <Box>
+              <ExpressionInput
+                label={t('forLoopNodeForm.update')}
+                value={tempUpdate}
+                onChange={handleUpdateChange}
+                showDataTypeDropdown={true}
+                dataType={formData.updateDataType || 'String'}
+                onDataTypeChange={(dataType) => {
+                  handleInputChange('updateDataType', dataType);
+                  // Only re-validate if user has interacted with this field
+                  if (validationState.touched.update) {
+                    setTimeout(() => {
+                      validateForLoopNodeForm({
+                        ...formData,
+                        init: tempInit,
+                        condition: tempCondition,
+                        update: tempUpdate,
+                        updateDataType: dataType,
+                      });
+                    }, 100);
+                  }
+                }}
+                onValidationChange={(isValid, errors) => {
+                  // Handle validation from ExpressionInput
+                  if (!isValid && errors.length > 0) {
+                    setFieldError('update', errors[0]);
+                  } else {
+                    clearFieldError('update');
+                  }
+                }}
+              />
+              <ValidationError
+                error={getFieldError('update')}
+                show={shouldShowFieldError('update')}
+              />
+            </Box>
+          </Stack>
+        </Collapse>
+
+        {/* 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('forLoopNodeForm.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('forLoopNodeForm.childNodesDescription')}
+            </Typography>
+          </Stack>
+        </Collapse>
+      </Stack>
+    </div>
+  );
+};