@campxdev/shared 0.5.20 → 0.5.22

package/src/components/SideNav.tsx

@@ -1,150 +1,150 @@
-import {
-	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 {
-	ListItemButton,
-	StyledChevronIcon,
-	StyledListItemButton,
-} from './ListItemButton'
-
-const accessIfNoKey = process.env.NODE_ENV === 'development' ? true : false
-
-const sideNavStore = new Store({
-	activeKey: '',
-})
-
-const StyledLink = styled(Link)({
-	textDecoration: 'none',
-})
-
-const SideNav = ({
-	menuItems,
-	header,
-}: {
-	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>
-	)
-}
-
-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 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>
-		)
-
-	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 validateDropdownAccess = () => {
-		if (process.env.NODE_ENV === 'development' && !permissions) return true
-
-		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>
-	)
-}
-
-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>
-		</>
-	)
-}
+import {
+  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 {
+  ListItemButton,
+  StyledChevronIcon,
+  StyledListItemButton,
+} from './ListItemButton'
+
+const accessIfNoKey = process.env.NODE_ENV === 'development' ? true : false
+
+const sideNavStore = new Store({
+  activeKey: '',
+})
+
+const StyledLink = styled(Link)({
+  textDecoration: 'none',
+})
+
+const SideNav = ({
+  menuItems,
+  header,
+}: {
+  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>
+  )
+}
+
+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 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>
+    )
+
+  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 validateDropdownAccess = () => {
+    if (process.env.NODE_ENV === 'development' && !permissions) return true
+
+    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>
+  )
+}
+
+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'
-
-function Spinner({height = '200px'}: {height?: string | number}) {
-	return (
-		<div
-			style={{
-				justifyContent: 'center',
-				alignItems: 'center',
-				height,
-				display: 'flex',
-			}}
-		>
-			<CircularProgress />
-		</div>
-	)
-}
-
-export default Spinner
+import { CircularProgress } from '@mui/material'
+
+function Spinner({ height = '200px' }: { height?: string | number }) {
+  return (
+    <div
+      style={{
+        justifyContent: 'center',
+        alignItems: 'center',
+        height,
+        display: 'flex',
+      }}
+    >
+      <CircularProgress />
+    </div>
+  )
+}
+
+export default Spinner

package/src/components/StepsHeader/StepsHeader.tsx

