torch-glare 2.4.0 → 2.4.2

package/apps/lib/components/DatePicker.tsx

@@ -1,13 +1,12 @@
 import React, {
-    useState,
-    forwardRef,
-    ForwardedRef,
-    HTMLAttributes,
-    useEffect,
-    cloneElement,
-    isValidElement,
-    useRef,
-    Ref,
+  useState,
+  forwardRef,
+  ForwardedRef,
+  HTMLAttributes,
+  useEffect,
+  cloneElement,
+  isValidElement,
+  useRef,
 } from "react";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 import { Calendar } from "./Calendar";
@@ -16,213 +15,218 @@ import { DateRange } from "react-day-picker";
 import Picker from "torch-react-mobile-picker";
 
 import {
-    applyTimeToDateValue,
-    formatDateValueToString,
-    TimePickerValue,
+  applyTimeToDateValue,
+  formatDateValueToString,
+  TimePickerValue,
 } from "../utils/dateFormat";
 import { InputField } from "./InputField";
 
 export type CalendarProps = React.ComponentProps<typeof Calendar>;
 
 interface DatePickerProps extends HTMLAttributes<HTMLInputElement> {
-    mode?: "single" | "multiple" | "range";
-    selected?: Date | Date[] | DateRange | undefined;
-    min?: number;
-    max?: number;
-    size?: "M" | "S";
-    showWeekNumber?: boolean;
-    captionLayout?: "dropdown" | "label" | "dropdown-months" | "dropdown-years";
-    dateFormat?: string;
-    calendarProps?: CalendarProps;
-    timePicker?: boolean;
-    value?: any;
+  mode?: "single" | "multiple" | "range";
+  selected?: Date | Date[] | DateRange | undefined;
+  min?: number;
+  max?: number;
+  size?: "M" | "S";
+  showWeekNumber?: boolean;
+  captionLayout?: "dropdown" | "label" | "dropdown-months" | "dropdown-years";
+  dateFormat?: string;
+  calendarProps?: CalendarProps;
+  timePicker?: boolean;
+  value?: Date | Date[] | DateRange;
+  /** Transparent border/background so the picker blends into a table cell. */
+  onTable?: boolean;
 }
 
 export const DatePicker = forwardRef(
-    (
-        {
-            size = "M",
-            min,
-            max,
-            mode = "single",
-            onChange,
-            showWeekNumber = false,
-            captionLayout = "dropdown",
-            dateFormat = "yyyy/MM/dd",
-            calendarProps,
-            timePicker = false,
-            children,
-            value = new Date(),
-            ...props
-        }: DatePickerProps,
-        ref: ForwardedRef<HTMLInputElement>
-    ) => {
-        const initialDate =
-            mode == "multiple"
-                ? Array.isArray(value)
-                    ? value
-                    : [value]
-                : mode == "range"
-                    // Accept a DateRange ({ from, to }) directly, or wrap a single
-                    // Date into a one-day range.
-                    ? value && typeof value === "object" && !(value instanceof Date) &&
-                      ("from" in value || "to" in value)
-                        ? (value as DateRange)
-                        : { from: value, to: value }
-                    : value;
-        const [date, setDate] = useState<Date[] | Date | DateRange | undefined>(initialDate);
-        const [pickerValue, setPickerValue] = useState<TimePickerValue>({
-            hour: (date instanceof Date ? date.getHours() : 12).toString(),
-            minute: (date instanceof Date ? date.getMinutes() : 0)
-                .toString()
-                .padStart(2, "0"),
-            time: date instanceof Date && date.getHours() < 12 ? "AM" : "PM",
-        });
-        const [isOpen, setIsOpen] = useState(false);
-        const triggerRef = useRef<HTMLButtonElement>(null);
+  (
+    {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- destructured to exclude from {...props} spread
+      size = "M",
+      min,
+      max,
+      mode = "single",
+      onChange,
+      showWeekNumber = false,
+      captionLayout = "dropdown",
+      dateFormat = "yyyy/MM/dd",
+      calendarProps,
+      timePicker = false,
+      children,
+      value = new Date(),
+      ...props
+    }: DatePickerProps,
+    ref: ForwardedRef<HTMLInputElement>,
+  ) => {
+    const initialDate =
+      mode == "multiple"
+        ? Array.isArray(value)
+          ? value
+          : [value]
+        : mode == "range"
+          ? // Accept a DateRange ({ from, to }) directly, or wrap a single
+            // Date into a one-day range.
+            value &&
+            typeof value === "object" &&
+            !(value instanceof Date) &&
+            ("from" in value || "to" in value)
+            ? (value as DateRange)
+            : { from: value, to: value }
+          : value;
+    const [date, setDate] = useState<Date[] | Date | DateRange | undefined>(
+      initialDate as Date[] | Date | DateRange | undefined,
+    );
+    const [pickerValue, setPickerValue] = useState<TimePickerValue>({
+      hour: (date instanceof Date ? date.getHours() : 12).toString(),
+      minute: (date instanceof Date ? date.getMinutes() : 0).toString().padStart(2, "0"),
+      time: date instanceof Date && date.getHours() < 12 ? "AM" : "PM",
+    });
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef<HTMLButtonElement>(null);
 
-        // Call the onChange function when the date or picker value changes
-        useEffect(() => {
-            onChange?.({
-                target: {
-                    value: date,
-                },
-            } as any);
-        }, [date, pickerValue]);
+    // Call the onChange function when the date or picker value changes
+    useEffect(() => {
+      onChange?.({
+        target: {
+          value: date,
+        },
+      } as unknown as React.ChangeEvent<HTMLInputElement>);
+    }, [date, pickerValue]);
 
-        // Disable body scroll when popover is open
-        useEffect(() => {
-            if (isOpen) {
-                // Save the current overflow style
-                const originalOverflow = document.body.style.overflow;
-                document.body.style.overflow = "hidden";
+    // Disable body scroll when popover is open
+    useEffect(() => {
+      if (isOpen) {
+        // Save the current overflow style
+        const originalOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
 
-                // Cleanup function to restore original overflow style
-                return () => {
-                    document.body.style.overflow = originalOverflow;
-                };
-            }
-        }, [isOpen]);
-        const formattedValue = formatDateValueToString(
-            date,
-            pickerValue,
-            dateFormat
-        );
+        // Cleanup function to restore original overflow style
+        return () => {
+          document.body.style.overflow = originalOverflow;
+        };
+      }
+    }, [isOpen]);
+    const formattedValue = formatDateValueToString(date, pickerValue, dateFormat);
 
-        return (
-            <Popover onOpenChange={setIsOpen}>
-                <PopoverTrigger ref={triggerRef} asChild>
-                    {/* Clone the children element and pass the formatted value to the input element */}
-                    {isValidElement(children) ? (
-                        cloneElement(children as React.ReactElement<HTMLInputElement>, {
-                            value:
-                                (children as React.ReactElement<HTMLInputElement>).props
-                                    .value ?? formattedValue,
-                            type: "input",
-                            readOnly: true,
-                        })
-                    ) : (
-                        /* If the children is not a valid element, Show the default input */
-                        <InputField
-                            readOnly
-                            type="input"
-                            childrenSide={
-                                <ActionButton type="button" size={"M"} onClick={() => {
-                                    triggerRef.current?.click();
-                                }}>
-                                    <i className="ri-calendar-event-fill"></i>
-                                </ActionButton>
-                            }
-                            {...props}
-                            value={formattedValue}
-                            ref={ref}
-                        />
-                    )}
-                </PopoverTrigger>
-                <PopoverContent
-                    data-theme="dark"
-                    className="!h-fit max-h-[fit-content] p-0 border-none rounded-[12px] flex flex-col sm:flex-row "
+    return (
+      <Popover onOpenChange={setIsOpen}>
+        <PopoverTrigger ref={triggerRef} asChild>
+          {/* Clone the children element and pass the formatted value to the input element */}
+          {isValidElement(children) ? (
+            cloneElement(children as React.ReactElement<HTMLInputElement>, {
+              value:
+                (children as React.ReactElement<HTMLInputElement>).props.value ?? formattedValue,
+              type: "input",
+              readOnly: true,
+            })
+          ) : (
+            /* If the children is not a valid element, Show the default input */
+            <InputField
+              readOnly
+              type="input"
+              childrenSide={
+                <ActionButton
+                  type="button"
+                  size={"M"}
+                  onClick={() => {
+                    triggerRef.current?.click();
+                  }}
                 >
-                    <Calendar
-                        {...calendarProps}
-                        captionLayout={captionLayout}
-                        showWeekNumber={showWeekNumber}
-                        mode={mode as any}
-                        selected={date as any}
-                        onSelect={(e: any) => {
-                            setDate(applyTimeToDateValue(e, pickerValue));
-                        }}
-                        min={mode != "single" ? min : undefined}
-                        max={mode != "single" ? max : undefined}
-                    />
-                    {timePicker && (
-                        <TimePicker
-                            value={pickerValue}
-                            onChange={(value: TimePickerValue) => {
-                                setPickerValue(value);
-                                setDate(applyTimeToDateValue(date, value));
-                            }}
-                        />
-                    )}
-                </PopoverContent>
-            </Popover>
-        );
-    }
+                  <i className="ri-calendar-event-fill"></i>
+                </ActionButton>
+              }
+              {...props}
+              value={formattedValue}
+              ref={ref}
+            />
+          )}
+        </PopoverTrigger>
+        <PopoverContent
+          data-theme="dark"
+          className="!h-fit max-h-[fit-content] p-0 border-none rounded-[12px] flex flex-col sm:flex-row "
+        >
+          <Calendar
+            {...calendarProps}
+            captionLayout={captionLayout}
+            showWeekNumber={showWeekNumber}
+            // The mode/selected/onSelect discriminated union cannot be
+            // resolved statically since `mode` is a runtime value; cast to
+            // one variant so the props typecheck (runtime is unchanged).
+            mode={mode as "range"}
+            selected={date as unknown as DateRange | undefined}
+            onSelect={(e: Date | Date[] | DateRange | undefined) => {
+              setDate(applyTimeToDateValue(e, pickerValue));
+            }}
+            min={mode != "single" ? min : undefined}
+            max={mode != "single" ? max : undefined}
+          />
+          {timePicker && (
+            <TimePicker
+              value={pickerValue}
+              onChange={(value: TimePickerValue) => {
+                setPickerValue(value);
+                setDate(applyTimeToDateValue(date, value));
+              }}
+            />
+          )}
+        </PopoverContent>
+      </Popover>
+    );
+  },
 );
 
 DatePicker.displayName = "DatePicker";
 
 interface TimePickerProps {
-    value: TimePickerValue;
-    onChange: (value: TimePickerValue) => void;
+  value: TimePickerValue;
+  onChange: (value: TimePickerValue) => void;
 }
 
 const TimePicker = ({ value, onChange }: TimePickerProps) => {
-    return (
-        <div className="relative w-full sm:w-[189px]" data-theme="dark">
-            <Picker
-                className="flex-1"
-                selectContainerClassName="bg-background-system-body-tertiary z-[-1] rounded-[8px]"
-                value={value}
-                onChange={(e: TimePickerValue) => {
-                    onChange(e);
-                }}
-                wheelMode="normal"
-            >
-                <span className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-[20px] flex justify-center items-center text-white text-[30px] pr-[55px] pb-[5px]">
-                    :
-                </span>
-                <Picker.Column name="hour">
-                    {Array.from({ length: 12 }, (_, i) => i + 1).map((hour) => (
-                        <Picker.Item key={hour + "hour"} value={hour}>
-                            <div className="typography-display-small-semibold flex gap-1 whitespace-nowrap text-content-presentation-global-primary pl-[25px]">
-                                {" "}
-                                <p className="text-content-presentation-global-primary">
-                                    {hour}
-                                </p>
-                            </div>
-                        </Picker.Item>
-                    ))}
-                </Picker.Column>
-                <Picker.Column name="minute">
-                    {Array.from({ length: 60 }, (_, i) => i).map((minute) => (
-                        <Picker.Item key={minute + "minute"} value={minute}>
-                            <div className="typography-display-small-semibold text-content-presentation-global-primary">
-                                {minute.toString().padStart(2, "0")}
-                            </div>
-                        </Picker.Item>
-                    ))}
-                </Picker.Column>
-                <Picker.Column name="time">
-                    {["AM", "PM"].map((time) => (
-                        <Picker.Item key={time + "time"} value={time}>
-                            <div className="typography-display-small-semibold text-content-presentation-global-primary pr-[30px]">
-                                {time}
-                            </div>
-                        </Picker.Item>
-                    ))}
-                </Picker.Column>
-            </Picker>
-        </div>
-    );
+  return (
+    <div className="relative w-full sm:w-[189px]" data-theme="dark">
+      <Picker
+        className="flex-1"
+        selectContainerClassName="bg-background-system-body-tertiary z-[-1] rounded-[8px]"
+        value={value}
+        onChange={(e: TimePickerValue) => {
+          onChange(e);
+        }}
+        wheelMode="normal"
+      >
+        <span className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-[20px] flex justify-center items-center text-white text-[30px] pr-[55px] pb-[5px]">
+          :
+        </span>
+        <Picker.Column name="hour">
+          {Array.from({ length: 12 }, (_, i) => i + 1).map((hour) => (
+            <Picker.Item key={hour + "hour"} value={hour}>
+              <div className="typography-display-small-semibold flex gap-1 whitespace-nowrap text-content-presentation-global-primary pl-[25px]">
+                {" "}
+                <p className="text-content-presentation-global-primary">{hour}</p>
+              </div>
+            </Picker.Item>
+          ))}
+        </Picker.Column>
+        <Picker.Column name="minute">
+          {Array.from({ length: 60 }, (_, i) => i).map((minute) => (
+            <Picker.Item key={minute + "minute"} value={minute}>
+              <div className="typography-display-small-semibold text-content-presentation-global-primary">
+                {minute.toString().padStart(2, "0")}
+              </div>
+            </Picker.Item>
+          ))}
+        </Picker.Column>
+        <Picker.Column name="time">
+          {["AM", "PM"].map((time) => (
+            <Picker.Item key={time + "time"} value={time}>
+              <div className="typography-display-small-semibold text-content-presentation-global-primary pr-[30px]">
+                {time}
+              </div>
+            </Picker.Item>
+          ))}
+        </Picker.Column>
+      </Picker>
+    </div>
+  );
 };

