@mbao01/common 0.0.43 → 0.0.44

package/src/components/Form/DatetimeInput/constants.ts

@@ -0,0 +1,135 @@
+import { cva } from "../../../libs";
+
+export const DEFAULT_SIZE = 96;
+
+export const getDatetimeInputContainerClasses = cva(
+  `h-10 flex items-center justify-between w-fit px-2 rounded-md transition-all gap-1
+  [&:has(input:focus)]:duration-100 [&:has(input:focus)]:outline [&:has(input:focus)]:outline-2 [&:has(input:focus)]:outline-offset-2 [&:has(input:focus)]:outline-base-content/20
+  [&:has(input:focus-within)]:duration-100 [&:has(input:focus-within)]:outline [&:has(input:focus-within)]:outline-2 [&:has(input:focus-within)]:outline-offset-2 [&:has(input:focus-within)]:outline-base-content/20
+   `,
+  {
+    variants: {
+      variant: {
+        default: "border-0",
+        accent: "border border-accent",
+        error: "border border-error",
+        ghost: "border border-ghost",
+        info: "border border-info",
+        primary: "border border-primary",
+        secondary: "border border-secondary",
+        success: "border border-success",
+        warning: "border border-warning",
+      },
+      outline: {
+        true: "border",
+      },
+      disabled: {
+        true: "border-base-300",
+      },
+      wide: {
+        true: "w-full",
+      },
+      size: {
+        xs: "h-6 leading-relaxed text-xs px-1",
+        sm: "h-8 leading-8 text-sm px-1",
+        md: "h-12 leading-loose text-sm px-2",
+        lg: "h-16 leading-loose text-lg px-3",
+      },
+    },
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "min-h-fit h-10",
+      },
+      {
+        variant: undefined,
+        outline: true,
+        className: "border-neutral-content",
+      },
+      {
+        variant: "default",
+        outline: true,
+        className: "border-base-content",
+      },
+    ],
+  }
+);
+
+export const getDatetimeCalendarTriggerClasses = cva(
+  `size-8 rounded-md p-1 flex items-center justify-center font-normal
+  outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-base-content focus-visible:ring-inset
+  `,
+  {
+    variants: {
+      size: {
+        xs: "size-4 p-0 rounded-sm",
+        sm: "size-6",
+        md: "size-9",
+        lg: "size-10",
+      },
+    },
+  }
+);
+
+export const getDatetimeCalendarIconClasses = cva("", {
+  variants: {
+    size: {
+      xs: "size-3",
+      sm: "size-3",
+      md: "size-5",
+      lg: "size-6",
+    },
+  },
+  compoundVariants: [
+    {
+      size: undefined,
+      className: "size-4",
+    },
+  ],
+});
+
+export const getTimePickerClasses = cva(
+  "border border-neutral-content bg-base-100 shadow-sm cursor-pointer ring-0 py-2 h-8 px-3 w-full text-sm outline-0 inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-base-content disabled:pointer-events-none disabled:opacity-50 hover:bg-base-200",
+  {
+    variants: {
+      selected: {
+        true: "bg-primary border-primary text-primary-content hover:border-neutral-content hover:text-base-content",
+      },
+      suggested: {
+        true: "bg-info border-info text-info-content hover:border-neutral-content hover:text-base-content",
+      },
+    },
+  }
+);
+
+export const getTimePickerListClasses = cva(
+  "flex items-center flex-col gap-1 h-full max-h-56 w-28 px-1 py-0.5"
+);
+
+export const getTimePickerScrollAreaClasses = cva(
+  "h-[90%] w-full focus-visible:outline-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-0 py-0.5"
+);
+
+export const getNaturalLanguageInputClasses = cva(
+  "flex-1 border-none rounded bg-transparent outline-none ring-0 focus:outline-none focus:ring-0 focus-within:outline-none focus-within:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        xs: "h-4 px-1",
+        sm: "h-6 px-1",
+        md: "h-9 px-2",
+        lg: "h-11 px-3",
+      },
+    },
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "h-8 px-2",
+      },
+    ],
+  }
+);
+
+export const getDatetimeCalendarClasses = cva(
+  "peer flex justify-end bg-transparent focus:outline-none focus:ring-0 focus-within:outline-none focus-within:ring-0 sm:text-sm disabled:cursor-not-allowed disabled:opacity-50"
+);

