@campxdev/react-blueprint 3.0.0-alpha.3 → 3.0.0-alpha.5

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

@@ -0,0 +1,297 @@
+import { cn } from '@/lib/utils';
+import { Calendar } from '@/shadcn-components/Input/Calendar/Calendar';
+import { Input } from '@/shadcn-components/Input/Input/Input';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/shadcn-components/Input/Popover/Popover';
+import { format as DateFnsFormat } from 'date-fns';
+import { CalendarDays } from 'lucide-react';
+import { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
+import { Typography } from '../../../DataDisplay/Typography/Typography';
+import { Button } from '../../Button/Button';
+import { LabelWrapper } from '../../LabelWrapper/LabelWrapper';
+import { DateTimePickerProps } from '../DateTimePicker';
+
+export const DateTimePickerInput = ({
+  label,
+  name,
+  value,
+  onChange,
+  required = false,
+  format = 'dd MMM yyyy hh:mm a',
+  views = ['year', 'month', 'day', 'hours', 'minutes', 'seconds'],
+  helperText,
+  placeholder = 'Pick a date and time',
+  shortcutsItems = [],
+  openPickerIcon: Icon = <CalendarDays />,
+  containerProps,
+  error,
+  disabled = false,
+  minDate,
+  maxDate,
+  disablePast = false,
+  disableFuture = false,
+  shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
+  className,
+  onOpen,
+  onClose,
+  fullWidth,
+  type,
+  ...rest
+}: DateTimePickerProps) => {
+  const [open, setOpen] = useState(false);
+  const [timeValue, setTimeValue] = useState<string>('');
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+
+  // Determine view configurations based on views prop
+  const viewConfig = 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 value changes
+  useEffect(() => {
+    if (value && viewConfig.showTime) {
+      const hours = value.getHours(),
+        minutes = value.getMinutes(),
+        seconds = value.getSeconds(),
+        timeStr = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(
+          2,
+          '0',
+        )}:${String(seconds).padStart(2, '0')}`;
+      setTimeValue(timeStr);
+    }
+  }, [value, 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 (value) {
+        newDateTime.setHours(
+          value.getHours(),
+          value.getMinutes(),
+          value.getSeconds(),
+        );
+      }
+      onChange?.(newDateTime);
+    } else {
+      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 = value ? new Date(value) : new Date();
+      newDateTime.setHours(hours || 0, minutes || 0, seconds || 0);
+      onChange?.(newDateTime);
+    }
+  };
+
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
+  // 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')}
+          >
+            {typeof error === 'string' ? error : error?.message || helperText}
+          </Typography>
+        )}
+      </LabelWrapper>
+    );
+  }
+
+  return (
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
+        ...containerProps,
+      }}
+    >
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <span
+            ref={wrapperRef}
+            style={{ display: fullWidth ? 'block' : 'inline-block' }}
+          >
+            <Button
+              variant="input"
+              className={cn(
+                'w-full justify-between text-left font-normal',
+                !value && 'text-muted-foreground',
+                error && 'border-destructive',
+                fullWidth ? 'w-full' : 'w-auto',
+                className,
+              )}
+              disabled={disabled}
+              {...rest}
+            >
+              <span>
+                {value ? formatDateTimeString(value) : placeholder}
+              </span>
+              {Icon &&
+                cloneElement(Icon as React.ReactElement, {
+                  className: 'ml-2 h-4 w-4 ',
+                })}
+            </Button>
+          </span>
+        </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);
+                        setOpen(false);
+                      }}
+                    >
+                      {shortcut.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Calendar */}
+            {viewConfig.showDate && (
+              <Calendar
+                mode="single"
+                selected={value}
+                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={value}
+              />
+            )}
+
+            {/* 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')}
+        >
+          {typeof error === 'string' ? error : error?.message || helperText}
+        </Typography>
+      )}
+    </LabelWrapper>
+  );
+};

package/src/components/Input/MultiSelect/MultiSelect.tsx

@@ -42,6 +42,8 @@ export type MultiSelectProps = {
   type?: 'input' | 'filter';
   disableClear?: boolean;
   fullWidth?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
 };
 
 export const MultiSelect = ({

package/src/components/Input/MultiSelect/components/MultiSelectFilter.tsx

@@ -46,6 +46,8 @@ export const MultiSelectFilter = ({
   handleClearAll,
   state,
   disableClear = false,
+  disabled = false,
+  loading = false,
 }: MultiSelectFilterProps) => {
   const {
     open,
@@ -101,8 +103,10 @@ export const MultiSelectFilter = ({
 
   return (
     <Popover
-      open={open}
+      open={open && !disabled}
       onOpenChange={(isOpen) => {
+        if (disabled) return;
+
         const syntheticEvent = {
           currentTarget: {},
           target: {},
@@ -115,7 +119,7 @@ export const MultiSelectFilter = ({
         }
       }}
     >
-      <PopoverTrigger asChild>
+      <PopoverTrigger asChild disabled={disabled}>
         <span
           ref={wrapperRef}
           style={{ display: 'inline-block', width: '100%' }}
@@ -125,7 +129,7 @@ export const MultiSelectFilter = ({
             role="combobox"
             aria-expanded={open}
             className="justify-between w-full"
-            disabled={loadingInitialInternalOptions}
+            disabled={disabled || loading || loadingInitialInternalOptions}
           >
             {displayText || label}
             <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />

package/src/components/Input/MultiSelect/components/MultiSelectInput.tsx

@@ -55,6 +55,8 @@ export const MultiSelectInput = ({
   state,
   disableClear = false,
   fullWidth,
+  disabled = false,
+  loading = false,
 }: MultiSelectInputProps) => {
   const {
     open,
@@ -88,7 +90,7 @@ export const MultiSelectInput = ({
     .map((val) => internalOptionsMap[val])
     .filter(Boolean);
 
-  if (loadingInitialInternalOptions) {
+  if (loadingInitialInternalOptions || loading) {
     return (
       <TextField
         label={label}
@@ -117,8 +119,10 @@ export const MultiSelectInput = ({
       }}
     >
       <Popover
-        open={open}
+        open={open && !disabled}
         onOpenChange={(isOpen) => {
+          if (disabled) return;
+
           const syntheticEvent = {
             currentTarget: {},
             target: {},
@@ -131,7 +135,7 @@ export const MultiSelectInput = ({
           }
         }}
       >
-        <PopoverTrigger asChild>
+        <PopoverTrigger asChild disabled={disabled}>
           <span
             ref={wrapperRef}
             style={{ display: fullWidth ? 'block' : 'inline-block' }}
@@ -141,6 +145,7 @@ export const MultiSelectInput = ({
               role="combobox"
               aria-expanded={open}
               aria-invalid={!!error}
+              disabled={disabled}
               className={cn(
                 'justify-between font-normal min-h-[40px] h-auto',
                 fullWidth ? 'w-full' : 'w-auto',

package/src/components/Input/Select/Select.tsx

@@ -6,6 +6,7 @@ import {
   SelectValue,
   Select as ShadcnSelect,
 } from '@/shadcn-components/Input/Select/Select';
+import { Loader2 } from 'lucide-react';
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 
@@ -29,6 +30,7 @@ export type SelectProps = {
   className?: string;
   disabled?: boolean;
   fullWidth?: boolean;
+  loading?: boolean;
 };
 
 const getColorClasses = (
@@ -63,6 +65,7 @@ export const Select = ({
   defaultValue,
   disabled = false,
   fullWidth = false,
+  loading = false,
 }: SelectProps) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
 
@@ -111,18 +114,25 @@ export const Select = ({
         </SelectTrigger>
       </div>
       <SelectContent>
-        {options?.map((item, index) => {
-          const itemColorClasses = getColorClasses(item.color);
-          return (
-            <SelectItem
-              key={index}
-              value={item.value.toString()}
-              className={cn(itemColorClasses)}
-            >
-              {item.label}
-            </SelectItem>
-          );
-        })}
+        {loading ? (
+          <div className="flex flex-col items-center justify-center py-8 px-4">
+            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground mb-2" />
+            <p className="text-sm text-muted-foreground">Loading...</p>
+          </div>
+        ) : (
+          options?.map((item, index) => {
+            const itemColorClasses = getColorClasses(item.color);
+            return (
+              <SelectItem
+                key={index}
+                value={item.value.toString()}
+                className={cn(itemColorClasses)}
+              >
+                {item.label}
+              </SelectItem>
+            );
+          })
+        )}
       </SelectContent>
     </ShadcnSelect>
   );

package/src/components/Input/SingleSelect/SingleSelect.tsx

@@ -50,6 +50,8 @@ export type SingleSelectProps = {
   type?: 'input' | 'filter';
   disableClear?: boolean;
   fullWidth?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
 };
 
 export const SingleSelect = ({

package/src/components/Input/SingleSelect/components/SingleFilter.tsx

@@ -43,6 +43,8 @@ export const SingleFilter = ({
   state,
   disableClear = false,
   fullWidth,
+  disabled = false,
+  loading = false,
 }: SingleFilterProps) => {
   const {
     open,
@@ -82,8 +84,10 @@ export const SingleFilter = ({
 
   return (
     <Popover
-      open={open}
+      open={open && !disabled}
       onOpenChange={(isOpen) => {
+        if (disabled) return;
+
         const syntheticEvent = {
           currentTarget: {},
           target: {},
@@ -96,7 +100,7 @@ export const SingleFilter = ({
         }
       }}
     >
-      <PopoverTrigger asChild>
+      <PopoverTrigger asChild disabled={disabled}>
         <span
           ref={wrapperRef}
           style={{ display: fullWidth ? 'block' : 'inline-block' }}
@@ -106,7 +110,7 @@ export const SingleFilter = ({
             role="combobox"
             aria-expanded={open}
             className={cn('justify-between', fullWidth ? 'w-full' : '')}
-            disabled={loadingInitialInternalOptions}
+            disabled={disabled || loading || loadingInitialInternalOptions}
           >
             {selectedOption ? `${label} = ${selectedOption.label}` : label}
             <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />

package/src/components/Input/SingleSelect/components/SingleInput.tsx

@@ -48,6 +48,8 @@ export const SingleInput = ({
   handleScroll,
   state,
   fullWidth,
+  disabled = false,
+  loading = false,
 }: SingleInputProps) => {
   const {
     open,
@@ -77,7 +79,7 @@ export const SingleInput = ({
 
   const selectedOption = internalOptionsMap[value];
 
-  if (loadingInitialInternalOptions) {
+  if (loadingInitialInternalOptions || loading) {
     return (
       <TextField
         label={label}
@@ -103,8 +105,10 @@ export const SingleInput = ({
       }}
     >
       <Popover
-        open={open}
+        open={open && !disabled}
         onOpenChange={(isOpen) => {
+          if (disabled) return;
+
           const syntheticEvent = {
             currentTarget: {},
             target: {},
@@ -117,7 +121,7 @@ export const SingleInput = ({
           }
         }}
       >
-        <PopoverTrigger asChild>
+        <PopoverTrigger asChild disabled={disabled}>
           <span
             ref={wrapperRef}
             style={{ display: fullWidth ? 'block' : 'inline-block' }}
@@ -127,6 +131,7 @@ export const SingleInput = ({
               role="combobox"
               aria-expanded={open}
               aria-invalid={!!error}
+              disabled={disabled}
               className={cn(
                 'justify-between font-normal',
                 fullWidth ? 'w-full' : 'w-auto',

package/src/components/Layout/AppLayout/components/Sidebar/MenuItem.tsx

@@ -113,7 +113,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   if (subMenu && subMenu.length > 0) {
     const content = (
       <>
-        <MenuItemContainer>
+        <MenuItemContainer style={{ marginBottom: 1 }}>
           <SubMenuContainer
             match={!!match}
             onClick={handleSubMenuToggle}
@@ -135,7 +135,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
                     <Typography variant={'small'}>{name}</Typography>
                   </div>
                   <div className="flex flex-col">
-                    {expanded ? <ChevronDown /> : <ChevronUp />}
+                    {expanded ? <ChevronUp /> : <ChevronDown />}
                   </div>
                 </div>
               )}

package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -121,7 +121,7 @@ export const Breadcrumbs = ({
     >
       <div
         className={cn(
-          'flex w-full flex-row items-center gap-1 md:px-3',
+          'flex w-full flex-row items-center gap-1',
           containerClassName,
         )}
       >

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

@@ -1,4 +1,9 @@
-import { DialogHeader, Dialog as ShadcnDialog, DialogContent as ShadcnDialogContent, DialogTitle as ShadcnDialogTitle } from '@/shadcn-components/DataDisplay/Dialog/Dialog';
+import {
+  DialogHeader,
+  Dialog as ShadcnDialog,
+  DialogContent as ShadcnDialogContent,
+  DialogTitle as ShadcnDialogTitle,
+} from '@/shadcn-components/DataDisplay/Dialog/Dialog';
 import { ReactNode, useState } from 'react';
 
 type MaxWidthSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

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

@@ -66,7 +66,7 @@ export const DropdownMenu = ({
       <DropdownMenuContent
         align={align}
         side={side}
-        className={cn('min-w-[200px] z-[2000]', menuContentClassName)}
+        className={cn('min-w-[200px] ', menuContentClassName)}
         sideOffset={5}
         collisionPadding={8}
         // Force Radix to recalculate position

package/src/components/Navigation/TabsContainer/TabsContainer.tsx

@@ -86,7 +86,7 @@ export const TabsContainer = ({
               variant === 'fixed'
                 ? isSmallScreen
                   ? `calc(100vh - 98px)`
-                  : `calc(100vh - 90px)`
+                  : `calc(100vh - 80px)`
                 : 'max-content',
           }}
         >

package/src/shadcn-components/DataDisplay/Dialog/Dialog.tsx

@@ -36,7 +36,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        'fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-[fadeIn_100ms_ease-out] data-[state=closed]:animate-[fadeOut_100ms_ease-in]',
+        'fixed inset-0  bg-black/50 data-[state=open]:animate-[fadeIn_100ms_ease-out] data-[state=closed]:animate-[fadeOut_100ms_ease-in]',
         className,
       )}
       {...props}
@@ -58,7 +58,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg data-[state=open]:animate-[zoomIn_200ms_ease-out] data-[state=closed]:animate-[zoomOut_200ms_ease-in]',
+          'bg-background fixed top-[50%] left-[50%]  grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg data-[state=open]:animate-[zoomIn_200ms_ease-out] data-[state=closed]:animate-[zoomOut_200ms_ease-in]',
           className,
         )}
         {...props}

package/src/shadcn-components/Input/Popover/Popover.tsx

@@ -28,7 +28,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[2000] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2  w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
           className,
         )}
         {...props}

package/src/shadcn-components/Input/Select/Select.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -73,7 +73,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,
@@ -145,13 +145,13 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
   SelectContent,
-  SelectLabel,
+  SelectGroup,
   SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
+  SelectLabel,
   SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 };