@campxdev/react-blueprint 1.7.3 → 1.7.4

package/src/components/Layout/PageHeader/PageHeader.tsx

@@ -1,6 +1,6 @@
 import { Box, Divider, Stack, useTheme } from '@mui/material';
 import { GridColDef } from '@mui/x-data-grid';
-import { AnimatePresence, motion } from 'framer-motion';
+import { motion } from 'framer-motion';
 import {
   cloneElement,
   Fragment,
@@ -8,19 +8,16 @@ import {
   ReactNode,
   useState,
 } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { setFilterByNameForUniqueId } from '../../../redux/slices/pageHeaderSlice';
+import { RootState } from '../../../redux/store';
 import {
   DensitySelector,
   Icons,
   TableColumnsSelector,
   Typography,
 } from '../../export';
-import {
-  ColumnsAnchor,
-  FiltersAnchor,
-  SearchAnchor,
-} from './components/Anchors';
+import { FiltersAnchor } from './components/Anchors';
 import { SearchBar } from './components/SearchBar';
 
 interface PageHeaderProps {
@@ -36,7 +33,7 @@ const ViewTab = ({ title }: { title: string }) => {
   const theme = useTheme();
   return (
     <Stack>
-      <Stack direction="row" gap={1} alignItems="center" padding="8px">
+      <Stack direction="row" gap={1} alignItems="center" padding="8px 0px">
         <Icons.ViewsIcon />
         <Typography variant="subtitle3">{title}</Typography>
       </Stack>
@@ -54,7 +51,7 @@ const ViewTab = ({ title }: { title: string }) => {
 
 const motionDivVariants = {
   collapsed: { height: '48px' },
-  expanded: { height: '102px' },
+  expanded: { height: '108px' },
 };
 
 export const PageHeader = ({
@@ -66,7 +63,7 @@ export const PageHeader = ({
   searchText = 'Search',
 }: PageHeaderProps) => {
   const [expanded, setExpanded] = useState(false);
-  const [expandedSearch, setExpandedSearch] = useState(false);
+
   const dispatch = useDispatch();
 
   const wrapProps = (element: ReactElement): ReactElement => {
@@ -89,13 +86,17 @@ export const PageHeader = ({
 
   const theme = useTheme();
 
-  const handleSearchClick = () => {
-    setExpandedSearch(true);
-  };
+  const filters = useSelector((state: RootState) =>
+    uniqueId ? state.pageHeader[uniqueId]?.filters : undefined,
+  );
 
-  const handleSearchBlur = () => {
-    setExpandedSearch(false);
-  };
+  const hasFilters =
+    !!filters &&
+    Object.entries(filters).some(([key, value]) => {
+      return (
+        !['search', 'limit', 'offset', 'skip'].includes(key) && value !== null
+      );
+    });
 
   const isTableMode = columns && uniqueId;
 
@@ -104,10 +105,8 @@ export const PageHeader = ({
       style={{
         display: 'flex',
         flexDirection: 'column',
-        gap: '10px',
-        margin: '8px 0px',
-        padding: '0px 16px',
         height: '48px',
+        gap: '8px',
       }}
       variants={motionDivVariants}
       animate={expanded ? 'expanded' : 'collapsed'}
@@ -118,6 +117,7 @@ export const PageHeader = ({
         width="100%"
         alignItems="center"
         justifyContent="space-between"
+        height="48px"
       >
         {isTableMode ? <ViewTab title="Default View" /> : viewsSlot}
 
@@ -127,48 +127,14 @@ export const PageHeader = ({
               handleClick={() => {
                 setExpanded(!expanded);
               }}
-              showDot={false}
+              showDot={hasFilters}
             />
           )}
           {isTableMode && (
-            <ColumnsAnchor
-              handleClick={() => {
-                setExpanded(!expanded);
-              }}
-              showDot={false}
-            />
+            <TableColumnsSelector columns={columns} uniqueId={uniqueId} />
           )}
           {isTableMode && (
-            <AnimatePresence mode="wait">
-              {expandedSearch ? (
-                <motion.div
-                  key="searchBar"
-                  initial={{ opacity: 0, x: -20, scale: 0.95 }}
-                  animate={{ opacity: 1, x: 0, scale: 1 }}
-                  exit={{ opacity: 0, x: 20, scale: 0.95 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <SearchBar
-                    searchText={searchText}
-                    handleSearchBlur={handleSearchBlur}
-                    uniqueId={uniqueId}
-                  />
-                </motion.div>
-              ) : (
-                <motion.div
-                  key="searchAnchor"
-                  initial={{ opacity: 0, x: 20, scale: 0.95 }}
-                  animate={{ opacity: 1, x: 0, scale: 1 }}
-                  exit={{ opacity: 0, x: -20, scale: 0.95 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <SearchAnchor
-                    handleClick={handleSearchClick}
-                    showDot={false}
-                  />
-                </motion.div>
-              )}
-            </AnimatePresence>
+            <SearchBar searchText={searchText} uniqueId={uniqueId} />
           )}
           {isTableMode && <DensitySelector uniqueId={uniqueId} />}
           {actions.map((action, index) => action)}
@@ -183,18 +149,6 @@ export const PageHeader = ({
       )}
       {expanded && (
         <Stack direction="row" width="100%" alignItems="center" gap={2}>
-          {isTableMode && (
-            <>
-              <TableColumnsSelector columns={columns} uniqueId={uniqueId} />
-              <Divider
-                orientation="vertical"
-                style={{
-                  height: '20px',
-                  background: theme.palette.border.primary,
-                }}
-              />
-            </>
-          )}
           {filterComponents.map((filter, index) => (
             <Fragment key={index}>
               {wrapProps(filter)}
@@ -209,7 +163,6 @@ export const PageHeader = ({
               )}
             </Fragment>
           ))}
-          <Stack direction="row"></Stack>
         </Stack>
       )}
     </motion.div>

package/src/components/Layout/PageHeader/components/SearchBar.tsx

@@ -1,28 +1,34 @@
-import { InputAdornment } from '@mui/material';
+import { InputAdornment, Stack } from '@mui/material';
+import { AnimatePresence, motion } from 'framer-motion';
 import { debounce } from 'lodash';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { setSearchForUniqueId } from '../../../../redux/slices/pageHeaderSlice';
 import { RootState } from '../../../../redux/store';
 import { Icons, TextField } from '../../../export';
+import { SearchAnchor } from './Anchors';
 
 export const SearchBar = ({
-  handleSearchBlur,
   uniqueId,
   searchText,
 }: {
-  handleSearchBlur: () => void;
   uniqueId: string;
   searchText: string;
 }) => {
   const dispatch = useDispatch();
 
+  const [expandedSearch, setExpandedSearch] = useState(false);
+
+  const handleSearchClick = () => {
+    setExpandedSearch(true);
+  };
+
   const search = useSelector(
     (state: RootState) => state.pageHeader[uniqueId]?.filters?.search,
   );
 
   // Wrap onSearch in useCallback
-  const onSearch = (value: string) => {
+  const onSearch = (value: string | null) => {
     dispatch(
       setSearchForUniqueId({
         uniqueId: uniqueId,
@@ -31,36 +37,73 @@ export const SearchBar = ({
     );
   };
 
-  // Now we can memoize a debounced version of onSearch
   const debouncedSendRequest = useMemo(
     () => debounce(onSearch, 300),
     [onSearch],
   );
 
-  // Pass the updated value to the debounced function in onChange
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     debouncedSendRequest(e.target.value);
   };
 
+  const handleClearClick = (e: any) => {
+    onSearch(null);
+    setExpandedSearch(false);
+  };
+
   return (
-    <TextField
-      containerProps={{
-        margin: '0px',
-        width: '300px',
-      }}
-      size="small"
-      placeholder={searchText}
-      defaultValue={search || ''}
-      onChange={handleChange}
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position="start">
-            <Icons.SearchIcon />
-          </InputAdornment>
-        ),
-      }}
-      onBlur={handleSearchBlur}
-      autoFocus
-    />
+    <AnimatePresence mode="wait">
+      {expandedSearch ? (
+        <motion.div
+          key="searchBar"
+          initial={{ opacity: 0, x: -20, scale: 0.95 }}
+          animate={{ opacity: 1, x: 0, scale: 1 }}
+          exit={{ opacity: 0, x: 20, scale: 0.95 }}
+          transition={{ duration: 0.3 }}
+        >
+          <TextField
+            containerProps={{
+              margin: '0px',
+              width: '300px',
+            }}
+            sx={{
+              input: {
+                padding: '9px 9px 9px 4px',
+              },
+            }}
+            size="small"
+            placeholder={searchText}
+            defaultValue={search || ''}
+            onChange={handleChange}
+            InputProps={{
+              startAdornment: (
+                // <InputAdornment position="start">
+                <Stack direction="row" alignItems="center" gap="4px">
+                  <Icons.SearchIcon />
+                  <Icons.LineDividerIcon />
+                </Stack>
+                // </InputAdornment>
+              ),
+              endAdornment: (
+                <InputAdornment position="end">
+                  <Icons.ClearIcon onClick={handleClearClick} />
+                </InputAdornment>
+              ),
+            }}
+            autoFocus
+          />
+        </motion.div>
+      ) : (
+        <motion.div
+          key="searchAnchor"
+          initial={{ opacity: 0, x: 20, scale: 0.95 }}
+          animate={{ opacity: 1, x: 0, scale: 1 }}
+          exit={{ opacity: 0, x: -20, scale: 0.95 }}
+          transition={{ duration: 0.3 }}
+        >
+          <SearchAnchor handleClick={handleSearchClick} showDot={false} />
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
 };

package/src/components/Layout/PageHeader/components/TableColumnsSelector/TableColumnsSelector.tsx

@@ -1,12 +1,25 @@
-import { KeyboardArrowDown } from '@mui/icons-material';
-import { MenuListProps, MenuProps, Typography, useTheme } from '@mui/material';
+import {
+  MenuListProps,
+  MenuProps,
+  Stack,
+  styled,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import { GridColDef, GridColumnVisibilityModel } from '@mui/x-data-grid';
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { setColumnVisibilityModelForUniqueId } from '../../../../../redux/slices/pageHeaderSlice';
 import { RootState } from '../../../../../redux/store';
-import { Button, Icons, SearchBar, SingleCheckBox } from '../../../../export';
+import {
+  Button,
+  EmptyIllustration,
+  Icons,
+  SearchBar,
+  SingleCheckBox,
+} from '../../../../export';
 import { DropdownMenu } from '../../../../Navigation/export';
+import { ColumnsAnchor } from '../Anchors';
 
 export type TableColumnsSelectorProps = {
   columns: GridColDef[];
@@ -15,6 +28,37 @@ export type TableColumnsSelectorProps = {
   uniqueId: string;
 };
 
+export const FooterContainerContainer = styled(Stack)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.defaultBackground,
+  borderRadius: '4px',
+  height: '40px',
+}));
+
+export const TableColumnsSelectorMenuFooter = ({
+  onClick,
+}: {
+  onClick: () => void;
+}) => {
+  const theme = useTheme();
+  return (
+    <FooterContainerContainer direction="row" alignItems="center">
+      <Button
+        variant="text"
+        onClick={onClick}
+        sx={{
+          fontFamily: 'Heebo',
+          minWidth: '0px',
+          margin: '0px 16px',
+        }}
+        disableRipple
+        color={theme.palette.text.tertiary}
+      >
+        Reset
+      </Button>
+    </FooterContainerContainer>
+  );
+};
+
 export const TableColumnsSelector = ({
   columns,
   uniqueId,
@@ -56,26 +100,16 @@ export const TableColumnsSelector = ({
       <DropdownMenu
         menuListProps={{
           sx: {
-            padding: '12px',
+            padding: '0px',
             width: '250px',
           },
           ...props.menuListProps,
         }}
         anchor={({ open }: { open: (e: any) => void }) => (
-          <Button
-            onClick={open}
-            sx={{
-              gap: '1px',
-              borderRadius: '20px',
-            }}
-            variant="contained"
-            background={theme.palette.surface.grey}
-            hoverBackground={theme.palette.surface.grey}
-            color={theme.palette.text.primary}
-            endIcon={<KeyboardArrowDown />}
-          >
-            Columns
-          </Button>
+          <ColumnsAnchor
+            handleClick={open}
+            showDot={Object.values(columnVisibilityModel).includes(false)}
+          />
         )}
         menuProps={{
           ...props.menuProps,
@@ -99,9 +133,9 @@ export const TableColumnsSelector = ({
           />
         }
         menuListContainerSx={{
-          margin: '10px 5px 0px 5px',
-          gap: 1,
-          maxHeight: '350px',
+          margin: '12px 12px 0px 12px',
+          height: '310px',
+          overflowY: 'scroll',
         }}
         menu={filteredOptions.map((item, index) => (
           <SingleCheckBox
@@ -111,7 +145,11 @@ export const TableColumnsSelector = ({
               sx: {
                 display: 'flex',
                 justifyContent: 'space-between',
-                marginLeft: '0px',
+                margin: '0px',
+                width: '100%',
+                '.MuiFormControlLabel-label': {
+                  width: '100%',
+                },
               },
             }}
             icon={<Icons.VisibilityIcon />}
@@ -134,6 +172,70 @@ export const TableColumnsSelector = ({
             }}
           />
         ))}
+        menuSlot={({ close }) => {
+          if (filteredOptions.length === 0)
+            return (
+              <EmptyIllustration
+                message="No Options Found"
+                imageSize="100px"
+                containerProps={{
+                  height: '310px',
+                }}
+              />
+            );
+          return filteredOptions.map((item, index) => (
+            <SingleCheckBox
+              key={index}
+              formControlLabelProps={{
+                labelPlacement: 'start',
+                sx: {
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  margin: '0px',
+                  width: '100%',
+                  '.MuiFormControlLabel-label': {
+                    width: '100%',
+                  },
+                  borderBottom: `1px solid ${theme.palette.secondary.main}`,
+                },
+              }}
+              icon={<Icons.VisibilityIcon />}
+              checkedIcon={<Icons.VisibilityOffIcon />}
+              checked={!columnVisibilityModel[item.field]}
+              label={
+                <Typography
+                  color={
+                    !columnVisibilityModel[item.field]
+                      ? theme.palette.text.tertiary
+                      : theme.palette.text.primary
+                  }
+                  variant="subtitle3"
+                >
+                  {item.headerName}
+                </Typography>
+              }
+              onChange={(e) => {
+                handleCheckboxChange(item, e.target.checked);
+              }}
+            />
+          ));
+        }}
+        useMenuSlot
+        menuFooter={
+          <TableColumnsSelectorMenuFooter
+            onClick={() => {
+              dispatch(
+                setColumnVisibilityModelForUniqueId({
+                  uniqueId: uniqueId,
+                  columnVisibilityModel: columns.reduce((acc, column) => {
+                    acc[column.field] = true;
+                    return acc;
+                  }, {} as GridColumnVisibilityModel),
+                }),
+              );
+            }}
+          />
+        }
       />
     </>
   );

package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -56,6 +56,7 @@ const BreadcrumbContainer = styled(Stack)(({ theme }) => ({
   width: '100%',
   justifyContent: 'flex-start',
   height: '52px',
+  paddingLeft: '12px',
   backgroundColor: theme.palette.surface.defaultBackground,
 }));
 

package/src/components/Navigation/DropDownMenu/DropDownMenu.tsx

@@ -84,8 +84,8 @@ export const DropdownMenu = ({
           sx={{
             ...menuListContainerSx,
             '&::-webkit-scrollbar': {
-              width: '0.5em',
-              height: '0.5em',
+              width: '0.2em',
+              height: '0.2em',
             },
             '&::-webkit-scrollbar-thumb': {
               backgroundColor: theme.palette.surface.paperBackground,

package/src/components/Navigation/Sidebar/styles.tsx

@@ -13,6 +13,7 @@ export const createSidebarStyles = (collapsed: boolean) => {
     return {
       backgroundColor: theme.palette.surface.defaultBackground,
       height: '100%',
+      width: collapsed ? '60px' : '250px',
       justifyContent: 'space-between',
       overflow: 'hidden',
     };
@@ -57,7 +58,7 @@ export const createSidebarStyles = (collapsed: boolean) => {
       display: 'flex',
       alignItems: 'center',
       justifyContent: collapsed ? 'center' : 'flex-start',
-      padding: '19px 8px',
+      padding: '16px 8px',
       borderRadius: '8px',
       backgroundColor: theme.palette.surface.paperBackground,
     }),

package/src/redux/slices/pageHeaderSlice.ts

@@ -29,7 +29,10 @@ export const pageHeaderSlice = createSlice({
     },
     setDensityForUniqueId: (state, action) => {
       const { uniqueId, density } = action.payload;
-      state[uniqueId] = { ...state[uniqueId], density };
+      state[uniqueId] = {
+        ...state[uniqueId],
+        density,
+      };
     },
     setSearchForUniqueId: (state, action) => {
       const { uniqueId, search } = action.payload;

package/src/themes/commonTheme.ts

@@ -1,5 +1,6 @@
 import { Components } from '@mui/material';
 import { TypographyOptions } from '@mui/material/styles/createTypography';
+import type {} from '@mui/x-data-grid/themeAugmentation';
 import { DarkColorTokens } from './colorTokens/darkColorTokens';
 import { LightColorTokens } from './colorTokens/lightColorTokens';
 import { customCssBaseline } from './customCssBaseline';
@@ -39,6 +40,21 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+      MuiDataGrid: {
+        styleOverrides: {
+          root: {
+            backgroundColor: ColorTokens.surface.paperBackground,
+            border: 'none',
+            height: '100%',
+            minHeight: 'calc(100vh - 292px)',
+            maxHeight: 'calc(100vh - 232px)',
+            '& .MuiDataGrid-columnHeader': {
+              backgroundColor: ColorTokens.surface.grey,
+              height: '48px !important',
+            },
+          },
+        },
+      },
       MuiTimelineContent: {
         styleOverrides: {
           root: {
@@ -206,7 +222,7 @@ export const getCommonTheme = (mode: Theme) => {
             height: '4px',
             borderRadius: '10px',
             backgroundColor: ColorTokens.tertiary.main,
-            margin: '3px',
+            margin: '6px',
             minWidth: '4px',
           },
         },
@@ -259,7 +275,7 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           list: {
             minWidth: '240px',
-            padding: 0,
+            padding: '8px',
             '& > :last-child': {
               borderBottom: 'none',
               '& li': {
@@ -286,13 +302,15 @@ export const getCommonTheme = (mode: Theme) => {
       MuiMenuItem: {
         styleOverrides: {
           root: {
-            minHeight: '50px !important',
-            padding: '10px 16px',
+            minHeight: '40px !important',
+            padding: '8px 12px',
           },
         },
       },
       MuiPagination: {
-        styleOverrides: {},
+        styleOverrides: {
+          root: {},
+        },
       },
       MuiPaginationItem: {
         styleOverrides: {
@@ -458,8 +476,15 @@ export const getCommonTheme = (mode: Theme) => {
               padding: 0,
               maxHeight: '40px',
             },
+            minWidth: '200px',
             overflowY: 'auto',
           },
+          listbox: {
+            padding: 0,
+          },
+          option: {
+            borderBottom: `1px solid ${ColorTokens.border.secondary}`,
+          },
           paper: {
             borderRadius: '10px',
           },

package/src/components/DataDisplay/styles.tsx

@@ -1,6 +0,0 @@
-import { Box, styled } from '@mui/material';
-
-export const DataGridContainer = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
-  margin: '10px',
-}));

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

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