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

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

@@ -1,33 +1,58 @@
-import {
-  DialogContent,
-  DialogTitle,
-  Dialog as MuiDialog,
-  DialogProps as MuiDialogProps,
-} from '@mui/material';
+import { DialogHeader, Dialog as ShadcnDialog, DialogContent as ShadcnDialogContent, DialogTitle as ShadcnDialogTitle } from '@/shadcn-components/DataDisplay/Dialog/Dialog';
 import { ReactNode } from 'react';
-export type DialogProps = {
+
+type MaxWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+type DialogProps = {
   content: (props: { close: () => void }) => ReactNode;
   title?: string | undefined;
   onClose: () => void;
-} & Omit<MuiDialogProps, 'content'>;
+  open: boolean;
+  className?: string;
+  showCloseButton?: boolean;
+  maxWidth?: MaxWidthSize;
+};
 
-export const Dialog = ({
+const Dialog = ({
   onClose,
   title,
   content,
   open,
-  ...props
+  className,
+  showCloseButton = true,
+  maxWidth = 'lg',
 }: DialogProps) => {
+  const maxWidthClasses = {
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+  };
+
   return (
-    <MuiDialog
+    <ShadcnDialog
       open={open}
-      onClose={(_, reason) => {
-        onClose();
+      onOpenChange={(isOpen) => {
+        if (!isOpen) {
+          onClose();
+        }
       }}
-      {...props}
     >
-      {title && <DialogTitle>{title}</DialogTitle>}
-      <DialogContent> {content({ close: onClose })}</DialogContent>
-    </MuiDialog>
+      <ShadcnDialogContent
+        className={`w-full p-0 ${maxWidthClasses[maxWidth]} ${className || ''}`}
+        showCloseButton={showCloseButton}
+      >
+        {title && (
+          <DialogHeader className="pl-4 pt-4">
+            <ShadcnDialogTitle>{title}</ShadcnDialogTitle>
+          </DialogHeader>
+        )}
+        <div>{content({ close: onClose })}</div>
+      </ShadcnDialogContent>
+    </ShadcnDialog>
   );
 };
+
+export { Dialog, type DialogProps, type MaxWidthSize };

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

@@ -1,31 +1,40 @@
-import { Fade } from '@mui/material';
-import { TransitionProps } from '@mui/material/transitions';
-import React, { ReactNode, useState } from 'react';
-import { Dialog, DialogProps } from '../Dialog/Dialog';
+import { DialogHeader, Dialog as ShadcnDialog, DialogContent as ShadcnDialogContent, DialogTitle as ShadcnDialogTitle } from '@/shadcn-components/DataDisplay/Dialog/Dialog';
+import { ReactNode, useState } from 'react';
 
-const FadeTransition = React.forwardRef(function FadeTransition(
-  props: TransitionProps & {
-    children: React.ReactElement<any, any>;
-  },
-  ref: React.Ref<unknown>,
-) {
-  return <Fade ref={ref} {...props} timeout={50} />;
-});
+type MaxWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 export type DialogButtonProps = {
   anchor: (props: { open: () => void }) => ReactNode;
   onDialogOpen?: () => void;
   onDialogClose?: () => void;
-} & Omit<DialogProps, 'open' | 'onClose'>;
+  content: (props: { close: () => void }) => ReactNode;
+  title?: string | undefined;
+  className?: string;
+  showCloseButton?: boolean;
+  maxWidth?: MaxWidthSize;
+};
 
 export const DialogButton = ({
   onDialogClose,
   onDialogOpen,
   anchor,
-  ...props
+  content,
+  title,
+  className,
+  showCloseButton = true,
+  maxWidth = 'lg',
 }: DialogButtonProps) => {
   const [open, setOpen] = useState(false);
 
+  const maxWidthClasses = {
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+  };
+
   const onClose = () => {
     onDialogClose && onDialogClose();
     setOpen(false);
@@ -41,12 +50,28 @@ export const DialogButton = ({
       {anchor({
         open: onOpen,
       })}
-      <Dialog
-        {...props}
+      <ShadcnDialog
         open={open}
-        onClose={onClose}
-        TransitionComponent={FadeTransition}
-      />
+        onOpenChange={(isOpen) => {
+          if (!isOpen) {
+            onClose();
+          }
+        }}
+      >
+        <ShadcnDialogContent
+          className={`w-full p-0 ${maxWidthClasses[maxWidth]} ${
+            className || ''
+          }`}
+          showCloseButton={showCloseButton}
+        >
+          {title && (
+            <DialogHeader className="pl-4 pt-4">
+              <ShadcnDialogTitle>{title}</ShadcnDialogTitle>
+            </DialogHeader>
+          )}
+          <div>{content({ close: onClose })}</div>
+        </ShadcnDialogContent>
+      </ShadcnDialog>
     </>
   );
 };

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

@@ -1,8 +1,12 @@
-import { KeyboardArrowDown } from '@mui/icons-material';
+import { ChevronDown } from 'lucide-react';
 import { Button, ButtonProps } from '../../Input/Button/Button';
 
 export const DropDownButton = (props: ButtonProps) => {
   return (
-    <Button variant="outlined" endIcon={<KeyboardArrowDown />} {...props} />
+    <Button
+      variant="default"
+      endIcon={<ChevronDown className="h-4 w-4" />}
+      {...props}
+    />
   );
 };

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

@@ -1,10 +1,10 @@
-import { MoreVert } from '@mui/icons-material';
-import { IconButtonProps } from '@mui/material';
+import { cn } from '@/lib/utils';
+import { MoreVertical } from 'lucide-react';
 import { ReactNode } from 'react';
-import { StyledIconButton } from './styles';
+import { Button } from '../../Input/Button/Button';
 
 const defaultIcon = {
-  icon: <MoreVert color="primary" />,
+  icon: <MoreVertical className="h-5 w-5 text-primary" />,
   outlined: true,
 };
 
@@ -14,18 +14,19 @@ export const DropDownIcon = ({
 }: {
   icon?: {
     icon?: ReactNode;
-    iconProps?: IconButtonProps;
     outlined?: boolean;
+    className?: string;
   };
   handleClick: any;
 }) => {
   return (
-    <StyledIconButton
-      outlined={icon?.outlined ?? false}
+    <Button
+      variant={icon?.outlined ? 'outline' : 'ghost'}
+      size="icon"
       onClick={handleClick}
-      {...icon.iconProps}
+      className={cn('h-10 w-10', icon?.className)}
     >
       {icon.icon}
-    </StyledIconButton>
+    </Button>
   );
 };

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

@@ -1,112 +1,99 @@
+import { cn } from '@/lib/utils';
 import {
-  Divider,
-  Menu,
-  MenuListProps,
-  MenuProps,
-  Stack,
-  StackProps,
-  useTheme,
-} from '@mui/material';
-import { ReactNode, useState } from 'react';
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenu as ShadcnDropdownMenu,
+} from '@/shadcn-components/Navigation/DropdownMenu/DropdownMenu';
+import { ReactNode, useEffect, useRef, 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'];
+  menuContentClassName?: string;
+  menuListClassName?: string;
   menuHeader?: ReactNode;
   menuFooter?: ReactNode;
   handleMenuScroll?: (event: any) => Promise<void>;
+  align?: 'start' | 'center' | 'end';
+  side?: 'top' | 'right' | 'bottom' | 'left';
 };
 
 export const DropdownMenu = ({
-  menuProps,
   menu = [],
   menuSlot,
   useMenuSlot = false,
-  menuListProps,
   menuHeader,
   menuFooter,
-  menuListContainerSx,
+  menuContentClassName,
+  menuListClassName,
   anchor,
   handleMenuScroll,
+  align = 'end',
+  side = 'bottom',
 }: DropdownMenuProps) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [open, setOpen] = useState(false);
-  const theme = useTheme();
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
-  const handleClick = (event: any) => {
-    setAnchorEl(event.currentTarget);
+  const handleClick = (e: any) => {
     setOpen(true);
   };
 
   const handleClose = () => {
-    setAnchorEl(null);
     setOpen(false);
   };
 
   const menuItems =
     typeof menu === 'function' ? menu({ close: handleClose }) : menu;
 
+  // Force re-render on mount to ensure positioning works
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
   return (
-    <>
-      {anchor({ open: handleClick })}
+    <ShadcnDropdownMenu open={open} onOpenChange={setOpen}>
+      {/* Wrap in a span to ensure proper DOM structure */}
+      <DropdownMenuTrigger asChild>
+        <span ref={wrapperRef} style={{ display: 'inline-block' }}>
+          {anchor({ open: handleClick })}
+        </span>
+      </DropdownMenuTrigger>
 
-      <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' },
+      <DropdownMenuContent
+        align={align}
+        side={side}
+        className={cn('min-w-[200px] z-[2000]', menuContentClassName)}
+        sideOffset={5}
+        collisionPadding={8}
+        // Force Radix to recalculate position
+        onPointerDownOutside={(e) => {
+          // Don't prevent default
         }}
-        {...menuProps}
       >
         {menuHeader}
-        <Stack
-          component="div"
+        <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',
-            },
-          }}
+          className={cn(
+            'flex flex-col',
+            'scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-300',
+            menuListClassName,
+          )}
         >
           {useMenuSlot && menuSlot
             ? menuSlot({ close: handleClose })
             : menuItems.map((item, index) => (
                 <div key={index}>
                   {item}
-                  {index < menuItems.length - 1 && (
-                    <Divider flexItem sx={{ margin: '0 !important' }} />
-                  )}
+                  {index < menuItems.length - 1 && <DropdownMenuSeparator />}
                 </div>
               ))}
-        </Stack>
+        </div>
         {menuFooter}
-      </Menu>
-    </>
+      </DropdownMenuContent>
+    </ShadcnDropdownMenu>
   );
 };

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

@@ -1,25 +1,35 @@
-import { ListItemIcon, MenuItemProps, SxProps } from '@mui/material';
+import { cn } from '@/lib/utils';
+import { DropdownMenuItem as ShadcnDropdownMenuItem } from '@/shadcn-components/Navigation/DropdownMenu/DropdownMenu';
 import { ReactNode } from 'react';
-import { StyledMenuItem } from './styles';
 
 export type DropdownMenuItemProps = {
   icon?: ReactNode;
   label: ReactNode;
-  sx?: SxProps;
+  className?: string;
   onClick: () => void;
-} & MenuItemProps;
+  disabled?: boolean;
+  variant?: 'default' | 'destructive';
+};
 
 export const DropdownMenuItem = ({
   icon,
   label,
   onClick,
-  sx = {},
-  ...props
+  className,
+  disabled = false,
+  variant = 'default',
 }: DropdownMenuItemProps) => {
   return (
-    <StyledMenuItem sx={sx} onClick={onClick} {...props}>
-      {icon && <ListItemIcon>{icon}</ListItemIcon>}
+    <ShadcnDropdownMenuItem
+      onClick={onClick}
+      disabled={disabled}
+      variant={variant}
+      className={cn('flex items-center gap-2', className)}
+    >
+      {icon && (
+        <span className="flex items-center justify-center w-6">{icon}</span>
+      )}
       {label}
-    </StyledMenuItem>
+    </ShadcnDropdownMenuItem>
   );
 };

