@campxdev/react-blueprint 1.9.6 → 2.0.1

package/src/components/DataDisplay/ActivityLogView/ActivityLogView.tsx

@@ -1,243 +0,0 @@
-import { TimelineContent, TimelineItem, TimelineSeparator } from '@mui/lab';
-import { Box, Stack, SxProps, Typography, useTheme } from '@mui/material';
-import { format, isToday } from 'date-fns';
-import _ from 'lodash';
-import { useState } from 'react';
-import { AddSquare } from '../../Assets/Icons/IconComponents/AddSquare';
-import { Button, DatePicker, Spinner } from '../../export';
-import { EmptyIllustration } from '../EmptyIllustration/EmptyIllustration';
-import {
-  ActivityIcon,
-  convertUTCtoIST,
-  ScrollToTopButton,
-  useIntersectionObserver,
-} from './service';
-import {
-  StyledActivityLogViewBox,
-  StyledIconBox,
-  StyledSpinnerBox,
-  StyledTimeline,
-  StyledTimelineConnector,
-  StyledTimelineDot,
-} from './styles';
-
-export type ActivityAction = 'create' | 'update' | 'delete';
-
-export interface Activity {
-  userName?: string;
-  action?: ActivityAction;
-  message: string;
-  timestamp: string;
-}
-
-interface ActivityLogProps {
-  activitiesData: Activity[];
-  isFetchingNextPage: boolean;
-  fetchNextPage: () => void;
-  hasNextPage: boolean | undefined;
-  fromDate: Date | null;
-  toDate: Date | null;
-  setFromDate: (date: Date | null) => void;
-  setToDate: (date: Date | null) => void;
-  isLoading: boolean;
-  hideLogFilter?: boolean;
-  timelineContentSx?: SxProps;
-  timelineSx?: SxProps;
-}
-
-const ActivityLogFilter = ({
-  fromDate,
-  toDate,
-  setFromDate,
-  setToDate,
-  fetchNextPage,
-  isLoading,
-}: {
-  fromDate: Date | null;
-  toDate: Date | null;
-  setFromDate: (date: Date | null) => void;
-  setToDate: (date: Date | null) => void;
-  fetchNextPage: () => void;
-  isLoading: boolean;
-}) => {
-  const [localFromDate, setLocalFromDate] = useState(fromDate);
-  const [localToDate, setLocalToDate] = useState(toDate);
-
-  const handleFilterSubmit = () => {
-    setFromDate(localFromDate);
-    setToDate(localToDate);
-    fetchNextPage();
-  };
-
-  const clearFilters = () => {
-    setLocalFromDate(null);
-    setLocalToDate(null);
-    setFromDate(null);
-    setToDate(null);
-  };
-
-  return (
-    <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 3 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center' }}>
-        <DatePicker
-          key={`from-date-${localFromDate}`}
-          label="From Date"
-          value={localFromDate}
-          onChange={(value) => setLocalFromDate(value)}
-          disabled={isLoading}
-        />
-        <DatePicker
-          key={`to-date-${localToDate}`}
-          label="To Date"
-          value={localToDate}
-          onChange={(value) => setLocalFromDate(value)}
-          disabled={isLoading}
-        />
-        <Stack spacing={1} direction="row" ml={1} mt={2}>
-          <Button onClick={handleFilterSubmit} variant="contained">
-            Submit
-          </Button>
-        </Stack>
-      </Box>
-      <Box sx={{ display: 'flex', mt: 3.5 }}>
-        <Button onClick={clearFilters} disabled={isLoading}>
-          Clear
-        </Button>
-      </Box>
-    </Box>
-  );
-};
-
-export const ActivityLogView = ({
-  activitiesData,
-  isFetchingNextPage,
-  fetchNextPage,
-  hasNextPage,
-  fromDate,
-  toDate,
-  setFromDate,
-  setToDate,
-  isLoading,
-  hideLogFilter = false,
-  timelineContentSx = {},
-  timelineSx = {},
-}: ActivityLogProps) => {
-  const theme = useTheme();
-  const lastItemRef = useIntersectionObserver(() => {
-    if (!isFetchingNextPage && hasNextPage) fetchNextPage();
-  });
-
-  const loading = isLoading && activitiesData.length === 0;
-
-  // Group activities by Today and Past Week and Older
-  const groupedActivities = _.groupBy(activitiesData, (activity) => {
-    const activityDate = convertUTCtoIST(activity.timestamp);
-    return isToday(activityDate)
-      ? 'Today'
-      : activityDate > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
-      ? 'Past Week'
-      : 'Older';
-  });
-
-  const renderMessage = (activity: Activity) =>
-    activity.message?.split('\n').map((part, index) => (
-      <Typography key={index} variant="body1" sx={{ fontWeight: 500 }}>
-        {index === 0 && activity.userName && (
-          <span style={{ color: theme.palette.text.primary }}>
-            {activity.userName}
-          </span>
-        )}{' '}
-        {part?.split(/('[^']*')/g).map((text, idx) => {
-          const isQuotedText = text.startsWith("'") && text.endsWith("'");
-          return (
-            <span
-              key={idx}
-              style={{
-                color: isQuotedText
-                  ? theme.palette.text.primary
-                  : theme.palette.text.secondary,
-              }}
-            >
-              {isQuotedText ? text.slice(1, -1) : text}
-            </span>
-          );
-        })}
-      </Typography>
-    ));
-
-  return (
-    <StyledActivityLogViewBox className="scrollable-activity-log">
-      {!hideLogFilter && (
-        <ActivityLogFilter
-          fromDate={fromDate}
-          toDate={toDate}
-          setFromDate={setFromDate}
-          setToDate={setToDate}
-          fetchNextPage={fetchNextPage}
-          isLoading={isLoading}
-        />
-      )}
-
-      {loading ? (
-        <StyledSpinnerBox>
-          <Spinner />
-        </StyledSpinnerBox>
-      ) : activitiesData.length === 0 ? (
-        <EmptyIllustration message={'No data found'} />
-      ) : (
-        Object.entries(groupedActivities).map(([section, activities]) => (
-          <Box key={section}>
-            <Typography variant="caption">{section}</Typography>
-            <StyledTimeline sx={{ ...timelineSx }}>
-              {activities.map((activity, index) => (
-                <TimelineItem
-                  key={index}
-                  ref={index === activities.length - 1 ? lastItemRef : null}
-                >
-                  <TimelineSeparator>
-                    <StyledTimelineDot>
-                      <StyledIconBox>
-                        {activity.action ? (
-                          <ActivityIcon type={activity.action} />
-                        ) : (
-                          <AddSquare />
-                        )}
-                      </StyledIconBox>
-                    </StyledTimelineDot>
-                    {index < activities.length - 1 && (
-                      <StyledTimelineConnector />
-                    )}
-                  </TimelineSeparator>
-                  <TimelineContent
-                    sx={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      marginTop: 1,
-                      ...timelineContentSx,
-                    }}
-                  >
-                    <Typography variant="body1" sx={{ fontWeight: 500 }}>
-                      {renderMessage(activity)}
-                    </Typography>
-                    <Typography variant="caption">
-                      {format(
-                        convertUTCtoIST(activity.timestamp),
-                        "d MMMM yyyy 'at' hh:mm a",
-                      )}
-                    </Typography>
-                  </TimelineContent>
-                </TimelineItem>
-              ))}
-            </StyledTimeline>
-          </Box>
-        ))
-      )}
-      {isFetchingNextPage && (
-        <StyledSpinnerBox>
-          <Spinner />
-        </StyledSpinnerBox>
-      )}
-      <ScrollToTopButton />
-    </StyledActivityLogViewBox>
-  );
-};

