@campxdev/shared 0.5.21 → 0.5.22

package/src/components/PopupConfirm/ConfirmContextProvider.tsx

@@ -1,40 +1,40 @@
-import {createContext, ReactNode, useState} from 'react'
+import { createContext, ReactNode, useState } from 'react'
 import PopupConfirm from './PopupConfirm'
 
 interface ConfirmContextProps {
-	confirm: {
-		prompt: ReactNode
-		isOpen: boolean
-		proceed: () => void
-		cancel: () => void
-	}
-	setConfirm: any
+  confirm: {
+    prompt: ReactNode
+    isOpen: boolean
+    proceed: () => void
+    cancel: () => void
+  }
+  setConfirm: any
 }
 
 export const ConfirmContext = createContext<ConfirmContextProps>({
-	confirm: {
-		cancel: () => {},
-		proceed: () => {},
-		prompt: 'Are you sure?',
-		isOpen: false,
-	},
-	setConfirm: () => {},
+  confirm: {
+    cancel: () => {},
+    proceed: () => {},
+    prompt: 'Are you sure?',
+    isOpen: false,
+  },
+  setConfirm: () => {},
 })
 
-const ConfirmContextProvider = ({children}) => {
-	const [confirm, setConfirm] = useState({
-		prompt: '',
-		isOpen: false,
-		proceed: null,
-		cancel: null,
-	})
+const ConfirmContextProvider = ({ children }) => {
+  const [confirm, setConfirm] = useState({
+    prompt: '',
+    isOpen: false,
+    proceed: null,
+    cancel: null,
+  })
 
-	return (
-		<ConfirmContext.Provider value={{confirm, setConfirm}}>
-			{children}
-			<PopupConfirm />
-		</ConfirmContext.Provider>
-	)
+  return (
+    <ConfirmContext.Provider value={{ confirm, setConfirm }}>
+      {children}
+      <PopupConfirm />
+    </ConfirmContext.Provider>
+  )
 }
 
 export default ConfirmContextProvider

package/src/components/PopupConfirm/PopupConfirm.tsx

@@ -1,34 +1,34 @@
 import {
-	Button,
-	Dialog,
-	DialogActions,
-	DialogContent,
-	DialogTitle,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
 } from '@mui/material'
 import useConfirm from './useConfirm'
 
 const PopupConfirm = () => {
-	const {prompt = '', isOpen = false, proceed, cancel} = useConfirm()
-	return (
-		<Dialog
-			sx={{zIndex: 1600}}
-			keepMounted
-			maxWidth='sm'
-			fullWidth
-			open={isOpen}
-			transitionDuration={150}
-		>
-			<DialogTitle>Confirm</DialogTitle>
-			<DialogContent sx={{minHeight: '40px'}}>{prompt}</DialogContent>
-			<DialogActions>
-				<Button variant='contained' color='primary' onClick={proceed}>
-					Ok
-				</Button>
-				<Button color='secondary' variant='outlined' onClick={cancel}>
-					Cancel
-				</Button>
-			</DialogActions>
-		</Dialog>
-	)
+  const { prompt = '', isOpen = false, proceed, cancel } = useConfirm()
+  return (
+    <Dialog
+      sx={{ zIndex: 1600 }}
+      keepMounted
+      maxWidth="sm"
+      fullWidth
+      open={isOpen}
+      transitionDuration={150}
+    >
+      <DialogTitle>Confirm</DialogTitle>
+      <DialogContent sx={{ minHeight: '40px' }}>{prompt}</DialogContent>
+      <DialogActions>
+        <Button variant="contained" color="primary" onClick={proceed}>
+          Ok
+        </Button>
+        <Button color="secondary" variant="outlined" onClick={cancel}>
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
 }
 export default PopupConfirm

package/src/components/PopupConfirm/useConfirm.ts

@@ -1,47 +1,47 @@
-import {ReactNode, useContext, useEffect, useState} from 'react'
-import {ConfirmContext} from './ConfirmContextProvider'
+import { ReactNode, useContext, useEffect, useState } from 'react'
+import { ConfirmContext } from './ConfirmContextProvider'
 
 export default function useConfirm(): {
-	isConfirmed: (prompt?: string) => Promise<boolean>
-	prompt?: ReactNode
-	isOpen?: boolean
-	proceed?: () => void
-	cancel?: () => void
+  isConfirmed: (prompt?: string) => Promise<boolean>
+  prompt?: ReactNode
+  isOpen?: boolean
+  proceed?: () => void
+  cancel?: () => void
 } {
-	const {confirm, setConfirm} = useContext(ConfirmContext)
-	const [needsCleanup, setNeedsCleanup] = useState(false)
+  const { confirm, setConfirm } = useContext(ConfirmContext)
+  const [needsCleanup, setNeedsCleanup] = useState(false)
 
-	const isConfirmed = (prompt) => {
-		setNeedsCleanup(true)
-		const promise = new Promise((resolve, reject) => {
-			setConfirm({
-				prompt,
-				isOpen: true,
-				proceed: resolve,
-				cancel: reject,
-			})
-		})
-		return promise.then(
-			() => {
-				setConfirm({...confirm, isOpen: false})
-				return true
-			},
-			() => {
-				setConfirm({...confirm, isOpen: false})
-				return false
-			}
-		)
-	}
+  const isConfirmed = (prompt) => {
+    setNeedsCleanup(true)
+    const promise = new Promise((resolve, reject) => {
+      setConfirm({
+        prompt,
+        isOpen: true,
+        proceed: resolve,
+        cancel: reject,
+      })
+    })
+    return promise.then(
+      () => {
+        setConfirm({ ...confirm, isOpen: false })
+        return true
+      },
+      () => {
+        setConfirm({ ...confirm, isOpen: false })
+        return false
+      },
+    )
+  }
 
-	useEffect(() => {
-		return () => {
-			if (confirm.cancel && needsCleanup) {
-				confirm.cancel()
-			}
-		}
-	}, [confirm, needsCleanup])
-	return {
-		...confirm,
-		isConfirmed,
-	}
+  useEffect(() => {
+    return () => {
+      if (confirm.cancel && needsCleanup) {
+        confirm.cancel()
+      }
+    }
+  }, [confirm, needsCleanup])
+  return {
+    ...confirm,
+    isConfirmed,
+  }
 }

package/src/components/SideMenuHeader.tsx

@@ -1,29 +1,29 @@
-import { KeyboardBackspace } from "@mui/icons-material";
-import { Box, styled as styledMui, Typography } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import { KeyboardBackspace } from '@mui/icons-material'
+import { Box, styled as styledMui, Typography } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
 
 const StyledSideMenuHeader = styledMui(Box)(({ theme }) => ({
-  height: "60px",
-  display: "flex",
-  gap: "8px",
-  alignItems: "center",
-  cursor: "pointer",
-  background: "#1d1d1d",
-}));
+  height: '60px',
+  display: 'flex',
+  gap: '8px',
+  alignItems: 'center',
+  cursor: 'pointer',
+  background: '#1d1d1d',
+}))
 
 export const SideMenuHeader = ({ title, path }) => {
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
   return (
     <StyledSideMenuHeader
       onClick={() => {
-        navigate(path);
+        navigate(path)
       }}
     >
       <KeyboardBackspace />
-      <Typography variant="h3" color={"white"}>
+      <Typography variant="h3" color={'white'}>
         {title}
       </Typography>
     </StyledSideMenuHeader>
-  );
-};
+  )
+}

