@campxdev/shared 0.4.1 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@campxdev/shared",
-	"version": "0.4.1",
+	"version": "0.5.1",
 	"main": "./exports.ts",
 	"scripts": {
 		"start": "react-scripts start",

package/src/components/ListItemButton.tsx

@@ -1,101 +1,94 @@
-import { ChevronRight } from "@mui/icons-material";
+import {ChevronRight} from '@mui/icons-material'
 import {
-  Box,
-  ListItemButton as MuiListItemButton,
-  ListItemButtonProps,
-  ListItemIcon,
-  ListItemText,
-  styled,
-} from "@mui/material";
-import { ReactNode } from "react";
+	Box,
+	ListItemButton as MuiListItemButton,
+	ListItemButtonProps,
+	ListItemIcon,
+	ListItemText,
+	styled,
+} from '@mui/material'
+import {ReactNode} from 'react'
 
 interface Props extends ListItemButtonProps {
-  hasChildren?: boolean;
-  isActive?: boolean;
-  label: String;
-  icon?: any;
+	hasChildren?: boolean
+	isActive?: boolean
+	label: String
+	icon?: any
 }
 
 export const ListItemButton = ({
-  isActive,
-  hasChildren,
-  onClick,
-  label,
-  icon: Icon,
+	isActive,
+	hasChildren,
+	onClick,
+	label,
+	icon: Icon,
 }: Props) => {
-  return (
-    <MyListItemButton
-      isactive={isActive && !hasChildren ? 1 : 0}
-      onClick={onClick}
-    >
-      {Icon ? (
-        <ListItemIcon>{<Icon />}</ListItemIcon>
-      ) : (
-        <Box minWidth={16}></Box>
-      )}
-      <ListItemText primary={label} />
-      {hasChildren ? (
-        <>
-          <StyledChevronIcon open={isActive} />
-        </>
-      ) : null}
-    </MyListItemButton>
-  );
-};
+	return (
+		<StyledListItemButton isActive={isActive} onClick={onClick}>
+			{Icon ? (
+				<ListItemIcon>{<Icon />}</ListItemIcon>
+			) : (
+				<Box minWidth={16}></Box>
+			)}
+			<ListItemText primary={label} />
+		</StyledListItemButton>
+	)
+}
 
-const StyledChevronIcon = styled(ChevronRight)<{ open: boolean }>(
-  ({ theme, open }) => ({
-    transform: open ? "rotate(90deg)" : "rotate(0deg)",
-    transition: "transform 0.2s ease-in-out",
-  })
-);
+export const StyledChevronIcon = styled(ChevronRight)<{open: boolean}>(
+	({theme, open}) => ({
+		transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
+		transition: 'transform 0.2s ease-in-out',
+	})
+)
 
