@campxdev/react-blueprint 1.9.6 → 2.0.1

package/src/components/DataDisplay/SidePanel/styles.tsx

@@ -1,32 +0,0 @@
-import { Box, Stack, styled, Typography } from '@mui/material';
-
-export const StyledSidePanelContainer = styled(Stack)(({ theme }) => ({
-  width: '250px',
-  backgroundColor: theme.palette.surface.paperBackground,
-  padding: '12px',
-  borderRadius: '8px',
-  gap: '12px',
-}));
-
-export const StyledValueContainer = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.surface.defaultBackground,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  height: '50px',
-  width: '226px',
-  padding: '14px 12px',
-  borderRadius: '4px',
-}));
-
-export const StyledTextContainer = styled(Stack)(({ theme }) => ({
-  width: '226px',
-  height: '128px',
-  backgroundColor: theme.palette.surface.defaultBackground,
-  alignItems: 'center',
-  justifyContent: 'center',
-}));
-
-export const StyledTypography = styled(Typography)(({ theme }) => ({
-  color: theme.palette.text.tertiary,
-}));

package/src/components/DataDisplay/StatusCard/StatusCard.tsx

@@ -1,74 +0,0 @@
-import { Box, styled, SxProps, Theme, useTheme } from '@mui/material';
-import { Typography, TypographyProps } from '../../export';
-
-export type StatusCardProps = {
-  color: 'green' | 'red' | 'orange' | 'yellow' | 'blue' | 'pink';
-  text: string;
-  containerSx?: SxProps;
-  typographyVariant?: TypographyProps['variant'];
-};
-
-export const StatusCard = ({
-  color,
-  text,
-  containerSx = {},
-  typographyVariant = 'label2',
-}: StatusCardProps) => {
-  const theme = useTheme();
-  const { textColor, backgroundColor } = getStatusColor(color, theme);
-  return (
-    <StatusContainer backgroundColor={backgroundColor} sx={containerSx}>
-      <Typography variant={typographyVariant} color={textColor}>
-        {text}
-      </Typography>
-    </StatusContainer>
-  );
-};
-
-const StatusContainer = styled(Box)(
-  ({ backgroundColor }: { backgroundColor: string }) => ({
-    borderRadius: '5px',
-    padding: '4px 12px',
-    backgroundColor,
-  }),
-);
-
-const getStatusColor = (color: string, theme: Theme) => {
-  switch (color) {
-    case 'green':
-      return {
-        textColor: theme.palette.highlight.highlightGreen,
-        backgroundColor: theme.palette.highlight.greenBackground,
-      };
-    case 'red':
-      return {
-        textColor: theme.palette.highlight.highlightRed,
-        backgroundColor: theme.palette.highlight.redBackground,
-      };
-    case 'orange':
-      return {
-        textColor: theme.palette.highlight.highlightOrange,
-        backgroundColor: theme.palette.highlight.orangeBackground,
-      };
-    case 'yellow':
-      return {
-        textColor: theme.palette.highlight.highlightYellow,
-        backgroundColor: theme.palette.highlight.yellowBackground,
-      };
-    case 'blue':
-      return {
-        textColor: theme.palette.highlight.highlightBlue,
-        backgroundColor: theme.palette.highlight.blueBackground,
-      };
-    case 'pink':
-      return {
-        textColor: theme.palette.highlight.highlightPink,
-        backgroundColor: theme.palette.highlight.pinkBackground,
-      };
-    default:
-      return {
-        textColor: theme.palette.highlight.highlightRed,
-        backgroundColor: theme.palette.highlight.redBackground,
-      };
-  }
-};

package/src/components/DataDisplay/Timeline/Timeline.tsx

