@campxdev/shared 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@campxdev/shared",
-	"version": "0.2.3",
+	"version": "0.2.5",
 	"main": "./exports.ts",
 	"scripts": {
 		"start": "react-scripts start",
@@ -38,6 +38,7 @@
 		"react-table": "^7.8.0",
 		"react-toastify": "^9.0.1",
 		"styled-components": "^5.3.5",
-		"swiper": "^8.1.5"
+		"swiper": "^8.1.5",
+		"typescript": "^4.8.4"
 	}
 }

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

@@ -1,150 +1,150 @@
-import { Box, IconButton, Menu, styled, Typography } from '@mui/material'
-import { AssetsStore } from '@campx/shared'
+import {Box, IconButton, Menu, styled, Typography} from '@mui/material'
+import {AssetsStore} from '../../../shared-state/AssetsStore'
 import CogWheelMenu from './CogWheelMenu'
 import FreshDeskHelpButton from './FreshDeskHelpButton'
-import { StyledHeader, StyledImageWrapper } from './styles'
+import {StyledHeader, StyledImageWrapper} from './styles'
 import UserBox from './UserBox'
-import { Link } from 'react-router-dom'
-import { useState } from 'react'
-import { applications } from './applications'
-import { AppsIcon } from './icons'
+import {Link} from 'react-router-dom'
+import {useState} from 'react'
+import {applications} from './applications'
+import {AppsIcon} from './icons'
 import Notification from './Notification'
 
-export default function AppHeader({ title }: { title?: string }) {
-  const assetState = AssetsStore.useState((s) => s)
+export default function AppHeader({title}: {title?: string}) {
+	const assetState = AssetsStore.useState((s) => s)
 
-  return (
-    <StyledHeader>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
-        <AppsMenu />
+	return (
+		<StyledHeader>
+			<Box sx={{display: 'flex', alignItems: 'center', gap: '20px'}}>
+				<AppsMenu />
 
-        <Link to={'/'}>
-          {title ? (
-            <Typography variant="h1">{title}</Typography>
-          ) : (
-            <StyledImageWrapper>
-              <img src={assetState.logo} />
-            </StyledImageWrapper>
-          )}
-        </Link>
-      </Box>
-      <Box className="actions">
-        <FreshDeskHelpButton />
-        <Notification />
-        <CogWheelMenu />
-        <UserBox />
-      </Box>
-    </StyledHeader>
-  )
+				<Link to={'/'}>
+					{title ? (
+						<Typography variant='h1'>{title}</Typography>
+					) : (
+						<StyledImageWrapper>
+							<img src={assetState.logo} />
+						</StyledImageWrapper>
+					)}
+				</Link>
+			</Box>
+			<Box className='actions'>
+				<FreshDeskHelpButton />
+				<Notification />
+				<CogWheelMenu />
+				<UserBox />
+			</Box>
+		</StyledHeader>
+	)
 }
 
 const AppsMenu = () => {
-  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)
+	}
 
-  return (
-    <Box sx={{ marginRight: '10px' }}>
-      <StyledIconButton onClick={handleClick}>
-        <AppsIcon />
-      </StyledIconButton>
+	return (
+		<Box sx={{marginRight: '10px'}}>
+			<StyledIconButton onClick={handleClick}>
+				<AppsIcon />
+			</StyledIconButton>
 
-      <Menu
-        elevation={2}
-        id="basic-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        MenuListProps={{
-          sx: {
-            padding: 0,
-            margin: 0,
-          },
-        }}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-        sx={{
-          '& .MuiPaper-root': {
-            left: '0px',
-          },
-        }}
-      >
-        <Box sx={{ padding: '1rem 1.5rem' }}>
-          <Typography variant="h6">Switch to</Typography>
-        </Box>
-        <Box>
-          {applications.map((item, index) => (
-            <StyledMenuItemContainer
-              key={index}
-              onClick={() => {
-                handleClose()
-              }}
-            >
-              <StyledMenuItem data={item} />
-            </StyledMenuItemContainer>
-          ))}
-        </Box>
-      </Menu>
-    </Box>
-  )
+			<Menu
+				elevation={2}
+				id='basic-menu'
+				anchorEl={anchorEl}
+				open={open}
+				onClose={handleClose}
+				MenuListProps={{
+					sx: {
+						padding: 0,
+						margin: 0,
+					},
+				}}
+				anchorOrigin={{
+					vertical: 'bottom',
+					horizontal: 'left',
+				}}
+				transformOrigin={{
+					vertical: 'top',
+					horizontal: 'left',
+				}}
+				sx={{
+					'& .MuiPaper-root': {
+						left: '0px',
+					},
+				}}
+			>
+				<Box sx={{padding: '1rem 1.5rem'}}>
+					<Typography variant='h6'>Switch to</Typography>
+				</Box>
+				<Box>
+					{applications.map((item, index) => (
+						<StyledMenuItemContainer
+							key={index}
+							onClick={() => {
+								handleClose()
+							}}
+						>
+							<StyledMenuItem data={item} />
+						</StyledMenuItemContainer>
+					))}
+				</Box>
+			</Menu>
+		</Box>
+	)
 }
 
