@flowuent-org/diagramming-core 1.0.5

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

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

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