@campxdev/react-blueprint 2.3.10 → 3.0.0-alpha.1

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

@@ -1,61 +0,0 @@
-import { useMutation, useQueryClient } from 'react-query';
-import { useDispatch } from 'react-redux';
-import { useSearchParams } from 'react-router-dom';
-import { resetStateForUniqueId } from '../../../../../redux/slices/pageHeaderSlice';
-import { Button, DialogButton } from '../../../../export';
-import { CreateViewForm } from './CreateViewForm';
-import { ViewsProps } from './Views';
-
-export const ViewsActions = (viewsProps: ViewsProps) => {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const dispatch = useDispatch();
-
-  const viewId = searchParams.get('viewId');
-
-  const deleteView = async () => {
-    return viewsProps.axios.delete(`admin/views/${viewId}`);
-  };
-  const queryClient = useQueryClient();
-  const resetState = () => {
-    dispatch(
-      resetStateForUniqueId({
-        uniqueId: viewsProps.uniqueId,
-      }),
-    );
-  };
-
-  const { mutate, isLoading } = useMutation(deleteView, {
-    onSuccess: () => {
-      queryClient.invalidateQueries(viewsProps.type);
-      resetState();
-      searchParams.delete('viewId');
-      setSearchParams(searchParams);
-    },
-  });
-  return viewId ? (
-    <Button
-      variant="outlined"
-      color="error"
-      loading={isLoading}
-      onClick={() => {
-        mutate();
-      }}
-    >
-      Delete View
-    </Button>
-  ) : (
-    <DialogButton
-      anchor={({ open }) => (
-        <Button variant="contained" color="secondary" onClick={open}>
-          Save View
-        </Button>
-      )}
-      title="Save View"
-      content={({ close }) => {
-        return <CreateViewForm close={close} {...viewsProps} />;
-      }}
-      maxWidth="sm"
-    />
-  );
-};

package/src/components/Layout/TabsLayout/Tabs.tsx

@@ -1,68 +0,0 @@
-import { Box, Divider, styled } from '@mui/material';
-import { NavLink } from 'react-router-dom';
-
-interface TabProps {
-  index: number;
-  path: string;
-  title: string;
-  handleTabChange: (index: number) => void;
-  isActiveTab: boolean;
-  isPrevTab: boolean;
-  isLastTab: boolean;
-}
-
-export const Tab = ({
-  index,
-  path,
-  title,
-  isActiveTab,
-  isPrevTab,
-  isLastTab,
-  handleTabChange,
-}: TabProps) => {
-  return (
-    <Box
-      key={index}
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-      }}
-      onClick={() => handleTabChange(index)}
-    >
-      <StyledNavLink to={path} key={path}>
-        {title}
-      </StyledNavLink>
-      {!isActiveTab && !isPrevTab && !isLastTab && (
-        <Divider orientation="vertical" variant="middle" flexItem />
-      )}
-    </Box>
-  );
-};
-
-const StyledNavLink = styled(NavLink)(({ theme }) => ({
-  width: '204px',
-  padding: '12px 26px',
-  textAlign: 'center',
-  textDecoration: 'none',
-  fontWeight: 400,
-  fontFamily: 'Poppins',
-  color: theme.palette.text.secondary,
-  borderTopRightRadius: '12px',
-  borderTopLeftRadius: '12px',
-  backgroundColor: theme.palette.surface.defaultBackground,
-  position: 'relative',
-
-  '&.active': {
-    fontWeight: 600,
-    color: theme.palette.text.primary,
-    backgroundColor: theme.palette.surface.paperBackground,
-    '&::after': {
-      content: '""',
-      position: 'absolute',
-      bottom: 0,
-      left: '25%',
-      width: '50%',
-      borderBottom: `4px solid ${theme.palette.tertiary.main}`,
-    },
-  },
-}));

package/src/components/Layout/TabsLayout/TabsLayout.tsx

@@ -1,56 +0,0 @@
-import { Box, Stack, useTheme } from '@mui/material';
-import { useState } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import { Outlet } from 'react-router-dom';
-import { Tab } from './Tabs';
-
-interface TabsLayoutProps {
-  menu: MenuItem[];
-}
-
-interface MenuItem {
-  title: string;
-  path: string;
-  permissionKey?: string;
-}
-
-export const TabsLayout = ({ menu }: TabsLayoutProps) => {
-  const theme = useTheme();
-  const [activeTab, setActiveTab] = useState<number | null>(null);
-  const handleTabChange = (index: number) => {
-    setActiveTab(index);
-  };
-
-  return (
-    <Stack>
-      <Stack
-        direction={'row'}
-        sx={{
-          backgroundColor: theme.palette.surface.defaultBackground,
-        }}
-      >
-        {menu?.map((item, index) => {
-          return (
-            <Tab
-              key={index}
-              index={index}
-              path={item?.path}
-              title={item?.title}
-              handleTabChange={handleTabChange}
-              isActiveTab={index === activeTab}
-              isPrevTab={activeTab !== null && index === activeTab - 1}
-              isLastTab={index === menu?.length - 1}
-            />
-          );
-        })}
-      </Stack>
-      <ErrorBoundary
-        fallbackRender={(error: any) => (
-          <Box>Error: {error?.response?.data?.message ?? error?.message}</Box>
-        )}
-      >
-        <Outlet />
-      </ErrorBoundary>
-    </Stack>
-  );
-};

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

