@flowuent-org/diagramming-core 1.3.10 → 1.4.0

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

@@ -1,370 +0,0 @@
-import { memo, useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import ExpressionInput from '../../atoms/ExpressionInput';
-import { useDiagram } from '@flowuent-labs/diagrams';
-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

@@ -1,313 +0,0 @@
-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>
-  );
-};