@campxdev/shared 0.4.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/ListItemButton.tsx +84 -91
  3. package/src/components/SideNav.tsx +145 -85
  4. package/src/utils/withRouteWrapper.tsx +0 -1
  5. package/todo.md +8 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@campxdev/shared",
3
- "version": "0.4.1",
3
+ "version": "0.5.0",
4
4
  "main": "./exports.ts",
5
5
  "scripts": {
6
6
  "start": "react-scripts start",
package/src/components/ListItemButton.tsx CHANGED
@@ -1,101 +1,94 @@
1
- import { ChevronRight } from "@mui/icons-material";
1
+ import {ChevronRight} from '@mui/icons-material'
2
2
  import {
3
- Box,
4
- ListItemButton as MuiListItemButton,
5
- ListItemButtonProps,
6
- ListItemIcon,
7
- ListItemText,
8
- styled,
9
- } from "@mui/material";
10
- import { ReactNode } from "react";
3
+ Box,
4
+ ListItemButton as MuiListItemButton,
5
+ ListItemButtonProps,
6
+ ListItemIcon,
7
+ ListItemText,
8
+ styled,
9
+ } from '@mui/material'
10
+ import {ReactNode} from 'react'
11
11
 
12
12
  interface Props extends ListItemButtonProps {
13
- hasChildren?: boolean;
14
- isActive?: boolean;
15
- label: String;
16
- icon?: any;
13
+ hasChildren?: boolean
14
+ isActive?: boolean
15
+ label: String
16
+ icon?: any
17
17
  }
18
18
 
19
19
  export const ListItemButton = ({
20
- isActive,
21
- hasChildren,
22
- onClick,
23
- label,
24
- icon: Icon,
20
+ isActive,
21
+ hasChildren,
22
+ onClick,
23
+ label,
24
+ icon: Icon,
25
25
  }: Props) => {
26
- return (
27
- <MyListItemButton
28
- isactive={isActive && !hasChildren ? 1 : 0}
29
- onClick={onClick}
30
- >
31
- {Icon ? (
32
- <ListItemIcon>{<Icon />}</ListItemIcon>
33
- ) : (
34
- <Box minWidth={16}></Box>
35
- )}
36
- <ListItemText primary={label} />
37
- {hasChildren ? (
38
- <>
39
- <StyledChevronIcon open={isActive} />
40
- </>
41
- ) : null}
42
- </MyListItemButton>
43
- );
44
- };
26
+ return (
27
+ <StyledListItemButton isActive={isActive} onClick={onClick}>
28
+ {Icon ? (
29
+ <ListItemIcon>{<Icon />}</ListItemIcon>
30
+ ) : (
31
+ <Box minWidth={16}></Box>
32
+ )}
33
+ <ListItemText primary={label} />
34
+ </StyledListItemButton>
35
+ )
36
+ }
45
37
 
46
- const StyledChevronIcon = styled(ChevronRight)<{ open: boolean }>(
47
- ({ theme, open }) => ({
48
- transform: open ? "rotate(90deg)" : "rotate(0deg)",
49
- transition: "transform 0.2s ease-in-out",
50
- })
51
- );
38
+ export const StyledChevronIcon = styled(ChevronRight)<{open: boolean}>(
39
+ ({theme, open}) => ({
40
+ transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
41
+ transition: 'transform 0.2s ease-in-out',
42
+ })
43
+ )
52
44
 
