@dartech/arsenal-ui 0.0.1 → 0.0.3

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;

package/src/lib/Forms/ControlSelect.tsx

@@ -1,135 +0,0 @@
-import { useCallback } from 'react';
-import { useController, Control } from 'react-hook-form';
-import TextField from '@material-ui/core/TextField';
-import MenuItem from '@material-ui/core/MenuItem';
-
-type ValidateFunc = (value: string) => boolean | string;
-
-type onChangeCallback = (e: any) => void;
-
-/**
- * This interface is referencing the [[ControlSelect]] component props.
- * @category Forms
- */
-export interface ControlSelectProps {
-  /**
-   * Props for MUI TextField component
-   */
-  inputProps?: Record<string, string | number | boolean | onChangeCallback | { [key: string]: any }>;
-  /**
-   * Props for MUI SelectProps component
-   */
-  selectProps?: Record<string, string | number | boolean | onChangeCallback | { [key: string]: any }>;
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  defaultValue?: any;
-  /**
-   * Is field required flag
-   */
-  required?: boolean;
-  /**
-   * Select options
-   */
-  options: any[];
-  /**
-   * Key for option label
-   */
-  labelKey?: string;
-  /**
-   * Key for option value
-   */
-  valueKey?: string;
-  /**
-   * 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>;
-  label?: string;
-  disabled?: boolean;
-}
-
-/**
- * Material UI `Select` controlled component. Used with react-hook-form
- * @category Forms
- */
-export const ControlSelect = ({
-  inputProps,
-  selectProps,
-  name,
-  control,
-  required,
-  defaultValue,
-  options,
-  variant = 'outlined',
-  validate,
-  labelKey,
-  valueKey,
-  label = '',
-  disabled = false,
-}: ControlSelectProps) => {
-  const {
-    field: { ref, value, ...restProps },
-    fieldState: { error },
-  } = useController({
-    name,
-    defaultValue,
-    control,
-    rules: {
-      required: required && 'Required field',
-      validate,
-    },
-  });
-  const getValue = useCallback(
-    (item) => {
-      if (typeof item === 'string') return item;
-      return valueKey ? item[valueKey] : item.value;
-    },
-    [valueKey]
-  );
-  const getLabel = useCallback(
-    (item) => {
-      if (typeof item === 'string') return item;
-      return labelKey ? item[labelKey] : item.label;
-    },
-    [labelKey]
-  );
-
-  return (
-    <TextField
-      size="small"
-      select
-      fullWidth
-      error={!!error}
-      inputRef={ref}
-      ref={ref}
-      helperText={error?.message}
-      SelectProps={selectProps}
-      variant={variant}
-      label={label}
-      disabled={disabled}
-      inputProps={{ ...inputProps }}
-      value={value || ''}
-      {...restProps}
-    >
-      {options?.map((el) => (
-        <MenuItem key={getValue(el)} value={getValue(el)}>
-          {getLabel(el)}
-        </MenuItem>
-      ))}
-    </TextField>
-  );
-};
-
-export default ControlSelect;

package/src/lib/Forms/CopyButton.tsx

@@ -1,49 +0,0 @@
-import { useState, Fragment } from 'react';
-import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
-import Tooltip from '@material-ui/core/Tooltip';
-import IconButton from '@material-ui/core/IconButton';
-
-/**
- * This interface is referencing the [[CopyButton]] component props.
- * @category Forms
- */
-export interface CopyButtonProps {
-  /**
-   * Text to copy
-   */
-  copyText: string;
-  /**
-   * Tooltip help text
-   */
-  helpText?: string;
-};
-
-/**
- * Copy value button
- * @category Forms
- */
-export const CopyButton = ({ copyText, helpText = 'Copy' }: CopyButtonProps) => {
-  const [tooltipText, setTooltipText] = useState(helpText);
-
-  const onCopy = () => {
-    navigator.clipboard.writeText(copyText);
-    setTooltipText('Copied!');
-
-    setTimeout(() => {
-      setTooltipText(helpText);
-    }, 1000);
-  };
-
-  return (
-   tooltipText ? (
-      <Tooltip title={tooltipText} placement="top">
-        <IconButton onClick={onCopy}>
-          <FileCopyOutlinedIcon fontSize="small" />
-        </IconButton>
-      </Tooltip>
-    ) : null
-    
-  );
-};
-
-export default CopyButton;

package/src/lib/InfoItem/InfoItem.tsx

@@ -1,39 +0,0 @@
-import AceEditor from 'react-ace';
-import useStyles from './styles';
-import 'ace-builds/src-noconflict/ace';
-import 'ace-builds/src-noconflict/mode-json';
-
-type Props = {
-  title: string;
-  text?: string;
-  json?: any;
-};
-
-export const InfoItem = ({ title, text, json }: Props) => {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.container}>
-      <div className={classes.title}>{title}</div>
-      {text && <div className={classes.text}>{text}</div>}
-      {json && (
-        <AceEditor
-          readOnly
-          value={json}
-          mode="json"
-          height="300px"
-          width="100%"
-          fontSize="16"
-          setOptions={{
-            enableSnippets: false,
-            copyWithEmptySelection: true,
-            showLineNumbers: true,
-            tabSize: 2,
-          }}
-        />
-      )}
-    </div>
-  );
-};
-
-export default InfoItem;

