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

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

@@ -1,25 +1,16 @@
-import { TimelineContent, TimelineItem, TimelineSeparator } from '@mui/lab';
-import { Box, Stack, SxProps, Typography, useTheme } from '@mui/material';
+import { cn } from '@/lib/utils';
 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 { Info, MinusSquare, PlusSquare, SquareCheck } from 'lucide-react';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Spinner } from '../../Feedback/Spinner/Spinner';
 import { EmptyIllustration } from '../EmptyIllustration/EmptyIllustration';
+import { ActivityLogFilter } from './ActivityLogFilter';
 import {
-  ActivityIcon,
   convertUTCtoIST,
   ScrollToTopButton,
   useIntersectionObserver,
 } from './service';
-import {
-  StyledActivityLogViewBox,
-  StyledIconBox,
-  StyledSpinnerBox,
-  StyledTimeline,
-  StyledTimelineConnector,
-  StyledTimelineDot,
-} from './styles';
 
 export type ActivityAction = 'create' | 'update' | 'delete';
 
@@ -41,71 +32,22 @@ interface ActivityLogProps {
   setToDate: (date: Date | null) => void;
   isLoading: boolean;
   hideLogFilter?: boolean;
-  timelineContentSx?: SxProps;
-  timelineSx?: SxProps;
+  className?: string;
+  title?: string;
 }
 
-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: any) => setLocalFromDate(value)}
-          disabled={isLoading}
-        />
-        <DatePicker
-          key={`to-date-${localToDate}`}
-          label="To Date"
-          value={localToDate}
-          onChange={(value: any) => 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>
-  );
+const getActivityIcon = (action?: ActivityAction) => {
+  const iconProps = { size: 16, className: 'text-foreground' };
+  switch (action) {
+    case 'create':
+      return <PlusSquare {...iconProps} />;
+    case 'delete':
+      return <MinusSquare {...iconProps} />;
+    case 'update':
+      return <SquareCheck {...iconProps} />;
+    default:
+      return <Info {...iconProps} />;
+  }
 };
 
 export const ActivityLogView = ({
@@ -119,10 +61,9 @@ export const ActivityLogView = ({
   setToDate,
   isLoading,
   hideLogFilter = false,
-  timelineContentSx = {},
-  timelineSx = {},
+  className,
+  title,
 }: ActivityLogProps) => {
-  const theme = useTheme();
   const lastItemRef = useIntersectionObserver(() => {
     if (!isFetchingNextPage && hasNextPage) fetchNextPage();
   });
@@ -139,105 +80,120 @@ export const ActivityLogView = ({
       : '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>
-    ));
+  const renderMessage = (activity: Activity) => {
+    const messageParts = activity.message?.split('\n') || [];
+
+    return (
+      <ul className="list-none space-y-1">
+        {messageParts.map((part, index) => (
+          <li key={index}>
+            <Typography variant="small">
+              {index === 0 && activity.userName && (
+                <span className="text-foreground font-medium">
+                  {activity.userName}
+                </span>
+              )}{' '}
+              {part?.split(/('[^']*')/g).map((text, idx) => {
+                const isQuotedText = text.startsWith("'") && text.endsWith("'");
+                return (
+                  <span
+                    key={idx}
+                    className={
+                      isQuotedText ? 'text-foreground' : 'text-muted-foreground'
+                    }
+                  >
+                    {isQuotedText ? text.slice(1, -1) : text}
+                  </span>
+                );
+              })}
+            </Typography>
+          </li>
+        ))}
+      </ul>
+    );
+  };
 
   return (
-    <StyledActivityLogViewBox className="scrollable-activity-log">
-      {!hideLogFilter && (
-        <ActivityLogFilter
-          fromDate={fromDate}
-          toDate={toDate}
-          setFromDate={setFromDate}
-          setToDate={setToDate}
-          fetchNextPage={fetchNextPage}
-          isLoading={isLoading}
-        />
+    <div
+      className={cn(
+        'scrollable-activity-log overflow-y-auto max-h-[70vh] [&::-webkit-scrollbar]:hidden',
+        className,
+      )}
+    >
+      {/* Header with Title and Filter */}
+      {(title || !hideLogFilter) && (
+        <div
+          className={cn(
+            'flex items-center mb-6',
+            title ? 'justify-between' : 'justify-end',
+          )}
+        >
+          {title && <Typography variant="h4">{title}</Typography>}
+          {!hideLogFilter && (
+            <ActivityLogFilter
+              fromDate={fromDate}
+              toDate={toDate}
+              setFromDate={setFromDate}
+              setToDate={setToDate}
+              fetchNextPage={fetchNextPage}
+              isLoading={isLoading}
+            />
+          )}
+        </div>
       )}
 
       {loading ? (
-        <StyledSpinnerBox>
+        <div className="flex justify-center items-center">
           <Spinner />
-        </StyledSpinnerBox>
+        </div>
       ) : 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 }}>
+          <div key={section} className="mb-6">
+            <Typography variant="small">{section}</Typography>
+            <div className="flex flex-col">
               {activities.map((activity, index) => (
-                <TimelineItem
+                <div
                   key={index}
+                  className="flex items-start"
                   ref={index === activities.length - 1 ? lastItemRef : null}
                 >
-                  <TimelineSeparator>
-                    <StyledTimelineDot>
-                      <StyledIconBox>
-                        {activity.action ? (
-                          <ActivityIcon type={activity.action} />
-                        ) : (
-                          <AddSquare />
-                        )}
-                      </StyledIconBox>
-                    </StyledTimelineDot>
+                  {/* Timeline Separator */}
+                  <div className="flex flex-col items-center flex-shrink-0 self-stretch">
+                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 border-border bg-background">
+                      {getActivityIcon(activity.action)}
+                    </div>
                     {index < activities.length - 1 && (
-                      <StyledTimelineConnector />
+                      <div className="w-[2px] grow min-h-[40px] bg-border" />
                     )}
-                  </TimelineSeparator>
-                  <TimelineContent
-                    sx={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      marginTop: 1,
-                      ...timelineContentSx,
-                    }}
-                  >
-                    <Typography variant="body1" sx={{ fontWeight: 500 }}>
-                      {renderMessage(activity)}
-                    </Typography>
-                    <Typography variant="caption">
+                  </div>
+
+                  {/* Activity Content */}
+                  <div className="flex-1 pl-4 flex flex-col items-start my-1">
+                    <div className="flex-1">{renderMessage(activity)}</div>
+                    <Typography
+                      variant="small"
+                      className="mt-1 text-muted-foreground"
+                    >
                       {format(
                         convertUTCtoIST(activity.timestamp),
                         "d MMMM yyyy 'at' hh:mm a",
                       )}
                     </Typography>
-                  </TimelineContent>
-                </TimelineItem>
+                  </div>
+                </div>
               ))}
-            </StyledTimeline>
-          </Box>
+            </div>
+          </div>
         ))
       )}
       {isFetchingNextPage && (
-        <StyledSpinnerBox>
+        <div className="flex justify-center items-center">
           <Spinner />
-        </StyledSpinnerBox>
+        </div>
       )}
       <ScrollToTopButton />
