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

package/src/components/Input/DateTimePicker/DateTimePicker.tsx

@@ -1,69 +1,226 @@
-import { StackProps } from '@mui/material';
+import { cn } from '@/lib/utils';
+import { Calendar } from '@/shadcn-components/Input/Calendar/Calendar';
+import { Input } from '@/shadcn-components/Input/Input/Input';
 import {
-  DateTimePicker as MuiDateTimePicker,
-  DateTimePickerProps as MuiDateTimePickerProps,
-  PickersShortcutsItem,
-  PickerValidDate,
-} from '@mui/x-date-pickers';
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/shadcn-components/Input/Popover/Popover';
 import { format as DateFnsFormat } from 'date-fns';
-
-import { Icons } from '../../export';
+import { CalendarDays } from 'lucide-react';
+import * as React from 'react';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { Button } from '../Button/Button';
 import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
 
-type DateTimePickerProps<
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean = false,
-> = {
-  format?:
-    | 'yyyy'
-    | 'MMMM yyyy'
-    | 'MMM yyyy'
-    | 'dd MMMM yyyy'
-    | 'dd/MM/yyyy'
-    | 'MM/dd/yyyy'
-    | 'yyyy-MM-dd'
-    | 'yyyy-MM-dd hh:mm a'
-    | 'yyyy-MM-dd HH:mm'
-    | 'dd MMM yyyy HH:mm'
-    | 'dd MMM yyyy hh:mm a'
-    | 'dd/MM/yyyy hh:mm a'
-    | 'dd/MM/yyyy HH:mm'
-    | 'hh:mm a'
-    | 'HH:mm'
-    | 'hh:mm:ss a'
-    | 'HH:mm:ss'
-    | 'MMM dd, yyyy hh:mm a'
-    | 'MMMM dd, yyyy HH:mm'
-    | 'EEE, MMM dd yyyy'
-    | 'EEEE, MMMM dd, yyyy';
-  views?: ('year' | 'month' | 'day' | 'hours' | 'minutes' | 'seconds')[];
+type DateTimePickerViews =
+  | 'year'
+  | 'month'
+  | 'day'
+  | 'hours'
+  | 'minutes'
+  | 'seconds';
+
+type DateTimeFormat =
+  | 'yyyy'
+  | 'MMMM yyyy'
+  | 'MMM yyyy'
+  | 'dd MMMM yyyy'
+  | 'dd/MM/yyyy'
+  | 'MM/dd/yyyy'
+  | 'yyyy-MM-dd'
+  | 'yyyy-MM-dd hh:mm a'
+  | 'dd MMM yyyy hh:mm a'
+  | 'dd/MM/yyyy hh:mm a'
+  | 'yyyy-MM-dd hh:mm:ss a'
+  | 'dd MMM yyyy hh:mm:ss a'
+  | 'dd/MM/yyyy hh:mm:ss a'
+  | 'hh:mm a'
+  | 'hh:mm:ss a'
+  | 'MMM dd, yyyy hh:mm a'
+  | 'MMM dd, yyyy hh:mm:ss a'
+  | 'EEE, MMM dd yyyy'
+  | 'EEEE, MMMM dd, yyyy';
+
+export type DateTimePickerProps = {
+  label?: React.ReactNode | string;
+  name?: string;
+  value?: Date;
+  onChange?: (date: Date | undefined) => void;
+  format?: DateTimeFormat;
+  views?: DateTimePickerViews[];
   helperText?: string;
   placeholder?: string;
-  shortcutsItems?: PickersShortcutsItem<any>[];
+  shortcutsItems?: { label: string; getValue: () => Date }[];
   required?: boolean;
-  containerProps?: StackProps;
-  openPickerIcon?: React.ElementType;
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
+  openPickerIcon?: React.ReactNode;
   error?: any;
-} & MuiDateTimePickerProps<TEnableAccessibleFieldDOMStructure>;
+  disabled?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  disablePast?: boolean;
+  disableFuture?: boolean;
+  shouldDisableDate?: (date: Date) => boolean;
+  shouldDisableMonth?: (date: Date) => boolean;
+  shouldDisableYear?: (date: Date) => boolean;
+  className?: string;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onBlur?: React.FocusEventHandler;
+  [key: string]: any;
+};
 