53
- const MyListItemButton = styled(MuiListItemButton)<{
54
- isactive: 1 | 0;
55
- children: ReactNode;
56
- }>(({ theme, isactive }) => ({
57
- gap: "10px",
58
- fontWeight: "bold",
59
- backgroundColor: isactive && "#1d1d1d",
60
- "&:hover": {
61
- backgroundColor: isactive && "#1d1d1d",
62
- },
63
- "&:after": {
64
- content: '""',
65
- position: "absolute",
66
- height: "100%",
67
- left: 0,
68
- top: 0,
69
- width: isactive ? "5px" : 0,
70
- opacity: isactive ? 1 : 0,
71
- transition: theme.transitions.create(["opacity", "width"]),
72
- background: theme.palette.common.yellow,
73
- borderTopRightRadius: "3px",
74
- borderBottomRightRadius: "3px",
75
- },
76
- "&.MuiButton-endIcon, &.MuiButton-startIcon": {
77
- transition: theme.transitions.create(["color"]),
45
+ export const StyledListItemButton = styled(MuiListItemButton)<{
46
+ isActive: boolean
47
+ children: ReactNode
48
+ dropDown?: boolean
49
+ }>(({theme, isActive, dropDown = false}) => ({
50
+ gap: '10px',
51
+ fontWeight: 'bold',
52
+ backgroundColor: isActive && '#1d1d1d',
53
+ '&:hover': {
54
+ backgroundColor: isActive && '#1d1d1d',
55
+ },
56
+ '&:after': {
57
+ content: '""',
58
+ position: 'absolute',
59
+ height: '100%',
60
+ left: 0,
61
+ top: 0,
62
+ width: isActive ? '5px' : 0,
63
+ opacity: isActive ? (dropDown ? 0 : 1) : 0,
64
+ transition: theme.transitions.create(['opacity', 'width']),
65
+ background: theme.palette.common.yellow,
66
+ borderTopRightRadius: '3px',
67
+ borderBottomRightRadius: '3px',
68
+ },
69
+ '&.MuiButton-endIcon, &.MuiButton-startIcon': {
70
+ transition: theme.transitions.create(['color']),
78
71
 
79
- "&.MuiSvgIcon-root": {
80
- fontSize: "inherit",
81
- transition: "none",
82
- },
83
- },
84
- "& .MuiSvgIcon-root": {
85
- fontSize: theme.typography.pxToRem(20),
86
- marginRight: theme.spacing(1),
87
- // color: isactive
88
- // ? theme.sidebar.menuItemColorActive
89
- // : theme.sidebar.menuItemIconColor,
90
- },
91
- "& .MuiTypography-root": {
92
- color: theme.palette.common.white,
93
- },
94
- "& svg": {
95
- color: theme.palette.common.white,
96
- },
97
- "& .MuiListItemIcon-root": {
98
- minWidth: 0,
99
- maxWidth: "1rem",
100
- },
101
- }));
72
+ '&.MuiSvgIcon-root': {
73
+ fontSize: 'inherit',
74
+ transition: 'none',
75
+ },
76
+ },
77
+ '& .MuiSvgIcon-root': {
78
+ fontSize: theme.typography.pxToRem(20),
79
+ marginRight: theme.spacing(1),
80
+ // color: isActive
81
+ // ? theme.sidebar.menuItemColorActive
82
+ // : theme.sidebar.menuItemIconColor,
83
+ },
84
+ '& .MuiTypography-root': {
85
+ color: theme.palette.common.white,
86
+ },
87
+ '& svg': {
88
+ color: theme.palette.common.white,
89
+ },
90
+ '& .MuiListItemIcon-root': {
91
+ minWidth: 0,
92
+ maxWidth: '1rem',
93
+ },
94
+ }))
package/src/components/SideNav.tsx CHANGED
@@ -1,99 +1,159 @@
1
- import { ReactNode, useState } from "react";
2
- import { Link, useMatch, useResolvedPath, LinkProps } from "react-router-dom";
3
- import { Box, Collapse, List, styled } from "@mui/material";
4
- import { PermissionsStore } from "../permissions";
5
- import { ListItemButton } from "./ListItemButton";
6
- const accessIfNoKey = process.env.NODE_ENV === "development" ? true : false;
1
+ import {ChevronLeft} from '@mui/icons-material'
2
+ import {
3
+ Box,
4
+ Collapse,
5
+ List,
6
+ ListItemIcon,
7
+ ListItemText,
8
+ styled,
9
+ } from '@mui/material'
10
+ import {ReactNode, useState} from 'react'
11
+ import {Link, useMatch, useResolvedPath} from 'react-router-dom'
12
+ import {PermissionsStore} from '../permissions'
13
+ import {
14
+ ListItemButton,
15
+ StyledChevronIcon,
16
+ StyledListItemButton,
17
+ } from './ListItemButton'
18
+ const accessIfNoKey = process.env.NODE_ENV === 'development' ? false : false
7
19
  const StyledLink = styled(Link)({
8
- textDecoration: "none",
9
- });
20
+ textDecoration: 'none',
21
+ })
10
22
 
11
23
  export default function SideNav({
12
- menuItems,
13
- header,
24
+ menuItems,
25
+ header,
14
26
  }: {
15
- menuItems: any[];
16
- header?: ReactNode;
27
+ menuItems: any[]
28
+ header?: ReactNode
17
29
  }) {
18
- return (
19
- <>
20
- {header ? header : null}
21
- <Box>
22
- {menuItems.map((item, index) => (
23
- <RenderMenuItem key={index} menuItem={item} />
24
- ))}
25
- </Box>
26
- </>
27
- );
30
+ return (
31
+ <Box
32
+ sx={{
33
+ background: (theme) => theme.palette.secondary.main,
34
+ }}
35
+ >
36
+ {header ? header : null}
37
+ <Box>
38
+ {menuItems.map((item, index) => (
39
+ <RenderMenuItem key={index} menuItem={item} />
40
+ ))}
41
+ </Box>
42
+ </Box>
43
+ )
28
44
  }
29
45
 
