@dartech/arsenal-ui 1.2.4 → 1.2.6

package/src/lib/Property/PropertyFiller/MultiplePropertyFiller.tsx

@@ -0,0 +1,129 @@
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Unstable_Grid2';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Typography from '@mui/material/Typography';
+import JsonEditor from './JsonEditor';
+import MultiplePropertyWidget from './MultiplePropertyWidget';
+import { ControlInput } from '../../Forms';
+
+import { useEffect } from 'react';
+import { useController, useFormContext, useWatch } from 'react-hook-form';
+import usePropertyFiller from './usePropertyFiller';
+import useStyles from './useStyles';
+
+import { PropertyFillType, PropertyType, PropertyUnion } from '../../../interfaces';
+
+type Props = {
+  property: PropertyUnion;
+  name: string;
+  useExpression?: boolean;
+  required?: boolean;
+  label?: string;
+  title?: string;
+};
+
+export const MultiplePropertyFiller = ({ property, name, useExpression, required, label, title }: Props) => {
+  const { control, clearErrors } = useFormContext();
+  const {
+    field: { ref, onChange },
+    fieldState: { error, isDirty },
+  } = useController({
+    control,
+    name,
+    rules: {
+      validate: (val) => {
+        if (required && !val) {
+          return 'Please, fill this field';
+        }
+        return true;
+      },
+    },
+  });
+  const value = useWatch({ control, name });
+
+  const { propertyType, valueLabel, fillOptionLabel, fillOption, fillOptions, setFillOption } = usePropertyFiller({
+    property,
+    value,
+    isDirty,
+    label,
+    required,
+    useExpression,
+    multipleOptions: true,
+  });
+
+  const handleFillOptionChange = (event: SelectChangeEvent<PropertyFillType>) => {
+    const selectedType = event.target.value as PropertyFillType;
+
+    if (selectedType === 'null') {
+      onChange(null);
+    } else if (selectedType === 'expression' || selectedType === 'json_valid' || selectedType === 'json_notvalid') {
+      onChange('');
+    } else if (selectedType === 'widget') {
+      onChange([]);
+    }
+    setFillOption(selectedType);
+    clearErrors(name);
+  };
+
+  useEffect(() => {
+    if (value === undefined) {
+      onChange(null);
+    }
+  }, [value, onChange]);
+
+  const { classes } = useStyles();
+  return (
+    <Grid>
+      {title && (
+        <Box mb={2}>
+          <Typography variant="h6">{title}</Typography>
+        </Box>
+      )}
+      {fillOptions ? (
+        <Box mb={2}>
+          <FormControl fullWidth size="small" variant="outlined">
+            <InputLabel htmlFor="type-select" className={classes.inputLabel}>
+              {fillOptionLabel}
+            </InputLabel>
+            <Select
+              labelId="type-select"
+              label={fillOptionLabel}
+              value={fillOption || ''}
+              onChange={handleFillOptionChange}
+            >
+              {fillOptions.map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+      ) : null}
+      {fillOption === 'expression' &&
+        (propertyType === PropertyType.JSON ||
+        propertyType === PropertyType.ENTITY ||
+        propertyType === PropertyType.ANY ? (
+          <JsonEditor name={name} inputRef={ref} />
+        ) : (
+          <ControlInput required hideErrorMessage control={control} name={name} label={valueLabel} />
+        ))}
+      {fillOption === 'json_valid' && <JsonEditor validate name={name} inputRef={ref} />}
+      {fillOption === 'widget' && (
+        <MultiplePropertyWidget
+          property={property}
+          name={name}
+          useExpression={useExpression}
+          required={required}
+          label={label}
+        />
+      )}
+      {error && <Typography color="secondary">{error.message}</Typography>}
+    </Grid>
+  );
+};
+
+export default MultiplePropertyFiller;

package/src/lib/Property/PropertyFiller/MultiplePropertyWidget.tsx

@@ -0,0 +1,85 @@
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Unstable_Grid2';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import PropertyFiller from './PropertyFiller';
+
+import { useCallback } from 'react';
+import { useController, useFormContext, useWatch } from 'react-hook-form';
+import { removeArrayItem } from '../../../utils';
+
+import { PropertyUnion } from '../../../interfaces';
+
+type Props = {
+  name: string;
+  property: PropertyUnion;
+  useExpression?: boolean;
+  required?: boolean;
+  label?: string;
+};
+
+const MultiplePropertyWidget = ({ name, property, useExpression, required, label }: Props) => {
+  const { control, setValue, clearErrors } = useFormContext();
+  const controller = useController({
+    control,
+    name,
+    rules: {
+      validate: (val) => {
+        if (!val || (Array.isArray(val) && !val.length)) {
+          return 'Please, fill array';
+        }
+        return true;
+      },
+    },
+  });
+  const values = useWatch({ control, name });
+
+  const handleAddValue = useCallback(() => {
+    if (values && Array.isArray(values)) {
+      setValue(`${name}.${values.length}`, null);
+    } else {
+      setValue(name, [null]);
+    }
+    clearErrors(name);
+  }, [name, values, setValue, clearErrors]);
+
+  const handleDeleteValue = useCallback(
+    (index) => {
+      setValue(name, removeArrayItem(values, index));
+    },
+    [name, values, setValue]
+  );
+
+  return (
+    <Grid container spacing={2} direction="column" xs={12}>
+      {values && Array.isArray(values)
+        ? values.map((value, index) => (
+            <Grid key={index} xs={12}>
+              <Box display="flex" alignItems="flex-start" width="100%" p={2} style={{ backgroundColor: '#f1f1f1' }}>
+                <PropertyFiller
+                  required={required}
+                  property={property}
+                  useExpression={useExpression}
+                  name={`${name}.${index}`}
+                  label={`${label || property.name} (${index + 1})`}
+                />
+                <Box mt="8px" ml="4px">
+                  <IconButton size="small" onClick={() => handleDeleteValue(index)}>
+                    <CloseIcon fontSize="small" />
+                  </IconButton>
+                </Box>
+              </Box>
+            </Grid>
+          ))
+        : null}
+      <Grid>
+        <Button variant="contained" size="small" color="primary" onClick={handleAddValue}>
+          Add value
+        </Button>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default MultiplePropertyWidget;

package/src/lib/Property/PropertyFiller/PropertyFiller.tsx

@@ -0,0 +1,199 @@
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Unstable_Grid2';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Typography from '@mui/material/Typography';
+import JsonEditor from './JsonEditor';
+import { ControlInput } from '../../Forms';
+import { PropertyWidget } from '../PropertyWidget';
+
+import { useEffect } from 'react';
+import { useController, useFormContext, useWatch } from 'react-hook-form';
+import usePropertyFiller from './usePropertyFiller';
+import useStyles from './useStyles';
+
+import {
+  PropertyFillType,
+  PropertyType,
+  PropertyUnion,
+} from '../../../interfaces';
+import { CreateDefinition } from '../../Definition';
+import { defaultDefinitionArrayValue } from '../../../consts';
+import {
+  propertiesArrayToObject,
+  propertiesObjectToArray,
+} from '../../../utils';
+
+type Props = {
+  property: PropertyUnion;
+  name: string;
+  useExpression?: boolean;
+  label?: string;
+  required?: boolean;
+  title?: string;
+};
+
+export const PropertyFiller = ({
+  property,
+  name,
+  useExpression,
+  label,
+  required,
+  title,
+}: Props) => {
+  const { control, clearErrors } = useFormContext();
+  const {
+    field: { ref, onChange },
+    fieldState: { error, isDirty },
+  } = useController({
+    name,
+  });
+  const value = useWatch({ control, name });
+
+  const {
+    propertyType,
+    valueLabel,
+    fillOptionLabel,
+    fillOption,
+    fillOptions,
+    setFillOption,
+  } = usePropertyFiller({
+    value,
+    property,
+    isDirty,
+    label,
+    required,
+    useExpression,
+  });
+
+  const handleFillOptionChange = (
+    event: SelectChangeEvent<PropertyFillType>
+  ) => {
+    const selectedType = event.target.value as PropertyFillType;
+    if (selectedType === 'null') {
+      onChange(null);
+      // register(name, { value: null });
+    } else if (selectedType === 'widget') {
+      if (
+        propertyType === PropertyType.JSON &&
+        value &&
+        typeof value !== 'string' &&
+        fillOption === 'dem_builder' &&
+        'properties' in value
+      ) {
+        const definitionValue = {
+          ...value,
+          properties: propertiesArrayToObject(value.property || []),
+        };
+        try {
+          onChange(JSON.stringify(definitionValue, null, '\t'));
+        } catch (error) {
+          console.log('Stringify failed');
+        }
+      } else {
+        onChange(null);
+      }
+    } else if (selectedType === 'expression' || selectedType === 'string') {
+      onChange('');
+    } else if (selectedType === 'dem_builder') {
+      if (value) {
+        try {
+          const definitionValue = JSON.parse(value);
+          definitionValue['properties'] = propertiesObjectToArray(
+            definitionValue['properties'] || {}
+          );
+          onChange(definitionValue);
+        } catch (error) {
+          onChange(defaultDefinitionArrayValue);
+          console.log('Parse failed');
+        }
+      } else {
+        onChange(defaultDefinitionArrayValue);
+      }
+    }
+    setFillOption(selectedType);
+    clearErrors(name);
+  };
+
+  useEffect(() => {
+    if (value === undefined) {
+      onChange(null);
+    }
+  }, [value, onChange]);
+
+  const { classes } = useStyles();
+  return (
+    <Grid xs={12}>
+      {title && (
+        <Box mb={2}>
+          <Typography variant="h6">{title}</Typography>
+        </Box>
+      )}
+      {fillOptions ? (
+        <Box mb={2}>
+          <FormControl fullWidth size="small" variant="outlined">
+            <InputLabel htmlFor="type-select" className={classes.inputLabel}>
+              {fillOptionLabel}
+            </InputLabel>
+            <Select
+              labelId="type-select"
+              label={fillOptionLabel}
+              value={fillOption || ''}
+              onChange={handleFillOptionChange}
+            >
+              {fillOptions.map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+      ) : null}
+      {fillOption === 'expression' &&
+        (propertyType === PropertyType.JSON ||
+        propertyType === PropertyType.ENTITY ||
+        propertyType === PropertyType.ANY ? (
+          <JsonEditor name={name} inputRef={ref} />
+        ) : (
+          <ControlInput
+            control={control}
+            name={name}
+            label={valueLabel}
+            required
+            hideErrorMessage
+          />
+        ))}
+      {fillOption === 'string' && (
+        <ControlInput
+          control={control}
+          name={name}
+          label={valueLabel}
+          required
+          hideErrorMessage
+        />
+      )}
+      {fillOption === 'json_notvalid' && (
+        <JsonEditor name={name} inputRef={ref} />
+      )}
+      {fillOption === 'widget' && (
+        <PropertyWidget
+          property={property}
+          name={name}
+          useExpression={useExpression}
+          label={valueLabel}
+          inputRef={ref}
+          required={required}
+        />
+      )}
+      {fillOption === 'dem_builder' && (
+        <CreateDefinition title="JSON" definitionFieldName={name} />
+      )}
+      {error && <Typography color="secondary">{error.message}</Typography>}
+    </Grid>
+  );
+};
+
+export default PropertyFiller;

package/src/lib/Property/PropertyFiller/{index.d.ts → index.ts}

@@ -1,2 +1,2 @@
-export * from './PropertyFiller';
-export * from './MultiplePropertyFiller';
+export * from './PropertyFiller';
+export * from './MultiplePropertyFiller';

package/src/lib/Property/PropertyFiller/usePropertyFiller.ts

@@ -0,0 +1,72 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  getMultiplePropertyFillOptions,
+  getSinglePropertyFillOptions,
+  isExpression,
+  isPropertyValueEmpty,
+} from '../../../utils';
+
+import { PropertyFillType, PropertyUnion } from '../../../interfaces';
+
+type Props = {
+  value: unknown;
+  property: PropertyUnion;
+  isDirty: boolean;
+  label?: string;
+  required?: boolean;
+  useExpression?: boolean;
+  multipleOptions?: boolean;
+};
+
+const usePropertyFiller = ({
+  value,
+  property,
+  label,
+  isDirty,
+  required = false,
+  useExpression = false,
+  multipleOptions = false,
+}: Props) => {
+  const valueLabel = useMemo(() => (label ? `${label} (value)` : `${property.name} (value)`), [label, property]);
+  const fillOptionLabel = useMemo(() => (label ? `${label} (widget)` : `${property.name} (widget)`), [label, property]);
+
+  const propertyType = useMemo(
+    () => (typeof property.propertyType === 'string' ? property.propertyType : property['propertyType']['value']),
+    [property]
+  );
+
+  const [fillOption, setFillOption] = useState<PropertyFillType>(null);
+  const fillOptions = useMemo(
+    () =>
+      multipleOptions
+        ? getMultiplePropertyFillOptions({ propertyType, required, useExpression })
+        : getSinglePropertyFillOptions({
+            propertyType,
+            required,
+            useExpression,
+          }),
+    [useExpression, required, propertyType, multipleOptions]
+  );
+
+  useEffect(() => {
+    if (!fillOption) {
+      if (isPropertyValueEmpty(value) && fillOptions?.length) {
+        setFillOption(fillOptions[0].value);
+      } else if (useExpression && isExpression(value)) {
+        setFillOption('expression');
+      } else {
+        setFillOption('widget');
+      }
+    } else if (!isDirty) {
+      if (isExpression(value) && fillOption !== 'expression') {
+        setFillOption('expression');
+      } else if (value !== null && value !== undefined && !isExpression(value) && fillOption !== 'widget') {
+        setFillOption('widget');
+      }
+    }
+  }, [value, fillOption, fillOptions, useExpression, isDirty]);
+
+  return { propertyType, valueLabel, fillOptionLabel, fillOption, fillOptions, setFillOption };
+};
+
+export default usePropertyFiller;

package/src/lib/Property/PropertyFiller/useStyles.ts

@@ -0,0 +1,12 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()(() => ({
+  inputLabel: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    width: '100%',
+  },
+}));
+
+export default useStyles;

package/src/lib/Property/PropertyValidator/NodeValidator.tsx

@@ -0,0 +1,92 @@
+import { useContext, useMemo, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import { PropertyType } from '../../../interfaces';
+import { ControlSelect, ControlInput, ControlAceEditor } from '../../Forms';
+import { PropertyValidatorContext } from './PropertyValidatorContext';
+import { useWatch, useFormContext } from 'react-hook-form';
+import { StepperView } from '../../StepperView';
+import { StringTypeValidator } from './StringTypeValidator';
+import { NumericTypeValidator } from './NumericTypeValidator';
+
+type Props = {
+  name: string;
+}
+
+const validatorTypes = ['STRING_REGEX', 'JSON_SCHEMA'];
+
+const numericTypes = new Set([PropertyType.INTEGER, PropertyType.FLOAT, PropertyType.DOUBLE, PropertyType.BIG_DECIMAL, PropertyType.BIG_INTEGER, PropertyType.LONG]);
+
+const NodeValidator = ({ name }: Props) => {
+  const { control, setValue } = useFormContext();
+  const propertyType = useContext(PropertyValidatorContext);  
+  const selectedType = useWatch({ control, name: `${name}.type` });
+  const renderValidator = useMemo(() => {
+    if (selectedType === 'STRING_REGEX') {
+      return (
+        <ControlInput
+          control={control}
+          name={`${name}.pattern`}
+          label="Pattern"
+        />
+      )
+    } 
+    if (selectedType === 'JSON_SCHEMA') {
+      switch (true) {
+        case propertyType === PropertyType.STRING: {
+          return <StringTypeValidator name={`${name}.node`} control={control} />
+        }
+        case numericTypes.has(propertyType as PropertyType): {
+          return <NumericTypeValidator name={`${name}.node`} control={control} />
+        }
+        case propertyType === PropertyType.JSON: {
+          return (
+            <ControlAceEditor
+              label="Properties"
+              control={control}
+              name={`${name}.properties`}
+              validateJson
+              parseValue
+            />
+          )
+        }
+        default: return 'Not available for type ' + propertyType;
+      }
+    }    
+    return null;
+  }, [propertyType, selectedType, control, name]);
+
+  useEffect(() => {
+    if (numericTypes.has(propertyType as PropertyType) && selectedType === 'JSON_SCHEMA') {
+      // setting default values
+      setValue(`${name}.node.exclusiveMinimum`, false)
+      setValue(`${name}.node.exclusiveMaximum`, false)
+    }
+  }, [propertyType, selectedType, setValue, name]);
+  
+  return (
+    <StepperView
+      data={[{
+        label: 'Validator',
+        content: (
+          <>
+            <Box>
+              <ControlSelect
+                control={control}
+                name={`${name}.type`}
+                label="Type"
+                options={validatorTypes}
+                onChange={e => {
+                  setValue(name, {});
+                  setValue(`${name}.type`, e.target.value)
+                }}
+              />
+            </Box>
+            <Box mt={2}>{renderValidator}</Box> 
+          </>
+        )
+      }]}
+    />
+  )
+}
+
+export default NodeValidator;

package/src/lib/Property/PropertyValidator/NodesList.tsx

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import ValidationNodeSelector from './ValidationNodeSelector';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+type Props = {
+  name: string;
+}
+
+const NodesList = ({ name }: Props) => {
+  const listItem = useMemo(() => ({
+    type: ''
+  }), []);
+  const { control } = useFormContext();
+  const { fields, append, remove } = useFieldArray({ control, name });
+  
+  return (
+    <Box mt={2}>
+      <Button variant="outlined" size="small" onClick={() => append(listItem)}>Add node</Button>
+      {fields.map(({ id }, idx) => <ValidationNodeSelector removeHandle={() => remove(idx)} key={id} name={`${name}.${idx}`} />)}
+    </Box>
+  )
+}
+
+export default NodesList;

package/src/lib/Property/PropertyValidator/NumericTypeValidator.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { ControlInput, ControlCheckbox } from '../../Forms';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { Control } from 'react-hook-form';
+
+type Props = {
+  name: string;
+  control: Control<any>;
+}
+
+export const NumericTypeValidator = ({ name, control }: Props) => {
+  return (
+    <>
+      <Typography variant="body2" gutterBottom>Node</Typography>
+      <Box>        
+        <ControlInput        
+          control={control}        
+          name={`${name}.multipleOf`} 
+          label="Multiple Of"
+          type="number"
+        />
+      </Box>
+      <Box mt={2}>
+        <ControlInput
+          control={control}
+          name={`${name}.minimum`}
+          label="Minimum"
+          type="number"
+        />
+      </Box>
+      <Box mt={2}>
+        <ControlInput
+          control={control}
+          name={`${name}.maximum`}
+          label="Maximum"
+          type="number"
+        />
+      </Box>
+      <Box mt={2}>
+        <ControlCheckbox
+          control={control}
+          name={`${name}.exclusiveMinimum`}
+          label="Exclusive Minimum"
+          defaultValue={'false'}
+        />
+        <ControlCheckbox
+          control={control}
+          name={`${name}.exclusiveMaximum`}
+          label="Exclusive Maximum"
+          defaultValue={'false'}
+        />
+      </Box>
+      
+    </>
+  )
+}
+
+export default NumericTypeValidator;