@dartech/arsenal-ui 1.2.5 → 1.2.7

package/src/lib/Forms/ControlSelect.tsx

@@ -1,164 +0,0 @@
-import TextField, { TextFieldProps } from '@mui/material/TextField';
-import MenuItem from '@mui/material/MenuItem';
-import ClearIcon from '@mui/icons-material/Clear';
-
-import { useCallback } from 'react';
-import { useController, Control, useWatch } from 'react-hook-form';
-import { ValidateFunc } from '../../interfaces';
-import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
-
-/**
- * This interface is referencing the [[ControlSelect]] component props.
- * @category Forms
- */
-export type ControlSelectProps = TextFieldProps & {
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * Label for MUI TextField select component
-   */
-  label?: string;
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * Is input required flag
-   */
-  required?: boolean;
-  /**
-   * React Hook Form `defaultValue`
-   */
-  defaultValue?: unknown;
-  /**
-   * Is disabled input flag
-   */
-  disabled?: boolean;
-  /**
-   * React Hook Form validate function
-   * ```typescript
-   * type ValidateFunc = (value: string) => boolean | string;
-   * ```
-   */
-  validate?: ValidateFunc | Record<string, ValidateFunc>;
-  /**
-   * Hide error message flag
-   */
-  hideErrorMessage?: boolean;
-  /**
-   * Custom onChange functionƒ
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /**
-   * Key for option label
-   */
-  labelKey?: string;
-  /**
-   * Key for option value
-   */
-  valueKey?: string;
-  /**
-   * Select options
-   */
-  options: string[] | unknown[];
-};
-
-/**
- * Material UI `Select` controlled component. Used with react-hook-form
- * @category Forms
- */
-export const ControlSelect = ({
-  control,
-  validate,
-  name = '',
-  label = '',
-  required = false,
-  defaultValue = '',
-  disabled = false,
-  hideErrorMessage = false,
-  onChange: customOnChange,
-  labelKey,
-  valueKey,
-  options = [],
-  ...textFieldProps
-}: ControlSelectProps) => {
-  const {
-    field: { ref, onChange },
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-    defaultValue,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate,
-    },
-  });
-  const value = useWatch({ control, name });
-
-  const getValue = useCallback(
-    (option) => {
-      if (typeof option === 'string') return option;
-      return valueKey ? option[valueKey] : option.value;
-    },
-    [valueKey]
-  );
-  const getLabel = useCallback(
-    (option) => {
-      if (typeof option === 'string') return option;
-      return labelKey ? option[labelKey] : option.label;
-    },
-    [labelKey]
-  );
-
-  const handleClear = useCallback(() => {
-    if (customOnChange) {
-      customOnChange(null);
-    } else onChange(null);
-  }, [onChange, customOnChange]);
-
-  return (
-    <TextField
-      select
-      fullWidth
-      size="small"
-      variant="outlined"
-      type="text"
-      inputRef={ref}
-      name={name}
-      label={label}
-      error={!!error}
-      helperText={!hideErrorMessage && error?.message}
-      disabled={disabled}
-      value={value ?? ''}
-      onChange={customOnChange ? customOnChange : onChange}
-      {...textFieldProps}
-      inputProps={{
-        ...(textFieldProps?.inputProps ?? {}),
-        value: value ?? '',
-      }}
-      InputProps={{
-        endAdornment:
-          !required && value ? (
-            <InputAdornment position="end" sx={{ mr: 2 }}>
-              <IconButton onClick={handleClear} size="small">
-                <ClearIcon fontSize="small" />
-              </IconButton>
-            </InputAdornment>
-          ) : null,
-        ...textFieldProps?.InputProps,
-      }}
-    >
-      {options.map((option, index) => (
-        <MenuItem key={index} value={getValue(option)}>
-          {getLabel(option)}
-        </MenuItem>
-      ))}
-    </TextField>
-  );
-};
-
-export default ControlSelect;

package/src/lib/Forms/ControlSwitch.tsx

