@campxdev/react-blueprint 1.2.17 → 1.2.19

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

@@ -1,51 +1,167 @@
-import { Box, styled, Typography } from '@mui/material';
-import { ReactNode } from 'react';
+import { Box, Divider, InputAdornment, Stack, useTheme } from '@mui/material';
+import { GridColDef } from '@mui/x-data-grid';
+import { motion } from 'framer-motion';
+import { ReactNode, useState } from 'react';
+import {
+  DensitySelector,
+  Icons,
+  TableColumnsSelector,
+  TextField,
+  Typography,
+} from '../../export';
+import {
+  ColumnsAnchor,
+  FiltersAnchor,
+  SearchAnchor,
+} from './components/Anchors';
 
-interface BreadCrumbsLink {
-  name: string | ReactNode;
-  to: string;
-}
 interface PageHeaderProps {
-  title?: string | ReactNode;
-  actions?: ReactNode;
-  links?: BreadCrumbsLink[];
+  uniqueId: string;
+  viewsSlot?: ReactNode;
+  actions?: ReactNode[];
+  columns?: GridColDef[];
 }
 
-const StyledBox = styled(Box)(({ theme }) => ({
-  minHeight: '40px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  margin: '0',
-  flexWrap: 'wrap',
-  '& .actions': {
-    display: 'flex',
-    gap: '1rem',
-    alignItems: 'center',
-    marginLeft: 'auto',
-    '& .MuiButton-root': {
-      height: '40px',
-    },
-  },
-}));
-
-export default function PageHeader({ title, actions, links }: PageHeaderProps) {
+const ViewTab = ({ title }: { title: string }) => {
+  const theme = useTheme();
   return (
-    <StyledBox>
-      <>
-        {links && links.length > 0 ? (
-          <></>
-        ) : (
-          <>
-            {typeof title === 'string' ? (
-              <Typography variant="subtitle2">{title}</Typography>
-            ) : (
-              title
+    <Stack>
+      <Stack direction="row" gap={1} alignItems="center" padding="8px">
+        <Icons.ViewsIcon />
+        <Typography variant="subtitle3">{title}</Typography>
+      </Stack>
+      <Divider
+        style={{
+          background: theme.palette.tertiary.main,
+          height: '4px',
+          width: '92px',
+          borderRadius: '48px',
+        }}
+      />
+    </Stack>
+  );
+};
+
+const motionDivVariants = {
+  collapsed: { height: '48px' },
+  expanded: { height: '102px' },
+};
+
+const motionTextFieldVariants = {
+  collapsed: { width: '40px' },
+  expanded: { width: '300px' },
+};
+
+export const PageHeader = ({
+  uniqueId,
+  actions,
+  columns,
+  viewsSlot = <Box></Box>,
+}: PageHeaderProps) => {
+  const [expanded, setExpanded] = useState(false);
+  const [expandedSearch, setExpandedSearch] = useState(false);
+  const theme = useTheme();
+
+  const handleSearchClick = () => {
+    setExpandedSearch(true);
+  };
+
+  const handleSearchBlur = () => {
+    setExpandedSearch(false);
+  };
+
+  return (
+    <motion.div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        margin: '8px 0px',
+        padding: '0px 16px',
+        height: '48px',
+      }}
+      variants={motionDivVariants}
+      animate={expanded ? 'expanded' : 'collapsed'}
+      transition={{ duration: 0.3, ease: 'easeInOut' }}
+    >
+      <Stack
+        direction="row"
+        width="100%"
+        alignItems="center"
+        justifyContent="space-between"
+      >
+        {columns ? <ViewTab title="Default View" /> : viewsSlot}
+        <Stack direction="row" alignItems="center" gap={1}>
+          {columns && (
+            <FiltersAnchor
+              handleClick={() => {
+                setExpanded(!expanded);
+              }}
+              showDot={false}
+            />
+          )}
+          {columns && (
+            <ColumnsAnchor
+              handleClick={() => {
+                setExpanded(!expanded);
+              }}
+              showDot={false}
+            />
+          )}
+          <motion.div
+            variants={motionTextFieldVariants}
+            animate={expandedSearch ? 'expanded' : 'collapsed'}
+            transition={{ duration: 0.3 }}
+          >
+            {!expandedSearch && (
+              <SearchAnchor handleClick={handleSearchClick} showDot={false} />
             )}
-          </>
-        )}
-      </>
-      <Box className="actions">{actions}</Box>
-    </StyledBox>
+            {expandedSearch && (
+              <TextField
+                containerProps={{
+                  margin: '0px',
+                }}
+                size="small"
+                placeholder="Search by name"
+                // onChange={(e) => { setInput(e.target.value); }}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Icons.SearchIcon />
+                    </InputAdornment>
+                  ),
+                }}
+                onBlur={handleSearchBlur}
+                autoFocus
+              />
+            )}
+          </motion.div>
+          {columns && <DensitySelector uniqueId={uniqueId} />}
+          {actions?.map((action, index) => action)}
+        </Stack>
+      </Stack>
+      {expanded && (
+        <Divider
+          style={{
+            background: theme.palette.border.primary,
+          }}
+        />
+      )}
+      {expanded && (
+        <Stack direction="row" width="100%" alignItems="center" gap={2}>
+          {columns && (
+            <TableColumnsSelector columns={columns} uniqueId={uniqueId} />
+          )}
+          <Divider
+            orientation="vertical"
+            style={{
+              height: '20px',
+              background: theme.palette.border.primary,
+            }}
+          />
+          <Stack direction="row"></Stack>
+        </Stack>
+      )}
+    </motion.div>
   );