@@ -1,82 +0,0 @@
-import {
-  Timeline as MuiTimeline,
-  TimelineProps as MuiTimelineProps,
-  TimelineConnector,
-  TimelineContent,
-  TimelineDot,
-  TimelineItem,
-  timelineItemClasses,
-  TimelineOppositeContent,
-  TimelineSeparator,
-} from '@mui/lab';
-import { useTheme } from '@mui/material';
-import { ReactNode } from 'react';
-import { AddSquare } from '../../Assets/Icons/IconComponents/AddSquare';
-import { DoneSquare } from '../../Assets/Icons/IconComponents/DoneSquare';
-import { MinusSquare } from '../../Assets/Icons/IconComponents/MinusSquare';
-
-export type TimelineItems = {
-  timelineContent: ReactNode;
-  timelineOppositeContent?: ReactNode;
-  variant?: 'info' | 'success' | 'error' | 'warning';
-};
-
-export type TimelineProps = {
-  timelineItems: TimelineItems[];
-} & Omit<MuiTimelineProps, 'ref'>;
-
-export const Timeline = (props: TimelineProps) => {
-  const { timelineItems, ...otherProps } = props;
-  const theme = useTheme();
-  const hasOppositeContent = props.timelineItems.some(
-    (item) => item.timelineOppositeContent,
-  );
-
-  const getDotVariant = (variant?: string) => {
-    switch (variant) {
-      case 'info':
-        return <AddSquare />;
-      case 'success':
-        return <DoneSquare />;
-      case 'error':
-        return <MinusSquare />;
-      case 'warning':
-        return <MinusSquare color={theme.palette.highlight.highlightOrange} />;
-      default:
-        return <DoneSquare />;
-    }
-  };
-  return (
-    <MuiTimeline
-      {...otherProps}
-      sx={
-        hasOppositeContent ||
-        props.position === 'alternate' ||
-        props.position === 'alternate-reverse'
-          ? { ...props.sx }
-          : {
-              [`& .${timelineItemClasses.root}:before`]: {
-                flex: 0,
-                padding: 0,
-              },
-              ...props.sx,
-            }
-      }
-    >
-      {props.timelineItems.map((item, index) => (
-        <TimelineItem key={index}>
-          {item.timelineOppositeContent && (
-            <TimelineOppositeContent>
-              {item.timelineOppositeContent}
-            </TimelineOppositeContent>
-          )}
-          <TimelineSeparator>
-            <TimelineDot>{getDotVariant(item.variant)}</TimelineDot>
-            {index < props.timelineItems.length - 1 && <TimelineConnector />}
-          </TimelineSeparator>
-          <TimelineContent>{item.timelineContent}</TimelineContent>
-        </TimelineItem>
-      ))}
-    </MuiTimeline>
-  );
-};

package/src/components/DataDisplay/Typography/Typography.tsx

@@ -1,18 +0,0 @@
-import {
-  Typography as MuiTypography,
-  TypographyProps as MuiTypographyProps,
-} from '@mui/material';
-
-export type TypographyProps = {} & MuiTypographyProps;
-
-export const Typography = ({
-  variant,
-  children,
-  ...props
-}: TypographyProps) => {
-  return (
-    <MuiTypography variant={variant} {...props}>
-      {children}
-    </MuiTypography>
-  );
-};

package/src/components/Feedback/Alert/Alert.tsx

@@ -1,32 +0,0 @@
-import { Alert as MuiAlert, AlertProps as MuiAlertProps } from '@mui/material';
-import { ReactNode } from 'react';
-import { Icons, Typography } from '../../export';
-
-export type AlertProps = {
-  message: string | ReactNode;
-} & MuiAlertProps;
-
-const getIcon = (severity: MuiAlertProps['severity']) => {
-  switch (severity) {
-    case 'success':
-      return <Icons.SuccessFilledIcon size={20} />;
-    case 'error':
-      return <Icons.AlertFilledIcon size={20} />;
-    case 'info':
-      return <Icons.InfoFilledIcon size={20} />;
-    case 'warning':
-      return <Icons.WarningFilledIcon size={20} />;
-  }
-};
-
-export const Alert = ({ severity, message, ...rest }: AlertProps) => {
-  return (
-    <MuiAlert severity={severity} icon={getIcon(severity)} {...rest}>
-      {typeof message == 'string' ? (
-        <Typography variant="caption">{message}</Typography>
-      ) : (
-        message
-      )}
-    </MuiAlert>
-  );
-};

package/src/components/Feedback/Snackbar/Snackbar.tsx