@@ -1,71 +0,0 @@
-import Switch, { SwitchProps } from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import { Control, useController, useWatch } from 'react-hook-form';
-import { useEffect, useMemo } from 'react';
-
-type Props = SwitchProps & {
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * Material-UI FormControlLabel `label` prop
-   */
-  label?: string;
-};
-
-export const ControlSwitch = ({ control, name, label, ...switchProps }: Props) => {
-  const {
-    field: { ref, onChange },
-  } = useController({ control, name });
-  const value = useWatch({ control, name });
-
-  const checked = useMemo(() => {
-    if (typeof value === 'boolean') {
-      return value;
-    } else if (typeof value === 'string') {
-      if (value === 'false') {
-        onChange(false);
-        return false;
-      } else if (value === 'true') {
-        onChange(true);
-        return true;
-      }
-    }
-    return false;
-  }, [value, onChange]);
-
-  useEffect(() => {
-    if (value === null) {
-      onChange(false);
-    }
-  }, [value, onChange]);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checked } = event.target;
-    onChange(checked);
-  };
-
-  return (
-    <FormControlLabel
-      label={label}
-      name={name}
-      control={
-        <Switch
-          color="primary"
-          size="small"
-          inputRef={ref}
-          onChange={handleChange}
-          checked={checked}
-          {...switchProps}
-        />
-      }
-    />
-  );
-};
-
-export default ControlSwitch;

package/src/lib/Forms/ControlTime.tsx

@@ -1,93 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-
-import { parse, format as dateFnsFormat, isMatch, isValid } from 'date-fns';
-import { useEffect, useState } from 'react';
-import { Control, useController, useWatch } from 'react-hook-form';
-import { TIME_DEFAULT_FORMAT } from '../../interfaces';
-
-type Props = {
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * Is input required flag
-   */
-  required?: boolean;
-  name: string;
-  label?: string;
-  format?: string;
-  hideErrorMessage?: boolean;
-};
-
-export const ControlTime = ({
-  control,
-  name,
-  required,
-  label,
-  format = TIME_DEFAULT_FORMAT,
-  hideErrorMessage = false,
-}: Props) => {
-  const {
-    field: { onChange, ref },
-    fieldState: { error },
-  } = useController({
-    control,
-    name,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate: (val) => {
-        if (isMatch(val, format)) {
-          return true;
-        }
-        return 'Incorrect date format';
-      },
-    },
-  });
-  const value = useWatch({ control, name });
-
-  const [fieldValue, setFieldValue] = useState(null);
-
-  const handleChange = (date: Date) => {
-    setFieldValue(date);
-    onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-  };
-
-  useEffect(() => {
-    if (value && format) {
-      let parsedValue = parse(value, format, new Date());
-
-      if (!isValid(parsedValue)) {
-        parsedValue = parse(value, 'HH:mm:ss.SSS', new Date());
-      }
-
-      setFieldValue(parsedValue);
-    }
-  }, [value, format]);
-
-  return (
-    <TimePicker
-      mask=""
-      inputRef={ref}
-      label={label}
-      ampm={false}
-      value={fieldValue}
-      inputFormat={format}
-      onChange={handleChange}
-      renderInput={(props) => (
-        <TextField
-          {...props}
-          fullWidth
-          size="small"
-          variant="outlined"
-          name={name}
-          error={!!error}
-          helperText={!hideErrorMessage && error?.message}
-        />
-      )}
-    />
-  );
-};
-
-export default ControlTime;

package/src/lib/Forms/CopyButton.tsx