-export const DateTimePicker = <
-  TDate extends PickerValidDate,
-  TEnableAccessibleFieldDOMStructure extends boolean = false,
->({
+export const DateTimePicker = ({
   label,
   name,
+  value,
+  onChange,
   required = false,
   format = 'dd MMM yyyy hh:mm a',
   views = ['year', 'month', 'day', 'hours', 'minutes', 'seconds'],
   helperText,
-  placeholder = '',
+  placeholder = 'Pick a date and time',
   shortcutsItems = [],
-  openPickerIcon: Icon = Icons.NoteIcon,
+  openPickerIcon: Icon = <CalendarDays />,
   containerProps,
-  value,
   error,
+  disabled = false,
+  minDate,
+  maxDate,
+  disablePast = false,
+  disableFuture = false,
+  shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
+  className,
+  onOpen,
+  onClose,
   ...rest
-}: DateTimePickerProps<TDate, TEnableAccessibleFieldDOMStructure>) => {
+}: DateTimePickerProps) => {
+  const [open, setOpen] = React.useState(false);
+  const [dateTime, setDateTime] = React.useState<Date | undefined>(value);
+  const [timeValue, setTimeValue] = React.useState<string>('');
+
+  // Determine view configurations based on views prop
+  const viewConfig = React.useMemo(() => {
+    const hasTime =
+      views.includes('hours') ||
+      views.includes('minutes') ||
+      views.includes('seconds');
+    const hasDate =
+      views.includes('day') ||
+      views.includes('month') ||
+      views.includes('year');
+
+    return {
+      showTime: hasTime,
+      showDate: hasDate,
+    };
+  }, [views]);
+
+  // Update time value when dateTime changes
+  React.useEffect(() => {
+    if (dateTime && viewConfig.showTime) {
+      const hours = dateTime.getHours(),
+        minutes = dateTime.getMinutes(),
+        seconds = dateTime.getSeconds(),
+        timeStr = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(
+          2,
+          '0',
+        )}:${String(seconds).padStart(2, '0')}`;
+      setTimeValue(timeStr);
+    }
+  }, [dateTime, viewConfig.showTime]);
+
+  const formatDateTimeString = (date: Date | undefined) => {
+    if (!date) return '';
+
+    try {
+      return DateFnsFormat(date, format);
+    } catch {
+      return DateFnsFormat(date, 'dd/MM/yyyy hh:mm a');
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (newOpen && onOpen) {
+      onOpen();
+    } else if (!newOpen && onClose) {
+      onClose();
+    }
+  };
+
+  const handleDateSelect = (date: Date | undefined) => {
+    if (date) {
+      const newDateTime = new Date(date);
+      // Preserve existing time if we have one
+      if (dateTime) {
+        newDateTime.setHours(
+          dateTime.getHours(),
+          dateTime.getMinutes(),
+          dateTime.getSeconds(),
+        );
+      }
+      setDateTime(newDateTime);
+      onChange?.(newDateTime);
+    } else {
+      setDateTime(undefined);
+      onChange?.(undefined);
+    }
+  };
+
+  const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const timeStr = e.target.value;
+    setTimeValue(timeStr);
+
+    if (timeStr) {
+      const [hours, minutes, seconds] = timeStr.split(':').map(Number);
+      const newDateTime = dateTime ? new Date(dateTime) : new Date();
+      newDateTime.setHours(hours || 0, minutes || 0, seconds || 0);
+      setDateTime(newDateTime);
+      onChange?.(newDateTime);
+    }
+  };
+
+  // If only time selection (no date), render native time input directly
+  if (viewConfig.showTime && !viewConfig.showDate) {
+    return (
+      <LabelWrapper
+        label={label}
+        required={required}
+        name={name}
+        containerProps={containerProps}
+      >
+        <Input
+          type="time"
+          step="1"
+          value={timeValue}
+          onChange={handleTimeChange}
+          disabled={disabled}
+          placeholder={placeholder}
+          className={cn(
+            'bg-input-background border-none text-muted-foreground',
+            error && 'border-destructive',
+            className,
+          )}
+          {...rest}
+        />
+
+        {/* Helper Text / Error */}
+        {(helperText || error) && (
+          <Typography
+            variant="small"
+            className={cn('ml-1 mt-1', error && 'text-destructive')}
+          >
+            {error || helperText}
+          </Typography>
+        )}
+      </LabelWrapper>
+    );
+  }
+
   return (
     <LabelWrapper
       label={label}
@@ -71,28 +228,115 @@ export const DateTimePicker = <
       name={name}
       containerProps={containerProps}
     >
-      <MuiDateTimePicker
-        format={format}
-        views={views}
-        defaultValue={value}
-        slotProps={{
-          textField: {
-            helperText,
-            placeholder,
-            error: !!error,
-          },
-          shortcuts: {
-            items: shortcutsItems,
-          },
-        }}
-        slots={{
-          openPickerIcon: Icon,
-        }}
-        dayOfWeekFormatter={(day: any) => {
-          return `${DateFnsFormat(day, 'EEEE').slice(0, 2)}.`;
-        }}
-        {...rest}
-      />
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="input"
+            className={cn(
+              'w-full justify-between text-left font-normal',
+              !dateTime && 'text-muted-foreground',
+              error && 'border-destructive',
+              className,
+            )}
+            disabled={disabled}
+            {...rest}
+          >
+            <span>
+              {dateTime ? formatDateTimeString(dateTime) : placeholder}
+            </span>
+            {Icon &&
+              React.cloneElement(Icon as React.ReactElement, {
+                className: 'ml-2 h-4 w-4 ',
+              })}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <div className="flex flex-col">
+            {/* Shortcuts */}
+            {shortcutsItems.length > 0 && (
+              <div className="border-b p-2">
+                <div className="flex flex-wrap gap-1">
+                  {shortcutsItems.map((shortcut, index) => (
+                    <Button
+                      key={index}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        const newDate = shortcut.getValue();
+                        onChange?.(newDate);
+                        setDateTime(newDate);
+                        setOpen(false);
+                      }}
+                    >
+                      {shortcut.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Calendar */}
+            {viewConfig.showDate && (
+              <Calendar
+                mode="single"
+                selected={dateTime}
+                onSelect={handleDateSelect}
+                disabled={(date) => {
+                  const today = new Date();
+                  today.setHours(0, 0, 0, 0);
+                  const compareDate = new Date(date);
+                  compareDate.setHours(0, 0, 0, 0);
+
+                  if (minDate) {
+                    const min = new Date(minDate);
+                    min.setHours(0, 0, 0, 0);
+                    if (compareDate < min) return true;
+                  }
+                  if (maxDate) {
+                    const max = new Date(maxDate);
+                    max.setHours(0, 0, 0, 0);
+                    if (compareDate > max) return true;
+                  }
+
+                  if (disablePast && compareDate < today) return true;
+                  if (disableFuture && compareDate > today) return true;
+                  if (shouldDisableDate && shouldDisableDate(date)) return true;
+                  if (shouldDisableMonth && shouldDisableMonth(date))
+                    return true;
+                  if (shouldDisableYear && shouldDisableYear(date)) return true;
+
+                  return false;
+                }}
+                captionLayout={'dropdown'}
+                defaultMonth={dateTime}
+              />
+            )}
+
+            {/* Time Picker */}
+            {viewConfig.showTime && (
+              <div className={cn('p-3', viewConfig.showDate && 'border-t')}>
+                <Input
+                  type="time"
+                  step="1"
+                  value={timeValue}
+                  onChange={handleTimeChange}
+                  className="bg-input-background border-none text-muted-foreground appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+                />
+              </div>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      {/* Helper Text / Error */}
+      {(helperText || error) && (
+        <Typography
+          variant="small"
+          className={cn('ml-1 mt-1', error && 'text-destructive')}
+        >
+          {error || helperText}
+        </Typography>
+      )}
     </LabelWrapper>
   );
 };

package/src/components/Input/FileUpload/FileUpload.tsx

@@ -1,13 +1,9 @@
-import {
-  Box,
-  FormLabel,
-  Stack,
-  styled,
-  SxProps,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
-import { IconButtons, Icons, PreviewFiles, Typography } from '../../export';
+import { cn } from '@/lib/utils';
+import { Label } from '@/shadcn-components/Input/Label/Label';
+import { Upload, X } from 'lucide-react';
+import { Typography } from '../../DataDisplay/Typography/Typography';
+import { PreviewFiles } from '../../export';
+import { Button } from '../Button/Button';
 
 export type FileUploadProps = {
   label: string;
@@ -23,9 +19,10 @@ export type FileUploadProps = {
   hideDeleteButton?: boolean;
   hideInput?: boolean;
   errorText?: string;
-  sx?: SxProps;
+  className?: string;
+  containerClassName?: string;
   showImage?: boolean;
-  previewSx?: SxProps;
+  previewClassName?: string;
   required?: boolean;
 };
 
@@ -44,15 +41,17 @@ export const FileUpload = ({
   multiple = true,
   errorText,
   showImage,
-  previewSx,
-  sx,
+  previewClassName,
+  className,
+  containerClassName,
   required,
 }: FileUploadProps) => {
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down(768));
-
   if (!onChange) {
-    return <Typography>onChange Missing</Typography>;
+    return (
+      <Typography variant="muted" className="text-destructive">
+        onChange Missing
+      </Typography>
+    );
   }
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -87,20 +86,19 @@ export const FileUpload = ({
   };
 
   return (
-    <Stack sx={sx}>
-      <Typography variant="label1">
-        {label}{' '}
-        {required && (
-          <span style={{ color: `${theme.palette.tertiary.main}` }}>
-            {' *'}
-          </span>
-        )}
-      </Typography>
+    <div className={cn('flex flex-col gap-2', containerClassName)}>
+      {/* Label */}
+      <Label htmlFor={name} className="text-sm font-medium">
+        {label}
+        {required && <span className="text-destructive ml-1">*</span>}
+      </Label>
+
+      {/* File Input */}
       {!hideInput && (
-        <>
+        <div className="flex flex-col gap-2">
           <input
             accept={accept}
-            style={{ display: 'none' }}
+            className="hidden"
             id={name}
             name={name}
             type="file"
@@ -108,129 +106,83 @@ export const FileUpload = ({
             disabled={disabled}
             onChange={handleFileChange}
           />
-          <FormLabel htmlFor={name}>
-            <StyledFileSelectorContainer>
-              <Stack display={'flex'} alignItems={'center'}>
-                <Icons.ExportIcon size={20} />
-                <Typography
-                  color={theme.palette.text.tertiary}
-                  variant="label2"
-                >
-                  {inputText ?? 'Upload Files'}
-                </Typography>
-              </Stack>
-            </StyledFileSelectorContainer>
-            {errorText && (
-              <Typography
-                sx={{
-                  display: 'flex',
-                  alignItems: 'flex-end',
-                  justifyContent: 'flex-end',
-                  color: theme.palette.highlight.highlightRed,
-                }}
-                variant="caption"
-              >
-                {errorText}
+          <label htmlFor={name}>
+            <div
+              className={cn(
+                'border-2 border-dashed rounded-md h-[120px] flex flex-col items-center justify-center gap-2 cursor-pointer transition-all',
+                'hover:border-primary hover:bg-secondary/20',
+                'min-w-[200px] w-full p-2 text-center',
+                disabled && 'opacity-50 cursor-not-allowed',
+                errorText && 'border-destructive',
+                className,
+              )}
+            >
+              <Upload className="h-5 w-5 text-muted-foreground" />
+              <Typography variant="small" className="text-muted-foreground">
+                {inputText ?? 'Upload Files'}
               </Typography>
-            )}
-          </FormLabel>
-        </>
+            </div>
+          </label>
+
+          {/* Error Text */}
+          {errorText && (
+            <Typography variant="small" className="text-destructive text-right">
+              {errorText}
+            </Typography>
+          )}
+        </div>
       )}
-      <Box display="flex" gap="12px" flexWrap="wrap">
+
+      {/* File Preview */}
+      <div className="flex gap-3 flex-wrap">
         {showImage ? (
           files.map((file, index) => (
-            <StyledSelectedFileContainer
+            <div
               key={index}
-              isSmallScreen={isSmallScreen}
+              className={cn(
+                'relative rounded-lg overflow-hidden min-w-full md:min-w-[300px] max-w-full mt-1 ',
+                previewClassName,
+              )}
             >
-              <Box
-                sx={{
-                  height: '120px',
-                  display: 'flex',
-                  overflow: 'hidden',
-                  borderRadius: '8px',
-                }}
-              >
+              <div className="h-[120px] flex overflow-hidden rounded-lg">
                 <img
                   src={URL.createObjectURL(file)}
-                  style={{
-                    height: '100%',
-                    width: '100%',
-                    objectFit: 'cover',
-                  }}
+                  className="h-full w-full object-cover"
                   alt={`Preview ${index}`}
                 />
-              </Box>
+              </div>
 
               {!disabled && !hideDeleteButton && (
-                <IconButtons.DeleteButton
+                <Button
+                  variant="destructive"
+                  size="icon"
+                  className="absolute -right-2 -top-2 h-6 w-6 rounded-full"
                   onClick={() => {
                     const updatedFiles = [...files];
                     updatedFiles.splice(index, 1);
                     onChange(updatedFiles);
                   }}
-                  size="small"
-                />
+                >
+                  <X className="h-3 w-3" />
+                </Button>
               )}
-            </StyledSelectedFileContainer>
+            </div>
           ))
         ) : (
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              padding: '8px',
-              overflow: 'hidden',
-              backgroundColor: theme.palette.background.default,
-              borderRadius: '8px',
-            }}
+          <div
+            className={cn(
+              'flex justify-center items-center p-2 overflow-hidden bg-background rounded-lg w-full',
+              previewClassName,
+            )}
           >
             <PreviewFiles
-              sx={previewSx}
               files={files}
               onChange={(newFiles) => onChange?.(newFiles)}
               hideDelete={hideDeleteButton}
             />
-          </Box>
+          </div>
         )}
-      </Box>
-    </Stack>
+      </div>
+    </div>
   );
 };
-
-const StyledSelectedFileContainer = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'isSmallScreen',
-})<{ isSmallScreen: boolean }>(({ theme, isSmallScreen }) => ({
-  borderRadius: '10px',
-  position: 'relative',
-  textAlign: 'center',
-  marginTop: '5px',
-  minWidth: isSmallScreen ? '100%' : '300px', // Full width on small screens, 300px on larger
-  maxWidth: '100%',
-  '& > button': {
-    position: 'absolute',
-    right: '-4%',
-    top: '-10%',
-  },
-}));
-
-const StyledFileSelectorContainer = styled(Box)(({ theme }) => ({
-  border: '2.5px dashed',
-  height: '120px',
-  display: 'flex',
-  width: '100%',
-  minWidth: '200px',
-  borderRadius: '5px',
-  borderColor: theme.palette.border.primary,
-  justifyContent: 'center',
-  alignItems: 'center',
-  padding: '8px',
-  textAlign: 'center',
-  '&:hover': {
-    borderColor: theme.palette.primary.light,
-    backgroundColor: theme.palette.secondary.light,
-    transition:
-      'border-color 0.2s ease-in-out, background-color 0.2s ease-in-out',
-  },
-}));