-const StyledMenuItem = ({ data }) => {
-  return (
-    <StyledMenuitem>
-      <Box>{data.icon}</Box>
-      <Box>
-        <Typography variant="h1">{data?.title}</Typography>
-        <StyledDescription>{data?.description}</StyledDescription>
-      </Box>
-    </StyledMenuitem>
-  )
+const StyledMenuItem = ({data}) => {
+	return (
+		<StyledMenuitem>
+			<Box>{data.icon}</Box>
+			<Box>
+				<Typography variant='h1'>{data?.title}</Typography>
+				<StyledDescription>{data?.description}</StyledDescription>
+			</Box>
+		</StyledMenuitem>
+	)
 }
 
 const StyledIconButton = styled(IconButton)({
-  padding: '20px',
-  backgroundColor: 'black',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '0px',
+	padding: '20px',
+	backgroundColor: 'black',
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	borderRadius: '0px',
 })
 
-const StyledDescription = styled(Typography)(({ theme }) => ({
-  fontSize: '15px',
-  fontWeight: 500,
-  color: theme?.palette?.secondary?.main,
+const StyledDescription = styled(Typography)(({theme}) => ({
+	fontSize: '15px',
+	fontWeight: 500,
+	color: theme?.palette?.secondary?.main,
 }))
 
 const StyledMenuitem = styled(Box)({
-  height: '72px',
-  width: '400px',
-  padding: '40px 20px',
-  '&:hover': {
-    background: 'rgba(0, 0, 0, 0.03)',
-  },
-  display: 'flex',
-  alignItems: 'center',
-  gap: '10px',
+	height: '72px',
+	width: '400px',
+	padding: '40px 20px',
+	'&:hover': {
+		background: 'rgba(0, 0, 0, 0.03)',
+	},
+	display: 'flex',
+	alignItems: 'center',
+	gap: '10px',
 })
 
-const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
-  cursor: 'pointer',
-  borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
-  '&:last-of-type': {
-    border: 'none',
-  },
+const StyledMenuItemContainer = styled(Box)(({theme}) => ({
+	cursor: 'pointer',
+	borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
+	'&:last-of-type': {
+		border: 'none',
+	},
 }))

package/src/components/LinearProgress/LinearProgress.tsx

@@ -1,27 +1,27 @@
-import { BoxProps, styled, Box, LinearProgress } from '@mui/material'
-import { globalStore } from '../../App'
+import {BoxProps, styled, Box, LinearProgress} from '@mui/material'
+import {globalStore} from '../../shared-state/GlobalStore'
 
 export default function LinearIndeterminate() {
-  const loading = globalStore.useState((s) => s).loading
+	const loading = globalStore.useState((s) => s).loading
 
-  if (!loading) return null
-  return <StyledLinearProgress />
+	if (!loading) return null
+	return <StyledLinearProgress />
 }
 
 export const StyledLinearProgress = styled((props: BoxProps) => (
-  <Box {...props}>
-    <LinearProgress
-      color={'inherit'}
-      sx={{
-        height: '3px',
-      }}
-    />
-  </Box>
-))(({ theme }) => ({
-  width: '100%',
-  position: 'fixed',
-  top: '64px',
-  left: 0,
-  zIndex: 400,
-  color: theme.palette.common.yellow,
+	<Box {...props}>
+		<LinearProgress
+			color={'inherit'}
+			sx={{
+				height: '3px',
+			}}
+		/>
+	</Box>
+))(({theme}) => ({
+	width: '100%',
+	position: 'fixed',
+	top: '64px',
+	left: 0,
+	zIndex: 400,
+	color: theme.palette.common.yellow,
 }))

package/src/config/axios.ts

@@ -1,138 +1,137 @@
 import Axios from 'axios'
 import _ from 'lodash'
-import { toast } from 'react-toastify'
-import { globalStore } from '../App'
+import {toast} from 'react-toastify'
+import {globalStore} from '../shared-state/GlobalStore'
 import Cookies from 'js-cookie'
 
 const isDevelopment = process.env.NODE_ENV === 'development'
 const sessionKey = Cookies.get('campx_session_key')
 
 const formatParams = (params) => {
-  return Object.fromEntries(
-    Object.entries(params ?? {})?.map((i) => [
-      i[0],
-      i[1] === '__empty__' ? '' : i[1],
-    ]),
-  )
+	return Object.fromEntries(
+		Object.entries(params ?? {})?.map((i) => [
+			i[0],
+			i[1] === '__empty__' ? '' : i[1],
+		])
+	)
 }
 
 let axios = Axios.create({
-  baseURL: process.env.REACT_APP_API_HOST,
-  withCredentials: true,
-  ...(isDevelopment && {
-    headers: {
-      campx_session_key: sessionKey,
-    },
-  }),
+	baseURL: process.env.REACT_APP_API_HOST,
+	withCredentials: true,
+	...(isDevelopment && {
+		headers: {
+			campx_session_key: sessionKey,
+		},
+	}),
 })
 
 axios.interceptors.request.use(
-  function (config) {
-    const params = formatParams(config?.params)
-    globalStore.update((s) => {
-      s.loading = true
-      s.error.message = ''
-      s.error.statusCode = null
-      s.error.description = ''
-    })
-    return { ...config, params }
-  },
-  function (error) {
-    globalStore.update((s) => {
-      s.loading = true
-    })
-    return Promise.reject(error)
-  },
+	function (config) {
+		const params = formatParams(config?.params)
+		globalStore.update((s) => {
+			s.loading = true
+			s.error.message = ''
+			s.error.statusCode = null
+			s.error.description = ''
+		})
+		return {...config, params}
+	},
+	function (error) {
+		globalStore.update((s) => {
+			s.loading = true
+		})
+		return Promise.reject(error)
+	}
 )
 
 axios.interceptors.response.use(
-  function (response) {
-    globalStore.update((s) => {
-      s.loading = false
-    })
-    return response
-  },
-  function (err) {
-    globalStore.update((s) => {
-      s.loading = false
-    })
+	function (response) {
+		globalStore.update((s) => {
+			s.loading = false
+		})
+		return response
+	},
+	function (err) {
+		globalStore.update((s) => {
+			s.loading = false
+		})
 
-    if (err.message == 'Network Error') {
-      globalStore.update((s) => {
-        s.error = {
-          message: err.message,
-          statusCode: 999,
-          description: 'Please check your network connection',
-        }
-      })
-    } else {
-      const method = err.response.config.method
-      if (method === 'get' || method === 'GET') {
-        setError(err.response.status, err.response.data.message)
-      }
-    }
+		if (err.message == 'Network Error') {
+			globalStore.update((s) => {
+				s.error = {
+					message: err.message,
+					statusCode: 999,
+					description: 'Please check your network connection',
+				}
+			})
+		} else {
+			const method = err.response.config.method
+			if (method === 'get' || method === 'GET') {
+				setError(err.response.status, err.response.data.message)
+			}
+		}
 
-    return Promise.reject(err)
-  },
+		return Promise.reject(err)
+	}
 )
 
-
 export default axios
 
 export const axiosErrorToast = (error: any, fallback?: string) => {
-  const fallbackMessage = fallback ?? 'Something went wrong.'
-  const errorMessage =
-    typeof error?.response?.data?.message !== 'string'
-      ? error?.response?.data?.message?.join('\n') ?? fallbackMessage
-      : error?.response?.data?.message
+	const fallbackMessage = fallback ?? 'Something went wrong.'
+	const errorMessage =
+		typeof error?.response?.data?.message !== 'string'
+			? error?.response?.data?.message?.join('\n') ?? fallbackMessage
+			: error?.response?.data?.message
 
-  return toast.error(errorMessage)
+	return toast.error(errorMessage)
 }
 
 const setError = (statusCode: number, message: string) => {
-  switch (statusCode) {
-    case 401:
-      localStorage.removeItem('token')
-      globalStore.update((s) => {
-        s.error.message = message ?? 'Session Expired!'
-        s.error.statusCode = statusCode
-        s.error.description =
-          'Your session has been expired, Please login to continue'
-      })
-      break
-    case 404:
-      // globalStore.update((s) => {
-      //   s.error.message = message ?? 'Not Found!'
-      //   s.error.statusCode = statusCode
-      //   s.error.description =
-      //     'The resource you are trying to access is not found.'
-      // })
-      toast.error('The resource you are trying to access is not found.')
+	switch (statusCode) {
+		case 401:
+			localStorage.removeItem('token')
+			globalStore.update((s) => {
+				s.error.message = message ?? 'Session Expired!'
+				s.error.statusCode = statusCode
+				s.error.description =
+					'Your session has been expired, Please login to continue'
+			})
+			break
+		case 404:
+			// globalStore.update((s) => {
+			//   s.error.message = message ?? 'Not Found!'
+			//   s.error.statusCode = statusCode
+			//   s.error.description =
+			//     'The resource you are trying to access is not found.'
+			// })
+			toast.error('The resource you are trying to access is not found.')
 
-      break
-    case 403:
-      globalStore.update((s) => {
-        s.error.message = message ?? 'Forbidden!'
-        s.error.statusCode = statusCode
-        s.error.description =
-          'The resource you are trying to access is forbidden.'
-      })
-      break
+			break
+		case 403:
+			globalStore.update((s) => {
+				s.error.message = message ?? 'Forbidden!'
+				s.error.statusCode = statusCode
+				s.error.description =
+					'The resource you are trying to access is forbidden.'
+			})
+			break
 
-    case 400:
-    case 422:
-      globalStore.update((s) => {
-        s.error.message = ''
-        s.error.description = ''
-        s.error.statusCode = null
-      })
-      break
+		case 400:
+		case 422:
+			globalStore.update((s) => {
+				s.error.message = ''
+				s.error.description = ''
+				s.error.statusCode = null
+			})
+			break
 
-    default:
-      globalStore.update((s) => {
-        s.error.message = 'Unknown Network Error!'
-        s.error.statusCode = 999
-        s.error.description = 'Unknown network error occurred!'
-      })
-  }
+		default:
+			globalStore.update((s) => {
+				s.error.message = 'Unknown Network Error!'
+				s.error.statusCode = 999
+				s.error.description = 'Unknown network error occurred!'
+			})
+	}
 }

package/src/permissions/PageWithPermission.tsx

@@ -1,58 +1,58 @@
 import PermissionDeniedPage from './PermissionDeniedPage'
-import { PermissionsStore } from './PermissionsStore'
-import React, { ReactNode, useEffect } from 'react'
-import { globalStore } from '../App'
-import { Box, Typography } from '@mui/material'
-import { useHistory } from '../hooks/useRouter'
+import {PermissionsStore} from './PermissionsStore'
+import React, {ReactNode, useEffect} from 'react'
+import {globalStore} from '../shared-state/GlobalStore'
+import {Box, Typography} from '@mui/material'
+import {useHistory} from '../hooks/useRouter'
 
 const accessIfNoKey = process.env.NODE_ENV === 'development' ? true : false
 
 export default function PageWithPermission({
-  permissionKey,
-  component: Component,
-  children,
-  ...props
+	permissionKey,
+	component: Component,
+	children,
+	...props
 }: {
-  permissionKey: string
-  component?: any
-  children?: any
+	permissionKey: string
+	component?: any
+	children?: any
 }) {
-  const history = useHistory()
-  const errorState = globalStore.useState((s) => s.error)
+	const history = useHistory()
+	const errorState = globalStore.useState((s) => s.error)
 
-  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
 
-  useEffect(() => {
-    globalStore.update((s) => {
-      s.error = {
-        message: '',
-        statusCode: null,
-        description: '',
-      }
-    })
-  }, [history])
+	useEffect(() => {
+		globalStore.update((s) => {
+			s.error = {
+				message: '',
+				statusCode: null,
+				description: '',
+			}
+		})
+	}, [history])
 
-  if (errorState.statusCode) return <ErrorPage />
+	if (errorState.statusCode) return <ErrorPage />
 
-  // if (hasAccess) return Component
-  if (hasAccess) return children
-  return <PermissionDeniedPage />
+	// if (hasAccess) return Component
+	if (hasAccess) return children
+	return <PermissionDeniedPage />
 }
 
 const ErrorPage = () => {
-  const globalState = globalStore.useState((s) => s).error
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <Typography variant="h1" marginTop={'100px'}>
-        {globalState.description}
-      </Typography>
-    </Box>
-  )
+	const globalState = globalStore.useState((s) => s).error
+	return (
+		<Box
+			sx={{
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+			}}
+		>
+			<Typography variant='h1' marginTop={'100px'}>
+				{globalState.description}
+			</Typography>
+		</Box>
+	)
 }

package/publish.sh

@@ -1 +0,0 @@
-mv ./.npmrc ~