pixelize-design-library 2.1.19 → 2.1.20

package/src/Components/DatePicker/DatePicker.tsx

@@ -0,0 +1,378 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+  Box,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  Grid,
+  useDisclosure,
+} from "@chakra-ui/react";
+import {
+  format,
+  isSameDay,
+  isBefore,
+  isAfter,
+  startOfMonth,
+  endOfMonth,
+  startOfWeek,
+  endOfWeek,
+  addDays,
+  addMonths,
+  subMonths,
+} from "date-fns";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import Button from "../Button/Button";
+import TextInput from "../Input/TextInput";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { DatePickerProps, PickerType } from "./DatePickerProps";
+import { TextLabel } from "../Common/FormLabel";
+import TimePicker from "./TimePicker";
+
+const inferPickerTypeFromFormat = (formatStr: string): PickerType => {
+  const lower = formatStr.toLowerCase();
+  const hasTime = lower.includes("hh") || lower.includes("mm") || lower.includes("ss");
+  const hasDate = lower.includes("d") && lower.includes("m") && lower.includes("y");
+
+  if (hasTime && hasDate) return "datetime";
+  if (hasTime) return "time";
+  return "date";
+};
+
+export default function CustomDatePicker(props: DatePickerProps) {
+  const {
+    id,
+    name,
+    label,
+    isRequired,
+    isInformation,
+    informationMessage,
+    error,
+    errorMessage,
+    helperText,
+    placeholderText = "Select a date",
+    dateFormat = "dd/MM/yyyy",
+    pickerType,
+    minDate,
+    maxDate,
+    disableFutureDates,
+    disablePastDates,
+    isRange,
+    autoComplete = "off",
+    disabled,
+    width = "100%",
+  } = props;
+
+  const theme = useCustomTheme();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const resolvedPickerType = pickerType ?? inferPickerTypeFromFormat(dateFormat);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const today = new Date();
+  const showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
+  const showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
+
+  const selectedDate = !isRange ? (props as any).selectedDate as Date | null : null;
+  const [currentMonth, setCurrentMonth] = useState<Date>(
+    isRange ? new Date() : selectedDate ?? new Date()
+  );
+  const [rangeStart, setRangeStart] = useState<Date | null>(null);
+  const [rangeEnd, setRangeEnd] = useState<Date | null>(null);
+  const [selectingStart, setSelectingStart] = useState(true);
+  const [tempDate, setTempDate] = useState<Date | null>(selectedDate ?? null);
+  const [tempRangeStart, setTempRangeStart] = useState<Date | null>(rangeStart);
+  const [tempRangeEnd, setTempRangeEnd] = useState<Date | null>(rangeEnd);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const handleOpen = () => {
+    if (!isRange && !selectedDate) {
+      setTempDate(new Date());
+    }
+    onOpen();
+  };
+
+  useEffect(() => {
+    if (!isRange) {
+      if (selectedDate instanceof Date) {
+        setTempDate(new Date(selectedDate));
+      } else {
+        setTempDate(null);
+      }
+    }
+  }, [selectedDate, isRange]);
+
+  const handleDaySelect = (day: Date) => {
+    const updated = new Date(day);
+    if (isRange) {
+      if (selectingStart) {
+        setTempRangeStart(updated);
+        setTempRangeEnd(null);
+        setSelectingStart(false);
+      } else {
+        const finalStart = tempRangeStart && updated < tempRangeStart ? updated : tempRangeStart;
+        const finalEnd = tempRangeStart && updated < tempRangeStart ? tempRangeStart : updated;
+        const safeStart = finalStart ?? updated;
+        setTempRangeStart(safeStart);
+        setTempRangeEnd(finalEnd);
+        setSelectingStart(true);
+        if (safeStart && finalEnd) {
+          (props as any).onChange({ from: safeStart, to: finalEnd });
+        }
+      }
+    } else {
+      const updatedDate = tempDate
+        ? new Date(
+          updated.getFullYear(),
+          updated.getMonth(),
+          updated.getDate(),
+          tempDate.getHours(),
+          tempDate.getMinutes(),
+          tempDate.getSeconds()
+        )
+        : updated;
+
+      setTempDate(updatedDate);
+      (props as any).onChange(updatedDate);
+    }
+  };
+
+  const renderDays = () => {
+    const monthStart = startOfMonth(currentMonth);
+    const monthEnd = endOfMonth(currentMonth);
+    const startDate = startOfWeek(monthStart);
+    const endDate = endOfWeek(monthEnd);
+    const rows = [];
+    let day = startDate;
+
+    while (day <= endDate) {
+      const days = [];
+      for (let i = 0; i < 7; i++) {
+        const thisDay = day;
+        const isInCurrentMonth = thisDay.getMonth() === currentMonth.getMonth();
+        const isToday = isSameDay(thisDay, today);
+        const isStart = isRange && tempRangeStart && isSameDay(thisDay, tempRangeStart);
+        const isEnd = isRange && tempRangeEnd && isSameDay(thisDay, tempRangeEnd);
+        const isInRange =
+          isRange &&
+          tempRangeStart &&
+          tempRangeEnd &&
+          isAfter(thisDay, tempRangeStart) &&
+          isBefore(thisDay, tempRangeEnd);
+        const isSelected = !isRange && tempDate && isSameDay(thisDay, tempDate);
+        const disabled =
+          !isInCurrentMonth ||
+          (minDate && isBefore(thisDay, minDate)) ||
+          (maxDate && isAfter(thisDay, maxDate)) ||
+          (disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
+          (disableFutureDates && isAfter(thisDay, today) && !isSameDay(thisDay, today));
+
+        days.push(
+          <Button
+            key={thisDay.toString()}
+            size="sm"
+            variant={
+              isStart || isEnd
+                ? "solid"
+                : isInRange
+                  ? "outline"
+                  : isSelected
+                    ? "solid"
+                    : "ghost"
+            }
+            colorScheme={
+              isStart || isEnd || isInRange || isSelected ? "primary" : "gray"
+            }
+            opacity={isInCurrentMonth ? 1 : 0.4}
+            onClick={() => !disabled && handleDaySelect(new Date(thisDay))}
+            isDisabled={disabled}
+            border={isToday ? `0.125rem solid ${theme.colors.primary[500]}` : undefined}
+            borderRadius="md"
+          >
+            {format(thisDay, "d")}
+          </Button>
+        );
+        day = addDays(day, 1);
+      }
+
+      rows.push(
+        <Grid key={day.toString()} templateColumns="repeat(7, 1fr)" gap={1}>
+          {days}
+        </Grid>
+      );
+    }
+    return rows;
+  };
+
+  const displayValue = isRange
+    ? tempRangeStart && tempRangeEnd
+      ? `${format(tempRangeStart, dateFormat)} - ${format(tempRangeEnd, dateFormat)}`
+      : tempRangeStart
+        ? `${format(tempRangeStart, dateFormat)} -`
+        : ""
+    : tempDate
+      ? format(tempDate, dateFormat)
+      : "";
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as Node) &&
+        !inputRef.current?.contains(event.target as Node)
+      ) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  return (
+    <Box width={width} position="relative">
+      {label && (
+        <TextLabel
+          label={label}
+          isRequired={isRequired}
+          isInformation={isInformation}
+          informationMessage={informationMessage}
+        />
+      )}
+      <Popover
+        isLazy
+        isOpen={isOpen}
+        onClose={onClose}
+        placement="bottom-start"
+        initialFocusRef={inputRef}
+        closeOnBlur
+      >
+        <PopoverTrigger>
+          <Box onClick={handleOpen}>
+            <TextInput
+              id={id}
+              name={name}
+              ref={inputRef}
+              placeholder={placeholderText}
+              value={displayValue}
+              isReadOnly
+              error={error}
+              errorMessage={errorMessage}
+              helperText={helperText}
+              autoComplete={autoComplete}
+              isDisabled={disabled}
+              width={width}
+            />
+          </Box>
+        </PopoverTrigger>
+        <PopoverContent width="auto" p={2} ref={popoverRef}>
+          <PopoverBody>
+            {showDate && (
+              <>
+                <Box display="flex" alignItems="center" justifyContent="space-between" mb={2}>
+                  <Button variant="ghost" size="sm" onClick={() => setCurrentMonth((prev) => subMonths(prev, 1))}>
+                    <ChevronLeftIcon />
+                  </Button>
+
+                  <Box display="flex" alignItems="center" gap={2}>
+                    <select
+                      value={currentMonth.getMonth()}
+                      onChange={(e) => {
+                        const newMonth = parseInt(e.target.value, 10);
+                        setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
+                      }}
+                    >
+                      {Array.from({ length: 12 }).map((_, i) => (
+                        <option key={i} value={i}>
+                          {format(new Date(2000, i, 1), "MMMM")}
+                        </option>
+                      ))}
+                    </select>
+
+                    <select
+                      value={currentMonth.getFullYear()}
+                      onChange={(e) => {
+                        const newYear = parseInt(e.target.value, 10);
+                        setCurrentMonth((prev) => new Date(newYear, prev.getMonth(), 1));
+                      }}
+                    >
+                      {Array.from({ length: 100 }).map((_, i) => {
+                        const year = new Date().getFullYear() - 50 + i;
+                        return (
+                          <option key={year} value={year}>
+                            {year}
+                          </option>
+                        );
+                      })}
+                    </select>
+                  </Box>
+
+                  <Button variant="ghost" size="sm" onClick={() => setCurrentMonth((prev) => addMonths(prev, 1))}>
+                    <ChevronRightIcon />
+                  </Button>
+                </Box>
+
+                <Grid templateColumns="repeat(7, 1fr)" gap={1} fontWeight="bold" mb={1}>
+                  {["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (
+                    <Box textAlign="center" key={day}>{day}</Box>
+                  ))}
+                </Grid>
+
+                {renderDays()}
+              </>
+            )}
+
+            {!isRange && showTime && (
+              <TimePicker
+                date={tempDate ?? new Date()}
+                dateFormat={dateFormat}
+                onChange={(updatedDate) => {
+                  setTempDate(updatedDate);
+                  (props as any).onChange(updatedDate);
+                }}
+              />
+            )}
+
+            <Box display="flex" justifyContent="space-between" mt={3}>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => {
+                  setTempDate(null);
+                  setTempRangeStart(null);
+                  setTempRangeEnd(null);
+                  setRangeStart(null);
+                  setRangeEnd(null);
+                  setSelectingStart(true);
+                  (props as any).onChange(null);
+                  onClose();
+                }}
+              >
+                Clear
+              </Button>
+              <Button
+                size="sm"
+                colorScheme="primary"
+                onClick={() => {
+                  if (isRange && tempRangeStart && tempRangeEnd) {
+                    setRangeStart(tempRangeStart);
+                    setRangeEnd(tempRangeEnd);
+                    (props as any).onChange({ from: tempRangeStart, to: tempRangeEnd });
+                  } else if (!isRange && tempDate) {
+                    (props as any).onChange(tempDate);
+                  }
+                  onClose();
+                }}
+              >
+                OK
+              </Button>
+            </Box>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </Box>
+  );
+}

