@dartech/arsenal-ui 0.0.1

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

@@ -0,0 +1,59 @@
+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
+          clearable
+          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/EntityValueField.tsx

@@ -0,0 +1,33 @@
+import Step from '@material-ui/core/Step';
+import StepContent from '@material-ui/core/StepContent';
+import StepLabel from '@material-ui/core/StepLabel';
+import Stepper from '@material-ui/core/Stepper';
+import PropertyValue from './PropertyValue';
+
+import { PropertiesArrayType } from '../../../interfaces';
+
+type Props = {
+  label?: string;
+  name?: string;
+  properties: PropertiesArrayType;
+};
+
+const EntityValueField = ({ name, properties }: Props) => {
+  return properties && properties.length ? (
+    <Stepper nonLinear orientation="vertical">
+      {properties.map((property, index) => (
+        <Step expanded key={index}>
+          <StepLabel StepIconProps={{ icon: '', completed: false, active: true }}>
+            {property.name} - {property.key}
+          </StepLabel>
+          <StepContent>
+            <PropertyValue name={`${name}.${property.key}`} property={property} label={property.name} />
+          </StepContent>
+        </Step>
+      ))}
+      <Step />
+    </Stepper>
+  ) : null;
+};
+
+export default EntityValueField;

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

@@ -0,0 +1,64 @@
+import AceEditor from 'react-ace';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Typography from '@material-ui/core/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,
+              }}
+            />
+            {error && <FormHelperText error>{error.message}</FormHelperText>}
+          </>
+        )}
+      />
+    </>
+  );
+};
+
+export default JsonValueField;

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

@@ -0,0 +1,97 @@
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import ValueComponent, { ValueComponentProps } from './ValueComponent';
+
+import { useCallback, useMemo } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+import { PropertyUnion } from '../../../interfaces';
+import { removeArrayItem } from '../../../utils';
+
+type Props = {
+  property: PropertyUnion;
+  name: string;
+  label?: string;
+  required?: boolean | 'byProperty';
+};
+
+const PropertyValue = ({ property, name, label, required = 'byProperty' }: Props) => {
+  const { control, setValue } = useFormContext();
+  const values = useWatch({ control, name });
+
+  const handleDeleteValue = useCallback(
+    (index) => {
+      setValue(name, removeArrayItem(values, index));
+    },
+    [name, values]
+  );
+
+  const handleAddValue = useCallback(() => {
+    if (values && Array.isArray(values)) {
+      setValue(`${name}.${values.length}`, null);
+    } else {
+      setValue(name, [null]);
+    }
+  }, [name, values]);
+
+  const valueComponentProps: ValueComponentProps = useMemo(
+    () => ({
+      control,
+      name,
+      label,
+      required: required === 'byProperty' ? property.isRequired : required,
+      propertyType: typeof property.propertyType === 'string' ? property.propertyType : property.propertyType['value'],
+      format: property['format'],
+      restrictedValues: property['restrictedValues'],
+      properties: property['properties'],
+    }),
+    [
+      name,
+      label,
+      required,
+      property.propertyType,
+      property['format'],
+      property['restrictedValues'],
+      property['properties'],
+    ]
+  );
+
+  return property.isMultiple ? (
+    <Grid item container spacing={2} direction="column">
+        <Grid item>
+          <Typography variant="h6">{label}</Typography>
+        </Grid>
+        {values && Array.isArray(values) ? (
+          <>
+            {values.map((_, index) => (
+              <Grid item key={index}>
+                <Box display="flex" alignItems="center">
+                  <ValueComponent
+                    {...valueComponentProps}
+                    label={`${property.name} (${index})`}
+                    name={`${name}.${index}`}
+                  />
+                  <IconButton size="small" onClick={() => handleDeleteValue(index)}>
+                    <CloseIcon fontSize="small" />
+                  </IconButton>
+                </Box>
+              </Grid>
+            ))}
+          </>
+        ) : null}
+        <Grid item>
+          <Button variant="contained" size="small" color="primary" onClick={handleAddValue}>
+            Add value
+          </Button>
+        </Grid>
+      </Grid>
+  ) : (
+    <ValueComponent {...valueComponentProps} />
+  );
+};
+
+export default PropertyValue;

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