@@ -1,121 +0,0 @@
-import {
-  Box,
-  IconButton,
-  Snackbar as MuiSnackbar,
-  SnackbarProps as MuiSnackbarProps,
-  Stack,
-  useTheme,
-} from '@mui/material';
-import { capitalize } from 'lodash';
-import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Icons } from '../../export';
-
-export type Severity = 'success' | 'info' | 'warning' | 'error';
-
-export type SnackbarProps = {
-  severity: Severity;
-  message: string;
-} & MuiSnackbarProps;
-
-export const Snackbar = ({ ...props }: SnackbarProps) => {
-  const theme = useTheme();
-  const getColor = (variant: Severity) => {
-    switch (variant) {
-      case 'success':
-        return theme.palette.highlight.highlightGreen;
-      case 'error':
-        return theme.palette.highlight.highlightRed;
-      case 'info':
-        return theme.palette.highlight.highlightBlue;
-      case 'warning':
-        return theme.palette.highlight.highlightOrange;
-      default:
-        return theme.palette.highlight.highlightGreen;
-    }
-  };
-  const getBackGroundColor = (variant: Severity) => {
-    switch (variant) {
-      case 'success':
-        return theme.palette.highlight.greenBackground;
-      case 'error':
-        return theme.palette.highlight.redBackground;
-      case 'info':
-        return theme.palette.highlight.blueBackground;
-      case 'warning':
-        return theme.palette.highlight.orangeBackground;
-      default:
-        return theme.palette.highlight.greenBackground;
-    }
-  };
-
-  const getIcon = (variant: Severity) => {
-    switch (variant) {
-      case 'success':
-        return <Icons.SuccessFilledIcon size={20} />;
-      case 'error':
-        return <Icons.AlertFilledIcon size={20} />;
-      case 'info':
-        return <Icons.InfoFilledIcon size={20} />;
-      case 'warning':
-        return <Icons.WarningFilledIcon size={20} />;
-    }
-  };
-
-  const handleClose = (event: React.SyntheticEvent<any> | Event) => {
-    if (props.onClose) {
-      props.onClose(event, 'clickaway');
-    }
-  };
-
-  return (
-    <MuiSnackbar open={props.open} onClose={props.onClose} {...props}>
-      <Box
-        sx={{
-          height: '90px',
-          width: '480px',
-          backgroundColor: theme.palette.surface.paperBackground,
-          borderRadius: '5px',
-        }}
-      >
-        <Stack
-          height="100%"
-          direction="row"
-          borderRadius="5px"
-          gap="8px"
-          sx={{
-            backgroundColor: getBackGroundColor(props.severity),
-          }}
-        >
-          <Box
-            sx={{
-              width: '10px',
-              height: '100%',
-              backgroundColor: getColor(props.severity),
-              borderRadius: '5px 0px 0px 5px',
-            }}
-          />
-          <Stack
-            width="100%"
-            height="100%"
-            direction={'row'}
-            alignItems="center"
-          >
-            <Stack direction="row" gap={1} justifyContent="space-evenly">
-              <Box sx={{ marginTop: '2px' }}>{getIcon(props.severity)}</Box>
-              <Stack direction={'column'}>
-                <Typography variant="subtitle2">
-                  {capitalize(props.severity)}
-                </Typography>
-                <Typography variant="body2">{props.message}</Typography>
-              </Stack>
-            </Stack>
-          </Stack>
-
-          <IconButton sx={{ margin: '25px' }} onClick={handleClose}>
-            <Icons.CrossIcon2 />
-          </IconButton>
-        </Stack>
-      </Box>
-    </MuiSnackbar>
-  );
-};

package/src/components/Feedback/Spinner/Spinner.css

@@ -1,32 +0,0 @@
-.spinner {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 1s linear infinite;
-  scale: 0.4;
-}
-.spinner::before , .spinner::after {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 5px solid #7D60D9;
-  animation: prixClipFix 1.5s linear infinite ;
-}
-.spinner::after{
-  transform: rotate3d(90, 90, 0, 180deg );
-  border-color: #FF3D00;
-}
-
-@keyframes rotate {
-  0%   {transform: rotate(0deg)}
-  100%   {transform: rotate(360deg)}
-}
-
-@keyframes prixClipFix {
-    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-    75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-}