-    </StyledActivityLogViewBox>
+    </div>
   );
 };

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

@@ -1,9 +1,7 @@
-import { ArrowUpward, Info } from '@mui/icons-material';
-import { Box, Fab } from '@mui/material';
 import { addHours, addMinutes, parseISO } from 'date-fns';
+import { ArrowUp } from 'lucide-react';
 import { useCallback, useRef } from 'react';
-import { ActivityAction } from '../../export';
-import { CreateIcon, DeleteIcon, UpdateIcon } from './Icons';
+import { Button } from '../../Input/Button/Button';
 
 /**
  * Converts a given UTC date string to Indian Standard Time (IST).
@@ -16,19 +14,6 @@ export const convertUTCtoIST = (dateString: string) => {
   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');
@@ -41,23 +26,17 @@ export const ScrollToTopButton = () => {
   };
 
   return (
-    <Box
-      sx={{
-        position: 'absolute',
-        bottom: 20,
-        right: 20,
-        zIndex: 1500,
-      }}
-    >
-      <Fab
-        color="primary"
-        size="small"
+    <div className="fixed bottom-5 right-5 z-[1500]">
+      <Button
+        variant="default"
+        size="icon"
         onClick={handleScrollToTop}
         aria-label="Scroll to top"
+        className="rounded-full h-10 w-10"
       >
-        <ArrowUpward />
-      </Fab>
-    </Box>
+        <ArrowUp className="h-4 w-4" />
+      </Button>
+    </div>
   );
 };
 

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

@@ -1,46 +1,28 @@
+import { cn } from '@/lib/utils';
 import {
-  Avatar as MuiAvatar,
-  AvatarProps as MuiAvatarProps,
-  styled,
-} from '@mui/material';
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/shadcn-components/DataDisplay/Avatar/Avatar';
 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>
-  );
+  src?: string;
+  alt?: string;
+  className?: string;
+  fallbackClassName?: string;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 
-export type SquareAvatarProps = {
-  text: string;
-  onlyStartLetters: boolean;
-} & Omit<MuiAvatarProps, 'sx'>;
-
-export const SquareAvatar = ({
-  onlyStartLetters = false,
+export const CircularAvatar = ({
   text,
-  ...rest
-}: SquareAvatarProps) => {
+  src,
+  alt,
+  className,
+  fallbackClassName,
+  onClick,
+}: CircularAvatarProps) => {
   const stringAvatar = (text: string) => {
     if (!text) return '';
     return text
@@ -50,19 +32,15 @@ export const SquareAvatar = ({
       .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>
+    <Avatar
+      className={cn('h-[42px] w-[42px] cursor-pointer', className)}
+      onClick={onClick}
+    >
+      {src && <AvatarImage src={src} alt={alt || text} />}
+      <AvatarFallback className={fallbackClassName}>
+        <Typography variant="small">{stringAvatar(text)}</Typography>
+      </AvatarFallback>
+    </Avatar>
   );
 };