@@ -1,222 +0,0 @@
-import { alpha, Box, Stack, styled } from '@mui/material';
-
-export const StyledCalendarContainer = styled(Stack, {
-  shouldForwardProp: (prop) => prop !== 'height' && prop !== 'aspectRatio',
-})<{
-  height?: string | number;
-  aspectRatio?: number;
-}>(({ theme, height, aspectRatio }) => ({
-  backgroundColor: theme.palette.surface.paperBackground,
-  borderRadius: theme.shape?.borderRadius || '8px',
-  overflow: 'hidden',
-  border: `1px solid ${theme.palette.border.primary}`,
-  height: height || 'auto',
-  aspectRatio: aspectRatio || 'auto',
-
-  // FullCalendar specific overrides
-  '& .fc': {
-    height: '100%',
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.body2.fontSize,
-  },
-
-  // Header styling
-  '& .fc-header-toolbar': {
-    backgroundColor: theme.palette.surface.defaultBackground,
-    padding: theme.spacing(2),
-    margin: 0,
-    borderBottom: `1px solid ${theme.palette.border.primary}`,
-
-    '& .fc-button-group': {
-      '& .fc-button': {
-        backgroundColor: theme.palette.primary.main,
-        borderColor: theme.palette.primary.main,
-        color: theme.palette.text.primaryContrast,
-        fontWeight: theme.typography.button.fontWeight,
-        textTransform: 'none',
-        borderRadius: theme.shape?.borderRadius || '6px',
-        padding: '6px 12px',
-        marginRight: '4px',
-
-        '&:hover': {
-          backgroundColor: theme.palette.primary.dark,
-          borderColor: theme.palette.primary.dark,
-        },
-
-        '&:focus': {
-          boxShadow: `0 0 0 2px ${theme.palette.primary.light}`,
-        },
-
-        '&.fc-button-active': {
-          backgroundColor: theme.palette.primary.dark,
-          borderColor: theme.palette.primary.dark,
-        },
-
-        '&:disabled': {
-          backgroundColor: theme.palette.border.primary,
-          borderColor: theme.palette.border.primary,
-          color: theme.palette.text.tertiary,
-        },
-      },
-    },
-
-    '& .fc-toolbar-title': {
-      color: theme.palette.text.primary,
-      fontSize: theme.typography.h5.fontSize,
-      fontWeight: theme.typography.h5.fontWeight,
-      margin: 0,
-    },
-  },
-
-  // Day header styling
-  '& .fc-col-header': {
-    backgroundColor: theme.palette.surface.defaultBackground,
-    borderBottom: `1px solid ${theme.palette.border.primary}`,
-
-    '& .fc-col-header-cell': {
-      padding: theme.spacing(1),
-
-      '& .fc-col-header-cell-cushion': {
-        color: theme.palette.text.secondary,
-        fontWeight: theme.typography.subtitle2.fontWeight,
-        textDecoration: 'none',
-        fontSize: theme.typography.caption.fontSize,
-        textTransform: 'uppercase',
-      },
-    },
-  },
-
-  // Day cells styling
-  '& .fc-daygrid-day': {
-    backgroundColor: theme.palette.surface.paperBackground,
-    borderColor: theme.palette.border.primary,
-
-    '&.fc-day-today': {
-      backgroundColor: alpha(theme.palette.primary.light, 0.1),
-    },
-
-    '& .fc-daygrid-day-number': {
-      color: theme.palette.text.primary,
-      textDecoration: 'none',
-      padding: theme.spacing(0.5, 1),
-      fontSize: theme.typography.body2.fontSize,
-
-      '&:hover': {
-        backgroundColor: theme.palette.surface.grey,
-        borderRadius: '4px',
-      },
-    },
-
-    '& .fc-daygrid-day-top': {
-      display: 'flex',
-      justifyContent: 'flex-end',
-      padding: theme.spacing(0.5),
-    },
-  },
-
-  // Event styling
-  '& .fc-event': {
-    backgroundColor: theme.palette.primary.main,
-    borderColor: theme.palette.primary.main,
-    color: theme.palette.text.primaryContrast,
-    borderRadius: '4px',
-    border: 'none',
-
-    '&:hover': {
-      backgroundColor: theme.palette.primary.dark,
-    },
-  },
-
-  // Time grid styling
-  '& .fc-timegrid': {
-    '& .fc-timegrid-slot': {
-      borderColor: theme.palette.border.primary,
-    },
-
-    '& .fc-timegrid-col.fc-day-today': {
-      backgroundColor: alpha(theme.palette.primary.light, 0.08),
-    },
-  },
-
-  // List view styling
-  '& .fc-list': {
-    '& .fc-list-day': {
-      backgroundColor: theme.palette.surface.defaultBackground,
-    },
-
-    '& .fc-list-event': {
-      borderColor: theme.palette.border.primary,
-
-      '&:hover': {
-        backgroundColor: theme.palette.surface.grey,
-      },
-    },
-  },
-
-  // More link styling
-  '& .fc-more-link': {
-    color: theme.palette.primary.main,
-
-    '&:hover': {
-      color: theme.palette.primary.dark,
-    },
-  },
-
-  // Popover styling
-  '& .fc-popover': {
-    backgroundColor: theme.palette.surface.paperBackground,
-    border: `1px solid ${theme.palette.border.primary}`,
-    borderRadius: theme.shape?.borderRadius || '8px',
-    boxShadow: theme.shadows[8],
-
-    '& .fc-popover-header': {
-      backgroundColor: theme.palette.surface.defaultBackground,
-      borderBottom: `1px solid ${theme.palette.border.primary}`,
-    },
-  },
-
-  // Responsive design
-  [theme.breakpoints.down('md')]: {
-    '& .fc-header-toolbar': {
-      flexDirection: 'column',
-      gap: theme.spacing(1),
-    },
-
-    '& .fc-button-group .fc-button': {
-      padding: '4px 8px',
-    },
-  },
-
-  [theme.breakpoints.down('sm')]: {
-    '& .fc-event': {
-      fontSize: '0.7rem',
-    },
-  },
-}));
-
-export const StyledCalendarWrapper = styled(Box)(({ theme }) => ({
-  position: 'relative',
-  width: '100%',
-
-  // Custom scrollbar for calendar content
-  '& .fc-scroller': {
-    '&::-webkit-scrollbar': {
-      width: '6px',
-      height: '6px',
-    },
-
-    '&::-webkit-scrollbar-track': {
-      backgroundColor: theme.palette.surface.defaultBackground,
-      borderRadius: '3px',
-    },
-
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: theme.palette.border.secondary,
-      borderRadius: '3px',
-
-      '&:hover': {
-        backgroundColor: theme.palette.surface.grey,
-      },
-    },
-  },
-}));

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