package/src/lib/InfoItem/styles.ts

@@ -1,17 +0,0 @@
-import { makeStyles } from '@material-ui/core/styles';
-
-export default makeStyles(() => ({
-  container: {
-    borderBottom: '1px solid #ccc',
-    paddingBottom: '8px',
-  },
-  title: {
-    fontSize: '14px',
-    fontWeight: 600,
-    color: '#536DFE',
-  },
-  text: {
-    fontSize: '18px',
-    wordWrap: 'break-word',
-  },
-}));

package/src/lib/JsonPathPicker/JsonPathPicker.tsx

@@ -1,71 +0,0 @@
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
-import Typography from '@material-ui/core/Typography';
-import PropertyStep from './PropertyStep';
-
-import { useState } from 'react';
-import { toast } from 'react-toastify';
-import { JsonPathPickerProperties } from '../../interfaces';
-
-type Props = {
-  properties: JsonPathPickerProperties;
-  open: boolean;
-  onClose: () => void;
-  onPaste: (path: string) => void;
-};
-
-export const JsonPathPicker = ({ open = false, onClose, onPaste, properties }: Props) => {
-  const [selectedPropertyPath, setSelectedPropertyPath] = useState<string>('');
-
-  const onCopy = () => {
-    navigator.clipboard.writeText(`$(${selectedPropertyPath})`);
-    toast.success('Copied!');
-  };
-
-  const handlePaste = () => {
-    toast.success('Pasted!');
-    onPaste(`$(${selectedPropertyPath})`);
-  };
-
-  return (
-    <Dialog open={open} onClose={onClose} fullWidth maxWidth="md">
-      <DialogTitle>JSON path picker</DialogTitle>
-      <DialogContent>
-        <Typography variant="h6" gutterBottom>
-          Path : $({selectedPropertyPath})
-        </Typography>
-        {properties?.length ? (
-          properties.map((propEl, index) => (
-            <div key={index}>
-              <Typography variant="h6">{propEl.title}</Typography>
-              <PropertyStep
-                properties={propEl.properties}
-                prefix={propEl.pathPrefix}
-                onClick={setSelectedPropertyPath}
-                activePath={selectedPropertyPath}
-              />
-            </div>
-          ))
-        ) : (
-          <Typography>Please, add properties</Typography>
-        )}
-      </DialogContent>
-      <DialogActions>
-        <Button variant="contained" color="primary" onClick={onCopy}>
-          Copy
-        </Button>
-        <Button variant="contained" color="primary" onClick={handlePaste}>
-          Paste
-        </Button>
-        <Button variant="contained" color="secondary" onClick={onClose}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default JsonPathPicker;