@dartech/arsenal-ui 0.0.1 → 0.0.2

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;

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

@@ -1,67 +0,0 @@
-import DemBooleanWidget from './DemBooleanWidget';
-import DemJsonWidget from './DemJsonWidget';
-import DemStringWidget from './DemStringWidget';
-import DemDateWidget from './DemDateWidget';
-import DemDateTimeWidget from './DemDateTimeWidget';
-import DemTimeWidget from './DemTimeWidget';
-import DemFloatWidget from './DemFloatWidget';
-
-import {
-  BigIntegerProperty,
-  DateProperty,
-  DateTimeProperty,
-  FloatProperty,
-  StringProperty,
-  IntegerProperty,
-  LongProperty,
-  TimeProperty,
-  PropertyUnion,
-  PropertyType,
-} from '../../../interfaces';
-import DemIntegerWidget from './DemIntegerWidget';
-
-type Props = {
-  property: PropertyUnion;
-  label?: string;
-  value: string;
-  name: string;
-  onChange: (value) => void;
-};
-
-export const DemFieldWidget = ({ property, value, name, label, onChange }: Props) => {
-  switch (property?.propertyType) {
-    case PropertyType.DATE:
-      return <DemDateWidget property={property as DateProperty} value={value} onChange={onChange} />;
-    case PropertyType.DATE_TIME:
-      return <DemDateTimeWidget property={property as DateTimeProperty} value={value} onChange={onChange} />;
-    case PropertyType.TIME: {
-      return <DemTimeWidget property={property as TimeProperty} value={value} onChange={onChange} />;
-    }
-    case PropertyType.BIG_INTEGER:
-      return (
-        <DemIntegerWidget property={property as BigIntegerProperty} value={value} name={name} onChange={onChange} />
-      );
-    case PropertyType.LONG:
-      return <DemIntegerWidget property={property as LongProperty} value={value} name={name} onChange={onChange} />;
-    case PropertyType.INTEGER:
-      return <DemIntegerWidget property={property as IntegerProperty} value={value} name={name} onChange={onChange} />;
-    case PropertyType.BIG_DECIMAL:
-    case PropertyType.DOUBLE:
-    case PropertyType.FLOAT:
-      return <DemFloatWidget property={property as FloatProperty} value={value} name={name} onChange={onChange} />;
-    case PropertyType.STRING:
-      return <DemStringWidget property={property as StringProperty} value={value} onChange={onChange} label={label} />;
-    case PropertyType.BOOLEAN:
-      return <DemBooleanWidget value={value} onChange={onChange} />;
-    case PropertyType.JSON:
-      return <DemJsonWidget value={value} onChange={onChange} />;
-    case PropertyType.ENTITY:
-      return null;
-    case PropertyType.ENTITY_REFERENCE:
-      return null;
-    default:
-      return <DemStringWidget property={property as StringProperty} value={value} onChange={onChange} label={label} />;
-  }
-};
-
-export default DemFieldWidget;

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

