@campxdev/shared 0.5.19 → 0.5.21

package/src/components/Layout/Header/assets/peoplexHeader.svg

@@ -1,14 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="#d0002b"/>
-      <stop offset="1" stop-color="#ea4a6b"/>
-    </linearGradient>
-  </defs>
-  <g id="Group_4500" data-name="Group 4500" transform="translate(-325 -234.99)">
-    <path id="Union_5" data-name="Union 5" d="M23.169,22.857,19.574,17.91l-.669.921L21.792,22.8l-.073.053H8.659v0l2.926-4.027-.667-.919L7.322,22.857H0l0,0,3.66-5.038,0,0,7.232-9.955.036.049.022-.03,4.293,5.909,4.307-5.928.036.049.022-.03L30.45,22.8l-.074.053ZM12.2,7.761v0h.183l-.093.128ZM3.63,7.887l-.091-.126,0,0h.183l-.093.128Zm23.243-.024-.076-.1h.04l.074.053-.037.05h0Zm-8.657,0-.076-.1h.04l.073.053-.037.05h0ZM16.574,2.881a2.881,2.881,0,1,1,2.881,2.881A2.881,2.881,0,0,1,16.574,2.881Zm-8.564,0a2.881,2.881,0,1,1,2.881,2.881A2.881,2.881,0,0,1,8.01,2.881Z" transform="translate(329.775 243.534)" fill="url(#linear-gradient)"/>
-    <g id="Group_4480" data-name="Group 4480" transform="translate(325 234.99)">
-      <path id="Subtraction_36" data-name="Subtraction 36" d="M40,40H34.286V38.857h4.571V1.143H34.286V0H5.714V1.143H1.143V38.857H5.714V40H0V0H40V40Z" fill="#121212"/>
-    </g>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#d0002b"/>
+      <stop offset="1" stop-color="#ea4a6b"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4500" data-name="Group 4500" transform="translate(-325 -234.99)">
+    <path id="Union_5" data-name="Union 5" d="M23.169,22.857,19.574,17.91l-.669.921L21.792,22.8l-.073.053H8.659v0l2.926-4.027-.667-.919L7.322,22.857H0l0,0,3.66-5.038,0,0,7.232-9.955.036.049.022-.03,4.293,5.909,4.307-5.928.036.049.022-.03L30.45,22.8l-.074.053ZM12.2,7.761v0h.183l-.093.128ZM3.63,7.887l-.091-.126,0,0h.183l-.093.128Zm23.243-.024-.076-.1h.04l.074.053-.037.05h0Zm-8.657,0-.076-.1h.04l.073.053-.037.05h0ZM16.574,2.881a2.881,2.881,0,1,1,2.881,2.881A2.881,2.881,0,0,1,16.574,2.881Zm-8.564,0a2.881,2.881,0,1,1,2.881,2.881A2.881,2.881,0,0,1,8.01,2.881Z" transform="translate(329.775 243.534)" fill="url(#linear-gradient)"/>
+    <g id="Group_4480" data-name="Group 4480" transform="translate(325 234.99)">
+      <path id="Subtraction_36" data-name="Subtraction 36" d="M40,40H34.286V38.857h4.571V1.143H34.286V0H5.714V1.143H1.143V38.857H5.714V40H0V0H40V40Z" fill="#121212"/>
+    </g>
+  </g>
+</svg>

package/src/components/Layout/Header/icons.tsx

