@flowuent-org/diagramming-core 1.0.8 → 1.1.1

package/packages/diagrams/src/lib/atoms/ExpressionInput.tsx

@@ -1,437 +1,437 @@
-import React, { useState, useEffect } from 'react';
-import styled from '@emotion/styled';
-import { Divider, Stack, Typography } from '@mui/material';
-import { Expression, OperationExpression } from '../types/ndoe-form-types';
-import { useTranslation } from 'react-i18next';
-import { BlockTypesKeys } from '../organisms/Card/card.params';
-import ValidationMessage from './ValidationMessage';
-import { validationEngine } from '../utils/validationEngine';
-import { ValidationResult } from '../types/validation-types';
-
-// Styled Components
-export const StyledSelect: ReturnType<typeof styled.select> = styled.select`
-  width: 100%;
-  padding: 8px;
-  font-size: 14px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: transparent;
-  color: #FFFFFF;
-
-  &:hover {
-    border-color: #000000;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: #1976d2;
-  }
-`;
-
-export const StyledInput: ReturnType<typeof styled.input> = styled.input`
-  width: 100%;
-  padding: 8px;
-  font-size: 14px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: transparent;
-  color: #FFFFFF;
-
-  &:hover {
-    border-color: #000000;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: #1976d2;
-  }
-`;
-
-// New styled components for the integrated input with dropdown
-const InputWithDropdownContainer = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-`;
-
-const StyledInputWithDropdown = styled.input`
-  width: 100%;
-  padding: 8px;
-  padding-right: 110px; /* Make room for dropdown */
-  font-size: 14px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: transparent;
-  color: #FFFFFF;
-
-  &:hover {
-    border-color: #000000;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: #1976d2;
-  }
-`;
-
-const DropdownOverlay = styled.div`
-  position: absolute;
-  right: 2px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 10;
-  pointer-events: auto;
-  width: 100px;
-`;
-
-const StyledSelectOverlay = styled.select`
-  min-width: 100px;
-  height: 32px;
-  background-color: transparent;
-  cursor: pointer;
-  border: none;
-  outline: none;
-  padding: 4px 8px;
-  font-size: 12px;
-  color: #FFFFFF;
-  text-align: center;
-  border-radius: 4px;
-  
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  
-  &:focus {
-    background-color: rgba(255, 255, 255, 0.15);
-  }
-  
-  option {
-    background-color: #393939;
-    color: #FFFFFF;
-    padding: 8px;
-  }
-`;
-
-const OperatorContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-`;
-
-const OperandWrapper = styled.div`
-  flex: 1;
-`;
-
-interface ExpressionInputProps {
-  value: Expression;
-  onChange: (newValue: Expression) => void;
-  label: string;
-  className?: string;
-  showDataTypeDropdown?: boolean;
-  dataType?: string;
-  onDataTypeChange?: (dataType: string) => void;
-  onValidationChange?: (isValid: boolean, errors: string[]) => void;
-}
-
-const operationOperandCounts: { [key: string]: number } = {
-  '+': 2,
-  '-': 2,
-  '*': 2,
-  '/': 2,
-  '>': 2,
-  '>=': 2,
-  '<': 2,
-  '<=': 2,
-  '=': 2,
-  '==': 2,
-  '!=': 2,
-  neg: 1,
-  not: 1,
-  and: 2,
-  or: 2,
-};
-
-const ExpressionInput: React.FC<ExpressionInputProps> = ({
-  value,
-  onChange,
-  label,
-  className = '',
-  showDataTypeDropdown = false,
-  dataType = 'String',
-  onDataTypeChange,
-  onValidationChange,
-}) => {
-  const { t } = useTranslation();
-  const isOperation = value && typeof value === 'object' && 'operation' in value;
-
-  // State for validation results
-  const [operandValidations, setOperandValidations] = useState<ValidationResult[][]>([]);
-  const [showOperandValidations, setShowOperandValidations] = useState<boolean[]>([]);
-  const [primitiveValidations, setPrimitiveValidations] = useState<ValidationResult[]>([]);
-  const [showPrimitiveValidations, setShowPrimitiveValidations] = useState<boolean>(false);
-
-  // Validate primitive value using validation engine
-  const validatePrimitiveValue = (value: string): ValidationResult[] => {
-    return validationEngine.validatePrimitiveValue(value, dataType);
-  };
-
-  // Re-validate primitive value when data type changes
-  useEffect(() => {
-    if (!isOperation && typeof value === 'string') {
-      const validations = validatePrimitiveValue(value);
-      setPrimitiveValidations(validations);
-      setShowPrimitiveValidations(validations.length > 0);
-    }
-  }, [dataType, value, isOperation]);
-
-  const handlePrimitiveChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    onChange(newValue); // Update the parent directly
-
-    // Validate and show validation results if needed
-    const validations = validatePrimitiveValue(newValue);
-    setPrimitiveValidations(validations);
-    setShowPrimitiveValidations(validations.length > 0);
-
-    // Notify parent component about validation state
-    if (onValidationChange) {
-      const hasErrors = validationEngine.hasErrors(validations);
-      const errorMessages = validationEngine.getErrors(validations).map(v => v.message);
-      onValidationChange(!hasErrors, errorMessages);
-    }
-  };
-
-  const handleOperationTypeChange = (
-    e: React.ChangeEvent<HTMLSelectElement>,
-  ) => {
-    const newOperation = e.target.value;
-    const operandCount = operationOperandCounts[newOperation] || 2;
-    const newOperands = Array(operandCount).fill('');
-    onChange({ operation: newOperation, operands: newOperands });
-
-    // Reset validation states for new operation
-    setOperandValidations(Array(operandCount).fill([]));
-    setShowOperandValidations(Array(operandCount).fill(false));
-  };
-
-  // Validate operands when they change
-  useEffect(() => {
-    if (isOperation) {
-      const operationValue = value as OperationExpression;
-      const validations: ValidationResult[][] = [];
-      const showValidations: boolean[] = [];
-
-      operationValue.operands?.forEach((operand, index) => {
-        // Use validation engine to validate operand
-        const operandValidations = validationEngine.validateOperationOperands([operand], dataType);
-        validations.push(operandValidations);
-
-        // Show validation if operand has been interacted with (has value or was touched)
-        showValidations.push(!!operand || showOperandValidations[index] || false);
-      });
-
-      setOperandValidations(validations);
-      setShowOperandValidations(showValidations);
-
-      // Notify parent component about validation state
-      if (onValidationChange) {
-        const allValidations = validations.flat();
-        const hasErrors = validationEngine.hasErrors(allValidations);
-        const errorMessages = validationEngine.getErrors(allValidations).map(v => v.message);
-        onValidationChange(!hasErrors, errorMessages);
-      }
-    }
-  }, [value, dataType, isOperation, showOperandValidations, onValidationChange]);
-
-  const handleOperandChange = (index: number, operandValue: string) => {
-    if (isOperation) {
-      const operationValue = value as OperationExpression;
-      const updatedOperands = [...operationValue.operands];
-      updatedOperands[index] = operandValue;
-
-      // Mark this operand as touched for validation display
-      const newShowValidations = [...showOperandValidations];
-      newShowValidations[index] = true;
-      setShowOperandValidations(newShowValidations);
-
-      // Clear validation when user starts typing
-      if (operandValidations[index] && operandValidations[index].length > 0) {
-        const newValidations = [...operandValidations];
-        newValidations[index] = [];
-        setOperandValidations(newValidations);
-      }
-
-      onChange({ ...operationValue, operands: updatedOperands });
-    }
-  };
-
-  const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const selectedValue = e.target.value;
-    if (selectedValue === 'primitive') {
-      onChange(String(value ?? '')); // Switch to primitive
-      // Clear operand validations when switching to primitive
-      setOperandValidations([]);
-      setShowOperandValidations([]);
-      // Clear primitive validations
-      setPrimitiveValidations([]);
-      setShowPrimitiveValidations(false);
-    } else {
-      // Always initialize with a proper operation structure when switching to operation mode
-      onChange({ operation: '+', operands: ['', ''] });
-      // Initialize validation states for new operation
-      setOperandValidations([[], []]); // Start with empty validations
-      setShowOperandValidations([false, false]); // Don't show validations initially
-      // Clear primitive validations
-      setPrimitiveValidations([]);
-      setShowPrimitiveValidations(false);
-    }
-  };
-
-  const renderOperandInput = (operand: string, index: number) => (
-    <div>
-      <StyledInput
-        type="text"
-        value={operand}
-        onChange={(e) => handleOperandChange(index, e.target.value)}
-        placeholder={`Operand ${index + 1}`}
-        style={{
-          borderColor: showOperandValidations[index] && operandValidations[index]?.some(v => v.severity === 'error') ? '#d32f2f' : undefined
-        }}
-      />
-      {showOperandValidations[index] && operandValidations[index]?.map((validation, vIndex) => (
-        <ValidationMessage
-          key={vIndex}
-          message={validation.message}
-          severity={validation.severity}
-          show={true}
-        />
-      ))}
-    </div>
-  );
-
-  const renderPrimitiveInput = () => {
-    if (showDataTypeDropdown) {
-      return (
-        <div>
-          <InputWithDropdownContainer>
-            <StyledInputWithDropdown
-              className="zd__primitive-input-with-dropdown"
-              type="text"
-              value={String(value ?? '')}
-              onChange={handlePrimitiveChange}
-              placeholder="Enter value"
-              style={{
-                borderColor: showPrimitiveValidations ? '#d32f2f' : undefined
-              }}
-            />
-            <DropdownOverlay>
-              <StyledSelectOverlay
-                value={dataType}
-                onChange={(e) => onDataTypeChange?.(e.target.value)}
-              >
-                {BlockTypesKeys.map((type) => (
-                  <option key={type} value={type}>
-                    {type}
-                  </option>
-                ))}
-              </StyledSelectOverlay>
-            </DropdownOverlay>
-          </InputWithDropdownContainer>
-          {showPrimitiveValidations && primitiveValidations.map((validation, vIndex) => (
-            <ValidationMessage
-              key={vIndex}
-              message={validation.message}
-              severity={validation.severity}
-              show={true}
-            />
-          ))}
-        </div>
-      );
-    }
-
-    return (
-      <div>
-        <StyledInput
-          type="text"
-          value={String(value ?? '')}
-          onChange={handlePrimitiveChange}
-          placeholder="Enter value"
-          style={{
-            borderColor: showPrimitiveValidations ? '#d32f2f' : undefined
-          }}
-        />
-        {showPrimitiveValidations && primitiveValidations.map((validation, vIndex) => (
-          <ValidationMessage
-            key={vIndex}
-            message={validation.message}
-            severity={validation.severity}
-            show={true}
-          />
-        ))}
-      </div>
-    );
-  };
-
-  return (
-    <Stack
-      spacing={1}
-    >
-      <Divider />
-      <Typography component="label" sx={{ color: '#8E8E93' }}>
-        {label}
-      </Typography>
-
-      {/* Type Selection */}
-      <StyledSelect
-        value={isOperation ? 'operation' : 'primitive'}
-        onChange={handleTypeChange}
-      >
-        <option value="primitive" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('expression.primitive')}</option>
-        <option value="operation" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('expression.operation')}</option>
-      </StyledSelect>
-
-      {/* Primitive or Operation Input */}
-      {!isOperation ? (
-        renderPrimitiveInput()
-      ) : (
-        <Stack spacing={1}>
-          {/* Operation Selection */}
-          <StyledSelect
-            value={(value as OperationExpression).operation || '+'}
-            onChange={handleOperationTypeChange}
-          >
-            <option value="+" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.add')}</option>
-            <option value="-" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.subtract')}</option>
-            <option value="*" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.multiply')}</option>
-            <option value="/" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.divide')}</option>
-            <option value=">" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.greaterThan')}</option>
-            <option value=">=" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.greaterThanOrEqual')}</option>
-            <option value="<" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.lessThan')}</option>
-            <option value="<=" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.lessThanOrEqual')}</option>
-            <option value="=" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.assign')}</option>
-            <option value="==" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.equal')}</option>
-            <option value="!=" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.notEqual')}</option>
-            <option value="neg" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.negate')}</option>
-            <option value="not" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.not')}</option>
-            <option value="and" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.and')}</option>
-            <option value="or" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.or')}</option>
-          </StyledSelect>
-
-          {/* Operand Inputs */}
-          <OperatorContainer>
-            {(value as OperationExpression).operands?.map((operand, index) => (
-              <OperandWrapper key={index}>
-                {renderOperandInput(operand || '', index)}
-              </OperandWrapper>
-            )) || []}
-          </OperatorContainer>
-        </Stack>
-      )}
-      <Divider />
-    </Stack>
-  );
-};
-
-export default ExpressionInput;
+import React, { useState, useEffect } from 'react';
+import styled from '@emotion/styled';
+import { Divider, Stack, Typography } from '@mui/material';
+import { Expression, OperationExpression } from '../types/ndoe-form-types';
+import { useTranslation } from 'react-i18next';
+import { BlockTypesKeys } from '../organisms/Card/card.params';
+import ValidationMessage from './ValidationMessage';
+import { validationEngine } from '../utils/validationEngine';
+import { ValidationResult } from '../types/validation-types';
+
+// Styled Components
+export const StyledSelect: ReturnType<typeof styled.select> = styled.select`
+  width: 100%;
+  padding: 8px;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: transparent;
+  color: #FFFFFF;
+
+  &:hover {
+    border-color: #000000;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #1976d2;
+  }
+`;
+
+export const StyledInput: ReturnType<typeof styled.input> = styled.input`
+  width: 100%;
+  padding: 8px;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: transparent;
+  color: #FFFFFF;
+
+  &:hover {
+    border-color: #000000;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #1976d2;
+  }
+`;
+
+// New styled components for the integrated input with dropdown
+const InputWithDropdownContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
+
+const StyledInputWithDropdown = styled.input`
+  width: 100%;
+  padding: 8px;
+  padding-right: 110px; /* Make room for dropdown */
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: transparent;
+  color: #FFFFFF;
+
+  &:hover {
+    border-color: #000000;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #1976d2;
+  }
+`;
+
+const DropdownOverlay = styled.div`
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  pointer-events: auto;
+  width: 100px;
+`;
+
+const StyledSelectOverlay = styled.select`
+  min-width: 100px;
+  height: 32px;
+  background-color: transparent;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  padding: 4px 8px;
+  font-size: 12px;
+  color: #FFFFFF;
+  text-align: center;
+  border-radius: 4px;
+  
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  &:focus {
+    background-color: rgba(255, 255, 255, 0.15);
+  }
+  
+  option {
+    background-color: #393939;
+    color: #FFFFFF;
+    padding: 8px;
+  }
+`;
+
+const OperatorContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+`;
+
+const OperandWrapper = styled.div`
+  flex: 1;
+`;
+
+interface ExpressionInputProps {
+  value: Expression;
+  onChange: (newValue: Expression) => void;
+  label: string;
+  className?: string;
+  showDataTypeDropdown?: boolean;
+  dataType?: string;
+  onDataTypeChange?: (dataType: string) => void;
+  onValidationChange?: (isValid: boolean, errors: string[]) => void;
+}
+
+const operationOperandCounts: { [key: string]: number } = {
+  '+': 2,
+  '-': 2,
+  '*': 2,
+  '/': 2,
+  '>': 2,
+  '>=': 2,
+  '<': 2,
+  '<=': 2,
+  '=': 2,
+  '==': 2,
+  '!=': 2,
+  neg: 1,
+  not: 1,
+  and: 2,
+  or: 2,
+};
+
+const ExpressionInput: React.FC<ExpressionInputProps> = ({
+  value,
+  onChange,
+  label,
+  className = '',
+  showDataTypeDropdown = false,
+  dataType = 'String',
+  onDataTypeChange,
+  onValidationChange,
+}) => {
+  const { t } = useTranslation();
+  const isOperation = value && typeof value === 'object' && 'operation' in value;
+
+  // State for validation results
+  const [operandValidations, setOperandValidations] = useState<ValidationResult[][]>([]);
+  const [showOperandValidations, setShowOperandValidations] = useState<boolean[]>([]);
+  const [primitiveValidations, setPrimitiveValidations] = useState<ValidationResult[]>([]);
+  const [showPrimitiveValidations, setShowPrimitiveValidations] = useState<boolean>(false);
+
+  // Validate primitive value using validation engine
+  const validatePrimitiveValue = (value: string): ValidationResult[] => {
+    return validationEngine.validatePrimitiveValue(value, dataType);
+  };
+
+  // Re-validate primitive value when data type changes
+  useEffect(() => {
+    if (!isOperation && typeof value === 'string') {
+      const validations = validatePrimitiveValue(value);
+      setPrimitiveValidations(validations);
+      setShowPrimitiveValidations(validations.length > 0);
+    }
+  }, [dataType, value, isOperation]);
+
+  const handlePrimitiveChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    onChange(newValue); // Update the parent directly
+
+    // Validate and show validation results if needed
+    const validations = validatePrimitiveValue(newValue);
+    setPrimitiveValidations(validations);
+    setShowPrimitiveValidations(validations.length > 0);
+
+    // Notify parent component about validation state
+    if (onValidationChange) {
+      const hasErrors = validationEngine.hasErrors(validations);
+      const errorMessages = validationEngine.getErrors(validations).map(v => v.message);
+      onValidationChange(!hasErrors, errorMessages);
+    }
+  };
+
+  const handleOperationTypeChange = (
+    e: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    const newOperation = e.target.value;
+    const operandCount = operationOperandCounts[newOperation] || 2;
+    const newOperands = Array(operandCount).fill('');
+    onChange({ operation: newOperation, operands: newOperands });
+
+    // Reset validation states for new operation
+    setOperandValidations(Array(operandCount).fill([]));
+    setShowOperandValidations(Array(operandCount).fill(false));
+  };
+
+  // Validate operands when they change
+  useEffect(() => {
+    if (isOperation) {
+      const operationValue = value as OperationExpression;
+      const validations: ValidationResult[][] = [];
+      const showValidations: boolean[] = [];
+
+      operationValue.operands?.forEach((operand, index) => {
+        // Use validation engine to validate operand
+        const operandValidations = validationEngine.validateOperationOperands([operand], dataType);
+        validations.push(operandValidations);
+
+        // Show validation if operand has been interacted with (has value or was touched)
+        showValidations.push(!!operand || showOperandValidations[index] || false);
+      });
+
+      setOperandValidations(validations);
+      setShowOperandValidations(showValidations);
+
+      // Notify parent component about validation state
+      if (onValidationChange) {
+        const allValidations = validations.flat();
+        const hasErrors = validationEngine.hasErrors(allValidations);
+        const errorMessages = validationEngine.getErrors(allValidations).map(v => v.message);
+        onValidationChange(!hasErrors, errorMessages);
+      }
+    }
+  }, [value, dataType, isOperation, showOperandValidations, onValidationChange]);
+
+  const handleOperandChange = (index: number, operandValue: string) => {
+    if (isOperation) {
+      const operationValue = value as OperationExpression;
+      const updatedOperands = [...operationValue.operands];
+      updatedOperands[index] = operandValue;
+
+      // Mark this operand as touched for validation display
+      const newShowValidations = [...showOperandValidations];
+      newShowValidations[index] = true;
+      setShowOperandValidations(newShowValidations);
+
+      // Clear validation when user starts typing
+      if (operandValidations[index] && operandValidations[index].length > 0) {
+        const newValidations = [...operandValidations];
+        newValidations[index] = [];
+        setOperandValidations(newValidations);
+      }
+
+      onChange({ ...operationValue, operands: updatedOperands });
+    }
+  };
+
+  const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = e.target.value;
+    if (selectedValue === 'primitive') {
+      onChange(String(value ?? '')); // Switch to primitive
+      // Clear operand validations when switching to primitive
+      setOperandValidations([]);
+      setShowOperandValidations([]);
+      // Clear primitive validations
+      setPrimitiveValidations([]);
+      setShowPrimitiveValidations(false);
+    } else {
+      // Always initialize with a proper operation structure when switching to operation mode
+      onChange({ operation: '+', operands: ['', ''] });
+      // Initialize validation states for new operation
+      setOperandValidations([[], []]); // Start with empty validations
+      setShowOperandValidations([false, false]); // Don't show validations initially
+      // Clear primitive validations
+      setPrimitiveValidations([]);
+      setShowPrimitiveValidations(false);
+    }
+  };
+
+  const renderOperandInput = (operand: string, index: number) => (
+    <div>
+      <StyledInput
+        type="text"
+        value={operand}
+        onChange={(e) => handleOperandChange(index, e.target.value)}
+        placeholder={`Operand ${index + 1}`}
+        style={{
+          borderColor: showOperandValidations[index] && operandValidations[index]?.some(v => v.severity === 'error') ? '#d32f2f' : undefined
+        }}
+      />
+      {showOperandValidations[index] && operandValidations[index]?.map((validation, vIndex) => (
+        <ValidationMessage
+          key={vIndex}
+          message={validation.message}
+          severity={validation.severity}
+          show={true}
+        />
+      ))}
+    </div>
+  );
+
+  const renderPrimitiveInput = () => {
+    if (showDataTypeDropdown) {
+      return (
+        <div>
+          <InputWithDropdownContainer>
+            <StyledInputWithDropdown
+              className="zd__primitive-input-with-dropdown"
+              type="text"
+              value={String(value ?? '')}
+              onChange={handlePrimitiveChange}
+              placeholder="Enter value"
+              style={{
+                borderColor: showPrimitiveValidations ? '#d32f2f' : undefined
+              }}
+            />
+            <DropdownOverlay>
+              <StyledSelectOverlay
+                value={dataType}
+                onChange={(e) => onDataTypeChange?.(e.target.value)}
+              >
+                {BlockTypesKeys.map((type) => (
+                  <option key={type} value={type}>
+                    {type}
+                  </option>
+                ))}
+              </StyledSelectOverlay>
+            </DropdownOverlay>
+          </InputWithDropdownContainer>
+          {showPrimitiveValidations && primitiveValidations.map((validation, vIndex) => (
+            <ValidationMessage
+              key={vIndex}
+              message={validation.message}
+              severity={validation.severity}
+              show={true}
+            />
+          ))}
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <StyledInput
+          type="text"
+          value={String(value ?? '')}
+          onChange={handlePrimitiveChange}
+          placeholder="Enter value"
+          style={{
+            borderColor: showPrimitiveValidations ? '#d32f2f' : undefined
+          }}
+        />
+        {showPrimitiveValidations && primitiveValidations.map((validation, vIndex) => (
+          <ValidationMessage
+            key={vIndex}
+            message={validation.message}
+            severity={validation.severity}
+            show={true}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <Stack
+      spacing={1}
+    >
+      <Divider />
+      <Typography component="label" sx={{ color: '#8E8E93' }}>
+        {label}
+      </Typography>
+
+      {/* Type Selection */}
+      <StyledSelect
+        value={isOperation ? 'operation' : 'primitive'}
+        onChange={handleTypeChange}
+      >
+        <option value="primitive" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('expression.primitive')}</option>
+        <option value="operation" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('expression.operation')}</option>
+      </StyledSelect>
+
+      {/* Primitive or Operation Input */}
+      {!isOperation ? (
+        renderPrimitiveInput()
+      ) : (
+        <Stack spacing={1}>
+          {/* Operation Selection */}
+          <StyledSelect
+            value={(value as OperationExpression).operation || '+'}
+            onChange={handleOperationTypeChange}
+          >
+            <option value="+" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.add')}</option>
+            <option value="-" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.subtract')}</option>
+            <option value="*" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.multiply')}</option>
+            <option value="/" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.divide')}</option>
+            <option value=">" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.greaterThan')}</option>
+            <option value=">=" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.greaterThanOrEqual')}</option>
+            <option value="<" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.lessThan')}</option>
+            <option value="<=" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.lessThanOrEqual')}</option>
+            <option value="=" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.assign')}</option>
+            <option value="==" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.equal')}</option>
+            <option value="!=" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.notEqual')}</option>
+            <option value="neg" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.negate')}</option>
+            <option value="not" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.not')}</option>
+            <option value="and" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.and')}</option>
+            <option value="or" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.or')}</option>
+          </StyledSelect>
+
+          {/* Operand Inputs */}
+          <OperatorContainer>
+            {(value as OperationExpression).operands?.map((operand, index) => (
+              <OperandWrapper key={index}>
+                {renderOperandInput(operand || '', index)}
+              </OperandWrapper>
+            )) || []}
+          </OperatorContainer>
+        </Stack>
+      )}
+      <Divider />
+    </Stack>
+  );
+};
+
+export default ExpressionInput;