-}
+};

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

@@ -0,0 +1,84 @@
+import { Badge, Box, IconButton, styled } from '@mui/material';
+import { ReactNode } from 'react';
+import { DropDownIcon, Icons } from '../../../export';
+
+const AnchorContainer = styled(Box)(({ theme }) => ({
+  height: '40px',
+  width: '40px',
+  backgroundColor: theme.palette.secondary.main,
+  borderRadius: '5px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+export const DensityAnchor = ({
+  handleClick,
+  icon,
+}: {
+  handleClick: (e: any) => void;
+  icon: ReactNode;
+}) => {
+  return (
+    <DropDownIcon
+      icon={{
+        icon: <AnchorContainer>{icon}</AnchorContainer>,
+      }}
+      handleClick={handleClick}
+    />
+  );
+};
+
+export const ColumnsAnchor = ({
+  handleClick,
+  showDot = false,
+}: {
+  handleClick: (e: any) => void;
+  showDot: boolean;
+}) => {
+  return (
+    <Badge overlap="circular" variant={showDot ? 'dot' : 'standard'}>
+      <IconButton onClick={handleClick}>
+        <AnchorContainer>
+          <Icons.ColumnsIcon />
+        </AnchorContainer>
+      </IconButton>
+    </Badge>
+  );
+};
+
+export const FiltersAnchor = ({
+  handleClick,
+  showDot,
+}: {
+  handleClick: (e: any) => void;
+  showDot: boolean;
+}) => {
+  return (
+    <Badge overlap="circular" variant={showDot ? 'dot' : 'standard'}>
+      <IconButton onClick={handleClick}>
+        <AnchorContainer>
+          <Icons.FilterIcon />
+        </AnchorContainer>
+      </IconButton>
+    </Badge>
+  );
+};
+
+export const SearchAnchor = ({
+  handleClick,
+  showDot,
+}: {
+  handleClick: (e: any) => void;
+  showDot: boolean;
+}) => {
+  return (
+    <Badge overlap="circular" variant={showDot ? 'dot' : 'standard'}>
+      <IconButton onClick={handleClick}>
+        <AnchorContainer>
+          <Icons.SearchIcon />
+        </AnchorContainer>
+      </IconButton>
+    </Badge>
+  );
+};

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

@@ -0,0 +1,96 @@
+import { MenuListProps, MenuProps, Stack, useTheme } from '@mui/material';
+import { GridDensity } from '@mui/x-data-grid';
+import { capitalize } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState, setDensity } from '../../../../../redux/export';
+import { Button, DropdownMenu, Icons, Typography } from '../../../../export';
+import { DensityAnchor } from '../Anchors';
+
+export type DensitySelectorProps = {
+  menuProps?: Omit<MenuProps, 'open'>;
+  menuListProps?: MenuListProps;
+  uniqueId: string;
+};
+
+export const DensitySelector = ({
+  uniqueId,
+  ...props
+}: DensitySelectorProps) => {
+  const dispatch = useDispatch();
+  const density = useSelector(
+    (state: RootState) =>
+      state.pageHeaderSlice[uniqueId]?.density || 'standard',
+  );
+  const gridDensity: GridDensity[] = ['compact', 'standard', 'comfortable'];
+
+  const theme = useTheme();
+
+  const getIcon = (type: GridDensity, size: number) => {
+    switch (type) {
+      case 'standard':
+        return <Icons.StandardIcon size={size} />;
+      case 'compact':
+        return <Icons.CompactIcon size={size} />;
+      case 'comfortable':
+        return <Icons.ComfortableIcon size={size} />;
+    }
+  };
+
+  const handleMenuClick = (value: GridDensity, close: () => void) => {
+    dispatch(
+      setDensity({
+        uniqueId: uniqueId,
+        density: value,
+      }),
+    );
+    close();
+  };
+
+  return (
+    <DropdownMenu
+      menuListProps={{
+        sx: {
+          width: '220px',
+          padding: '12px',
+          maxHeight: '350px',
+        },
+        ...props.menuListProps,
+      }}
+      anchor={({ open }: { open: (e: any) => void }) => (
+        <DensityAnchor handleClick={open} icon={getIcon(density, 16)} />
+      )}
+      menuProps={{
+        ...props.menuProps,
+      }}
+      menuHeader={
+        <Typography color={theme.palette.text.secondary} variant="label1">
+          Row Density
+        </Typography>
+      }
+      menuListContainerSx={{
+        margin: '10px 2px 0px 0px',
+        gap: 1,
+      }}
+      menu={({ close }) =>
+        gridDensity.map((item) => (
+          <Button
+            onClick={() => handleMenuClick(item, close)}
+            variant="text"
+            fullWidth
+          >
+            <Stack
+              direction="row"
+              justifyContent="flex-start"
+              alignItems="center"
+              gap={2}
+              width="100%"
+            >
+              {getIcon(item, 20)}
+              <Typography variant="label2">{capitalize(item)}</Typography>
+            </Stack>
+          </Button>
+        ))
+      }
+    />
+  );
+};

