@dartech/arsenal-ui 0.0.1

package/src/lib/Definition/DefinitionFiller/DefinitionFiller.tsx

@@ -0,0 +1,85 @@
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+import StepContent from '@material-ui/core/StepContent';
+import StepConnector from '@material-ui/core/StepConnector';
+
+import PropertyValue from '../../Property/PropertyValueField/PropertyValue';
+import { PropertiesArrayType } from '../../../interfaces';
+import { makeStyles } from '@material-ui/core';
+
+type Props = {
+  properties: PropertiesArrayType;
+  dataFieldName: string;
+};
+
+const useStyles = makeStyles(() => ({
+  content: {
+    marginLeft: '4px',
+  },
+  connector: {
+    marginLeft: '4px',
+  },
+  stepper: {
+    padding: '12px',
+  },
+  label: {
+    display: 'flex',
+    alignItems: 'flex-start',
+  },
+}));
+
+const StepIcon = () => (
+  <div
+    style={{
+      display: 'inline-block',
+      width: '10px',
+      height: '10px',
+      borderRadius: '50%',
+      backgroundColor: '#536DFE',
+      marginTop: '5px',
+    }}
+  />
+);
+
+export const DefinitionFiller = ({ properties, dataFieldName }: Props) => {
+  const classes = useStyles();
+
+  return (
+    <Grid container item direction="column" spacing={2}>
+      {properties?.length ? (
+        <Stepper
+          nonLinear
+          orientation="vertical"
+          className={classes.stepper}
+          connector={<StepConnector className={classes.connector} />}
+        >
+          {properties.map((property, index) => (
+            <Step expanded key={index}>
+              <StepLabel
+                className={classes.label}
+                StepIconComponent={StepIcon}
+                StepIconProps={{ icon: '', completed: false, active: true }}
+              >
+                <Box display="flex" flexDirection="column">
+                  <b>{property.name}</b>
+                  <span>
+                    {property.propertyType} | Key: {property.key}
+                  </span>
+                </Box>
+              </StepLabel>
+              <StepContent className={classes.content}>
+                <PropertyValue name={`${dataFieldName}.${property.key}`} property={property} label={property.name} />
+              </StepContent>
+            </Step>
+          ))}
+          <Step />
+        </Stepper>
+      ) : null}
+    </Grid>
+  );
+};
+
+export default DefinitionFiller;

package/src/lib/Definition/DefinitionFiller/WidgetDefinitionFiller.tsx

@@ -0,0 +1,96 @@
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+import StepContent from '@material-ui/core/StepContent';
+import StepConnector from '@material-ui/core/StepConnector';
+
+import { useMemo } from 'react';
+import { makeStyles } from '@material-ui/core';
+import { PropertiesArrayType, PropertiesObjectType } from '../../../interfaces';
+import { PropertyWidget } from '../../Property/PropertyWidget';
+import { propertiesObjectToArray } from '../../../utils';
+
+type Props = {
+  properties: PropertiesArrayType | PropertiesObjectType;
+  dataFieldName: string;
+  nullable?: boolean;
+};
+
+const useStyles = makeStyles(() => ({
+  content: {
+    marginLeft: '4px',
+    paddingLeft: '14px',
+  },
+  connector: {
+    marginLeft: '4px',
+  },
+  stepper: {
+    padding: '12px',
+  },
+  label: {
+    display: 'flex',
+    alignItems: 'flex-start',
+  },
+}));
+
+const StepIcon = () => (
+  <div
+    style={{
+      display: 'inline-block',
+      width: '10px',
+      height: '10px',
+      borderRadius: '50%',
+      backgroundColor: '#536DFE',
+      marginTop: '5px',
+    }}
+  />
+);
+
+export const WidgetDefinitionFiller = ({ properties, dataFieldName, nullable = false }: Props) => {
+  const classes = useStyles();
+
+  const propertiesList = useMemo(() => {
+    if (Array.isArray(properties)) {
+      return propertiesObjectToArray(properties);
+    }
+    return properties;
+  }, [properties]);
+
+  return (
+    <Grid container item direction="column" spacing={2}>
+      {propertiesList?.length ? (
+        <Stepper
+          nonLinear
+          orientation="vertical"
+          className={classes.stepper}
+          connector={<StepConnector className={classes.connector} />}
+        >
+          {(propertiesList as PropertiesArrayType).map((property, index) => (
+            <Step expanded key={index}>
+              <StepLabel
+                className={classes.label}
+                StepIconComponent={StepIcon}
+                StepIconProps={{ icon: '', completed: false, active: true }}
+              >
+                <Box display="flex" flexDirection="column">
+                  <b>{property.name}</b>
+                  <span>
+                    {property.propertyType} | Key: {property.key}
+                  </span>
+                </Box>
+              </StepLabel>
+              <StepContent className={classes.content}>
+                <PropertyWidget property={property} nullable={nullable} name={`${dataFieldName}.${property.key}`} />
+              </StepContent>
+            </Step>
+          ))}
+          <Step />
+        </Stepper>
+      ) : null}
+    </Grid>
+  );
+};
+
+export default WidgetDefinitionFiller;