package/src/components/DataDisplay/ActivityLogView/Icons.tsx

@@ -1,65 +0,0 @@
-export const DeleteIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      style={{ display: 'flex', alignItems: 'center' }}
-    >
-      <g clipPath="url(#clip0_2752_9015)">
-        <path
-          d="M10.7933 1.3335H5.20659C2.77992 1.3335 1.33325 2.78016 1.33325 5.20683V10.7868C1.33325 13.2202 2.77992 14.6668 5.20659 14.6668H10.7866C13.2133 14.6668 14.6599 13.2202 14.6599 10.7935V5.20683C14.6666 2.78016 13.2199 1.3335 10.7933 1.3335ZM10.6666 8.50016H5.33325C5.20064 8.50016 5.07347 8.44749 4.9797 8.35372C4.88593 8.25995 4.83325 8.13277 4.83325 8.00016C4.83325 7.86756 4.88593 7.74038 4.9797 7.64661C5.07347 7.55284 5.20064 7.50016 5.33325 7.50016H10.6666C10.7992 7.50016 10.9264 7.55284 11.0201 7.64661C11.1139 7.74038 11.1666 7.86756 11.1666 8.00016C11.1666 8.13277 11.1139 8.25995 11.0201 8.35372C10.9264 8.44749 10.7992 8.50016 10.6666 8.50016Z"
-          fill="#F2353C"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_2752_9015">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
-
-export const CreateIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-    >
-      <path
-        d="M10.793 1.3335H5.20632C2.77965 1.3335 1.33325 2.7799 1.33325 5.20656V10.7868C1.33325 13.2199 2.77965 14.6668 5.20632 14.6668H10.7866C13.2133 14.6668 14.6602 13.2204 14.6602 10.7938V5.20656C14.6666 2.7799 13.2197 1.3335 10.793 1.3335ZM10.6666 8.4999H8.49965V10.6668C8.49965 10.7994 8.44697 10.9266 8.35321 11.0204C8.25944 11.1142 8.13226 11.1668 7.99965 11.1668C7.86704 11.1668 7.73987 11.1142 7.6461 11.0204C7.55233 10.9266 7.49965 10.7994 7.49965 10.6668V8.4999H5.33325C5.20064 8.4999 5.07347 8.44722 4.9797 8.35345C4.88593 8.25968 4.83325 8.1325 4.83325 7.9999C4.83325 7.86729 4.88593 7.74011 4.9797 7.64634C5.07347 7.55257 5.20064 7.4999 5.33325 7.4999H7.49965V5.3335C7.49965 5.20089 7.55233 5.07371 7.6461 4.97994C7.73987 4.88617 7.86704 4.8335 7.99965 4.8335C8.13226 4.8335 8.25944 4.88617 8.35321 4.97994C8.44697 5.07371 8.49965 5.20089 8.49965 5.3335V7.4999H10.6666C10.7992 7.4999 10.9264 7.55257 11.0201 7.64634C11.1139 7.74011 11.1666 7.86729 11.1666 7.9999C11.1666 8.1325 11.1139 8.25968 11.0201 8.35345C10.9264 8.44722 10.7992 8.4999 10.6666 8.4999Z"
-        fill="#4BAABE"
-      />
-    </svg>
-  );
-};
-
-export const UpdateIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-    >
-      <g clipPath="url(#clip0_2752_9033)">
-        <path
-          d="M10.7933 1.3335H5.20659C2.77992 1.3335 1.33325 2.78016 1.33325 5.20683V10.7868C1.33325 13.2202 2.77992 14.6668 5.20659 14.6668H10.7866C13.2133 14.6668 14.6599 13.2202 14.6599 10.7935V5.20683C14.6666 2.78016 13.2199 1.3335 10.7933 1.3335ZM11.1866 6.46683L7.40659 10.2468C7.36025 10.2934 7.30519 10.3303 7.24456 10.3555C7.18392 10.3806 7.11891 10.3936 7.05325 10.3936C6.98759 10.3936 6.92258 10.3806 6.86195 10.3555C6.80131 10.3303 6.74625 10.2934 6.69992 10.2468L4.81325 8.36016C4.76413 8.31439 4.72473 8.25919 4.6974 8.19785C4.67007 8.13652 4.65538 8.07031 4.65419 8.00318C4.65301 7.93604 4.66536 7.86936 4.6905 7.8071C4.71565 7.74484 4.75308 7.68828 4.80056 7.6408C4.84804 7.59332 4.90459 7.5559 4.96685 7.53075C5.02911 7.5056 5.0958 7.49325 5.16293 7.49444C5.23007 7.49562 5.29628 7.51031 5.35761 7.53764C5.41894 7.56497 5.47414 7.60437 5.51992 7.6535L7.05325 9.18683L10.4799 5.76016C10.5747 5.67184 10.7001 5.62376 10.8296 5.62605C10.9591 5.62833 11.0827 5.68081 11.1743 5.77242C11.2659 5.86402 11.3184 5.98761 11.3207 6.11715C11.323 6.24668 11.2749 6.37205 11.1866 6.46683Z"
-          fill="#88B053"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_2752_9033">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};