package/src/components/{Navigation/TableColumnFilters/TableColumnFilters.tsx → Layout/PageHeader/components/TableColumnsSelector/TableColumnsSelector.tsx}

@@ -2,32 +2,36 @@ import { KeyboardArrowDown } from '@mui/icons-material';
 import { MenuListProps, MenuProps, Typography, useTheme } from '@mui/material';
 import { GridColDef, GridColumnVisibilityModel } from '@mui/x-data-grid';
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { setColumnVisibilityModel } from '../../../state/export';
-import { Button, Icons, SearchBar, SingleCheckBox } from '../../export';
-import { DropdownMenu } from '../export';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  RootState,
+  setColumnVisibilityModel,
+} from '../../../../../redux/export';
+import { Button, Icons, SearchBar, SingleCheckBox } from '../../../../export';
+import { DropdownMenu } from '../../../../Navigation/export';
 
-export type TableColumnFiltersProps = {
+export type TableColumnsSelectorProps = {
   columns: GridColDef[];
   menuProps?: Omit<MenuProps, 'open'>;
   menuListProps?: MenuListProps;
   uniqueId: string;
 };
 
-export const TableColumnFilters = ({
+export const TableColumnsSelector = ({
   columns,
   uniqueId,
   ...props
-}: TableColumnFiltersProps) => {
+}: TableColumnsSelectorProps) => {
   const dispatch = useDispatch();
 
-  const [columnVisibilityModel, setGridColumnVisibilityModels] =
-    useState<GridColumnVisibilityModel>(
+  const columnVisibilityModel = useSelector(
+    (state: RootState) =>
+      state.pageHeaderSlice[uniqueId]?.columnVisibilityModel ||
       columns.reduce((acc, column) => {
         acc[column.field] = true;
         return acc;
       }, {} as GridColumnVisibilityModel),
-    );
+  );
 
   const [search, setSearch] = useState<string>('');
 
@@ -42,15 +46,12 @@ export const TableColumnFilters = ({
       ...columnVisibilityModel,
       [column.field]: !checked,
     };
-    setGridColumnVisibilityModels(newColumnVisibilityModel);
-    if (uniqueId) {
-      dispatch(
-        setColumnVisibilityModel({
-          uniqueId: uniqueId,
-          columnVisibilityModel: newColumnVisibilityModel,
-        }),
-      );
-    }
+    dispatch(
+      setColumnVisibilityModel({
+        uniqueId: uniqueId,
+        columnVisibilityModel: newColumnVisibilityModel,
+      }),
+    );
   };
   return (
     <>

package/src/components/Layout/export.ts

@@ -1,4 +1,6 @@
 import { AppHeader } from './AppHeader/AppHeader';
 import { TabsLayout } from './TabsLayout/TabsLayout';
 
+export * from './PageHeader/components/DensitySelector/DensitySelector';
+
 export { AppHeader, TabsLayout };

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

@@ -4,6 +4,7 @@ import {
   Stack,
   styled,
 } from '@mui/material';
+import _ from 'lodash';
 import { Link } from 'react-router-dom';
 import { Typography } from '../../export';
 
@@ -36,26 +37,34 @@ export const Breadcrumbs = ({ pathTrimCount, ...rest }: BreadcrumbsProps) => {
   currentPathArray.splice(0, pathTrimCount + 1);
 
   return (
-    <Stack direction={'row'} alignItems={'center'}>
+    <BreadcrumbContainer>
       <MuiBreadcrumbs {...rest}>
         {currentPathArray?.map((item, index) => {
           basePath = basePath + `/${item}`;
           return index === currentPathArray.length - 1 ? (
             <Typography variant="subtitle2">
-              {decodeURIComponent(item).split(specialCharacter)[0]}
+              {_.startCase(decodeURIComponent(item).split(specialCharacter)[0])}
             </Typography>
           ) : (
-            <StyledLink key={index} to={basePath}>
-              {decodeURIComponent(item).split(specialCharacter)[0]}
-            </StyledLink>
+            <BreadcrumbLink key={index} to={basePath}>
+              {_.startCase(decodeURIComponent(item).split(specialCharacter)[0])}
+            </BreadcrumbLink>
           );
         })}
       </MuiBreadcrumbs>
-    </Stack>
+    </BreadcrumbContainer>
   );
 };
 
-const StyledLink = styled(Link)(({ theme }) => ({
+const BreadcrumbContainer = styled(Stack)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  width: '100%',
+  justifyContent: 'flex-start',
+  height: '52px',
+}));
+
+const BreadcrumbLink = styled(Link)(({ theme }) => ({
   textDecoration: 'none',
   transition: 'color 0.3s ease-in-out',
   color: theme.palette.text.tertiary,

package/src/components/Navigation/Stepper/Stepper.tsx

@@ -49,7 +49,9 @@ export const Stepper = ({
               activeStep={index < activeStep}
               isLastStep={index === steps?.length - 1}
             >
-              <Typography variant="label2">{item?.description}</Typography>
+              <Typography fontSize={'12px'} variant="label2">
+                {item?.description}
+              </Typography>
             </StyledStepContent>
           </Step>
         ))}

package/src/components/Navigation/Stepper/StepperComponents.tsx

@@ -17,15 +17,17 @@ interface StepContentProps {
 
 export const StyledStepContent = styled(StepContent)<StepContentProps>(
   ({ theme, isVertical, activeStep, isLastStep }) => ({
+    ...(isVertical && {
+      marginLeft: '11px',
+    }),
     ...(isVertical &&
       activeStep &&
       !isLastStep && {
-        borderLeft: `2px solid ${theme.palette.primary.light}`,
+        borderLeft: `1px solid ${theme.palette.primary.light}`,
       }),
     ...(!isVertical && {
       borderLeft: 'none',
-      paddingLeft: '20px',
-      margin: '20px 0px 0px 20px',
+      marginLeft: '20px',
     }),
   }),
 );
@@ -39,15 +41,28 @@ export const Connector = styled(StepConnector)<ConnectorProps>(
     [`&.${stepConnectorClasses.active}`]: {
       [`& .${stepConnectorClasses.line}`]: {
         [isVertical ? 'borderLeft' : 'border']:
-          `2px solid ${theme.palette.primary.light}`,
+          `1px solid ${theme.palette.primary.light}`,
       },
     },
     [`&.${stepConnectorClasses.completed}`]: {
       [`& .${stepConnectorClasses.line}`]: {
         [isVertical ? 'borderLeft' : 'border']:
-          `2px solid ${theme.palette.primary.light}`,
+          `1px solid ${theme.palette.primary.light}`,
       },
     },
+    ...(isVertical
+      ? {
+          top: '0px',
+          marginLeft: '11px',
+          [`& .${stepConnectorClasses.line}`]: {
+            minHeight: '28px',
+          },
+        }
+      : {
+          left: 'calc(-50% + 8px)',
+          right: 'calc(50% + 7px)',
+          top: '7.5px',
+        }),
   }),
 );
 
@@ -65,7 +80,6 @@ export function StepIcon(props: StepIconProps) {
 
 const StepIconRoot = styled('div')<{}>(({ theme }) => ({
   width: 20,
-  height: 20,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',

package/src/components/Navigation/export.ts

@@ -1,3 +1,4 @@
+export * from '../Layout/PageHeader/components/TableColumnsSelector/TableColumnsSelector';
 export * from './Breadcrumbs/Breadcrumbs';
 export * from './ConfirmDialog/ConfirmDialog';
 export * from './Dialog/Dialog';
@@ -10,7 +11,5 @@ export * from './ManageFilters/ManageFilters';
 export * from './PreviewFiles/PreviewFiles';
 export * from './Sidebar/Sidebar';
 export * from './Stepper/Stepper';
-export * from './TableColumnFilters/TableColumnFilters';
-export * from './TableDensityFilter/TableDensityFilter';
 export * from './TabsContainer/TabsContainer';
 export * from './UploadDialog/UploadDialog';

package/src/hooks/usePageHeader.ts

@@ -2,16 +2,17 @@ import { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { v4 } from 'uuid';
 import {
-  FilterState,
+  PageHeaderState,
   resetStateForUniqueId,
-} from '../state/filters/filtersSlice';
-import { RootState } from '../state/store';
+} from '../redux/slices/pageHeaderSlice';
+import { RootState } from '../redux/store';
 
 export const usePageHeader = () => {
   const uuidRef = useRef(v4());
   const dispatch = useDispatch();
   const filterState = useSelector(
-    (state: RootState) => state.filters[uuidRef.current] || ({} as FilterState),
+    (state: RootState) =>
+      state.pageHeaderSlice[uuidRef.current] || ({} as PageHeaderState),
   );
 
   const resetState = () => {

package/src/index.tsx

@@ -4,8 +4,8 @@ import App from './App';
 
 import { Provider } from 'react-redux';
 import './index.css';
+import { store } from './redux/store';
 import reportWebVitals from './reportWebVitals';
-import { store } from './state/store';
 import { MuiThemeProvider } from './themes/MuiThemeProvider';
 
 const root = ReactDOM.createRoot(

package/src/redux/export.ts

@@ -0,0 +1,2 @@
+export * from './slices/pageHeaderSlice';
+export * from './store';