@dartech/arsenal-ui 1.2.6 → 1.2.7

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;

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

@@ -1,54 +0,0 @@
-import { Link as RouterLink } from 'react-router-dom';
-import {
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListSubheader,
-  ListItemText,
-} from '../Sidebar.styled';
-import classnames from 'classnames';
-import type { Route } from '../../../interfaces';
-import { useSidebarContext } from '../SidebarContext';
-
-type Props = {
-  route: Route;
-  isActive: boolean;
-};
-
-const SidebarLinkItem = ({ route, isActive }: Props) => {
-  const { collapsed } = useSidebarContext();
-
-  return route.link ? (
-    <ListItem
-      disablePadding
-      {...{
-        component: RouterLink,
-        replace: true,
-        to: { pathname: route.link, search: route.query },
-      }}
-    >
-      <ListItemButton
-        className={classnames({
-          active: isActive,
-          main: route.main,
-          collapsed,
-        })}
-      >
-        {route.icon && (
-          <ListItemIcon className={classnames({ collapsed })}>
-            {route.icon}
-          </ListItemIcon>
-        )}
-        <ListItemText
-          primary={route.name}
-          primaryTypographyProps={{ variant: 'body2' }}
-          className={classnames({ collapsed })}
-        />
-      </ListItemButton>
-    </ListItem>
-  ) : (
-    <ListSubheader>{route.name}</ListSubheader>
-  );
-};
-
-export default SidebarLinkItem;

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

@@ -1,62 +0,0 @@
-import type { Route } from '../../../interfaces';
-import {
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListSubheader,
-  ListItemText,
-} from '../Sidebar.styled';
-import Box from '@mui/material/Box';
-import ArrowIcon from '../../../assets/chevron_left.svg';
-
-import classnames from 'classnames';
-import { useSidebarContext } from '../SidebarContext';
-
-type Props = {
-  route: Route;
-  isActive: boolean;
-  isListOpen: boolean;
-  handleClick: () => void;
-};
-
-function SidebarNestedItem({
-  route,
-  isActive,
-  isListOpen,
-  handleClick,
-}: Props) {
-  const { collapsed } = useSidebarContext();
-
-  return route?.link ? (
-    <ListItem disablePadding onClick={handleClick}>
-      <ListItemButton
-        className={classnames({
-          active: isActive,
-          main: route.main,
-          collapsed,
-        })}
-      >
-        {route.icon && <ListItemIcon>{route.icon}</ListItemIcon>}
-        <ListItemText
-          primary={route.name}
-          primaryTypographyProps={{ variant: 'body2' }}
-          className={classnames({ collapsed })}
-        />
-        <Box
-          component="img"
-          src={ArrowIcon}
-          mr={3}
-          sx={{
-            transition: 'transform .3s',
-            transform: `rotate(${isListOpen ? '-90deg' : 0})`,
-            opacity: collapsed ? 0 : 1,
-          }}
-        />
-      </ListItemButton>
-    </ListItem>
-  ) : (
-    <ListSubheader>{route.name}</ListSubheader>
-  );
-}
-
-export default SidebarNestedItem;

package/src/lib/Sidebar/index.ts

@@ -1,2 +0,0 @@
-export * from './Sidebar';
-export * from './SidebarLink/MenuIcon';

package/src/lib/Status/Status.tsx

@@ -1,16 +0,0 @@
-import useStyles from './styles';
-import cn from 'classnames';
-import { StatusVariant } from '../../interfaces';
-
-type Props = {
-  text: string;
-  status?: StatusVariant;
-};
-
-export const Status = ({ text, status = 'default' }: Props) => {
-  const { classes } = useStyles();
-
-  return <div className={cn(classes['root'], { [status]: true })}>{text}</div>;
-};
-
-export default Status;

package/src/lib/Status/styles.ts

