@campxdev/shared 0.2.15 → 0.3.1

package/exports.ts

@@ -1,16 +1,15 @@
 export * from './src/components'
 export * from './src/constants'
-export { default as axios, axiosErrorToast } from './src/config/axios'
+export {default as axios, axiosErrorToast} from './src/config/axios'
 
 export * from './src/permissions'
 export * from './src/utils'
 export * from './src/hooks'
-export * from './src/pages'
-export { useModal } from './src/components/DrawerWrapper/DrawerWrapper'
-export { default as MuiThemeProvider } from './src/theme/MuiThemeProvider'
-export { default as ConfirmContextProvider } from './src/components/PopupConfirm/ConfirmContextProvider'
-export { default as DialogProvider } from './src/components/DrawerWrapper/DrawerWrapper'
-export { default as Providers } from './src/contexts/Providers'
+export {useModal} from './src/components/DrawerWrapper/DrawerWrapper'
+export {default as MuiThemeProvider} from './src/theme/MuiThemeProvider'
+export {default as ConfirmContextProvider} from './src/components/PopupConfirm/ConfirmContextProvider'
+export {default as DialogProvider} from './src/components/DrawerWrapper/DrawerWrapper'
+export {default as Providers} from './src/contexts/Providers'
 
 export * from './src/shared-state'
 export * from './src/assets/images'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@campxdev/shared",
-	"version": "0.2.15",
+	"version": "0.3.1",
 	"main": "./exports.ts",
 	"scripts": {
 		"start": "react-scripts start",
@@ -35,6 +35,7 @@
 		"pullstate": "^1.24.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-error-boundary": "^3.1.4",
 		"react-hook-form": "^7.31.1",
 		"react-query": "^3.39.0",
 		"react-router-dom": "^6.4.2",

package/src/assets/images/index.ts

@@ -1,21 +1,3 @@
-const attachmentImage = require('./attachment.svg')
 const avatarImage = require('./avatar.png')
-const welcomeImage = require('./welcomeimage.jpg')
-const taskAttachmentImage = require('./taskAttachment.png')
-const pdfImage = require('./pdf.png')
-const NoPart = require('./NoPart.png')
-const FileBundleImage = require('./Filebundle.png')
-const resultProcessingImage = require('./ResultProcess.png')
 const campxLogoPrimary = require('./campx_logo__full_primary.png')
-
-export {
-	attachmentImage,
-	avatarImage,
-	welcomeImage,
-	taskAttachmentImage,
-	pdfImage,
-	NoPart,
-	resultProcessingImage,
-	FileBundleImage,
-	campxLogoPrimary,
-}
+export {avatarImage, campxLogoPrimary}

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,15 @@
+import {ErrorBoundary as ReactErrorBoundary} from 'react-error-boundary'
+import {QueryErrorResetBoundary} from 'react-query'
+import ErrorFallback from './ErrorFallback'
+
+export default function ErrorBoundary({children}) {
+	return (
+		<QueryErrorResetBoundary>
+			{({reset}) => (
+				<ReactErrorBoundary fallbackRender={ErrorFallback} onReset={reset}>
+					{children}
+				</ReactErrorBoundary>
+			)}
+		</QueryErrorResetBoundary>
+	)
+}

package/src/components/ErrorBoundary/ErrorFallback.tsx

@@ -0,0 +1,39 @@
+import {Alert, Box, Button, styled, Typography} from '@mui/material'
+
+const StyledAlert = styled(Alert)(({theme}) => ({
+	border: `1px solid ${theme.palette.error.main}`,
+	display: 'flex',
+	alignItems: 'center',
+	'& .MuiAlert-message': {
+		padding: 0,
+	},
+	'& .MuiTypography-root': {
+		margin: 0,
+	},
+	position: 'relative',
+	'& .retryBtn': {
+		color: '#661b2a',
+		position: 'absolute',
+		right: 8,
+		top: 8,
+	},
+}))
+
+export default function ErrorFallback({error, resetErrorBoundary}) {
+	return (
+		<Box sx={{padding: '16px'}}>
+			<StyledAlert severity='error'>
+				{error?.message}
+				<Button
+					className='retryBtn'
+					onClick={() => resetErrorBoundary()}
+					size='small'
+					color='error'
+					variant='outlined'
+				>
+					Try Again
+				</Button>
+			</StyledAlert>
+		</Box>
+	)
+}

package/src/components/ErrorBoundary/GlobalNetworkLoadingIndicator.tsx

@@ -0,0 +1,13 @@
+import {Store} from 'pullstate'
+import {LinearProgress} from '../LinearProgress'
+
+export const NetworkStore = new Store({
+	loading: false,
+})
+
+export default function GlobalNetworkLoadingIndicator() {
+	const {loading} = NetworkStore.useState()
+
+	if (loading) return <LinearProgress />
+	if (loading) return null
+}

package/src/components/ErrorBoundary/index.tsx

@@ -0,0 +1 @@
+export {default} from './ErrorBoundary'

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

@@ -19,6 +19,13 @@ const CogWheelMenu = ({menu}) => {
 					history.push(item?.path)
 				},
 			}))}