package/src/lib/Definition/DefinitionFiller/index.ts

@@ -0,0 +1,2 @@
+export * from './DefinitionFiller';
+export * from './WidgetDefinitionFiller';

package/src/lib/Definition/index.ts

@@ -0,0 +1,2 @@
+export * from './CreateDefinition';
+export * from './DefinitionFiller';

package/src/lib/DemPropertyField/DemPropertyField.tsx

@@ -0,0 +1,93 @@
+import { useMemo } from 'react';
+import { Control } from 'react-hook-form';
+import { PropertyUnion } from '../../interfaces';
+import { MultipleDemField } from './MultipleDemField';
+import { SingleDemField } from './SingleDemField';
+
+/**
+ * This interface is referencing the [[DemPropertyField]] component props.
+ * @category DEM Property Field
+ */
+export interface DemPropertyFieldProps {
+  /**
+   * Material-UI TextField `variant` prop
+   */
+  variant?: 'standard' | 'outlined' | 'filled';
+  /**
+   * Parent field name for nest field
+   */
+  parentKey?: string;
+  /**
+   * propKey for React Hook Form control name propery
+   */
+  propKey: string;
+  /**
+   * React Hook Form `control`
+   */
+  control: Control<any>;
+  /**
+   * React Hook Form `errors` object
+   */
+  errors: Record<string, any>;
+  /**
+   * Is readOnly field flag
+   */
+  readOnly?: boolean;
+  /**
+   * Is nullable value flag
+   */
+  isNullable?: boolean;
+  /**
+   * DEM property
+   */
+  property: PropertyUnion;
+  /**
+   * @ignore Validation function for JSON type field
+   */
+  jsonValidator?: (attrs: { name: string; errors: any[] }) => void;
+  hasBooleanProperties?: boolean;
+  /**
+   * React Hook Form `watch` function
+   */
+  watch?: any;
+  hideCopy?: boolean;
+}
+/**
+ * Main DEM property field component
+ * @category DEM Property Field
+ */
+export const DemPropertyField = ({ propKey, property, parentKey }: DemPropertyFieldProps) => {
+  const name = useMemo(() => (parentKey ? `${parentKey}.${propKey}` : propKey), [propKey, parentKey]);
+  const label = useMemo(() => `${property?.name || propKey} ${property?.isRequired ? '*' : ''}`, [propKey, property]);
+
+  // const propsKeys = useMemo(() => {
+  //   if (property?.properties) {
+  //     const { properties } = property;
+  //     return Object.keys(properties).sort((keyA, keyB) => properties[keyA].sortOrder - properties[keyB].sortOrder);
+  //   }
+  //   return [];
+  // }, [property]);
+
+  if (property.isMultiple) {
+    return <MultipleDemField property={property} name={name} label={label} />;
+  } else {
+    return <SingleDemField property={property} name={name} label={label} />;
+  }
+
+  //   case EntityPropertyTypes.ENTITY: {
+  //     return (
+  //       <Box marginLeft={parentKey ? 2 : 0} paddingY={parentKey ? 4 : 0}>
+  //         <Typography variant="subtitle1">{property.name}</Typography>
+  //         {propsKeys.map((key) => (
+  //           <DemPropertyField
+  //             propKey={key}
+  //             control={control}
+  //             property={property.properties[key]}
+  //             errors={errors}
+  //             parentKey={name}
+  //           />
+  //         ))}
+  //       </Box>
+  //     );
+  //   }
+};

