@campxdev/react-blueprint 1.7.3 → 1.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "main": "./export.ts",
   "dependencies": {
     "@emotion/react": "^11.13.3",

package/src/assets/images/svg/index.ts

@@ -1,15 +1,15 @@
-import assignment from './assignment.svg';
-import emptyListImage from './Emptylistmage.svg';
-import errorCactus from './error-cactus.svg';
-import internalServerError from './Internalserverimage.svg';
-import noConnection from './no-connection.svg';
-import unAuthorized from './unauthorized.svg';
+import assignmentImage from './assignment.svg';
+import emptyImage from './empty.svg';
+import errorImage from './error-image.svg';
+import noConnectionImage from './no-connection.svg';
+import serverErrorImage from './server-error.svg';
+import unauthorizedImage from './unauthorized.svg';
 
-export const SVGs = {
-  assignment,
-  emptyListImage,
-  errorCactus,
-  internalServerError,
-  noConnection,
-  unAuthorized,
+export {
+  assignmentImage,
+  emptyImage,
+  errorImage,
+  noConnectionImage,
+  serverErrorImage,
+  unauthorizedImage,
 };

package/src/components/Assets/ErrorPages/InternalServerError.tsx

@@ -1,14 +1,14 @@
-import { SVGs } from '../../../assets/export';
+import { serverErrorImage } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../../export';
-import { StyledBox } from './styles';
+import { CenterBox } from './styles';
 
 export const InternalServerError = ({ resetBoundary }: any) => {
   return (
     <>
-      <StyledBox>
+      <CenterBox>
         <img
-          src={SVGs.internalServerError}
+          src={serverErrorImage}
           alt="page not found"
           width={'350px'}
           style={{ margin: '20px' }}
@@ -25,7 +25,7 @@ export const InternalServerError = ({ resetBoundary }: any) => {
         >
           Try Again
         </Button>
-      </StyledBox>
+      </CenterBox>
     </>
   );
 };

package/src/components/Assets/ErrorPages/NoInternetConnection.tsx

@@ -1,14 +1,14 @@
-import { SVGs } from '../../../assets/export';
+import { noConnectionImage } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
 import { Button } from '../../export';
-import { StyledBox } from './styles';
+import { CenterBox } from './styles';
 
 export const NoInterneConnection = ({ resetBoundary }: any) => {
   return (
     <>
-      <StyledBox>
+      <CenterBox>
         <img
-          src={SVGs.noConnection}
+          src={noConnectionImage}
           alt="page not found"
           width={'350px'}
           style={{ margin: '20px' }}
@@ -27,7 +27,7 @@ export const NoInterneConnection = ({ resetBoundary }: any) => {
         >
           Try Again
         </Button>
-      </StyledBox>
+      </CenterBox>
     </>
   );
 };

package/src/components/Assets/ErrorPages/NoItemFound.tsx

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
-import { SVGs } from '../../../assets/export';
+
+import { emptyImage } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
-import { StyledBox } from './styles';
+import { CenterBox } from './styles';
 
 interface NoItemFoundProps {
   title?: string;
@@ -13,15 +14,15 @@ export const NoItemFound = ({
   description,
 }: NoItemFoundProps) => {
   return (
-    <StyledBox>
+    <CenterBox>
       <img
-        src={SVGs.emptyListImage}
+        src={emptyImage}
         alt="page not found"
         width="350px"
         style={{ margin: '20px' }}
       />
       <Typography variant="subtitle1">{title}</Typography>
       <Typography variant="body2">{description}</Typography>
-    </StyledBox>
+    </CenterBox>
   );
 };

package/src/components/Assets/ErrorPages/PageNotFound.tsx

@@ -1,13 +1,13 @@
-import { SVGs } from '../../../assets/export';
+import { emptyImage } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
-import { StyledBox } from './styles';
+import { CenterBox } from './styles';
 
 export const PageNotFound = () => {
   return (
     <>
-      <StyledBox>
+      <CenterBox>
         <img
-          src={SVGs.errorCactus}
+          src={emptyImage}
           alt="page not found"
           width={'350px'}
           style={{ margin: '20px' }}
@@ -19,7 +19,7 @@ export const PageNotFound = () => {
         <Typography variant="body2">
           Please check the URL or return to the homepage.
         </Typography>
-      </StyledBox>
+      </CenterBox>
     </>
   );
 };

package/src/components/Assets/ErrorPages/UnAuthorized.tsx

@@ -1,14 +1,14 @@
 import { ReactNode } from 'react';
-import { SVGs } from '../../../assets/export';
+import { unauthorizedImage } from '../../../assets/images/svg';
 import { Typography } from '../../DataDisplay/Typography/Typography';
-import { StyledBox } from './styles';
+import { CenterBox } from './styles';
 
 export const UnAuthorized = ({ component }: { component?: ReactNode }) => {
   return (
     <>
-      <StyledBox>
+      <CenterBox>
         <img
-          src={SVGs.unAuthorized}
+          src={unauthorizedImage}
           alt="page not found"
           width={'350px'}
           style={{ margin: '20px' }}
@@ -19,7 +19,7 @@ export const UnAuthorized = ({ component }: { component?: ReactNode }) => {
         </Typography>
         <Typography variant="body2">Please log in to continue.</Typography>
         {component}
-      </StyledBox>
+      </CenterBox>
     </>
   );
 };

package/src/components/Assets/ErrorPages/styles.tsx

@@ -20,7 +20,7 @@ export const StyledAlert = styled(Alert)(({ theme }) => ({
   },
 }));
 
-export const StyledBox = styled(Box)(({ theme }) => ({
+export const CenterBox = styled(Box)(({ theme }) => ({
   width: '100%',
   display: 'flex',
   flexDirection: 'column',

package/src/components/Assets/Icons/IconComponents/ClearIcon.tsx

@@ -0,0 +1,37 @@
+import { styled } from '@mui/material';
+
+const StyledSvg = styled('svg')(({ theme }) => ({
+  stroke: theme.palette.text.tertiary,
+  fill: theme.palette.text.tertiary,
+  '&:hover': {
+    stroke: theme.palette.primary.main,
+    fill: theme.palette.primary.main,
+  },
+}));
+
+export const ClearIcon = ({
+  size = 16,
+  onClick,
+}: {
+  size?: number;
+  onClick?: (e: React.MouseEvent) => void;
+}) => {
+  return (
+    <StyledSvg
+      width={size}
+      onClick={onClick}
+      height={size}
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        cursor: onClick ? 'pointer' : 'default',
+      }}
+    >
+      <path
+        d="M9.52859 2.07129C9.43351 1.97624 9.26447 1.97624 9.16938 2.07129L5.9999 5.2396L2.83042 2.07129C2.73534 1.97624 2.5663 1.97624 2.47122 2.07129C2.37613 2.16634 2.37613 2.33531 2.47122 2.43036L5.64069 5.59868L2.47122 8.767C2.37613 8.86205 2.37613 9.03102 2.47122 9.12607C2.52404 9.17888 2.58743 9.2 2.65082 9.2C2.71421 9.2 2.7776 9.17888 2.83042 9.12607L5.9999 5.95776L9.16938 9.12607C9.22221 9.17888 9.2856 9.2 9.34899 9.2C9.41238 9.2 9.47576 9.17888 9.52859 9.12607C9.62367 9.03102 9.62367 8.86205 9.52859 8.767L6.35911 5.59868L9.52859 2.43036C9.62367 2.33531 9.62367 2.1769 9.52859 2.07129Z"
+        stroke-width="1"
+      />
+    </StyledSvg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/DoneSquare.tsx

@@ -11,8 +11,8 @@ export const DoneSquare = ({
   const fill = color ?? theme.palette.highlight.highlightGreen;
   return (
     <svg
-      width="16"
-      height="16"
+      width={size}
+      height={size}
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

package/src/components/Assets/Icons/IconComponents/DownArrow.tsx

@@ -0,0 +1,32 @@
+import { useTheme } from '@mui/material';
+
+export const DownArrow = ({
+  size = 16,
+  disabled,
+  onClick,
+}: {
+  size?: number;
+  disabled?: boolean;
+  onClick?: (e: React.MouseEvent<SVGSVGElement>) => void;
+}) => {
+  const theme = useTheme();
+  return (
+    <svg
+      onClick={onClick}
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.99896 11.734C8.1371 11.7329 8.2694 11.6782 8.36803 11.5815L8.37443 11.5783L14.2411 5.7116C14.3411 5.61159 14.3972 5.47595 14.3972 5.33453C14.3972 5.19311 14.3411 5.05748 14.2411 4.95747C14.1411 4.85748 14.0054 4.80131 13.864 4.80131C13.7226 4.80131 13.587 4.85748 13.487 4.95747L7.99896 10.446L2.5099 4.95693C2.40988 4.85695 2.27425 4.80078 2.13283 4.80078C1.99141 4.80078 1.85578 4.85695 1.75576 4.95693C1.65578 5.05695 1.59961 5.19258 1.59961 5.334C1.59961 5.47542 1.65578 5.61105 1.75576 5.71107L7.62243 11.5777L7.62776 11.5809C7.72699 11.6781 7.86007 11.733 7.99896 11.734Z"
+        fill={theme.palette.text.primary}
+        stroke={theme.palette.text.primary}
+        fillOpacity={disabled ? 0.5 : 1}
+        strokeOpacity={disabled ? 0.5 : 1}
+        stroke-width="1"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/LIneDivider.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from '@mui/material';
+
+export const LineDividerIcon = ({
+  size = 16,
+  height = 20, // Default height
+}: {
+  size?: number;
+  height?: number;
+}) => {
+  const theme = useTheme();
+  const color = theme.palette.border.primary;
+  return (
+    <svg
+      width={size}
+      height={height}
+      viewBox="0 0 1 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line x1="0.0" y1="-2.18557e-08" x2="0.500001" y2="20" stroke={color} />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/RedirectIcon.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@mui/material';
 export const RedirectIcon = ({
-  size = 16,
+  size = 20,
   color,
   opacity = '0.5',
 }: {

package/src/components/Assets/Icons/Icons.tsx

@@ -25,6 +25,7 @@ import { CertificateIcon } from './IconComponents/CertificatesIcon';
 import { CetIcon } from './IconComponents/CetIcon';
 import { CheckedCheckboxIcon } from './IconComponents/CheckedCheckBoxIcon';
 import { CheckedRadioIcon } from './IconComponents/CheckedRadioIcon';
+import { ClearIcon } from './IconComponents/ClearIcon';
 import { ClogWheelIcon } from './IconComponents/ClogWheelIcon';
 import { CollapseIcon } from './IconComponents/CollapseIcon';
 import { ColumnsIcon } from './IconComponents/ColumnsIcon';
@@ -43,6 +44,7 @@ import { DeleteIcon } from './IconComponents/DeleteIcon';
 import { DeviceIcon } from './IconComponents/DeviceIcon';
 import { DocumentIcon } from './IconComponents/DocumentIcon';
 import { DoneSquare } from './IconComponents/DoneSquare';
+import { DownArrow } from './IconComponents/DownArrow';
 import { DownloadIcon } from './IconComponents/DownloadIcon';
 import { EditIcon } from './IconComponents/EditIcon';
 import { EmailIcon } from './IconComponents/EmailIcon';
@@ -65,6 +67,7 @@ import { ImportIcon } from './IconComponents/ImportIcon';
 import { InfoFilledIcon } from './IconComponents/InfoFilledIcon';
 import { InfoIcon } from './IconComponents/InfoIcon';
 import { InstitutionsIcon } from './IconComponents/InstitutionsIcon';
+import { LineDividerIcon } from './IconComponents/LIneDivider';
 import { LeadsIcon } from './IconComponents/LeadsIcon';
 import { LeftIcon } from './IconComponents/LeftIcon';
 import { LocationIcon } from './IconComponents/LocationIcon';
@@ -242,4 +245,7 @@ export const Icons = {
   TransactionCardIcon,
   ObeIcon,
   SettlementsIcon,
+  DownArrow,
+  ClearIcon,
+  LineDividerIcon,
 };

package/src/components/DataDisplay/ActivityLogView/ActivityLogView.tsx

@@ -4,10 +4,10 @@ import { format, isToday } from 'date-fns';
 import _ from 'lodash';
 import { useState } from 'react';
 import { Button, DatePicker, Spinner } from '../../export';
+import { EmptyIllustration } from '../EmptyIllustration/EmptyIllustration';
 import {
   ActivityIcon,
   convertUTCtoIST,
-  NoDataFound,
   ScrollToTopButton,
   useIntersectionObserver,
 } from './service';
@@ -175,7 +175,7 @@ export const ActivityLogView = ({
           <Spinner />
         </StyledSpinnerBox>
       ) : activitiesData.length === 0 ? (
-        <NoDataFound message={'No data found'} />
+        <EmptyIllustration message={'No data found'} />
       ) : (
         Object.entries(groupedActivities).map(([section, activities]) => (
           <Box key={section}>

package/src/components/DataDisplay/ActivityLogView/service.tsx

@@ -1,9 +1,7 @@
 import { ArrowUpward, Info } from '@mui/icons-material';
-import { Box, Fab, Typography } from '@mui/material';
+import { Box, Fab } from '@mui/material';
 import { addHours, addMinutes, parseISO } from 'date-fns';
 import { useCallback, useRef } from 'react';
-import { SVGs } from '../../../assets/images/svg';
-import { StyledBox } from '../../Assets/ErrorPages/styles';
 import { ActivityAction } from '../../export';
 import { CreateIcon, DeleteIcon, UpdateIcon } from './Icons';
 
@@ -63,22 +61,6 @@ export const ScrollToTopButton = () => {
   );
 };
 
-export const NoDataFound = ({ message }: { message: string }) => {
-  return (
-    <>
-      <StyledBox>
-        <img
-          src={SVGs.emptyListImage}
-          alt="page not found"
-          width={'350px'}
-          style={{ margin: '20px' }}
-        />
-        <Typography variant="subtitle1">{message}</Typography>
-      </StyledBox>
-    </>
-  );
-};
-
 export function useIntersectionObserver(callback: () => void) {
   const observer = useRef<IntersectionObserver | null>(null);
 

package/src/components/DataDisplay/DataTable/DataTable.tsx

@@ -1,10 +1,9 @@
-import { Stack, styled } from '@mui/material';
+import { Stack, styled, useTheme } from '@mui/material';
 import {
   DataGrid as MuiDataGrid,
   DataGridProps as MuiDataGridProps,
 } from '@mui/x-data-grid';
 import { v4 } from 'uuid';
-import { DataGridContainer } from '../styles';
 import { TablePagination } from './TablePagination';
 
 export type DataTableProps = {
@@ -16,45 +15,69 @@ export type DataTableProps = {
 } & MuiDataGridProps;
 
 export const DataTable = (props: DataTableProps) => {
-  const { limit, offset, totalCount, onPageChange, onLimitChange } = props;
+  const {
+    limit,
+    offset,
+    totalCount,
+    onPageChange,
+    onLimitChange,
+    density,
+    rows,
+  } = props;
+
+  const getRowHeightByDensity = (): number => {
+    switch (density) {
+      case 'standard':
+        return 48;
+      case 'compact':
+        return 36;
+      case 'comfortable':
+        return 60;
+      default:
+        return 48;
+    }
+  };
+
+  const theme = useTheme();
 
   return (
-    <DataGridContainer>
-      <MuiDataGrid
-        disableColumnFilter
-        disableColumnMenu
-        disableColumnSorting
-        getRowId={(row) => row.id ?? v4()}
-        {...props}
-        slots={{
-          ...props.slots,
-          pagination: () => {
-            if (
-              limit === undefined ||
-              offset === undefined ||
-              totalCount === undefined ||
-              onPageChange === undefined ||
-              onLimitChange === undefined
-            ) {
-              return <></>;
-            }
-            const pages = Math.ceil(totalCount / limit);
-            const currentPage = Math.ceil(offset / limit) + 1;
-            return (
-              <TablePagination
-                count={pages}
-                page={currentPage}
-                limit={limit}
-                offset={offset}
-                totalCount={totalCount}
-                onPageChange={onPageChange}
-                onLimitChange={onLimitChange}
-              />
-            );
-          },
-        }}
-      />
-    </DataGridContainer>
+    <MuiDataGrid
+      disableColumnFilter
+      disableColumnMenu
+      disableColumnSorting
+      getRowId={(row) => row.id ?? v4()}
+      getRowHeight={getRowHeightByDensity}
+      rows={rows}
+      {...props}
+      slots={{
+        ...props.slots,
+        pagination: () => {
+          if (
+            limit === undefined ||
+            offset === undefined ||
+            totalCount === undefined ||
+            onPageChange === undefined ||
+            onLimitChange === undefined
+          ) {
+            return <></>;
+          }
+          const pages = Math.ceil(totalCount / limit);
+          const currentPage = Math.ceil(offset / limit) + 1;
+          return (
+            <TablePagination
+              count={pages}
+              page={currentPage}
+              limit={limit}
+              offset={offset}
+              totalCount={totalCount}
+              onPageChange={onPageChange}
+              onLimitChange={onLimitChange}
+              rowCount={rows?.length || 0}
+            />
+          );
+        },
+      }}
+    />
   );
 };
 

package/src/components/DataDisplay/DataTable/TablePagination.tsx

@@ -2,6 +2,7 @@ import {
   Pagination as MuiPagination,
   PaginationProps as MuiPaginationProps,
   Stack,
+  styled,
 } from '@mui/material';
 import { DropdownMenuItem } from '../../Navigation/DropDownMenu/DropdownMenuItem';
 
@@ -15,22 +16,29 @@ export type PaginationProps = {
   totalCount: number;
   onPageChange: (offset: number) => void;
   onLimitChange: (limit: number) => void;
+  rowCount: number;
 } & MuiPaginationProps;
 
+const TablePaginationContainer = styled(Stack)(({ theme }) => ({
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  padding: '10px 30px',
+  backgroundColor: theme.palette.surface.grey,
+}));
+
 export const TablePagination = (props: PaginationProps) => {
-  const { limit, offset, totalCount, onPageChange, onLimitChange } = props;
+  const { limit, offset, totalCount, onPageChange, onLimitChange, rowCount } =
+    props;
+
+  const getPaginationText = () => {
+    if (rowCount == 0) return 'No records';
+    return `Showing ${offset + 1} - ${offset + rowCount} rows of ${totalCount}`;
+  };
 
   return (
-    <Stack
-      direction="row"
-      justifyContent="space-between"
-      alignItems="center"
-      width="100%"
-      padding="10px 30px"
-    >
-      <Typography variant="caption">{`Showing ${offset + 1} - ${
-        offset + limit
-      } rows of ${totalCount}`}</Typography>
+    <TablePaginationContainer direction="row">
+      <Typography variant="caption">{getPaginationText()}</Typography>
       <MuiPagination
         {...props}
         variant="outlined"
@@ -79,6 +87,6 @@ export const TablePagination = (props: PaginationProps) => {
           />,
         ]}
       />
-    </Stack>
+    </TablePaginationContainer>
   );
 };

package/src/components/DataDisplay/EmptyIllustration/EmptyIllustration.tsx

@@ -0,0 +1,40 @@
+import { Box, styled, SxProps, TypographyOwnProps } from '@mui/material';
+import { emptyImage } from '../../../assets/images/svg';
+
+import { Typography } from '../export';
+
+export const CenterBox = styled(Box)(({ theme }) => ({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+export const EmptyIllustration = ({
+  message,
+  imageSize = '250px',
+  messageProps,
+  containerProps,
+}: {
+  message: string;
+  imageSize?: string;
+  messageProps?: TypographyOwnProps;
+  containerProps?: SxProps;
+}) => {
+  return (
+    <>
+      <CenterBox sx={containerProps}>
+        <img
+          src={emptyImage}
+          alt="no-items"
+          width={imageSize}
+          style={{ margin: '20px' }}
+        />
+        <Typography variant="subtitle2" {...messageProps}>
+          {message}
+        </Typography>
+      </CenterBox>
+    </>
+  );
+};

package/src/components/DataDisplay/export.ts

@@ -5,6 +5,7 @@ export * from './Card/Card';
 export * from './Chips/Chips';
 export * from './DataTable/DataTable';
 export * from './EditableDataTable/EditableDataTable';
+export * from './EmptyIllustration/EmptyIllustration';
 export * from './SidePanel/SidePanel';
 export * from './Timeline/Timeline';
 export * from './Typography/Typography';