pixelize-design-library 2.1.20 → 2.1.22

package/src/Components/DatePicker/DatePicker.tsx

@@ -1,378 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,112 +0,0 @@
-
-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

@@ -1,17 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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;
-};