@@ -1,57 +1,57 @@
-export const AppsIcon = () => {
-  return (
-    <svg
-      id="apps"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-    >
-      <path
-        id="Path_15109"
-        data-name="Path 15109"
-        d="M7,0H4A4,4,0,0,0,0,4V7a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V4A4,4,0,0,0,7,0ZM9,7A2,2,0,0,1,7,9H4A2,2,0,0,1,2,7V4A2,2,0,0,1,4,2H7A2,2,0,0,1,9,4Z"
-        fill="#d4483e"
-      />
-      <path
-        id="Path_15110"
-        data-name="Path 15110"
-        d="M20,0H17a4,4,0,0,0-4,4V7a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
-        fill="#f8d759"
-      />
-      <path
-        id="Path_15111"
-        data-name="Path 15111"
-        d="M7,13H4a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V17A4,4,0,0,0,7,13Zm2,7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2H7a2,2,0,0,1,2,2Z"
-        fill="#88b053"
-      />
-      <path
-        id="Path_15112"
-        data-name="Path 15112"
-        d="M20,13H17a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V17A4,4,0,0,0,20,13Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
-        fill="#4baabe"
-      />
-    </svg>
-  )
-}
-
-export const NotificationIcon = () => {
-  return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="18.125"
-        height="20"
-        viewBox="0 0 18.125 20"
-      >
-        <path
-          id="bell_10_"
-          data-name="bell (10)"
-          d="M18.958,11.384l-1.583-5.7a7.767,7.767,0,0,0-15.064.395L1.085,11.595a4.166,4.166,0,0,0,4.067,5.07H6.08a4.166,4.166,0,0,0,8.166,0h.7a4.166,4.166,0,0,0,4.015-5.281Zm-8.795,6.948a2.5,2.5,0,0,1-2.346-1.666H12.51A2.5,2.5,0,0,1,10.163,18.332Zm6.771-4.32A2.481,2.481,0,0,1,14.944,15H5.152a2.5,2.5,0,0,1-2.44-3.042L3.937,6.444a6.1,6.1,0,0,1,11.832-.31l1.583,5.7a2.481,2.481,0,0,1-.418,2.181Z"
-          transform="translate(-0.986 -0.002)"
-          fill="#121212"
-        />
-      </svg>
-    </>
-  )
-}
+export const AppsIcon = () => {
+  return (
+    <svg
+      id="apps"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path
+        id="Path_15109"
+        data-name="Path 15109"
+        d="M7,0H4A4,4,0,0,0,0,4V7a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V4A4,4,0,0,0,7,0ZM9,7A2,2,0,0,1,7,9H4A2,2,0,0,1,2,7V4A2,2,0,0,1,4,2H7A2,2,0,0,1,9,4Z"
+        fill="#d4483e"
+      />
+      <path
+        id="Path_15110"
+        data-name="Path 15110"
+        d="M20,0H17a4,4,0,0,0-4,4V7a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
+        fill="#f8d759"
+      />
+      <path
+        id="Path_15111"
+        data-name="Path 15111"
+        d="M7,13H4a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V17A4,4,0,0,0,7,13Zm2,7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2H7a2,2,0,0,1,2,2Z"
+        fill="#88b053"
+      />
+      <path
+        id="Path_15112"
+        data-name="Path 15112"
+        d="M20,13H17a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V17A4,4,0,0,0,20,13Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
+        fill="#4baabe"
+      />
+    </svg>
+  )
+}
+
+export const NotificationIcon = () => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18.125"
+        height="20"
+        viewBox="0 0 18.125 20"
+      >
+        <path
+          id="bell_10_"
+          data-name="bell (10)"
+          d="M18.958,11.384l-1.583-5.7a7.767,7.767,0,0,0-15.064.395L1.085,11.595a4.166,4.166,0,0,0,4.067,5.07H6.08a4.166,4.166,0,0,0,8.166,0h.7a4.166,4.166,0,0,0,4.015-5.281Zm-8.795,6.948a2.5,2.5,0,0,1-2.346-1.666H12.51A2.5,2.5,0,0,1,10.163,18.332Zm6.771-4.32A2.481,2.481,0,0,1,14.944,15H5.152a2.5,2.5,0,0,1-2.44-3.042L3.937,6.444a6.1,6.1,0,0,1,11.832-.31l1.583,5.7a2.481,2.481,0,0,1-.418,2.181Z"
+          transform="translate(-0.986 -0.002)"
+          fill="#121212"
+        />
+      </svg>
+    </>
+  )
+}

package/src/components/Layout/Header/index.tsx

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

package/src/components/Layout/Header/styles.tsx