@@ -1,115 +1,115 @@
-import { Done } from '@mui/icons-material'
-import { alpha, Box, styled, Typography } from '@mui/material'
-import { useEffect, useState } from 'react'
-
-export const StyledStepsContainer = styled(Box)(({ theme }) => ({
-  padding: '10px 0',
-  display: 'flex',
-  justifyContent: 'center',
-  gap: '10px',
-}))
-
-export const StyledStep = styled(Box, {
-  shouldForwardProp: (prop) =>
-    !['active', 'disableHover'].includes(prop as string),
-})<{ active: boolean; disableHover: boolean }>(
-  ({ theme, active, disableHover }) => ({
-    maxWidth: '130px',
-    position: 'relative',
-    display: 'grid',
-    gridTemplateRows: '50px 1fr',
-    placeItems: 'center',
-    gap: '10px',
-    cursor: disableHover ? 'default' : 'pointer',
-    padding: '6px',
-    borderRadius: '10px',
-    transition: 'background 0.3s ease',
-    '&:hover': {
-      background: disableHover ? 'none' : theme.palette.secondary.light,
-    },
-    '& .MuiTypography-root': {
-      color: alpha(theme.palette.secondary.main, active ? 1 : 0.6),
-      fontWeight: 'bold',
-      textAlign: 'center',
-    },
-    '& .connector': {
-      position: 'absolute',
-      top: '30%',
-      left: '50%',
-      width: '100%',
-      borderBottom: `1px dashed #1212128A`,
-    },
-    '&:last-of-type': {
-      '& .connector': {
-        display: 'none',
-      },
-    },
-  }),
-)
-
-export const StyledCircle = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'active',
-})<{ active: boolean }>(({ theme, active }) => ({
-  height: '50px',
-  width: '50px',
-  borderRadius: '50%',
-  background: 'white',
-  zIndex: 30,
-  backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='gray' stroke-width='1.2' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  ...(active && {
-    border: `1px solid ${theme.palette.primary.main}`,
-    backgroundImage: 'none',
-  }),
-}))
-
-interface StepsHeaderProps {
-  steps: { step: number; label: string }[]
-  onChange: (step: number) => void
-  activeStep?: number
-  disableClick?: boolean
-}
-
-export default function StepsHeader({
-  steps,
-  onChange,
-  activeStep: _activeStep = 0,
-  disableClick = false,
-}: StepsHeaderProps) {
-  const [activeStep, setActiveStep] = useState(0)
-
-  const handleClick = (step) => {
-    setActiveStep(step)
-    onChange(step)
-  }
-
-  useEffect(() => {
-    setActiveStep(_activeStep)
-  }, [_activeStep])
-
-  return (
-    <StyledStepsContainer>
-      {steps?.map((item) => (
-        <StyledStep
-          active={activeStep > item?.step - 1}
-          disableHover={disableClick}
-          onClick={() => {
-            if (disableClick) return
-            handleClick(item.step)
-          }}
-          key={item?.step}
-        >
-          <StyledCircle active={activeStep > item?.step - 1}>
-            {activeStep > item?.step - 1 && <Done color="success" />}
-          </StyledCircle>
-          <Typography variant="body1" sx={{ fontSize: '13px' }}>
-            {item?.label}
-          </Typography>
-          <Box className="connector"></Box>
-        </StyledStep>
-      ))}
-    </StyledStepsContainer>
-  )
-}
+import { Done } from '@mui/icons-material'
+import { alpha, Box, styled, Typography } from '@mui/material'
+import { useEffect, useState } from 'react'
+
+export const StyledStepsContainer = styled(Box)(({ theme }) => ({
+  padding: '10px 0',
+  display: 'flex',
+  justifyContent: 'center',
+  gap: '10px',
+}))
+
+export const StyledStep = styled(Box, {
+  shouldForwardProp: (prop) =>
+    !['active', 'disableHover'].includes(prop as string),
+})<{ active: boolean; disableHover: boolean }>(
+  ({ theme, active, disableHover }) => ({
+    maxWidth: '130px',
+    position: 'relative',
+    display: 'grid',
+    gridTemplateRows: '50px 1fr',
+    placeItems: 'center',
+    gap: '10px',
+    cursor: disableHover ? 'default' : 'pointer',
+    padding: '6px',
+    borderRadius: '10px',
+    transition: 'background 0.3s ease',
+    '&:hover': {
+      background: disableHover ? 'none' : theme.palette.secondary.light,
+    },
+    '& .MuiTypography-root': {
+      color: alpha(theme.palette.secondary.main, active ? 1 : 0.6),
+      fontWeight: 'bold',
+      textAlign: 'center',
+    },
+    '& .connector': {
+      position: 'absolute',
+      top: '30%',
+      left: '50%',
+      width: '100%',
+      borderBottom: `1px dashed #1212128A`,
+    },
+    '&:last-of-type': {
+      '& .connector': {
+        display: 'none',
+      },
+    },
+  }),
+)
+
+export const StyledCircle = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'active',
+})<{ active: boolean }>(({ theme, active }) => ({
+  height: '50px',
+  width: '50px',
+  borderRadius: '50%',
+  background: 'white',
+  zIndex: 30,
+  backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='gray' stroke-width='1.2' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  ...(active && {
+    border: `1px solid ${theme.palette.primary.main}`,
+    backgroundImage: 'none',
+  }),
+}))
+
+interface StepsHeaderProps {
+  steps: { step: number; label: string }[]
+  onChange: (step: number) => void
+  activeStep?: number
+  disableClick?: boolean
+}
+
+export default function StepsHeader({
+  steps,
+  onChange,
+  activeStep: _activeStep = 0,
+  disableClick = false,
+}: StepsHeaderProps) {
+  const [activeStep, setActiveStep] = useState(0)
+
+  const handleClick = (step) => {
+    setActiveStep(step)
+    onChange(step)
+  }
+
+  useEffect(() => {
+    setActiveStep(_activeStep)
+  }, [_activeStep])
+
+  return (
+    <StyledStepsContainer>
+      {steps?.map((item) => (
+        <StyledStep
+          active={activeStep > item?.step - 1}
+          disableHover={disableClick}
+          onClick={() => {
+            if (disableClick) return
+            handleClick(item.step)
+          }}
+          key={item?.step}
+        >
+          <StyledCircle active={activeStep > item?.step - 1}>
+            {activeStep > item?.step - 1 && <Done color="success" />}
+          </StyledCircle>
+          <Typography variant="body1" sx={{ fontSize: '13px' }}>
+            {item?.label}
+          </Typography>
+          <Box className="connector"></Box>
+        </StyledStep>
+      ))}
+    </StyledStepsContainer>
+  )
+}

package/src/components/StepsHeader/index.tsx

@@ -1 +1 @@
-export { default } from './StepsHeader'
+export { default } from './StepsHeader'

package/src/components/Styled/OutlinedIconButton.tsx

@@ -1,7 +1,7 @@
-import { IconButton, styled } from '@mui/material'
-
-const OutlinedIconButton = styled(IconButton)(({ theme }) => ({
-  border: theme.borders.grayLight,
-  minWidth: '50px',
-}))
-export default OutlinedIconButton
+import { IconButton, styled } from '@mui/material'
+
+const OutlinedIconButton = styled(IconButton)(({ theme }) => ({
+  border: theme.borders.grayLight,
+  minWidth: '50px',
+}))
+export default OutlinedIconButton

package/src/components/Styled/index.tsx

@@ -1 +1 @@
-export { default as OutlinedIconButton } from './OutlinedIconButton'
+export { default as OutlinedIconButton } from './OutlinedIconButton'

package/src/components/StyledTableContainer.tsx

@@ -1,33 +1,33 @@
-import styled from 'styled-components'
-
-export const StyledTableContainer = styled.div`
-  /* background: white; */
-  margin-top: 10px;
-  border-radius: 16px;
-
-  table thead tr {
-    background-color: #efefef;
-  }
-
-  table,
-  td,
-  th {
-    border: 1px solid #bebebe;
-    padding: 8px;
-  }
-
-  table {
-    background: white;
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  @media print {
-    table,
-    td,
-    th {
-      border: 1px solid black;
-      padding: 8px;
-    }
-  }
-`
+import styled from 'styled-components'
+
+export const StyledTableContainer = styled.div`
+  /* background: white; */
+  margin-top: 10px;
+  border-radius: 16px;
+
+  table thead tr {
+    background-color: #efefef;
+  }
+
+  table,
+  td,
+  th {
+    border: 1px solid #bebebe;
+    padding: 8px;
+  }
+
+  table {
+    background: white;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  @media print {
+    table,
+    td,
+    th {
+      border: 1px solid black;
+      padding: 8px;
+    }
+  }
+`