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

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

@@ -1,19 +1,6 @@
-import {
-  Timeline as MuiTimeline,
-  TimelineProps as MuiTimelineProps,
-  TimelineConnector,
-  TimelineContent,
-  TimelineDot,
-  TimelineItem,
-  timelineItemClasses,
-  TimelineOppositeContent,
-  TimelineSeparator,
-} from '@mui/lab';
-import { useTheme } from '@mui/material';
+import { cn } from '@/lib/utils';
+import { Info, MinusSquare, PlusSquare, SquareCheck } from 'lucide-react';
 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;
@@ -23,60 +10,98 @@ export type TimelineItems = {
 
 export type TimelineProps = {
   timelineItems: TimelineItems[];
-} & Omit<MuiTimelineProps, 'ref'>;
+  position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
+  className?: string;
+};
 
-export const Timeline = (props: TimelineProps) => {
-  const { timelineItems, ...otherProps } = props;
-  const theme = useTheme();
-  const hasOppositeContent = props.timelineItems.some(
-    (item) => item.timelineOppositeContent,
-  );
+export const Timeline = ({
+  timelineItems,
+  position = 'right',
+  className,
+}: TimelineProps) => {
+  const getIcon = (variant?: string) => {
+    const iconProps = { size: 16, className: 'text-foreground' };
+    const iconMap = {
+      info: Info,
+      success: SquareCheck,
+      error: MinusSquare,
+      warning: PlusSquare,
+    };
+    const IconComponent =
+      iconMap[variant as keyof typeof iconMap] || SquareCheck;
+    return <IconComponent {...iconProps} />;
+  };
 
-  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} />;
+  const getContentPosition = (index: number): boolean => {
+    const isEven = index % 2 === 0;
+    switch (position) {
+      case 'left':
+        return false;
+      case 'right':
+        return true;
+      case 'alternate':
+        return isEven;
+      case 'alternate-reverse':
+        return !isEven;
       default:
-        return <DoneSquare />;
+        return true;
     }
   };
+
+  const isAlternateLayout =
+    position === 'alternate' || position === 'alternate-reverse';
+
   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>
+    <div className={cn('flex flex-col', className)}>
+      {timelineItems.map((item, index) => {
+        const contentOnRight = getContentPosition(index);
+        const leftContent = contentOnRight
+          ? item.timelineOppositeContent
+          : item.timelineContent;
+        const rightContent = contentOnRight
+          ? item.timelineContent
+          : item.timelineOppositeContent;
+
+        return (
+          <div key={index} className="flex items-start">
+            {/* Left Content */}
+            {isAlternateLayout ? (
+              <div className="flex-1 pr-4 text-right">
+                {leftContent || <span>&nbsp;</span>}
+              </div>
+            ) : (
+              !contentOnRight && (
+                <div className="flex-1 pr-4 text-right">
+                  {item.timelineContent}
+                </div>
+              )
+            )}
+
+            {/* 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">
+                {getIcon(item.variant)}
+              </div>
+              {index < timelineItems.length - 1 && (
+                <div className="w-[2px] grow min-h-[40px] bg-border" />
+              )}
+            </div>
+
+            {/* Right Content */}
+            {isAlternateLayout ? (
+              <div className="flex-1 pl-4 text-left">
+                {rightContent || <span>&nbsp;</span>}
+              </div>
+            ) : (
+              contentOnRight && (
+                <div className="flex-1 pl-4 text-left">
+                  {item.timelineContent}
+                </div>
+              )
+            )}
+          </div>
+        );
+      })}
+    </div>
   );
 };

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

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

package/src/components/DataDisplay/export.ts

@@ -1,14 +1,14 @@
 export * from './Accordion/Accordion';
-export * from './AccordionGroup/AccordionGroup';
 export * from './ActivityLogView/ActivityLogView';
 export * from './Avatar/Avatar';
 export * from './Card/Card';
+export * from './Chip/Chip';
 export * from './Chips/Chips';
 export * from './DataTable/DataTable';
-export * from './EditableDataTable/EditableDataTable';
 export * from './EmptyIllustration/EmptyIllustration';
 export * from './ReactJoyride/ReactJoyride';
-export * from './SidePanel/SidePanel';
+export * from './Separator/Separator';
+export * from './Skeleton/Skeleton';
 export * from './StatusCard/StatusCard';
 export * from './Timeline/Timeline';
 export * from './Typography/Typography';

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

@@ -1,32 +1,42 @@
-import { Alert as MuiAlert, AlertProps as MuiAlertProps } from '@mui/material';
+import { AlertDescription, Alert as ShadcnAlert } from '@/shadcn-components/Feedback/Altert/Alert';
+import { AlertCircle, CheckCircle2, Info, TriangleAlert } from 'lucide-react';
 import { ReactNode } from 'react';
-import { Icons, Typography } from '../../export';
 
 export type AlertProps = {
   message: string | ReactNode;
-} & MuiAlertProps;
+  severity?: 'success' | 'error' | 'info' | 'warning';
+  variant?: 'default' | 'destructive';
+  className?: string;
+};
 
