@dartech/arsenal-ui 0.0.1

package/src/lib/Forms/ControlAceEditor.tsx

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

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

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

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

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

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

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