package/src/lib/DemPropertyField/DemPropertyView/DemPropertyView.tsx

@@ -0,0 +1,44 @@
+import Grid from '@material-ui/core/Grid';
+import { InfoItem } from '../../InfoItem';
+
+import { PropertyUnion } from '../../../interfaces';
+import { useMemo } from 'react';
+
+type Props = {
+  property: PropertyUnion;
+  value: any;
+};
+
+export const DemPropertyView = ({ property, value }: Props) => {
+  const infoProps = useMemo(() => {
+    const res: { title: string; text?: string; json?: any } = {
+      title: '',
+    };
+
+    if (property && value) {
+      res.title = property.name;
+
+      switch (property.propertyType) {
+        case 'JSON':
+          res.json = JSON.stringify(value, null, 2);
+          break;
+        case 'BOOLEAN':
+          res.json = value.toString();
+          break;
+        default:
+          res.text = value;
+          break;
+      }
+    }
+
+    return res;
+  }, [property, value]);
+
+  return (
+    <Grid item xs={12}>
+      <InfoItem {...infoProps} />
+    </Grid>
+  );
+};
+
+export default DemPropertyView;

package/src/lib/DemPropertyField/DemPropertyView/index.ts

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

package/src/lib/DemPropertyField/MultipleDemField/MultipleDemField.tsx

