@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Autocomplete, Chip, TextField } from '@mui/material';
+
+// Define the props for the MultiSelectInput component
+interface MultiSelectInputProps {
+  label: string;
+  value: string[];
+  onChange: (newValue: string[]) => void;
+}
+
+// Create the MultiSelectInput component
+const MultiSelectInput: React.FC<MultiSelectInputProps> = ({
+  label,
+  value: _value,
+  onChange,
+}) => {
+  const [inputValue, setInputValue] = React.useState<string>('');
+  const value = _value ?? [];
+
+  // Handler for input changes
+  const handleInputChange = (
+    event: React.SyntheticEvent,
+    newInputValue: string,
+  ) => {
+    setInputValue(newInputValue);
+  };
+
+  // Handler for blur event
+  const handleBlur = () => {
+    if (inputValue.trim() !== '') {
+      const newValue = [...value, inputValue]; // Add new value to the current selected values
+      onChange(newValue); // Update parent state
+      setInputValue(''); // Clear input after adding
+    }
+  };
+
+  return (
+    <Autocomplete
+      size="small"
+      multiple
+      freeSolo
+      options={[]} // No predefined options since we're allowing free input
+      value={value}
+      onChange={(event, newValue) => {
+        onChange(newValue);
+      }}
+      inputValue={inputValue}
+      onInputChange={handleInputChange}
+      renderTags={(value: string[], getTagProps) =>
+        value.map((option, index) => (
+          <Chip
+            variant="outlined"
+            label={option}
+            {...getTagProps({ index })}
+            key={option}
+            sx={{ color: '#FFFFFF', borderColor: '#FFFFFF', '& .MuiChip-deleteIcon': { color: '#8E8E93' } }}
+          />
+        ))
+      }
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          variant="outlined"
+          label={label}
+          placeholder="Type and press enter"
+          onBlur={handleBlur} // Attach the blur handler here
+          sx={{
+            '& .MuiInputBase-input': { color: '#FFFFFF' },
+            '& .MuiOutlinedInput-notchedOutline': {
+              borderColor: '#8E8E93'
+            }
+          }}
+        />
+      )}
+      onKeyDown={(event: React.KeyboardEvent) => {
+        if (event.key === 'Enter' && inputValue.trim() !== '') {
+          const newValue = [...value, inputValue]; // Add new value to the current selected values
+          onChange(newValue); // Update parent state
+          setInputValue(''); // Clear input after adding
+          event.preventDefault(); // Prevent default Enter behavior
+        }
+      }}
+    />
+  );
+};
+
+export default MultiSelectInput;

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

