@dartech/arsenal-ui 0.0.1 → 0.0.3

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;

package/src/lib/Forms/BackButton.tsx

@@ -1,45 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import { Link } from 'react-router-dom';
-import { useHistory, useLocation } from 'react-router-dom';
-import IconButton from '@material-ui/core/IconButton';
-import Button from '@material-ui/core/Button';
-import Box from '@material-ui/core/Box';
-
-type Props = {
-  text?: string;
-  buttonProps?: any;
-};
-export const BackButton = ({ text, buttonProps = {} }: Props) => {
-  const history = useHistory();
-  const { state } = useLocation();
-  const fromLocation = useMemo(() => state?.['from'], [state]);
-
-  const handleClick = useCallback(() => {
-    if (fromLocation) {
-      history.push(fromLocation);
-    } else history.goBack();
-  }, [history, fromLocation]);
-
-  return (
-    <Box mr={2}>
-      {text ? (
-        <Button
-          color="inherit"
-          onClick={!fromLocation ? handleClick : null}
-          component={Link}
-          to={fromLocation ?? ''}
-          {...buttonProps}
-        >
-          {text}
-        </Button>
-      ) : (
-        <IconButton onClick={handleClick}>
-          <ArrowBackIcon />
-        </IconButton>
-      )}
-    </Box>
-  );
-};
-
-export default BackButton;

package/src/lib/Forms/ControlAceEditor.tsx

@@ -1,103 +0,0 @@
-import { Controller, Control, useFormContext } from 'react-hook-form';
-import AceEditor from 'react-ace';
-import 'ace-builds/src-noconflict/mode-python';
-import 'ace-builds/src-noconflict/theme-monokai';
-import 'ace-builds/src-noconflict/ext-language_tools';
-import Typography from '@material-ui/core/Typography';
-import FormHelperText from '@material-ui/core/FormHelperText';
-
-export interface ControlAceEditorProps {
-  name: string;
-  control: Control<any>;
-  mode?: string;
-  label?: string;
-  width?: string;
-  height?: string;
-  theme?: string;
-  readOnly?: boolean;
-  required?: boolean;
-  validateJson?: boolean;
-  fontSize?: number;
-}
-
-export const ControlAceEditor = ({
-  control,
-  name,
-  mode = 'json',
-  label,
-  width = '100%',
-  height = '200px',
-  theme = 'monokai',
-  readOnly,
-  required = false,
-  validateJson = false,
-  fontSize = 16,
-}: ControlAceEditorProps) => {
-  const { setError, clearErrors } = useFormContext();
-
-  return (
-    <>
-      {label && (
-        <Typography variant="subtitle1" display="inline" style={{ marginRight: 10 }}>
-          {label}
-        </Typography>
-      )}
-
-      <Controller
-        control={control}
-        name={name}
-        render={({ field, fieldState }) => (
-          <>
-            <AceEditor
-              {...field}
-              value={mode === 'json' && typeof field.value !== 'string' ? JSON.stringify(field.value) : field.value}
-              onChange={(value) => {
-                if (!value) {
-                  if (required) {
-                    setError(name, { message: 'Required field' });
-                  } else {
-                    clearErrors(name);
-                    field.onChange('');
-                  }
-                  return;
-                }
-
-                field.onChange(value);
-
-                if (validateJson) {
-                  try {
-                    JSON.parse(value);
-                  } catch (error) {
-                    setError(name, { message: 'Invalid JSON' });
-                    return;
-                  }
-                }
-                clearErrors(name);
-                return;
-              }}
-              width={width}
-              height={height}
-              readOnly={readOnly}
-              mode={mode}
-              focus
-              showPrintMargin={false}
-              theme={theme}
-              wrapEnabled
-              fontSize={fontSize}
-              setOptions={{
-                enableLiveAutocompletion: true,
-                enableBasicAutocompletion: true,
-                showLineNumbers: true,
-                tabSize: 2,
-              }}
-              style={{ lineHeight: 1.4, zIndex: 0, isolation: 'isolate' }}
-            />
-            {fieldState.error && <FormHelperText error>{fieldState.error.message}</FormHelperText>}
-          </>
-        )}
-      />
-    </>
-  );
-};
-
-export default ControlAceEditor;

package/src/lib/Forms/ControlAutocomplete.tsx

