@dartech/arsenal-ui 0.0.1 → 0.0.2

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;

package/src/lib/JsonPathPicker/PropertyStep.tsx

@@ -1,74 +0,0 @@
-import Stepper from '@material-ui/core/Stepper';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
-import StepContent from '@material-ui/core/StepContent';
-
-import { EntityTypeProperty, PropertiesArrayType, PropertyType } from '../../interfaces';
-import { makeStyles } from '@material-ui/core/styles';
-
-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.map((property) => {
-        const fullPropertyPath = parentKey ? `${parentKey}.${property.key}` : property.key;
-        let propertyType;
-        if (typeof property.propertyType === 'string') {
-          propertyType = property.propertyType;
-        } else {
-          propertyType = property.propertyType['value'];
-        }
-        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,43 +0,0 @@
-import { useMemo } from 'react';
-import AceEditor from 'react-ace';
-import 'ace-builds/src-noconflict/ace';
-import 'ace-builds/src-noconflict/mode-json';
-
-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, '\t');
-      } catch (error) {
-        return 'Failed to parse JSON';
-      }
-    }
-    return null;
-  }, [value]);
-
-  return (
-    <AceEditor
-      readOnly
-      value={stringValue}
-      mode="json"
-      width="100%"
-      height={height}
-      fontSize="16"
-      setOptions={{
-        enableSnippets: false,
-        copyWithEmptySelection: true,
-        showLineNumbers: true,
-        tabSize: 2,
-      }}
-    />
-  );
-};
-
-export default JsonView;

package/src/lib/Loader/Loader.tsx

@@ -1,41 +0,0 @@
-import Box from "@material-ui/core/Box";
-import CircularProgress from "@material-ui/core/CircularProgress";
-
-/**
- * This interface is referencing the [[Loader]] component props.
- * @category Common UI components
- */
-export interface LoaderProps {
-  /**
-   * Background transparency flag. Default: `rgba(255, 255, 255, .3)`
-   */
-  transparent?: boolean;
-  /**
-   * CSS `position` property. Default: `absolute`
-   */
-  position?: string;
-}
-/**
- * Loader screen component. Used in the data loading process
- * @category Common UI components
- */
-export const Loader = ({ transparent, position }: LoaderProps) => {
-  return (
-    <Box
-      position={position ?? 'absolute'}
-      top={0}
-      left={0}
-      width="100%"
-      height="100%"
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      bgcolor={transparent ? 'none' : 'rgba(255, 255, 255, .3)'}
-      zIndex={10}
-    >
-      <CircularProgress />
-    </Box>
-  )
-}
-
-export default Loader;

package/src/lib/Modals/JsonModalView.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import AceEditor from 'react-ace';
-import 'ace-builds/src-noconflict/ace';
-import 'ace-builds/src-noconflict/mode-json';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
-import Button from '@material-ui/core/Button';
-import { CopyButton } from '../Forms';
-
-type Props = {
-  open: boolean;
-  value: string;
-  onClose: () => void;
-};
-
-export const JsonModalView: React.FC<Props> = ({ open, onClose, value }) => {
-  return (
-    <Dialog
-      disableEscapeKeyDown
-      open={open}
-      onClose={onClose}
-      fullWidth
-      maxWidth="md"
-      style={{ width: 800, left: '30%' }}
-    >
-      <DialogContent>
-        <AceEditor
-          readOnly
-          value={value}
-          mode="json"
-          width="100%"
-          fontSize="16"
-          setOptions={{
-            enableSnippets: false,
-            copyWithEmptySelection: true,
-            showLineNumbers: true,
-            tabSize: 2,
-          }}
-        />
-      </DialogContent>
-      <DialogActions>
-        <CopyButton copyText={value} />
-        <Button onClick={onClose} variant="contained" color="secondary">
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default JsonModalView;

package/src/lib/Property/PropertyValueField/BooleanValueField.tsx

@@ -1,41 +0,0 @@
-import Switch from '@material-ui/core/Switch';
-import Typography from '@material-ui/core/Typography';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { Controller, useFormContext } from 'react-hook-form';
-
-type Props = {
-  name: string;
-  label?: string;
-};
-
-const BooleanValueField = ({ name, label = '' }: Props) => {
-  const { control } = useFormContext();
-
-  return (
-    <>
-      <Typography>{label}</Typography>
-      <Controller
-        control={control}
-        name={name}
-        render={({ field }) => (
-          <FormControlLabel
-            label={(!!field.value + '').toUpperCase()}
-            control={
-              <Switch
-                color="primary"
-                size="small"
-                onChange={(e) => {
-                  const { checked } = e.target;
-                  field.onChange(checked);
-                }}
-                checked={!!field.value + '' === 'true'}
-              />
-            }
-          />
-        )}
-      />
-    </>
-  );
-};
-
-export default BooleanValueField;

package/src/lib/Property/PropertyValueField/DateTimeValueField.tsx

@@ -1,59 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-
-import { format as dateFnsFormat, isValid } from 'date-fns';
-import { Controller, useFormContext } from 'react-hook-form';
-import { DATE_TIME_DEFAULT_FORMAT } from '../../../interfaces';
-
-type Props = {
-  name: string;
-  label?: string;
-  required?: boolean;
-  format?: string;
-};
-
-const DateTimeValueField = ({ name, label, required = false, format = DATE_TIME_DEFAULT_FORMAT }: Props) => {
-  const { control, setError, clearErrors } = useFormContext();
-
-  const onError = (err) => {
-    if (err) {
-      setError(name, { type: 'custom', message: 'Incorrect date format' });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      rules={{ required: required && 'Required field' }}
-      render={({ field: { ref, value, onChange }, fieldState: { error } }) => (
-        <DateTimePicker
-          clearable
-          ampm={false}
-          inputRef={ref}
-          label={label}
-          value={value || null}
-          inputFormat={format}
-          onError={onError}
-          onChange={(date) => {
-            onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-          }}
-          renderInput={(props) => (
-            <TextField
-              {...props}
-              fullWidth
-              size="small"
-              variant="outlined"
-              error={!!error}
-              helperText={error?.message}
-            />
-          )}
-        />
-      )}
-    />
-  );
-};
-
-export default DateTimeValueField;

package/src/lib/Property/PropertyValueField/DateValueField.tsx

@@ -1,59 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-
-import { format as dateFnsFormat, isValid } from 'date-fns';
-import { Controller, useFormContext } from 'react-hook-form';
-import { DATE_DEFAULT_FORMAT } from '../../../interfaces';
-
-type Props = {
-  name: string;
-  format: string;
-  label?: string;
-  required?: boolean;
-};
-
-const DateValueField = ({ name, label = '', required = false, format = DATE_DEFAULT_FORMAT }: Props) => {
-  const { control, setError, clearErrors } = useFormContext();
-
-  const onError = (err) => {
-    if (err) {
-      setError(name, { type: 'custom', message: 'Incorrect date format' });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      rules={{ required: required && 'Required field' }}
-      render={({ field: { ref, value, onChange }, fieldState: { error } }) => (
-        <DatePicker
-          clearable
-          mask=""
-          label={label}
-          inputRef={ref}
-          inputFormat={format}
-          value={value || null}
-          onError={onError}
-          onChange={(date) => {
-            onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-          }}
-          renderInput={(props) => (
-            <TextField
-              {...props}
-              fullWidth
-              size="small"
-              variant="outlined"
-              error={!!error}
-              helperText={error?.message}
-            />
-          )}
-        />
-      )}
-    />
-  );
-};
-
-export default DateValueField;