@flowuent-org/diagramming-core 1.3.10 → 1.4.0

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

@@ -1,97 +0,0 @@
-import React, { useCallback, 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, Stack } from '@mui/material';
-
-interface IfNodeFormProps {
-  formData: {
-    condition: Expression;
-    conditionDataType?: string;
-  };
-  handleInputChange: (field: string, value: Expression) => void;
-}
-
-export const IfNodeForm: React.FC<IfNodeFormProps> = ({
-  formData,
-  handleInputChange,
-}: IfNodeFormProps) => {
-  const { t } = useTranslation();
-
-  const {
-    validateIfNodeForm,
-    setFieldTouched,
-    shouldShowFieldError,
-    getFieldError,
-    clearFieldError,
-    validationState,
-  } = useFormValidation();
-
-  // 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(() => {
-        validateIfNodeForm(formData);
-      }, 500); // 500ms delay
-
-      return () => clearTimeout(timeoutId);
-    }
-  }, [formData, validateIfNodeForm, 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);
-  };
-
-  return (
-    <div>
-      <Stack spacing={2}>
-        <Box>
-          <ExpressionInput
-            label={t('ifNodeForm.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(() => {
-                  validateIfNodeForm({ ...formData, conditionDataType: dataType });
-                }, 100);
-              }
-            }}
-            onValidationChange={(isValid, errors) => {
-              // Clear old validation errors when new validation takes over
-              if (isValid) {
-                clearFieldError('condition');
-              }
-            }}
-          />
-          {/* Commented out old validation error display as ExpressionInput now handles its own validation */}
-          {/* <ValidationError
-            error={getFieldError('condition')}
-            show={shouldShowFieldError('condition')}
-          /> */}
-        </Box>
-      </Stack>
-    </div>
-  );
-};

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