@@ -1,21 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export default makeStyles()((theme) => ({
-  root: {
-    backgroundColor: '#eee',
-    fontSize: '14px',
-    padding: '0 8px',
-    borderRadius: '10px',
-    width: 'fit-content',
-
-    '&.success': {
-      backgroundColor: '#a9dfa9',
-    },
-    '&.error': {
-      backgroundColor: '#ff7e7e',
-    },
-    '&.warning': {
-      backgroundColor: theme.palette.warning.main,
-    },
-  },
-}));

package/src/lib/StepperView/StepperView.tsx

@@ -1,73 +0,0 @@
-import { ReactNode } from 'react';
-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 StepConnector from '@mui/material/StepConnector';
-import { makeStyles } from 'tss-react/mui';
-
-export type StepperDataItem = { label: string | ReactNode; content: ReactNode };
-
-export type StepperData = StepperDataItem[];
-
-type Props = {
-  data: StepperData;
-};
-
-const useStyles = makeStyles()(() => ({
-  content: {
-    marginLeft: '4px',
-  },
-  connector: {
-    marginLeft: '4px',
-  },
-  stepper: {
-    padding: '12px',
-  },
-  label: {
-    display: 'flex',
-    alignItems: 'flex-start',
-  },
-}));
-
-const StepIcon = () => (
-  <div
-    style={{
-      display: 'inline-block',
-      width: '10px',
-      height: '10px',
-      borderRadius: '50%',
-      backgroundColor: '#536DFE',
-      marginTop: '5px',
-    }}
-  />
-);
-
-export const StepperView = ({ data }: Props) => {
-  const { classes } = useStyles();
-
-  return (
-    <Stepper
-      nonLinear
-      orientation="vertical"
-      className={classes.stepper}
-      connector={<StepConnector className={classes.connector} />}
-    >
-      {data.filter(Boolean).map((item, index) => (
-        <Step expanded key={index}>
-          <StepLabel
-            className={classes.label}
-            StepIconComponent={StepIcon}
-            StepIconProps={{ icon: '', completed: false, active: true }}
-          >
-            {item.label}
-          </StepLabel>
-          <StepContent className={classes.content}>{item.content}</StepContent>
-        </Step>
-      ))}
-      <Step />
-    </Stepper>
-  );
-};
-
-export default StepperView;

package/src/lib/Table/DataGrid/JsonTypeCell.tsx

@@ -1,51 +0,0 @@
-import { useCallback, MouseEvent } from 'react';
-import Box from '@mui/material/Box';
-import Tooltip from '@mui/material/Tooltip';
-import SvgIcon from '@mui/material/SvgIcon';
-import IconButton from '@mui/material/IconButton';
-import { getJsonStringValue, useToggle } from '../../../utils';
-import { CopyButton } from '../../Forms';
-import { JsonView } from '../../JsonView';
-import { JsonModalView } from '../../Modals';
-
-const JsonTypeCell = ({
-  value,
-  copyButton = false,
-  textField = false,
-}: {
-  value: any;
-  copyButton?: boolean;
-  textField?: boolean;
-}) => {
-  const { open: jsonModalOpen, onOpen: onJsonModalOpen, onClose: onJsonModalClose } = useToggle();
-
-  const handleClickOpen = useCallback((e: MouseEvent) => {
-    e.stopPropagation();
-    onJsonModalOpen();
-  }, [onJsonModalOpen])
-
-  return (
-    <Box width="100%">
-      <Box display="flex" alignItems="center" justifyContent="flex-end" pt={1} mb={2}>
-        {copyButton && <CopyButton copyText={getJsonStringValue(value)} />}
-        <Tooltip title="Open" placement="top">
-          <IconButton size="small" onClick={handleClickOpen}>
-            <SvgIcon>
-              <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
-            </SvgIcon>            
-          </IconButton>
-        </Tooltip>
-      </Box>
-      {textField ? (
-        <Box overflow="hidden" whiteSpace="nowrap">
-          {typeof value === 'object' ? JSON.stringify(value) : value}
-        </Box>
-      ) : (
-        <JsonView value={value} />
-      )}
-      <JsonModalView open={jsonModalOpen} value={getJsonStringValue(value)} onClose={onJsonModalClose} />
-    </Box>
-  );
-};
-
-export default JsonTypeCell;