@@ -0,0 +1,86 @@
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import ValueComponent, { ValueComponentProps } from './ValueComponent';
+
+import { useCallback, useEffect, useMemo } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { removeArrayItem } from '../../../utils';
+
+type Props = {
+  propertyFieldName: string;
+  name: string;
+  label?: string;
+  required?: boolean;
+};
+
+export const PropertyValueField = ({ propertyFieldName, name, label = '', required }: Props) => {
+  const { control, setValue } = 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 values = useWatch({ control, name });
+
+  useEffect(() => {
+    if (isMultiple && !Array.isArray(values)) {
+      setValue(name, [values]);
+    } else if (!isMultiple && Array.isArray(values)) {
+      setValue(name, values[0]);
+    }
+  }, [isMultiple, values, name]);
+
+  const valueComponentProps: ValueComponentProps = useMemo(() => {
+    const typeValue = typeof propertyType === 'string' ? propertyType : propertyType.value;
+    return { control, name, label, required, format, restrictedValues, properties, propertyType: typeValue };
+  }, [propertyType, format, restrictedValues, name, label, required, properties]);
+
+  const handleDeleteValue = useCallback(
+    (index) => {
+      setValue(name, removeArrayItem(values, index));
+    },
+    [name, values]
+  );
+
+  const handleAddValue = useCallback(() => {
+    if (values && Array.isArray(values)) {
+      setValue(`${name}.${values.length}`, null);
+    } else {
+      setValue(name, [null]);
+    }
+  }, [name, values]);
+
+  return isMultiple ? (
+    values && Array.isArray(values) ? (
+      <Grid item container spacing={2} direction="column">
+        <Grid item>
+          <Typography variant="h6">{label}</Typography>
+        </Grid>
+        {values.map((_, index) => (
+          <Grid item key={index}>
+            <Box display="flex" alignItems="center">
+              <ValueComponent {...valueComponentProps} label="" name={`${name}.${index}`} />
+              <IconButton size="small" onClick={() => handleDeleteValue(index)}>
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            </Box>
+          </Grid>
+        ))}
+        <Grid item>
+          <Button variant="contained" size="small" color="primary" onClick={handleAddValue}>
+            Add value
+          </Button>
+        </Grid>
+      </Grid>
+    ) : null
+  ) : (
+    <ValueComponent {...valueComponentProps} />
+  );
+};
+
+export default PropertyValueField;

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

@@ -0,0 +1,21 @@
+import { useFormContext, useWatch } from 'react-hook-form';
+import { ControlInput, ControlSelect } from '../../Forms';
+
+type Props = {
+  name: string;
+  label?: string;
+  required?: boolean;
+  restrictedValues?: string[];
+};
+
+const StringValueField = ({ name, label, required = false, restrictedValues }: Props) => {
+  const { control } = useFormContext();
+
+  return Array.isArray(restrictedValues) && restrictedValues.length ? (
+    <ControlSelect required={required} control={control} name={name} label={label} options={restrictedValues} />
+  ) : (
+    <ControlInput required={required} control={control} name={name} label={label} />
+  );
+};
+
+export default StringValueField;

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

@@ -0,0 +1,68 @@
+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
+      clearable
+      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/ValueComponent.tsx

@@ -0,0 +1,63 @@
+import { PropertiesArrayType, PropertyType } from '../../../interfaces';
+import { Control } from 'react-hook-form';
+import { DefinitionFiller } from '../../Definition';
+import { ControlInput, ControlNumberInput } from '../../Forms';
+import BooleanValueField from './BooleanValueField';
+import DateTimeValueField from './DateTimeValueField';
+import DateValueField from './DateValueField';
+import JsonValueField from './JsonValueField';
+import StringValueField from './StringValueField';
+import TimeValueField from './TimeValueField';
+
+export type ValueComponentProps = {
+  control: Control;
+  propertyType: PropertyType;
+  name: string;
+  label: string;
+  required: boolean;
+  format?: string;
+  restrictedValues?: string[];
+  properties?: PropertiesArrayType;
+};
+
+const ValueComponent = ({
+  propertyType,
+  control,
+  name,
+  label,
+  required,
+  format,
+  restrictedValues,
+  properties,
+}: ValueComponentProps) => {
+  switch (propertyType) {
+    case PropertyType.BIG_DECIMAL:
+    case PropertyType.FLOAT:
+    case PropertyType.DOUBLE:
+      return <ControlNumberInput decimal control={control} name={name} label={label} required={required} />;
+    case PropertyType.INTEGER:
+    case PropertyType.BIG_INTEGER:
+    case PropertyType.LONG:
+      return <ControlNumberInput control={control} name={name} label={label} required={required} />;
+    case PropertyType.BOOLEAN:
+      return <BooleanValueField name={name} label={label} />;
+    case PropertyType.DATE:
+      return <DateValueField name={name} label={label} format={format} required={required} />;
+    case PropertyType.TIME:
+      return <TimeValueField name={name} label={label} format={format} required={required} />;
+    case PropertyType.DATE_TIME:
+      return <DateTimeValueField name={name} label={label} format={format} required={required} />;
+    case PropertyType.JSON:
+      return <JsonValueField name={name} label={label} required={required} />;
+    case PropertyType.STRING:
+      return <StringValueField name={name} label={label} required={required} restrictedValues={restrictedValues} />;
+    case PropertyType.ENTITY_REFERENCE:
+      return <ControlInput name={name} control={control} label={label} required={required} />;
+    case PropertyType.ENTITY:
+      return <DefinitionFiller dataFieldName={name} properties={properties} />;
+    default:
+      return null;
+  }
+};
+
+export default ValueComponent;

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

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

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