package/src/components/Form/DatetimeInput/helpers.ts

@@ -0,0 +1,93 @@
+import { parseDate } from "chrono-node";
+import { type TimeString } from "./types";
+
+/**
+ * Utility function that parses dates.
+ * Parses a given date string using the `chrono-node` library.
+ *
+ * @param str - A string representation of a date and time.
+ * @returns A `Date` object representing the parsed date and time, or `null` if the string could not be parsed.
+ */
+export const parseDateTime = (str: Date | string) => {
+  if (str instanceof Date) {
+    return str;
+  }
+
+  return parseDate(str) ?? undefined;
+};
+
+/**
+ * Converts a given timestamp or the current date and time to a string representation in the local time zone.
+ * format: `HH:mm`, adjusted for the local time zone.
+ *
+ * @param timestamp {Date | string}
+ * @returns A string representation of the timestamp
+ */
+export const getDateTimeLocal = (timestamp?: Date): string => {
+  const d = timestamp ? new Date(timestamp) : new Date();
+  if (d.toString() === "Invalid Date") return "";
+  return new Date(d.getTime() - d.getTimezoneOffset() * 60000)
+    .toISOString()
+    .split(":")
+    .slice(0, 2)
+    .join(":");
+};
+
+/**
+ * Formats a given date and time object or string into a human-readable string representation.
+ * "MMM D, YYYY h:mm A" (e.g. "Jan 1, 2023 12:00 PM").
+ *
+ * @param date - {Date | string}
+ * @returns A string representation of the date and time
+ */
+export const formatDateTime = (date: Date | string, locale?: Intl.LocalesArgument) => {
+  return new Date(date).toLocaleTimeString(locale, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true,
+  });
+};
+
+export const getParsedTime = (date: Date): TimeString => {
+  if (date) {
+    const PM_AM = date.getHours() >= 12 ? "PM" : "AM";
+    //fix the time format for this value
+
+    const PM_AM_hour = date.getHours();
+    const minute = date.getMinutes();
+
+    const hour =
+      PM_AM_hour > 12 ? PM_AM_hour % 12 : PM_AM_hour === 0 || PM_AM_hour === 12 ? 12 : PM_AM_hour;
+
+    return `${hour}:${minute ? minute : "00"} ${PM_AM}` as TimeString;
+  }
+
+  return "";
+};
+
+export const setDateTime = (date: Date, time: TimeString) => {
+  if (!time) {
+    return date;
+  }
+
+  const [HHMM, PM_AM] = time.split(" ");
+  const [HH, MM] = HHMM.split(":").map((v) => parseInt(v) || 0);
+
+  let hour = HH;
+  if (HH === 12) {
+    if (PM_AM === "AM") {
+      hour = 0;
+    }
+  } else if (HH < 12) {
+    if (PM_AM === "PM") {
+      hour += 12;
+    }
+  }
+  const newDate = new Date(date);
+  newDate.setHours(hour, MM);
+
+  return newDate;
+};

package/src/components/Form/DatetimeInput/hooks/index.ts

@@ -0,0 +1 @@
+export { useDateInput } from "./useDateInput";

package/src/components/Form/DatetimeInput/hooks/useDateInput/index.ts

@@ -0,0 +1 @@
+export { useDateInput } from "./useDateInput";

package/src/components/Form/DatetimeInput/hooks/useDateInput/useDateInput.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { DatetimeInputContext } from "../../DatetimeInputContext";
+
+export const useDateInput = () => {
+  const context = useContext(DatetimeInputContext);
+  if (!context) {
+    throw new Error("useDateInput must be used within SmartDateInputProvider");
+  }
+  return context;
+};

