@campxdev/react-blueprint 1.9.6 → 2.0.1

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

@@ -1,144 +0,0 @@
-import { Avatar, Box, Stack, Typography, useTheme } from '@mui/material';
-import { ReactNode } from 'react';
-import { DropdownMenu } from '../../../Navigation/DropDownMenu/DropDownMenu';
-import { DropdownMenuItem } from '../../../Navigation/DropDownMenu/DropdownMenuItem';
-import { StyledMenuItem } from '../../../Navigation/DropDownMenu/styles';
-import { DialogButton, Icons } from '../../../export';
-import SwitchInstitution from './SwitchInstitution';
-
-const getStartingLetters = (text: string) => {
-  if (!text) return '';
-  return text
-    .split(' ')
-    ?.map((w) => w[0])
-    ?.join('');
-};
-
-export default function UserBox({
-  fullName,
-  onLogoutClick,
-  designation = '',
-  actions,
-  profileUrl,
-  profileSx = {},
-  institutionsData,
-  changePassword,
-  avatar = true, // Make avatar optional, default to true
-  navigationIcon = true, // Make navigationIcon optional, default to true
-  showActiveDevices = true, // Make active devices optional, default to true
-}: {
-  fullName: string;
-  designation?: string;
-  institutionsData?: any[];
-  actions: ReactNode[];
-  onLogoutClick?: any;
-  profileUrl?: string;
-  changePassword?: ReactNode;
-  profileSx?: any;
-  avatar?: boolean; // Define avatar as optional
-  navigationIcon?: boolean; // Define navigationIcon as optional
-  showActiveDevices?: boolean; // Define active devices as optional
-}) {
-  const theme = useTheme();
-
-  return (
-    <>
-      <DropdownMenu
-        anchor={({ open }) => (
-          <Avatar src={profileUrl ?? ''} onClick={open} sx={profileSx}>
-            {getStartingLetters(fullName)}
-          </Avatar>
-        )}
-        menuListProps={{
-          sx: {
-            width: '300px',
-            borderRadius: '5px',
-          },
-        }}
-        menu={[
-          <DropdownMenuItem
-            label={
-              <Stack gap={0.5} sx={{ width: '100%' }}>
-                <Typography variant="subtitle3">Account</Typography>
-                <Stack
-                  direction={'row'}
-                  alignItems={'center'}
-                  justifyContent={'space-between'}
-                >
-                  {avatar && (
-                    <Stack direction={'row'} gap={1}>
-                      <Avatar src={profileUrl ?? ''} sx={profileSx}>
-                        {getStartingLetters(fullName)}
-                      </Avatar>
-                      <Stack direction={'row'} justifyContent={'space-between'}>
-                        <Stack>
-                          <Typography variant="subtitle3">
-                            {fullName}
-                          </Typography>
-                          <Typography variant="caption">
-                            {designation}
-                          </Typography>
-                        </Stack>
-                      </Stack>
-                    </Stack>
-                  )}
-                  {navigationIcon && <Icons.NavigationIcon />}
-                </Stack>
-              </Stack>
-            }
-            onClick={() => console.log('Action 1 clicked')}
-          />,
-          showActiveDevices && (
-            <DropdownMenuItem
-              label={
-                <Stack gap={0.5}>
-                  <Typography variant="subtitle3">Active Devices</Typography>
-                </Stack>
-              }
-              onClick={() => alert('Action 1 clicked')}
-            />
-          ),
-          <Box>
-            <DialogButton
-              anchor={({ open }) => (
-                <StyledMenuItem
-                  onClick={() => {
-                    open();
-                  }}
-                >
-                  Change Institution
-                </StyledMenuItem>
-              )}
-              content={({ close }) => (
-                <SwitchInstitution
-                  close={close}
-                  institutions={institutionsData}
-                />
-              )}
-              title=""
-            />
-          </Box>,
-
-          actions.map((action) => action),
-          <DropdownMenuItem
-            label={
-              <Stack
-                gap={0.5}
-                direction={'row'}
-                justifyContent={'space-between'}
-                width={'100%'}
-              >
-                <Typography variant="subtitle3">Logout</Typography>
-                <Icons.LogoutIcon
-                  hoverColor={theme.palette.tertiary.main}
-                  size={20}
-                />
-              </Stack>
-            }
-            onClick={onLogoutClick}
-          />,
-        ]}
-      />
-    </>
-  );
-}

