@campxdev/shared 1.3.1 → 1.4.0

package/src/components/TableComponent/ReactTable.tsx

@@ -13,7 +13,6 @@ import {
 } from '@mui/material'
 import { useEffect, useMemo, useState } from 'react'
 import { usePagination, useRowSelect, useTable } from 'react-table'
-import ErrorBoundary from '../ErrorBoundary'
 import BatchActionsHeader from './BatchActionsHeader'
 import { SortAscIcon, SortDescIcon, SortIcon } from './Icons'
 import { RenderTableBody } from './RenderTableBody'
@@ -74,6 +73,7 @@ export default function TableComponent({
   select = {
     enable: false,
   },
+  onRowClick,
 }: TableProps) {
   const [sort, setSort] = useState<Sort>({})
 
@@ -97,7 +97,6 @@ export default function TableComponent({
     pageCount,
     gotoPage,
     setPageSize,
-    selectedFlatRows,
     toggleAllRowsSelected,
     state: { pageIndex, pageSize, selectedRowIds },
   } = useTable(
@@ -217,6 +216,7 @@ export default function TableComponent({
           ))}
         </TableHead>
         <RenderTableBody
+          onRowClick={onRowClick}
           colLength={columns?.length}
           loading={loading || refetching}
           getTableBodyProps={getTableBodyProps}

package/src/components/TableComponent/RenderTableBody.tsx

@@ -9,6 +9,7 @@ export const RenderTableBody = ({
   rows,
   loading,
   colLength,
+  onRowClick,
 }) => {
   if (loading)
     return (
@@ -45,6 +46,7 @@ export const RenderTableBody = ({
         prepareRow(row)
         return (
           <StyledTableRow
+            onClick={onRowClick && onRowClick}
             key={index}
             {...row.getRowProps()}
             isSelected={row?.isSelected}

package/src/components/TableComponent/Table.tsx

@@ -0,0 +1,200 @@
+import {
+  alpha,
+  Box,
+  IconButton,
+  ListItemIcon,
+  styled,
+  Table as MuiTable,
+  TableBody,
+  TableCell,
+  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 TableFooter from './TableFooter'
+
+export interface ColumnProps {
+  dataIndex: string
+  key: string
+  title: any
+  render?: (cellData: any, row: any, index: number) => any
+  textColor?: string
+  sort?: boolean
+  width?: string //pixels
+}
+
+interface TableProps {
+  columns: Array<ColumnProps>
+  rowKey?: string
+  dataSource?: any[]
+  loading?: boolean
+  onRowClick?: (row: any) => void
+  pagination?: {
+    page: number
+    limit: number
+    totalCount: number
+    onChange: (v: number) => void
+    onChangeLimit?: (v: number) => void
+  }
+  onSort?: (sort: any) => void
+  dense?: boolean
+}
+
+type Order = 'asc' | 'desc' | ''
+type Sort = {}
+
+export default function Table({
+  columns,
+  dataSource,
+  onRowClick,
+  pagination,
+  loading,
+  onSort,
+  dense = false,
+}: TableProps) {
+  const [sort, setSort] = useState<Sort>({})
+
+  const handleSortClick = (sortBykey) => {
+    setSort((prev) => {
+      if (prev[sortBykey]) {
+        if (prev[sortBykey] === 'desc') return { ...prev, [sortBykey]: 'asc' }
+        if (prev[sortBykey] === 'asc') {
+          delete prev[sortBykey]
+          return { ...prev }
+        }
+      } else {
+        return {
+          ...prev,
+          [sortBykey]: 'desc',
+        }
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (!onSort) return
+
+    onSort({
+      sortBy: Object.keys(sort).join(','),
+      sortOrder: Object.keys(sort)
+        .map((item) => sort[item])
+        .join(','),
+    })
+  }, [sort])
+
+  return (
+    <TableContainer>
+      <>
+        <MuiTable>
+          <TableHead>
+            <TableRow>
+              {columns.map((col, index) => (
+                <TableCell
+                  key={index}
+                  sx={{
+                    ...(col?.width && {
+                      width: col?.width,
+                    }),
+                  }}
+                >
+                  <>
+                    <Box sx={{ fontWeight: 600, fontSize: '14px' }}>
+                      {' '}
+                      {col.title}
+                    </Box>
+                  </>
+                  {col.sort && (
+                    <IconButton onClick={() => handleSortClick(col.dataIndex)}>
+                      <ListItemIcon>
+                        {sort[col.dataIndex] === 'asc' ? (
+                          <SortAscIcon />
+                        ) : sort[col.dataIndex] === 'desc' ? (
+                          <SortDescIcon />
+                        ) : (
+                          <SortIcon />
+                        )}
+                      </ListItemIcon>
+                    </IconButton>
+                  )}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          {!loading ? (
+            <>
+              {dataSource?.length ? (
+                <TableBody>
+                  {dataSource?.map((row, index) => (
+                    <StyledTableRow
+                      canRowClick={!!onRowClick}
+                      hover={!!onRowClick}
+                      key={index}
+                      onClick={() => {
+                        return onRowClick && onRowClick(row)
+                      }}
+                    >
+                      {columns.map((col, colIndex) => (
+                        <TableCell
+                          sx={{
+                            color: col.textColor,
+                            padding: dense ? '10px' : '15px',
+                            font: 'avenir',
+                            fontSize: '14px',
+                          }}
+                          key={colIndex}
+                        >
+                          <>
+                            {col?.render
+                              ? col.render(row[col.dataIndex], row, index)
+                              : _.get(row, col.dataIndex)}
+                          </>
+                        </TableCell>
+                      ))}
+                    </StyledTableRow>
+                  ))}
+                </TableBody>
+              ) : (
+                <Box>
+                  {dataSource && (
+                    <Typography sx={{ padding: '10px' }}>
+                      No Records Found !..
+                    </Typography>
+                  )}
+                </Box>
+              )}
+            </>
+          ) : (
+            <Spinner />
+          )}
+        </MuiTable>
+      </>
+      <>
+        {pagination && (
+          <TableFooter
+            page={pagination.page}
+            limit={pagination.limit}
+            totalCount={pagination.totalCount}
+            handlePagination={pagination.onChange}
+            handlePageLimit={pagination.onChangeLimit}
+          />
+        )}
+      </>
+    </TableContainer>
+  )
+}
+
+const StyledTableRow = styled(TableRow, {
+  shouldForwardProp: (prop) => prop !== 'canRowClick',
+})<{ canRowClick: boolean }>(({ canRowClick }) => ({
+  ...(canRowClick && {
+    cursor: 'pointer',
+    '&.MuiTableRow-hover:hover': {
+      backgroundColor: alpha('#f2f2f2', 0.4),
+    },
+  }),
+}))

package/src/components/TableComponent/index.tsx

@@ -1,226 +1 @@
-import {
-  alpha,
-  Box,
-  IconButton,
-  ListItemIcon,
-  styled,
-  Table as MuiTable,
-  TableBody,
-  TableCell,
-  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 TableFooter from './TableFooter'
-
-export interface ColumnProps {
-  dataIndex: string
-  key: string
-  title: any
-  render?: (cellData: any, row: any, index: number) => any
-  textColor?: string
-  sort?: boolean
-  width?: string //pixels
-}
-
-interface TableProps {
-  columns: Array<ColumnProps>
-  rowKey?: string
-  dataSource?: any[]
-  loading?: boolean
-  onRowClick?: (row: any) => void
-  pagination?: {
-    page: number
-    limit: number
-    totalCount: number
-    onChange: (v: number) => void
-    onChangeLimit?: (v: number) => void
-  }
-  onSort?: (sort: any) => void
-  dense?: boolean
-}
-
-type Order = 'asc' | 'desc' | ''
-type Sort = {}
-
-export default function Table({
-  columns,
-  dataSource,
-  onRowClick,
-  pagination,
-  loading,
-  onSort,
-  dense = false,
-}: TableProps) {
-  const [sort, setSort] = useState<Sort>({})
-
-  const handleSortClick = (sortBykey) => {
-    setSort((prev) => {
-      if (prev[sortBykey]) {
-        if (prev[sortBykey] === 'desc') return { ...prev, [sortBykey]: 'asc' }
-        if (prev[sortBykey] === 'asc') {
-          delete prev[sortBykey]
-          return { ...prev }
-        }
-      } else {
-        return {
-          ...prev,
-          [sortBykey]: 'desc',
-        }
-      }
-    })
-  }
-
-  useEffect(() => {
-    if (!onSort) return
-
-    onSort({
-      sortBy: Object.keys(sort).join(','),
-      sortOrder: Object.keys(sort)
-        .map((item) => sort[item])
-        .join(','),
-    })
-  }, [sort])
-
-  return (
-    <TableContainer>
-      <>
-        <MuiTable>
-          <TableHead>
-            <TableRow>
-              {columns.map((col, index) => (
-                <TableCell
-                  key={index}
-                  sx={{
-                    ...(col?.width && {
-                      width: col?.width,
-                    }),
-                  }}
-                >
-                  <>
-                    <Box sx={{ fontWeight: 600, fontSize: '14px' }}>
-                      {' '}
-                      {col.title}
-                    </Box>
-                  </>
-                  {col.sort && (
-                    <IconButton onClick={() => handleSortClick(col.dataIndex)}>
-                      <ListItemIcon>
-                        {sort[col.dataIndex] === 'asc' ? (
-                          <SortAscIcon />
-                        ) : sort[col.dataIndex] === 'desc' ? (
-                          <SortDescIcon />
-                        ) : (
-                          <SortIcon />
-                        )}
-                      </ListItemIcon>
-                    </IconButton>
-                  )}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          {!loading ? (
-            <>
-              {dataSource?.length ? (
-                <TableBody>
-                  {dataSource?.map((row, index) => (
-                    <StyledTableRow
-                      canRowClick={!!onRowClick}
-                      hover={!!onRowClick}
-                      key={index}
-                      onClick={() => {
-                        return onRowClick && onRowClick(row)
-                      }}
-                    >
-                      {columns.map((col, colIndex) => (
-                        <TableCell
-                          sx={{
-                            color: col.textColor,
-                            padding: dense ? '10px' : '15px',
-                            font: 'avenir',
-                            fontSize: '14px',
-                          }}
-                          key={colIndex}
-                        >
-                          <>
-                            {col?.render
-                              ? col.render(row[col.dataIndex], row, index)
-                              : _.get(row, col.dataIndex)}
-                          </>
-                        </TableCell>
-                      ))}
-                    </StyledTableRow>
-                  ))}
-                </TableBody>
-              ) : (
-                <Box>
-                  {dataSource && (
-                    <Typography sx={{ padding: '10px' }}>
-                      No Records Found !..
-                    </Typography>
-                  )}
-                </Box>
-              )}
-            </>
-          ) : (
-            <Spinner />
-          )}
-        </MuiTable>
-      </>
-      <>
-        {pagination && (
-          <TableFooter
-            page={pagination.page}
-            limit={pagination.limit}
-            totalCount={pagination.totalCount}
-            handlePagination={pagination.onChange}
-            handlePageLimit={pagination.onChangeLimit}
-          />
-        )}
-      </>
-    </TableContainer>
-  )
-}
-
-// const StyledSortButton = styled(IconButton)<{
-//   sortOrder: Order
-//   dataIndex: string
-// }>(({ theme, sortOrder, dataIndex }) => ({
-//   marginLeft: '10px',
-//   ...(sortOrder === '' && {
-//     '& .MuiSvgIcon-root': {
-//       // visibility: 'hidden',
-//     },
-//     // '&:hover .MuiSvgIcon-root': {
-//     //   visibility: 'visible',
-//     //   opacity: 0.4,
-//     // },
-//     transition: 'transform 1s ease-in-out',
-//   }),
-//   ...(sortOrder === 'asc' && {
-//     transition: 'transform 1s ease-in-out',
-//   }),
-//   ...(sortOrder === 'desc' && {
-//     '& .MuiSvgIcon-root': {
-//       transform: 'rotate(180deg)',
-//     },
-//     transition: 'transform 1s ease-in-out',
-//   }),
-// }))
-
-const StyledTableRow = styled(TableRow)<{ canRowClick: boolean }>(
-  ({ theme, canRowClick }) => ({
-    ...(canRowClick && {
-      cursor: 'pointer',
-      '&.MuiTableRow-hover:hover': {
-        backgroundColor: alpha('#f2f2f2', 0.4),
-      },
-    }),
-  }),
-)
+export { default } from './Table'

package/src/components/TableComponent/styles.tsx

@@ -37,11 +37,11 @@ export const StyledPagination = styled(Pagination)(({ theme }) => ({
   },
 }))
 
-export const StyledTableRow = styled(TableRow)<{ isSelected?: boolean }>(
-  ({ theme, isSelected }) => ({
-    background: isSelected && alpha(theme.palette.primary.main, 0.07),
-  }),
-)
+export const StyledTableRow = styled(TableRow, {
+  shouldForwardProp: (prop) => prop !== 'onRowClick',
+})<{ isSelected?: boolean }>(({ theme, isSelected }) => ({
+  background: isSelected && alpha(theme.palette.primary.main, 0.07),
+}))
 
 export const StyledActionsRow = styled(Box)(({ theme }) => ({
   display: 'flex',
@@ -108,10 +108,7 @@ export const StyledLimitMenu = styled((props: MenuProps) => (
       padding: '0',
     },
     '& .MuiMenuItem-root': {
-      fontFamily: 'Avenir',
-      fontSize: '14px',
-      fontWeight: 'bold',
-      height: '35px',
+      height: '40px',
       borderBottom: theme.borders.grayLight,
       align: 'center',
       '& .MuiSvgIcon-root': {

package/src/theme/muiTheme.ts

@@ -1,5 +1,4 @@
 import { alpha, darken, lighten } from '@mui/material'
-import { red } from '@mui/material/colors'
 import { createTheme } from '@mui/material/styles'
 import { customCssBaseline } from './customCssBaseline'
 
@@ -90,7 +89,7 @@ const muiTheme = createTheme({
       blue: themeColors.offsetBlue,
     },
     error: {
-      main: red.A400,
+      main: '#BC2C3D',
     },
     text: {
       primary: '#121212',
@@ -157,12 +156,13 @@ const muiTheme = createTheme({
       styleOverrides: {
         root: {
           fontFamily: SECONDARY_FONT,
-          height: '50px',
+          height: '40px',
           fontSize: '14px',
           padding: '10px 40px',
           textTransform: 'capitalize',
           fontWeight: 600,
           borderRadius: borderRadius.small,
+          flexShrink: 0,
           '&.MuiButton-sizeSmall': {
             padding: '6px 8px',
             height: '40px',
@@ -172,6 +172,10 @@ const muiTheme = createTheme({
       },
     },
     MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+        disableTouchRipple: true,
+      },
       styleOverrides: {
         root: {
           fontFamily: SECONDARY_FONT,
@@ -180,19 +184,36 @@ const muiTheme = createTheme({
         },
       },
     },
-    MuiOutlinedInput: {
+    MuiInputBase: {
       styleOverrides: {
         root: {
-          fontSize: '14px',
-          minHeight: '50px',
-          borderRadius: borderRadius.large,
+          height: '50px',
+          borderRadius: '10px',
+          '& input': {
+            padding: '10px 14px',
+            fontSize: '15px',
+            boxSizing: 'border-box',
+            height: '50px',
+          },
           '&.MuiInputBase-sizeSmall': {
-            minHeight: '30px',
+            borderRadius: '6px',
+            height: '40px',
+            '& input': { height: '40px' },
+            '& fieldset': { height: '40px' },
           },
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: borderRadius.large,
           '& .MuiInputAdornment-positionEnd.MuiInputAdornment-outlined': {
             paddingRight: 2,
           },
           '& .MuiOutlinedInput-notchedOutline': {
+            top: 1,
+            height: '50px',
             borderColor: alpha(colors.common.black, 0.15),
             '& legend': {
               '& > span': {
@@ -214,6 +235,32 @@ const muiTheme = createTheme({
         },
       },
     },
+    MuiCheckbox: {
+      defaultProps: {
+        disableRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          '& .MuiSvgIcon-root': {
+            width: '18px',
+            height: '18px',
+          },
+        },
+      },
+    },
+    MuiFormControl: {
+      styleOverrides: {
+        root: {
+          '& .MuiFormHelperText-root': {
+            fontStyle: 'oblique',
+            marginTop: '10px',
+            fontSize: '13px',
+            fontWeight: 600,
+            textAlign: 'right',
+          },
+        },
+      },
+    },
     MuiAutocomplete: {
       styleOverrides: {
         tag: {
@@ -404,6 +451,26 @@ const muiTheme = createTheme({
         },
       },
     },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          fontWeight: 500,
+          fontFamily: SECONDARY_FONT,
+          fontSize: '14px',
+        },
+      },
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        root: {
+          '& .MuiTypography-root': {
+            fontWeight: 500,
+            fontFamily: SECONDARY_FONT,
+            fontSize: '14px',
+          },
+        },
+      },
+    },
     MuiCardHeader: {
       styleOverrides: {
         root: {
@@ -479,10 +546,7 @@ const muiTheme = createTheme({
     },
     MuiRadio: {
       defaultProps: {
-        size: 'small',
-      },
-      styleOverrides: {
-        root: {},
+        disableRipple: true,
       },
     },
     MuiCssBaseline: {