@@ -1,98 +1,98 @@
-import {
-	alpha,
-	AppBar,
-	Box,
-	IconButton,
-	ListItemText,
-	styled,
-	Typography,
-	Link,
-} from '@mui/material'
-
-export const StyledImageWrapper = styled('div')`
-	width: auto;
-	height: 24px;
-	& img {
-		width: 100%;
-		height: 100%;
-		object-fit: contain;
-	}
-`
-
-export const StyledItemText = styled(ListItemText)(({theme}) => ({
-	color: theme.palette.text.primary,
-	transition: '0.2s ease',
-}))
-
-export const StyledAppBar = styled(AppBar)(({theme}) => ({
-	backgroundColor: 'white',
-	boxShadow: '0px 8px 28px rgb(136,136,136, 0.3)',
-}))
-
-export const StyledHeader = styled(Box)(({theme}) => ({
-	boxShadow: '0px 2px 10px #0000001a',
-	backgroundColor: 'white',
-	display: 'flex',
-	alignItems: 'center',
-	justifyContent: 'space-between',
-	'& .actions': {
-		marginRight: '10px',
-		display: 'flex',
-		alignItems: 'center',
-		gap: '14px',
-	},
-}))
-
-export const StyledUser = styled(Box)(({theme}) => ({
-	cursor: 'pointer',
-	borderRadius: '5px',
-	transition: 'background 0.2s ease',
-	padding: '5px 16px',
-	display: 'flex',
-	alignItems: 'center',
-	gap: '8px',
-	'&:hover': {
-		background: theme.palette.secondary.light,
-	},
-}))
-
-export const StyledIconButton = styled(IconButton)({
-	padding: '20px',
-	backgroundColor: 'black',
-	display: 'flex',
-	alignItems: 'center',
-	justifyContent: 'center',
-	borderRadius: '0px',
-})
-
-export const StyledLink = styled(Link)({
-	textDecoration: 'none',
-})
-
-export const StyledDescription = styled(Typography)(({theme}) => ({
-	fontSize: '12px',
-	fontWeight: 600,
-	color: alpha(theme?.palette?.secondary?.lighter, 0.5),
-}))
-
-export const StyledMenuItem = styled(Box)({
-	height: '64px',
-	width: '380px',
-	padding: '40px 20px',
-	transition: 'background ease 0.3s',
-	'&:hover': {
-		background: 'rgba(0, 0, 0, 0.03)',
-	},
-	display: 'flex',
-	alignItems: 'center',
-	gap: '20px',
-})
-
-export const StyledMenuItemContainer = styled(Box)(({theme}) => ({
-	cursor: 'pointer',
-	borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
-	'&:last-of-type': {
-		border: 'none',
-	},
-	padding: '8px 0px',
-}))
+import {
+	alpha,
+	AppBar,
+	Box,
+	IconButton,
+	ListItemText,
+	styled,
+	Typography,
+	Link,
+} from '@mui/material'
+
+export const StyledImageWrapper = styled('div')`
+	width: auto;
+	height: 24px;
+	& img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+`
+
+export const StyledItemText = styled(ListItemText)(({theme}) => ({
+	color: theme.palette.text.primary,
+	transition: '0.2s ease',
+}))
+
+export const StyledAppBar = styled(AppBar)(({theme}) => ({
+	backgroundColor: 'white',
+	boxShadow: '0px 8px 28px rgb(136,136,136, 0.3)',
+}))
+
+export const StyledHeader = styled(Box)(({theme}) => ({
+	boxShadow: '0px 2px 10px #0000001a',
+	backgroundColor: 'white',
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'space-between',
+	'& .actions': {
+		marginRight: '10px',
+		display: 'flex',
+		alignItems: 'center',
+		gap: '14px',
+	},
+}))
+
+export const StyledUser = styled(Box)(({theme}) => ({
+	cursor: 'pointer',
+	borderRadius: '5px',
+	transition: 'background 0.2s ease',
+	padding: '5px 16px',
+	display: 'flex',
+	alignItems: 'center',
+	gap: '8px',
+	'&:hover': {
+		background: theme.palette.secondary.light,
+	},
+}))
+
+export const StyledIconButton = styled(IconButton)({
+	padding: '20px',
+	backgroundColor: 'black',
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	borderRadius: '0px',
+})
+
+export const StyledLink = styled(Link)({
+	textDecoration: 'none',
+})
+
+export const StyledDescription = styled(Typography)(({theme}) => ({
+	fontSize: '12px',
+	fontWeight: 600,
+	color: alpha(theme?.palette?.secondary?.lighter, 0.5),
+}))
+
+export const StyledMenuItem = styled(Box)({
+	height: '64px',
+	width: '380px',
+	padding: '40px 20px',
+	transition: 'background ease 0.3s',
+	'&:hover': {
+		background: 'rgba(0, 0, 0, 0.03)',
+	},
+	display: 'flex',
+	alignItems: 'center',
+	gap: '20px',
+})
+
+export const StyledMenuItemContainer = styled(Box)(({theme}) => ({
+	cursor: 'pointer',
+	borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
+	'&:last-of-type': {
+		border: 'none',
+	},
+	padding: '8px 0px',
+}))

