@flowuent-org/diagramming-core 1.0.5 → 1.0.7

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

@@ -1,370 +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';
+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';