@dartech/arsenal-ui 1.3.0 → 1.3.1

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

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

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

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

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

@@ -1,52 +0,0 @@
-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/Sidebar/Sidebar.styled.tsx

@@ -1,157 +0,0 @@
-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)',
-    },
-  },
-}));

package/src/lib/Sidebar/Sidebar.tsx

@@ -1,27 +0,0 @@
-import { ThemeProvider } from '@mui/material/styles';
-import { SidebarContextProvider } from './SidebarContext';
-import { theme as defaultTheme } from '@dartech/arsenal-ui';
-import SidebarDrawer from './SidebarDrawer';
-import type { Route } from '@dartech/arsenal-ui';
-
-type Props = {
-  routes: Route[];
-  theme?: any;
-  title?: string;
-  id?: string;
-};
-
-export const Sidebar = ({
-  routes,
-  theme = defaultTheme,
-  title = '',
-  id
-}: Props) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <SidebarContextProvider>
-        <SidebarDrawer title={title} routes={routes} id={id} />
-      </SidebarContextProvider>
-    </ThemeProvider>
-  );
-};

package/src/lib/Sidebar/SidebarContext.tsx

@@ -1,37 +0,0 @@
-import { createContext, useCallback, useContext, useState } from 'react';
-
-type SidebarContextProps = {
-  collapsed: boolean;
-  toggleCollapse: () => void;
-};
-
-export const SidebarContext = createContext<SidebarContextProps>({
-  collapsed: false,
-  toggleCollapse: () => {
-    console.log('collapse toggle');
-  },
-});
-
-export const useSidebarContext = () => useContext(SidebarContext);
-
-export const SidebarContextProvider = ({ children }) => {
-  const [collapsed, setCollapsed] = useState(
-    localStorage.getItem('sidebar_collapsed') === 'true'
-  );
-
-  const toggleCollapse = useCallback(() => {
-    setCollapsed(!collapsed);
-    localStorage.setItem('sidebar_collapsed', `${!collapsed}`);
-    window.dispatchEvent(new CustomEvent('sidebar_collapsed', {
-      detail: {
-        collapsed: !collapsed
-      }
-    }))
-  }, [collapsed]);
-
-  return (
-    <SidebarContext.Provider value={{ collapsed, toggleCollapse }}>
-      {children}
-    </SidebarContext.Provider>
-  );
-};

package/src/lib/Sidebar/SidebarDrawer.tsx

@@ -1,50 +0,0 @@
-import SidebarLink from './SidebarLink';
-import {
-  Container,
-  CollapseButton,
-  Drawer,
-  Header,
-  List,
-} from './Sidebar.styled';
-import ArrowIcon from '../../assets/chevron_left_gray.svg';
-import classnames from 'classnames';
-import type { Route } from '../../interfaces';
-import { useSidebarContext } from './SidebarContext';
-
-type Props = {
-  title?: string;
-  routes: Route[];
-  id?: string;
-};
-
-const SidebarDrawer = ({ title, routes, id }: Props) => {
-  const { collapsed, toggleCollapse } = useSidebarContext();
-
-  return (
-    <Container>
-      <CollapseButton
-        className={classnames('button-collapse', {
-          collapsed,
-        })}
-        onClick={toggleCollapse}
-      >
-        <img src={ArrowIcon} alt="collapse" />
-      </CollapseButton>
-      <Drawer
-        variant="permanent"
-        anchor="left"
-        className={classnames({ collapsed })}
-        id={id}
-      >
-        {!!title && <Header>{title}</Header>}
-        <List>
-          {routes.map((route, index) => (
-            <SidebarLink key={index} route={route} />
-          ))}
-        </List>
-      </Drawer>
-    </Container>
-  );
-};
-
-export default SidebarDrawer;

package/src/lib/Sidebar/SidebarLink/MenuIcon.tsx

@@ -1,16 +0,0 @@
-import Box from '@mui/material/Box';
-
-type Props = {
-  src: string;
-  alt?: string;
-}
-
-export const MenuIcon = ({src, alt}: Props) => {
-  return (
-    <Box sx={{ width: 20, height: 20, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-      <img src={src} alt={alt} />
-    </Box>
-  )
-}
-
-export default MenuIcon

package/src/lib/Sidebar/SidebarLink/SidebarLink.tsx

@@ -1,54 +0,0 @@
-import Collapse from '@mui/material/Collapse';
-import SidebarLinkItem from './SidebarLinkItem';
-import SidebarNestedItem from './SidebarNestedItem';
-import type { Route } from '../../../interfaces'; 
-import { useEffect, useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import { ChildrenList } from '../Sidebar.styled';
-import { useSidebarContext } from '../SidebarContext';
-
-type Props = {
-  route: Route;
-};
-
-const SidebarLink = ({ route }: Props) => {
-  const location = useLocation();
-  const { collapsed } = useSidebarContext();
-
-  const [open, setOpen] = useState(false);
-
-  const isActive = useMemo(
-    () => !!route.link && location.pathname.startsWith(route.link),
-    [location.pathname, route]
-  );
-
-  const handleClick = () => {
-    setOpen(!open);
-  };
-
-  useEffect(() => {
-    setOpen(isActive);
-  }, [isActive]);
-
-  return route.children?.length && !collapsed ? (
-    <>
-      <SidebarNestedItem
-        route={route}
-        isActive={isActive}
-        handleClick={handleClick}
-        isListOpen={open || !route.link}
-      />
-      <Collapse in={open || !route.link} timeout="auto">
-        <ChildrenList>
-          {route.children?.map((childRoute, index) => (
-            <SidebarLink key={index} route={childRoute} />
-          ))}
-        </ChildrenList>
-      </Collapse>
-    </>
-  ) : (
-    <SidebarLinkItem route={route} isActive={isActive} />
-  );
-};
-
-export default SidebarLink;