package/src/Components/DatePicker/DatePickerProps.tsx

@@ -0,0 +1,48 @@
+export type PickerType = "date" | "time" | "datetime";
+
+export type BaseDatePickerProps = {
+  id?: string;
+  name?: string;
+  label?: string;
+  isRequired?: boolean;
+  isInformation?: boolean;
+  informationMessage?: string;
+  error?: boolean;
+  errorMessage?: string;
+  helperText?: string;
+  placeholderText?: string;
+  dateFormat?: string;
+  pickerType?: PickerType;
+  minDate?: Date;
+  maxDate?: Date;
+  disableFutureDates?: boolean;
+  disablePastDates?: boolean;
+  autoComplete?: string;
+  disabled?: boolean;
+  width?: string | number;
+}
+
+export type SingleDatePickerProps = BaseDatePickerProps & {
+  isRange?: false;
+  selectedDate?: Date | null;
+  onChange: (date: Date | null) => void;
+}
+
+export type RangeDate = {
+  from: Date | null;
+  to: Date | null;
+}
+
+export type RangeDatePickerProps = BaseDatePickerProps & {
+  isRange: true;
+  selectedDate?: RangeDate | null;
+  onChange: (range: RangeDate | null) => void;
+}
+
+export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
+
+export type TimePickerProps = {
+  date: Date;
+  onChange: (date: Date) => void;
+  dateFormat: string;
+}