package/src/components/DataDisplay/ActivityLogView/service.tsx

@@ -1,83 +0,0 @@
-import { ArrowUpward, Info } from '@mui/icons-material';
-import { Box, Fab } from '@mui/material';
-import { addHours, addMinutes, parseISO } from 'date-fns';
-import { useCallback, useRef } from 'react';
-import { ActivityAction } from '../../export';
-import { CreateIcon, DeleteIcon, UpdateIcon } from './Icons';
-
-/**
- * Converts a given UTC date string to Indian Standard Time (IST).
- *
- * @param dateString - The date string in ISO format to be converted.
- * @returns The converted date object in IST.
- */
-export const convertUTCtoIST = (dateString: string) => {
-  const date = parseISO(dateString);
-  return addMinutes(addHours(date, 5), 30);
-};
-
-export const ActivityIcon = ({ type }: { type: ActivityAction }) => {
-  switch (type) {
-    case 'create':
-      return <CreateIcon />;
-    case 'delete':
-      return <DeleteIcon />;
-    case 'update':
-      return <UpdateIcon />;
-    default:
-      return <Info />;
-  }
-};
-
-export const ScrollToTopButton = () => {
-  const handleScrollToTop = () => {
-    const container = document.querySelector('.scrollable-activity-log');
-    if (container) {
-      container.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
-    }
-  };
-
-  return (
-    <Box
-      sx={{
-        position: 'absolute',
-        bottom: 20,
-        right: 20,
-        zIndex: 1500,
-      }}
-    >
-      <Fab
-        color="primary"
-        size="small"
-        onClick={handleScrollToTop}
-        aria-label="Scroll to top"
-      >
-        <ArrowUpward />
-      </Fab>
-    </Box>
-  );
-};
-
-export function useIntersectionObserver(callback: () => void) {
-  const observer = useRef<IntersectionObserver | null>(null);
-
-  const handleObserver = useCallback(
-    (node: HTMLDivElement) => {
-      if (observer.current) observer.current.disconnect();
-
-      observer.current = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting) {
-          callback();
-        }
-      });
-
-      if (node) observer.current.observe(node);
-    },
-    [callback],
-  );
-
-  return handleObserver;
-}

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