-const MyListItemButton = styled(MuiListItemButton)<{
-  isactive: 1 | 0;
-  children: ReactNode;
-}>(({ theme, isactive }) => ({
-  gap: "10px",
-  fontWeight: "bold",
-  backgroundColor: isactive && "#1d1d1d",
-  "&:hover": {
-    backgroundColor: isactive && "#1d1d1d",
-  },
-  "&:after": {
-    content: '""',
-    position: "absolute",
-    height: "100%",
-    left: 0,
-    top: 0,
-    width: isactive ? "5px" : 0,
-    opacity: isactive ? 1 : 0,
-    transition: theme.transitions.create(["opacity", "width"]),
-    background: theme.palette.common.yellow,
-    borderTopRightRadius: "3px",
-    borderBottomRightRadius: "3px",
-  },
-  "&.MuiButton-endIcon, &.MuiButton-startIcon": {
-    transition: theme.transitions.create(["color"]),
+export const StyledListItemButton = styled(MuiListItemButton)<{
+	isActive: boolean
+	children: ReactNode
+	dropDown?: boolean
+}>(({theme, isActive, dropDown = false}) => ({
+	gap: '10px',
+	fontWeight: 'bold',
+	backgroundColor: isActive && '#1d1d1d',
+	'&:hover': {
+		backgroundColor: isActive && '#1d1d1d',
+	},
+	'&:after': {
+		content: '""',
+		position: 'absolute',
+		height: '100%',
+		left: 0,
+		top: 0,
+		width: isActive ? '5px' : 0,
+		opacity: isActive ? (dropDown ? 0 : 1) : 0,
+		transition: theme.transitions.create(['opacity', 'width']),
+		background: theme.palette.common.yellow,
+		borderTopRightRadius: '3px',
+		borderBottomRightRadius: '3px',
+	},
+	'&.MuiButton-endIcon, &.MuiButton-startIcon': {
+		transition: theme.transitions.create(['color']),
 
-    "&.MuiSvgIcon-root": {
-      fontSize: "inherit",
-      transition: "none",
-    },
-  },
-  "& .MuiSvgIcon-root": {
-    fontSize: theme.typography.pxToRem(20),
-    marginRight: theme.spacing(1),
-    // color: isactive
-    //   ? theme.sidebar.menuItemColorActive
-    //   : theme.sidebar.menuItemIconColor,
-  },
-  "& .MuiTypography-root": {
-    color: theme.palette.common.white,
-  },
-  "& svg": {
-    color: theme.palette.common.white,
-  },
-  "& .MuiListItemIcon-root": {
-    minWidth: 0,
-    maxWidth: "1rem",
-  },
-}));
+		'&.MuiSvgIcon-root': {
+			fontSize: 'inherit',
+			transition: 'none',
+		},
+	},
+	'& .MuiSvgIcon-root': {
+		fontSize: theme.typography.pxToRem(20),
+		marginRight: theme.spacing(1),
+		// color: isActive
+		//   ? theme.sidebar.menuItemColorActive
+		//   : theme.sidebar.menuItemIconColor,
+	},
+	'& .MuiTypography-root': {
+		color: theme.palette.common.white,
+	},
+	'& svg': {
+		color: theme.palette.common.white,
+	},
+	'& .MuiListItemIcon-root': {
+		minWidth: 0,
+		maxWidth: '1rem',
+	},
+}))

package/src/components/LoginForm.tsx

@@ -14,6 +14,8 @@ import {useState} from 'react'
 import {useForm} from 'react-hook-form'
 import {FormTextField} from './HookForm'
 