@@ -0,0 +1,199 @@
+import React, { useState } from 'react';
+import {
+    Box,
+    Chip,
+    FormControl,
+    Stack,
+    TextField,
+    Typography,
+    IconButton,
+} from '@mui/material';
+import { Delete as DeleteIcon } from '@mui/icons-material';
+import { FunctionParameter } from '../templates/node-forms/FunctionForm';
+
+interface ParameterInputProps {
+    label: string;
+    value: FunctionParameter[];
+    onChange: (parameters: FunctionParameter[]) => void;
+}
+
+const DATA_TYPES = [
+    'string',
+    'number',
+    'boolean',
+    'object',
+    'array',
+    'any',
+];
+
+const ParameterInput: React.FC<ParameterInputProps> = ({
+    label,
+    value = [],
+    onChange,
+}) => {
+    const [inputValue, setInputValue] = useState('');
+
+    // Ensure value is always a valid array and filter out invalid parameters
+    const validParameters = Array.isArray(value) ? value.filter(p => p && typeof p === 'object' && 'name' in p && 'type' in p) : [];
+
+    const handleAddParameter = () => {
+        if (inputValue.trim() !== '') {
+            const newParameter: FunctionParameter = {
+                name: inputValue.trim(),
+                type: 'string', // Default type
+            };
+            onChange([...validParameters, newParameter]);
+            setInputValue('');
+        }
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            handleAddParameter();
+        }
+    };
+
+    const handleParameterTypeChange = (index: number, newType: string) => {
+        const updatedParameters = [...validParameters];
+        updatedParameters[index] = {
+            ...updatedParameters[index],
+            type: newType,
+        };
+        onChange(updatedParameters);
+    };
+
+    const handleDeleteParameter = (index: number) => {
+        const updatedParameters = validParameters.filter((_, i) => i !== index);
+        onChange(updatedParameters);
+    };
+
+    return (
+        <Box>
+            <Typography variant="body2" sx={{ color: '#FFFFFF', mb: 1, opacity: 0.9 }}>
+                {label}
+            </Typography>
+
+            {/* Input field for adding new parameters */}
+            <TextField
+                size="small"
+                fullWidth
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Type parameter name and press Enter"
+                sx={{
+                    mb: 2,
+                    '& .MuiInputBase-input': {
+                        color: '#FFFFFF',
+                        opacity: 0.9
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                        borderColor: 'rgba(54, 136, 162, 0.6)',
+                        '&:hover': {
+                            borderColor: 'rgba(54, 136, 162, 0.8)',
+                        },
+                        '&.Mui-focused': {
+                            borderColor: '#3688A2',
+                        }
+                    },
+                    '& .MuiInputLabel-root': {
+                        color: 'rgba(255, 255, 255, 0.7)',
+                        '&.Mui-focused': {
+                            color: '#3688A2',
+                        }
+                    }
+                }}
+                InputLabelProps={{ style: { color: 'rgba(255, 255, 255, 0.7)' } }}
+            />
+
+            {/* Display existing parameters as chips */}
+            {validParameters.length > 0 && (
+                <Stack spacing={1}>
+                    {validParameters.map((parameter, index) => (
+                        <Box
+                            key={index}
+                            sx={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 1,
+                                p: 1,
+                                bgcolor: 'rgba(24, 28, 37, 0.8)',
+                                borderRadius: 1,
+                                border: '1px solid rgba(54, 136, 162, 0.4)',
+                                '&:hover': {
+                                    bgcolor: 'rgba(24, 28, 37, 0.9)',
+                                    border: '1px solid rgba(54, 136, 162, 0.6)',
+                                }
+                            }}
+                        >
+                            {/* Parameter name chip */}
+                            <Chip
+                                label={parameter.name}
+                                size="small"
+                                sx={{
+                                    bgcolor: 'rgba(54, 136, 162, 0.2)',
+                                    color: '#FFFFFF',
+                                    border: '1px solid rgba(54, 136, 162, 0.5)',
+                                    '& .MuiChip-label': {
+                                        px: 1,
+                                        opacity: 0.9
+                                    },
+                                    '&:hover': {
+                                        bgcolor: 'rgba(54, 136, 162, 0.3)',
+                                        border: '1px solid rgba(54, 136, 162, 0.7)',
+                                    }
+                                }}
+                            />
+
+                            {/* Type dropdown */}
+                            <FormControl size="small" sx={{ minWidth: 100 }}>
+                                <select
+                                    value={parameter.type}
+                                    onChange={(e) => {
+                                        console.log('Type changed:', e.target.value, 'for parameter:', parameter.name);
+                                        handleParameterTypeChange(index, e.target.value);
+                                    }}
+                                    style={{
+                                        color: '#FFFFFF',
+                                        backgroundColor: 'rgba(24, 28, 37, 0.9)',
+                                        border: '1px solid rgba(54, 136, 162, 0.5)',
+                                        borderRadius: '4px',
+                                        padding: '8px',
+                                        fontSize: '14px',
+                                        opacity: 0.9
+                                    }}
+                                >
+                                    {DATA_TYPES.map((type) => (
+                                        <option key={type} value={type} style={{ backgroundColor: 'rgba(24, 28, 37, 0.95)', color: '#FFFFFF' }}>
+                                            {type}
+                                        </option>
+                                    ))}
+                                </select>
+                            </FormControl>
+
+                            {/* Delete button */}
+                            <IconButton
+                                size="small"
+                                onClick={() => handleDeleteParameter(index)}
+                                sx={{
+                                    color: 'rgba(255, 107, 107, 0.8)',
+                                    opacity: 0.8,
+                                    '&:hover': {
+                                        bgcolor: 'rgba(255, 107, 107, 0.15)',
+                                        color: '#ff6b6b',
+                                        opacity: 1
+                                    }
+                                }}
+                            >
+                                <DeleteIcon fontSize="small" />
+                            </IconButton>
+                        </Box>
+                    ))}
+                </Stack>
+            )}
+        </Box>
+    );
+};
+
+export default ParameterInput;

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