@@ -1,25 +0,0 @@
-import { IconButton, MenuItem, styled } from '@mui/material';
-
-export const StyledIconButton = styled(IconButton, {
-  shouldForwardProp: (prop) => prop !== 'outlined',
-})<{ outlined?: boolean }>(({ theme, outlined }) => ({
-  ...(outlined && {
-    border: `1px solid ${theme.palette.primary.main}`,
-    borderRadius: '5px',
-    height: '40px',
-    width: '40px',
-  }),
-}));
-
-export const StyledMenuItem = styled(MenuItem)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '5px',
-  '& .MuiListItemIcon-root': {
-    minWidth: '24px',
-  },
-  '& .MuiSvgIcon-root': {
-    height: '14px',
-    width: '14px',
-  },
-}));

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

@@ -1,135 +0,0 @@
-import { Box, Stack } from '@mui/material';
-import { useMemo } from 'react';
-import { LeftIcon } from '../../Assets/Icons/IconComponents/LeftIcon';
-import { Icons, Tooltip, Typography } from '../../export';
-import {
-  DefaultButtonProps,
-  InternalMenuButtonProps,
-  SubMenuButtonProps,
-  TooltipIconProps,
-} from './interfaces';
-import { createSidebarStyles } from './styles';
-
-export const TooltipIcon = ({
-  name,
-  icon,
-  collapsed,
-  setCollapsed,
-}: TooltipIconProps) => {
-  const handleClick = () => {
-    if (collapsed && setCollapsed) {
-      setCollapsed(!collapsed);
-    }
-  };
-  return (
-    <Tooltip
-      title={<Typography variant="label2">{name}</Typography>}
-      onClick={() => handleClick()}
-    >
-      {icon}
-    </Tooltip>
-  );
-};
-
-export const DefaultButton = ({
-  name,
-  icon,
-  collapsed,
-}: DefaultButtonProps) => {
-  const { StyledListItemButton, StyledListItemIcon } = useMemo(
-    () => createSidebarStyles(collapsed),
-    [collapsed],
-  );
-
-  return (
-    <StyledListItemButton collapsed={collapsed}>
-      <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
-      <Typography variant="button1">{name}</Typography>
-    </StyledListItemButton>
-  );
-};
-
-export const InternalMenuButton = ({
-  name,
-  icon,
-  collapsed,
-}: InternalMenuButtonProps) => {
-  const { StyledListItemButton, StyledListItemIcon } = useMemo(
-    () => createSidebarStyles(collapsed),
-    [collapsed],
-  );
-
-  return (
-    <StyledListItemButton collapsed={collapsed}>
-      <Stack
-        width={'100%'}
-        direction="row"
-        alignItems={'center'}
-        justifyContent={'space-between'}
-      >
-        <Stack direction="row" alignItems={'center'}>
-          <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
-          <Typography variant="button1">{name}</Typography>
-        </Stack>
-        {/* 
-        <HoverIcon display={'flex'} className="hoverIcon">
-          <Icons.RedoIcon size={18} />
-        </HoverIcon>
-         */}
-      </Stack>
-    </StyledListItemButton>
-  );
-};
-
-export const SubMenuButton = ({
-  name,
-  icon,
-  expanded,
-  collapsed,
-}: SubMenuButtonProps) => {
-  const { StyledListItemButton, StyledListItemIcon } = useMemo(
-    () => createSidebarStyles(collapsed),
-    [collapsed],
-  );
-
-  return (
-    <StyledListItemButton collapsed={collapsed}>
-      <Stack
-        width={'100%'}
-        direction="row"
-        alignItems={'center'}
-        justifyContent={'space-between'}
-      >
-        <Stack direction="row" alignItems={'center'}>
-          <StyledListItemIcon collapsed={collapsed}>{icon}</StyledListItemIcon>
-          <Typography variant="button1">{name}</Typography>
-        </Stack>
-        <Box display={'flex'}>
-          {expanded ? <Icons.CollapseIcon /> : <Icons.ExpandIcon />}
-        </Box>
-      </Stack>
-    </StyledListItemButton>
-  );
-};
-
-export const CollapseMenuButton = ({ collapsed }: { collapsed: boolean }) => {
-  const { StyledListItemIcon } = useMemo(
-    () => createSidebarStyles(collapsed),
-    [collapsed],
-  );
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        whiteSpace: 'nowrap',
-      }}
-    >
-      <StyledListItemIcon collapsed={collapsed}>
-        <LeftIcon size={32} />
-      </StyledListItemIcon>
-      <Typography variant="button1">Collapse Menu</Typography>
-    </Box>
-  );
-};

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

