@dartech/arsenal-ui 1.2.5 → 1.2.7

package/src/lib/Definition/DefinitionFiller/DefinitionFiller.tsx

@@ -1,71 +0,0 @@
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
-import { StepperData, StepperView } from '../../StepperView';
-import { PropertyFiller } from '../../Property';
-import { MultiplePropertyFiller } from '../../Property';
-
-import { useMemo } from 'react';
-
-import { PropertiesArrayType } from '../../../interfaces';
-
-type Props = {
-  properties: PropertiesArrayType;
-  dataFieldName: string;
-  useExpression?: boolean;
-  title?: string;
-};
-
-export const DefinitionFiller = ({ properties, dataFieldName, useExpression = false, title }: Props) => {
-  const stepperData: StepperData = useMemo(() => {
-    if (properties) {
-      return properties.map((property) => {
-        const propertyType =
-          typeof property.propertyType === 'string' ? property.propertyType : property['propertyType']['value'];
-        return {
-          label: (
-            <Box display="flex" flexDirection="column">
-              <b>
-                {property.name}
-                {property.isRequired ? '*' : ''}
-              </b>
-              <span>
-                {property.key} | {property.isMultiple ? 'multiple' : 'single'} | {propertyType}
-              </span>
-            </Box>
-          ),
-          content: property.isMultiple ? (
-            <MultiplePropertyFiller
-              property={property}
-              name={`${dataFieldName}.${property.key}`}
-              useExpression={useExpression}
-              label={property.name}
-              required={property.isRequired}
-            />
-          ) : (
-            <PropertyFiller
-              property={property}
-              name={`${dataFieldName}.${property.key}`}
-              useExpression={useExpression}
-              label={property.name}
-              required={property.isRequired}
-            />
-          ),
-        };
-      });
-    }
-    return [];
-  }, [properties, dataFieldName, useExpression]);
-
-  return (
-    <Grid container direction="column" spacing={2}>
-      {title && (
-        <Grid xs={12}>
-          <div style={{ fontWeight: '600' }}>{title}</div>
-        </Grid>
-      )}
-      <StepperView data={stepperData} />
-    </Grid>
-  );
-};
-
-export default DefinitionFiller;

package/src/lib/Definition/DefinitionValueView/DefinitionValueView.tsx

@@ -1,54 +0,0 @@
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Unstable_Grid2';
-import { StepperData, StepperView } from '../../StepperView';
-import PropertyDataView from './PropertyDataView';
-
-import { useMemo } from 'react';
-import { PropertiesArrayType, PropertyType } from '../../../interfaces';
-
-type Props = {
-  properties: PropertiesArrayType<unknown>;
-  data: unknown;
-};
-
-export const DefinitionValueView = ({ properties, data }: Props) => {
-  const stepperData: StepperData = useMemo(() => {
-    if (properties && data) {
-      return properties.map((property) => {
-        const { key, name, isMultiple, propertyType } = property;
-        const value = data[property.key] ?? data;
-        return {
-          label: (
-            <Box display="flex" flexDirection="column">
-              <b>{name}</b>
-              <span>
-                {key} | {isMultiple ? 'multiple' : 'single'} | {propertyType}
-              </span>
-            </Box>
-          ),
-          content:
-            isMultiple && Array.isArray(value) && property.propertyType !== PropertyType.ANY ? (
-              <>
-                {value.map((itemValue, index) => (
-                  <Box key={index} mb={2}>
-                    <PropertyDataView property={property} data={itemValue} hasBackground />
-                  </Box>
-                ))}
-              </>
-            ) : (
-              <PropertyDataView property={property} data={value} />
-            ),
-        };
-      });
-    }
-    return [];
-  }, [properties, data]);
-
-  return (
-    <Grid container direction="column" spacing={2}>
-      <StepperView data={stepperData} />
-    </Grid>
-  );
-};
-
-export default DefinitionValueView;

package/src/lib/Definition/DefinitionValueView/PropertyDataView.tsx