package/src/components/Form/DatetimeInput/index.ts

@@ -0,0 +1 @@
+export { DatetimeInput } from "./DatetimeInput";

package/src/components/Form/DatetimeInput/types.ts

@@ -0,0 +1,36 @@
+import { type VariantProps } from "../../../libs";
+import { type CalendarProps } from "../../Calendar/types";
+import { type InputProps } from "../Input/types";
+import { getDatetimeInputContainerClasses } from "./constants";
+
+type DisabledType = { disabled?: boolean };
+type VariantType = VariantProps<typeof getDatetimeInputContainerClasses>;
+type NaturalLanguageInputType = DisabledType & {
+  locale?: Intl.LocalesArgument;
+} & Omit<InputProps, "type" | "ref" | "value" | "defaultValue" | "onBlur" | "disabled">;
+type CalendarType = Omit<CalendarProps, "mode" | "disabled">;
+
+export type DatetimeInputProps = NaturalLanguageInputType &
+  VariantType & {
+    date?: Date;
+    calendar?: CalendarType;
+    defaultDate?: Date;
+    onDateChange?: (date: Date | undefined) => void;
+  };
+
+export type DatetimeInputContextProps = {
+  value?: Date;
+  onDateChange: (date: Date | undefined) => void;
+  time: TimeString;
+  onTimeChange: (time: TimeString) => void;
+};
+
+export type DatetimeCalendarProps = VariantType & CalendarType & DisabledType;
+
+export type NaturalLanguageInputProps = NaturalLanguageInputType;
+
+type Hours = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`;
+type Minutes = `${0 | 1 | 2 | 3 | 4 | 5}${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;
+type PM_AM = "AM" | "PM";
+
+export type TimeString = `${Hours}:${Minutes} ${PM_AM}` | "";

package/src/components/Form/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,348 @@
+"use client";
+
+import type { ComponentRef, KeyboardEvent, MouseEvent, SyntheticEvent } from "react";
+import { forwardRef, useCallback, useRef, useState } from "react";
+import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons";
+import { Command as CommandPrimitive } from "cmdk";
+import type {
+  Item,
+  MultiSelectContentProps,
+  MultiSelectInputProps,
+  MultiSelectItemProps,
+  MultiSelectListProps,
+  MultiSelectProps,
+  MultiSelectTriggerProps,
+} from "./types";
+import { cn } from "../../../utilities";
+import { Badge } from "../../Badge";
+import { Command } from "../../Command";
+import {
+  getMultiSelectClasses,
+  getMultiSelectItemClasses,
+  getMultiSelectListClasses,
+  getMultiSelectTagClasses,
+  getMultiSelectTriggerClasses,
+} from "./constants";
+import { useMultiSelect } from "./hooks";
+import { MultiSelectContext } from "./MultiSelectContext";
+
+// TODO : expose the visibility of the popup
+const MultiSelect = ({
+  values,
+  onValuesChange,
+  loop = false,
+  className,
+  children,
+  dir,
+  ...props
+}: MultiSelectProps) => {
+  const [inputValue, setInputValue] = useState("");
+  const [open, setOpen] = useState<boolean>(false);
+  const [activeIndex, setActiveIndex] = useState<number>(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isValueSelected, setIsValueSelected] = useState(false);
+  const [selectedValue, setSelectedValue] = useState("");
+  const [items, setItems] = useState<Item[]>(
+    (values ?? []).map((value) => ({ value, label: undefined }))
+  );
+
+  const onValueChangeHandler = useCallback(
+    (value: string, label?: string) => {
+      if (values.includes(value)) {
+        setItems(items.filter(({ value: val }) => val !== value));
+        onValuesChange(values.filter((val) => val !== value));
+      } else {
+        setItems([...items, { value, label }]);
+        onValuesChange([...values, value]);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [values]
+  );
+
+  const handleSelect = useCallback(
+    (e: SyntheticEvent<HTMLInputElement>) => {
+      const target = e.currentTarget;
+      const selection = target.value.substring(
+        target.selectionStart ?? 0,
+        target.selectionEnd ?? 0
+      );
+
+      setSelectedValue(selection);
+      setIsValueSelected(selection === inputValue);
+    },
+    [inputValue]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      const target = inputRef.current;
+
+      if (!target) return;
+
+      if (["ArrowLeft", "ArrowRight", "Backspace", "Delete", "Escape", "Enter"].includes(e.key)) {
+        e.stopPropagation();
+
+        const moveNext = () => {
+          const nextIndex = activeIndex + 1;
+          setActiveIndex(nextIndex > values.length - 1 ? (loop ? 0 : -1) : nextIndex);
+        };
+
+        const movePrev = () => {
+          const prevIndex = activeIndex - 1;
+          setActiveIndex(prevIndex < 0 ? values.length - 1 : prevIndex);
+        };
+
+        const moveCurrent = () => {
+          const newIndex =
+            activeIndex - 1 <= 0 ? (values.length - 1 === 0 ? -1 : 0) : activeIndex - 1;
+          setActiveIndex(newIndex);
+        };
+
+        switch (e.key) {
+          case "ArrowLeft":
+            if (dir === "rtl") {
+              if (values.length > 0 && (activeIndex !== -1 || loop)) {
+                moveNext();
+              }
+            } else {
+              if (values.length > 0 && target.selectionStart === 0) {
+                movePrev();
+              }
+            }
+            break;
+
+          case "ArrowRight":
+            if (dir === "rtl") {
+              if (values.length > 0 && target.selectionStart === 0) {
+                movePrev();
+              }
+            } else {
+              if (values.length > 0 && (activeIndex !== -1 || loop)) {
+                moveNext();
+              }
+            }
+            break;
+
+          case "Backspace":
+          case "Delete":
+            if (values.length > 0) {
+              if (activeIndex !== -1 && activeIndex < values.length) {
+                onValueChangeHandler(values[activeIndex]);
+                moveCurrent();
+              } else {
+                if (target.selectionStart === 0) {
+                  if (selectedValue === inputValue || isValueSelected) {
+                    onValueChangeHandler(values[values.length - 1]);
+                  }
+                }
+              }
+            }
+            break;
+
+          case "Enter":
+            setOpen(true);
+            break;
+
+          case "Escape":
+            if (activeIndex !== -1) {
+              setActiveIndex(-1);
+            } else if (open) {
+              setOpen(false);
+            }
+            break;
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dir, values, inputValue, activeIndex, loop]
+  );
+
+  return (
+    <MultiSelectContext.Provider
+      value={{
+        items,
+        values,
+        onValueChange: onValueChangeHandler,
+        open,
+        setOpen,
+        inputValue,
+        setInputValue,
+        activeIndex,
+        setActiveIndex,
+        ref: inputRef,
+        handleSelect,
+      }}
+    >
+      <Command
+        onKeyDown={handleKeyDown}
+        className={cn(getMultiSelectClasses(), className)}
+        dir={dir}
+        {...props}
+      >
+        {children}
+      </Command>
+    </MultiSelectContext.Provider>
+  );
+};
+
+export const MultiSelectTrigger = ({
+  className,
+  children,
+  size,
+  wide,
+  outline,
+  variant,
+  disabled,
+  ...props
+}: MultiSelectTriggerProps) => {
+  const { items, onValueChange, activeIndex } = useMultiSelect();
+
+  const handleMouseDown = useCallback((e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        getMultiSelectTriggerClasses({ size, wide, outline, variant, disabled }),
+        className
+      )}
+      {...props}
+    >
+      {items.map((item, index) => {
+        const label = item.label ?? item.value;
+
+        return (
+          <Badge
+            key={item.value}
+            className={cn(
+              getMultiSelectTagClasses({ size }),
+              "px-1 rounded-xl flex items-center gap-1",
+              activeIndex === index && "ring-2 ring-muted-foreground "
+            )}
+            size={size}
+            variant={variant === "default" ? "neutral" : variant}
+          >
+            <span className="text-xs">{label}</span>
+            <button
+              type="button"
+              aria-label={`Remove ${label} option`}
+              aria-roledescription="button to remove option"
+              onMouseDown={handleMouseDown}
+              onClick={() => onValueChange(item.value, item.label)}
+              disabled={disabled}
+            >
+              <span className="sr-only">Remove {label} option</span>
+              <Cross2Icon className="h-4 w-4 hover:stroke-destructive" />
+            </button>
+          </Badge>
+        );
+      })}
+      {children}
+    </div>
+  );
+};
+
+MultiSelectTrigger.displayName = "MultiSelectTrigger";
+
+const MultiSelectInput = ({ className, ...props }: MultiSelectInputProps) => {
+  const {
+    setOpen,
+    inputValue,
+    setInputValue,
+    activeIndex,
+    setActiveIndex,
+    handleSelect,
+    ref: inputRef,
+  } = useMultiSelect();
+
+  return (
+    <CommandPrimitive.Input
+      {...props}
+      tabIndex={0}
+      ref={inputRef}
+      value={inputValue}
+      onValueChange={activeIndex === -1 ? setInputValue : undefined}
+      onSelect={handleSelect}
+      onBlur={() => setOpen(false)}
+      onFocus={() => setOpen(true)}
+      onClick={() => setActiveIndex(-1)}
+      className={cn(
+        "bg-transparent outline-none flex-1",
+        className,
+        activeIndex !== -1 && "caret-transparent"
+      )}
+    />
+  );
+};
+
+MultiSelectInput.displayName = "MultiSelectInput";
+
+const MultiSelectContent = forwardRef<HTMLDivElement, MultiSelectContentProps>(
+  ({ children }, ref) => {
+    const { open } = useMultiSelect();
+    return (
+      <div ref={ref} className="relative">
+        {open && children}
+      </div>
+    );
+  }
+);
+
+MultiSelectContent.displayName = "MultiSelectContent";
+
+const MultiSelectList = forwardRef<ComponentRef<typeof Command.List>, MultiSelectListProps>(
+  ({ className, size, children }, ref) => {
+    return (
+      <Command.List ref={ref} className={cn(getMultiSelectListClasses({ size }), className)}>
+        {children}
+        <Command.Empty>
+          <span className="text-muted-foreground">No results found</span>
+        </Command.Empty>
+      </Command.List>
+    );
+  }
+);
+
+MultiSelectList.displayName = "MultiSelectList";
+
+const MultiSelectItem = forwardRef<ComponentRef<typeof Command.Item>, MultiSelectItemProps>(
+  ({ className, value, label, children, size, disabled, ...props }, ref) => {
+    const { values: options, onValueChange, setInputValue } = useMultiSelect();
+
+    const mousePreventDefault = useCallback((e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+    }, []);
+
+    const included = options.includes(value);
+    return (
+      <Command.Item
+        ref={ref}
+        {...props}
+        disabled={disabled}
+        onSelect={() => {
+          onValueChange(value, label);
+          setInputValue("");
+        }}
+        className={cn(getMultiSelectItemClasses({ included, disabled, size }), className)}
+        onMouseDown={mousePreventDefault}
+      >
+        {children}
+        {included && <CheckIcon className="h-4 w-4" />}
+      </Command.Item>
+    );
+  }
+);
+
+MultiSelectItem.displayName = "MultiSelectItem";
+
+MultiSelect.Trigger = MultiSelectTrigger;
+MultiSelect.Input = MultiSelectInput;
+MultiSelect.Content = MultiSelectContent;
+MultiSelect.List = MultiSelectList;
+MultiSelect.Item = MultiSelectItem;
+
+export { MultiSelect };

package/src/components/Form/MultiSelect/MultiSelectContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import { type MultiSelectContextProps } from "./types";
+
+export const MultiSelectContext = createContext<MultiSelectContextProps | null>(null);