@dartech/arsenal-ui 1.2.6 → 1.2.7

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;

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

@@ -1,58 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-
-import { format as dateFnsFormat, isValid } from 'date-fns';
-import { Controller, useFormContext } from 'react-hook-form';
-import { DATE_TIME_DEFAULT_FORMAT } from '../../../interfaces';
-
-type Props = {
-  name: string;
-  label?: string;
-  required?: boolean;
-  format?: string;
-};
-
-const DateTimeValueField = ({ name, label, required = false, format = DATE_TIME_DEFAULT_FORMAT }: Props) => {
-  const { control, setError, clearErrors } = useFormContext();
-
-  const onError = (err) => {
-    if (err) {
-      setError(name, { type: 'custom', message: 'Incorrect date format' });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      rules={{ required: required && 'Required field' }}
-      render={({ field: { ref, value, onChange }, fieldState: { error } }) => (
-        <DateTimePicker
-          ampm={false}
-          inputRef={ref}
-          label={label}
-          value={value || null}
-          inputFormat={format}
-          onError={onError}
-          onChange={(date) => {
-            onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-          }}
-          renderInput={(props) => (
-            <TextField
-              {...props}
-              fullWidth
-              size="small"
-              variant="outlined"
-              error={!!error}
-              helperText={error?.message}
-            />
-          )}
-        />
-      )}
-    />
-  );
-};
-
-export default DateTimeValueField;

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

@@ -1,58 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-
-import { format as dateFnsFormat, isValid } from 'date-fns';
-import { Controller, useFormContext } from 'react-hook-form';
-import { DATE_DEFAULT_FORMAT } from '../../../interfaces';
-
-type Props = {
-  name: string;
-  format: string;
-  label?: string;
-  required?: boolean;
-};
-
-const DateValueField = ({ name, label = '', required = false, format = DATE_DEFAULT_FORMAT }: Props) => {
-  const { control, setError, clearErrors } = useFormContext();
-
-  const onError = (err) => {
-    if (err) {
-      setError(name, { type: 'custom', message: 'Incorrect date format' });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      rules={{ required: required && 'Required field' }}
-      render={({ field: { ref, value, onChange }, fieldState: { error } }) => (
-        <DatePicker
-          mask=""
-          label={label}
-          inputRef={ref}
-          inputFormat={format}
-          value={value || null}
-          onError={onError}
-          onChange={(date) => {
-            onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-          }}
-          renderInput={(props) => (
-            <TextField
-              {...props}
-              fullWidth
-              size="small"
-              variant="outlined"
-              error={!!error}
-              helperText={error?.message}
-            />
-          )}
-        />
-      )}
-    />
-  );
-};
-
-export default DateValueField;

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

@@ -1,65 +0,0 @@
-import AceEditor from 'react-ace';
-import FormHelperText from '@mui/material/FormHelperText';
-import Typography from '@mui/material/Typography';
-import { Controller, useFormContext } from 'react-hook-form';
-
-import 'ace-builds/src-noconflict/ace';
-import 'ace-builds/src-noconflict/mode-json';
-
-type Props = {
-  name: string;
-  label?: string;
-  required?: boolean;
-};
-
-const JsonValueField = ({ name, label, required = false }: Props) => {
-  const { control, setError, clearErrors } = useFormContext();
-
-  return (
-    <>
-      <Typography>{label}</Typography>
-      <Controller
-        control={control}
-        name={name}
-        rules={{
-          required: required && 'Required field',
-        }}
-        render={({ field: { value, onChange }, fieldState: { error } }) => (
-          <>
-            <AceEditor
-              value={value && typeof value !== 'string' ? JSON.stringify(value, null, 2) : value}
-              onChange={(value) => {
-                if (!value) {
-                  onChange('');
-                  return null;
-                }
-                try {
-                  clearErrors(name);
-                  const val = JSON.parse(value);
-                  onChange(Array.isArray(val) ? '' : val);
-                } catch (e) {
-                  setError(name, { message: 'Invalid JSON' });
-                  onChange(value);
-                }
-              }}
-              mode="json"
-              width="100%"
-              height="200px"
-              fontSize="16"
-              setOptions={{
-                enableSnippets: false,
-                copyWithEmptySelection: true,
-                showLineNumbers: true,
-                tabSize: 2,
-                useWorker: false
-              }}
-            />
-            {error && <FormHelperText error>{error.message}</FormHelperText>}
-          </>
-        )}
-      />
-    </>
-  );
-};
-
-export default JsonValueField;

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

@@ -1,49 +0,0 @@
-import { useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { MultiplePropertyFiller, PropertyFiller } from '../PropertyFiller';
-import { PropertyUnion } from '../../../interfaces';
-
-type Props = {
-  propertyFieldName: string;
-  name: string;
-  label?: string;
-  required?: boolean;
-};
-
-export const PropertyValueField = ({ propertyFieldName, name, label = '', required }: Props) => {
-  const { control } = useFormContext();
-
-  const propertyType = useWatch({ control, name: `${propertyFieldName}.propertyType` });
-  const isMultiple = useWatch({ control, name: `${propertyFieldName}.isMultiple` });
-  const format = useWatch({ control, name: `${propertyFieldName}.format` });
-  const restrictedValues = useWatch({ control, name: `${propertyFieldName}.restrictedValues` });
-  const properties = useWatch({ control, name: `${propertyFieldName}.properties` });
-  const isRequired = useWatch({ control, name: `${propertyFieldName}.isRequired` });
-
-  const fillerProperty: PropertyUnion = useMemo(() => {
-    const typeValue = typeof propertyType === 'string' ? propertyType : propertyType.value;
-    return {
-      name: label,
-      isRequired,
-      isMultiple,
-      format,
-      restrictedValues,
-      properties,
-      propertyType: typeValue,
-      defaultValue: null,
-      defaultValues: [],
-      sortOrder: 0,
-      isEnabled: true,
-      uiSettings: null,
-      validationNode: null,
-    };
-  }, [propertyType, format, restrictedValues, isMultiple, label, isRequired, properties]);
-
-  return isMultiple ? (
-    <MultiplePropertyFiller name={name} property={fillerProperty} title={label} required={required} />
-  ) : (
-    <PropertyFiller name={name} property={fillerProperty} title={label} required={required} />
-  );
-};
-
-export default PropertyValueField;

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

@@ -1,50 +0,0 @@
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
-import { ControlInput } from '../../Forms';
-
-import { useController, useFormContext, useWatch } from 'react-hook-form';
-
-type Props = {
-  name: string;
-  label?: string;
-  required?: boolean;
-  restrictedValues?: string[];
-};
-
-const StringValueField = ({ name, label, required, restrictedValues }: Props) => {
-  const { control } = useFormContext();
-  const {
-    field: { onChange, ref },
-    fieldState: { error },
-  } = useController({
-    control,
-    name,
-    rules: {
-      required:
-        required &&
-        (Array.isArray(restrictedValues) && restrictedValues.length
-          ? 'Please, select a value'
-          : 'Please, fill this field'),
-    },
-  });
-  const value = useWatch({ control, name });
-
-  return Array.isArray(restrictedValues) && restrictedValues.length ? (
-    <FormControl fullWidth size="small" variant="outlined" error={!!error}>
-      <InputLabel htmlFor="type-select">{label}</InputLabel>
-      <Select labelId="type-select" label={label} value={value || ''} onChange={onChange} ref={ref}>
-        {restrictedValues.map((restrictedValue) => (
-          <MenuItem key={restrictedValue} value={restrictedValue}>
-            {restrictedValue}
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
-  ) : (
-    <ControlInput hideErrorMessage required={required} control={control} name={name} label={label} />
-  );
-};
-
-export default StringValueField;