package/src/components/Layout/AppHeader/styles/styles.tsx

@@ -1,61 +0,0 @@
-import { Box, Divider, styled } from '@mui/material';
-import { Link } from 'react-router-dom';
-
-export const StyledHeader = styled('header')(
-  ({
-    theme,
-    headerSx,
-  }: {
-    theme?: any;
-    collapsed: boolean;
-    headerSx?: any;
-  }) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: '60px',
-    minHeight: '60px',
-    width: '100%',
-    backgroundColor: theme.palette.background.paper,
-    justifyContent: 'space-between',
-    padding: '0 32px',
-    borderRadius: '8px',
-
-    [theme.breakpoints.down('md')]: {
-      height: '50px',
-      minHeight: '50px',
-      width: headerSx?.width?.sm ? headerSx?.width?.sm : 'calc(100% - 84px)',
-      marginTop: '12px',
-      padding: '0 12px',
-    },
-    ...headerSx,
-  }),
-);
-
-export const StyledDivider = styled(Divider)(({ theme }) => ({
-  orientation: 'vertical',
-  margin: '8px 0px',
-  border: `0.5px solid ${theme.palette.border.primary}`,
-}));
-
-export const StyledActionBox = styled(Box)(({ theme }) => ({
-  marginRight: '20px',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '14px',
-}));
-
-export const StyledRouterLink = styled(Link)(() => ({
-  textDecoration: 'none',
-}));
-
-export const StyledImageWrapper = styled(Box)(() => ({
-  width: 'auto',
-  height: '22px',
-  display: 'flex',
-  img: {
-    width: '100%',
-    height: '25px',
-    objectFit: 'contain',
-  },
-}));

package/src/components/Layout/FloatingContainer/FloatingContainer.tsx

@@ -1,38 +0,0 @@
-import { Box, BoxProps, styled } from '@mui/material';
-import { ReactNode } from 'react';
-import { Typography } from '../../export';
-
-export type FloatingContainerProps = {
-  title?: string;
-  content: ReactNode;
-  contentProps?: BoxProps;
-  titleProps?: BoxProps;
-};
-
-const FloatingContainer = styled(Box)(({ theme }) => ({
-  borderRadius: '8px',
-  minHeight: '100px',
-  minWidth: '60%',
-  backgroundColor: theme.palette.surface.paperBackground,
-}));
-
-const Title = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.surface.grey,
-  height: '45px',
-  display: 'flex',
-  alignItems: 'center',
-  paddingLeft: '16px',
-}));
-
-export const FloatingContent = (props: FloatingContainerProps) => {
-  return (
-    <FloatingContainer {...props.contentProps}>
-      {props.title && (
-        <Title {...props.titleProps}>
-          <Typography variant="subtitle3">{props.title}</Typography>
-        </Title>
-      )}
-      {props.content}
-    </FloatingContainer>
-  );
-};

package/src/components/Layout/PageContent/PageContent.tsx

