@dartech/arsenal-ui 1.2.4 → 1.2.6

package/src/lib/Forms/ControlTime.tsx

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

@@ -0,0 +1,46 @@
+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/{index.d.ts → index.ts}

@@ -1,15 +1,15 @@
-export * from './ControlInput';
-export * from './ControlDebouncedInput';
-export * from './ControlSelect';
-export * from './ControlCheckbox';
-export * from './ControlRadio';
-export * from './ControlAutocomplete';
-export * from './ControlQueryAutocomplete';
-export * from './CopyButton';
-export * from './BackButton';
-export * from './ControlAceEditor';
-export * from './ControlNumberInput';
-export * from './ControlSwitch';
-export * from './ControlDate';
-export * from './ControlDateTime';
-export * from './ControlTime';
+export * from './ControlInput';
+export * from './ControlDebouncedInput';
+export * from './ControlSelect';
+export * from './ControlCheckbox';
+export * from './ControlRadio';
+export * from './ControlAutocomplete';
+export * from './ControlQueryAutocomplete';
+export * from './CopyButton';
+export * from './BackButton';
+export * from './ControlAceEditor';
+export * from './ControlNumberInput';
+export * from './ControlSwitch';
+export * from './ControlDate';
+export * from './ControlDateTime';
+export * from './ControlTime';

package/src/lib/Forms/useAutocomplete.tsx

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

@@ -0,0 +1,40 @@
+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/{index.d.ts → index.ts}

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

package/src/lib/InfoItem/styles.ts

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

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

@@ -0,0 +1,70 @@
+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/JsonPathPicker/{index.d.ts → index.ts}

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

package/src/lib/JsonView/JsonView.tsx

@@ -0,0 +1,41 @@
+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 }}
+
+    />
+  );
+};

package/src/lib/JsonView/{index.d.ts → index.ts}

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

package/src/lib/Loader/Loader.tsx

@@ -0,0 +1,41 @@
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/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?: 'absolute' | 'relative' | 'fixed';
+}
+/**
+ * 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.d.ts → index.ts}

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

package/src/lib/Modals/JsonModalView.tsx

@@ -0,0 +1,53 @@
+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 '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/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,
+            useWorker: false
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <CopyButton copyText={value} />
+        <Button onClick={onClose} variant="contained" color="secondary">
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default JsonModalView;

package/src/lib/Modals/{index.d.ts → index.ts}

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

package/src/lib/Property/PropertyFiller/JsonEditor.tsx

@@ -0,0 +1,58 @@
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-json';
+import { RefCallBack, useFormContext, useWatch } from 'react-hook-form';
+
+type Props = {
+  validate?: boolean;
+  name: string;
+  inputRef: RefCallBack;
+};
+
+const JsonEditor = ({ validate = false, name, inputRef }: Props) => {
+  const { control, setValue, setError, clearErrors } = useFormContext();
+  const value = useWatch({ control, name });
+
+  const handleChange = (value: string) => {
+    setValue(name, value);
+
+    if (validate) {
+      try {
+        JSON.parse(value);
+        clearErrors(name);
+      } catch (err) {
+        setError(name, { message: 'Invalid JSON' });
+      }
+    }
+  };
+
+  return (
+    <AceEditor
+      wrapEnabled
+      width="100%"
+      height="200px"
+      theme="monokai"
+      fontSize={14}
+      showPrintMargin={false}
+      style={{ lineHeight: 1.4, zIndex: 0, isolation: 'isolate' }}
+      setOptions={{
+        enableLiveAutocompletion: true,
+        enableBasicAutocompletion: true,
+        showLineNumbers: true,
+        tabSize: 2,
+        useWorker: false
+      }}
+      ref={inputRef}
+      name={name}
+      value={typeof value !== 'string' ? (value === null ? '' : JSON.stringify(value)) : value}
+      onChange={handleChange}
+      mode="json"
+      onLoad={(editor) => {
+        if (!validate) {
+          editor.getSession().setUseWorker(false);
+        }
+      }}
+    />
+  );
+};
+
+export default JsonEditor;