+const developmentOrigin = window.location.origin + '/campx_dev'
+
 export const StyledTextField = styled(FormTextField)(({theme}) => ({
 	'& .MuiInputBase-root': {
 		minHeight: '60px',
@@ -42,7 +44,7 @@ export function LoginForm() {
 				data: values,
 			})
 			Cookies.set('campx_session_key', res.data.cookie)
-			window.location.href = '/'
+			window.location.href = developmentOrigin
 		} catch (err) {
 			// eslint-disable-next-line no-console
 			console.log(err)

package/src/components/SideNav.tsx

@@ -1,99 +1,159 @@
-import { ReactNode, useState } from "react";
-import { Link, useMatch, useResolvedPath, LinkProps } from "react-router-dom";
-import { Box, Collapse, List, styled } from "@mui/material";
-import { PermissionsStore } from "../permissions";
-import { ListItemButton } from "./ListItemButton";
-const accessIfNoKey = process.env.NODE_ENV === "development" ? true : false;
+import {ChevronLeft} from '@mui/icons-material'
+import {
+	Box,
+	Collapse,
+	List,
+	ListItemIcon,
+	ListItemText,
+	styled,
+} from '@mui/material'
+import {ReactNode, useState} from 'react'
+import {Link, useMatch, useResolvedPath} from 'react-router-dom'
+import {PermissionsStore} from '../permissions'
+import {
+	ListItemButton,
+	StyledChevronIcon,
+	StyledListItemButton,
+} from './ListItemButton'
+const accessIfNoKey = process.env.NODE_ENV === 'development' ? false : false
 const StyledLink = styled(Link)({
-  textDecoration: "none",
-});
+	textDecoration: 'none',
+})
 
 export default function SideNav({
-  menuItems,
-  header,
+	menuItems,
+	header,
 }: {
-  menuItems: any[];
-  header?: ReactNode;
+	menuItems: any[]
+	header?: ReactNode
 }) {
-  return (
-    <>
-      {header ? header : null}
-      <Box>
-        {menuItems.map((item, index) => (
-          <RenderMenuItem key={index} menuItem={item} />
-        ))}
-      </Box>
-    </>
-  );
+	return (
+		<Box
+			sx={{
+				background: (theme) => theme.palette.secondary.main,
+			}}
+		>
+			{header ? header : null}
+			<Box>
+				{menuItems.map((item, index) => (
+					<RenderMenuItem key={index} menuItem={item} />
+				))}
+			</Box>
+		</Box>
+	)
 }
 
-const RenderMenuItem = ({ menuItem }) => {
-  const { path, title, children, icon, permissionKey } = menuItem;
+const RenderMenuItem = ({menuItem}) => {
+	const {path, title, children, icon, permissionKey} = menuItem
+	let resolved = useResolvedPath(path)
+	let match = useMatch({path: resolved.pathname, end: false})
 
-  let resolved = useResolvedPath(path);
-  let match = useMatch({ path: resolved.pathname, end: false });
+	const permissions = PermissionsStore.useState((s) => s).permissions
+	const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey
 
-  const [open, setOpen] = useState(false);
-  const permissions = PermissionsStore.useState((s) => s).permissions;
+	if (!hasAccess) return null
+	if (children?.length)
+		return (
+			<Box
+				sx={{
+					position: 'relative',
+				}}
+			>
+				<DropDownMenu
+					icon={icon}
+					menuItems={children}
+					path={path}
+					title={title}
+					permissionKey={permissionKey}
+				/>
+			</Box>
+		)
 
-  const validateDropdownAccess = () => {
-    if (accessIfNoKey && !permissions) return true;
-    let arr = [];
+	return (
+		<StyledLink to={path}>
+			<ListItemButton
+				hasChildren={false}
+				label={title}
+				isActive={!!match}
+				icon={icon}
+			/>
+		</StyledLink>
+	)
+}
+
+const DropDownMenu = ({path, title, icon, menuItems, permissionKey}) => {
+	const [open, setOpen] = useState(false)
+	const permissions = PermissionsStore.useState((s) => s).permissions
+
+	const validateDropdownAccess = () => {
+		if (accessIfNoKey && !permissions) return true
+		let arr = []
+
+		for (let i = 0; i < menuItems.length; i++) {
+			if (permissions[menuItems[i].permissionKey]) {
+				arr.push(true)
+			} else {
+				arr.push(accessIfNoKey)
+			}
+		}
 
-    for (let i = 0; i < children.length; i++) {
-      if (permissions[children[i].permissionKey]) {
-        arr.push(true);
-      } else {
-        arr.push(accessIfNoKey);
-      }
-    }
+		return arr.includes(true)
+	}
 
-    return arr.includes(true);
-  };
-  const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey;
-  const dropdownAccess = children?.length
-    ? validateDropdownAccess()
-    : hasAccess;
+	const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey
 
-  if (!dropdownAccess) return null;
-  if (children?.length)
-    return (
-      <Box
-        sx={{
-          position: "relative",
-        }}
-      >
-        <ListItemButton
-          onClick={() => setOpen((prev) => !prev)}
-          label={title}
-          isActive={open}
-          hasChildren={true}
-          icon={icon}
-        />
-        <Collapse in={open}>
-          <List>
-            {children?.map((child) => (
-              <RenderMenuItem
-                key={child.path}
-                menuItem={{
-                  ...child,
-                  path: path + child.path,
-                }}
-              />
-            ))}
-          </List>
-        </Collapse>
-      </Box>
-    );
+	const dropdownAccess = menuItems?.length
+		? validateDropdownAccess()
+		: hasAccess
 
-  return (
-    <StyledLink to={path}>
-      <ListItemButton
-        hasChildren={false}
-        label={title}
-        isActive={!!match}
-        icon={icon}
-      />
-    </StyledLink>
-  );
-};
+	if (!dropdownAccess) return null
+	return (
+		<>
+			<Box
+				sx={{
+					position: 'relative',
+				}}
+			>
+				<MenuDropDownButton
+					isActive={open}
+					onClick={() => setOpen((prev) => !prev)}
+					label={title}
+					icon={icon}
+				/>
+				<Collapse in={open}>
+					<List>
+						{menuItems?.map((child) => (
+							<RenderMenuItem
+								key={child.path}
+								menuItem={{
+									...child,
+									path: path + child.path,
+								}}
+							/>
+						))}
+					</List>
+				</Collapse>
+			</Box>
+		</>
+	)
+}
+
+const MenuDropDownButton = ({icon: Icon, label, onClick, isActive}) => {
+	return (
+		<>
+			<StyledListItemButton
+				dropDown={true}
+				onClick={onClick}
+				isActive={isActive}
+			>
+				{Icon ? (
+					<ListItemIcon>{<Icon />}</ListItemIcon>
+				) : (
+					<Box minWidth={16}></Box>
+				)}
+				<ListItemText primary={label} />
+				<StyledChevronIcon open={isActive} />
+			</StyledListItemButton>
+		</>
+	)
+}

package/src/config/axios.ts

@@ -3,11 +3,10 @@ import _ from 'lodash'
 import {toast} from 'react-toastify'
 import Cookies from 'js-cookie'
 import {NetworkStore} from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
+import {isDevelopment} from '../constants'
 
-const isDevelopment =
-	process.env.NODE_ENV === 'development' ||
-	window.location.origin.split('.').slice(-2).join('.') === 'campx.dev'
 const sessionKey = Cookies.get('campx_session_key')
+const clientId = window.location.pathname.split('/')[0] ?? 'campx_dev'
 
 const formatParams = (params) => {
 	return Object.fromEntries(
@@ -21,12 +20,13 @@ const formatParams = (params) => {
 let axios = Axios.create({
 	baseURL: process.env.REACT_APP_API_HOST,
 	withCredentials: true,
-	...(isDevelopment &&
-		sessionKey && {
-			headers: {
+	headers: {
+		'x-tenent-id': isDevelopment ? 'campx_dev' : clientId,
+		...(isDevelopment &&
+			sessionKey && {
 				campx_session_key: sessionKey,
-			},
-		}),
+			}),
+	},
 })
 
 axios.interceptors.request.use(

package/src/contexts/Providers.tsx

@@ -7,10 +7,18 @@ import QueryClientProvider from './QueryClientProvider'
 import DialogProvider from '../components/DrawerWrapper/DrawerWrapper'
 import {ToastContainer} from '../components'
 import LoginFormProvider from './LoginFormProvider'
+import {ReactNode} from 'react'
+import {isDevelopment} from '../constants'
 
-export default function Providers({children}) {
+export default function Providers({
+	children,
+	basename,
+}: {
+	children: ReactNode
+	basename: string
+}) {
 	return (
-		<BrowserRouter>
+		<BrowserRouter basename={isDevelopment ? 'campx_dev' : basename}>
 			<QueryClientProvider>
 				<MuiThemeProvider>
 					<DialogProvider>

package/src/utils/withRouteWrapper.tsx

@@ -1,4 +1,3 @@
-import {Spinner} from '../components'
 import {Suspense} from 'react'
 import PageWithPermission from '../permissions/PageWithPermission'
 import {LinearProgress} from '../components/LinearProgress'

package/todo.md

@@ -0,0 +1,8 @@
+[ ] add illustration component
+[ ] fix tabs component to route match
+[ ] add basename prop in Providers component
+[ ] add permision denied component in withRouter component fallback
+
+## in progress
+
+[x] fix sidenav dropdown