mautourco-components 0.2.19 → 0.2.21

package/src/components/organisms/DateTimePicker/DateTimePicker.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from "react";
-import CalendarInput from "../../molecules/Calendar/CalendarInput";
-import DateTime, { DateTimeProps } from "../../molecules/Calendar/DateTime";
-import { Popover, PopoverTrigger, PopoverContent } from "../../ui/popover";
+import React, { useState } from 'react';
+import CalendarInput from '../../molecules/Calendar/CalendarInput';
+import DateTime, { DateTimeProps } from '../../molecules/Calendar/DateTime';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
 
-import { format } from "date-fns";
+import { format } from 'date-fns';
+import { IconName } from '../../atoms/Icon/Icon';
 
 export interface DateTimePickerProps extends Partial<DateTimeProps> {
   placeholder?: string;
@@ -14,40 +15,43 @@ export interface DateTimePickerProps extends Partial<DateTimeProps> {
   /** Whether the calendar icon has full bg*/
   iconBGFull?: boolean;
   /** Position of the calendar icon: left or right */
-  iconPosition?: "left" | "right";
+  iconPosition?: 'left' | 'right';
   /** Show chevron on the right when icon is on the left */
   showChevron?: boolean;
+  /** Icon to display on the left of the input */
+  icon?: IconName;
 }
 
 const formatDateRange = (dateRange: any) => {
-  if (!dateRange || !dateRange.from) return "";
+  if (!dateRange || !dateRange.from) return '';
   const from = dateRange.from;
   const to = dateRange.to ?? dateRange.from;
-  
-  if (+from === +to) return format(from, "dd/MM/yyyy");
-  return `${format(from, "dd/MM/yyyy")} - ${format(to, "dd/MM/yyyy")}`;
+
+  if (+from === +to) return format(from, 'dd/MM/yyyy');
+  return `${format(from, 'dd/MM/yyyy')} - ${format(to, 'dd/MM/yyyy')}`;
 };
 
 const DateTimePicker: React.FC<DateTimePickerProps> = ({
-  placeholder = "Select date",
+  placeholder = 'Select date',
   disabled = false,
-  mode = "both",
-  selectionMode = "range",
+  mode = 'both',
+  selectionMode = 'range',
   numberOfMonths = 2,
   disableBeforeToday = true,
   disableToday = false,
   onValueChange,
   defaultValue,
   iconBGFull = true,
-  iconPosition = "right",
+  iconPosition = 'right',
   showChevron = false,
+  icon,
 }) => {
   // Parse default value and set initial state
   const parseDefaultValue = () => {
-    if (!defaultValue) return { value: "", dateRange: undefined };
+    if (!defaultValue) return { value: '', dateRange: undefined };
 
     try {
-      if (selectionMode === "range" && Array.isArray(defaultValue)) {
+      if (selectionMode === 'range' && Array.isArray(defaultValue)) {
         // Handle range: ["yyyy-MM-dd", "yyyy-MM-dd"]
         const [fromStr, toStr] = defaultValue;
         const from = new Date(fromStr);
@@ -55,56 +59,71 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
         const dateRange = { from, to };
         const displayValue = formatDateRange(dateRange);
         return { value: displayValue, dateRange };
-      } else if (selectionMode === "single" && typeof defaultValue === "string") {
+      } else if (selectionMode === 'single' && typeof defaultValue === 'string') {
         // Handle single: "yyyy-MM-dd"
         const date = new Date(defaultValue);
         const dateRange = { from: date, to: date };
-        const displayValue = format(date, "dd/MM/yyyy");
+        const displayValue = format(date, 'dd/MM/yyyy');
         return { value: displayValue, dateRange };
       }
     } catch (error) {
-      console.error("Error parsing default date value:", error);
+      console.error('Error parsing default date value:', error);
     }
 
-    return { value: "", dateRange: undefined };
+    return { value: '', dateRange: undefined };
   };
 
   const initialState = parseDefaultValue();
   const [value, setValue] = useState<string>(initialState.value);
   const [selectedDateRange, setSelectedDateRange] = useState<any>(initialState.dateRange);
-  const [selectedTime, setSelectedTime] = useState<{ hour: string; minute: string; meridiem: "AM" | "PM" } | undefined>(undefined);
+  const [selectedTime, setSelectedTime] = useState<
+    { hour: string; minute: string; meridiem: 'AM' | 'PM' } | undefined
+  >(undefined);
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleDtChange = React.useCallback((payload: { dateRange?: any; time?: { hour: string; minute: string; meridiem: "AM" | "PM" } }) => {
-    const datePart = formatDateRange(payload.dateRange);
-    const time = payload.time ? `${payload.time.hour}:${payload.time.minute} ${payload.time.meridiem}` : "";
-    const combined = [datePart, time].filter(Boolean).join(" ");
-    setValue(combined);
-    setSelectedDateRange(payload.dateRange);
-    setSelectedTime(payload.time);
-    
-    // Return date strings in yyyy-MM-dd format for both modes
-    if (payload.dateRange) {
-      if (selectionMode === "range") {
-        // Return array of date strings for range mode
-        const from = payload.dateRange.from;
-        const to = payload.dateRange.to ?? payload.dateRange.from;
-        
-        if (from && to) {
-          const fromStr = format(from, "yyyy-MM-dd");
-          const toStr = format(to, "yyyy-MM-dd");
-          onValueChange?.([fromStr, toStr]);
-        }
-      } else {
-        // Return single date string in yyyy-MM-dd format for single mode
-        const date = payload.dateRange.from;
-        if (date) {
-          const dateStr = format(date, "yyyy-MM-dd");
-          onValueChange?.(dateStr);
+  const handleDtChange = React.useCallback(
+    (payload: {
+      dateRange?: any;
+      time?: { hour: string; minute: string; meridiem: 'AM' | 'PM' };
+    }) => {
+      const datePart = formatDateRange(payload.dateRange);
+      const time = payload.time
+        ? `${payload.time.hour}:${payload.time.minute} ${payload.time.meridiem}`
+        : '';
+      const combined = [datePart, time].filter(Boolean).join(' ');
+      setValue(combined);
+      setSelectedDateRange(payload.dateRange);
+      setSelectedTime(payload.time);
+
+      // Return date strings in yyyy-MM-dd format for both modes
+      if (payload.dateRange) {
+        if (selectionMode === 'range') {
+          // Return array of date strings for range mode
+          const from = payload.dateRange.from;
+          const to = payload.dateRange.to ?? payload.dateRange.from;
+
+          if (from && to) {
+            const fromStr = format(from, 'yyyy-MM-dd');
+            const toStr = format(to, 'yyyy-MM-dd');
+            onValueChange?.([fromStr, toStr]);
+          }
+        } else {
+          // Return single date string in yyyy-MM-dd format for single mode
+          const date = payload.dateRange.from;
+          if (date) {
+            const dateStr = format(date, 'yyyy-MM-dd');
+            onValueChange?.(dateStr);
+          }
         }
       }
-    }
-  }, [onValueChange, selectionMode]);
+
+      if (!payload.dateRange && payload.time) {
+        const timeStr = `${payload.time.hour}:${payload.time.minute} ${payload.time.meridiem}`;
+        onValueChange?.(timeStr);
+      }
+    },
+    [onValueChange, selectionMode]
+  );
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
@@ -118,6 +137,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
             iconPosition={iconPosition}
             showChevron={showChevron}
             isOpen={isOpen}
+            icon={icon}
           />
         </div>
       </PopoverTrigger>

package/src/components/organisms/DialogBookingConfirm/DialogBookingConfirm.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Dialog from '../Dialog/Dialog';
+
+interface DialogBookingConfirmProps {
+  open: boolean;
+  title: string;
+  children: React.ReactNode;
+  setOpen: (open: boolean) => void;
+  className?: string;
+}
+
+export const DialogBookingConfirm = (props: DialogBookingConfirmProps) => {
+  const { open, title, children, setOpen, className } = props;
+
+  return (
+    <Dialog
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      title={title}
+      className={className}
+      showFooter={false}>
+      {children}
+    </Dialog>
+  );
+};

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as React from 'react';
+
+import { cn } from '@/src/lib/utils';
+import Icon from '../atoms/Icon/Icon';
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'w-5 h-5 border border-[var(--checkbox-color-checkbox-border-default-default)] data-[state=checked]:border-[var(--checkbox-color-checkbox-border-selected-default)] rounded-[var(--border-radius-rounded-sm)] data-[error=true]:border-[var(--checkbox-color-checkbox-border-default-error)] data-[error=true]:bg-[var(--checkbox-color-checkbox-background-error)] disabled:opacity-50 disabled:cursor-not-allowed',
+        className
+      )}
+      {...props}>
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none">
+        <Icon
+          name="check"
+          size="sm"
+          className="text-[var(--checkbox-color-checkbox-checked-default)]"
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };