@campxdev/react-blueprint 1.9.6 → 2.0.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/Breadcrumbs/Breadcrumbs.tsx

@@ -1,95 +0,0 @@
-import {
-  Breadcrumbs as MuiBreadcrumbs,
-  BreadcrumbsProps as MuiBreadcrumbsProps,
-  Stack,
-  styled,
-  SxProps,
-} from '@mui/material';
-import _ from 'lodash';
-import { Link } from 'react-router-dom';
-
-import { ReactNode } from 'react';
-import { getBreadcrumbsCharacter } from '../../../utils/export';
-import { Typography } from '../../export';
-
-export type BreadcrumbsProps = {
-  pathTrimCount: number;
-  containerProps?: SxProps;
-  actions?: ReactNode[];
-} & MuiBreadcrumbsProps;
-
-export const Breadcrumbs = ({
-  pathTrimCount,
-  containerProps,
-  actions = [],
-  ...rest
-}: BreadcrumbsProps) => {
-  const specialCharacter = getBreadcrumbsCharacter();
-  const currentPathArray = window.location.pathname.split('/');
-
-  let basePath =
-    window.location.origin +
-    currentPathArray.slice(0, pathTrimCount + 1).join('/');
-
-  currentPathArray.splice(0, pathTrimCount + 1);
-
-  return (
-    <BreadcrumbContainer sx={containerProps}>
-      <BreadcrumbsWrapper>
-        <MuiBreadcrumbs {...rest}>
-          {currentPathArray?.map((item, index) => {
-            basePath = basePath + `/${item}`;
-            return index === currentPathArray.length - 1 ? (
-              <Typography key={index} variant="subtitle2">
-                {_.startCase(
-                  decodeURIComponent(item).split(specialCharacter)[0],
-                )}
-              </Typography>
-            ) : (
-              <BreadcrumbLink key={index} to={basePath}>
-                {_.startCase(
-                  decodeURIComponent(item).split(specialCharacter)[0],
-                )}
-              </BreadcrumbLink>
-            );
-          })}
-        </MuiBreadcrumbs>
-      </BreadcrumbsWrapper>
-      <ActionsContainer>
-        {actions.map((action, index) => action)}
-      </ActionsContainer>
-    </BreadcrumbContainer>
-  );
-};
-
-const BreadcrumbContainer = styled(Stack)(({ theme }) => ({
-  flexDirection: 'row',
-  width: '100%',
-  justifyContent: 'space-between',
-  height: '52px',
-  paddingLeft: '12px',
-  backgroundColor: theme.palette.surface.defaultBackground,
-  [theme.breakpoints.down('md')]: {
-    paddingLeft: '0px',
-  },
-}));
-
-const BreadcrumbsWrapper = styled(Stack)(({ theme }) => ({
-  flexDirection: 'row',
-  alignItems: 'center',
-}));
-
-const ActionsContainer = styled(Stack)(({ theme }) => ({
-  flexDirection: 'row',
-  alignItems: 'flex-start',
-  gap: '12px',
-}));
-
-const BreadcrumbLink = styled(Link)(({ theme }) => ({
-  textDecoration: 'none',
-  transition: 'color 0.3s ease-in-out',
-  color: theme.palette.text.tertiary,
-  '&:hover': {
-    color: theme.palette.primary.light,
-  },
-}));

package/src/components/Navigation/ConfirmDialog/ConfirmDialog.tsx

@@ -1,80 +0,0 @@
-import { Box, Stack, useTheme } from '@mui/material';
-import { AnimatedGIFs } from '../../../assets/images/gif';
-import { Button, Dialog, Typography } from '../../export';
-
-export type ConfirmDialogType = 'confirm' | 'delete';
-
-export type ConfirmDialogProps = {
-  isOpen: boolean;
-  title: string;
-  message: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-  type: ConfirmDialogType;
-  confirmButtonText?: string;
-  cancelButtonText?: string;
-};
-
-export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
-  isOpen,
-  title,
-  message,
-  onConfirm,
-  onCancel,
-  type,
-  confirmButtonText = type === 'delete' ? 'Confirm Delete' : 'Confirm',
-  cancelButtonText = 'Cancel',
-}) => {
-  const theme = useTheme();
-  if (!isOpen) return null;
-
-  return (
-    <Dialog
-      keepMounted
-      maxWidth="sm"
-      transitionDuration={150}
-      open={isOpen}
-      content={({ close }) => {
-        return (
-          <Box sx={{ padding: '16px' }}>
-            <Stack direction="row" alignItems="center">
-              <img
-                src={
-                  type === 'delete'
-                    ? AnimatedGIFs.DeleteConfirmationAlert
-                    : AnimatedGIFs.ConfirmationAlert
-                }
-                alt="Animated GIF"
-                style={{ width: '80px' }}
-              />
-              <Box>
-                <Typography variant="subtitle2">{title}</Typography>
-                <Typography variant="label1">{message}</Typography>
-              </Box>
-            </Stack>
-            <Stack direction="row" justifyContent="flex-end" gap={3}>
-              <Button
-                onClick={() => {
-                  onCancel();
-                  close();
-                }}
-                variant="text"
-                textColor={theme.palette.text.tertiary}
-              >
-                {cancelButtonText}
-              </Button>
-              <Button
-                onClick={onConfirm}
-                variant="contained"
-                color={type === 'delete' ? 'error' : 'primary'}
-              >
-                {confirmButtonText}
-              </Button>
-            </Stack>
-          </Box>
-        );
-      }}
-      onClose={onCancel}
-    />
-  );
-};

package/src/components/Navigation/Dialog/Dialog.tsx

@@ -1,33 +0,0 @@
-import {
-  DialogContent,
-  DialogTitle,
-  Dialog as MuiDialog,
-  DialogProps as MuiDialogProps,
-} from '@mui/material';
-import { ReactNode } from 'react';
-export type DialogProps = {
-  content: (props: { close: () => void }) => ReactNode;
-  title?: string | undefined;
-  onClose: () => void;
-} & Omit<MuiDialogProps, 'content'>;
-
-export const Dialog = ({
-  onClose,
-  title,
-  content,
-  open,
-  ...props
-}: DialogProps) => {
-  return (
-    <MuiDialog
-      open={open}
-      onClose={(_, reason) => {
-        onClose();
-      }}
-      {...props}
-    >
-      {title && <DialogTitle>{title}</DialogTitle>}
-      <DialogContent> {content({ close: onClose })}</DialogContent>
-    </MuiDialog>
-  );
-};

package/src/components/Navigation/DialogButton/DialogButton.tsx

@@ -1,52 +0,0 @@
-import { Fade } from '@mui/material';
-import { TransitionProps } from '@mui/material/transitions';
-import React, { ReactNode, useState } from 'react';
-import { Dialog, DialogProps } from '../Dialog/Dialog';
-
-const FadeTransition = React.forwardRef(function FadeTransition(
-  props: TransitionProps & {
-    children: React.ReactElement<any, any>;
-  },
-  ref: React.Ref<unknown>,
-) {
-  return <Fade ref={ref} {...props} timeout={50} />;
-});
-
-export type DialogButtonProps = {
-  anchor: (props: { open: () => void }) => ReactNode;
-  onDialogOpen?: () => void;
-  onDialogClose?: () => void;
-} & Omit<DialogProps, 'open' | 'onClose'>;
-
-export const DialogButton = ({
-  onDialogClose,
-  onDialogOpen,
-  anchor,
-  ...props
-}: DialogButtonProps) => {
-  const [open, setOpen] = useState(false);
-
-  const onClose = () => {
-    onDialogClose && onDialogClose();
-    setOpen(false);
-  };
-
-  const onOpen = () => {
-    onDialogOpen && onDialogOpen();
-    setOpen(true);
-  };
-
-  return (
-    <>
-      {anchor({
-        open: onOpen,
-      })}
-      <Dialog
-        {...props}
-        open={open}
-        onClose={onClose}
-        TransitionComponent={FadeTransition}
-      />
-    </>
-  );
-};

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

@@ -1,8 +0,0 @@
-import { KeyboardArrowDown } from '@mui/icons-material';
-import { Button, ButtonProps } from '../../Input/Button/Button';
-
-export const DropDownButton = (props: ButtonProps) => {
-  return (
-    <Button variant="outlined" endIcon={<KeyboardArrowDown />} {...props} />
-  );
-};

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