@@ -1,67 +0,0 @@
-import Box from '@mui/material/Box';
-import { JsonView } from '../../JsonView';
-import DefinitionValueView from './DefinitionValueView';
-
-import { useMemo } from 'react';
-import { isExpression, propertiesObjectToArray } from '../../../utils';
-
-import { PropertyUnion, PropertyType, PropertiesArrayType } from '../../../interfaces';
-
-type Props = {
-  property: PropertyUnion;
-  data: unknown;
-  hasBackground?: boolean;
-};
-
-type PropertyValueComponentProps = {
-  property: PropertyUnion;
-  data: unknown;
-  properties?: PropertiesArrayType;
-};
-
-const PropertyValueComponent = ({ property, data, properties }: PropertyValueComponentProps) => {
-  const defaultRender = (value: any) => (
-    <Box style={{ backgroundColor: '#fff', border: '1px solid #ccc', borderRadius: '4px', padding: '4px' }}>
-      {value === null ? 'null' : value?.toString()}
-    </Box>
-  )
-  if (isExpression(data)) {
-    return defaultRender(data);
-  } else {
-    switch (property.propertyType) {
-      case PropertyType.JSON:
-        return <JsonView value={data} />;
-      case PropertyType.ENTITY:
-        return <DefinitionValueView properties={properties} data={data} />;
-      case PropertyType.ANY:
-        // TODO need to prefetch data and show as is
-        return (typeof data === 'object' ? <JsonView value={data} /> : defaultRender(data));
-      default:
-        return defaultRender(data);
-    }
-  }
-};
-
-export const PropertyDataView = ({ property, data, hasBackground = false }: Props) => {
-  const properties = useMemo(() => {
-    if (property.propertyType === PropertyType.ENTITY) {
-      if (Array.isArray(property.properties)) {
-        return property.properties;
-      }
-      return propertiesObjectToArray(property.properties);
-    }
-    return [];
-  }, [property]);
-
-  return (
-    <Box
-      style={{
-        backgroundColor: hasBackground ? '#f1f1f1' : 'none',
-      }}
-    >
-      <PropertyValueComponent property={property} data={data} properties={properties} />
-    </Box>
-  );
-};
-
-export default PropertyDataView;

package/src/lib/Forms/BackButton.tsx

@@ -1,46 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import SvgIcon from '@mui/material/SvgIcon';
-import { useNavigate, useLocation, Link } from 'react-router-dom';
-import IconButton from '@mui/material/IconButton';
-import Button from '@mui/material/Button';
-import Box from '@mui/material/Box';
-
-type Props = {
-  text?: string;
-  buttonProps?: Record<string, unknown>;
-};
-export const BackButton = ({ text, buttonProps = {} }: Props) => {
-  const navigate = useNavigate();
-  const { state } = useLocation();
-  const fromLocation = useMemo(() => state?.['from'], [state]);
-
-  const handleClick = useCallback(() => {
-    if (fromLocation) {
-      navigate(fromLocation);
-    } else navigate(-1);
-  }, [navigate, fromLocation]);
-
-  return (
-    <Box mr={2}>
-      {text ? (
-        <Button
-          color="inherit"
-          onClick={!fromLocation ? handleClick : null}
-          component={Link}
-          to={fromLocation ?? ''}
-          {...buttonProps}
-        >
-          {text}
-        </Button>
-      ) : (
-          <IconButton onClick={handleClick}>
-            <SvgIcon>
-              <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
-            </SvgIcon>
-        </IconButton>
-      )}
-    </Box>
-  );
-};
-
-export default BackButton;

package/src/lib/Forms/ControlAceEditor.tsx