@@ -0,0 +1,114 @@
+import React, { ReactNode } from 'react';
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+} from '@mui/material';
+
+export interface CustomInputProps {
+  name: string;
+  type: string;
+  label: string;
+  value: any;
+  onChange: any;
+  onBlur?: (e: React.FocusEvent<any, Element>) => void;
+  error?: boolean;
+  helperText?: string;
+  options?: Array<{ value: string | number; label: string | ReactNode }>;
+}
+
+const PropertyInput: React.FC<CustomInputProps> = React.memo(
+  ({
+    name,
+    type,
+    label,
+    value,
+    onChange,
+    onBlur,
+    error,
+    helperText,
+    options,
+  }) => {
+    if (type === 'checkbox') {
+      return (
+        <FormGroup >
+          <FormControlLabel
+            control={
+              <Checkbox
+                size={'small'}
+                checked={value}
+                onChange={onChange}
+                name={name}
+                onBlur={onBlur}
+              />
+            }
+            label={label}
+          />
+          {error && (
+            <div
+              style={{ color: 'red', marginTop: '5px' }}
+            >
+              {helperText}
+            </div>
+          )}
+        </FormGroup>
+      );
+    } else if (type === 'select' && options) {
+      return (
+        <FormControl fullWidth error={error}>
+          <InputLabel id={`${name}-label`}>
+            {label}
+          </InputLabel>
+          <Select
+            size={'small'}
+            labelId={`${name}-label`}
+            value={value}
+            label={label}
+            onChange={onChange}
+            onBlur={onBlur}
+            name={name}
+          >
+            {options.map((option) => (
+              <MenuItem
+                key={option.value}
+                value={option.value}
+              >
+                {option.label}
+              </MenuItem>
+            ))}
+          </Select>
+          {helperText && (
+            <div
+              style={{ color: 'red', marginTop: '5px' }}
+            >
+              {helperText}
+            </div>
+          )}
+        </FormControl>
+      );
+    }
+
+    // Default to text field for simplicity; adapt as needed for other types
+    return (
+      <TextField
+        size={'small'}
+        fullWidth
+        name={name}
+        label={label}
+        type={type}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        error={error}
+        helperText={helperText}
+      />
+    );
+  },
+);
+
+export default PropertyInput;

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