@@ -1,134 +0,0 @@
-import { Controller, Control } from 'react-hook-form';
-import TextField from '@material-ui/core/TextField';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import { useCallback } from 'react';
-
-/**
- * This interface is referencing the [[ControlAutocomplete]] component props.
- * @category Forms
- */
-export interface ControlAutocompleteProps {
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * Autocomplete `options` prop
-   */
-  options?: any[];
-  /**
-   * Material-UI TextField `label` prop
-   */
-  label: string;
-  /**
-   * Material-UI TextField `placeholder` prop
-   */
-  placeholder?: string;
-  /**
-   * Autocomplete `multiple` prop
-   */
-  /**
-   * onChange handle function
-   */
-  onChange?: (name: string, value: unknown) => void;
-  multiple?: boolean;
-  required?: boolean;
-  disableCloseOnSelect?: boolean;
-  filterSelectedOptions?: boolean;
-  labelKey?: string;
-  valueKey?: string;
-  loading?: boolean;
-  getOptionDisabled?: (option) => boolean;
-}
-
-/**
- * Material UI `Autocomplete` controlled component. Used with react-hook-form
- * @category Forms
- */
-export const ControlAutocomplete = ({
-  control,
-  name,
-  options,
-  label,
-  placeholder,
-  multiple,
-  required,
-  disableCloseOnSelect = false,
-  labelKey,
-  valueKey,
-  loading,
-  onChange,
-  getOptionDisabled,
-}: ControlAutocompleteProps) => {
-  const getOptionSelected = useCallback((option, value) => {
-    if (option && value) {
-      if (typeof option === 'string') {
-        return option === value;
-      } else if (valueKey) {
-        return option[valueKey] === value[valueKey] || option[valueKey] === value;
-      } else if (option.value) {
-        return option.value === value.value || option.value === value;
-      }
-    }
-    return false;
-  }, []);
-
-  const getOptionLabel = useCallback(
-    (option) => {
-      if (option) {
-        if (typeof option === 'string') {
-          return option;
-        } else if (labelKey && option[labelKey]) {
-          return option[labelKey];
-        } else {
-          return option.label || option.name || option.value || option.code || '';
-        }
-      }
-      return '';
-    },
-    [options]
-  );
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      rules={{
-        required: required && 'Required field',
-      }}
-      render={({ field, fieldState }) => (
-        <Autocomplete
-          {...field}
-          multiple={multiple}
-          size="small"
-          disableCloseOnSelect={disableCloseOnSelect || multiple}
-          filterSelectedOptions={multiple}
-          disablePortal
-          loading={loading}
-          options={options}
-          getOptionSelected={getOptionSelected}
-          getOptionLabel={getOptionLabel}
-          getOptionDisabled={getOptionDisabled ? getOptionDisabled : null}
-          value={field.value || null}
-          onChange={(e, val) => (onChange ? onChange(field.name, val) : field.onChange(val))}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              label={label}
-              variant="outlined"
-              helperText={fieldState.error?.message}
-              placeholder={placeholder}
-              error={!!fieldState.error}
-            />
-          )}
-        />
-      )}
-    />
-  );
-};
-
-export default ControlAutocomplete;

package/src/lib/Forms/ControlCheckbox.tsx

@@ -1,57 +0,0 @@
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { Controller } from 'react-hook-form';
-
-/**
- * This interface is referencing the [[ControlCheckbox]] component props.
- * @category Forms
- */
-export interface ControlCheckboxProps {
-  /**
-   * React Hook Form `control`
-   */
-  control: any;
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * Material-UI FormControlLabel `label` prop
-   */
-  label?: string;
-  /**
-   * Is disabled input flag
-   */
-  disabled?: boolean;
-  onChange?: (name: string, value: unknown) => void;
-}
-
-/**
- * Material UI `Checkbox` controlled component. Used with react-hook-form
- * @category Forms
- */
-export const ControlCheckbox = ({ name, control, label, disabled, onChange }: ControlCheckboxProps) => {
-  return (
-    <FormControlLabel
-      label={label || name}
-      control={
-        <Controller
-          control={control}
-          name={name}
-          render={({ field }) => (
-            <Checkbox
-              color="primary"
-              size="small"
-              {...field}
-              onChange={(e, checked) => (onChange ? onChange(field.name, checked) : field.onChange(e))}
-              checked={field.value}
-              disabled={disabled}
-            />
-          )}
-        />
-      }
-    />
-  );
-};
-
-export default ControlCheckbox;