@@ -1,125 +0,0 @@
-import AceEditor from 'react-ace';
-import 'ace-builds/src-noconflict/mode-python';
-import 'ace-builds/src-noconflict/theme-monokai';
-import 'ace-builds/src-noconflict/ext-language_tools';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import FormHelperText from '@mui/material/FormHelperText';
-import { Control, useFormContext, useController, useWatch } from 'react-hook-form';
-import { forwardRef } from 'react';
-
-export interface ControlAceEditorProps {
-  name: string;
-  control: Control<any>;
-  mode?: string;
-  label?: string;
-  width?: string;
-  height?: string;
-  theme?: string;
-  readOnly?: boolean;
-  required?: boolean;
-  validateJson?: boolean;
-  fontSize?: number;
-  validate?: boolean;
-  parseValue?: boolean;
-  [key: string]: unknown;
-}
-
-export const ControlAceEditor = forwardRef<AceEditor, ControlAceEditorProps>(({
-  control,
-  name,
-  mode = 'json',
-  label,
-  width = '100%',
-  height = '200px',
-  theme = 'monokai',
-  readOnly,
-  required = false,
-  validateJson = false,
-  fontSize = 16,
-  validate = true,
-  parseValue,
-  ...otherProps
-}, ref) => {
-  const { setError, clearErrors } = useFormContext();
-  const {
-    field: { onChange },
-    fieldState: { error },
-  } = useController({ control, name });
-  const value = useWatch({ control, name });
-
-  const handleChange = (value) => {
-    if (!value && required) {
-      setError(name, { message: 'Required field' });
-    } else {
-      clearErrors(name);
-    }
-
-    if (validateJson) {
-      try {
-        JSON.parse(value);
-        clearErrors(name);
-      } catch (error) {
-        setError(name, { message: 'Invalid JSON' });
-      }
-    }
-
-    if (parseValue) {
-      try {
-        const val = JSON.parse(value);
-        console.log('parsed val:', val);
-        onChange(val);
-      } catch (e) {
-        onChange(value);
-      }
-    } else {
-      onChange(value);
-    }    
-  };
-
-  return (
-    <Box display="flex" flexDirection="column" width="100%">
-      <Box>
-        {label && (
-          <Typography variant="subtitle1" display="inline" style={{ marginRight: 10 }}>
-            {label}
-          </Typography>
-        )}
-      </Box>
-      <>
-        <AceEditor
-          ref={ref}
-          focus
-          wrapEnabled
-          width={width}
-          height={height}
-          showPrintMargin={false}
-          theme={theme}
-          fontSize={fontSize}
-          setOptions={{
-            enableLiveAutocompletion: true,
-            enableBasicAutocompletion: true,
-            enableSnippets: true,
-            showLineNumbers: true,
-            tabSize: 2,
-            useWorker: false
-          }}          
-          style={{ lineHeight: 1.4, zIndex: 0, isolation: 'isolate' }}
-          readOnly={readOnly}
-          value={mode === 'json' && typeof value !== 'string' ? (value === null ? '' : JSON.stringify(value)) : value}
-          onChange={handleChange}
-          mode={mode}
-          onLoad={(editor) => {
-            if (!validate || !validateJson) {
-              editor.getSession().setUseWorker(false);
-            }
-          }}
-          {...otherProps}
-        />
-        {error && <FormHelperText error>{error.message}</FormHelperText>}
-      </>
-    </Box>
-  );
-});
-
-export default ControlAceEditor;

package/src/lib/Forms/ControlAutocomplete.tsx

@@ -1,145 +0,0 @@
-import Autocomplete, { AutocompleteProps } from '@mui/material/Autocomplete';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
-import { Control, useController, useWatch } from 'react-hook-form';
-
-import useAutocomplete from './useAutocomplete';
-import { ValidateFunc } from '../../interfaces';
-
-/**
- * This interface is referencing the [[ControlAutocomplete]] component props.
- * @category Forms
- */
-export type ControlAutocompleteProps = Omit<
-  AutocompleteProps<unknown, boolean, boolean, boolean, React.ElementType<any>>,
-  'renderInput'
-> & {
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * Label for MUI TextField select component
-   */
-  label?: string;
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * Is input required flag
-   */
-  required?: boolean;
-  /**
-   * React Hook Form `defaultValue`
-   */
-  defaultValue?: unknown;
-  /**
-   * Is disabled input flag
-   */
-  disabled?: boolean;
-  /**
-   * React Hook Form validate function
-   * ```typescript
-   * type ValidateFunc = (value: string) => boolean | string;
-   * ```
-   */
-  validate?: ValidateFunc | Record<string, ValidateFunc>;
-  /**
-   * Hide error message flag
-   */
-  hideErrorMessage?: boolean;
-  /**
-   * Custom onChange functionƒ
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: unknown) => void;
-  /**
-   * Key for option label
-   */
-  labelKey?: string;
-  /**
-   * Key for option value
-   */
-  valueKey?: string;
-  /**
-   * Select options
-   */
-  options: string[] | unknown[];
-  textFieldProps?: TextFieldProps;
-};
-
-/**
- * Material UI `Autocomplete` controlled component. Used with react-hook-form
- * @category Forms
- */
-export const ControlAutocomplete = ({
-  control,
-  validate,
-  name = '',
-  label = '',
-  required = false,
-  defaultValue = '',
-  disabled = false,
-  hideErrorMessage = false,
-  onChange: customOnChange,
-  labelKey,
-  valueKey,
-  options = [],
-  multiple,
-  textFieldProps = {},
-  disableCloseOnSelect,
-  ...autocompleteProps
-}: ControlAutocompleteProps) => {
-  const {
-    field: { ref, onChange },
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-    defaultValue,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate,
-    },
-  });
-  const formValue = useWatch({ control, name, defaultValue: multiple ? [] : null });
-  const { getOptionLabel, isOptionEqualToValue, renderOption } = useAutocomplete({ valueKey, labelKey });
-
-  const handleChange = (_, value) => {
-    onChange(value);
-  };
-
-  return (
-    <Autocomplete
-      fullWidth
-      disablePortal
-      size="small"
-      readOnly={disabled}
-      options={options}
-      multiple={multiple}
-      getOptionLabel={getOptionLabel}
-      isOptionEqualToValue={isOptionEqualToValue}
-      disableCloseOnSelect={disableCloseOnSelect || multiple}
-      filterSelectedOptions={multiple}
-      value={formValue}
-      onChange={customOnChange ? customOnChange : handleChange}
-      renderOption={renderOption}
-      renderInput={(params) => {
-        return (
-          <TextField
-            {...params}
-            variant="outlined"
-            name={name}
-            label={label}
-            error={!!error}
-            inputRef={ref}
-            helperText={!hideErrorMessage && error?.message}
-            {...textFieldProps}
-          />
-        );
-      }}
-      {...autocompleteProps}
-    />
-  );
-};
-
-export default ControlAutocomplete;

