@campxdev/shared 1.7.7 → 1.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.7.7",
+  "version": "1.7.9",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

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

@@ -13,16 +13,17 @@ import {
   peoplex,
 } from './assets'
 
-import CogWheelMenu from './CogWheelMenu'
-import HelpWidgetButton from '../Tickets/HelpWidget/HelpWidget'
+import { HelpOutline } from '@mui/icons-material'
+import CogWheelMenu from './HeaderActions/CogWheelMenu'
 import {
   StyledHeader,
   StyledImageWrapper,
   StyledLogosWrapper,
   StyledRouterLink,
 } from './styles'
-import UserBox from './UserBox'
-import { HelpOutline } from '@mui/icons-material'
+import UserBox from './HeaderActions/UserBox'
+import FreshDeskHelpButton from './HeaderActions/FreshDeskHelpButton'
+import HeaderActions from './HeaderActions/HeaderActions'
 
 const imageMap = {
   ums: collegex,
@@ -43,6 +44,7 @@ interface AppHeaderProps {
     icon?: ReactNode
     onClick: any
   }[]
+  customHeaderActions?: ReactNode
   cogWheelMenu?: { label: string; path: string }[]
 }
 
@@ -51,15 +53,8 @@ export default function AppHeader({
   fullName,
   userBoxActions = [],
   cogWheelMenu = [],
+  customHeaderActions,
 }: AppHeaderProps) {
-  const handleOpenFreshDeskWidget = () => {
-    try {
-      ;(window as any)?.openFreshDeskWidget()
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error('Error launching Freshdesk')
-    }
-  }
   return (
     <StyledHeader>
       <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
@@ -67,19 +62,15 @@ export default function AppHeader({
         <AppLogo clientLogo={clientLogo} />
       </Box>
       <Box className="actions">
-        {/* <HelpWidgetButton /> */}
-
-        <Button
-          variant="text"
-          color="secondary"
-          startIcon={<HelpOutline />}
-          onClick={handleOpenFreshDeskWidget}
-          sx={{ padding: '20px' }}
-        >
-          Help
-        </Button>
-        {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
-        <UserBox fullName={fullName} actions={userBoxActions} />
+        {customHeaderActions ? (
+          customHeaderActions
+        ) : (
+          <HeaderActions
+            cogWheelMenu={cogWheelMenu}
+            fullName={fullName}
+            userBoxActions={userBoxActions}
+          />
+        )}
       </Box>
     </StyledHeader>
   )

package/src/components/Layout/Header/{CogWheelMenu.tsx → HeaderActions/CogWheelMenu.tsx}

@@ -1,7 +1,7 @@
 import { SettingsOutlined } from '@mui/icons-material'
 import { IconButton } from '@mui/material'
-import { useHistory } from '../../../hooks/useRouter'
-import DropDownButton from '../../DropDownButton/DropDownButton'
+import { useHistory } from '../../../../hooks/useRouter'
+import DropDownButton from '../../../DropDownButton/DropDownButton'
 
 const CogWheelMenu = ({ menu }) => {
   const history = useHistory()
@@ -20,7 +20,7 @@ const CogWheelMenu = ({ menu }) => {
         },
       }))}
       menuProps={{
-        PaperProps: { sx: { top: '64px !important' } },
+        PaperProps: { sx: { top: '56px !important' } },
         transformOrigin: {
           horizontal: 'center',
           vertical: 'top',

package/src/components/Layout/Header/HeaderActions/FreshDeskHelpButton.tsx

@@ -0,0 +1,24 @@
+import { HelpOutline } from '@mui/icons-material'
+import { Button } from '@mui/material'
+
+export default function FreshDeskHelpButton() {
+  const handleOpenFreshDeskWidget = () => {
+    try {
+      ;(window as any)?.openFreshDeskWidget()
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error launching Freshdesk')
+    }
+  }
+  return (
+    <Button
+      variant="text"
+      color="secondary"
+      startIcon={<HelpOutline />}
+      onClick={handleOpenFreshDeskWidget}
+      sx={{ padding: '20px' }}
+    >
+      Help
+    </Button>
+  )
+}

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

@@ -0,0 +1,18 @@
+import { Box } from '@mui/material'
+import UserBox from './UserBox'
+import CogWheelMenu from './CogWheelMenu'
+import FreshDeskHelpButton from './FreshDeskHelpButton'
+
+export default function HeaderActions({
+  cogWheelMenu,
+  fullName,
+  userBoxActions,
+}) {
+  return (
+    <>
+      <FreshDeskHelpButton />
+      {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
+      <UserBox fullName={fullName} actions={userBoxActions} />
+    </>
+  )
+}

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

@@ -0,0 +1,56 @@
+import { ExitToAppOutlined, HttpsOutlined } from '@mui/icons-material'
+import logout from '../../../../utils/logout'
+import ChangePassword from '../../../ChangePassword'
+import DropDownButton from '../../../DropDownButton/DropDownButton'
+import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
+import { StyledAvatar } from '../styles'
+
+const getStartingLetters = (text: string) => {
+  if (!text) return ''
+  return text
+    .split(' ')
+    ?.map((w) => w[0])
+    ?.join('')
+}
+
+export default function UserBox({
+  fullName,
+  actions,
+  customActions = [],
+}: {
+  fullName: string
+  actions: IMenuItemProps[] | []
+  customActions?: IMenuItemProps[] | []
+}) {
+  return (
+    <DropDownButton
+      anchor={({ open }) => (
+        <StyledAvatar onClick={open}>
+          {getStartingLetters(fullName)}
+        </StyledAvatar>
+      )}
+      menu={
+        customActions?.length
+          ? customActions
+          : [
+              ...actions,
+              {
+                label: 'Change Password',
+                actionType: 'dialog',
+                icon: <HttpsOutlined />,
+                content: ({ close }) => <ChangePassword close={close} />,
+                contentTitle: 'Change Password',
+              },
+              {
+                label: 'Logout',
+                icon: <ExitToAppOutlined />,
+                onClick: logout,
+              },
+            ]
+      }
+      menuProps={{
+        PaperProps: { sx: { top: '56px !important' } },
+      }}
+    />
+  )
+}

package/src/components/{TableComponent → Tables/BasicTable}/Table.tsx

@@ -10,12 +10,12 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-  Typography,
 } from '@mui/material'
 import _ from 'lodash'
 import { useEffect, useState } from 'react'
-import Spinner from '../Spinner'
-import { SortAscIcon, SortDescIcon, SortIcon } from './Icons'
+import Spinner from '../../Spinner'
+import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
+import NoRecordsFound from '../common/NoRecordsFound'
 import TableFooter from './TableFooter'
 
 export interface ColumnProps {
@@ -88,7 +88,7 @@ export default function Table({
   }, [sort])
 
   return (
-    <TableContainer>
+    <StyledTableContainer>
       <>
         <MuiTable>
           <TableHead>
@@ -156,13 +156,9 @@ export default function Table({
                   ))}
                 </TableBody>
               ) : (
-                <Box>
-                  {dataSource && (
-                    <Typography sx={{ padding: '10px' }}>
-                      No Records Found !..
-                    </Typography>
-                  )}
-                </Box>
+                <>
+                  <NoRecordsFound colLength={columns?.length} />
+                </>
               )}
             </>
           ) : (
@@ -181,10 +177,15 @@ export default function Table({
           />
         )}
       </>
-    </TableContainer>
+    </StyledTableContainer>
   )
 }
 
+const StyledTableContainer = styled(TableContainer)(({ theme }) => ({
+  width: '100%',
+  overflowX: 'auto',
+}))
+
 const StyledTableRow = styled(TableRow, {
   shouldForwardProp: (prop) => prop !== 'canRowClick',
 })<{ canRowClick: boolean }>(({ canRowClick }) => ({

package/src/components/{TableComponent/TableFooter → Tables/BasicTable}/TableFooter.tsx

@@ -1,6 +1,7 @@
 import { Box, Typography } from '@mui/material'
 import DropDownButton from '../../DropDownButton/DropDownButton'
-import { StyledPagination, StyledTableFooter } from '../styles'
+import { StyledPagination, StyledTableFooter } from '../common/styles'
+import TableStats from '../common/TableStats'
 
 interface TableFooterProps {
   totalCount: number
@@ -39,25 +40,6 @@ export default function TableFooter({
   )
 }
 
-export const TableStats = ({
-  limit,
-  totalCount,
-  page,
-}: {
-  limit: number
-  page: number
-  totalCount: number
-}) => {
-  const pageStart = (page - 1) * limit + 1
-  const pageEnd = page * limit <= totalCount ? page * limit : totalCount
-
-  return (
-    <Box>
-      <Typography variant="subtitle1">{`${pageStart} - ${pageEnd} of ${totalCount}`}</Typography>
-    </Box>
-  )
-}
-
 const LimitField = ({ handlePageLimit, limit }) => {
   return (
     <Box>

package/src/components/{TableComponent → Tables/ReactTable}/BatchActionsHeader.tsx

@@ -1,10 +1,10 @@
 import { Box, Typography } from '@mui/material'
-import DropDownButton from '../DropDownButton/DropDownButton'
+import DropDownButton from '../../DropDownButton'
 import {
   StyledActionIconButton,
   StyledActionsRow,
   StyledTableActionsHeader,
-} from './styles'
+} from '../common/styles'
 
 export default function BatchActionsHeader({
   selectedRowIds,

package/src/components/{TableComponent → Tables/ReactTable}/ReactTable.tsx

@@ -14,16 +14,16 @@ import {
 import { useEffect, useMemo, useState } from 'react'
 import { usePagination, useRowSelect, useTable } from 'react-table'
 import BatchActionsHeader from './BatchActionsHeader'
-import { SortAscIcon, SortDescIcon, SortIcon } from './Icons'
+import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
 import { RenderTableBody } from './RenderTableBody'
 import {
   StyledLimitBox,
   StyledLimitMenu,
   StyledPagination,
   StyledTableFooter,
-} from './styles'
-import { TableStats } from './TableFooter/TableFooter'
-import { ColumnProps, Sort, TableProps } from './types'
+} from '../common/styles'
+import { ColumnProps, Sort, TableProps } from '../common/types'
+import TableStats from '../common/TableStats'
 
 type ReactTableCell = {
   Header: any
@@ -73,7 +73,7 @@ const getTableCol = (headerItem: ColumnProps) => {
   return col
 }
 
-export default function TableComponent({
+export default function ReactTable({
   columns,
   dataSource,
   loading,

package/src/components/{TableComponent → Tables/ReactTable}/RenderTableBody.tsx

@@ -1,7 +1,7 @@
 import { Box, TableBody, TableCell, Typography } from '@mui/material'
-import Spinner from '../Spinner'
-import noDataImage from './no-data-illu.svg'
-import { StyledTableRow } from './styles'
+import Spinner from '../../Spinner'
+import { StyledTableRow } from '../common/styles'
+import NoRecordsFound from '../common/NoRecordsFound'
 
 export const RenderTableBody = ({
   getTableBodyProps,
@@ -19,26 +19,7 @@ export const RenderTableBody = ({
     )
 
   if (!loading && rows?.length < 1)
-    return (
-      <TableCell colSpan={colLength}>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <img
-            style={{ width: '200px', height: 'auto', textAlign: 'center' }}
-            src={noDataImage}
-          />
-          <Typography variant="h6" align="center">
-            No Records Found
-          </Typography>
-        </Box>
-      </TableCell>
-    )
+    return <NoRecordsFound colLength={colLength} />
 
   return (
     <TableBody {...getTableBodyProps()}>

package/src/components/Tables/ReactTable/index.tsx

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

package/src/components/Tables/common/NoRecordsFound.tsx

@@ -0,0 +1,27 @@
+import { Box, TableCell, Typography } from '@mui/material'
+import noDataImage from './no-data-illu.svg'
+
+const NoRecordsFound = ({ colLength }) => {
+  return (
+    <TableCell colSpan={colLength}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <img
+          style={{ width: '200px', height: 'auto', textAlign: 'center' }}
+          src={noDataImage}
+        />
+        <Typography variant="h6" align="center">
+          No Records Found
+        </Typography>
+      </Box>
+    </TableCell>
+  )
+}
+
+export default NoRecordsFound

package/src/components/Tables/common/TableStats.tsx

@@ -0,0 +1,22 @@
+import { Box, Typography } from '@mui/material'
+
+const TableStats = ({
+  limit,
+  totalCount,
+  page,
+}: {
+  limit: number
+  page: number
+  totalCount: number
+}) => {
+  const pageStart = (page - 1) * limit + 1
+  const pageEnd = page * limit <= totalCount ? page * limit : totalCount
+
+  return (
+    <Box>
+      <Typography variant="subtitle1">{`${pageStart} - ${pageEnd} of ${totalCount}`}</Typography>
+    </Box>
+  )
+}
+
+export default TableStats

package/src/components/index.ts

@@ -29,6 +29,7 @@ import FilterButton from './FilterComponents/FilterButton'
 import Helmet from './Layout/Helmet'
 import NavigationTabs from './Tabs/NavigationTabs'
 import GlobalNetworkLoadingIndicator from './ErrorBoundary/GlobalNetworkLoadingIndicator'
+import UserBox from './Layout/Header/HeaderActions/UserBox'
 import { CustomDialog } from './ModalButtons/DialogButton'
 import { CustomDrawer } from './ModalButtons/DrawerButton'
 export { default as Image } from './Image'
@@ -36,7 +37,7 @@ 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 Table } from './Tables/BasicTable'
 export { default as Spinner } from './Spinner'
 export { default as AutocompleteSearch } from './AutocompleteSearch'
 export { default as JsonPreview } from './JsonPreview'
@@ -50,8 +51,8 @@ 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 ReactTable } from './Tables/ReactTable'
+export { default as TableFooter } from './Tables/BasicTable/TableFooter'
 export { default as DropDownButton } from './DropDownButton'
 export { default as useConfirm } from './PopupConfirm/useConfirm'
 
@@ -90,6 +91,7 @@ export {
   CustomDialog,
   CustomDrawer,
   GlobalNetworkLoadingIndicator,
+  UserBox,
 }
 
 export * from './UploadButton/types'

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

@@ -1,61 +0,0 @@
-import {
-  ConfirmationNumberOutlined,
-  ExitToAppOutlined,
-  HttpsOutlined,
-} from '@mui/icons-material'
-import ConfirmationNumberOutlinedIcon from '@mui/icons-material/ConfirmationNumberOutlined'
-import { ReactNode } from 'react'
-import logout from '../../../utils/logout'
-import ChangePassword from '../../ChangePassword'
-import DropDownButton from '../../DropDownButton/DropDownButton'
-import { IMenuItemProps } from '../../DropDownButton/DropdownMenuItem'
-import { DialogButton } from '../../ModalButtons'
-import MyTickets from '../Tickets/MyTickets'
-import { StyledAvatar } from './styles'
-
-const getStartingLetters = (text: string) => {
-  if (!text) return ''
-  return text
-    .split(' ')
-    ?.map((w) => w[0])
-    ?.join('')
-}
-
-export default function UserBox({
-  fullName,
-  actions,
-}: {
-  fullName: string
-  actions: IMenuItemProps[] | []
-}) {
-  return (
-    <>
-      <DropDownButton
-        anchor={({ open }) => (
-          <StyledAvatar onClick={open}>
-            {getStartingLetters(fullName)}
-          </StyledAvatar>
-        )}
-        menu={[
-          ...actions,
-
-          {
-            label: 'Change Password',
-            actionType: 'dialog',
-            icon: <HttpsOutlined />,
-            content: ({ close }) => <ChangePassword close={close} />,
-            contentTitle: 'Change Password',
-          },
-          {
-            label: 'Logout',
-            icon: <ExitToAppOutlined />,
-            onClick: logout,
-          },
-        ]}
-        menuProps={{
-          PaperProps: { sx: { top: '64px !important' } },
-        }}
-      />
-    </>
-  )
-}

package/src/components/TableComponent/TableFooter/index.tsx

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

package/src/components/TableComponent/TableFooter/styles.tsx

@@ -1,28 +0,0 @@
-import { Box, Pagination, styled } from '@mui/material'
-
-export const StyledTableStats = styled(Box)(({}) => ({}))
-
-export const StyledTableFooter = styled(Box)(({ theme }) => ({
-  paddingTop: '1rem',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-}))
-
-export const StyledPagination = styled(Pagination)(({ theme }) => ({
-  '& .MuiPaginationItem-root': {
-    border: 'none',
-    background: theme.palette.secondary.dark,
-  },
-  '& .MuiPaginationItem-previousNext': {
-    border: theme.borders.grayLight,
-    background: theme.palette.common.white,
-  },
-  '& .Mui-selected': {
-    border: `2px solid ${theme.palette.common.yellow}`,
-  },
-  '& .MuiPaginationItem-ellipsis': {
-    background: theme.palette.common.white,
-  },
-}))