@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.2

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

@@ -1,69 +1,51 @@
-import { Divider, Stack, useTheme } from '@mui/material';
-import { GridColDef } from '@mui/x-data-grid';
-import { motion } from 'framer-motion';
 import {
-  cloneElement,
-  Fragment,
-  ReactElement,
-  ReactNode,
-  useState,
-} from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useSearchParams } from 'react-router-dom';
+  Button,
+  DropdownMenu,
+  Separator,
+  Typography,
+} from '@/components/export';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { cn } from '@/lib/utils';
+import { EllipsisVertical, Funnel, Plus } from 'lucide-react';
+import { cloneElement, ReactElement, ReactNode } from 'react';
+import { useDispatch } from 'react-redux';
 import { setFilterByNameForUniqueId } from '../../../redux/slices/pageHeaderSlice';
-import { RootState } from '../../../redux/store';
-import { DensitySelector, TableColumnsSelector } from '../../export';
-import { FiltersAnchor } from './components/Anchors';
-import { ManageFilters } from './components/ManageFilters/ManageFilters';
-import { SearchBar } from './components/SearchBar';
-import { Views, ViewsProps, ViewTab } from './components/Views/Views';
-import { ViewsActions } from './components/Views/ViewsActions';
+import { SearchBarProps } from '../../Input/SearchBar/SearchBar';
+import { Breadcrumbs } from '../../Navigation/Breadcrumbs/Breadcrumbs';
+import { PageHeaderSearchBar } from './components/SearchBar';
 
 interface PageHeaderProps {
   uniqueId?: string;
-  viewsSlot?: ReactNode;
-  filterComponents?: ReactElement[];
-  viewsProps?: Omit<ViewsProps, 'uniqueId'>;
-  actions?: ReactNode[];
-  columns?: GridColDef[];
-  searchText?: string;
-  defaultShowLabels?: string[];
+  pathTrimCount: number;
+  searchButtonProps?: SearchBarProps;
+  filterButtonProps?: {
+    label?: string;
+    startIcon?: ReactNode;
+    components: ReactElement[];
+  };
+  addButtonProps?: {
+    label?: string;
+    onClick: any;
+  };
+  actionProps?: {
+    menu: ReactNode[] | ((props: { close: () => void }) => ReactNode[]);
+  };
 }
 
