@dartech/arsenal-ui 0.0.1 → 0.0.2

package/src/lib/Definition/CreateDefinition/CreateDefinition.tsx

@@ -1,74 +0,0 @@
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { ControlInput, ControlNumberInput } from '../../Forms';
-import CreatePropertiesList from '../../Property/UpsertProperty/CreatePropertiesList';
-
-import { useFormContext } from 'react-hook-form';
-
-type Props = {
-  definitionFieldName?: string;
-  title?: string;
-  hideCodeField?: boolean;
-  hideVersionField?: boolean;
-  hideNameField?: boolean;
-  required?: boolean;
-};
-
-export const CreateDefinition = ({
-  definitionFieldName,
-  title,
-  hideCodeField,
-  hideVersionField,
-  hideNameField,
-  required = false,
-}: Props) => {
-  const { control } = useFormContext();
-
-  return (
-    <Grid container direction="column" spacing={2}>
-      {title && (
-        <Grid item sm={12} md={8} lg={6}>
-          <Box my={2}>
-            <Typography variant="h4">{title}</Typography>
-          </Box>
-        </Grid>
-      )}
-      {!hideNameField && (
-        <Grid item sm={12} md={8} lg={6}>
-          <ControlInput
-            required
-            control={control}
-            name={definitionFieldName ? `${definitionFieldName}.name` : `name`}
-            label="Name"
-          />
-        </Grid>
-      )}
-      {!hideCodeField && (
-        <Grid item sm={12} md={8} lg={6}>
-          <ControlInput
-            required
-            control={control}
-            name={definitionFieldName ? `${definitionFieldName}.code` : `code`}
-            label="Code"
-          />
-        </Grid>
-      )}
-      {!hideVersionField && (
-        <Grid item sm={12} md={8} lg={6}>
-          <ControlNumberInput
-            required
-            control={control}
-            decimal={false}
-            name={definitionFieldName ? `${definitionFieldName}.version` : `version`}
-            label="Version"
-          />
-        </Grid>
-      )}
-
-      <CreatePropertiesList required={required} parentFieldName={definitionFieldName} />
-    </Grid>
-  );
-};
-
-export default CreateDefinition;

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

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

@@ -1,96 +0,0 @@
-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/DemPropertyField/DemPropertyField.tsx

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

@@ -1,44 +0,0 @@
-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/MultipleDemField/MultipleDemField.tsx

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