@@ -1,54 +0,0 @@
-import {
-  Timeline,
-  TimelineConnector,
-  TimelineDot,
-  timelineItemClasses,
-} from '@mui/lab';
-import { Box, styled, Typography } from '@mui/material';
-
-export const StyledSpinnerBox = styled(Box)({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-export const StyledSectionTitle = styled(Typography)(({ theme }) => ({
-  fontSize: '12px',
-  color: theme.palette.text.secondary,
-}));
-
-export const StyledTimeline = styled(Timeline)({
-  [`& .${timelineItemClasses.root}:before`]: { flex: 0, padding: 0 },
-  [`& .${timelineItemClasses.root}:not(:first-of-type)`]: {
-    marginTop: '0px',
-  },
-  padding: 0,
-  margin: 0,
-});
-
-export const StyledTimelineDot = styled(TimelineDot)(({ theme }) => ({
-  backgroundColor: theme.palette.surface.defaultBackground,
-  boxShadow: 'none',
-  width: 30,
-  padding: 0,
-  paddingLeft: 5,
-  height: 30,
-}));
-
-export const StyledTimelineConnector = styled(TimelineConnector)(
-  ({ theme }) => ({
-    width: '1px',
-  }),
-);
-
-export const StyledActivityLogViewBox = styled(Box)({
-  '&::-webkit-scrollbar': { display: 'none' },
-  overflowY: 'auto',
-  maxHeight: '70vh',
-});
-
-export const StyledIconBox = styled(Box)({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});

package/src/components/DataDisplay/Avatar/Avatar.tsx

@@ -1,68 +0,0 @@
-import {
-  Avatar as MuiAvatar,
-  AvatarProps as MuiAvatarProps,
-  styled,
-} from '@mui/material';
-import { Typography } from '../Typography/Typography';
-
-export type CircularAvatarProps = {
-  text: string;
-} & Omit<MuiAvatarProps, 'sx'>;
-
-export const CircularAvatar = ({ text, ...rest }: CircularAvatarProps) => {
-  const stringAvatar = (text: string) => {
-    if (!text) return '';
-    return text
-      .split(' ')
-      ?.map((w) => w[0])
-      ?.join('')
-      .toUpperCase();
-  };
-
-  const StyledCircularAvatar = styled(MuiAvatar)(({ theme }) => ({
-    height: '42px',
-    width: '42px',
-  }));
-
-  return (
-    <StyledCircularAvatar variant="circular" {...rest}>
-      <Typography variant="subtitle3">{stringAvatar(text)}</Typography>
-    </StyledCircularAvatar>
-  );
-};
-
-export type SquareAvatarProps = {
-  text: string;
-  onlyStartLetters: boolean;
-} & Omit<MuiAvatarProps, 'sx'>;
-
-export const SquareAvatar = ({
-  onlyStartLetters = false,
-  text,
-  ...rest
-}: SquareAvatarProps) => {
-  const stringAvatar = (text: string) => {
-    if (!text) return '';
-    return text
-      .split(' ')
-      ?.map((w) => w[0])
-      ?.join('')
-      .toUpperCase();
-  };
-
-  const StyledSquareAvatar = styled(MuiAvatar)(({ theme }) => ({
-    height: '150px',
-    width: '210px',
-    backgroundColor: theme.palette.secondary.dark,
-    borderRadius: '5px',
-    border: 'none',
-  }));
-
-  return (
-    <StyledSquareAvatar variant="square" {...rest}>
-      <Typography variant="h6">
-        {onlyStartLetters ? stringAvatar(text) : text}
-      </Typography>
-    </StyledSquareAvatar>
-  );
-};

package/src/components/DataDisplay/Card/Card.tsx

@@ -1,185 +0,0 @@
-import { ChevronRight, MoreHoriz } from '@mui/icons-material';
-
-import {
-  CardContent,
-  Card as MuiCard,
-  Stack,
-  SxProps,
-  Typography,
-} from '@mui/material';
-import { Variant } from '@mui/material/styles/createTypography';
-import { ReactNode } from 'react';
-import { DropDownIcon, DropdownMenu } from '../../export';
-import {
-  StyledButton,
-  StyledCardActions,
-  StyledDivider,
-  StyledHeader,
-  StyledIcon,
-  StyledImage,
-  StyledStatusText,
-} from './styles';
-
-export interface CardProps {
-  title: string;
-  caption?: string;
-  children?: ReactNode;
-  footer?: {
-    buttonText?: string | ReactNode;
-    onClick: () => void;
-    endIcon?: ReactNode;
-    buttonProps?: any;
-  };
-  fields?: {
-    title: string;
-    value: ReactNode | string;
-  }[];
-  titleProps?: {
-    variant: Variant;
-    sx?: SxProps;
-  };
-  captionProps?: {
-    variant: Variant;
-    sx?: SxProps;
-  };
-  status?: string;
-  imageSrc?: string;
-  titleImgIcon?: ReactNode;
-  checkBox?: boolean;
-
-  moreOptions?: boolean;
-  menu?: ReactNode[] | ((props: { close: () => void }) => ReactNode[]);
-  icon?: ReactNode;
-  headerSx?: SxProps;
-  statusSx?: SxProps;
-  cardSx?: SxProps;
-}
-
-export const Card = ({
-  title,
-  titleImgIcon,
-  caption,
-  status,
-  footer,
-  fields,
-  imageSrc,
-
-  statusSx,
-  cardSx,
-  headerSx,
-  moreOptions,
-  titleProps = {
-    variant: 'subtitle2',
-  },
-  captionProps = {
-    variant: 'caption',
-  },
-  icon,
-  children,
-  menu = [],
-}: CardProps) => {
-  const handleClick = (e: any) => {
-    footer?.onClick();
-  };
-
-  return (
-    <MuiCard
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        ...cardSx,
-      }}
-    >
-      <Stack>
-        {children}
-        {imageSrc && <StyledImage src={imageSrc} alt="Card image" />}
-        <StyledHeader sx={headerSx}>
-          <Stack gap={'8px'} flexDirection={'row'} alignItems={'center'}>
-            {/* check box onclick functionality need to add */}
-            {/* {checkBox && (
-            <StyledStack>
-              <Checkbox />
-            </StyledStack>
-          )} */}
-
-            {titleImgIcon && titleImgIcon}
-
-            <Stack justifyContent={'center'}>
-              <Typography variant={titleProps.variant} sx={titleProps.sx}>
-                {title}
-              </Typography>
-              <Typography variant={captionProps.variant} sx={captionProps.sx}>
-                {caption}
-              </Typography>
-            </Stack>
-          </Stack>
-          <Stack flexDirection={'row'} gap={'12px'} alignItems={'center'}>
-            {status && (
-              <StyledStatusText variant="label2" sx={statusSx}>
-                {status}{' '}
-              </StyledStatusText>
-            )}
-            {moreOptions && (
-              <>
-                <DropdownMenu
-                  anchor={({ open }) => (
-                    <DropDownIcon
-                      handleClick={open}
-                      icon={{
-                        icon: (
-                          <StyledIcon>{icon ? icon : <MoreHoriz />}</StyledIcon>
-                        ),
-                        iconProps: { color: 'secondary' },
-                        outlined: false,
-                      }}
-                    />
-                  )}
-                  menu={menu}
-                />
-              </>
-            )}
-          </Stack>
-        </StyledHeader>
-        {fields && (
-          <CardContent>
-            <Stack
-              sx={{
-                display: 'grid',
-                gridTemplateColumns: '1fr 1fr',
-                gap: '20px',
-              }}
-            >
-              {fields.map((field, index) => (
-                <Stack key={index} flexDirection="row" gap="14px">
-                  {index % 2 === 1 && <StyledDivider flexItem />}
-                  <Stack gap="4px">
-                    <Typography variant="caption">{field.title}</Typography>
-                    {typeof field.value == 'string' ? (
-                      <Typography variant="body2">{field.value}</Typography>
-                    ) : (
-                      field.value
-                    )}
-                  </Stack>
-                </Stack>
-              ))}
-            </Stack>
-          </CardContent>
-        )}
-      </Stack>
-
-      {footer && (
-        <StyledCardActions>
-          <StyledButton
-            variant="text"
-            onClick={handleClick}
-            {...footer.buttonProps}
-            endIcon={footer?.endIcon ?? <ChevronRight />}
-          >
-            {footer?.buttonText ?? 'View'}
-          </StyledButton>
-        </StyledCardActions>
-      )}
-    </MuiCard>
-  );
-};