@@ -0,0 +1,69 @@
+import React, { ElementType, useMemo } from 'react';
+import { Box, BoxProps, SxProps, Theme, useTheme } from '@mui/material';
+import { OverridableStringUnion } from '@mui/types';
+
+interface StyledBoxVariantOverrides {
+  inputVariant: true;
+  cardCoverImage: true;
+  cardCoverImagePreview: true;
+  cardAddNewBlock: true;
+  downloadPanelInputLabel: true;
+}
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    styledBox: { [key: string]: React.CSSProperties };
+  }
+
+  interface ThemeOptions {
+    styledBox?: { [key: string]: React.CSSProperties };
+  }
+}
+
+type StyledBoxProps<C extends ElementType = 'div'> = Omit<
+  BoxProps<C>,
+  'variant' | 'sx'
+> & {
+  variant: OverridableStringUnion<
+    'primary' | 'secondary' | 'downloadPanelInputLabel',
+    StyledBoxVariantOverrides
+  >;
+  sx?: SxProps<Theme>;
+  component?: C;
+  innerRef?: React.Ref<HTMLElement>;
+};
+
+const StyledBox = <C extends React.ElementType = 'div'>(
+  props: StyledBoxProps<C> & { component?: C },
+) => {
+  const { variant, sx: sxProp, innerRef, ...otherProps } = props;
+  const theme = useTheme();
+
+  // Determine variant styles
+  const variantStyles: SxProps<Theme> = useMemo(() => {
+    if (variant && theme.styledBox && theme.styledBox[variant]) {
+      return theme.styledBox[variant] as SxProps<Theme>;
+    }
+    return {};
+  }, [variant, theme.styledBox]);
+
+  const sx: SxProps<Theme> = useMemo(
+    () => ({
+      ...sxProp,
+      ...variantStyles,
+    }),
+    [sxProp, variantStyles],
+  );
+
+  return (
+    <Box
+      component={otherProps.component as C}
+      ref={innerRef}
+      sx={sx}
+      {...otherProps}
+    />
+  );
+};
+
+StyledBox.displayName = 'StyledBox';
+export default StyledBox;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Typography, Box } from '@mui/material';
+
+interface ValidationErrorProps {
+    error: string | null;
+    show?: boolean;
+    className?: string;
+}
+
+const ValidationError: React.FC<ValidationErrorProps> = ({
+    error,
+    show = true,
+    className
+}) => {
+    if (!show || !error) {
+        return null;
+    }
+
+    return (
+        <Box className={className} sx={{ mt: 0.5 }}>
+            <Typography
+                variant="caption"
+                color="error"
+                sx={{
+                    fontSize: '0.75rem',
+                    lineHeight: 1.2,
+                    display: 'block',
+                }}
+            >
+                {error}
+            </Typography>
+        </Box>
+    );
+};
+
+export default ValidationError;
+

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Typography, Box, Alert, AlertTitle } from '@mui/material';
+import { SeverityLevel } from '../types/validation-types';
+
+interface ValidationMessageProps {
+    message: string;
+    severity: SeverityLevel;
+    show?: boolean;
+    className?: string;
+    title?: string;
+}
+
+const ValidationMessage: React.FC<ValidationMessageProps> = ({
+    message,
+    severity,
+    show = true,
+    className,
+    title
+}) => {
+    if (!show || !message) {
+        return null;
+    }
+
+    // For warnings and info, use Alert component for better UX
+    if (severity === 'warning' || severity === 'info') {
+        return (
+            <Box className={className} sx={{ mt: 0.5 }}>
+                <Alert
+                    severity={severity === 'info' ? 'info' : 'warning'}
+                    sx={{
+                        py: 0.5,
+                        '& .MuiAlert-message': {
+                            fontSize: '0.75rem',
+                            lineHeight: 1.2,
+                        }
+                    }}
+                >
+                    {title && <AlertTitle sx={{ fontSize: '0.75rem' }}>{title}</AlertTitle>}
+                    {message}
+                </Alert>
+            </Box>
+        );
+    }
+
+    // For errors, use the existing error styling
+    return (
+        <Box className={className} sx={{ mt: 0.5 }}>
+            <Typography
+                variant="caption"
+                color="error"
+                sx={{
+                    fontSize: '0.75rem',
+                    lineHeight: 1.2,
+                    display: 'block',
+                }}
+            >
+                {message}
+            </Typography>
+        </Box>
+    );
+};
+
+export default ValidationMessage;

package/packages/diagrams/src/lib/components/AiButton.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Panel } from '@xyflow/react';
+import { Button } from '@mui/material';
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+
+export default function AiButton() {
+  return (
+    <>
+      <Panel position="bottom-right">
+        <Button
+          variant="contained"
+          onClick={() => {
+            // TODO: Implement AI functionality
+            console.log('AI button clicked');
+          }}
+          sx={{
+            width: '56px',
+            height: '56px',
+            borderRadius: '50%',
+            minWidth: '56px',
+            padding: 0,
+            background:
+              'linear-gradient(135deg, #8B5CF6 0%, #A855F7 50%, #C084FC 100%)',
+            color: '#ffffff',
+            border: 'none',
+            boxShadow:
+              '0 4px 20px rgba(139, 92, 246, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2)',
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+            '&:hover': {
+              background:
+                'linear-gradient(135deg, #7C3AED 0%, #9333EA 50%, #B45EFC 100%)',
+              transform: 'translateY(-2px) scale(1.05)',
+              boxShadow:
+                '0 8px 25px rgba(139, 92, 246, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3)',
+            },
+            '&:active': {
+              transform: 'translateY(0) scale(1.02)',
+              boxShadow: '0 2px 10px rgba(139, 92, 246, 0.3)',
+            },
+          }}
+        >
+          <AutoAwesomeIcon
+            sx={{
+              fontSize: '24px',
+              filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))',
+            }}
+          />
+        </Button>
+      </Panel>
+    </>
+  );
+}