@@ -1,31 +0,0 @@
-import { MoreVert } from '@mui/icons-material';
-import { IconButtonProps } from '@mui/material';
-import { ReactNode } from 'react';
-import { StyledIconButton } from './styles';
-
-const defaultIcon = {
-  icon: <MoreVert color="primary" />,
-  outlined: true,
-};
-
-export const DropDownIcon = ({
-  icon = defaultIcon,
-  handleClick,
-}: {
-  icon?: {
-    icon?: ReactNode;
-    iconProps?: IconButtonProps;
-    outlined?: boolean;
-  };
-  handleClick: any;
-}) => {
-  return (
-    <StyledIconButton
-      outlined={icon?.outlined ?? false}
-      onClick={handleClick}
-      {...icon.iconProps}
-    >
-      {icon.icon}
-    </StyledIconButton>
-  );
-};

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

@@ -1,112 +0,0 @@
-import {
-  Divider,
-  Menu,
-  MenuListProps,
-  MenuProps,
-  Stack,
-  StackProps,
-  useTheme,
-} from '@mui/material';
-import { ReactNode, useState } from 'react';
-
-export type DropdownMenuProps = {
-  anchor: (props: { open: (e: any) => void }) => ReactNode;
-  menu?: ReactNode[] | ((props: { close: () => void }) => ReactNode[]);
-  menuSlot?: (props: { close: () => void }) => ReactNode;
-  useMenuSlot?: boolean;
-  menuProps?: Omit<MenuProps, 'open'>;
-  menuListProps?: MenuListProps;
-  menuListContainerSx?: StackProps['sx'];
-  menuHeader?: ReactNode;
-  menuFooter?: ReactNode;
-  handleMenuScroll?: (event: any) => Promise<void>;
-};
-
-export const DropdownMenu = ({
-  menuProps,
-  menu = [],
-  menuSlot,
-  useMenuSlot = false,
-  menuListProps,
-  menuHeader,
-  menuFooter,
-  menuListContainerSx,
-  anchor,
-  handleMenuScroll,
-}: DropdownMenuProps) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const [open, setOpen] = useState(false);
-  const theme = useTheme();
-
-  const handleClick = (event: any) => {
-    setAnchorEl(event.currentTarget);
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-    setOpen(false);
-  };
-
-  const menuItems =
-    typeof menu === 'function' ? menu({ close: handleClose }) : menu;
-
-  return (
-    <>
-      {anchor({ open: handleClick })}
-
-      <Menu
-        elevation={0}
-        id="basic-menu"
-        anchorEl={anchorEl}
-        keepMounted
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-        open={open}
-        onClose={handleClose}
-        transitionDuration={150}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'right',
-        }}
-        MenuListProps={{
-          ...menuListProps,
-          // sx: { padding: '0px' },
-        }}
-        {...menuProps}
-      >
-        {menuHeader}
-        <Stack
-          component="div"
-          onScroll={handleMenuScroll}
-          direction={'column'}
-          sx={{
-            ...menuListContainerSx,
-            '&::-webkit-scrollbar': {
-              width: '0.2em',
-              height: '0.2em',
-            },
-            '&::-webkit-scrollbar-thumb': {
-              backgroundColor: theme.palette.surface.paperBackground,
-              borderRadius: '3px',
-            },
-          }}
-        >
-          {useMenuSlot && menuSlot
-            ? menuSlot({ close: handleClose })
-            : menuItems.map((item, index) => (
-                <div key={index}>
-                  {item}
-                  {index < menuItems.length - 1 && (
-                    <Divider flexItem sx={{ margin: '0 !important' }} />
-                  )}
-                </div>
-              ))}
-        </Stack>
-        {menuFooter}
-      </Menu>
-    </>
-  );
-};

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

@@ -1,25 +0,0 @@
-import { ListItemIcon, MenuItemProps, SxProps } from '@mui/material';
-import { ReactNode } from 'react';
-import { StyledMenuItem } from './styles';
-
-export type DropdownMenuItemProps = {
-  icon?: ReactNode;
-  label: ReactNode;
-  sx?: SxProps;
-  onClick: () => void;
-} & MenuItemProps;
-
-export const DropdownMenuItem = ({
-  icon,
-  label,
-  onClick,
-  sx = {},
-  ...props
-}: DropdownMenuItemProps) => {
-  return (
-    <StyledMenuItem sx={sx} onClick={onClick} {...props}>
-      {icon && <ListItemIcon>{icon}</ListItemIcon>}
-      {label}
-    </StyledMenuItem>
-  );
-};

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',
-  },
-}));