@@ -1,61 +0,0 @@
-import { useMemo } from 'react';
-import { Icons, Typography } from '../../export';
-import { MenuState } from './interfaces';
-import { SideBarMenuItem } from './MenuItem';
-import { createSidebarStyles } from './styles';
-
-export const MenuBar = ({
-  currentMenuState,
-  collapsed,
-  setCollapsed,
-  menuPosition,
-  previousMenuClickHandler,
-  internalMenuClickHandler,
-}: {
-  currentMenuState: MenuState;
-  collapsed: boolean;
-  setCollapsed: any;
-  internalMenuClickHandler: any;
-  previousMenuClickHandler: any;
-  menuPosition: number;
-}) => {
-  const { StyledMenuBar, StyledMenuHeaderButton } = useMemo(
-    () => createSidebarStyles(collapsed),
-    [collapsed, menuPosition],
-  );
-  return (
-    <StyledMenuBar>
-      {currentMenuState.title && (
-        <StyledMenuHeaderButton
-          direction="row"
-          justifyContent={collapsed ? 'center' : 'flex-start'}
-          onClick={() => previousMenuClickHandler()}
-        >
-          {collapsed ? (
-            <Icons.ArrowBackIcon size={20} />
-          ) : (
-            <>
-              <Icons.ArrowBackIcon size={20} />
-              <Typography variant="button1">
-                {currentMenuState.title}
-              </Typography>
-            </>
-          )}
-        </StyledMenuHeaderButton>
-      )}
-      {currentMenuState.menu &&
-        currentMenuState.menu.length > 0 &&
-        currentMenuState.menu?.map((item: any, index: number) => (
-          <SideBarMenuItem
-            key={index}
-            index={index}
-            collapsed={collapsed}
-            setCollapsed={setCollapsed}
-            menuItem={item}
-            currentMenuPath={currentMenuState.path}
-            internalMenuClickHandler={internalMenuClickHandler}
-          />
-        ))}
-    </StyledMenuBar>
-  );
-};