@@ -1,57 +0,0 @@
-import { Box, BoxProps, styled } from '@mui/material';
-
-export type PageContentProps = {
-  variant?: 'stepper' | 'standard' | 'side-panel';
-} & BoxProps;
-
-const PageContentContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  overflowY: 'auto',
-  padding: '12px',
-  backgroundColor: theme.palette.surface.paperBackground,
-  height: 'calc(100vh - 148px)',
-  width: '100%',
-  borderRadius: '8px',
-}));
-
-const PageStepperContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  flexDirection: 'column',
-  justifyContent: 'flex-start',
-  gap: '10px',
-}));
-
-const PageContentSidePanelContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  backgroundColor: theme.palette.surface.defaultBackground,
-  gap: '12px',
-}));
-
-export const PageContent = ({
-  variant = 'standard',
-  ...props
-}: PageContentProps) => {
-  switch (variant) {
-    case 'stepper':
-      return (
-        <PageStepperContainer {...props}>{props.children}</PageStepperContainer>
-      );
-
-    case 'side-panel':
-      return (
-        <PageContentSidePanelContainer {...props}>
-          {props.children}
-        </PageContentSidePanelContainer>
-      );
-
-    case 'standard':
-    default:
-      return (
-        <PageContentContainer gap="12px" {...props}>
-          {props.children}
-        </PageContentContainer>
-      );
-  }
-};

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

@@ -1,214 +0,0 @@
-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';
-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';
-
-interface PageHeaderProps {
-  uniqueId?: string;
-  viewsSlot?: ReactNode;
-  filterComponents?: ReactElement[];
-  viewsProps?: Omit<ViewsProps, 'uniqueId'>;
-  actions?: ReactNode[];
-  columns?: GridColDef[];
-  searchText?: string;
-  defaultShowLabels?: string[];
-}
-
-const motionDivVariants = {
-  collapsed: { height: '48px' },
-  expanded: { height: '108px' },
-};
-
-export const PageHeader = ({
-  uniqueId,
-  actions = [],
-  filterComponents = [],
-  defaultShowLabels = [],
-  columns,
-  viewsSlot = <ViewTab title="Default View" active={true} onClick={() => {}} />,
-  searchText = 'Search',
-  viewsProps,
-}: 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 dispatch = useDispatch();
-
-  const wrapProps = (element: ReactElement): ReactElement => {
-    const { name } = element.props;
-    if (name && uniqueId) {
-      return cloneElement(element, {
-        onChange: (value: any) => {
-          dispatch(
-            setFilterByNameForUniqueId({
-              uniqueId,
-              name,
-              value,
-            }),
-          );
-        },
-      });
-    }
-    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"
-      >
-        {isTableMode && viewsProps ? (
-          <Views {...viewsProps} uniqueId={uniqueId} />
-        ) : (
-          <Stack direction="row" gap={2} justifyContent="flex-start">
-            {viewsSlot}
-          </Stack>
-        )}
-
-        <Stack direction="row" alignItems="center">
-          {isTableMode && (
-            <FiltersAnchor
-              handleClick={() => {
-                setExpanded(!expanded);
-              }}
-              showDot={hasFilters}
-            />
-          )}
-          {isTableMode && (
-            <TableColumnsSelector columns={columns} uniqueId={uniqueId} />
-          )}
-          {isTableMode && (
-            <SearchBar searchText={searchText} uniqueId={uniqueId} />
-          )}
-          {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',
-              )}
-              handleCheckboxChange={function (
-                label: string,
-                checked: boolean,
-              ): void {
-                if (checked) {
-                  setHiddenLabels(hiddenLabels.filter((l) => label !== l));
-                } else {
-                  setHiddenLabels([...hiddenLabels, label]);
-                }
-              }}
-              handleReset={() => {
-                setHiddenLabels(initialHiddenLabels);
-              }}
-            />
-          </Stack>
-          {viewsProps && uniqueId && (
-            <ViewsActions {...viewsProps} uniqueId={uniqueId} />
-          )}
-        </Stack>
-      )}
-    </motion.div>
-  );
-};

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

@@ -1,84 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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 { setDensityForUniqueId } from '../../../../../redux/slices/pageHeaderSlice';
-import { RootState } from '../../../../../redux/store';
-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.pageHeader[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(
-      setDensityForUniqueId({
-        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>
-        ))
-      }
-    />
-  );
-};