@dartech/arsenal-ui 1.3.0 → 1.3.2

package/src/lib/Property/UpsertProperty/CreatePropertyFormFields.tsx

@@ -1,158 +0,0 @@
-import Grid from '@mui/material/Unstable_Grid2';
-import {
-  ControlCheckbox,
-  ControlAutocomplete,
-  ControlNumberInput,
-  ControlAceEditor,
-  ControlDebouncedInput,
-} from '../../Forms';
-import { PropertyAdditionalFields } from './PropertyAdditionalFields';
-import { PropertyValueField } from '../PropertyValueField';
-import { PropertyValidator } from '../PropertyValidator';
-import CustomPropertyField from './CustomPropertyField';
-import { PropertyValidatorContext } from '../PropertyValidator/PropertyValidatorContext';
-import { useMemo, useEffect } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import useCustomFields from './useCustomFields';
-
-import { CustomPropertyFieldProps, PropertyType } from '../../../interfaces';
-
-type Props = {
-  propertyFieldName: string;
-  entityDefinition?: boolean;
-  globalParameter?: boolean;
-  customPropertyFields?: CustomPropertyFieldProps[];
-};
-
-const propertyTypes = Object.values(PropertyType)
-  .sort((a, b) => a.localeCompare(b))
-  .map((propType) => ({
-    value: propType,
-    label: propType
-      .replace('_', ' ')
-      .toLowerCase()
-      .replace(/(^\w)|([-\s]\w)/g, (c) => c.toUpperCase()),
-  }));
-
-export const CreatePropertyFormFields = ({
-  propertyFieldName,
-  entityDefinition = false,
-  globalParameter = false,
-  customPropertyFields = [],
-}: Props) => {
-  const { control, setValue } = useFormContext();
-  const propertyType = useWatch({ control, name: `${propertyFieldName}.propertyType` });
-  const isMultiple = useWatch({ control, name: `${propertyFieldName}.isMultiple` });
-  const isRequired = useWatch({ control, name: `${propertyFieldName}.isRequired` });
-
-  const { customCheckboxes, customFields } = useCustomFields(customPropertyFields);
-
-  const valueLabel = useMemo(() => {
-    let label = globalParameter ? 'Value' : 'Default Value';
-    if (isMultiple) {
-      label += 's';
-    }
-    return label;
-  }, [globalParameter, isMultiple]);
-
-  const handlePropertyTypeChange = (_, value) => {
-    const fieldName = `${propertyFieldName}.propertyType`;
-    const valueFieldName = `${propertyFieldName}.${globalParameter ? 'value' : 'defaultValue'}`;
-    if (isMultiple) {
-      setValue(valueFieldName, []);
-    } else {
-      setValue(valueFieldName, null);
-    }
-    setValue(fieldName, value);
-  };
-
-  useEffect(() => {
-    if (propertyType && typeof propertyType === 'string') {
-      setValue(`${propertyFieldName}.propertyType`, propertyTypes.find(el => el.value === propertyType));
-    }
-  }, [propertyType, setValue, propertyFieldName])
-
-  return (
-    <Grid container direction="column" spacing={2}>
-      <Grid>
-        <ControlDebouncedInput required control={control} name={`${propertyFieldName}.key`} label="Key" />
-      </Grid>
-      <Grid>
-        <ControlDebouncedInput required control={control} name={`${propertyFieldName}.name`} label="Name" />
-      </Grid>
-      <Grid>
-        <ControlAutocomplete
-          required
-          control={control}
-          name={`${propertyFieldName}.propertyType`}
-          label="Type"
-          options={propertyTypes}
-          onChange={handlePropertyTypeChange}
-        />
-      </Grid>
-      <Grid>
-        <ControlNumberInput required control={control} name={`${propertyFieldName}.sortOrder`} label="Sort Order" />
-      </Grid>
-
-      <Grid>
-        <ControlAceEditor control={control} name={`${propertyFieldName}.uiSettings`} label="UI Settings" validateJson />
-      </Grid>
-      <Grid>
-        <ControlCheckbox control={control} name={`${propertyFieldName}.isMultiple`} label="Multiple" />
-        <ControlCheckbox control={control} name={`${propertyFieldName}.isEnabled`} label="Enabled" />
-        <ControlCheckbox control={control} name={`${propertyFieldName}.isRequired`} label="Required" />
-        {entityDefinition && (
-          <ControlCheckbox
-            control={control}
-            name={`${propertyFieldName}.isViewableInList`}
-            label="Is viewable in list"
-          />
-        )}
-        {customCheckboxes.length ? (
-          <>
-            {customCheckboxes.map((field, index) => (
-              <ControlCheckbox
-                key={index}
-                control={control}
-                name={`${propertyFieldName}.${field.name}`}
-                label={field.label}
-              />
-            ))}
-          </>
-        ) : null}
-      </Grid>
-      {propertyType && (
-        <>
-          <Grid>
-            <PropertyValidatorContext.Provider value={propertyType.value ?? propertyType}>
-              <PropertyValidator name={`${propertyFieldName}.validationNode`} />
-            </PropertyValidatorContext.Provider>
-          </Grid>
-          <PropertyAdditionalFields
-            propertyType={typeof propertyType === 'string' ? propertyType : propertyType.value}
-            propertyFieldName={propertyFieldName}
-            globalParameter={globalParameter}
-            entityDefinition={entityDefinition}
-          />
-          <PropertyValueField
-            propertyFieldName={propertyFieldName}
-            name={`${propertyFieldName}.${globalParameter ? 'value' : 'defaultValue'}`}
-            label={valueLabel}
-            required={globalParameter ? isRequired : false}
-          />
-        </>
-      )}
-      {customFields.length ? (
-        <>
-          {customFields.map((field, index) => (
-            <Grid key={index}>
-              <CustomPropertyField {...field} propertyFieldName={propertyFieldName} />
-            </Grid>
-          ))}
-        </>
-      ) : null}
-    </Grid>
-  );
-};
-
-export default CreatePropertyFormFields;