@@ -0,0 +1,293 @@
+import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
+import MenuItem from '@material-ui/core/MenuItem';
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import CloseIcon from '@material-ui/icons/Close';
+import IconButton from '@material-ui/core/IconButton';
+import { DemFieldWidget } from '../widgets';
+
+import { useEffect, useState } from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import { validateJson } from '../../../utils';
+import useStyles from '../styles';
+
+import { PropertyUnion } from '../../../interfaces';
+
+type Props = {
+  property: PropertyUnion;
+  name: string;
+  label: string;
+};
+
+type MainFillOptions = 'null' | 'expression' | 'widgets';
+
+const fillOptionsDefault = [
+  { value: 'null', label: 'NULL' },
+  { value: 'expression', label: 'Expression' },
+  { value: 'widget', label: 'Widget' },
+];
+
+const replaceArrayItem = (arr, value, index) => {
+  const newArr = [...arr];
+  newArr[index] = value;
+  return newArr;
+};
+
+const removeArrayItem = (arr, index) => {
+  const newArr = [...arr];
+  newArr.splice(index, 1);
+  return newArr;
+};
+
+export const MultipleDemField = ({ property, label, name }: Props) => {
+  const classes = useStyles();
+  const { setValue, getValues, setError, clearErrors, control } = useFormContext();
+  const {
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  });
+
+  const [mainFillOptions, setMainFillOptions] = useState([
+    { value: 'expression', label: 'Expression' },
+    { value: 'widgets', label: 'Array of Values' },
+  ]);
+  const [mainFillOption, setMainFillOption] = useState<MainFillOptions>(null);
+  const [mainExpression, setMainExpression] = useState('');
+  const [fillOptions, setFillOptions] = useState(fillOptionsDefault);
+  const [valuesFillOptions, setValuesFillOptions] = useState([]);
+  const [values, setValues] = useState([]);
+
+  const handleMainFillOptionChange = (e) => {
+    const { value } = e.target;
+    setMainFillOption(value);
+    clearErrors(name);
+
+    if (value === 'null') {
+      setValue(name, null);
+    }
+  };
+
+  const handleMainExpressionChange = (e) => {
+    const { value } = e.target;
+    setMainExpression(value);
+    setValue(name, value);
+
+    if (property.isRequired && !value.length) {
+      setError(name, { type: 'custom', message: 'Please, fill this field' });
+    } else {
+      clearErrors(name);
+    }
+  };
+
+  const handleValueFillOptionChange = (e, index) => {
+    const { value } = e.target;
+    const fieldName = `${name}.${index}`;
+
+    setValuesFillOptions((prevState) => replaceArrayItem(prevState, value, index));
+    if (value === 'widget' && property.propertyType === 'BOOLEAN') {
+      setValues((prevState) => replaceArrayItem(prevState, false, index));
+    } else {
+      setValues((prevState) => replaceArrayItem(prevState, '', index));
+    }
+    clearErrors(fieldName);
+  };
+
+  const handleValueChange = (value, index) => {
+    const fieldName = `${name}.${index}`;
+
+    setValues((prevState) => replaceArrayItem(prevState, value, index));
+
+    if (property.isRequired && !(value + '').length) {
+      setError(fieldName, { type: 'custom', message: 'Please, fill this field' });
+    } else if (property.propertyType === 'JSON' && !validateJson(value)) {
+      setError(fieldName, { type: 'custom', message: `Not valid JSON at value - ${index + 1}` });
+    } else {
+      clearErrors(fieldName);
+    }
+  };
+
+  const handleAddValue = () => {
+    setValues((prevState) => [...prevState, null]);
+    setValuesFillOptions((prevState) => [...prevState, 'null']);
+  };
+
+  const handleDeleteValue = (index) => {
+    setValuesFillOptions((prevState) => removeArrayItem(prevState, index));
+    setValues((prevState) => removeArrayItem(prevState, index));
+  };
+
+  useEffect(() => {
+    if (mainFillOption === 'widgets') {
+      setValue(name, values);
+    }
+  }, [mainFillOption, values]);
+
+  useEffect(() => {
+    if (property) {
+      if (!property.isRequired) {
+        setMainFillOptions((prevState) => [{ value: 'null', label: 'NULL' }, ...prevState]);
+      }
+      if (
+        property.propertyType === 'DATE' ||
+        property.propertyType === 'DATE_TIME' ||
+        property.propertyType === 'TIME'
+      ) {
+        setFillOptions((prevState) => [...prevState, { value: 'string', label: 'String' }]);
+      }
+    }
+  }, [property]);
+
+  useEffect(() => {
+    if (property) {
+      const { defaultValue } = property;
+      const value = getValues(name) || defaultValue;
+
+      if (Array.isArray(value)) {
+        setMainFillOption('widgets');
+        setValues(
+          value.map((val) => {
+            if (typeof val === 'object') {
+              return JSON.stringify(val);
+            }
+            return val;
+          })
+        );
+        setValuesFillOptions(
+          value.map((value) => {
+            if (value === null || value === 'null') {
+              return 'null';
+            } else if (value && typeof value === 'string' && value.startsWith('$')) {
+              return 'expression';
+            } else {
+              return 'widget';
+            }
+          })
+        );
+      } else if (typeof value === 'string') {
+        setMainFillOption('expression');
+        setMainExpression(value);
+      } else {
+        setMainFillOption('null');
+      }
+    }
+  }, [property, name]);
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item sm={12}>
+        <Typography className={classes.inputParameterTitle}>{label}</Typography>
+      </Grid>
+      <Grid item sm={12}>
+        <TextField
+          select
+          fullWidth
+          size="small"
+          variant="outlined"
+          value={mainFillOption}
+          onChange={handleMainFillOptionChange}
+        >
+          {mainFillOptions.map((option) => (
+            <MenuItem key={option.value} value={option.value}>
+              {option.label}
+            </MenuItem>
+          ))}
+        </TextField>
+      </Grid>
+      {mainFillOption === 'expression' && (
+        <Grid item sm={12}>
+          <TextField
+            fullWidth
+            variant="outlined"
+            size="small"
+            label="Expression"
+            value={mainExpression}
+            onChange={handleMainExpressionChange}
+          />
+        </Grid>
+      )}
+      {mainFillOption === 'widgets' && (
+        <>
+          {values.map((value, index) => (
+            <Grid container item sm={12} key={index} spacing={1} className={classes.multipleValueContainer}>
+              <Grid item sm={12} className={classes.multipleValueTitle}>
+                <Typography variant="subtitle1">value-{index + 1}</Typography>
+                <IconButton size="small" onClick={() => handleDeleteValue(index)}>
+                  <CloseIcon fontSize="small" />
+                </IconButton>
+              </Grid>
+              <Grid item sm={12}>
+                <TextField
+                  select
+                  fullWidth
+                  variant="outlined"
+                  size="small"
+                  value={valuesFillOptions[index]}
+                  onChange={(e) => handleValueFillOptionChange(e, index)}
+                >
+                  {fillOptions.map((option) => (
+                    <MenuItem key={option.value} value={option.value}>
+                      {option.label}
+                    </MenuItem>
+                  ))}
+                </TextField>
+              </Grid>
+              {valuesFillOptions[index] === 'widget' && (
+                <DemFieldWidget
+                  property={property}
+                  label={`${label} : value-${index + 1}`}
+                  name={`${name}.${index}`}
+                  value={value}
+                  onChange={(value) => handleValueChange(value, index)}
+                />
+              )}
+              {valuesFillOptions[index] === 'expression' && (
+                <Grid item sm={12}>
+                  <TextField
+                    fullWidth
+                    variant="outlined"
+                    size="small"
+                    label="Expression"
+                    value={value}
+                    onChange={(e) => handleValueChange(e.target.value, index)}
+                  />
+                </Grid>
+              )}
+              {valuesFillOptions[index] === 'string' && (
+                <Grid item sm={12}>
+                  <TextField
+                    fullWidth
+                    variant="outlined"
+                    size="small"
+                    label="String value"
+                    value={value}
+                    onChange={(e) => handleValueChange(e.target.value, index)}
+                  />
+                </Grid>
+              )}
+              {error?.[index]?.message && (
+                <Grid item sm={12}>
+                  <Typography color="secondary">{error?.[index]?.message}</Typography>
+                </Grid>
+              )}
+            </Grid>
+          ))}
+          <Grid item sm={12}>
+            <Button variant="outlined" color="primary" onClick={handleAddValue}>
+              Add value
+            </Button>
+          </Grid>
+        </>
+      )}
+      {error?.message && (
+        <Grid item sm={12}>
+          <Typography color="secondary">{error.message}</Typography>
+        </Grid>
+      )}
+    </Grid>
+  );
+};
+
+export default MultipleDemField;

