@dartech/arsenal-ui 1.3.0 → 1.3.1

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 }}
-
-    />
-  );
-};

package/src/lib/Loader/Loader.tsx

@@ -1,41 +0,0 @@
-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/Modals/JsonModalView.tsx

@@ -1,53 +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 '@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/Property/PropertyFiller/JsonEditor.tsx

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

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

@@ -1,129 +0,0 @@
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
-import Typography from '@mui/material/Typography';
-import JsonEditor from './JsonEditor';
-import MultiplePropertyWidget from './MultiplePropertyWidget';
-import { ControlInput } from '../../Forms';
-
-import { useEffect } from 'react';
-import { useController, useFormContext, useWatch } from 'react-hook-form';
-import usePropertyFiller from './usePropertyFiller';
-import useStyles from './useStyles';
-
-import { PropertyFillType, PropertyType, PropertyUnion } from '../../../interfaces';
-
-type Props = {
-  property: PropertyUnion;
-  name: string;
-  useExpression?: boolean;
-  required?: boolean;
-  label?: string;
-  title?: string;
-};
-
-export const MultiplePropertyFiller = ({ property, name, useExpression, required, label, title }: Props) => {
-  const { control, clearErrors } = useFormContext();
-  const {
-    field: { ref, onChange },
-    fieldState: { error, isDirty },
-  } = useController({
-    control,
-    name,
-    rules: {
-      validate: (val) => {
-        if (required && !val) {
-          return 'Please, fill this field';
-        }
-        return true;
-      },
-    },
-  });
-  const value = useWatch({ control, name });
-
-  const { propertyType, valueLabel, fillOptionLabel, fillOption, fillOptions, setFillOption } = usePropertyFiller({
-    property,
-    value,
-    isDirty,
-    label,
-    required,
-    useExpression,
-    multipleOptions: true,
-  });
-
-  const handleFillOptionChange = (event: SelectChangeEvent<PropertyFillType>) => {
-    const selectedType = event.target.value as PropertyFillType;
-
-    if (selectedType === 'null') {
-      onChange(null);
-    } else if (selectedType === 'expression' || selectedType === 'json_valid' || selectedType === 'json_notvalid') {
-      onChange('');
-    } else if (selectedType === 'widget') {
-      onChange([]);
-    }
-    setFillOption(selectedType);
-    clearErrors(name);
-  };
-
-  useEffect(() => {
-    if (value === undefined) {
-      onChange(null);
-    }
-  }, [value, onChange]);
-
-  const { classes } = useStyles();
-  return (
-    <Grid>
-      {title && (
-        <Box mb={2}>
-          <Typography variant="h6">{title}</Typography>
-        </Box>
-      )}
-      {fillOptions ? (
-        <Box mb={2}>
-          <FormControl fullWidth size="small" variant="outlined">
-            <InputLabel htmlFor="type-select" className={classes.inputLabel}>
-              {fillOptionLabel}
-            </InputLabel>
-            <Select
-              labelId="type-select"
-              label={fillOptionLabel}
-              value={fillOption || ''}
-              onChange={handleFillOptionChange}
-            >
-              {fillOptions.map((option) => (
-                <MenuItem key={option.value} value={option.value}>
-                  {option.label}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-        </Box>
-      ) : null}
-      {fillOption === 'expression' &&
-        (propertyType === PropertyType.JSON ||
-        propertyType === PropertyType.ENTITY ||
-        propertyType === PropertyType.ANY ? (
-          <JsonEditor name={name} inputRef={ref} />
-        ) : (
-          <ControlInput required hideErrorMessage control={control} name={name} label={valueLabel} />
-        ))}
-      {fillOption === 'json_valid' && <JsonEditor validate name={name} inputRef={ref} />}
-      {fillOption === 'widget' && (
-        <MultiplePropertyWidget
-          property={property}
-          name={name}
-          useExpression={useExpression}
-          required={required}
-          label={label}
-        />
-      )}
-      {error && <Typography color="secondary">{error.message}</Typography>}
-    </Grid>
-  );
-};
-
-export default MultiplePropertyFiller;

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

@@ -1,85 +0,0 @@
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
-import PropertyFiller from './PropertyFiller';
-
-import { useCallback } from 'react';
-import { useController, useFormContext, useWatch } from 'react-hook-form';
-import { removeArrayItem } from '../../../utils';
-
-import { PropertyUnion } from '../../../interfaces';
-
-type Props = {
-  name: string;
-  property: PropertyUnion;
-  useExpression?: boolean;
-  required?: boolean;
-  label?: string;
-};
-
-const MultiplePropertyWidget = ({ name, property, useExpression, required, label }: Props) => {
-  const { control, setValue, clearErrors } = useFormContext();
-  const controller = useController({
-    control,
-    name,
-    rules: {
-      validate: (val) => {
-        if (!val || (Array.isArray(val) && !val.length)) {
-          return 'Please, fill array';
-        }
-        return true;
-      },
-    },
-  });
-  const values = useWatch({ control, name });
-
-  const handleAddValue = useCallback(() => {
-    if (values && Array.isArray(values)) {
-      setValue(`${name}.${values.length}`, null);
-    } else {
-      setValue(name, [null]);
-    }
-    clearErrors(name);
-  }, [name, values, setValue, clearErrors]);
-
-  const handleDeleteValue = useCallback(
-    (index) => {
-      setValue(name, removeArrayItem(values, index));
-    },
-    [name, values, setValue]
-  );
-
-  return (
-    <Grid container spacing={2} direction="column" xs={12}>
-      {values && Array.isArray(values)
-        ? values.map((value, index) => (
-            <Grid key={index} xs={12}>
-              <Box display="flex" alignItems="flex-start" width="100%" p={2} style={{ backgroundColor: '#f1f1f1' }}>
-                <PropertyFiller
-                  required={required}
-                  property={property}
-                  useExpression={useExpression}
-                  name={`${name}.${index}`}
-                  label={`${label || property.name} (${index + 1})`}
-                />
-                <Box mt="8px" ml="4px">
-                  <IconButton size="small" onClick={() => handleDeleteValue(index)}>
-                    <CloseIcon fontSize="small" />
-                  </IconButton>
-                </Box>
-              </Box>
-            </Grid>
-          ))
-        : null}
-      <Grid>
-        <Button variant="contained" size="small" color="primary" onClick={handleAddValue}>
-          Add value
-        </Button>
-      </Grid>
-    </Grid>
-  );
-};
-
-export default MultiplePropertyWidget;