package/src/components/SideNav.tsx

@@ -1,150 +1,150 @@
 import {
-	Box,
-	Collapse,
-	List,
-	ListItemIcon,
-	ListItemText,
-	styled,
+  Box,
+  Collapse,
+  List,
+  ListItemIcon,
+  ListItemText,
+  styled,
 } from '@mui/material'
-import {Store} from 'pullstate'
-import {memo, ReactNode} from 'react'
-import {Link, useMatch, useResolvedPath} from 'react-router-dom'
-import {PermissionsStore} from '../permissions'
+import { Store } from 'pullstate'
+import { memo, ReactNode } from 'react'
+import { Link, useMatch, useResolvedPath } from 'react-router-dom'
+import { PermissionsStore } from '../permissions'
 import {
-	ListItemButton,
-	StyledChevronIcon,
-	StyledListItemButton,
+  ListItemButton,
+  StyledChevronIcon,
+  StyledListItemButton,
 } from './ListItemButton'
 
 const accessIfNoKey = process.env.NODE_ENV === 'development' ? true : false
 
 const sideNavStore = new Store({
-	activeKey: '',
+  activeKey: '',
 })
 
 const StyledLink = styled(Link)({
-	textDecoration: 'none',
+  textDecoration: 'none',
 })
 
 const SideNav = ({
-	menuItems,
-	header,
+  menuItems,
+  header,
 }: {
-	menuItems: any[]
-	header?: ReactNode
+  menuItems: any[]
+  header?: ReactNode
 }) => {
-	return (
-		<Box
-			sx={{
-				background: (theme) => theme.palette.secondary.main,
-			}}
-		>
-			{header ? header : null}
-			<Box>
-				{menuItems.map((item, index) => (
-					<RenderMenuItem key={index} menuItem={item} />
-				))}
-			</Box>
-		</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>
+  )
 }
 
 export default memo(SideNav)
 