-const getIcon = (severity: MuiAlertProps['severity']) => {
+const getIcon = (severity: AlertProps['severity']) => {
   switch (severity) {
     case 'success':
-      return <Icons.SuccessFilledIcon size={20} />;
+      return <CheckCircle2 className="h-4 w-4" />;
     case 'error':
-      return <Icons.AlertFilledIcon size={20} />;
+      return <AlertCircle className="h-4 w-4" />;
     case 'info':
-      return <Icons.InfoFilledIcon size={20} />;
+      return <Info className="h-4 w-4" />;
     case 'warning':
-      return <Icons.WarningFilledIcon size={20} />;
+      return <TriangleAlert className="h-4 w-4" />;
+    default:
+      return null;
   }
 };
 
-export const Alert = ({ severity, message, ...rest }: AlertProps) => {
+export const Alert = ({
+  severity,
+  message,
+  variant,
+  className,
+}: AlertProps) => {
+  const alertVariant =
+    variant || (severity === 'error' ? 'destructive' : 'default');
+
   return (
-    <MuiAlert severity={severity} icon={getIcon(severity)} {...rest}>
-      {typeof message == 'string' ? (
-        <Typography variant="caption">{message}</Typography>
-      ) : (
-        message
-      )}
-    </MuiAlert>
+    <ShadcnAlert variant={alertVariant} className={className}>
+      {severity && getIcon(severity)}
+      <AlertDescription>{message}</AlertDescription>
+    </ShadcnAlert>
   );
 };

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

@@ -1,121 +1,114 @@
 import {
-  Box,
-  IconButton,
-  Snackbar as MuiSnackbar,
-  SnackbarProps as MuiSnackbarProps,
-  Stack,
-  useTheme,
-} from '@mui/material';
-import { capitalize } from 'lodash';
+  CircleCheckIcon,
+  InfoIcon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+  XIcon,
+} from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Icons } from '../../export';
+import { Button } from '../../Input/Button/Button';
 
 export type Severity = 'success' | 'info' | 'warning' | 'error';
 
+export type SnackbarPosition = {
+  vertical: 'top' | 'bottom';
+  horizontal: 'left' | 'center' | 'right';
+};
+
 export type SnackbarProps = {
   severity: Severity;
   message: string;
-} & MuiSnackbarProps;
+  open: boolean;
+  onClose?: (reason?: 'timeout' | 'clickaway') => void;
+  anchorOrigin?: SnackbarPosition;
+  autoHideDuration?: number;
+};
 
-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;
+export const Snackbar = ({
+  severity,
+  message,
+  open,
+  onClose,
+  anchorOrigin,
+  autoHideDuration,
+}: SnackbarProps) => {
+  const [visible, setVisible] = useState(open);
+
+  useEffect(() => {
+    if (open && autoHideDuration) {
+      const timer = setTimeout(() => {
+        setVisible(false);
+        if (onClose) {
+          onClose('timeout');
+        }
+      }, autoHideDuration);
+      return () => clearTimeout(timer);
     }
-  };
+  }, [open, autoHideDuration, onClose]);
 
