@dartech/arsenal-ui 1.2.3 → 1.2.5

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

@@ -0,0 +1,103 @@
+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/PropertyAdditionalFields/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './PropertyAdditionalFields';
+export * from './PropertyAdditionalFields';

package/src/lib/Property/UpsertProperty/{index.d.ts → index.ts}

@@ -1,2 +1,2 @@
-export * from './CreatePropertiesList';
-export * from './CreatePropertyFormFields';
+export * from './CreatePropertiesList';
+export * from './CreatePropertyFormFields';

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

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

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

package/src/lib/Property/ViewPropertiesList/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './ViewPropertiesList';
+export * from './ViewPropertiesList';

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

@@ -0,0 +1,40 @@
+import Box from '@mui/material/Box';
+import { PropertiesArrayType } from '../../../interfaces';
+import { StepperData, StepperView } from '../../StepperView';
+import { useMemo } from 'react';
+
+type Props = {
+  properties: PropertiesArrayType;
+};
+
+const EntityPropertiesShortView = ({ properties = [] }: 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.propertyType === 'ENTITY' && (
+            <EntityPropertiesShortView properties={property.properties as PropertiesArrayType} />
+          ),
+        };
+      });
+    }
+    return [];
+  }, [properties]);
+
+  return <StepperView data={stepperData} />;
+};
+
+export default EntityPropertiesShortView;

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

@@ -0,0 +1,48 @@
+import Box from '@mui/material/Box';
+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 Typography from '@mui/material/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