package/src/lib/DemPropertyField/MultipleDemField/index.tsx

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

package/src/lib/DemPropertyField/RestrictedValuesEditor.tsx

@@ -0,0 +1,63 @@
+import Grid from '@material-ui/core/Grid';
+import Chip from '@material-ui/core/Chip';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+
+import { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import useStyles from './styles';
+
+type Props = {
+  name: string;
+};
+
+const RestrictedValuesEditor = ({ name }: Props) => {
+  const { setValue, watch } = useFormContext();
+  const classes = useStyles();
+  const values = watch(name);
+
+  const [addValue, setAddValue] = useState('');
+
+  const handleAddValueChange = (e) => {
+    setAddValue(e.target.value);
+  };
+
+  const handleDelete = (value: string) => {
+    const filteredValues = values.filter((val) => val !== value);
+    setValue(name, filteredValues);
+  };
+
+  const handleAdd = () => {
+    if (values && values.length) {
+      setValue(name, [...values, addValue]);
+    } else {
+      setValue(name, [addValue]);
+    }
+    setAddValue('');
+  };
+
+  return (
+    <Grid item sm={12}>
+      <div className={classes.restrictedValuesContainer}>
+        {values && values.length
+          ? values.map((value) => <Chip key={value} label={value} onDelete={() => handleDelete(value)} />)
+          : null}
+      </div>
+      <div className={classes.restrictedValuesContainer}>
+        <TextField
+          fullWidth
+          variant="outlined"
+          size="small"
+          label="Restricted value"
+          value={addValue}
+          onChange={handleAddValueChange}
+        />
+        <Button variant="contained" size="small" color="primary" onClick={handleAdd}>
+          Add
+        </Button>
+      </div>
+    </Grid>
+  );
+};
+
+export default RestrictedValuesEditor;