@@ -0,0 +1,167 @@
+import Box from '@material-ui/core/Box';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+import Typography from '@material-ui/core/Typography';
+import { ControlAceEditor, ControlInput } from '../../Forms';
+import PropertyValue from '../PropertyValueField/PropertyValue';
+import { WidgetDefinitionFiller } from '../../Definition';
+
+import { useEffect, useMemo, useState } from 'react';
+import { useController, useFormContext, useWatch } from 'react-hook-form';
+import { getEntityStarterValue, isExpression } from '../../../utils';
+
+import { PropertyType, PropertyUnion } from '../../../interfaces';
+
+type Props = {
+  property: PropertyUnion;
+  nullable?: boolean;
+  name: string;
+};
+
+type InputType = 'expression' | 'widget' | 'null' | 'string';
+
+const getInputTypes = (propertyType: PropertyType, nullable: boolean): { value: InputType; label: string }[] => {
+  const options: { value: InputType; label: string }[] = [
+    {
+      value: 'widget',
+      label: 'Widget',
+    },
+    {
+      value: 'expression',
+      label: 'Expression',
+    },
+  ];
+
+  if (nullable) {
+    options.push({
+      value: 'null',
+      label: 'NULL',
+    });
+  }
+
+  switch (propertyType) {
+    case PropertyType.STRING:
+      options[0].label = 'Text input';
+      break;
+    case PropertyType.INTEGER:
+    case PropertyType.BIG_INTEGER:
+    case PropertyType.BIG_DECIMAL:
+    case PropertyType.FLOAT:
+    case PropertyType.LONG:
+    case PropertyType.DOUBLE:
+      options[0].label = 'Number input';
+      break;
+    case PropertyType.BOOLEAN:
+      options[0].label = 'Checkbox';
+      break;
+    case PropertyType.ENTITY_REFERENCE:
+      options[0].label = 'Entity reference fields';
+      break;
+    case PropertyType.JSON:
+      options[0].label = 'JSON';
+      break;
+    case PropertyType.DATE:
+      options[0].label = 'Date';
+      options.push({ value: 'string', label: 'Text input' });
+      break;
+    case PropertyType.DATE_TIME:
+      options[0].label = 'Date time';
+      options.push({ value: 'string', label: 'Text input' });
+      break;
+    case PropertyType.TIME:
+      options[0].label = 'Time';
+      options.push({ value: 'string', label: 'Text input' });
+      break;
+    default:
+      break;
+  }
+
+  return options;
+};
+
+export const PropertyWidget = ({ property, name = '', nullable = false }: Props) => {
+  const { control, setValue } = useFormContext();
+  const {
+    fieldState: { error },
+  } = useController({ name });
+  const value = useWatch({ control, name });
+
+  const [inputType, setInputType] = useState<InputType>('widget');
+
+  const inputOptions = useMemo(
+    () => getInputTypes(property.propertyType, nullable && !property.isRequired),
+    [property, nullable]
+  );
+
+  const handleInputTypeChange = (event: React.ChangeEvent<{ value: InputType }>) => {
+    setInputType(event.target.value);
+  };
+
+  useEffect(() => {
+    if (value && !inputType) {
+      if (value === null && nullable && !property.isRequired) {
+        setInputType('null');
+      } else if (isExpression(inputType)) {
+        setInputType('expression');
+      } else {
+        setInputType('widget');
+      }
+    }
+  }, [value, inputType, property.isRequired, nullable]);
+
+  useEffect(() => {
+    if (!value && inputType === 'expression' && property.propertyType === PropertyType.ENTITY) {
+      setValue(name, JSON.stringify(getEntityStarterValue(property), null, 2));
+    }
+  }, [value, inputType, property.propertyType]);
+
+  return (
+    <>
+      {inputOptions.length ? (
+        <>
+          <Box mb={2}>
+            <FormControl fullWidth size="small" variant="outlined">
+              <InputLabel htmlFor="type-select">Input type</InputLabel>
+              <Select labelId="type-select" label="Input type" value={inputType} onChange={handleInputTypeChange}>
+                {inputOptions.map((option) => (
+                  <MenuItem key={option.value} value={option.value}>
+                    {option.label}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Box>
+          {inputType ? (
+            <>
+              {inputType === 'widget' &&
+                (property.propertyType === PropertyType.ENTITY ? (
+                  <WidgetDefinitionFiller dataFieldName={name} properties={property.properties} nullable={nullable} />
+                ) : (
+                  <PropertyValue name={name} property={property} label={property.name} />
+                ))}
+              {inputType === 'expression' &&
+                (property.propertyType === PropertyType.ENTITY || property.propertyType === PropertyType.JSON ? (
+                  <ControlAceEditor
+                      required
+                      mode="json"
+                      fontSize={14}
+                      validateJson={false}
+                      control={control}
+                      name={name}
+                    />
+                ) : (
+                  <ControlInput required name={name} control={control} label="Expression" />
+                ))}
+              {inputType === 'string' && <ControlInput required name={name} control={control} label={'Text input'} />}
+            </>
+          ) : null}
+        </>
+      ) : null}
+      {error && <Typography color="secondary">{error.message}</Typography>}
+    </>
+  );
+};
+
+export default PropertyWidget;

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

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