package/apps/lib/components/Dialog.tsx

@@ -1,129 +1,116 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 
-import { cn } from "../utils/cn"
+import { cn } from "../utils/cn";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-    <DialogPrimitive.Overlay
-        ref={ref}
-        className={cn(
-            "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-            className
-        )}
-        {...props}
-    />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-    <DialogPortal>
-        <DialogOverlay />
-        <DialogPrimitive.Content
-            ref={ref}
-            className={cn(
-                "fixed left-[50%] top-[50%] z-50 flex flex-col items-start w-fit translate-x-[-50%] translate-y-[-50%]  shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-                "flex justify-center items-center",
-                className
-            )}
-            {...props}
-        >
-            {children}
-
-        </DialogPrimitive.Content>
-    </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 flex flex-col items-start w-fit translate-x-[-50%] translate-y-[-50%]  shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "flex justify-center items-center",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogCloseButton = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Close>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>
+  React.ElementRef<typeof DialogPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>
 >(({ className, children, ...props }, ref) => (
-    <DialogPrimitive.Close ref={ref} {...props} className={cn("m-0 p-0 h-fit", className)}>
-        {children}
-    </DialogPrimitive.Close>
-))
-const DialogHeader = ({
-    className,
-    ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            "flex flex-col space-y-1.5 text-center sm:text-left",
-            className
-        )}
-        {...props}
-    />
-)
-DialogHeader.displayName = "DialogHeader"
+  <DialogPrimitive.Close ref={ref} {...props} className={cn("m-0 p-0 h-fit", className)}>
+    {children}
+  </DialogPrimitive.Close>
+));
+DialogCloseButton.displayName = DialogPrimitive.Close.displayName;
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
 
-const DialogFooter = ({
-    className,
-    ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-            className
-        )}
-        {...props}
-    />
-)
-DialogFooter.displayName = "DialogFooter"
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-    <DialogPrimitive.Title
-        ref={ref}
-        className={cn(
-            "text-lg font-semibold leading-none tracking-tight text-content-presentation-global-primary",
-            className
-        )}
-        {...props}
-    />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight text-content-presentation-global-primary",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-    <DialogPrimitive.Description
-        ref={ref}
-        className={cn("text-sm text-muted-foreground text-content-presentation-global-primary", className)}
-        {...props}
-    />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn(
+      "text-sm text-muted-foreground text-content-presentation-global-primary",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
-    Dialog,
-    DialogPortal,
-    DialogOverlay,
-    DialogTrigger,
-    DialogClose,
-    DialogContent,
-    DialogHeader,
-    DialogFooter,
-    DialogTitle,
-    DialogDescription,
-    DialogCloseButton
-}
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogCloseButton,
+};