@dartech/arsenal-ui 1.2.5 → 1.2.7

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;

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

@@ -1,199 +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 { ControlInput } from '../../Forms';
-import { PropertyWidget } from '../PropertyWidget';
-
-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';
-import { CreateDefinition } from '../../Definition';
-import { defaultDefinitionArrayValue } from '../../../consts';
-import {
-  propertiesArrayToObject,
-  propertiesObjectToArray,
-} from '../../../utils';
-
-type Props = {
-  property: PropertyUnion;
-  name: string;
-  useExpression?: boolean;
-  label?: string;
-  required?: boolean;
-  title?: string;
-};
-
-export const PropertyFiller = ({
-  property,
-  name,
-  useExpression,
-  label,
-  required,
-  title,
-}: Props) => {
-  const { control, clearErrors } = useFormContext();
-  const {
-    field: { ref, onChange },
-    fieldState: { error, isDirty },
-  } = useController({
-    name,
-  });
-  const value = useWatch({ control, name });
-
-  const {
-    propertyType,
-    valueLabel,
-    fillOptionLabel,
-    fillOption,
-    fillOptions,
-    setFillOption,
-  } = usePropertyFiller({
-    value,
-    property,
-    isDirty,
-    label,
-    required,
-    useExpression,
-  });
-
-  const handleFillOptionChange = (
-    event: SelectChangeEvent<PropertyFillType>
-  ) => {
-    const selectedType = event.target.value as PropertyFillType;
-    if (selectedType === 'null') {
-      onChange(null);
-      // register(name, { value: null });
-    } else if (selectedType === 'widget') {
-      if (
-        propertyType === PropertyType.JSON &&
-        value &&
-        typeof value !== 'string' &&
-        fillOption === 'dem_builder' &&
-        'properties' in value
-      ) {
-        const definitionValue = {
-          ...value,
-          properties: propertiesArrayToObject(value.property || []),
-        };
-        try {
-          onChange(JSON.stringify(definitionValue, null, '\t'));
-        } catch (error) {
-          console.log('Stringify failed');
-        }
-      } else {
-        onChange(null);
-      }
-    } else if (selectedType === 'expression' || selectedType === 'string') {
-      onChange('');
-    } else if (selectedType === 'dem_builder') {
-      if (value) {
-        try {
-          const definitionValue = JSON.parse(value);
-          definitionValue['properties'] = propertiesObjectToArray(
-            definitionValue['properties'] || {}
-          );
-          onChange(definitionValue);
-        } catch (error) {
-          onChange(defaultDefinitionArrayValue);
-          console.log('Parse failed');
-        }
-      } else {
-        onChange(defaultDefinitionArrayValue);
-      }
-    }
-    setFillOption(selectedType);
-    clearErrors(name);
-  };
-
-  useEffect(() => {
-    if (value === undefined) {
-      onChange(null);
-    }
-  }, [value, onChange]);
-
-  const { classes } = useStyles();
-  return (
-    <Grid xs={12}>
-      {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
-            control={control}
-            name={name}
-            label={valueLabel}
-            required
-            hideErrorMessage
-          />
-        ))}
-      {fillOption === 'string' && (
-        <ControlInput
-          control={control}
-          name={name}
-          label={valueLabel}
-          required
-          hideErrorMessage
-        />
-      )}
-      {fillOption === 'json_notvalid' && (
-        <JsonEditor name={name} inputRef={ref} />
-      )}
-      {fillOption === 'widget' && (
-        <PropertyWidget
-          property={property}
-          name={name}
-          useExpression={useExpression}
-          label={valueLabel}
-          inputRef={ref}
-          required={required}
-        />
-      )}
-      {fillOption === 'dem_builder' && (
-        <CreateDefinition title="JSON" definitionFieldName={name} />
-      )}
-      {error && <Typography color="secondary">{error.message}</Typography>}
-    </Grid>
-  );
-};
-
-export default PropertyFiller;

package/src/lib/Property/PropertyFiller/usePropertyFiller.ts

@@ -1,72 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import {
-  getMultiplePropertyFillOptions,
-  getSinglePropertyFillOptions,
-  isExpression,
-  isPropertyValueEmpty,
-} from '../../../utils';
-
-import { PropertyFillType, PropertyUnion } from '../../../interfaces';
-
-type Props = {
-  value: unknown;
-  property: PropertyUnion;
-  isDirty: boolean;
-  label?: string;
-  required?: boolean;
-  useExpression?: boolean;
-  multipleOptions?: boolean;
-};
-
-const usePropertyFiller = ({
-  value,
-  property,
-  label,
-  isDirty,
-  required = false,
-  useExpression = false,
-  multipleOptions = false,
-}: Props) => {
-  const valueLabel = useMemo(() => (label ? `${label} (value)` : `${property.name} (value)`), [label, property]);
-  const fillOptionLabel = useMemo(() => (label ? `${label} (widget)` : `${property.name} (widget)`), [label, property]);
-
-  const propertyType = useMemo(
-    () => (typeof property.propertyType === 'string' ? property.propertyType : property['propertyType']['value']),
-    [property]
-  );
-
-  const [fillOption, setFillOption] = useState<PropertyFillType>(null);
-  const fillOptions = useMemo(
-    () =>
-      multipleOptions
-        ? getMultiplePropertyFillOptions({ propertyType, required, useExpression })
-        : getSinglePropertyFillOptions({
-            propertyType,
-            required,
-            useExpression,
-          }),
-    [useExpression, required, propertyType, multipleOptions]
-  );
-
-  useEffect(() => {
-    if (!fillOption) {
-      if (isPropertyValueEmpty(value) && fillOptions?.length) {
-        setFillOption(fillOptions[0].value);
-      } else if (useExpression && isExpression(value)) {
-        setFillOption('expression');
-      } else {
-        setFillOption('widget');
-      }
-    } else if (!isDirty) {
-      if (isExpression(value) && fillOption !== 'expression') {
-        setFillOption('expression');
-      } else if (value !== null && value !== undefined && !isExpression(value) && fillOption !== 'widget') {
-        setFillOption('widget');
-      }
-    }
-  }, [value, fillOption, fillOptions, useExpression, isDirty]);
-
-  return { propertyType, valueLabel, fillOptionLabel, fillOption, fillOptions, setFillOption };
-};
-
-export default usePropertyFiller;

package/src/lib/Property/PropertyFiller/useStyles.ts

@@ -1,12 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()(() => ({
-  inputLabel: {
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    width: '100%',
-  },
-}));
-
-export default useStyles;