-  const getIcon = (variant: Severity) => {
-    switch (variant) {
+  const getIcon = () => {
+    switch (severity) {
       case 'success':
-        return <Icons.SuccessFilledIcon size={20} />;
+        return <CircleCheckIcon className="h-5 w-5" />;
       case 'error':
-        return <Icons.AlertFilledIcon size={20} />;
+        return <OctagonXIcon className="h-5 w-5" />;
       case 'info':
-        return <Icons.InfoFilledIcon size={20} />;
+        return <InfoIcon className="h-5 w-5" />;
       case 'warning':
-        return <Icons.WarningFilledIcon size={20} />;
+        return <TriangleAlertIcon className="h-5 w-5" />;
     }
   };
 
-  const handleClose = (event: React.SyntheticEvent<any> | Event) => {
-    if (props.onClose) {
-      props.onClose(event, 'clickaway');
+  const handleClose = () => {
+    setVisible(false);
+    if (onClose) {
+      onClose('clickaway');
     }
   };
 
+  if (!visible) return null;
+
+  const vertical = anchorOrigin?.vertical || 'top';
+  const horizontal = anchorOrigin?.horizontal || 'center';
+
+  const positionClasses = {
+    'top-left': 'top-6 left-6',
+    'top-center': 'top-6 left-1/2 -translate-x-1/2',
+    'top-right': 'top-6 right-6',
+    'bottom-left': 'bottom-6 left-6',
+    'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2',
+    'bottom-right': 'bottom-6 right-6',
+  }[`${vertical}-${horizontal}`];
+
   return (
-    <MuiSnackbar open={props.open} onClose={props.onClose} {...props}>
-      <Box
-        sx={{
-          height: '90px',
-          width: '480px',
-          backgroundColor: theme.palette.surface.paperBackground,
-          borderRadius: '5px',
-        }}
+    <div
+      className={`fixed ${positionClasses} z-[9999] pointer-events-auto`}
+      role="alert"
+      aria-live="polite"
+    >
+      <div
+        className={`group pointer-events-auto relative flex w-full max-w-md items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all`}
+        data-sonner-toast=""
       >
-        <Stack
-          height="100%"
-          direction="row"
-          borderRadius="5px"
-          gap="8px"
-          sx={{
-            backgroundColor: getBackGroundColor(props.severity),
-          }}
+        <div className="flex items-start gap-3 flex-1">
+          <div className={`mt-0.5`}>{getIcon()}</div>
+          <div className="flex flex-col gap-1 flex-1">
+            <Typography variant="small" className="capitalize">
+              {severity}
+            </Typography>
+            <Typography variant="muted">{message}</Typography>
+          </div>
+        </div>
+        <Button
+          variant={'ghost'}
+          size={'icon-sm'}
+          onClick={handleClose}
+          className="absolute right-2 top-2 rounded-full"
         >
-          <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>
+          <XIcon className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
   );
 };

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

@@ -1,5 +1,5 @@
-import './Spinner.css';
-
 export const Spinner = () => {
-  return <div className="spinner"></div>;
+  return (
+    <div className="relative h-10 w-10 scale-[0.4] rounded-full [animation:rotate_1s_linear_infinite] before:absolute before:inset-0 before:box-border before:rounded-full before:border-[5px] before:border-[#7D60D9] before:content-[''] before:[animation:prixClipFix_1.5s_linear_infinite] after:absolute after:inset-0 after:box-border after:rounded-full after:border-[5px] after:border-[#FF3D00] after:content-[''] after:[animation:prixClipFix_1.5s_linear_infinite] after:[transform:rotate3d(90,90,0,180deg)]" />
+  );
 };

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

@@ -1,29 +1,36 @@
-import {
-  IconButton,
-  Tooltip as MuiTooltip,
-  TooltipProps as MuiTooltipProps,
-} from '@mui/material';
-import { Children, ReactNode } from 'react';
+import { ReactNode } from 'react';
+
+import { Tooltip as ShadcnTooltip, TooltipContent, TooltipTrigger } from '@/shadcn-components/Feedback/Tooltip/Tooltip';
 
 export type TooltipProps = {
   children: ReactNode;
-} & MuiTooltipProps;
-export type TooltipContentProps = { message: string };
+  title: ReactNode;
+  placement?: 'top' | 'right' | 'bottom' | 'left';
+  arrow?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  delayDuration?: number;
+};
 
 export const Tooltip = ({
+  children,
+  title,
   placement = 'right',
-  arrow = true,
-  ...props
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration,
 }: TooltipProps) => {
-  const isIconButton = Children.only(props.children).type === IconButton;
-
   return (
-    <MuiTooltip {...props} placement={placement} arrow={arrow}>
-      {isIconButton ? (
-        props.children
-      ) : (
-        <IconButton>{props.children}</IconButton>
-      )}
-    </MuiTooltip>
+    <ShadcnTooltip
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+      delayDuration={delayDuration}
+    >
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent side={placement}>{title}</TooltipContent>
+    </ShadcnTooltip>
   );
 };

package/src/components/Feedback/export.ts

@@ -2,5 +2,3 @@ export * from './Alert/Alert';
 export * from './Snackbar/Snackbar';
 export * from './Spinner/Spinner';
 export * from './Tooltip/Tooltip';
-export * from './Tooltip/ToolTipContent';
-export * from './Tutorial/Tutorial';

package/src/components/Image/Image.tsx

@@ -1,14 +1,14 @@
-import { Box } from '@mui/material';
-// const brokenImage = require("./broken-image.png");
+import { CSSProperties } from 'react';
 
 interface ImageProps {
   src: string;
   alt: string;
   height: string | number;
   width: string | number;
-  fit?: 'cover' | 'contain' | 'fill';
+  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
   radius?: string | number;
-  defaultImage?: any;
+  defaultImage?: string;
+  className?: string;
 }
 
 export default function Image({
@@ -18,28 +18,30 @@ export default function Image({
   width,
   fit = 'contain',
   radius = '10px',
-  defaultImage = null,
+  defaultImage = '',
+  className = '',
 }: ImageProps) {
+  const containerStyle: CSSProperties = {
+    height: typeof height === 'number' ? `${height}px` : height,
+    width: typeof width === 'number' ? `${width}px` : width,
+  };
+
+  const imageStyle: CSSProperties = {
+    borderRadius: typeof radius === 'number' ? `${radius}px` : radius,
+    objectFit: fit,
+  };
+
   return (
-    <Box
-      sx={{
-        height: height,
-        width: width,
-        '& > img': {
-          borderRadius: radius,
-          width: '100%',
-          height: '100%',
-          objectFit: fit,
-        },
-      }}
-    >
+    <div style={containerStyle} className={className}>
       <img
         src={src || defaultImage}
         alt={alt}
-        onError={(e: any) => {
-          e.target.src = defaultImage ? defaultImage : '';
+        style={imageStyle}
+        className="w-full h-full"
+        onError={(e: React.SyntheticEvent<HTMLImageElement>) => {
+          e.currentTarget.src = defaultImage || '';
         }}
       />
-    </Box>
+    </div>
   );
 }