package/src/lib/Property/UpsertProperty/CustomPropertyField.tsx

@@ -1,40 +0,0 @@
-import { useMemo } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { CustomPropertyFieldProps } from '../../../interfaces';
-import { ControlAceEditor, ControlAutocomplete, ControlInput, ControlNumberInput, ControlSelect } from '../../Forms';
-
-type Props = CustomPropertyFieldProps & { propertyFieldName: string };
-
-export const CustomPropertyField = ({
-  name,
-  label = '',
-  propertyFieldName,
-  type,
-  decimal = false,
-  options = [],
-  required = false,
-}: Props) => {
-  const { control } = useFormContext();
-  const fieldName = useMemo(() => `${propertyFieldName}.${name}`, [name, propertyFieldName]);
-
-  switch (type) {
-    case 'text':
-      return <ControlInput control={control} name={fieldName} label={label} required={required} />;
-    case 'number':
-      return (
-        <ControlNumberInput control={control} name={fieldName} label={label} decimal={decimal} required={required} />
-      );
-    case 'select':
-      return <ControlSelect control={control} name={fieldName} label={label} options={options} required={required} />;
-    case 'autocomplete':
-      return (
-        <ControlAutocomplete control={control} name={fieldName} label={label} options={options} required={required} />
-      );
-    case 'json':
-      return <ControlAceEditor control={control} name={fieldName} label={label} mode="json" required={required} />;
-    default:
-      return null;
-  }
-};
-
-export default CustomPropertyField;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/BigDecimalPropertyFields.tsx

@@ -1,41 +0,0 @@
-import Grid from '@mui/material/Unstable_Grid2';
-import { ControlNumberInput, ControlSelect } from '../../../Forms';
-import { RoundingMode } from '../../../../interfaces';
-
-import { useFormContext } from 'react-hook-form';
-
-type Props = {
-  propertyFieldName: string;
-};
-
-const roundingModes = Object.values(RoundingMode).sort((a, b) => a.localeCompare(b));
-
-const BigDecimalPropertyFields = ({ propertyFieldName }: Props) => {
-  const { control } = useFormContext();
-
-  return (
-    <>
-      <Grid>
-        <ControlNumberInput
-          required
-          control={control}
-          defaultValue={2}
-          name={`${propertyFieldName}.precisionScale`}
-          label="Precision Scale"
-        />
-      </Grid>
-      <Grid>
-        <ControlSelect
-          required
-          control={control}
-          name={`${propertyFieldName}.roundingMode`}
-          label="Rounding Mode"
-          defaultValue={RoundingMode.HALF_UP}
-          options={roundingModes}
-        />
-      </Grid>
-    </>
-  );
-};
-
-export default BigDecimalPropertyFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/DateAdditionalFields.tsx