package/src/Components/DatePicker/TimePicker.tsx

@@ -0,0 +1,112 @@
+
+import React, { useState, useEffect } from "react";
+import { TimePickerProps } from "./DatePickerProps";
+
+const TimePicker: React.FC<TimePickerProps> = ({ date, onChange, dateFormat }) => {
+    const is12HourFormat = /(hh|h).*a/i.test(dateFormat);
+    const [hour, setHour] = useState(date.getHours());
+    const [minute, setMinute] = useState(date.getMinutes());
+    const [ampm, setAmpm] = useState(is12HourFormat ? (date.getHours() >= 12 ? "PM" : "AM") : "");
+
+    useEffect(() => {
+        const newHour = date.getHours();
+        setHour(newHour);
+        setMinute(date.getMinutes());
+        if (is12HourFormat) {
+            setAmpm(newHour >= 12 ? "PM" : "AM");
+        }
+    }, [date, is12HourFormat]);
+
+    const convertTo24Hour = (hr: number, meridiem: string) => {
+        if (meridiem === "AM") return hr === 12 ? 0 : hr;
+        return hr === 12 ? 12 : hr + 12;
+    };
+
+    const updateTime = (hrInput: number, min: number, meridiem?: string) => {
+        const newHour = is12HourFormat ? convertTo24Hour(hrInput, meridiem || ampm) : hrInput;
+        const newDate = new Date(date);
+        newDate.setHours(newHour);
+        newDate.setMinutes(min);
+        newDate.setSeconds(0);
+        newDate.setMilliseconds(0);
+        onChange(newDate);
+    };
+
+    const handleHourChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        let hr = parseInt(e.target.value || "1", 10);
+        if (is12HourFormat) {
+            hr = Math.max(1, Math.min(12, hr));
+            setHour(hr);
+            updateTime(hr, minute, ampm);
+        } else {
+            hr = Math.max(0, Math.min(23, hr));
+            setHour(hr);
+            updateTime(hr, minute);
+        }
+    };
+
+    const handleMinuteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        let min = parseInt(e.target.value || "0", 10);
+        min = Math.max(0, Math.min(59, min));
+        setMinute(min);
+        updateTime(hour, min, ampm);
+    };
+
+    const handleAmpmToggle = () => {
+        const newMeridiem = ampm === "AM" ? "PM" : "AM";
+        const displayHr = hour % 12 === 0 ? 12 : hour % 12;
+        const newHr = convertTo24Hour(displayHr, newMeridiem);
+        setAmpm(newMeridiem);
+        setHour(displayHr);
+        updateTime(displayHr, minute, newMeridiem);
+    };
+
+    const displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
+
+    return (
+        <div
+            style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                fontSize: "1.25rem",
+                marginTop: "1rem",
+            }}
+        >
+            <input
+                type="number"
+                value={displayHour}
+                onChange={handleHourChange}
+                min={is12HourFormat ? 1 : 0}
+                max={is12HourFormat ? 12 : 23}
+                style={{ width: "3rem", textAlign: "center" }}
+            />
+            :
+            <input
+                type="number"
+                value={minute.toString().padStart(2, "0")}
+                onChange={handleMinuteChange}
+                min={0}
+                max={59}
+                style={{ width: "3rem", textAlign: "center" }}
+            />
+            {is12HourFormat && (
+                <button
+                    type="button"
+                    onClick={handleAmpmToggle}
+                    style={{
+                        fontWeight: "bold",
+                        padding: "0.25rem 0.5rem",
+                        border: "none",
+                        background: "transparent",
+                        cursor: "pointer",
+                    }}
+                >
+                    {ampm}
+                </button>
+            )}
+        </div>
+    );
+};
+
+export default TimePicker;

