@dartech/arsenal-ui 0.0.1

package/src/lib/Forms/ControlSelect.tsx

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

@@ -0,0 +1,49 @@
+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/Forms/index.ts

@@ -0,0 +1,10 @@
+export * from './ControlInput';
+export * from './ControlDebouncedInput';
+export * from './ControlSelect';
+export * from './ControlCheckbox';
+export * from './ControlRadioBtn';
+export * from './ControlAutocomplete';
+export * from './CopyButton';
+export * from './BackButton';
+export * from './ControlAceEditor';
+export * from './ControlNumberInput';

package/src/lib/InfoItem/InfoItem.tsx

@@ -0,0 +1,39 @@
+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/index.ts

@@ -0,0 +1 @@
+export * from './InfoItem';

package/src/lib/InfoItem/styles.ts

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

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

@@ -0,0 +1,74 @@
+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/JsonPathPicker/index.ts

@@ -0,0 +1 @@
+export * from './JsonPathPicker';

package/src/lib/JsonView/JsonView.tsx

@@ -0,0 +1,43 @@
+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/JsonView/index.ts

@@ -0,0 +1 @@
+export * from './JsonView';

package/src/lib/Loader/Loader.tsx

@@ -0,0 +1,41 @@
+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/Loader/index.ts

@@ -0,0 +1 @@
+export * from './Loader';

package/src/lib/Modals/JsonModalView.tsx

@@ -0,0 +1,52 @@
+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/Modals/index.ts

@@ -0,0 +1 @@
+export * from './JsonModalView';

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

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

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