package/src/lib/Forms/ControlCheckbox.tsx

@@ -1,113 +0,0 @@
-import FormControl from '@mui/material/FormControl';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormHelperText from '@mui/material/FormHelperText';
-import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
-
-import { useMemo } from 'react';
-import { Control, useController, useWatch } from 'react-hook-form';
-import { ValidateFunc } from '../../interfaces';
-
-/**
- * This interface is referencing the [[ControlCheckbox]] component props.
- * @category Forms
- */
-export type ControlCheckboxProps = CheckboxProps & {
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * Label for MUI TextField component
-   */
-  label?: string;
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * React Hook Form `defaultValue`
-   */
-  defaultValue?: unknown;
-  /**
-   * Is disabled input flag
-   */
-  disabled?: boolean;
-  /**
-   * React Hook Form validate function
-   * ```typescript
-   * type ValidateFunc = (value: string) => boolean | string;
-   * ```
-   */
-  validate?: ValidateFunc | Record<string, ValidateFunc>;
-  /**
-   * Hide error message flag
-   */
-  hideErrorMessage?: boolean;
-  /**
-   * Custom onChange functionƒ
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-};
-
-/**
- * Material UI `Checkbox` controlled component. Used with react-hook-form
- * @category Forms
- */
-export const ControlCheckbox = ({
-  control,
-  validate,
-  name = '',
-  label = '',
-  required = false,
-  defaultValue = '',
-  disabled = false,
-  hideErrorMessage = false,
-  onChange: customOnChange,
-  ...checkboxProps
-}: ControlCheckboxProps) => {
-  const {
-    field: { ref, onChange },
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-    defaultValue,
-  });
-  const value = useWatch({ control, name });
-
-  const checked = useMemo(() => {
-    if (typeof value === 'boolean') {
-      return value;
-    } else if (typeof value === 'string') {
-      if (value === 'false') {
-        onChange(false);
-        return false;
-      } else if (value === 'true') {
-        onChange(true);
-        return true;
-      }
-    }
-    return false;
-  }, [value, onChange]);
-
-  return (
-    <FormControl error={!!error} component="fieldset" variant="standard" disabled={disabled}>
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={checked}
-            onChange={customOnChange ? customOnChange : onChange}
-            name={name}
-            inputRef={ref}
-            disabled={disabled}
-            {...checkboxProps}
-          />
-        }
-        label={label}
-      />
-      {!hideErrorMessage && error?.message && <FormHelperText>{error.message}</FormHelperText>}
-    </FormControl>
-  );
-};
-
-export default ControlCheckbox;

package/src/lib/Forms/ControlDate.tsx

@@ -1,75 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-
-import { isValid, format as dateFnsFormat, isMatch } from 'date-fns';
-import { Control, useController, useWatch } from 'react-hook-form';
-import { DATE_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 ControlDate = ({
-  control,
-  name,
-  required,
-  label,
-  format = DATE_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 handleChange = (date) => {
-    onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-  };
-
-  return (
-    <DatePicker
-      label={label}
-      inputRef={ref}
-      inputFormat={format}
-      value={value || null}
-      onChange={handleChange}
-      renderInput={(props) => (
-        <TextField
-          {...props}
-          fullWidth
-          size="small"
-          variant="outlined"
-          name={name}
-          error={!!error}
-          helperText={!hideErrorMessage && error?.message}
-        />
-      )}
-    />
-  );
-};
-
-export default ControlDate;