@campxdev/react-blueprint 1.7.2 → 1.7.4

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';

package/src/components/Feedback/Alert/Alert.tsx

@@ -1,9 +1,8 @@
 import { Alert as MuiAlert, AlertProps as MuiAlertProps } from '@mui/material';
-import { Icons } from '../../export';
+import { Icons, Typography } from '../../export';
 
 export type AlertProps = {
   message: string;
-  severity: MuiAlertProps['severity'];
 } & MuiAlertProps;
 
 const getIcon = (severity: MuiAlertProps['severity']) => {
@@ -22,7 +21,7 @@ const getIcon = (severity: MuiAlertProps['severity']) => {
 export const Alert = ({ severity, message, ...rest }: AlertProps) => {
   return (
     <MuiAlert severity={severity} icon={getIcon(severity)} {...rest}>
-      {message}
+      <Typography variant="caption">{message}</Typography>
     </MuiAlert>
   );
 };

package/src/components/Feedback/Spinner/Spinner.css

@@ -6,39 +6,27 @@
   animation: rotate 1s linear infinite;
   scale: 0.4;
 }
-.spinner::before,
-.spinner::after {
-  content: '';
+.spinner::before , .spinner::after {
+  content: "";
   box-sizing: border-box;
   position: absolute;
   inset: 0px;
   border-radius: 50%;
-  border: 5px solid #7d60d9;
-  animation: prixClipFix 1.5s linear infinite;
+  border: 5px solid #7D60D9;
+  animation: prixClipFix 1.5s linear infinite ;
 }
-.spinner::after {
-  transform: rotate3d(90, 90, 0, 180deg);
-  border-color: #ff3d00;
+.spinner::after{
+  transform: rotate3d(90, 90, 0, 180deg );
+  border-color: #FF3D00;
 }
 
 @keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+  0%   {transform: rotate(0deg)}
+  100%   {transform: rotate(360deg)}
 }
 
 @keyframes prixClipFix {
-  0% {
-    clippath: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-  }
-  50% {
-    clippath: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
-  }
-  75%,
-  100% {
-    clippath: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
-  }
-}
+    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+    75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+}

package/src/components/Input/RadioGroup/RadioGroup.tsx

@@ -36,7 +36,12 @@ export const RadioGroup = ({
       name={name}
       containerProps={containerProps}
     >
-      <MuiRadioGroup onChange={onChange} name={name} {...rest}>
+      <MuiRadioGroup
+        onChange={onChange}
+        name={name}
+        {...rest}
+        sx={{ height: '100%', ...rest.sx }}
+      >
         {options?.map((item, index) => (
           <FormControlLabel
             key={index}
@@ -49,7 +54,6 @@ export const RadioGroup = ({
               />
             }
             label={<Typography variant="body2">{item.label}</Typography>}
-            sx={{ marginBottom: '32px' }}
           />
         ))}
       </MuiRadioGroup>

package/src/components/Input/SearchBar/SearchBar.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   InputAdornment,
   TextField,
   TextFieldProps,
@@ -34,20 +35,22 @@ export const SearchBar = ({
   };
 
   return (
-    <StyledTextField
-      placeholder={placeholder}
-      label={label}
-      value={search}
-      InputProps={{
-        endAdornment: (
-          <InputAdornment position="end">
-            <SearchIcon />
-          </InputAdornment>
-        ),
-      }}
-      {...rest}
-      onChange={handleChange}
-    />
+    <Box margin="8px">
+      <StyledTextField
+        placeholder={placeholder}
+        label={label}
+        value={search}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <SearchIcon />
+            </InputAdornment>
+          ),
+        }}
+        {...rest}
+        onChange={handleChange}
+      />
+    </Box>
   );
 };
 

package/src/components/Input/SingleSelect/SingleSelect.tsx

@@ -51,11 +51,12 @@ export type SingleSelectProps = {
   error?: any;
   helperText?: string;
   type?: 'input' | 'filter';
+  disableClear?: boolean;
 } & Omit<
   AutocompleteProps<
     { label: string; subLabel?: string; value: any } | any,
     false,
-    false,
+    true,
     false
   >,
   | 'options'

package/src/components/Input/SingleSelect/components/MenuFooter.tsx

@@ -0,0 +1,24 @@
+import { useTheme } from '@mui/material';
+import { Button } from '../../export';
+import { FooterContainer } from '../../styles';
+
+export const MenuFooter = ({ onClick }: { onClick: () => void }) => {
+  const theme = useTheme();
+  return (
+    <FooterContainer direction="row" alignItems="center">
+      <Button
+        variant="text"
+        onClick={onClick}
+        sx={{
+          fontFamily: 'Heebo',
+          minWidth: '0px',
+          margin: '0px 16px',
+        }}
+        disableRipple
+        color={theme.palette.text.tertiary}
+      >
+        Clear
+      </Button>
+    </FooterContainer>
+  );
+};

package/src/components/Input/SingleSelect/components/OptionsLoader.tsx

@@ -0,0 +1,14 @@
+import { Typography } from '../../../DataDisplay/Typography/Typography';
+import { Spinner } from '../../../Feedback/Spinner/Spinner';
+import { FooterContainer } from '../../styles';
+
+export const OptionsLoader = ({ isSearch }: { isSearch: boolean }) => {
+  return (
+    <FooterContainer direction="row" alignItems="center">
+      <Spinner />
+      <Typography variant="caption">
+        {isSearch ? 'Searching' : 'Loading Options'}
+      </Typography>
+    </FooterContainer>
+  );
+};

package/src/components/Input/SingleSelect/components/SingleFilter.tsx

@@ -3,12 +3,12 @@ import {
   AutocompleteCloseReason,
   FormControlLabel,
   RadioGroup as MuiRadioGroup,
-  Paper,
   Radio,
   useTheme,
 } from '@mui/material';
 import { startCase } from 'lodash';
 import { SyntheticEvent, useState } from 'react';
+import { EmptyIllustration } from '../../../DataDisplay/EmptyIllustration/EmptyIllustration';
 import {
   Button,
   DropdownMenu,
@@ -17,9 +17,10 @@ import {
   SingleSelectProps,
   Typography,
 } from '../../../export';
-import { OptionsLoader } from '../../components/OptionsLoader';
-import { OptionContainer } from '../../styles';
+import { FilterOptionContainer } from '../../styles';
 import { SingleSelectState } from '../singleSelectReducer';
+import { MenuFooter } from './MenuFooter';
+import { OptionsLoader } from './OptionsLoader';
 
 declare module '@mui/material/Autocomplete' {
   interface AutocompletePaperSlotPropsOverrides {
@@ -28,19 +29,6 @@ declare module '@mui/material/Autocomplete' {
   }
 }
 
-const CustomPaper = (props: any) => (
-  <Paper
-    {...props}
-    sx={{
-      boxShadow: 'none',
-      borderRadius: '0px 0px 4px 4px',
-    }}
-  >
-    {props.children}
-    <OptionsLoader loading={props.loadingOptions} isSearch={props.isSearch} />
-  </Paper>
-);
-
 export type SingleFilterProps = {
   onChange: (value: any) => void;
   searchDb: (searchValue: string) => Promise<void>;
@@ -81,6 +69,7 @@ export const SingleFilter = ({
   handleClose,
   handleScroll,
   state,
+  disableClear = false,
   ...restProps
 }: SingleFilterProps) => {
   const {
@@ -106,7 +95,7 @@ export const SingleFilter = ({
       <DropdownMenu
         menuListProps={{
           sx: {
-            padding: '12px',
+            padding: '0px',
             width: '250px',
           },
         }}
@@ -159,15 +148,28 @@ export const SingleFilter = ({
           />
         }
         menuListContainerSx={{
-          gap: '10px',
-          minHeight: '310px',
-          maxHeight: '310px',
-          overflow: 'scroll',
-          overflowY: 'auto',
-          marginTop: '10px',
+          margin: '10px 5px 0px 5px',
+          height: '310px',
+          overflowY: 'scroll',
         }}
         handleMenuScroll={handleScroll}
         menuSlot={({ close }) => {
+          const filteredOptions = internalOptions?.filter(
+            (option) =>
+              (localSearch && option.label.includes(localSearch)) ||
+              !localSearch,
+          );
+
+          if (filteredOptions.length === 0 && !loadingInitialInternalOptions)
+            return (
+              <EmptyIllustration
+                message="No Options Found"
+                imageSize="100px"
+                containerProps={{
+                  height: '310px',
+                }}
+              />
+            );
           return (
             <MuiRadioGroup
               onChange={(e) => {
@@ -176,50 +178,55 @@ export const SingleFilter = ({
               name={name}
               value={value}
             >
-              {internalOptions
-                ?.filter(
-                  (option) =>
-                    (localSearch && option.label.includes(localSearch)) ||
-                    !localSearch,
-                )
-                ?.map((option, index) => (
-                  <FormControlLabel
-                    sx={{
-                      margin: '0px',
+              {filteredOptions?.map((option, index) => (
+                <FormControlLabel
+                  sx={{
+                    margin: '0px',
+                    width: '100%',
+                    '.MuiFormControlLabel-label': {
                       width: '100%',
-                      '.MuiFormControlLabel-label': {
-                        width: '100%',
-                      },
-                    }}
-                    key={index}
-                    value={option.value}
-                    control={
-                      <Radio
-                        checkedIcon={<Icons.CheckedRadioIcon />}
-                        icon={<Icons.UnCheckedRadioIcon />}
-                      />
-                    }
-                    label={
-                      <OptionContainer>
-                        <Typography variant="subtitle3">
-                          {dbLabelProps.useLabelStartCase
-                            ? startCase(option.label)
-                            : option.label}
-                        </Typography>
-                        <Typography variant="caption">
-                          {dbLabelProps.useSubLabelStartCase
-                            ? startCase(option?.subLabel)
-                            : option?.subLabel}
-                        </Typography>
-                      </OptionContainer>
-                    }
-                  />
-                ))}
+                    },
+                  }}
+                  key={index}
+                  value={option.value}
+                  control={
+                    <Radio
+                      checkedIcon={<Icons.CheckedRadioIcon />}
+                      icon={<Icons.UnCheckedRadioIcon />}
+                      checked={value == option.value}
+                    />
+                  }
+                  label={
+                    <FilterOptionContainer>
+                      <Typography variant="subtitle3">
+                        {dbLabelProps.useLabelStartCase
+                          ? startCase(option.label)
+                          : option.label}
+                      </Typography>
+                      <Typography variant="caption">
+                        {dbLabelProps.useSubLabelStartCase
+                          ? startCase(option?.subLabel)
+                          : option?.subLabel}
+                      </Typography>
+                    </FilterOptionContainer>
+                  }
+                />
+              ))}
             </MuiRadioGroup>
           );
         }}
         menuFooter={
-          <OptionsLoader loading={loadingInternalOptions} isSearch={!!search} />
+          loadingInternalOptions ? (
+            <OptionsLoader isSearch={!!search} />
+          ) : disableClear ? (
+            <></>
+          ) : (
+            <MenuFooter
+              onClick={() => {
+                onChange(null);
+              }}
+            />
+          )
         }
         useMenuSlot
       />