package/src/components/Feedback/Spinner/Spinner.tsx

@@ -1,5 +0,0 @@
-import './Spinner.css';
-
-export const Spinner = () => {
-  return <div className="spinner"></div>;
-};

package/src/components/Feedback/Tooltip/ToolTipContent.tsx

@@ -1,15 +0,0 @@
-import { Stack } from '@mui/material';
-import { Icons, Typography } from '../../export';
-import { TooltipContentProps } from './Tooltip';
-
-export const ToolTipContent = ({ message }: TooltipContentProps) => {
-  return (
-    <Stack gap={1} sx={{ margin: '5px' }}>
-      <Stack direction="row" gap={1}>
-        <Icons.BulbIcon />
-        <Typography variant="subtitle3">Note:</Typography>
-      </Stack>
-      <Typography variant="caption">{message}</Typography>
-    </Stack>
-  );
-};

package/src/components/Feedback/Tooltip/Tooltip.tsx

@@ -1,29 +0,0 @@
-import {
-  IconButton,
-  Tooltip as MuiTooltip,
-  TooltipProps as MuiTooltipProps,
-} from '@mui/material';
-import { Children, ReactNode } from 'react';
-
-export type TooltipProps = {
-  children: ReactNode;
-} & MuiTooltipProps;
-export type TooltipContentProps = { message: string };
-
-export const Tooltip = ({
-  placement = 'right',
-  arrow = true,
-  ...props
-}: TooltipProps) => {
-  const isIconButton = Children.only(props.children).type === IconButton;
-
-  return (
-    <MuiTooltip {...props} placement={placement} arrow={arrow}>
-      {isIconButton ? (
-        props.children
-      ) : (
-        <IconButton>{props.children}</IconButton>
-      )}
-    </MuiTooltip>
-  );
-};

package/src/components/Feedback/Tutorial/Tutorial.tsx

@@ -1,151 +0,0 @@
-import { Box, useTheme } from '@mui/material';
-import axios from 'axios';
-import { ReactNode, useCallback, useEffect, useState } from 'react';
-import ReactJoyride, { ACTIONS, CallBackProps, Step } from 'react-joyride';
-import { Typography } from '../../DataDisplay/Typography/Typography';
-
-export interface TutorialProps {
-  steps: Step[];
-  children?: ReactNode;
-  tourName: string;
-  showProgress?: boolean;
-  iconPosition?: 'left' | 'right';
-}
-
-export const Tutorial = ({
-  steps,
-  children,
-  tourName,
-  iconPosition = 'right',
-  showProgress = true,
-}: TutorialProps) => {
-  const [run, setRun] = useState(false);
-  const userTours = localStorage.getItem('userTours') || '[]';
-  const theme = useTheme();
-
-  const startTour = useCallback(() => {
-    setRun(true);
-  }, []);
-
-  useEffect(() => {
-    if (userTours && !userTours.includes(tourName)) {
-      startTour();
-    }
-  }, [userTours, tourName, startTour]);
-
-  const handleJoyrideCallback = (data: CallBackProps) => {
-    const { action, lifecycle, type } = data;
-    const reqData = {
-      tourName: tourName,
-      skipped: false,
-      completed: false,
-    };
-
-    // Check if the tour is skipped or completed
-    if (
-      action === ACTIONS.SKIP &&
-      lifecycle === 'complete' &&
-      type === 'tour:end'
-    ) {
-      console.log('Tour is skipped');
-      reqData.skipped = true;
-    } else if (action === ACTIONS.CLOSE) {
-      setRun(false);
-    } else if (action === ACTIONS.RESET) {
-      console.log('Tour is reset');
-      reqData.completed = true;
-    }
-    console.log(reqData);
-    if (reqData.skipped || reqData.completed) {
-      setRun(false); // Stop the tour
-      completeTour(reqData).catch((err) => {
-        console.error('Failed to mark tour as complete:', err);
-      });
-    }
-  };
-
-  const completeTour = async (reqData: any) => {
-    try {
-      if (!userTours.includes(tourName)) {
-        localStorage.setItem(
-          'userTours',
-          JSON.stringify([...JSON.parse(userTours), tourName]),
-        );
-      }
-      await axios.post('/square/tours/complete', { ...reqData });
-    } catch (error) {
-      console.error('Error completing the tour:', error);
-    }
-  };
-
-  return (
-    <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-      <Box
-        sx={{
-          background: theme.palette.surface.grey,
-          padding: '20px 8px',
-          borderRadius: '12px 0px 0px 12px',
-          cursor: 'pointer',
-          width: '40px',
-          textAlign: 'center',
-        }}
-        onClick={startTour}
-      >
-        <Box sx={{ transform: 'rotate(-90deg)', marginTop: '10px' }}>
-          <Typography variant="subtitle2">Tour</Typography>
-        </Box>
-      </Box>
-
-      <ReactJoyride
-        callback={handleJoyrideCallback}
-        steps={steps}
-        continuous
-        run={run}
-        showSkipButton
-        showProgress={showProgress}
-        disableCloseOnEsc
-        disableOverlayClose
-        spotlightPadding={5}
-        locale={{
-          last: 'Got it',
-          next: 'Next',
-          skip: 'Skip',
-          back: 'Previous',
-        }}
-        styles={{
-          buttonNext: {
-            backgroundColor: theme.palette.primary.main,
-            color: theme.palette.secondary.light,
-            border: 'none',
-            height: '28px',
-            width: '100px',
-            padding: '0px',
-            fontFamily: 'Heebo, sans-serif',
-          },
-          buttonBack: {
-            backgroundColor: 'transparent',
-            color: 'black',
-            borderRadius: '4px',
-            height: '28px',
-            width: '100px',
-            gap: '10px',
-            marginLeft: '5px',
-            padding: '0px',
-            border: '1px solid black',
-            fontFamily: 'Heebo, sans-serif',
-          },
-          tooltip: {
-            padding: '10px',
-          },
-          tooltipContainer: {
-            display: 'flex',
-            backgroundColor: theme.palette.surface.paperBackground,
-          },
-
-          options: {},
-        }}
-      />
-      {children}
-    </div>
-  );
-};

