@dartech/arsenal-ui 0.0.1 → 0.0.2

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;

package/src/lib/Forms/ControlDebouncedInput.tsx

@@ -1,69 +0,0 @@
-import TextField from '@material-ui/core/TextField';
-import { useCallback, useMemo, useState } from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
-import { ControlInputProps } from './ControlInput';
-import { useDebounce } from '../../utils';
-
-export const ControlDebouncedInput = ({
-  inputProps,
-  name,
-  required,
-  validate,
-  label = '',
-  variant = 'outlined',
-  type = 'text',
-  defaultValue = '',
-  disabled,
-  InputLabelProps,
-  textarea,
-}: ControlInputProps) => {
-  const { setValue, control, getValues } = useFormContext();
-  const [fieldValue, setFieldValue] = useState('');
-
-  const debouncedChange = useDebounce((e) => {
-    setValue(name, e.target.value);
-  }, 350);
-
-  useMemo(() => {
-    const value = getValues(name);
-    setFieldValue(value);
-  }, [getValues, name]);
-
-  const handleChange = useCallback((e) => {
-    setFieldValue(e.target.value);
-    debouncedChange(e);
-  }, [debouncedChange]);
-
-  
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      defaultValue={defaultValue}
-      rules={{ required: required && 'Required field', validate }}
-      render={({ field: { ref, value, ...restProps }, fieldState: { error } }) => (
-        <TextField
-          fullWidth
-          size="small"
-          inputRef={ref}
-          type={type}
-          label={label}
-          error={!!error}
-          helperText={error?.message}
-          disabled={disabled}
-          variant={variant}
-          InputLabelProps={InputLabelProps}
-          inputProps={inputProps}
-          multiline={textarea}
-          minRows={textarea ? 3 : 1}
-          {...restProps}
-          onChange={handleChange}
-          value={fieldValue}
-        />
-      )}
-    />
-  );
-};
-
-export default ControlDebouncedInput;

package/src/lib/Forms/ControlInput.tsx

@@ -1,102 +0,0 @@
-import { useController, Control } from 'react-hook-form';
-import TextField from '@material-ui/core/TextField';
-
-type ValidateFunc = (value: string) => boolean | string;
-type onChangeCallback = (e: any) => void;
-
-/**
- * This interface is referencing the [[ControlInput]] component props.
- * @category Forms
- */
-export interface ControlInputProps {
-  /**
-   * Props for MUI TextField component
-   */
-  inputProps?: Record<string, string | number | boolean | onChangeCallback | { [key: string]: any }>;
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  label?: string;
-  type?: 'text' | 'date' | 'password' | 'search' | 'number' | 'email' | 'datetime-local';
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * Is input required flag
-   */
-  required?: boolean;
-  defaultValue?: any;
-  /**
-   * Is disabled input flag
-   */
-  disabled?: boolean;
-  /**
-   * Material-UI TextField `variant` prop
-   */
-  variant?: 'filled' | 'outlined' | 'standard';
-  /**
-   * React Hook Form validate function
-   * ```typescript
-   * type ValidateFunc = (value: string) => boolean | string;
-   * ```
-   */
-  validate?: ValidateFunc | Record<string, ValidateFunc>;
-  InputLabelProps?: any;
-  textarea?: boolean;
-}
-
-/**
- * Material UI `TextField` controlled component. Used with react-hook-form
- * @category Forms
- */
-export const ControlInput = ({
-  inputProps,
-  name,
-  control,
-  required,
-  validate,
-  label = '',
-  variant = 'outlined',
-  type = 'text',
-  defaultValue = '',
-  disabled,
-  InputLabelProps,
-  textarea,
-}: ControlInputProps) => {
-  const {
-    field: { ref, value, ...restProps },
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-    defaultValue,
-    rules: {
-      required: required && 'Required field',
-      validate,
-    },
-  });
-
-  return (
-    <TextField
-      fullWidth
-      size="small"
-      inputRef={ref}
-      type={type}
-      label={label}
-      error={!!error}
-      helperText={error?.message}
-      disabled={disabled}
-      variant={variant}
-      InputLabelProps={InputLabelProps}
-      inputProps={inputProps}
-      multiline={textarea}
-      minRows={textarea ? 3 : 1}
-      value={value || ''}
-      {...restProps}
-    />
-  );
-};
-
-export default ControlInput;