@@ -1,27 +0,0 @@
-import Grid from '@mui/material/Unstable_Grid2';
-import { ControlInput } from '../../../Forms';
-
-import { useFormContext } from 'react-hook-form';
-
-type Props = {
-  propertyFieldName: string;
-  defaultValue?: string;
-};
-
-const DateAdditionalFields = ({ propertyFieldName, defaultValue = '' }: Props) => {
-  const { control } = useFormContext();
-
-  return (
-    <Grid>
-      <ControlInput
-        required
-        control={control}
-        defaultValue={defaultValue}
-        name={`${propertyFieldName}.format`}
-        label="Format"
-      />
-    </Grid>
-  );
-};
-
-export default DateAdditionalFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/EntityAdditionalFields.tsx

@@ -1,133 +0,0 @@
-import Grid from '@mui/material/Unstable_Grid2';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-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 Stepper from '@mui/material/Stepper';
-import Step from '@mui/material/Step';
-import StepLabel from '@mui/material/StepLabel';
-import StepContent from '@mui/material/StepContent';
-import CreatePropertiesList from '../CreatePropertiesList';
-import EntityPropertiesShortView from '../../ViewProperty/EntityPropertiesShortView';
-
-import { useCallback, useState } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { useToggle } from '../../../../utils/hooks';
-
-type Props = {
-  parentPropertyFieldName: string;
-  entityDefinition?: boolean;
-  globalParameter?: boolean;
-};
-
-const defaultPropertyValues = {
-  key: '',
-  propertyType: '',
-  name: '',
-  defaultValue: '',
-  isRequired: true,
-  isMultiple: false,
-  sortOrder: 0,
-  isEnabled: true,
-};
-
-const EntityAdditionalFields = ({
-  parentPropertyFieldName,
-  entityDefinition = false,
-  globalParameter = false,
-}: Props) => {
-  const { control, setValue, getValues, trigger } = useFormContext();
-  const properties = useWatch({
-    control,
-    name: `${parentPropertyFieldName}.properties`,
-    defaultValue: getValues(`${parentPropertyFieldName}.properties`) || [],
-  });
-  const parentPropertyName = useWatch({ control, name: `${parentPropertyFieldName}.name` });
-
-  const parametersModal = useToggle();
-
-  const [focusedProperty, setFocusedProperty] = useState(0);
-
-  const handleAddParameter = useCallback(() => {
-    if (properties) {
-      const propertyIndex = properties.length;
-      setValue(`${parentPropertyFieldName}.properties.${propertyIndex}`, defaultPropertyValues);
-      setFocusedProperty(propertyIndex);
-    } else {
-      setValue(`${parentPropertyFieldName}.properties`, [defaultPropertyValues]);
-    }
-  }, [properties, parentPropertyFieldName, setValue]);
-
-  const handleStepperClick = (index) => setFocusedProperty(index);
-
-  const handleSubmitClick = async () => {
-    const isValid = await trigger(`${parentPropertyFieldName}.properties`);
-    if (isValid) {
-      parametersModal.onClose();
-    }
-  };
-
-  return (
-    <>
-      <Grid>
-        <Typography variant="h6">Properties</Typography>
-      </Grid>
-      <Grid>
-        <EntityPropertiesShortView properties={properties} />
-      </Grid>
-      <Grid>
-        <Button variant="contained" color="primary" onClick={parametersModal.onOpen}>
-          Edit properties
-        </Button>
-      </Grid>
-
-      <Dialog disableEscapeKeyDown open={parametersModal.open} onClose={handleSubmitClick} fullWidth maxWidth="md">
-        <DialogTitle>{parentPropertyName || 'Entity'} Properties</DialogTitle>
-        <DialogContent style={{ height: '500px', overflow: 'hidden' }}>
-          <Grid container direction="row" spacing={2} style={{ height: '100%' }}>
-            <Grid xs={3} style={{ backgroundColor: '#f9f9f9' }}>
-              <Stepper nonLinear activeStep={focusedProperty} orientation="vertical" style={{ paddingLeft: '4px' }}>
-                {properties.map((property, index) => (
-                  <Step key={index} onClick={() => handleStepperClick(index)} style={{ cursor: 'pointer' }}>
-                    <StepLabel StepIconProps={{ icon: '' }} style={{ wordBreak: 'break-word' }}>
-                      {property.name || '(no name)'}
-                    </StepLabel>
-                    <StepContent></StepContent>
-                  </Step>
-                ))}
-              </Stepper>
-              <Button variant="contained" size="small" color="primary" onClick={handleAddParameter}>
-                Add property
-              </Button>
-            </Grid>
-            <Grid              
-              container
-              wrap="nowrap"
-              direction="column"
-              xs={9}
-              spacing={2}
-              style={{ height: '100%', overflowY: 'auto' }}
-            >
-              <CreatePropertiesList
-                hideAddButton
-                parentFieldName={parentPropertyFieldName}
-                focusOnIndex={focusedProperty}
-                entityDefinition={entityDefinition}
-                globalParameter={globalParameter}
-              />
-            </Grid>
-          </Grid>
-        </DialogContent>
-        <DialogActions>
-          <Button variant="contained" color="primary" onClick={handleSubmitClick}>
-            Ok
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  );
-};
-
-export default EntityAdditionalFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/EntityReferencePropertyFields.tsx