30
- const RenderMenuItem = ({ menuItem }) => {
31
- const { path, title, children, icon, permissionKey } = menuItem;
46
+ const RenderMenuItem = ({menuItem}) => {
47
+ const {path, title, children, icon, permissionKey} = menuItem
48
+ let resolved = useResolvedPath(path)
49
+ let match = useMatch({path: resolved.pathname, end: false})
32
50
 
33
- let resolved = useResolvedPath(path);
34
- let match = useMatch({ path: resolved.pathname, end: false });
51
+ const permissions = PermissionsStore.useState((s) => s).permissions
52
+ const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey
35
53
 
36
- const [open, setOpen] = useState(false);
37
- const permissions = PermissionsStore.useState((s) => s).permissions;
54
+ if (!hasAccess) return null
55
+ if (children?.length)
56
+ return (
57
+ <Box
58
+ sx={{
59
+ position: 'relative',
60
+ }}
61
+ >
62
+ <DropDownMenu
63
+ icon={icon}
64
+ menuItems={children}
65
+ path={path}
66
+ title={title}
67
+ permissionKey={permissionKey}
68
+ />
69
+ </Box>
70
+ )
38
71
 
39
- const validateDropdownAccess = () => {
40
- if (accessIfNoKey && !permissions) return true;
41
- let arr = [];
72
+ return (
73
+ <StyledLink to={path}>
74
+ <ListItemButton
75
+ hasChildren={false}
76
+ label={title}
77
+ isActive={!!match}
78
+ icon={icon}
79
+ />
80
+ </StyledLink>
81
+ )
82
+ }
83
+
84
+ const DropDownMenu = ({path, title, icon, menuItems, permissionKey}) => {
85
+ const [open, setOpen] = useState(false)
86
+ const permissions = PermissionsStore.useState((s) => s).permissions
87
+
88
+ const validateDropdownAccess = () => {
89
+ if (accessIfNoKey && !permissions) return true
90
+ let arr = []
91
+
92
+ for (let i = 0; i < menuItems.length; i++) {
93
+ if (permissions[menuItems[i].permissionKey]) {
94
+ arr.push(true)
95
+ } else {
96
+ arr.push(accessIfNoKey)
97
+ }
98
+ }
42
99
 
43
- for (let i = 0; i < children.length; i++) {
44
- if (permissions[children[i].permissionKey]) {
45
- arr.push(true);
46
- } else {
47
- arr.push(accessIfNoKey);
48
- }
49
- }
100
+ return arr.includes(true)
101
+ }
50
102
 
51
- return arr.includes(true);
52
- };
53
- const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey;
54
- const dropdownAccess = children?.length
55
- ? validateDropdownAccess()
56
- : hasAccess;
103
+ const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey
57
104
 
58
- if (!dropdownAccess) return null;
59
- if (children?.length)
60
- return (
61
- <Box
62
- sx={{
63
- position: "relative",
64
- }}
65
- >
66
- <ListItemButton
67
- onClick={() => setOpen((prev) => !prev)}
68
- label={title}
69
- isActive={open}
70
- hasChildren={true}
71
- icon={icon}
72
- />
73
- <Collapse in={open}>
74
- <List>
75
- {children?.map((child) => (
76
- <RenderMenuItem
77
- key={child.path}
78
- menuItem={{
79
- ...child,
80
- path: path + child.path,
81
- }}
82
- />
83
- ))}
84
- </List>
85
- </Collapse>
86
- </Box>
87
- );
105
+ const dropdownAccess = menuItems?.length
106
+ ? validateDropdownAccess()
107
+ : hasAccess
88
108
 
89
- return (
90
- <StyledLink to={path}>
91
- <ListItemButton
92
- hasChildren={false}
93
- label={title}
94
- isActive={!!match}
95
- icon={icon}
96
- />
97
- </StyledLink>
98
- );
99
- };
109
+ if (!dropdownAccess) return null
110
+ return (
111
+ <>
112
+ <Box
113
+ sx={{
114
+ position: 'relative',
115
+ }}
116
+ >
117
+ <MenuDropDownButton
118
+ isActive={open}
119
+ onClick={() => setOpen((prev) => !prev)}
120
+ label={title}
121
+ icon={icon}
122
+ />
123
+ <Collapse in={open}>
124
+ <List>
125
+ {menuItems?.map((child) => (
126
+ <RenderMenuItem
127
+ key={child.path}
128
+ menuItem={{
129
+ ...child,
130
+ path: path + child.path,
131
+ }}
132
+ />
133
+ ))}
134
+ </List>
135
+ </Collapse>
136
+ </Box>
137
+ </>
138
+ )
139
+ }
140
+
141
+ const MenuDropDownButton = ({icon: Icon, label, onClick, isActive}) => {
142
+ return (
143
+ <>
144
+ <StyledListItemButton
145
+ dropDown={true}
146
+ onClick={onClick}
147
+ isActive={isActive}
148
+ >
149
+ {Icon ? (
150
+ <ListItemIcon>{<Icon />}</ListItemIcon>
151
+ ) : (
152
+ <Box minWidth={16}></Box>
153
+ )}
154
+ <ListItemText primary={label} />
155
+ <StyledChevronIcon open={isActive} />
156
+ </StyledListItemButton>
157
+ </>
158
+ )
159
+ }
package/src/utils/withRouteWrapper.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import {Spinner} from '../components'
2
1
  import {Suspense} from 'react'
3
2
  import PageWithPermission from '../permissions/PageWithPermission'
4
3
  import {LinearProgress} from '../components/LinearProgress'
package/todo.md ADDED
@@ -0,0 +1,8 @@
1
+ [ ] add illustration component
2
+ [ ] fix tabs component to route match
3
+ [ ] add basename prop in Providers component
4
+ [ ] add permision denied component in withRouter component fallback
5
+
6
+ ## in progress
7
+
8
+ [x] fix sidenav dropdown