-const RenderMenuItem = ({menuItem}) => {
-	const {path, children, title, icon, permissionKey} = menuItem
-	let resolved = useResolvedPath(path)
-	let match = useMatch({path: resolved.pathname, end: false})
+const RenderMenuItem = ({ menuItem }) => {
+  const { path, children, title, icon, permissionKey } = menuItem
+  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 permissions = PermissionsStore.useState((s) => s).permissions
+  const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey
 
-	if (children?.length)
-		return (
-			<Box sx={{position: 'relative'}}>
-				<DropDownMenu
-					icon={icon}
-					menuItems={children}
-					path={path}
-					title={title}
-				/>
-			</Box>
-		)
+  if (children?.length)
+    return (
+      <Box sx={{ position: 'relative' }}>
+        <DropDownMenu
+          icon={icon}
+          menuItems={children}
+          path={path}
+          title={title}
+        />
+      </Box>
+    )
 
-	return (
-		<>
-			{hasAccess ? (
-				<StyledLink to={path}>
-					<ListItemButton
-						hasChildren={false}
-						label={title}
-						isActive={!!match}
-						icon={icon}
-					/>
-				</StyledLink>
-			) : null}
-		</>
-	)
+  return (
+    <>
+      {hasAccess ? (
+        <StyledLink to={path}>
+          <ListItemButton
+            hasChildren={false}
+            label={title}
+            isActive={!!match}
+            icon={icon}
+          />
+        </StyledLink>
+      ) : null}
+    </>
+  )
 }
 
-const DropDownMenu = ({path, title, icon, menuItems}) => {
-	const {activeKey} = sideNavStore.useState((s) => s)
-	const permissions = PermissionsStore.useState((s) => s).permissions
+const DropDownMenu = ({ path, title, icon, menuItems }) => {
+  const { activeKey } = sideNavStore.useState((s) => s)
+  const permissions = PermissionsStore.useState((s) => s).permissions
 
-	const validateDropdownAccess = () => {
-		if (process.env.NODE_ENV === 'development' && !permissions) return true
+  const validateDropdownAccess = () => {
+    if (process.env.NODE_ENV === 'development' && !permissions) return true
 
-		return menuItems?.every((item) =>
-			item?.permissionKey ? permissions[item.permissionKey] : accessIfNoKey
-		)
-	}
+    return menuItems?.every((item) =>
+      item?.permissionKey ? permissions[item.permissionKey] : accessIfNoKey,
+    )
+  }
 
-	if (!validateDropdownAccess()) return null
-	return (
-		<Box sx={{position: 'relative'}}>
-			<MenuDropDownButton
-				isActive={activeKey === path}
-				onClick={() => {
-					sideNavStore.update((s) => {
-						s.activeKey = activeKey === path ? '' : path
-					})
-				}}
-				label={title}
-				icon={icon}
-			/>
-			<Collapse timeout={200} in={activeKey === path}>
-				<List>
-					{menuItems?.map((child) => (
-						<RenderMenuItem
-							key={child.path}
-							menuItem={{
-								...child,
-								path: path + child.path,
-							}}
-						/>
-					))}
-				</List>
-			</Collapse>
-		</Box>
-	)
+  if (!validateDropdownAccess()) return null
+  return (
+    <Box sx={{ position: 'relative' }}>
+      <MenuDropDownButton
+        isActive={activeKey === path}
+        onClick={() => {
+          sideNavStore.update((s) => {
+            s.activeKey = activeKey === path ? '' : path
+          })
+        }}
+        label={title}
+        icon={icon}
+      />
+      <Collapse timeout={200} in={activeKey === path}>
+        <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>
-		</>
-	)
+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/components/Spinner.tsx

@@ -1,18 +1,18 @@
-import {CircularProgress} from '@mui/material'
+import { CircularProgress } from '@mui/material'
 
-function Spinner({height = '200px'}: {height?: string | number}) {
-	return (
-		<div
-			style={{
-				justifyContent: 'center',
-				alignItems: 'center',
-				height,
-				display: 'flex',
-			}}
-		>
-			<CircularProgress />
-		</div>
-	)
+function Spinner({ height = '200px' }: { height?: string | number }) {
+  return (
+    <div
+      style={{
+        justifyContent: 'center',
+        alignItems: 'center',
+        height,
+        display: 'flex',
+      }}
+    >
+      <CircularProgress />
+    </div>
+  )
 }
 
 export default Spinner