@@ -1,46 +0,0 @@
-import Grid from '@mui/material/Unstable_Grid2';
-import { ControlInput } from '../../../Forms';
-
-import { useFormContext } from 'react-hook-form';
-
-type Props = {
-  propertyFieldName: string;
-};
-
-const EntityReferencePropertyFields = ({ propertyFieldName }: Props) => {
-  const { control } = useFormContext();
-
-  return (
-    <>
-      <Grid>
-        <ControlInput required control={control} name={`${propertyFieldName}.definitionCode`} label="Definition Code" />
-      </Grid>
-      <Grid>
-        <ControlInput
-          required
-          control={control}
-          name={`${propertyFieldName}.definitionVersion`}
-          label="Definition Version"
-        />
-      </Grid>
-      <Grid>
-        <ControlInput
-          required
-          control={control}
-          name={`${propertyFieldName}.labelPropertyCode`}
-          label="Label Property Code"
-        />
-      </Grid>
-      <Grid>
-        <ControlInput
-          required
-          control={control}
-          name={`${propertyFieldName}.valuePropertyCode`}
-          label="Value Property Code"
-        />
-      </Grid>
-    </>
-  );
-};
-
-export default EntityReferencePropertyFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/PropertyAdditionalFields.tsx

@@ -1,52 +0,0 @@
-import {
-  PropertyType,
-  DATE_DEFAULT_FORMAT,
-  DATE_TIME_DEFAULT_FORMAT,
-  TIME_DEFAULT_FORMAT,
-} from '../../../../interfaces';
-import BigDecimalPropertyFields from './BigDecimalPropertyFields';
-import DateAdditionalFields from './DateAdditionalFields';
-import EntityAdditionalFields from './EntityAdditionalFields';
-import EntityReferencePropertyFields from './EntityReferencePropertyFields';
-import StringPropertyFields from './StringPropertyFields';
-
-type Props = {
-  propertyType: PropertyType;
-  propertyFieldName: string;
-  entityDefinition?: boolean;
-  globalParameter?: boolean;
-};
-
-export const PropertyAdditionalFields = ({
-  propertyType,
-  propertyFieldName,
-  entityDefinition = false,
-  globalParameter = false,
-}: Props) => {
-  switch (propertyType) {
-    case PropertyType.STRING:
-      return <StringPropertyFields propertyFieldName={propertyFieldName} />;
-    case PropertyType.BIG_DECIMAL:
-      return <BigDecimalPropertyFields propertyFieldName={propertyFieldName} />;
-    case PropertyType.DATE:
-      return <DateAdditionalFields propertyFieldName={propertyFieldName} defaultValue={DATE_DEFAULT_FORMAT} />;
-    case PropertyType.TIME:
-      return <DateAdditionalFields propertyFieldName={propertyFieldName} defaultValue={TIME_DEFAULT_FORMAT} />;
-    case PropertyType.DATE_TIME:
-      return <DateAdditionalFields propertyFieldName={propertyFieldName} defaultValue={DATE_TIME_DEFAULT_FORMAT} />;
-    case PropertyType.ENTITY_REFERENCE:
-      return <EntityReferencePropertyFields propertyFieldName={propertyFieldName} />;
-    case PropertyType.ENTITY:
-      return (
-        <EntityAdditionalFields
-          parentPropertyFieldName={propertyFieldName}
-          globalParameter={globalParameter}
-          entityDefinition={entityDefinition}
-        />
-      );
-    default:
-      return null;
-  }
-};
-
-export default PropertyAdditionalFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/StringPropertyFields.tsx