@@ -1,533 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  Button,
-  Divider,
-  Grid,
-  TextField,
-  Box,
-  IconButton,
-  FormControl,
-  FormLabel,
-  RadioGroup,
-  FormControlLabel,
-  Radio,
-  Typography,
-  Stack,
-  Card,
-  CardContent,
-} from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-import AddIcon from '@mui/icons-material/Add';
-import CodeIcon from '@mui/icons-material/Code';
-import ObjectIcon from '@mui/icons-material/DataObject';
-import ExpressionInput from '../../atoms/ExpressionInput';
-import { useTranslation } from 'react-i18next';
-import { Expression as ExpressionInputType } from '../../types/ndoe-form-types';
-import { ObjectDefinition, ObjectProperty, Expression } from '../../types/workflow-node-data-types';
-import { useFormValidation } from '../../hooks/useFormValidation';
-import ValidationError from '../../atoms/ValidationError';
-
-// Define the type for a single binding as a tuple of [name, value]
-type Binding = [string, Expression];
-
-// Define the structure of the formData prop
-interface LetNodeFormData {
-  mode: 'simple' | 'object' | 'code';
-  bindings: Binding[];
-  objectDefinition?: ObjectDefinition;
-  customCode?: string;
-  bindingsError?: string;
-}
-
-// Create a mapped type for the value parameter based on the field
-type LetNodeFormValues = {
-  [K in keyof LetNodeFormData]: LetNodeFormData[K];
-};
-
-// Define the type for the handleInputChange prop
-interface LetNodeFormProps {
-  formData: LetNodeFormData;
-  handleInputChange: <K extends keyof LetNodeFormData>(field: K, value: LetNodeFormValues[K]) => void;
-}
-
-export const LetNodeForm = ({
-  formData,
-  handleInputChange,
-}: LetNodeFormProps) => {
-  const { t } = useTranslation();
-
-  const {
-    validationState,
-    setFieldError,
-    setFieldTouched,
-    shouldShowFieldError,
-    getFieldError,
-    clearFieldError,
-  } = useFormValidation();
-
-  // Validate bindings when they change
-  useEffect(() => {
-    // Add a small delay to give users time to type before showing validation errors
-    const timeoutId = setTimeout(() => {
-      let bindingError: string | null = null;
-
-      if (!Array.isArray(formData.bindings)) {
-        bindingError = t('letNodeForm.validation.bindingArrayError');
-      } else if (formData.bindings.length === 0) {
-        bindingError = t('letNodeForm.validation.bindingRequiredError');
-      } else {
-        for (let i = 0; i < formData.bindings.length; i++) {
-          const [name, expression] = formData.bindings[i];
-
-          // Validate the binding name
-          if (!name || name.trim() === '') {
-            bindingError = t('letNodeForm.validation.bindingNameEmptyError', { index: i + 1 });
-            break;
-          }
-
-          if (!/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name)) {
-            bindingError = t('letNodeForm.validation.bindingNameInvalidError', { name, index: i + 1 });
-            break;
-          }
-
-          // Validate the binding expression
-          if (!expression || (typeof expression === 'string' && expression.trim() === '')) {
-            bindingError = t('letNodeForm.validation.bindingValueEmptyError', { index: i + 1 });
-            break;
-          }
-        }
-      }
-
-      setFieldError('bindings', bindingError);
-    }, 500); // 500ms delay
-
-    return () => clearTimeout(timeoutId);
-  }, [formData.bindings, setFieldError]);
-
-  // Only show general binding errors if at least one binding has been interacted with
-  const shouldShowGeneralBindingError = useCallback(() => {
-    if (!getFieldError('bindings')) return false;
-
-    // Check if any binding field has been touched
-    return Object.keys(validationState.touched).some(key => key.startsWith('binding_'));
-  }, [getFieldError, validationState.touched]);
-
-  const handleBindingChange = useCallback(
-    (index: number, type: 'name' | 'value', value: string | Expression) => {
-      const updatedBindings: Binding[] = [...formData.bindings];
-      const currentBinding: Binding = [...updatedBindings[index]];
-      updatedBindings[index] = type === 'name'
-        ? [value as string, currentBinding[1]]
-        : [currentBinding[0], value as Expression];
-      handleInputChange('bindings', updatedBindings);
-
-      // Clear binding error when user starts typing
-      if (getFieldError('bindings')) {
-        clearFieldError('bindings');
-      }
-    },
-    [formData.bindings, handleInputChange, getFieldError, clearFieldError]
-  );
-
-  const handleAddBinding = useCallback(() => {
-    const newBinding: Binding = ['', ''];
-    const updatedBindings: Binding[] = [...formData.bindings, newBinding];
-    handleInputChange('bindings', updatedBindings);
-  }, [formData.bindings, handleInputChange]);
-
-  const handleRemoveBinding = useCallback((index: number) => {
-    const updatedBindings: Binding[] = formData.bindings.filter((_, i) => i !== index);
-    handleInputChange('bindings', updatedBindings);
-  }, [formData.bindings, handleInputChange]);
-
-  const handleNameChange = useCallback((index: number, value: string) => {
-    // Mark the field as touched when user starts typing
-    const fieldKey = `binding_${index}_name`;
-    setFieldTouched(fieldKey, true);
-
-    // Clear any existing error when user starts typing
-    if (getFieldError('bindings')) {
-      clearFieldError('bindings');
-    }
-
-    handleBindingChange(index, 'name', value);
-  }, [handleBindingChange, setFieldTouched, getFieldError, clearFieldError]);
-
-  const handleValueChange = useCallback((index: number, value: Expression) => {
-    // Mark the field as touched when user starts typing
-    const fieldKey = `binding_${index}_value`;
-    setFieldTouched(fieldKey, true);
-
-    // Clear any existing error when user starts typing
-    if (getFieldError('bindings')) {
-      clearFieldError('bindings');
-    }
-
-    handleBindingChange(index, 'value', value);
-  }, [handleBindingChange, setFieldTouched, getFieldError, clearFieldError]);
-
-  const handleFieldBlur = useCallback((fieldName: string) => {
-    setFieldTouched(fieldName, true);
-  }, [setFieldTouched]);
-
-  const handleBindingFieldBlur = useCallback((index: number, type: 'name' | 'value') => {
-    const fieldKey = `binding_${index}_${type}`;
-    setFieldTouched(fieldKey, true);
-  }, [setFieldTouched]);
-
-  // Object creation handlers
-  const handleObjectPropertyChange = useCallback((index: number, field: 'key' | 'value', value: string | ExpressionInputType) => {
-    const updatedProperties = [...(formData.objectDefinition?.properties || [])];
-    updatedProperties[index] = {
-      ...updatedProperties[index],
-      [field]: value
-    };
-
-    handleInputChange('objectDefinition', {
-      ...formData.objectDefinition,
-      variableName: formData.objectDefinition?.variableName || '',
-      properties: updatedProperties
-    });
-  }, [formData.objectDefinition, handleInputChange]);
-
-  const handleAddObjectProperty = useCallback(() => {
-    const newProperty: ObjectProperty = { key: '', value: '' };
-    const updatedProperties = [...(formData.objectDefinition?.properties || []), newProperty];
-
-    handleInputChange('objectDefinition', {
-      ...formData.objectDefinition,
-      variableName: formData.objectDefinition?.variableName || '',
-      properties: updatedProperties
-    });
-  }, [formData.objectDefinition, handleInputChange]);
-
-  const handleRemoveObjectProperty = useCallback((index: number) => {
-    const updatedProperties = (formData.objectDefinition?.properties || []).filter((_, i) => i !== index);
-
-    handleInputChange('objectDefinition', {
-      ...formData.objectDefinition,
-      variableName: formData.objectDefinition?.variableName || '',
-      properties: updatedProperties
-    });
-  }, [formData.objectDefinition, handleInputChange]);
-
-  const handleVariableNameChange = useCallback((value: string) => {
-    handleInputChange('objectDefinition', {
-      ...formData.objectDefinition,
-      variableName: value,
-      properties: formData.objectDefinition?.properties || []
-    });
-  }, [formData.objectDefinition, handleInputChange]);
-
-  const handleCustomCodeChange = useCallback((value: string) => {
-    handleInputChange('customCode', value);
-  }, [handleInputChange]);
-
-  // Get field-specific error for individual binding fields
-  const getBindingFieldError = useCallback((index: number, type: 'name' | 'value') => {
-    const binding = formData.bindings[index];
-    if (!binding) return null;
-
-    // Only show errors if the field has been interacted with
-    const fieldKey = `binding_${index}_${type}`;
-    if (!validationState.touched[fieldKey]) {
-      return null;
-    }
-
-    if (type === 'name') {
-      // Replace old validateBindingName with inline validation
-      if (!binding[0] || binding[0].trim() === '') {
-        return t('letNodeForm.validation.bindingNameEmptyError', { index: index + 1 });
-      }
-      if (!/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(binding[0])) {
-        return t('letNodeForm.validation.bindingNameInvalidError', { name: binding[0], index: index + 1 });
-      }
-    } else {
-      // Replace old validateBindingValue with inline validation
-      if (!binding[1] || (typeof binding[1] === 'string' && binding[1].trim() === '')) {
-        return t('letNodeForm.validation.bindingValueEmptyError', { index: index + 1 });
-      }
-    }
-
-    return null;
-  }, [formData.bindings, validationState.touched]);
-
-  // Check if individual binding field should show error
-  const shouldShowBindingFieldError = useCallback((index: number, type: 'name' | 'value') => {
-    const error = getBindingFieldError(index, type);
-    return !!error;
-  }, [getBindingFieldError]);
-
-  return (
-    <Box sx={{ p: 2, backgroundColor: '#1e1e1e', color: 'white', minHeight: '100%' }}>
-      {/* Mode Selection */}
-      <FormControl component="fieldset" sx={{ mb: 3 }}>
-        <FormLabel component="legend" sx={{ mb: 2, color: 'white' }}>
-          <Typography variant="h6" sx={{ color: 'white' }}>{t('letNodeForm.assignmentMode')}</Typography>
-        </FormLabel>
-        <RadioGroup
-          value={formData.mode || 'simple'}
-          onChange={(e) => handleInputChange('mode', e.target.value as 'simple' | 'object' | 'code')}
-          row
-        >
-          <FormControlLabel
-            value="simple"
-            control={<Radio sx={{ color: '#1976d2', '&.Mui-checked': { color: '#1976d2' } }} />}
-            label={
-              <Stack direction="row" alignItems="center" spacing={1}>
-                <Typography sx={{ color: 'white' }}>{t('letNodeForm.simpleVariables')}</Typography>
-              </Stack>
-            }
-            sx={{ color: 'white' }}
-          />
-          <FormControlLabel
-            value="object"
-            control={<Radio sx={{ color: '#1976d2', '&.Mui-checked': { color: '#1976d2' } }} />}
-            label={
-              <Stack direction="row" alignItems="center" spacing={1}>
-                <ObjectIcon fontSize="small" sx={{ color: '#1976d2' }} />
-                <Typography sx={{ color: 'white' }}>{t('letNodeForm.objectCreation')}</Typography>
-              </Stack>
-            }
-            sx={{ color: 'white' }}
-          />
-          <FormControlLabel
-            value="code"
-            control={<Radio sx={{ color: '#1976d2', '&.Mui-checked': { color: '#1976d2' } }} />}
-            label={
-              <Stack direction="row" alignItems="center" spacing={1}>
-                <CodeIcon fontSize="small" sx={{ color: '#1976d2' }} />
-                <Typography sx={{ color: 'white' }}>{t('letNodeForm.customCode')}</Typography>
-              </Stack>
-            }
-            sx={{ color: 'white' }}
-          />
-        </RadioGroup>
-      </FormControl>
-
-      {/* Simple Mode */}
-      {formData.mode === 'simple' && (
-        <Box>
-          {formData.bindings.map(([name, expression], index) => (
-            <Box key={index} sx={{ mb: 2 }}>
-              <Grid container spacing={2} alignItems="center">
-                <Grid item xs={5}>
-                  <Box>
-                    <TextField
-                      fullWidth
-                      label={t('letNodeForm.bindingName', { index: index + 1 })}
-                      value={name}
-                      onChange={(e) => handleNameChange(index, e.target.value)}
-                      onBlur={() => handleBindingFieldBlur(index, 'name')}
-                      error={shouldShowBindingFieldError(index, 'name')}
-                      sx={{
-                        '& .MuiOutlinedInput-root': {
-                          backgroundColor: '#2d2d2d',
-                          color: 'white',
-                          '& fieldset': { borderColor: '#555' },
-                          '&:hover fieldset': { borderColor: '#777' },
-                          '&.Mui-focused fieldset': { borderColor: '#1976d2' }
-                        },
-                        '& .MuiInputLabel-root': { color: '#b0b0b0' },
-                        '& .MuiInputLabel-root.Mui-focused': { color: '#1976d2' }
-                      }}
-                    />
-                    <ValidationError
-                      error={getBindingFieldError(index, 'name')}
-                      show={shouldShowBindingFieldError(index, 'name')}
-                    />
-                  </Box>
-                </Grid>
-                <Grid item xs={6}>
-                  <Box>
-                    <ExpressionInput
-                      label={t('letNodeForm.bindingValue', { index: index + 1 })}
-                      value={expression as any}
-                      onChange={(newExpression: any) => handleValueChange(index, newExpression)}
-                      onValidationChange={(isValid, errors) => {
-                        if (!isValid && errors.length > 0) {
-                          setFieldError(`binding_${index}_value`, errors[0]);
-                        } else {
-                          clearFieldError(`binding_${index}_value`);
-                        }
-                      }}
-                    />
-                    <ValidationError
-                      error={getBindingFieldError(index, 'value')}
-                      show={shouldShowBindingFieldError(index, 'value')}
-                    />
-                  </Box>
-                </Grid>
-                <Grid item xs={1}>
-                  <IconButton
-                    onClick={() => handleRemoveBinding(index)}
-                    color="error"
-                    size="small"
-                    title={t('letNodeForm.removeBinding')}
-                    sx={{ color: '#f44336' }}
-                  >
-                    <DeleteIcon />
-                  </IconButton>
-                </Grid>
-              </Grid>
-
-              {shouldShowGeneralBindingError() && (
-                <Box sx={{ mt: 1 }}>
-                  <ValidationError
-                    error={getFieldError('bindings')}
-                    show={true}
-                  />
-                </Box>
-              )}
-
-              {index < formData.bindings.length - 1 && (
-                <Divider sx={{ margin: '16px 0', borderColor: '#555' }} />
-              )}
-            </Box>
-          ))}
-
-          <Button
-            onClick={handleAddBinding}
-            startIcon={<AddIcon />}
-            variant="outlined"
-            sx={{
-              borderColor: '#1976d2',
-              color: '#1976d2',
-              '&:hover': {
-                borderColor: '#1565c0',
-                backgroundColor: 'rgba(25, 118, 210, 0.1)'
-              }
-            }}
-          >
-            {t('letNodeForm.addBinding')}
-          </Button>
-        </Box>
-      )}
-
-      {/* Object Creation Mode */}
-      {formData.mode === 'object' && (
-        <Card variant="outlined" sx={{ backgroundColor: '#2d2d2d', borderColor: '#555' }}>
-          <CardContent sx={{ backgroundColor: '#2d2d2d' }}>
-            <Typography variant="h6" gutterBottom sx={{ color: 'white' }}>
-              {t('letNodeForm.objectCreation')}
-            </Typography>
-
-            <TextField
-              fullWidth
-              label={t('letNodeForm.variableName')}
-              value={formData.objectDefinition?.variableName || ''}
-              onChange={(e) => handleVariableNameChange(e.target.value)}
-              sx={{
-                mb: 3,
-                '& .MuiOutlinedInput-root': {
-                  backgroundColor: '#1e1e1e',
-                  color: 'white',
-                  '& fieldset': { borderColor: '#555' },
-                  '&:hover fieldset': { borderColor: '#777' },
-                  '&.Mui-focused fieldset': { borderColor: '#1976d2' }
-                },
-                '& .MuiInputLabel-root': { color: '#b0b0b0' },
-                '& .MuiInputLabel-root.Mui-focused': { color: '#1976d2' }
-              }}
-            />
-
-            <Typography variant="subtitle2" gutterBottom sx={{ color: 'white' }}>
-              {t('letNodeForm.properties')}:
-            </Typography>
-
-            {(formData.objectDefinition?.properties || []).map((property, index) => (
-              <Box key={index}>
-                <Grid container spacing={2} alignItems="center" sx={{ mb: 2 }}>
-                  <Grid item xs={4}>
-                    <TextField
-                      fullWidth
-                      label={t('letNodeForm.propertyKey')}
-                      value={property.key}
-                      onChange={(e) => handleObjectPropertyChange(index, 'key', e.target.value)}
-                      sx={{
-                        '& .MuiOutlinedInput-root': {
-                          backgroundColor: '#1e1e1e',
-                          color: 'white',
-                          '& fieldset': { borderColor: '#555' },
-                          '&:hover fieldset': { borderColor: '#777' },
-                          '&.Mui-focused fieldset': { borderColor: '#1976d2' }
-                        },
-                        '& .MuiInputLabel-root': { color: '#b0b0b0' },
-                        '& .MuiInputLabel-root.Mui-focused': { color: '#1976d2' }
-                      }}
-                    />
-                  </Grid>
-                  <Grid item xs={7}>
-                    <ExpressionInput
-                      label={t('letNodeForm.propertyValue')}
-                      value={property.value as ExpressionInputType}
-                      onChange={(newExpression: ExpressionInputType) => handleObjectPropertyChange(index, 'value', newExpression)}
-                    />
-                  </Grid>
-                  <Grid item xs={1}>
-                    <IconButton
-                      onClick={() => handleRemoveObjectProperty(index)}
-                      color="error"
-                      size="small"
-                      sx={{ color: '#f44336' }}
-                    >
-                      <DeleteIcon />
-                    </IconButton>
-                  </Grid>
-                </Grid>
-              </Box>
-            ))}
-
-            <Button
-              onClick={handleAddObjectProperty}
-              startIcon={<AddIcon />}
-              variant="outlined"
-              sx={{
-                borderColor: '#1976d2',
-                color: '#1976d2',
-                '&:hover': {
-                  borderColor: '#1565c0',
-                  backgroundColor: 'rgba(25, 118, 210, 0.1)'
-                }
-              }}
-            >
-              {t('letNodeForm.addProperty')}
-            </Button>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Custom Code Mode */}
-      {formData.mode === 'code' && (
-        <Card variant="outlined" sx={{ backgroundColor: '#2d2d2d', borderColor: '#555' }}>
-          <CardContent sx={{ backgroundColor: '#2d2d2d' }}>
-            <Typography variant="h6" gutterBottom sx={{ color: 'white' }}>
-              {t('letNodeForm.customCode')}
-            </Typography>
-            <TextField
-              fullWidth
-              multiline
-              rows={8}
-              label={t('letNodeForm.javascriptCode')}
-              value={formData.customCode || ''}
-              onChange={(e) => handleCustomCodeChange(e.target.value)}
-              placeholder={t('letNodeForm.codePlaceholder')}
-              sx={{
-                fontFamily: 'monospace',
-                '& .MuiOutlinedInput-root': {
-                  backgroundColor: '#1e1e1e',
-                  color: 'white',
-                  '& fieldset': { borderColor: '#555' },
-                  '&:hover fieldset': { borderColor: '#777' },
-                  '&.Mui-focused fieldset': { borderColor: '#1976d2' }
-                },
-                '& .MuiInputLabel-root': { color: '#b0b0b0' },
-                '& .MuiInputLabel-root.Mui-focused': { color: '#1976d2' }
-              }}
-            />
-          </CardContent>
-        </Card>
-      )}
-    </Box>
-  );
-};