@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

@@ -1,149 +0,0 @@
-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

@@ -1,383 +0,0 @@
-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

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