package/src/components/LayoutWrapper.tsx

@@ -1,25 +1,25 @@
-import {
-  StyledLeftNavContainer,
-  StyledMainContentContainer,
-} from "../layouts/Components/styles";
-import SideNav from "./SideNav";
-interface Props {
-  children?: React.ReactNode;
-  menu: any[];
-  sideMenuHeader?: React.ReactNode;
-}
-
-export default function LayoutWrapper({
-  children,
-  menu,
-  sideMenuHeader,
-}: Props) {
-  return (
-    <>
-      <StyledLeftNavContainer>
-        <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
-      </StyledLeftNavContainer>
-      <StyledMainContentContainer>{children}</StyledMainContentContainer>
-    </>
-  );
-}
+import {
+  StyledLeftNavContainer,
+  StyledMainContentContainer,
+} from "../layouts/Components/styles";
+import SideNav from "./SideNav";
+interface Props {
+  children?: React.ReactNode;
+  menu: any[];
+  sideMenuHeader?: React.ReactNode;
+}
+
+export default function LayoutWrapper({
+  children,
+  menu,
+  sideMenuHeader,
+}: Props) {
+  return (
+    <>
+      <StyledLeftNavContainer>
+        <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
+      </StyledLeftNavContainer>
+      <StyledMainContentContainer>{children}</StyledMainContentContainer>
+    </>
+  );
+}

package/src/components/LinearProgress.tsx

@@ -1,19 +1,19 @@
-import {
-	BoxProps,
-	styled,
-	Box,
-	LinearProgress as MuiLinearProgress,
-} from '@mui/material'
-
-export const LinearProgress = styled((props: BoxProps) => (
-	<Box {...props}>
-		<MuiLinearProgress color={'inherit'} sx={{height: '4px'}} />
-	</Box>
-))(({theme}) => ({
-	width: '100%',
-	position: 'fixed',
-	top: 0,
-	left: 0,
-	zIndex: 400,
-	color: theme.palette.primary.main,
-}))
+import {
+	BoxProps,
+	styled,
+	Box,
+	LinearProgress as MuiLinearProgress,
+} from '@mui/material'
+
+export const LinearProgress = styled((props: BoxProps) => (
+	<Box {...props}>
+		<MuiLinearProgress color={'inherit'} sx={{height: '4px'}} />
+	</Box>
+))(({theme}) => ({
+	width: '100%',
+	position: 'fixed',
+	top: 0,
+	left: 0,
+	zIndex: 400,
+	color: theme.palette.primary.main,
+}))

package/src/components/ListItemButton.tsx

@@ -1,94 +1,94 @@
-import {ChevronRight} from '@mui/icons-material'
-import {
-	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
-}
-
-export const ListItemButton = ({
-	isActive,
-	hasChildren,
-	onClick,
-	label,
-	icon: Icon,
-}: Props) => {
-	return (
-		<StyledListItemButton isActive={isActive} onClick={onClick}>
-			{Icon ? (
-				<ListItemIcon>{<Icon />}</ListItemIcon>
-			) : (
-				<Box minWidth={16}></Box>
-			)}
-			<ListItemText primary={label} />
-		</StyledListItemButton>
-	)
-}
-
-export const StyledChevronIcon = styled(ChevronRight)<{open: boolean}>(
-	({theme, open}) => ({
-		transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
-		transition: 'transform 0.2s ease-in-out',
-	})
-)
-
-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',
-	},
-}))
+import {ChevronRight} from '@mui/icons-material'
+import {
+	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
+}
+
+export const ListItemButton = ({
+	isActive,
+	hasChildren,
+	onClick,
+	label,
+	icon: Icon,
+}: Props) => {
+	return (
+		<StyledListItemButton isActive={isActive} onClick={onClick}>
+			{Icon ? (
+				<ListItemIcon>{<Icon />}</ListItemIcon>
+			) : (
+				<Box minWidth={16}></Box>
+			)}
+			<ListItemText primary={label} />
+		</StyledListItemButton>
+	)
+}
+
+export const StyledChevronIcon = styled(ChevronRight)<{open: boolean}>(
+	({theme, open}) => ({
+		transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
+		transition: 'transform 0.2s ease-in-out',
+	})
+)
+
+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',
+	},
+}))