+			menuProps={{
+				PaperProps: {sx: {top: '64px !important'}},
+				transformOrigin: {
+					horizontal: 'center',
+					vertical: 'bottom',
+				},
+			}}
 		/>
 	)
 }

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

@@ -1,18 +1,8 @@
-import {
-	ExitToAppOutlined,
-	HttpsOutlined,
-	PermIdentityOutlined,
-} from '@mui/icons-material'
-import {Avatar, Box, CircularProgress, Typography} from '@mui/material'
-import {useHistory} from '../../../hooks/useRouter'
+import {Box, Typography} from '@mui/material'
+import {ReactNode} from 'react'
 import {avatarImage} from '../../../assets/images'
 import MenuButton from '../../MenuButton'
 import {StyledUser} from './styles'
-import axios from 'axios'
-import {axiosErrorToast} from '../../../config/axios'
-import {isDevelopment} from '../../../constants/isDevelopment'
-import Cookies from 'js-cookie'
-import {ReactNode, useState} from 'react'
 
 export default function UserBox({
 	username,
@@ -23,50 +13,30 @@ export default function UserBox({
 	profileIcon: string
 	actions: {label: ReactNode; icon?: ReactNode; onClick: any}[]
 }) {
-	const history = useHistory()
-	const [posting, setPosting] = useState(false)
-
-	async function logout() {
-		if (isDevelopment) {
-			Cookies.remove('campx_session_key')
-			window.location.href = '/'
-			return
-		}
-
-		setPosting(true)
-		axios({
-			method: 'POST',
-			baseURL: process.env.REACT_APP_AUTH_HOST,
-			url: '/auth/logout',
-		})
-			.then((res) => {
-				window.location.href = '/'
-			})
-			.catch((err) => {
-				axiosErrorToast('Unable To Logout.')
-			})
-	}
-
 	return (
 		<MenuButton
 			anchor={
 				<Box minWidth={'80px'} textAlign='center'>
-					{!posting ? (
-						<StyledUser>
-							<Avatar src={profileIcon ?? avatarImage} />
-							<Typography variant='h6'>{username}</Typography>
-						</StyledUser>
-					) : (
-						<CircularProgress
-							size={16}
-							sx={{
-								color: ({palette}) => palette.primary.main,
+					<StyledUser>
+						<img
+							src={profileIcon ?? avatarImage}
+							style={{
+								height: '32px',
+								width: '32px',
+								objectFit: 'contain',
+							}}
+							onError={(e: any) => {
+								e.target.src = avatarImage
 							}}
 						/>
-					)}
+						<Typography variant='h6'>{username}</Typography>
+					</StyledUser>
 				</Box>
 			}
 			menu={actions}
+			menuProps={{
+				PaperProps: {sx: {top: '64px !important'}},
+			}}
 		/>
 	)
 }

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

@@ -29,7 +29,6 @@ export const StyledAppBar = styled(AppBar)(({theme}) => ({
 
 export const StyledHeader = styled(Box)(({theme}) => ({
 	boxShadow: '0px 2px 10px #0000001a',
-	// padding: '0 1rem',
 	backgroundColor: 'white',
 	display: 'flex',
 	alignItems: 'center',
@@ -46,10 +45,10 @@ export const StyledUser = styled(Box)(({theme}) => ({
 	cursor: 'pointer',
 	borderRadius: '5px',
 	transition: 'background 0.2s ease',
-	padding: '5px 10px',
+	padding: '5px 16px',
 	display: 'flex',
 	alignItems: 'center',
-	gap: '10px',
+	gap: '8px',
 	'&:hover': {
 		background: theme.palette.secondary.light,
 	},

package/src/components/LinearProgress.tsx

@@ -0,0 +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,
+}))

package/src/components/MenuButton.tsx

@@ -1,105 +1,103 @@
 import {
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  MenuListProps,
-  MenuProps,
-  styled,
+	ListItemIcon,
+	ListItemText,
+	Menu,
+	MenuItem,
+	MenuListProps,
+	MenuProps,
+	styled,
 } from '@mui/material'
-import { cloneElement, ReactNode, useState } from 'react'
+import {cloneElement, ReactNode, useState} from 'react'
 
 interface Props {
-  anchor: any
-  loading?: boolean
-  menu: {
-    label: string | ReactNode
-    icon?: ReactNode
-    onClick: (props?: any) => any
-    component?: ReactNode
-  }[]
-  menuProps?: Omit<MenuProps, 'open'>
-  menuListProps?: MenuListProps
+	anchor: any
+	loading?: boolean
+	menu: {
+		label: string | ReactNode
+		icon?: ReactNode
+		onClick: (props?: any) => any
+		component?: ReactNode
+	}[]
+	menuProps?: Omit<MenuProps, 'open'>
+	menuListProps?: MenuListProps
 }
 
 export default function MenuButton({
-  menu,
-  menuProps,
-  menuListProps,
-  loading = false,
-  anchor,
+	menu,
+	menuProps,
+	menuListProps,
+	loading = false,
+	anchor,
 }: Props) {
-  const [anchorEl, setAnchorEl] = useState<any>(null)
-  const open = Boolean(anchorEl)
+	const [anchorEl, setAnchorEl] = useState<any>(null)
+	const open = Boolean(anchorEl)
 
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget)
-  }
+	const handleClick = (event) => {
+		setAnchorEl(event.currentTarget)
+	}
 
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
+	const handleClose = () => {
+		setAnchorEl(null)
+	}
 
-  const AnchorEl = cloneElement(anchor, {
-    onClick: handleClick,
-  })
+	const AnchorEl = cloneElement(anchor, {
+		onClick: handleClick,
+	})
 
-  return (
-    <>
-      {AnchorEl}
-      <Menu
-        elevation={2}
-        id="basic-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        MenuListProps={{
-          sx: {
-            padding: 0,
-          },
-          ...menuListProps,
-        }}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'right',
-        }}
-        {...menuProps}
-      >
-        {menu.map((item, index) => (
-          <StyledMenuItem
-            sx={{ minWidth: '120px', width: '100%' }}
-            key={index}
-            onClick={() => {
-              handleClose()
-              item.onClick()
-            }}
-          >
-            {item?.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
-            <ListItemText>{item.label}</ListItemText>
-          </StyledMenuItem>
-        ))}
-      </Menu>
-    </>
-  )
+	return (
+		<>
+			{AnchorEl}
+			<Menu
+				elevation={2}
+				id='basic-menu'
+				anchorEl={anchorEl}
+				open={open}
+				onClose={handleClose}
+				MenuListProps={{
+					sx: {padding: 0},
+					...menuListProps,
+				}}
+				anchorOrigin={{
+					vertical: 'bottom',
+					horizontal: 'right',
+				}}
+				transformOrigin={{
+					vertical: 'top',
+					horizontal: 'right',
+				}}
+				{...menuProps}
+			>
+				{menu.map((item, index) => (
+					<StyledMenuItem
+						sx={{minWidth: '120px', width: '100%'}}
+						key={index}
+						onClick={() => {
+							handleClose()
+							item.onClick()
+						}}
+					>
+						{item?.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
+						<ListItemText>{item.label}</ListItemText>
+					</StyledMenuItem>
+				))}
+			</Menu>
+		</>
+	)
 }
 
-const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
-  padding: '10px 20px',
-  display: 'flex',
-  alignItems: 'center',
-  '& .MuiListItemIcon-root': {
-    minWidth: '24px',
-  },
-  '& .MuiSvgIcon-root': {
-    height: '18px',
-    width: '18px',
-  },
-  '& .MuiTypography-root': {
-    fontWeight: 600,
-  },
-  borderBottom: theme.borders.grayLight,
+const StyledMenuItem = styled(MenuItem)(({theme}) => ({
+	padding: '10px 20px',
+	display: 'flex',
+	alignItems: 'center',
+	'& .MuiListItemIcon-root': {
+		minWidth: '24px',
+	},
+	'& .MuiSvgIcon-root': {
+		height: '18px',
+		width: '18px',
+	},
+	'& .MuiTypography-root': {
+		fontWeight: 600,
+	},
+	borderBottom: theme.borders.grayLight,
 }))

package/src/components/Spinner.tsx

@@ -1,18 +1,18 @@
-import { CircularProgress } from '@mui/material'
+import {CircularProgress} from '@mui/material'
 
-function Spinner() {
-  return (
-    <div
-      style={{
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '200px',
-        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

package/src/components/index.ts

@@ -3,56 +3,58 @@ import Chips from './Chips'
 import ImageUpload from './ImageUpload'
 import FloatingContainer from './FloatingContainer'
 import TabsContainer from './Tabs/TabsContainer'
-import { StyledTableContainer } from './StyledTableContainer'
-import { SearchBar } from './SearchBar'
-import { DrawerButton, DialogButton } from './ModalButtons'
+import {StyledTableContainer} from './StyledTableContainer'
+import {SearchBar} from './SearchBar'
+import {DrawerButton, DialogButton} from './ModalButtons'
 import DetailsGrid from './DetailsGrid'
 import AppHeader from './Layout/Header'
 import MenuButton from './MenuButton'
 import StepsHeader from './StepsHeader'
 import UploadDocument from './UploadDocument'
-import { Table as StyledTable } from './Table'
+import {Table as StyledTable} from './Table'
+import ErrorBoundary from './ErrorBoundary'
 
-export { default as Image } from './Image'
-export { default as PageHeader } from './PageHeader'
-export { PageContent } from './PageContent'
-export { default as ActionButton } from './ActionButton'
-export { default as Breadcrumbs } from './Breadcrumbs'
-export { default as Table } from './TableComponent'
-export { default as Spinner } from './Spinner'
-export { default as AutocompleteSearch } from './AutocompleteSearch'
-export { FullCalendarWrapper } from './FullCalendar/FullCalendarWrapper'
-export { default as JsonPreview } from './JsonPreview'
-export { default as LabelValue } from './LabelValue'
-export { default as LinearProgress } from './LinearProgress'
-export { default as MediaRow } from './MediaRow'
-export { default as NoDataIllustration } from './NoDataIllustration'
-export { default as SwitchButton } from './SwitchButton'
-export { default as Tabs } from './Tabs'
-export { default as ToastContainer } from './ToastContainer'
-export { default as Card } from './Card'
-export { default as CardsGrid } from './CardsGrid'
-export { default as DividerHeading } from './DividerHeading'
-export { default as ReactTable } from './TableComponent/ReactTable'
-export { default as TableFooter } from './TableComponent/TableFooter'
-export { default as DropDownButton } from './DropDownButton'
-export { default as useConfirm } from './PopupConfirm/useConfirm'
+export {default as Image} from './Image'
+export {default as PageHeader} from './PageHeader'
+export {PageContent} from './PageContent'
+export {default as ActionButton} from './ActionButton'
+export {default as Breadcrumbs} from './Breadcrumbs'
+export {default as Table} from './TableComponent'
+export {default as Spinner} from './Spinner'
+export {default as AutocompleteSearch} from './AutocompleteSearch'
+export {FullCalendarWrapper} from './FullCalendar/FullCalendarWrapper'
+export {default as JsonPreview} from './JsonPreview'
+export {default as LabelValue} from './LabelValue'
+export {LinearProgress} from './LinearProgress'
+export {default as MediaRow} from './MediaRow'
+export {default as NoDataIllustration} from './NoDataIllustration'
+export {default as SwitchButton} from './SwitchButton'
+export {default as Tabs} from './Tabs'
+export {default as ToastContainer} from './ToastContainer'
+export {default as Card} from './Card'
+export {default as CardsGrid} from './CardsGrid'
+export {default as DividerHeading} from './DividerHeading'
+export {default as ReactTable} from './TableComponent/ReactTable'
+export {default as TableFooter} from './TableComponent/TableFooter'
+export {default as DropDownButton} from './DropDownButton'
+export {default as useConfirm} from './PopupConfirm/useConfirm'
 export {
-  UploadFileDialog,
-  Chips,
-  ImageUpload,
-  FloatingContainer,
-  TabsContainer,
-  StyledTableContainer,
-  SearchBar,
-  DrawerButton,
-  DialogButton,
-  DetailsGrid,
-  AppHeader,
-  MenuButton,
-  StepsHeader,
-  UploadDocument,
-  StyledTable,
+	UploadFileDialog,
+	Chips,
+	ImageUpload,
+	FloatingContainer,
+	TabsContainer,
+	StyledTableContainer,
+	SearchBar,
+	DrawerButton,
+	DialogButton,
+	DetailsGrid,
+	AppHeader,
+	MenuButton,
+	StepsHeader,
+	UploadDocument,
+	StyledTable,
+	ErrorBoundary,
 }
 
 export * from './UploadButton/types'