-const motionDivVariants = {
-  collapsed: { height: '48px' },
-  expanded: { height: '108px' },
-};
-
-export const PageHeader = ({
+const PageHeader = ({
   uniqueId,
-  actions = [],
-  filterComponents = [],
-  defaultShowLabels = [],
-  columns,
-  viewsSlot = <ViewTab title="Default View" active={true} onClick={() => {}} />,
-  searchText = 'Search',
-  viewsProps,
+  pathTrimCount,
+  searchButtonProps,
+  filterButtonProps,
+  addButtonProps,
+  actionProps,
 }: PageHeaderProps) => {
-  const [expanded, setExpanded] = useState(false);
-
-  const [searchParams] = useSearchParams();
-
-  const viewId = searchParams.get('viewId');
-
-  const allFilterLabels = filterComponents.map(
-    (filter) => filter.props['label'] || 'Label Not Found',
-  );
-
-  const initialHiddenLabels = allFilterLabels.filter(
-    (label) => !defaultShowLabels.includes(label),
-  );
-
-  const [hiddenLabels, setHiddenLabels] =
-    useState<string[]>(initialHiddenLabels);
-
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const dispatch = useDispatch();
 
+  const showActionBar =
+    searchButtonProps || filterButtonProps || addButtonProps || actionProps;
+
   const wrapProps = (element: ReactElement): ReactElement => {
     const { name } = element.props;
     if (name && uniqueId) {
@@ -82,133 +64,78 @@ export const PageHeader = ({
     return element;
   };
 
-  const theme = useTheme();
-
-  const filters = useSelector((state: RootState) =>
-    uniqueId ? state.pageHeader[uniqueId]?.filters : undefined,
-  );
-
-  const hasFilters =
-    !!filters &&
-    Object.entries(filters).some(([key, value]) => {
-      return (
-        !['search', 'limit', 'offset', 'skip'].includes(key) && value !== null
-      );
-    });
-
-  const isTableMode = columns && uniqueId;
-
-  const finalFilterComponents = filterComponents.filter(
-    (filter) => !hiddenLabels.includes(filter.props['label']),
-  );
-
   return (
-    <motion.div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        height: '48px',
-        gap: '8px',
-      }}
-      variants={motionDivVariants}
-      animate={expanded ? 'expanded' : 'collapsed'}
-      transition={{ duration: 0.3, ease: 'easeInOut' }}
-    >
-      <Stack
-        direction="row"
-        width="100%"
-        alignItems="center"
-        justifyContent="space-between"
-        height="48px"
+    <div>
+      <Breadcrumbs pathTrimCount={pathTrimCount} />
+      <div
+        className={cn(
+          'flex flex-col md:flex-row gap-1 md:gap-2  items-center  w-full px-1 pb-2 md:p-0 border-b',
+          showActionBar ? '' : 'hidden',
+        )}
       >
-        {isTableMode && viewsProps ? (
-          <Views {...viewsProps} uniqueId={uniqueId} />
-        ) : (
-          <Stack direction="row" gap={2} justifyContent="flex-start">
-            {viewsSlot}
-          </Stack>
+        {searchButtonProps && (
+          <PageHeaderSearchBar
+            className="w-full"
+            containerClassName="w-full md:w-md"
+            uniqueId={uniqueId}
+            {...searchButtonProps}
+          />
         )}
-
-        <Stack direction="row" alignItems="center">
-          {isTableMode && (
-            <FiltersAnchor
-              handleClick={() => {
-                setExpanded(!expanded);
-              }}
-              showDot={hasFilters}
+        <div className="flex gap-2 items-center w-full px-2 md:p-0">
+          {filterButtonProps && (
+            <DropdownMenu
+              anchor={({ open }) => (
+                <Button
+                  variant={'outline'}
+                  onClick={open}
+                  startIcon={filterButtonProps?.startIcon ?? <Funnel />}
+                >
+                  {isSmallScreen ? '' : filterButtonProps.label ?? 'Filters'}
+                </Button>
+              )}
+              useMenuSlot={true}
+              menuSlot={() => (
+                <div className="flex flex-col gap-2 p-1 w-80">
+                  <Typography
+                    variant={'lead'}
+                    className="flex gap-1 items-center p-1 pb-0 text-sm"
+                  >
+                    <Funnel size={16} /> Advanced Filters
+                  </Typography>
+                  <Separator />
+                  {filterButtonProps.components.map((component, index) => (
+                    <div key={index} className="w-full ">
+                      {wrapProps(component)}
+                    </div>
+                  ))}
+                </div>
+              )}
             />
           )}
-          {isTableMode && (
-            <TableColumnsSelector columns={columns} uniqueId={uniqueId} />
-          )}
-          {isTableMode && (
-            <SearchBar searchText={searchText} uniqueId={uniqueId} />
+          {addButtonProps && (
+            <Button
+              variant={'default'}
+              onClick={addButtonProps.onClick}
+              startIcon={<Plus />}
+              {...(isSmallScreen && { className: 'flex-1' })}
+            >
+              {addButtonProps.label ?? 'Add'}
+            </Button>
           )}
-          {isTableMode && <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"
-          justifyContent="space-between"
-        >
-          <Stack
-            key={viewId ?? 'default'}
-            direction={'row'}
-            alignItems="center"
-            gap={2}
-          >
-            {finalFilterComponents.map((filter, index) => (
-              <Fragment key={index}>
-                {wrapProps(filter)}
-                {index < finalFilterComponents.length - 1 && (
-                  <Divider
-                    orientation="vertical"
-                    style={{
-                      height: '20px',
-                      background: theme.palette.border.primary,
-                    }}
-                  />
-                )}
-              </Fragment>
-            ))}
-            <ManageFilters
-              filterLabels={filterComponents.map((filter) => {
-                return filter.props['label'] || 'Label Not Found';
-              })}
-              selectedFilterLabels={finalFilterComponents.map(
-                (filter) => filter.props['label'] || 'Label Not Found',
+          {actionProps && (
+            <DropdownMenu
+              anchor={({ open }) => (
+                <Button variant={'outline'} onClick={open}>
+                  <EllipsisVertical />
+                </Button>
               )}
-              handleCheckboxChange={function (
-                label: string,
-                checked: boolean,
-              ): void {
-                if (checked) {
-                  setHiddenLabels(hiddenLabels.filter((l) => label !== l));
-                } else {
-                  setHiddenLabels([...hiddenLabels, label]);
-                }
-              }}
-              handleReset={() => {
-                setHiddenLabels(initialHiddenLabels);
-              }}
+              menu={actionProps.menu}
             />
-          </Stack>
-          {viewsProps && uniqueId && (
-            <ViewsActions {...viewsProps} uniqueId={uniqueId} />
           )}
-        </Stack>
-      )}
-    </motion.div>
+        </div>
+      </div>
+    </div>
   );
 };
+
+export { PageHeader, type PageHeaderProps };

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

@@ -1,34 +1,23 @@
-import { InputAdornment, Stack } from '@mui/material';
-import { AnimatePresence, motion } from 'framer-motion';
-import { debounce } from 'lodash';
-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 = ({
-  uniqueId,
-  searchText,
-}: {
-  uniqueId: string;
-  searchText: string;
+import { SearchBar, type SearchBarProps } from '../../../export';
+
+export const PageHeaderSearchBar = ({
+  uniqueId = 'default',
+  searchText = 'Search',
+  ...props
+}: SearchBarProps & {
+  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 | null) => {
+  const handleChange = (value: string) => {
     dispatch(
       setSearchForUniqueId({
         uniqueId: uniqueId,
@@ -37,73 +26,12 @@ export const SearchBar = ({
     );
   };
 
-  const debouncedSendRequest = useMemo(
-    () => debounce(onSearch, 300),
-    [onSearch],
-  );
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    debouncedSendRequest(e.target.value);
-  };
-
-  const handleClearClick = (e: any) => {
-    onSearch(null);
-    setExpandedSearch(false);
-  };
-
   return (
-    <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>
+    <SearchBar
+      placeholder={searchText}
+      value={search || ''}
+      onSearch={handleChange}
+      {...props}
+    />
   );
 };

package/src/components/Layout/Sheet/Sheet.tsx

@@ -0,0 +1,10 @@
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/shadcn-components/Layout/Sheet/Sheet';

package/src/components/Layout/UserBox/UserBox.tsx

@@ -0,0 +1,126 @@
+import { LogOut, SquareArrowOutUpRight } from 'lucide-react';
+import { ReactNode } from 'react';
+import { CircularAvatar } from '../../DataDisplay/Avatar/Avatar';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { DropdownMenu } from '../../Navigation/DropDownMenu/DropDownMenu';
+import { DropdownMenuItem } from '../../Navigation/DropDownMenu/DropdownMenuItem';
+
+export default function UserBox({
+  fullName,
+  onLogoutClick,
+  designation = '',
+  actions,
+  profileUrl,
+  profileSx = {},
+  institutionsData,
+  changePassword,
+  avatar = true,
+  navigationIcon = true,
+  showActiveDevices = true,
+  onAccountClick,
+  onActiveDevicesClick,
+  onChangeInstitutionClick,
+  onAvatarClick,
+}: {
+  fullName: string;
+  designation?: string;
+  institutionsData?: any[];
+  actions: ReactNode[];
+  onLogoutClick?: () => void;
+  profileUrl?: string;
+  changePassword?: ReactNode;
+  profileSx?: any;
+  avatar?: boolean;
+  navigationIcon?: boolean;
+  showActiveDevices?: boolean;
+  // New custom onClick handlers
+  onAccountClick?: () => void;
+  onActiveDevicesClick?: () => void;
+  onChangeInstitutionClick?: () => void;
+  onAvatarClick?: () => void;
+}) {
+  const handleAccountClick = () => {
+    if (onAccountClick) {
+      onAccountClick();
+    } else {
+      console.log('Account clicked');
+    }
+  };
+
+  const handleActiveDevicesClick = () => {
+    if (onActiveDevicesClick) {
+      onActiveDevicesClick();
+    } else {
+      alert('Action 1 clicked');
+    }
+  };
+
+  return (
+    <>
+      <DropdownMenu
+        anchor={({ open }) => (
+          <CircularAvatar
+            text={fullName}
+            src={profileUrl}
+            onClick={(e) => {
+              if (onAvatarClick) {
+                onAvatarClick();
+              } else {
+                open(e);
+              }
+            }}
+            className={profileSx}
+          />
+        )}
+        menu={[
+          <DropdownMenuItem
+            label={
+              <div className="w-full flex flex-col gap-1">
+                <Typography variant="p">Account</Typography>
+                <div className="flex flex-row items-center justify-between">
+                  {avatar && (
+                    <div className="flex flex-row gap-1">
+                      <CircularAvatar
+                        text={fullName}
+                        src={profileUrl}
+                        className={profileSx}
+                      />
+                      <div className="flex flex-row justify-between">
+                        <div className="flex flex-col">
+                          <Typography variant="p">{fullName}</Typography>
+                          <Typography variant="small">{designation}</Typography>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                  {navigationIcon && <SquareArrowOutUpRight size={16} />}
+                </div>
+              </div>
+            }
+            onClick={handleAccountClick}
+          />,
+          showActiveDevices && (
+            <DropdownMenuItem
+              label={
+                <div className="flex flex-col gap-1">
+                  <Typography variant="p">Active Devices</Typography>
+                </div>
+              }
+              onClick={handleActiveDevicesClick}
+            />
+          ),
+          actions.map((action) => action),
+          <DropdownMenuItem
+            label={
+              <div className="w-full flex flex-row gap-1 justify-between">
+                <Typography variant="p">Logout</Typography>
+                <LogOut size={20} />
+              </div>
+            }
+            onClick={onLogoutClick || (() => console.log('Logout clicked'))}
+          />,
+        ]}
+      />
+    </>
+  );
+}

package/src/components/Layout/export.ts

@@ -1,11 +1,10 @@
 // AppLayout exports
 export * from './AppLayout';
-// Legacy header exports
-export * from './AppHeader/AppHeader';
-export * from './AppHeader/AppHeaderV2';
+
 // Other layout components
-export * from './FloatingContainer/FloatingContainer';
+export * from './Sheet/Sheet';
+export * from './UserBox/UserBox';
+
+// Page Components
 export * from './PageContent/PageContent';
-export * from './PageHeader/components/DensitySelector/DensitySelector';
 export * from './PageHeader/PageHeader';
-export * from './TabsLayout/TabsLayout';