package/src/Components/Divider/Divider.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Divider as ChakraDivider } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+
+const VeritcalDivider = () => {
+  const { colors }: any = useCustomTheme();
+  return (
+    <ChakraDivider
+      orientation="vertical"
+      height={5}
+      borderWidth={1.2}
+      borderColor={colors?.boxborder?.[500]}
+    />
+  );
+};
+
+export default VeritcalDivider;

package/src/Components/Drawer/Drawer.tsx

@@ -0,0 +1,66 @@
+import React, { ReactElement } from "react";
+import { DrawerProps } from "./DrawerProps";
+import {
+  Drawer as ChakraDrawer,
+  DrawerBody as ChakraDrawerBody,
+  DrawerFooter as ChakraDrawerFooter,
+  DrawerHeader as ChakraDrawerHeader,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+} from "@chakra-ui/react";
+
+export const DrawerHeader: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <>{children}</>
+}
+export const DrawerBody: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <>{children}</>
+}
+export const DrawerFooter: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <>{children}</>
+}
+
+export default function Drawer({
+  isOpen,
+  onClose,
+  placement = "right",
+  size = "xl",
+  id,
+  variant = "solid",
+  children,
+}: DrawerProps) {
+
+  const isReactElement = (child: React.ReactNode): child is ReactElement => {
+    return child !== null && typeof child === "object" && "type" in child;
+  };
+  const header = React.Children.toArray(children).find(
+    (child) => isReactElement(child) && child.type === DrawerHeader,
+  );
+  const body = React.Children.toArray(children).find(
+    (child) => isReactElement(child) && child.type === DrawerBody,
+  );
+  const footer = React.Children.toArray(children).find(
+    (child) => isReactElement(child) && child.type === DrawerFooter,
+  );
+
+  return (
+    <ChakraDrawer
+      isOpen={isOpen}
+      placement={placement}
+      onClose={onClose}
+      size={size}
+      variant={variant}
+      id={id}
+    >
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerCloseButton />
+        {header && (
+          <ChakraDrawerHeader borderBottomWidth="1px">{header}</ChakraDrawerHeader>
+        )}
+        <ChakraDrawerBody>{body && body}</ChakraDrawerBody>
+        {footer && <ChakraDrawerFooter borderTopWidth="1px">{footer}</ChakraDrawerFooter>}
+      </DrawerContent>
+    </ChakraDrawer>
+  );
+}

package/src/Components/Drawer/DrawerProps.tsx

@@ -0,0 +1,11 @@
+import { DrawerProps as ChakraDrawerProps } from "@chakra-ui/react";
+
+export type DrawerProps = Pick<
+  ChakraDrawerProps,
+  "isOpen" | "onClose" | "placement" | "size" | "id" | "variant"
+> & {
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  placement?: "top" | "right" | "bottom" | "left";
+  vaiant?: "solid" | "outline" | "ghost" | "link";
+  children?: React.ReactNode;
+};