@@ -0,0 +1,148 @@
+import Box from '@mui/material/Box';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
+import CheckCircleIcon from '@mui/icons-material/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',
+  validationNode: 'Validation Node',
+};
+
+const ValueDisplay = ({ value, type }: ValueDisplayProps) => {
+  if ((type === PropertyType.JSON || type === PropertyType.ENTITY || type === PropertyType.ANY) && 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: any, 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">
+          {(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 (
+        !Array.isArray(value) ||
+        type === PropertyType.ENTITY ||
+        type === PropertyType.JSON ||
+        type === PropertyType.ANY
+      ) {
+        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':
+    case 'validationNode':
+      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

@@ -0,0 +1,43 @@
+import TreeItem from '@mui/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 = property.propertyType['value'] ?? property.propertyType;
+      labelText += ` - ${type}${property.isMultiple ? '[]' : ''}`;
+    }
+
+    return labelText;
+  }, [property, 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;

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

@@ -0,0 +1,52 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import PropertyDataTable from './PropertyDataTable';
+import EntityPropertiesView from './EntityPropertiesView';
+
+import { useEffect, useState } from 'react';
+import { propertiesObjectToArray } from '../../../utils';
+import { PropertiesObjectType, PropertyType, PropertyUnion } from '../../../interfaces';
+
+type Props = {
+  property: PropertyUnion;
+  parentNames?: string[];
+  defaultExpanded?: boolean;
+};
+
+export const ViewProperty = ({ property, parentNames = [], defaultExpanded = true }: Props) => {
+  const [expanded, setExpanded] = useState(true);
+
+  useEffect(() => {
+    setExpanded(defaultExpanded);
+  }, [defaultExpanded]);
+
+  return (
+    <Accordion
+      elevation={3}
+      style={{ backgroundColor: parentNames.length % 2 === 1 ? '#f1f1f1' : '#fff' }}
+      expanded={expanded}
+      onChange={() => setExpanded((prevState) => !prevState)}
+    >
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography style={{ wordBreak: 'break-word', fontWeight: '600' }}>{property.name}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Box width="100%">
+          <PropertyDataTable property={property} />
+          {property.propertyType === PropertyType.ENTITY && (
+            <EntityPropertiesView
+              properties={propertiesObjectToArray(property.properties as PropertiesObjectType)}
+              parentNames={[...parentNames, property.name]}
+            />
+          )}
+        </Box>
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
+export default ViewProperty;

package/src/lib/Property/ViewProperty/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './ViewProperty';
+export * from './ViewProperty';

package/src/lib/Property/{index.d.ts → index.ts}

@@ -1,5 +1,5 @@
-export * from './UpsertProperty';
-export * from './PropertyValueField';
-export * from './ViewProperty';
-export * from './ViewPropertiesList';
-export * from './PropertyFiller';
+export * from './UpsertProperty';
+export * from './PropertyValueField';
+export * from './ViewProperty';
+export * from './ViewPropertiesList';
+export * from './PropertyFiller';

package/src/lib/Sidebar/Sidebar.styled.tsx

@@ -0,0 +1,157 @@
+import MuiDrawer from '@mui/material/Drawer';
+import MuiList from '@mui/material/List';
+import MuiListItem from '@mui/material/ListItem';
+import MuiListItemIcon from '@mui/material/ListItemIcon';
+import MuiListItemButton from '@mui/material/ListItemButton';
+import MuiListSubheader from '@mui/material/ListSubheader';
+import MuiListItemText from '@mui/material/ListItemText';
+import Toolbar from '@mui/material/Toolbar';
+import MuiButtonBase from '@mui/material/ButtonBase';
+import { styled } from '@mui/material/styles';
+
+const drawerWidth = 248;
+
+export const Container = styled('div')({
+  position: 'relative',
+  '&:hover': {
+    '.button-collapse': {
+      opacity: 1,
+    },
+  },
+});
+
+export const Drawer = styled(MuiDrawer)((props) => ({
+  width: drawerWidth,
+  flexShrink: 0,
+  position: 'relative',
+  transition: 'all 0.3s ease-in-out',
+  '& .MuiDrawer-paper': {
+    backgroundColor: props.theme.palette.secondary.main,
+    width: drawerWidth,
+    boxSizing: 'border-box',
+    borderRight: 'none',
+    borderRadius: 0,
+    transition: 'all 0.3s ease-in-out',
+    overflow: 'hidden',
+  },
+
+  '&.collapsed': {
+    width: 64,
+    '& .MuiDrawer-paper': {
+      width: 64,
+    },
+  },
+}));
+
+export const Header = styled(Toolbar)(({ theme }) => ({
+  backgroundColor: '#fff',
+  borderRight: '1px solid rgba(38, 40, 66, 0.08)',
+  fontSize: 24,
+  fontWeight: 600,
+  // padding: theme.spacing(1, 4)
+}));
+
+export const List = styled(MuiList)((props) => ({
+  padding: props.theme.spacing(3),
+  margin: 0,
+}));
+
+export const ListItem = styled(MuiListItem)((props) => ({
+  color: '#fff',
+  height: props.theme.spacing(11),
+  overflow: 'hidden',
+}));
+
+export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
+  borderRadius: theme.spacing(2.5),
+  padding: theme.spacing(2),
+  height: theme.spacing(11),
+  '&.active': {
+    backgroundColor: 'rgba(38, 40, 66, 0.12)',
+    '&.main': {
+      backgroundColor: 'rgba(255, 255, 255, 0.12)',
+      borderLeft: '4px solid #E0613A',
+    },
+  },
+  '&:hover': {
+    backgroundColor: 'rgba(255, 255, 255, 0.08)',
+  },
+
+  '&.collapsed': {
+    width: theme.spacing(11),
+    '&.active': {
+      '&.main': {
+        border: 'none',
+        backgroundColor: '#E0613A',
+      },
+    },
+  },
+}));
+
+export const ListItemIcon = styled(MuiListItemIcon)(({ theme }) => ({
+  color: '#fff',
+  width: 20,
+  height: 20,
+  minWidth: 20,
+  marginRight: theme.spacing(2),
+  '& svg': {
+    marginLeft: 2,
+    fill: '#fff',
+    color: '#fff',
+  },
+  '&.collapsed': {
+    marginRight: 0,
+  },
+}));
+
+export const ListSubheader = styled(MuiListSubheader)(() => ({
+  backgroundColor: 'inherit',
+  color: '#fff',
+  paddingLeft: 0,
+  textTransform: 'uppercase',
+}));
+
+export const ListItemText = styled(MuiListItemText)((props) => ({
+  width: '100%',
+
+  '& > *': {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    wordBreak: 'break-all',
+    whiteSpace: 'nowrap',
+  },
+
+  '&.collapsed': {
+    display: 'none',
+  },
+}));
+
+export const ChildrenList = styled(MuiList)((props) => ({
+  margin: 0,
+  padding: 0,
+  '& .MuiListItemText-root': {
+    paddingLeft: props.theme.spacing(7),
+  },
+}));
+
+export const CollapseButton = styled(MuiButtonBase)((props) => ({
+  position: 'absolute',
+  top: props.theme.spacing(10),
+  left: 'calc(100% - 16px)',
+  width: props.theme.spacing(8),
+  height: props.theme.spacing(8),
+  border: '1px solid #E0E3EA',
+  borderRadius: '50%',
+  boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.12)',
+  backgroundColor: '#fff',
+  zIndex: 8000,
+  opacity: 0,
+  transition: 'all 0.3s ease-in-out',
+
+  '&.collapsed': {
+    img: {
+      transition: 'all 0.3s ease-in-out',
+      transform: 'rotate(180deg)',
+    },
+  },
+}));