@@ -1,103 +0,0 @@
-import Grid from '@mui/material/Unstable_Grid2';
-import Chip from '@mui/material/Chip';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import TextField from '@mui/material/TextField';
-import IconButton from '@mui/material/IconButton';
-import AddIcon from '@mui/icons-material/Add';
-
-import { useFormContext, useWatch } from 'react-hook-form';
-import { removeArrayItem } from '../../../../utils';
-import { useCallback, useMemo, useState } from 'react';
-
-type Props = {
-  propertyFieldName: string;
-};
-
-const StringPropertyFields = ({ propertyFieldName }: Props) => {
-  const fieldName = useMemo(() => `${propertyFieldName}.restrictedValues`, [propertyFieldName]);
-
-  const { control, setValue, getValues } = useFormContext();
-  const restrictedValues = useWatch({
-    control,
-    name: fieldName,
-    defaultValue: getValues(`${propertyFieldName}.restrictedValues`) || [],
-  });
-
-  const [inputValue, setInputValue] = useState('');
-  const [error, setError] = useState('');
-
-  const handleDelete = useCallback(
-    (index) => {
-      setValue(fieldName, removeArrayItem(restrictedValues, index));
-    },
-    [restrictedValues, fieldName, setValue]
-  );
-
-  const handleAddValue = () => {
-    if (inputValue) {
-      setValue(fieldName, [...restrictedValues, inputValue]);
-      setInputValue('');
-    }
-  };
-
-  const handleInputChange = (e) => {
-    const { value } = e.target;
-    setInputValue(value);
-
-    if (restrictedValues.includes(value)) {
-      setError('This value already exists');
-    } else {
-      setError('');
-    }
-  };
-
-  const handleKeyDown = (e) => {
-    if (e.key === 'Enter') {
-      handleAddValue();
-    }
-  };
-
-  return (
-    <>
-      <Grid>
-        <Typography variant="h6">Restricted Values</Typography>
-      </Grid>
-      {
-        !!restrictedValues?.length && (
-          <Grid>
-            <Box display="flex" flexWrap="wrap">
-              {restrictedValues.map((value, index) => (
-                <Chip sx={{ mr: 1 }} key={index} variant="outlined" label={value} onDelete={() => handleDelete(index)} />
-              ))}
-            </Box>
-          </Grid>
-        )
-      }
-      
-      <Grid>
-        <TextField
-          fullWidth
-          variant="outlined"
-          size="small"
-          label="Add restricted value"
-          value={inputValue}
-          onChange={handleInputChange}
-          error={!!error}
-          helperText={error}
-          name="restrictedValues"
-          inputProps={{ onKeyDown: handleKeyDown }}
-          InputProps={{
-            endAdornment: (
-              <IconButton size="small" onClick={handleAddValue} disabled={!!error}>
-                <AddIcon />
-              </IconButton>
-            ),
-          }}
-        />
-      </Grid>
-    </>
-  );
-};
-
-export default StringPropertyFields;

package/src/lib/Property/UpsertProperty/useCustomFields.ts

@@ -1,22 +0,0 @@
-import { useMemo } from 'react';
-import { CustomPropertyFieldProps } from '../../../interfaces';
-
-const useCustomFields = (customPropertyFields: CustomPropertyFieldProps[]) => {
-  const customCheckboxes = useMemo(() => {
-    if (customPropertyFields.length) {
-      return customPropertyFields.filter((field) => field.type === 'checkbox');
-    }
-    return [];
-  }, [customPropertyFields]);
-
-  const customFields = useMemo(() => {
-    if (customPropertyFields.length) {
-      return customPropertyFields.filter((field) => field.type !== 'checkbox');
-    }
-    return [];
-  }, [customPropertyFields]);
-
-  return { customCheckboxes, customFields };
-};
-
-export default useCustomFields;

package/src/lib/Property/ViewPropertiesList/ViewPropertiesList.tsx

@@ -1,37 +0,0 @@
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import { ViewProperty } from '../ViewProperty';
-
-import { useMemo } from 'react';
-import { propertiesObjectToArray } from '../../../utils';
-import { PropertiesArrayType, PropertiesObjectType } from '../../../interfaces';
-
-type Props = {
-  properties: PropertiesObjectType<unknown> | PropertiesArrayType<unknown>;
-  expandAll?: boolean;
-};
-
-export const ViewPropertiesList = ({ properties, expandAll = true }: Props) => {
-  const propertiesList = useMemo(() => {
-    if (Array.isArray(properties)) {
-      return properties;
-    } else if (properties) {
-      return propertiesObjectToArray(properties);
-    }
-    return [];
-  }, [properties]);
-
-  return (
-    <Box display="flex" flexDirection="column">
-      {propertiesList.length ? (
-        propertiesList.map((property) => (
-          <ViewProperty key={property.key} property={property} defaultExpanded={expandAll} />
-        ))
-      ) : (
-        <Typography>No properties</Typography>
-      )}
-    </Box>
-  );
-};
-
-export default ViewPropertiesList;