@@ -1,46 +0,0 @@
-import { useState } from 'react';
-// import FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined';
-import Tooltip from '@mui/material/Tooltip';
-import IconButton from '@mui/material/IconButton';
-import SvgIcon from '@mui/material/SvgIcon';
-/**
- * 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}>
-        <SvgIcon fontSize="small">
-          <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4 6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"></path>
-        </SvgIcon>
-      </IconButton>
-    </Tooltip>
-  ) : null;
-};

package/src/lib/Forms/useAutocomplete.tsx

@@ -1,47 +0,0 @@
-import Box from '@mui/material/Box';
-import { useCallback } from 'react';
-
-const useAutocomplete = ({ valueKey, labelKey }) => {
-  const isOptionEqualToValue = 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;
-    },
-    [valueKey]
-  );
-
-  const getOptionLabel = useCallback(
-    (option) => {
-      if (!option) return '';
-      if (typeof option === 'string') {
-        return option;
-      } else if (labelKey && option[labelKey]) {
-        return option[labelKey] + '';
-      } else {
-        return option.label + '' || option.name + '' || option.value + '' || option.code + '' || '--no label--';
-      }
-    },
-    [labelKey]
-  );
-
-  const renderOption = useCallback(
-    (props, option) => (
-      <Box {...props} component="li" key={props.id}>
-        {getOptionLabel(option)}
-      </Box>
-    ),
-    [getOptionLabel]
-  );
-
-  return { isOptionEqualToValue, getOptionLabel, renderOption };
-};
-
-export default useAutocomplete;

package/src/lib/InfoItem/InfoItem.tsx

@@ -1,40 +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,
-            useWorker: false
-          }}
-        />
-      )}
-    </div>
-  );
-};
-
-export default InfoItem;

package/src/lib/InfoItem/styles.ts

@@ -1,17 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-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,73 +0,0 @@
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import Typography from '@mui/material/Typography';
-import PropertyStep from './PropertyStep';
-
-import { useState } from 'react';
-import { toast } from 'react-toastify';
-import { JsonPathPickerProperty } from '../../interfaces';
-
-type Props = {
-  properties: JsonPathPickerProperty[];
-  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 = () => {
-    onPaste(`$(${selectedPropertyPath})`);
-    toast.success('Pasted!');
-  };
-
-  return (
-    <Dialog open={open} onClose={onClose} fullWidth maxWidth="md">
-      <DialogTitle>JSON path picker</DialogTitle>
-      <DialogContent>
-        {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>
-        )}
-        {selectedPropertyPath && (
-          <Typography variant="h6" gutterBottom>
-            Selected path : $({selectedPropertyPath})
-          </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;

package/src/lib/JsonPathPicker/PropertyStep.tsx

@@ -1,70 +0,0 @@
-import Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-import StepContent from '@mui/material/StepContent';
-
-import { EntityTypeProperty, PropertiesArrayType, PropertyType } from '../../interfaces';
-import { makeStyles } from 'tss-react/mui';
-
-type Props = {
-  properties: PropertiesArrayType;
-  parentKey?: string;
-  activePath: string;
-  prefix?: string;
-  onClick: (path: string) => void;
-};
-
-const useStyles = makeStyles()(() => ({
-  propertyStepLabel: {
-    '&:hover': {
-      fontWeight: '600',
-      cursor: 'pointer',
-    },
-  },
-}));
-
-const PropertyStep = ({ properties, parentKey = '', activePath = '', prefix = '', onClick }: Props) => {
-  const { classes } = useStyles();
-
-  const handleClick = (path: string) => {
-    if (prefix) {
-      onClick(`${prefix}.${path}`);
-    } else {
-      onClick(path);
-    }
-  };
-
-  return (
-    <Stepper orientation="vertical" onClick={(event) => event.stopPropagation()}>
-      {properties &&
-        properties.map((property) => {
-          const fullPropertyPath = parentKey ? `${parentKey}.${property.key}` : property.key;
-          const propertyType = property.propertyType['value'] ?? property.propertyType;
-          return (
-            <Step expanded key={property.key} onClick={() => handleClick(fullPropertyPath)}>
-              <StepLabel StepIconProps={{ icon: '', completed: false, active: activePath === fullPropertyPath }}>
-                <div className={classes.propertyStepLabel}>
-                  {property.name} - {property.key} - {propertyType}
-                </div>
-              </StepLabel>
-              <StepContent>
-                <div>
-                  {propertyType === PropertyType.ENTITY && (
-                    <PropertyStep
-                      key={property.key}
-                      onClick={onClick}
-                      activePath={activePath}
-                      properties={(property as EntityTypeProperty).properties as PropertiesArrayType}
-                      parentKey={fullPropertyPath}
-                    />
-                  )}
-                </div>
-              </StepContent>
-            </Step>
-          );
-        })}
-    </Stepper>
-  );
-};
-
-export default PropertyStep;

package/src/lib/JsonView/JsonView.tsx

@@ -1,41 +0,0 @@
-import { useMemo } from 'react';
-import CodeMirror from '@uiw/react-codemirror';
-import { langs } from '@uiw/codemirror-extensions-langs';
-
-type Props = {
-  value: unknown;
-  height?: string;
-};
-
-
-export const JsonView = ({ value, height = '200px' }: Props) => {
-  
-  const stringValue = useMemo(() => {
-    if (typeof value === 'string') {
-      return value;
-    } else if (typeof value === 'object') {
-      try {
-        return JSON.stringify(value, null, 2);
-      } catch (error) {
-        return 'Failed to stringify Object';
-      }
-    }
-    return '';
-  }, [value]);
-
-  return (
-    <CodeMirror
-      readOnly
-      width="100%"
-      value={stringValue}
-      height={height}
-      basicSetup={{
-        autocompletion: true,
-        history: true
-      }}
-      extensions={[langs.json()]}
-      style={{ fontSize: 16 }}
-
-    />
-  );
-};