@mbao01/common 0.0.43 → 0.0.45

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);

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

@@ -0,0 +1,103 @@
+import { cva } from "../../../libs";
+
+export const getMultiSelectClasses = cva(
+  "overflow-visible bg-transparent flex flex-col h-fit w-fit"
+);
+
+export const getMultiSelectTriggerClasses = cva(
+  "flex items-center flex-wrap gap-1 h-fit px-1 py-2 rounded-md transition-all overflow-hidden",
+  {
+    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: "min-h-6 leading-relaxed px-2 py-1 text-xs",
+        sm: "min-h-8 leading-8 px-3 py-1.5 text-sm",
+        md: "min-h-12 leading-loose px-4 text-sm",
+        lg: "min-h-16 leading-loose px-6 text-lg",
+      },
+    },
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "min-h-10 px-4",
+      },
+      {
+        variant: undefined,
+        outline: true,
+        className: "border-neutral-content",
+      },
+      {
+        variant: "default",
+        outline: true,
+        className: "border-base-content",
+      },
+    ],
+  }
+);
+
+export const getMultiSelectItemClasses = cva(
+  "rounded-md cursor-pointer px-2 py-1 transition-colors flex justify-between",
+  {
+    variants: {
+      included: {
+        true: "opacity-50 cursor-default",
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+      },
+      size: {
+        xs: "p-1 text-xs",
+        sm: "px-1.5 text-sm",
+        md: "px-2 text-sm",
+        lg: "px-3 text-lg",
+      },
+    },
+  }
+);
+
+export const getMultiSelectListClasses = cva(
+  "p-2 flex flex-col gap-2 rounded-md scrollbar-thin scrollbar-track-transparent transition-colors scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg w-full absolute bg-background shadow-md z-10 border border-muted top-0",
+  {
+    variants: {
+      size: {
+        xs: "p-1",
+        sm: "p-1.5",
+        md: "p-2",
+        lg: "p-3",
+      },
+    },
+  }
+);
+
+export const getMultiSelectTagClasses = cva(
+  "relative flex items-center gap-1 [&>span]:truncate [&>span]:max-w-24 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed focus-visible:outline-none",
+  {
+    variants: {
+      size: {
+        xs: "px-0.5 [&>span]:max-w-20 rounded",
+        sm: "px-1",
+        md: "px-1.5 [&>span]:max-w-28",
+        lg: "px-2 [&>span]:max-w-32",
+      },
+    },
+  }
+);

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

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

package/src/components/Form/MultiSelect/hooks/useMultiSelect/index.ts

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

package/src/components/Form/MultiSelect/hooks/useMultiSelect/useMultiSelect.ts

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

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

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

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

@@ -0,0 +1,46 @@
+import { ComponentPropsWithoutRef, HTMLAttributes } from "react";
+import { VariantProps } from "../../../libs";
+import { Command } from "../../Command";
+import {
+  getMultiSelectItemClasses,
+  getMultiSelectListClasses,
+  getMultiSelectTriggerClasses,
+} from "./constants";
+
+export type Item = {
+  value: string;
+  label?: string;
+};
+
+export type MultiSelectProps = React.ComponentPropsWithoutRef<typeof Command> & {
+  loop?: boolean;
+  values: Item["value"][];
+  onValuesChange: (value: string[]) => void;
+};
+
+export type MultiSelectContextProps = {
+  values: Item["value"][];
+  onValueChange: (value: Item["value"], label?: Item["label"]) => void;
+  items: Item[];
+  open: boolean;
+  setOpen: (value: boolean) => void;
+  inputValue: string;
+  setInputValue: React.Dispatch<React.SetStateAction<string>>;
+  activeIndex: number;
+  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+  ref: React.RefObject<HTMLInputElement>;
+  handleSelect: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+};
+
+export type MultiSelectTriggerProps = HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getMultiSelectTriggerClasses>;
+
+export type MultiSelectInputProps = ComponentPropsWithoutRef<typeof Command.Input>;
+
+export type MultiSelectContentProps = HTMLAttributes<HTMLDivElement>;
+
+export type MultiSelectListProps = ComponentPropsWithoutRef<typeof Command.List> &
+  VariantProps<typeof getMultiSelectListClasses>;
+export type MultiSelectItemProps = Item &
+  ComponentPropsWithoutRef<typeof Command.Item> &
+  VariantProps<typeof getMultiSelectItemClasses>;