@campxdev/shared 0.5.21 → 0.5.22

package/src/components/TableComponent/index.tsx

@@ -1,186 +1,186 @@
 import {
-	alpha,
-	Box,
-	IconButton,
-	ListItemIcon,
-	styled,
-	Table as MuiTable,
-	TableBody,
-	TableCell,
-	TableContainer,
-	TableHead,
-	TableRow,
-	Typography,
+  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 { useEffect, useState } from 'react'
 import Spinner from '../Spinner'
-import {SortAscIcon, SortDescIcon, SortIcon} from './Icons'
+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
+  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
+  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,
+  columns,
+  dataSource,
+  onRowClick,
+  pagination,
+  loading,
+  onSort,
+  dense = false,
 }: TableProps) {
-	const [sort, setSort] = useState<Sort>({})
+  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',
-				}
-			}
-		})
-	}
+  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
+  useEffect(() => {
+    if (!onSort) return
 
-		onSort({
-			sortBy: Object.keys(sort).join(','),
-			sortOrder: Object.keys(sort)
-				.map((item) => sort[item])
-				.join(','),
-		})
-	}, [sort])
+    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>{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',
-													}}
-													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>
-	)
+  return (
+    <TableContainer>
+      <>
+        <MuiTable>
+          <TableHead>
+            <TableRow>
+              {columns.map((col, index) => (
+                <TableCell
+                  key={index}
+                  sx={{
+                    ...(col?.width && {
+                      width: col?.width,
+                    }),
+                  }}
+                >
+                  <>
+                    <Box>{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',
+                          }}
+                          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)<{
@@ -209,13 +209,13 @@ export default function Table({
 //   }),
 // }))
 
-const StyledTableRow = styled(TableRow)<{canRowClick: boolean}>(
-	({theme, canRowClick}) => ({
-		...(canRowClick && {
-			cursor: 'pointer',
-			'&.MuiTableRow-hover:hover': {
-				backgroundColor: alpha('#f2f2f2', 0.4),
-			},
-		}),
-	})
+const StyledTableRow = styled(TableRow)<{ canRowClick: boolean }>(
+  ({ theme, canRowClick }) => ({
+    ...(canRowClick && {
+      cursor: 'pointer',
+      '&.MuiTableRow-hover:hover': {
+        backgroundColor: alpha('#f2f2f2', 0.4),
+      },
+    }),
+  }),
 )

package/src/components/TableComponent/react-table-config.d.ts

@@ -51,9 +51,8 @@ import {
 declare module 'react-table' {
   // take this file as-is, or comment out the sections that don't apply to your plugin configuration
 
-  export interface TableOptions<
-    D extends Record<string, unknown>,
-  > extends UseExpandedOptions<D>,
+  export interface TableOptions<D extends Record<string, unknown>>
+    extends UseExpandedOptions<D>,
       UseFiltersOptions<D>,
       UseGlobalFiltersOptions<D>,
       UseGroupByOptions<D>,

package/src/components/index.ts

@@ -1,52 +1,52 @@
-import UploadFileDialog from "./UploadFileDialog";
-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 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 ErrorBoundary from "./ErrorBoundary";
-import FullScreenLoader from "./FullScreenLoader";
-import LoginForm from "./LoginForm";
-import { SideMenuHeader } from "./SideMenuHeader";
-import SideNav from "./SideNav";
-import { ListItemButton } from "./ListItemButton";
-import LayoutWrapper from "./LayoutWrapper";
-import PageNotFound from "./PageNotFound";
-import ChangePassword from "./ChangePassword";
-import UploadButton from "./UploadButton";
-import DialogWrapper from "./DrawerWrapper/DialogWrapper";
-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/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";
+import UploadFileDialog from './UploadFileDialog'
+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 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 ErrorBoundary from './ErrorBoundary'
+import FullScreenLoader from './FullScreenLoader'
+import LoginForm from './LoginForm'
+import { SideMenuHeader } from './SideMenuHeader'
+import SideNav from './SideNav'
+import { ListItemButton } from './ListItemButton'
+import LayoutWrapper from './LayoutWrapper'
+import PageNotFound from './PageNotFound'
+import ChangePassword from './ChangePassword'
+import UploadButton from './UploadButton'
+import DialogWrapper from './DrawerWrapper/DialogWrapper'
+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/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,
@@ -74,9 +74,9 @@ export {
   ChangePassword,
   UploadButton,
   DialogWrapper,
-};
+}
 
-export * from "./UploadButton/types";
-export * from "./HookForm";
-export * from "./Input";
-export * from "./IconButtons";
+export * from './UploadButton/types'
+export * from './HookForm'
+export * from './Input'
+export * from './IconButtons'

package/src/config/axios.ts

@@ -1,73 +1,73 @@
 import Axios from 'axios'
 import _ from 'lodash'
-import {toast} from 'react-toastify'
+import { toast } from 'react-toastify'
 import Cookies from 'js-cookie'
-import {NetworkStore} from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
-import {isDevelopment} from '../constants'
+import { NetworkStore } from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
+import { isDevelopment } from '../constants'
 
 const sessionKey = Cookies.get('campx_session_key')
 const clientId = window.location.pathname.split('/')[1] ?? 'campx_dev'
 
-const formatParams = (params) => {
-	return Object.fromEntries(
-		Object.entries(params ?? {})?.map((i) => [
-			i[0],
-			i[1] === '__empty__' ? '' : i[1],
-		])
-	)
+export const formatParams = (params) => {
+  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,
-	headers: {
-		'x-tenant-id': isDevelopment ? 'campx_dev' : clientId,
-		...(isDevelopment &&
-			sessionKey && {
-				campx_session_key: sessionKey,
-			}),
-	},
+  baseURL: process.env.REACT_APP_API_HOST,
+  withCredentials: true,
+  headers: {
+    'x-tenant-id': isDevelopment ? 'campx_dev' : clientId,
+    ...(isDevelopment &&
+      sessionKey && {
+        campx_session_key: sessionKey,
+      }),
+  },
 })
 
 axios.interceptors.request.use(
-	function (config) {
-		const params = formatParams(config?.params)
-		NetworkStore.update((s) => {
-			s.loading = true
-		})
-		return {...config, params}
-	},
-	function (error) {
-		NetworkStore.update((s) => {
-			s.loading = false
-		})
-		return Promise.reject(error)
-	}
+  function (config) {
+    const params = formatParams(config?.params)
+    NetworkStore.update((s) => {
+      s.loading = true
+    })
+    return { ...config, params }
+  },
+  function (error) {
+    NetworkStore.update((s) => {
+      s.loading = false
+    })
+    return Promise.reject(error)
+  },
 )
 
 axios.interceptors.response.use(
-	function (response) {
-		NetworkStore.update((s) => {
-			s.loading = false
-		})
-		return response
-	},
-	function (err) {
-		NetworkStore.update((s) => {
-			s.loading = false
-		})
-		return Promise.reject(err)
-	}
+  function (response) {
+    NetworkStore.update((s) => {
+      s.loading = false
+    })
+    return response
+  },
+  function (err) {
+    NetworkStore.update((s) => {
+      s.loading = false
+    })
+    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)
 }