package/src/components/Image/Image.tsx

@@ -1,45 +0,0 @@
-import { Box } from '@mui/material';
-// const brokenImage = require("./broken-image.png");
-
-interface ImageProps {
-  src: string;
-  alt: string;
-  height: string | number;
-  width: string | number;
-  fit?: 'cover' | 'contain' | 'fill';
-  radius?: string | number;
-  defaultImage?: any;
-}
-
-export default function Image({
-  src,
-  alt,
-  height,
-  width,
-  fit = 'contain',
-  radius = '10px',
-  defaultImage = null,
-}: ImageProps) {
-  return (
-    <Box
-      sx={{
-        height: height,
-        width: width,
-        '& > img': {
-          borderRadius: radius,
-          width: '100%',
-          height: '100%',
-          objectFit: fit,
-        },
-      }}
-    >
-      <img
-        src={src || defaultImage}
-        alt={alt}
-        onError={(e: any) => {
-          e.target.src = defaultImage ? defaultImage : '';
-        }}
-      />
-    </Box>
-  );
-}

package/src/components/Input/Button/Button.tsx

@@ -1,40 +0,0 @@
-import {
-  Button as MuiButton,
-  ButtonProps as MuiButtonProps,
-} from '@mui/material';
-import './ButtonLoader.css';
-
-export type ButtonProps = {
-  loading?: boolean;
-  background?: string;
-  hoverBackground?: string;
-  textColor?: string;
-} & MuiButtonProps;
-
-export const Button = ({
-  loading = false,
-  color,
-  background,
-  hoverBackground,
-  textColor,
-  ...props
-}: ButtonProps) => {
-  return (
-    <MuiButton
-      {...props}
-      color={color}
-      sx={{
-        color: textColor,
-        background,
-        ':hover': {
-          background: hoverBackground,
-        },
-        ...props.sx,
-      }}
-      endIcon={loading ? <div className="buttonLoader"></div> : props.endIcon}
-      disabled={props.disabled || loading}
-    >
-      {props.children}
-    </MuiButton>
-  );
-};