@@ -1,49 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
-
-import { useController, useFormContext } from 'react-hook-form';
-import { validateFloat } from '../../../utils';
-import { FloatProperty } from '../../../interfaces';
-
-type Props = {
-  property: FloatProperty;
-  value: string;
-  name: string;
-  onChange: (value: string) => void;
-};
-
-const DemFloatWidget = ({ property, value, name, onChange }: Props) => {
-  const { setError, clearErrors, control } = useFormContext();
-  const fieldController = useController({
-    name,
-    control,
-    rules: {
-      validate: (value) => {
-        return validateFloat(value + '').message;
-      },
-    },
-  });
-
-  const handleChange = (e) => {
-    const { value: inputValue } = e.target;
-    const { valid, continuable, message, displayOnChange } = validateFloat(inputValue);
-
-    if (valid || continuable) {
-      onChange(inputValue);
-    }
-
-    if (!valid && displayOnChange) {
-      setError(name, { type: 'custom', message });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  return (
-    <Grid item sm={12}>
-      <TextField fullWidth variant="outlined" size="small" value={value} onChange={handleChange} />
-    </Grid>
-  );
-};
-
-export default DemFloatWidget;

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

@@ -1,63 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
-
-import { useController, useFormContext } from 'react-hook-form';
-import { validateInteger } from '../../../utils';
-import { BigIntegerProperty, IntegerProperty, LongProperty } from '../../../interfaces';
-
-type Props = {
-  property: IntegerProperty | BigIntegerProperty | LongProperty;
-  value: string;
-  name: string;
-  onChange: (value: string) => void;
-};
-
-const DemIntegerWidget = ({ property, value, name, onChange }: Props) => {
-  const { setError, clearErrors, control } = useFormContext();
-  const { fieldState: error } = useController({
-    name,
-    control,
-    rules: {
-      validate: (value) => {
-        return validateInteger(value + '', property.propertyType).message;
-      },
-    },
-  });
-
-  const handleChange = (e) => {
-    let { value: inputValue } = e.target;
-
-    if (inputValue.length >= 2 && inputValue.startsWith('0')) {
-      inputValue = inputValue.slice(1);
-    }
-
-    if (inputValue.length >= 2 && inputValue.startsWith('-') && inputValue[1] === '0') {
-      inputValue = inputValue.slice(0, 1) + inputValue.slice(2);
-    }
-
-    if (!inputValue || (inputValue.length < 2 && inputValue[0] === '-')) {
-      onChange(inputValue);
-      return;
-    }
-
-    const { valid, continuable, message } = validateInteger(inputValue, property.propertyType);
-
-    if (valid || continuable) {
-      onChange(inputValue);
-    }
-
-    if (!valid) {
-      setError(name, { type: 'custom', message });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  return (
-    <Grid item sm={12}>
-      <TextField fullWidth variant="outlined" size="small" value={value} onChange={handleChange} />
-    </Grid>
-  );
-};
-
-export default DemIntegerWidget;

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

@@ -1,33 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import AceEditor from 'react-ace';
-
-import 'ace-builds/src-noconflict/ace';
-import 'ace-builds/src-noconflict/mode-json';
-
-type Props = {
-  value: string;
-  onChange: (value: string) => void;
-};
-
-const DemJsonWidget = ({ value, onChange }: Props) => {
-  return (
-    <Grid item sm={12}>
-      <AceEditor
-        value={value}
-        onChange={onChange}
-        mode="json"
-        width="100%"
-        height="200px"
-        fontSize="16"
-        setOptions={{
-          enableSnippets: false,
-          copyWithEmptySelection: true,
-          showLineNumbers: true,
-          tabSize: 2,
-        }}
-      />
-    </Grid>
-  );
-};
-
-export default DemJsonWidget;

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

@@ -1,35 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
-import MenuItem from '@material-ui/core/MenuItem';
-
-import { StringProperty } from '../../../interfaces';
-
-type Props = {
-  property: StringProperty;
-  label?: string;
-  value: string;
-  onChange: (value: string) => void;
-};
-
-export const DemStringWidget = ({ property, label, value, onChange }: Props) => {
-  const handleChange = (e) => {
-    onChange(e.target.value);
-  };
-  return (
-    <Grid item sm={12}>
-      {property?.restrictedValues?.length ? (
-        <TextField select fullWidth variant="outlined" size="small" value={value} onChange={handleChange}>
-          {property.restrictedValues.map((restrictedValue) => (
-            <MenuItem key={restrictedValue} value={restrictedValue}>
-              {restrictedValue}
-            </MenuItem>
-          ))}
-        </TextField>
-      ) : (
-        <TextField fullWidth variant="outlined" size="small" label={label} value={value} onChange={handleChange} />
-      )}
-    </Grid>
-  );
-};
-
-export default DemStringWidget;

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

@@ -1,46 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import TextField from '@mui/material/TextField';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-
-import { useEffect, useState } from 'react';
-import { format, parse } from 'date-fns';
-import { getDemPropertyDateFormat } from '../../../utils';
-import { TimeProperty } from '../../../interfaces';
-
-type Props = {
-  property: TimeProperty;
-  value: string;
-  onChange: (value: string) => void;
-};
-
-const timeFormat = 'HH:mm:ss.SSS';
-
-const DemTimeWidget = ({ property, value, onChange }: Props) => {
-  const [localTime, setLocalTime] = useState<Date>(null);
-
-  const handleChange = (date) => {
-    setLocalTime(date);
-    onChange(format(date, getDemPropertyDateFormat(timeFormat, property.format)));
-  };
-
-  useEffect(() => {
-    if (value && !localTime) {
-      setLocalTime(parse(value, timeFormat, new Date()));
-    }
-  }, [value, localTime]);
-
-  return (
-    <Grid item sm={12}>
-      <TimePicker
-        clearable
-        ampm={false}
-        value={localTime}
-        onChange={handleChange}
-        inputFormat={getDemPropertyDateFormat(timeFormat, property.format)}
-        renderInput={(props) => <TextField {...props} fullWidth variant="outlined" size="small" />}
-      />
-    </Grid>
-  );
-};
-
-export default DemTimeWidget;