@dartech/arsenal-ui 1.3.0 → 1.3.2

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

@@ -1,199 +0,0 @@
-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/usePropertyFiller.ts

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

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

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

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

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

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

@@ -1,42 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-import ValidationNodeSelector from './ValidationNodeSelector';
-import { useFormContext } from 'react-hook-form';
-
-type Props = {
-  name: string;
-}
-
-export const PropertyValidator = ({ name }: Props) => {
-  const [enable, setEnable] = useState(false);
-  const { setValue, getValues } = useFormContext();
-  
-  const handleChangeEnable = useCallback(e => {
-    setEnable(e.target.checked);
-    if (!e.target.checked) {
-      setValue(name, null);
-    }
-  }, [setValue, name]);
-
-  useEffect(() => {
-    const validator = getValues(name);
-    if (validator) setEnable(true);
-  }, [name, getValues]);
-
-  return (
-    <>
-      <Box display="flex" justifyContent="space-between">
-        <Typography variant="h6">Validator</Typography>
-        <FormControlLabel label="Enable" control={<Checkbox color="primary" checked={enable} onChange={handleChangeEnable} />  } />
-      </Box>
-      {
-        enable && <ValidationNodeSelector name={name} />
-      }      
-    </>    
-  )
-}
-
-export default PropertyValidator;

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

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-import type { PropertyType } from '../../../interfaces';
-
-export const PropertyValidatorContext = createContext<PropertyType | ''>('');

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

@@ -1,36 +0,0 @@
-import React from 'react'
-import { ControlInput } 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;
-}
-
-export const StringTypeValidator = ({ name, control }: Props) => {
-  return (
-    <>
-      <Typography variant="body2" gutterBottom>Node</Typography>
-      <Box>        
-        <ControlInput        
-          control={control}        
-          name={`${name}.minimumLength`} 
-          label="Minimum Length"
-          type="number"
-        />
-      </Box>
-      <Box mt={2}>
-        <ControlInput
-          control={control}
-          name={`${name}.maximumLength`}
-          label="Maximum Length"
-          type="number"
-        />
-      </Box>
-    </>
-  )
-}
-
-export default StringTypeValidator;

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

@@ -1,62 +0,0 @@
-import { useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { ControlSelect } from '../../Forms';
-import IconButton from '@mui/material/IconButton';
-import DeleteIcon from '@mui/icons-material/Delete';
-import Box from '@mui/material/Box';
-import NodesList from './NodesList';
-import NodeValidator from './NodeValidator';
-import { StepperView } from '../../StepperView';
-
-type Props = {
-  name: string;
-  removeHandle?: () => void;
-}
-
-const nodeTypes = ['AND', 'OR', 'NOT', 'NODE'];
-
-const ValidationNodeSelector = ({ name, removeHandle }: Props) => {
-  const { control } = useFormContext();
-  const selectedType = useWatch({ control, name: `${name}.type` });
-  const nodeComponent = useMemo(() => ({
-    AND: <NodesList name={`${name}.nodes`} />,
-    OR: <NodesList name={`${name}.nodes`} />,
-    NODE: <NodeValidator name={`${name}.validator`} />,
-    NOT: <ValidationNodeSelector name={`${name}.node`} />,
-  }), [name]);
-  return (
-    <StepperView 
-      data={[{
-        label: 'Node Type',
-        content: (
-          <>
-            <Box display="flex" alignItems="center">
-              <ControlSelect
-                required
-                control={control}
-                name={`${name}.type`}
-                label="Type"
-                options={nodeTypes}
-              />
-              {
-                removeHandle && (
-                  <Box ml={2}>
-                    <IconButton onClick={removeHandle} color="primary">
-                      <DeleteIcon />
-                    </IconButton>  
-                  </Box>
-                  
-                )
-              }
-            </Box> 
-            <Box>
-              {nodeComponent[selectedType]}
-            </Box> 
-          </>
-        )
-      }]}
-    />    
-  )
-}
-
-export default ValidationNodeSelector;

package/src/lib/Property/PropertyValidator/index.ts

@@ -1 +0,0 @@
-export * from './PropertyValidator';

package/src/lib/Property/PropertyValueField/BooleanValueField.tsx

@@ -1,49 +0,0 @@
-import Switch from '@mui/material/Switch';
-import Typography from '@mui/material/Typography';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import { Controller, useFormContext, useWatch } from 'react-hook-form';
-import { useEffect } from 'react';
-
-type Props = {
-  name: string;
-  label?: string;
-};
-
-const BooleanValueField = ({ name, label = '' }: Props) => {
-  const { control, setValue } = useFormContext();
-  const value = useWatch({ name, control });
-
-  useEffect(() => {
-    if (value === null) {
-      setValue(name, false);
-    }
-  }, [value, name]);
-
-  return (
-    <>
-      <Typography>{label}</Typography>
-      <Controller
-        control={control}
-        name={name}
-        render={({ field }) => (
-          <FormControlLabel
-            label={(!!field.value + '').toUpperCase()}
-            control={
-              <Switch
-                color="primary"
-                size="small"
-                onChange={(e) => {
-                  const { checked } = e.target;
-                  field.onChange(checked);
-                }}
-                checked={!!field.value + '' === 'true'}
-              />
-            }
-          />
-        )}
-      />
-    </>
-  );
-};
-
-export default BooleanValueField;