package/src/lib/Forms/ControlNumberInput.tsx

@@ -1,144 +0,0 @@
-import { PropertyType } from '../../interfaces';
-import TextField from '@material-ui/core/TextField';
-import { useCallback } from 'react';
-import { useController, Control, useFormContext } from 'react-hook-form';
-import { validateFloat, validateInteger } from '../../utils';
-
-type onChangeCallback = (e: any) => void;
-
-type Props = {
-  /**
-   * Props for MUI TextField component
-   */
-  inputProps?: Record<string, string | number | boolean | onChangeCallback | { [key: string]: any }>;
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  label?: string;
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * Is input required flag
-   */
-  required?: boolean;
-  defaultValue?: number;
-  /**
-   * Is disabled input flag
-   */
-  disabled?: boolean;
-  /**
-   * Material-UI TextField `variant` prop
-   */
-  variant?: 'filled' | 'outlined' | 'standard';
-  /**
-   * React Hook Form validate function
-   * ```typescript
-   * type ValidateFunc = (value: string) => boolean | string;
-   * ```
-   */
-  InputLabelProps?: any;
-  decimal?: boolean;
-};
-
-export const ControlNumberInput = ({
-  inputProps,
-  name,
-  label = '',
-  control,
-  required,
-  defaultValue,
-  disabled,
-  variant = 'outlined',
-  InputLabelProps,
-  decimal = false,
-}: Props) => {
-  const { setError, clearErrors } = useFormContext();
-  const {
-    field: { ref, onChange, value, ...restProps },
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-    defaultValue,
-    rules: {
-      required: required && 'Required field',
-    },
-  });
-
-  const handleChange = useCallback(
-    (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(2);
-      }
-
-      if (!inputValue || (inputValue.length < 2 && inputValue[0] === '-')) {
-        onChange(inputValue);
-        return;
-      }
-
-      if (decimal) {
-        const { valid, continuable, message, displayOnChange } = validateFloat(inputValue);
-
-        if (continuable) {
-          onChange(inputValue);
-        }
-
-        if (!valid && displayOnChange && message) {
-          setError(name, { type: 'custom', message });
-        } else {
-          clearErrors(name);
-        }
-
-        if (valid) {
-          onChange(Number(inputValue));
-        }
-      } else {
-        const { valid, continuable, message } = validateInteger(inputValue, PropertyType.INTEGER);
-
-        if (continuable) {
-          onChange(inputValue);
-        }
-
-        if (!valid && message) {
-          setError(name, { type: 'custom', message });
-        } else {
-          clearErrors(name);
-        }
-
-        if (valid) {
-          onChange(Number(inputValue));
-        }
-      }
-    },
-    [decimal]
-  );
-
-  return (
-    <TextField
-      fullWidth
-      size="small"
-      inputRef={ref}
-      label={label}
-      error={!!error}
-      helperText={error?.message}
-      disabled={disabled}
-      variant={variant}
-      InputLabelProps={InputLabelProps}
-      inputProps={inputProps}
-      onChange={handleChange}
-      value={value || ''}
-      {...restProps}
-    />
-  );
-};
-
-export default ControlNumberInput;

package/src/lib/Forms/ControlRadioBtn.tsx

@@ -1,46 +0,0 @@
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import { Controller, Control } from 'react-hook-form';
-
-/**
- * This interface is referencing the [[ControlRadioBtn]] component props.
- * @category Forms
- */
-export interface ControlRadioBtnProps {
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * Radio group values
-   */
-  values: any[];
-}
-
-/**
- * Material UI `Radio` controlled component. Used with react-hook-form
- * @category Forms
- */
-export const ControlRadioBtn = ({ name, values, control }: ControlRadioBtnProps) => {
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field }) => (
-        <RadioGroup row {...field}>
-          {values.map((item) => (
-            <FormControlLabel value={item} control={<Radio />} label={item} />
-          ))}
-        </RadioGroup>
-      )}
-    />
-  )
-}
-
-export default ControlRadioBtn;