@dartech/arsenal-ui 0.0.1 → 0.0.3

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

@@ -1,133 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
-import Stepper from '@material-ui/core/Stepper';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
-import StepContent from '@material-ui/core/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';
-
-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 { open: parametersModalOpen, onClose: onParametersModalClose, onOpen: onParametersModalOpen } = useToggle();
-
-  const [focusedProperty, setFocusedProperty] = useState(0);
-
-  const handleAddParameter = useCallback(() => {
-    if (properties) {
-      setValue(`${parentPropertyFieldName}.properties.${properties.length}`, defaultPropertyValues);
-    } else {
-      setValue(`${parentPropertyFieldName}.properties`, [defaultPropertyValues]);
-    }
-  }, [properties, parentPropertyFieldName, setValue]);
-
-  const handleStepperClick = (index) => setFocusedProperty(index);
-
-  const handleSubmitClick = async () => {
-    const isValid = await trigger(`${parentPropertyFieldName}.properties`);
-    if (isValid) {
-      onParametersModalClose();
-    }
-  };
-
-  return (
-    <>
-      <Grid item>
-        <Typography variant="h6">Properties</Typography>
-      </Grid>
-      <Grid item>
-        <EntityPropertiesShortView properties={properties} showName showType />
-      </Grid>
-      <Grid item>
-        <Button variant="contained" color="primary" onClick={onParametersModalOpen}>
-          Edit properties
-        </Button>
-      </Grid>
-
-      <Dialog disableEscapeKeyDown open={parametersModalOpen} 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 item 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
-              item
-              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 '@material-ui/core/Grid';
-import { ControlInput } from '../../../Forms';
-
-import { useFormContext } from 'react-hook-form';
-
-type Props = {
-  propertyFieldName: string;
-};
-
-const EntityReferencePropertyFields = ({ propertyFieldName }: Props) => {
-  const { control } = useFormContext();
-
-  return (
-    <>
-      <Grid item>
-        <ControlInput required control={control} name={`${propertyFieldName}.definitionCode`} label="Definition Code" />
-      </Grid>
-      <Grid item>
-        <ControlInput
-          required
-          control={control}
-          name={`${propertyFieldName}.definitionVersion`}
-          label="Definition Version"
-        />
-      </Grid>
-      <Grid item>
-        <ControlInput
-          required
-          control={control}
-          name={`${propertyFieldName}.labelPropertyCode`}
-          label="Label Property Code"
-        />
-      </Grid>
-      <Grid item>
-        <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,98 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import Chip from '@material-ui/core/Chip';
-import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
-import TextField from '@material-ui/core/TextField';
-import IconButton from '@material-ui/core/IconButton';
-import AddIcon from '@material-ui/icons/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 item>
-        <Typography variant="h6">Restricted Values</Typography>
-      </Grid>
-      <Grid item>
-        <Box display="flex" gridGap={8} flexWrap="wrap">
-          {restrictedValues?.map((value, index) => (
-            <Chip key={index} variant="outlined" label={value} onDelete={() => handleDelete(index)} />
-          ))}
-        </Box>
-      </Grid>
-      <Grid item>
-        <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,50 +0,0 @@
-import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
-import { ViewProperty } from '../ViewProperty';
-
-import { useMemo } from 'react';
-import { propertiesObjectToArray } from '../../../utils';
-import {
-  EntityDefinitionPropertyArrayType,
-  EntityDefinitionPropertyObjectType,
-  GPBPropertiesArrayType,
-  GPBPropertiesObjectType,
-  PropertiesArrayType,
-  PropertiesObjectType,
-} from '../../../interfaces';
-
-type Props = {
-  properties:
-    | PropertiesObjectType
-    | PropertiesArrayType
-    | GPBPropertiesArrayType
-    | GPBPropertiesObjectType
-    | EntityDefinitionPropertyArrayType
-    | EntityDefinitionPropertyObjectType;
-  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" gridGap={8}>
-      {propertiesList.length ? (
-        propertiesList.map((property) => (
-          <ViewProperty key={property.key} property={property} defaultExpanded={expandAll} />
-        ))
-      ) : (
-        <Typography>No properties</Typography>
-      )}
-    </Box>
-  );
-};
-
-export default ViewPropertiesList;

package/src/lib/Property/ViewProperty/EntityPropertiesShortView.tsx

@@ -1,41 +0,0 @@
-import TreeView from '@material-ui/lab/TreeView';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import PropertyItem from './PropertyItem';
-
-import { PropertiesArrayType, PropertyType } from '../../../interfaces';
-import { useMemo } from 'react';
-
-type Props = {
-  properties: PropertiesArrayType;
-  showName?: boolean;
-  showType?: boolean;
-};
-
-const EntityPropertiesShortView = ({ properties = [], showName = false, showType = false }: Props) => {
-  const defaultExpanded = useMemo(() => {
-    const findExpandKeys = (props: PropertiesArrayType) => {
-      return props.reduce((acc, property) => {
-        if (property.propertyType === PropertyType.ENTITY) {
-          return [...acc, property.key, ...findExpandKeys(property.properties as PropertiesArrayType)];
-        }
-        return acc;
-      }, []);
-    };
-    return findExpandKeys(properties);
-  }, [properties]);
-
-  return (
-    <TreeView
-      defaultCollapseIcon={<ExpandMoreIcon />}
-      defaultExpandIcon={<ChevronRightIcon />}
-      defaultExpanded={defaultExpanded}
-    >
-      {properties.map((property) => (
-        <PropertyItem key={property.key} property={property} showName={showName} showType={showType} />
-      ))}
-    </TreeView>
-  );
-};
-
-export default EntityPropertiesShortView;

package/src/lib/Property/ViewProperty/EntityPropertiesView.tsx

@@ -1,48 +0,0 @@
-import Box from '@material-ui/core/Box';
-import Stepper from '@material-ui/core/Stepper';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
-import StepContent from '@material-ui/core/StepContent';
-import Typography from '@material-ui/core/Typography';
-import ViewProperty from './ViewProperty';
-
-import { memo, useMemo } from 'react';
-import { PropertiesArrayType, PropertyType } from '../../../interfaces';
-
-type Props = {
-  properties: PropertiesArrayType;
-  parentNames?: string[];
-};
-
-const EntityPropertiesView = ({ properties, parentNames = [] }: Props) => {
-  const hasProperties = useMemo(() => {
-    let hasProps = false;
-    properties.every((property) => {
-      if (property.propertyType === PropertyType.ENTITY) {
-        hasProps = true;
-        return false;
-      }
-      return true;
-    });
-    return hasProps;
-  }, [properties]);
-
-  return (
-    <Box mt={4}>
-      <Typography variant="h6">Properties</Typography>
-      <Stepper orientation="vertical" style={{ paddingLeft: '4px' }}>
-        {properties.map((property) => (
-          <Step expanded key={property.key}>
-            <StepLabel StepIconProps={{ icon: '', completed: false, active: true }} />
-            <StepContent>
-              <ViewProperty property={property} parentNames={[...parentNames]} defaultExpanded={false} />
-            </StepContent>
-          </Step>
-        ))}
-        {hasProperties && <Step />}
-      </Stepper>
-    </Box>
-  );
-};
-
-export default memo(EntityPropertiesView);

package/src/lib/Property/ViewProperty/PropertyDataTable.tsx

@@ -1,139 +0,0 @@
-import Box from '@material-ui/core/Box';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableRow from '@material-ui/core/TableRow';
-import TableCell from '@material-ui/core/TableCell';
-import Typography from '@material-ui/core/Typography';
-import Chip from '@material-ui/core/Chip';
-import CheckCircleIcon from '@material-ui/icons/CheckCircle';
-
-import { useMemo } from 'react';
-import { PropertyType, PropertyUnion } from '../../../interfaces';
-import { JsonView } from '../../JsonView';
-
-type Props = {
-  property: PropertyUnion;
-};
-
-type ValueDisplayProps = {
-  value: unknown;
-  type: PropertyType;
-};
-
-const labels = {
-  name: 'Name',
-  key: 'Key',
-  propertyType: 'Property Type',
-  defaultValue: 'Default Value',
-  defaultValues: 'Default Values',
-  sortOrder: 'Sort Order',
-  isRequired: 'Required',
-  isMultiple: 'Multiple',
-  isEnabled: 'Enabled',
-  isViewableInList: 'Is Viewable In List',
-  precisionScale: 'Precision Scale',
-  roundingMode: 'Rounding Mode',
-  format: 'Format',
-  definitionCode: 'Definition Code',
-  definitionVersion: 'Definition Version',
-  labelPropertyCode: 'Label Property Code',
-  valuePropertyCode: 'Value Property Code',
-  restrictedValues: 'Restricted Values',
-  value: 'Value',
-  values: 'Values',
-  uiSettings: 'UI Settings',
-};
-
-const ValueDisplay = ({ value, type }: ValueDisplayProps) => {
-  if ((type === PropertyType.JSON || type === PropertyType.ENTITY) && value) {
-    return <JsonView value={value} />;
-  } else {
-    return (
-      <Typography variant="subtitle1" display="inline" style={{ wordBreak: 'break-word' }}>
-        {value === null ? 'null' : value.toString()}
-      </Typography>
-    );
-  }
-};
-
-const formatDiplayValue = (value: unknown, key: string, type: PropertyType) => {
-  switch (key) {
-    case 'isRequired':
-    case 'isMultiple':
-    case 'isEnabled':
-    case 'isViewableInList':
-      return value ? <CheckCircleIcon color="primary" fontSize="small" /> : null;
-    case 'restrictedValues':
-      return value ? (
-        <Box display="flex" flexWrap="wrap" gridGap={4}>
-          {(value as string[]).map((restrictedValue) => (
-            <Chip
-              key={restrictedValue}
-              label={restrictedValue}
-              style={{ wordBreak: 'break-word', maxWidth: '500px' }}
-            />
-          ))}
-        </Box>
-      ) : null;
-    case 'defaultValue':
-    case 'value':
-      return <ValueDisplay value={value} type={type} />;
-    case 'values':
-    case 'defaultValues':
-      if (type === PropertyType.ENTITY || type === PropertyType.JSON) {
-        return <JsonView value={value} />;
-      } else {
-        return (
-          <div>
-            {(value as unknown[]).map((v, index) => (
-              <div key={index}>
-                <ValueDisplay value={v} type={type} />
-              </div>
-            ))}
-          </div>
-        );
-      }
-    case 'uiSettings':
-      return value ? <JsonView value={value} /> : null;
-    default:
-      return (
-        <Typography variant="subtitle1" display="inline" style={{ wordBreak: 'break-word' }}>
-          {value}
-        </Typography>
-      );
-  }
-};
-
-const PropertyDataTable = ({ property }: Props) => {
-  const propertyData = useMemo(() => {
-    if (property) {
-      if (property.isMultiple) {
-        delete property.defaultValue;
-        delete property['value'];
-      } else {
-        delete property.defaultValues;
-        delete property['values'];
-      }
-    }
-    return property;
-  }, [property]);
-
-  return (
-    <Table size="small">
-      <TableBody>
-        {Object.keys(labels).map((key) =>
-          key in propertyData ? (
-            <TableRow key={key}>
-              <TableCell width="30%">
-                <Typography>{labels[key]}</Typography>
-              </TableCell>
-              <TableCell>{formatDiplayValue(propertyData[key], key, propertyData.propertyType)}</TableCell>
-            </TableRow>
-          ) : null
-        )}
-      </TableBody>
-    </Table>
-  );
-};
-
-export default PropertyDataTable;

package/src/lib/Property/ViewProperty/PropertyItem.tsx

@@ -1,46 +0,0 @@
-import TreeItem from '@material-ui/lab/TreeItem';
-
-import { useMemo } from 'react';
-import { PropertiesArrayType, PropertyType, PropertyUnion } from '../../../interfaces';
-
-type PropertyItemProps = {
-  property: PropertyUnion;
-  showName: boolean;
-  showType: boolean;
-};
-
-const PropertyItem = ({ property, showName, showType }: PropertyItemProps) => {
-  const label = useMemo(() => {
-    let labelText = '';
-
-    if (property) {
-      labelText += `<b>${property.key}</b>`;
-    }
-
-    if (showName) {
-      labelText += ` - ${property.name}`;
-    }
-
-    if (showType) {
-      const type =
-        typeof property.propertyType === 'string'
-          ? property.propertyType
-          : (property.propertyType as { value: string }).value;
-      labelText += ` - ${type}${property.isMultiple ? '[]' : ''}`;
-    }
-
-    return labelText;
-  }, [property.key, property.name, property.propertyType, property.isMultiple, showName, showType]);
-
-  return (
-    <TreeItem nodeId={property.key} label={<div dangerouslySetInnerHTML={{ __html: label }} />}>
-      {property.propertyType === PropertyType.ENTITY
-        ? (property.properties as PropertiesArrayType).map((prop) => (
-            <PropertyItem key={prop.key} property={prop} showName={showName} showType={showType} />
-          ))
-        : null}
-    </TreeItem>
-  );
-};
-
-export default PropertyItem;