@dartech/arsenal-ui 1.2.4 → 1.2.6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,67 @@
+import TextField from '@mui/material/TextField';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+
+import { format as dateFnsFormat, isValid, parse } from 'date-fns';
+import { useEffect, useState } from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import { TIME_DEFAULT_FORMAT } from '../../../interfaces';
+
+type Props = {
+  name: string;
+  label?: string;
+  format?: string;
+  required?: boolean;
+};
+
+const TimeValueField = ({ name, label, format = TIME_DEFAULT_FORMAT, required = false }: Props) => {
+  const { control, setError, clearErrors } = useFormContext();
+  const {
+    field: { ref, onChange, value },
+    fieldState: { error },
+  } = useController({ control, name, rules: { required: required && 'Required field' } });
+
+  const [fieldValue, setFieldValue] = useState(null);
+
+  useEffect(() => {
+    if (value && format) {
+      let parsedValue = parse(value, format, new Date());
+
+      if (!isValid(parsedValue)) {
+        parsedValue = parse(value, 'HH:mm:ss.SSS', new Date());
+      }
+
+      setFieldValue(parsedValue);
+    }
+  }, [value, format]);
+
+  const handleChange = (date: Date) => {
+    setFieldValue(date);
+    onChange(isValid(date) ? dateFnsFormat(date, format) : date);
+  };
+
+  const onError = (err) => {
+    if (err) {
+      setError(name, { type: 'custom', message: 'Incorrect date format' });
+    } else {
+      clearErrors(name);
+    }
+  };
+
+  return (
+    <TimePicker
+      mask=""
+      inputRef={ref}
+      label={label}
+      ampm={false}
+      value={fieldValue}
+      inputFormat={format}
+      onError={onError}
+      onChange={handleChange}
+      renderInput={(props) => (
+        <TextField {...props} fullWidth size="small" variant="outlined" error={!!error} helperText={error?.message} />
+      )}
+    />
+  );
+};
+
+export default TimeValueField;

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

@@ -1 +1 @@
-export * from './PropertyValueField';
+export * from './PropertyValueField';

package/src/lib/Property/PropertyWidget/PropertyWidget.tsx

@@ -0,0 +1,115 @@
+import {
+  ControlDate,
+  ControlDateTime,
+  ControlInput,
+  ControlNumberInput,
+  ControlSwitch,
+  ControlTime,
+} from '../../Forms';
+import JsonEditor from '../PropertyFiller/JsonEditor';
+import StringValueField from '../PropertyValueField/StringValueField';
+import { DefinitionFiller } from '../../Definition';
+
+import { RefCallBack, useFormContext } from 'react-hook-form';
+
+import {
+  DateProperty,
+  DateTimeProperty,
+  EntityTypeProperty,
+  PropertiesArrayType,
+  PropertyType,
+  PropertyUnion,
+  StringProperty,
+  TimeProperty,
+} from '../../../interfaces';
+import { useMemo } from 'react';
+
+type Props = {
+  property: PropertyUnion;
+  name: string;
+  label?: string;
+  useExpression?: boolean;
+  required?: boolean;
+  inputRef: RefCallBack;
+};
+
+export const PropertyWidget = ({ property, name, label, useExpression, inputRef }: Props) => {
+  const { control } = useFormContext();
+  const propertyType = useMemo(
+    () => (typeof property.propertyType === 'string' ? property.propertyType : property['propertyType']['value']),
+    [property]
+  );
+
+  switch (propertyType) {
+    case PropertyType.BIG_DECIMAL:
+    case PropertyType.FLOAT:
+    case PropertyType.DOUBLE:
+      return <ControlNumberInput decimal required hideErrorMessage control={control} name={name} label={label} />;
+    case PropertyType.INTEGER:
+    case PropertyType.BIG_INTEGER:
+    case PropertyType.LONG:
+      return <ControlNumberInput required hideErrorMessage control={control} name={name} label={label} />;
+    case PropertyType.BOOLEAN:
+      return <ControlSwitch control={control} name={name} />;
+    case PropertyType.DATE:
+      return (
+        <ControlDate
+          required
+          hideErrorMessage
+          control={control}
+          name={name}
+          label={label}
+          format={(property as DateProperty).format}
+        />
+      );
+    case PropertyType.TIME:
+      return (
+        <ControlTime
+          required
+          hideErrorMessage
+          control={control}
+          name={name}
+          label={label}
+          format={(property as TimeProperty).format}
+        />
+      );
+    case PropertyType.DATE_TIME:
+      return (
+        <ControlDateTime
+          required
+          hideErrorMessage
+          control={control}
+          name={name}
+          label={label}
+          format={(property as DateTimeProperty).format}
+        />
+      );
+    case PropertyType.JSON:
+      return <JsonEditor validate name={name} inputRef={inputRef} />;
+    case PropertyType.STRING:
+      return (
+        <StringValueField
+          required
+          name={name}
+          label={label}
+          restrictedValues={(property as StringProperty).restrictedValues}
+        />
+      );
+    case PropertyType.ENTITY_REFERENCE:
+      return <ControlInput required hideErrorMessage name={name} label={label} control={control} />;
+    case PropertyType.ANY:
+      return <JsonEditor name={name} inputRef={inputRef} />;
+    case PropertyType.ENTITY:
+      return (
+        <DefinitionFiller
+          properties={(property as EntityTypeProperty).properties as PropertiesArrayType}
+          dataFieldName={name}
+          useExpression={useExpression}
+        />
+      );
+    default:
+      return <div>No widget</div>;
+  }
+};
+
+export default PropertyWidget;

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

@@ -1 +1 @@
-export * from './PropertyWidget';
+export * from './PropertyWidget';