package/src/components/Navigation/PreviewFiles/PreviewFiles.tsx

@@ -1,15 +1,16 @@
+import { cn } from '@/lib/utils';
 import {
-  Box,
-  BoxProps,
-  IconButton,
-  Stack,
-  styled,
-  SxProps,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import { FC, useCallback, useEffect, useState } from 'react';
-import { Icons, Spinner } from '../../export';
+  Download,
+  FileJson,
+  FileText,
+  Image,
+  Paperclip,
+  Trash2,
+} from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Button } from '../../Input/Button/Button';
+import { Spinner } from '../../export';
 
 type FileInfo = {
   name: string;
@@ -24,8 +25,8 @@ export type PreviewFilesProps = {
   onChange?: (newFiles: File[], deletedFile: File) => void;
   showDownload?: boolean;
   hideDelete?: boolean;
-  sx?: SxProps;
-} & Omit<BoxProps, 'onChange'>;
+  className?: string;
+};
 
 export const PreviewFiles = ({
   files,
@@ -33,10 +34,8 @@ export const PreviewFiles = ({
   onChange,
   showDownload = false,
   hideDelete = false,
-  sx,
-  ...props
+  className,
 }: PreviewFilesProps) => {
-  const theme = useTheme();
   const [previews, setPreviews] = useState<Record<string, string>>({});
   const [resolvedFiles, setResolvedFiles] = useState<(File | FileInfo)[]>([]);
   const [fileSizes, setFileSizes] = useState<Record<string, number>>({});
@@ -151,7 +150,7 @@ export const PreviewFiles = ({
         });
       }
     },
-    [onChange, resolvedFiles],
+    [onChange, resolvedFiles, previews],
   );
 
   useEffect(() => {
@@ -168,77 +167,73 @@ export const PreviewFiles = ({
   if (resolvedFiles.length === 0) return <></>;
 
   return (
-    <Box sx={sx} {...props}>
+    <div className={cn('w-full', className)}>
       {label && (
-        <Typography
-          marginBottom={'8px'}
-          fontSize={'14px'}
-          color={theme.palette.text.secondary}
-          variant="body2"
-        >
+        <Typography variant="small" className="mb-2 text-muted-foreground">
           {label}
         </Typography>
       )}
       {resolvedFiles.map((file, index) => (
-        <PreviewContainer key={index} onClick={() => handleFilePreview(file)}>
-          <Stack
-            direction={'row'}
-            sx={{ display: 'flex', alignItems: 'center', gap: '12px' }}
-          >
-            <Box width={'30px'} height={'30px'}>
+        <div
+          key={index}
+          className={cn(
+            'w-full min-h-[60px] cursor-pointer bg-secondary/60 p-4 rounded-lg',
+            'flex justify-between items-center mb-2',
+            'hover:bg-secondary/90 transition-colors',
+          )}
+          onClick={() => handleFilePreview(file)}
+        >
+          <div className="flex items-center gap-3">
+            <div className="w-[30px] h-[30px] flex items-center justify-center">
               {loadingFiles[file.name] ? <Spinner /> : getFileIcon(file)}
-            </Box>
+            </div>
 
-            <Stack direction={'column'} marginLeft={'8px'} maxWidth={'220px'}>
+            <div className="flex flex-col ml-2 gap-1 max-w-[220px]">
               <Typography
-                fontSize={'14px'}
-                color={theme.palette.primary.main}
-                variant="label2"
-                sx={{ wordBreak: 'break-all' }}
+                variant="small"
+                className="text-primary break-all font-medium"
               >
                 {file.name}
               </Typography>
-              <Typography color={theme.palette.text.tertiary} variant="caption">
+              <Typography variant="muted" className="text-muted-foreground">
                 {getDisplayFileSize(file)}
               </Typography>
-            </Stack>
-          </Stack>
+            </div>
+          </div>
 
-          <Box
+          <div
+            className="flex items-center gap-1"
             onClick={(event: React.MouseEvent<HTMLDivElement>) => {
               event.stopPropagation();
             }}
           >
             {showDownload && (
-              <IconButton onClick={() => handleDownload(file)}>
-                <Icons.DownloadIcon />
-              </IconButton>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => handleDownload(file)}
+                className="h-8 w-8"
+              >
+                <Download className="h-4 w-4" />
+              </Button>
             )}
             {onChange && !hideDelete && (
-              <IconButton onClick={() => handleDelete(file, index)}>
-                <Icons.DeleteIcon />
-              </IconButton>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => handleDelete(file, index)}
+                className="h-8 w-8"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
             )}
-          </Box>
-        </PreviewContainer>
+          </div>
+        </div>
       ))}
-    </Box>
+    </div>
   );
 };
 
-const PreviewContainer = styled(Box)(({ theme }) => ({
-  width: '100%',
-  minHeight: '60px',
-  cursor: 'pointer',
-  backgroundColor: theme.palette.secondary.light,
-  padding: '16px 8px',
-  borderRadius: '10px',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  marginBottom: '8px',
-}));
-
 const formatFileSize = (size: number) => {
   if (size < 1024) return `${size} bytes`;
   if (size < 1048576) return `${(size / 1024).toFixed(2)} KB`;
@@ -250,7 +245,7 @@ const getFileIcon = (file: File | FileInfo) => {
   const IconComponent =
     Object.entries(FILE_TYPE_ICON_MAP).find(([key]) =>
       file.type.startsWith(key),
-    )?.[1] || Icons.AttachmentIcon;
+    )?.[1] || Paperclip;
   return <IconComponent size={30} />;
 };
 
@@ -313,13 +308,12 @@ const EXTENSION_TO_MIME_TYPE: Record<string, string> = {
     'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
 };
 
-const FILE_TYPE_ICON_MAP: Record<string, FC<{ size?: number }>> = {
-  'image/': Icons.ImageIcon,
-  'application/pdf': Icons.PdfIcon,
-  'application/msword': Icons.DocumentIcon,
-  'application/vnd.ms-excel': Icons.ExcelIcon,
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
-    Icons.ExcelIcon,
+const FILE_TYPE_ICON_MAP: Record<string, React.ComponentType<any>> = {
+  'image/': Image,
+  'application/pdf': FileText,
+  'application/msword': FileJson,
+  'application/vnd.ms-excel': FileJson,
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': FileJson,
   'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-    Icons.DocumentIcon,
+    FileText,
 };