@dartech/arsenal-ui 0.0.1 → 0.0.3

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;

package/src/lib/DemPropertyField/RestrictedValuesEditor.tsx

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

package/src/lib/DemPropertyField/SingleDemField/SingleDemField.tsx

@@ -1,156 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
-import MenuItem from '@material-ui/core/MenuItem';
-import Typography from '@material-ui/core/Typography';
-
-import { useEffect, useState } from 'react';
-import { useController, useFormContext } from 'react-hook-form';
-import { validateJson } from '../../../utils';
-import useStyles from '../styles';
-
-import { PropertyUnion } from '../../../interfaces';
-import { DemFieldWidget } from '../widgets';
-
-type Props = {
-  name: string;
-  label: string;
-  property: PropertyUnion;
-};
-
-const defaultFillOptions = [
-  { value: 'expression', label: 'Expression' },
-  { value: 'widget', label: 'Widget' },
-];
-
-export const SingleDemField = ({ property, name, label }: Props) => {
-  const classes = useStyles();
-  const { setValue, getValues, setError, clearErrors, control } = useFormContext();
-  const {
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-  });
-
-  const [fillOptions, setFillOptions] = useState(defaultFillOptions);
-  const [selectedFillOption, setSelectedFillOption] = useState(null);
-  const [expression, setExpression] = useState('');
-  const [fieldValue, setFieldValue] = useState(null);
-
-  const handleExpressionChange = (e) => {
-    const { value } = e.target;
-    setExpression(value);
-    setValue(name, value);
-
-    if (property.isRequired && !value.length) {
-      setError(name, { type: 'custom', message: 'Please, fill this field' });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  const handleFillOptionChange = (e) => {
-    setSelectedFillOption(e.target.value);
-
-    if (e.target.value === 'null') {
-      setValue(name, null);
-    }
-
-    clearErrors(name);
-  };
-
-  const handleValueChange = (value) => {
-    setFieldValue(value);
-    setValue(name, value);
-
-    if (property.isRequired && !(value + '').length) {
-      setError(name, { type: 'custom', message: 'Please, fill this field' });
-    } else if (property.propertyType === 'JSON' && !validateJson(value)) {
-      setError(name, { type: 'custom', message: 'Not valid JSON' });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  useEffect(() => {
-    if (property) {
-      if (!property.isRequired) {
-        setFillOptions((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(() => {
-    const { defaultValue } = property;
-    let value;
-    if (typeof getValues(name) === 'boolean' || getValues(name)) {
-      value = getValues(name);
-    } else {
-      value = defaultValue;
-    }
-
-    if (typeof value === 'undefined' || value === null || value === 'null') {
-      setValue(name, null);
-      setSelectedFillOption('null');
-    } else if (value && typeof value === 'string' && value.startsWith('$')) {
-      setValue(name, value);
-      setExpression(value);
-      setSelectedFillOption('expression');
-    } else {
-      setValue(name, value);
-      setFieldValue(value);
-      setSelectedFillOption('widget');
-    }
-  }, [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
-          variant="outlined"
-          size="small"
-          value={selectedFillOption}
-          onChange={handleFillOptionChange}
-        >
-          {fillOptions.map((option) => (
-            <MenuItem key={option.value} value={option.value}>
-              {option.label}
-            </MenuItem>
-          ))}
-        </TextField>
-      </Grid>
-      {selectedFillOption === 'expression' && (
-        <Grid item sm={12}>
-          <TextField
-            fullWidth
-            variant="outlined"
-            size="small"
-            label="Expression"
-            value={expression}
-            onChange={handleExpressionChange}
-          />
-        </Grid>
-      )}
-      {selectedFillOption === 'widget' && (
-        <DemFieldWidget property={property} name={name} value={fieldValue} onChange={handleValueChange} />
-      )}
-      <Grid item sm={12}>
-        <Typography color="secondary">{error?.message}</Typography>
-      </Grid>
-    </Grid>
-  );
-};
-
-export default SingleDemField;

package/src/lib/DemPropertyField/styles.ts

@@ -1,50 +0,0 @@
-import { makeStyles } from '@material-ui/core/styles';
-
-export default makeStyles((theme) => ({
-  editor: {
-    position: 'relative',
-  },
-  editorDisabled: {
-    opacity: 0.6,
-    '&:before': {
-      content: '""',
-      display: 'block',
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      zIndex: 5,
-    },
-  },
-  editorCopy: {
-    position: 'absolute',
-    top: 0,
-    right: -53,
-    zIndex: 2,
-  },
-  inputParameterTitle: {
-    fontWeight: 600,
-  },
-  multipleValueTitle: {
-    display: 'flex',
-    justifyContent: 'space-between',
-  },
-  multipleValueContainer: {
-    '&:hover': {
-      backgroundColor: '#f7f7f7',
-    },
-  },
-  restrictedValuesContainer: {
-    width: '100%',
-    display: 'flex',
-    marginBottom: '8px',
-    '& > * ': {
-      marginRight: '4px',
-
-      '&::last-child': {
-        marginRight: 0,
-      },
-    },
-  },
-}));

package/src/lib/DemPropertyField/widgets/DemBooleanWidget.tsx

@@ -1,26 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
-
-type Props = {
-  value: string | boolean;
-  onChange: (value: boolean) => void;
-};
-
-const DemBooleanWidget = ({ value, onChange }: Props) => {
-  const handleChange = (e) => {
-    const { checked } = e.target;
-    onChange(checked);
-  };
-
-  return (
-    <Grid item sm={12}>
-      <FormControlLabel
-        label={!!value + ''}
-        control={<Switch color="primary" size="small" onChange={handleChange} checked={!!value + '' === 'true'} />}
-      />
-    </Grid>
-  );
-};
-
-export default DemBooleanWidget;

package/src/lib/DemPropertyField/widgets/DemDateTimeWidget.tsx

@@ -1,34 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import TextField from '@mui/material/TextField';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-
-import { format } from 'date-fns';
-import { getDemPropertyDateFormat } from '../../../utils';
-import { DateTimeProperty } from '../../../interfaces';
-
-type Props = {
-  property: DateTimeProperty;
-  value: string;
-  onChange: (value: string) => void;
-};
-
-const DemDateTimeWidget = ({ property, value, onChange }: Props) => {
-  const handleChange = (date) => {
-    onChange(format(date, getDemPropertyDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSXXX", property.format)));
-  };
-
-  return (
-    <Grid item sm={12}>
-      <DateTimePicker
-        clearable
-        ampm={false}
-        value={value || null}
-        onChange={handleChange}
-        inputFormat={getDemPropertyDateFormat('yyyy-MM-dd HH:mm', property.format)}
-        renderInput={(props) => <TextField {...props} fullWidth variant="outlined" size="small" />}
-      />
-    </Grid>
-  );
-};
-
-export default DemDateTimeWidget;

package/src/lib/DemPropertyField/widgets/DemDateWidget.tsx

@@ -1,33 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import TextField from '@mui/material/TextField';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-
-import { format } from 'date-fns';
-import { getDemPropertyDateFormat } from '../../../utils';
-import { DateProperty } from '../../../interfaces';
-
-type Props = {
-  property: DateProperty;
-  value: string;
-  onChange: (value: string) => void;
-};
-
-const DemDateWidget = ({ property, value, onChange }: Props) => {
-  const handleChange = (date) => {
-    onChange(format(date, getDemPropertyDateFormat('yyyy-MM-dd', property.format)));
-  };
-
-  return (
-    <Grid item sm={12}>
-      <DatePicker
-        clearable
-        onChange={handleChange}
-        value={value || null}
-        inputFormat={getDemPropertyDateFormat('yyyy-MM-dd', property.format)}
-        renderInput={(props) => <TextField {...props} fullWidth variant="outlined" size="small" />}
-      />
-    </Grid>
-  );
-};
-
-export default DemDateWidget;