@goplusvn/core 0.1.0 → 0.1.1

package/src/ui/forms/multi-select.tsx

@@ -0,0 +1,629 @@
+"use client";
+
+import * as React from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Check, ChevronsUpDown, Search, X } from "lucide-react";
+
+import { cn } from "../../utils";
+
+import { Badge, Button, Input } from "../primitives";
+import { ScrollArea } from "../primitives/client";
+
+export interface MultiSelectOption {
+  value: string | number | boolean;
+  label: string;
+  /** Whether this option is disabled and cannot be selected */
+  disabled?: boolean;
+  /** Optional icon component to display alongside the option */
+  icon?: React.ComponentType<{ className?: string }>;
+}
+
+interface MultiSelectProps {
+  options: MultiSelectOption[];
+  value?: (string | number | boolean)[];
+  onValueChange?: (value: (string | number | boolean)[]) => void;
+  /** Default value for uncontrolled mode */
+  defaultValue?: (string | number | boolean)[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  disabled?: boolean;
+  /**
+   * Maximum number of items to display. Extra selected items will be summarized
+   * Optional, defaults to 3
+   */
+  maxCount?: number;
+  /**
+   * Responsive configuration for different screen sizes
+   * Can be boolean true for default responsive behavior or an object for custom configuration
+   */
+  responsive?: boolean | ResponsiveConfig;
+  className?: string;
+  id?: string;
+}
+
+/**
+ * Responsive configuration for different screen sizes
+ */
+interface ResponsiveConfig {
+  /** Configuration for mobile devices (< 640px) */
+  mobile?: {
+    maxCount?: number;
+    compactMode?: boolean;
+  };
+  /** Configuration for tablet devices (640px - 1024px) */
+  tablet?: {
+    maxCount?: number;
+    compactMode?: boolean;
+  };
+  /** Configuration for desktop devices (> 1024px) */
+  desktop?: {
+    maxCount?: number;
+    compactMode?: boolean;
+  };
+}
+
+/**
+ * Imperative methods that will be exposed through ref
+ * (Currently not implemented - will be added in later steps)
+ */
+export interface MultiSelectRef {
+  /** Reset to default value */
+  reset: () => void;
+  /** Get current selected values */
+  getSelectedValues: () => (string | number | boolean)[];
+  /** Set selected values programmatically */
+  setSelectedValues: (values: (string | number | boolean)[]) => void;
+  /** Clear all selected values */
+  clear: () => void;
+  /** Focus the component */
+  focus: () => void;
+}
+
+export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
+  (
+    {
+      options,
+      value: controlledValue,
+      onValueChange,
+      defaultValue = [],
+      placeholder = "Select options...",
+      searchPlaceholder = "Search...",
+      emptyText = "No option found.",
+      maxCount = 3,
+      disabled = false,
+      responsive = false,
+      className,
+      id,
+    },
+    ref,
+  ) => {
+    // State for uncontrolled mode
+    const [internalValue, setInternalValue] =
+      useState<(string | number | boolean)[]>(defaultValue);
+    const [open, setOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState("");
+
+    // Determine if we're in controlled or uncontrolled mode
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+
+    // Refs
+    const containerRef = useRef<HTMLDivElement>(null);
+    const searchInputRef = useRef<HTMLInputElement>(null);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const buttonRef = useRef<HTMLButtonElement>(null);
+
+    // Accessibility - Live regions for screen reader announcements
+    const [politeMessage, setPoliteMessage] = useState("");
+    const [assertiveMessage, setAssertiveMessage] = useState("");
+    const prevSelectedCount = useRef(value.length);
+
+    const announce = useCallback(
+      (message: string, priority: "polite" | "assertive" = "polite") => {
+        if (priority === "assertive") {
+          setAssertiveMessage(message);
+          setTimeout(() => setAssertiveMessage(""), 100);
+        } else {
+          setPoliteMessage(message);
+          setTimeout(() => setPoliteMessage(""), 100);
+        }
+      },
+      [],
+    );
+
+    // Responsive Design
+    const [screenSize, setScreenSize] = useState<
+      "mobile" | "tablet" | "desktop"
+    >("desktop");
+
+    useEffect(() => {
+      if (typeof window === "undefined") return;
+
+      const handleResize = () => {
+        const width = window.innerWidth;
+        if (width < 640) {
+          setScreenSize("mobile");
+        } else if (width < 1024) {
+          setScreenSize("tablet");
+        } else {
+          setScreenSize("desktop");
+        }
+      };
+
+      handleResize();
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    const getResponsiveSettings = useCallback(() => {
+      if (!responsive) {
+        return {
+          maxCount: maxCount,
+          compactMode: false,
+        };
+      }
+
+      if (responsive === true) {
+        const defaultResponsive = {
+          mobile: { maxCount: 2, compactMode: true },
+          tablet: { maxCount: 4, compactMode: false },
+          desktop: { maxCount: 6, compactMode: false },
+        };
+        const currentSettings = defaultResponsive[screenSize];
+        return {
+          maxCount: currentSettings?.maxCount ?? maxCount,
+          compactMode: currentSettings?.compactMode ?? false,
+        };
+      }
+
+      const currentSettings = responsive[screenSize];
+      return {
+        maxCount: currentSettings?.maxCount ?? maxCount,
+        compactMode: currentSettings?.compactMode ?? false,
+      };
+    }, [responsive, screenSize, maxCount]);
+
+    const responsiveSettings = getResponsiveSettings();
+
+    // Filter options based on search value
+    const filteredOptions = useMemo(() => {
+      if (!searchValue.trim()) {
+        return options;
+      }
+      const searchLower = searchValue.toLowerCase();
+      return options.filter(
+        (option) =>
+          option.label.toLowerCase().includes(searchLower) ||
+          String(option.value).toLowerCase().includes(searchLower),
+      );
+    }, [options, searchValue]);
+
+    // Reset search when dropdown closes
+    useEffect(() => {
+      if (!open) {
+        setSearchValue("");
+      }
+    }, [open]);
+
+    // Focus search input when dropdown opens
+    useEffect(() => {
+      if (open && searchInputRef.current) {
+        // Small delay to ensure dropdown is rendered
+        setTimeout(() => {
+          searchInputRef.current?.focus();
+        }, 50);
+      }
+    }, [open]);
+
+    // Close dropdown when clicking outside
+    useEffect(() => {
+      if (!open) return;
+
+      const handleClickOutside = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        if (
+          containerRef.current &&
+          !containerRef.current.contains(target) &&
+          dropdownRef.current &&
+          !dropdownRef.current.contains(target)
+        ) {
+          // Don't close if clicking inside dialog
+          if (target.closest('[data-slot="dialog-content"]')) {
+            return;
+          }
+          setOpen(false);
+        }
+      };
+
+      const handleEscape = (event: KeyboardEvent) => {
+        if (event.key === "Escape" && open) {
+          event.stopPropagation();
+          setOpen(false);
+        }
+      };
+
+      // Use capture phase to catch events before Dialog
+      document.addEventListener("mousedown", handleClickOutside, true);
+      document.addEventListener("keydown", handleEscape, true);
+
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside, true);
+        document.removeEventListener("keydown", handleEscape, true);
+      };
+    }, [open]);
+
+    // Accessibility announcements
+    useEffect(() => {
+      const selectedCount = value.length;
+      const totalOptions = options.filter((opt) => !opt.disabled).length;
+
+      if (selectedCount !== prevSelectedCount.current) {
+        const diff = selectedCount - prevSelectedCount.current;
+        if (diff > 0) {
+          announce(`${selectedCount} of ${totalOptions} options selected.`);
+        } else if (diff < 0) {
+          announce(
+            `Option removed. ${selectedCount} of ${totalOptions} options selected.`,
+          );
+        }
+        prevSelectedCount.current = selectedCount;
+      }
+    }, [value, announce, options]);
+
+    // Helper to update value (works for both controlled and uncontrolled)
+    const updateValue = useCallback(
+      (newValue: (string | number | boolean)[]) => {
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+      },
+      [isControlled, onValueChange],
+    );
+
+    const handleSelect = useCallback(
+      (optionValue: string | number | boolean) => {
+        // Check if option is disabled
+        const option = options.find((opt) => opt.value === optionValue);
+        if (option?.disabled) {
+          return; // Don't allow selecting disabled options
+        }
+
+        const newValue = value.includes(optionValue)
+          ? value.filter((v) => v !== optionValue)
+          : [...value, optionValue];
+        updateValue(newValue);
+      },
+      [value, options, updateValue],
+    );
+
+    const handleSelectAll = useCallback(() => {
+      updateValue(
+        filteredOptions.filter((opt) => !opt.disabled).map((opt) => opt.value),
+      );
+    }, [updateValue, filteredOptions]);
+
+    const handleClearAll = useCallback(() => {
+      updateValue([]);
+    }, [updateValue]);
+
+    const handleRemove = useCallback(
+      (optionValue: string | number | boolean, e: React.MouseEvent) => {
+        e.stopPropagation();
+        updateValue(value.filter((v) => v !== optionValue));
+      },
+      [updateValue, value],
+    );
+
+    const clearExtraOptions = useCallback(() => {
+      const newSelectedValues = value.slice(0, responsiveSettings.maxCount);
+      updateValue(newSelectedValues);
+    }, [value, responsiveSettings.maxCount, updateValue]);
+
+    // Imperative API via ref
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        reset: () => {
+          updateValue(defaultValue);
+          setOpen(false);
+          setSearchValue("");
+        },
+        getSelectedValues: () => value,
+        setSelectedValues: (values: (string | number | boolean)[]) => {
+          updateValue(values);
+        },
+        clear: () => {
+          updateValue([]);
+        },
+        focus: () => {
+          buttonRef.current?.focus();
+        },
+      }),
+      [value, defaultValue, updateValue],
+    );
+
+    const selectedOptions = options.filter((option) =>
+      value.includes(option.value),
+    );
+
+    // Get badge color based on index for variety
+    const getBadgeColor = (index: number) => {
+      const colors = [
+        "bg-blue-100 text-blue-700 hover:bg-blue-200",
+        "bg-green-100 text-green-700 hover:bg-green-200",
+        "bg-purple-100 text-purple-700 hover:bg-purple-200",
+        "bg-orange-100 text-orange-700 hover:bg-orange-200",
+        "bg-pink-100 text-pink-700 hover:bg-pink-200",
+        "bg-cyan-100 text-cyan-700 hover:bg-cyan-200",
+      ];
+      return colors[index % colors.length];
+    };
+
+    return (
+      <div ref={containerRef} className="relative w-full">
+        {/* Screen Reader Live Regions */}
+        <div className="sr-only">
+          <div aria-live="polite" aria-atomic="true" role="status">
+            {politeMessage}
+          </div>
+          <div aria-live="assertive" aria-atomic="true" role="alert">
+            {assertiveMessage}
+          </div>
+        </div>
+
+        <Button
+          ref={buttonRef}
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between h-auto min-h-10 px-3 py-2",
+            responsiveSettings.compactMode && "min-h-8 text-sm",
+            className,
+          )}
+          id={id}
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpen(!open);
+          }}
+        >
+          <div className="flex flex-wrap gap-1">
+            {selectedOptions.length > 0 ? (
+              <>
+                {selectedOptions
+                  .slice(0, responsiveSettings.maxCount)
+                  .map((option, index) => (
+                    <Badge
+                      key={String(option.value)}
+                      className={cn(
+                        "mr-1 mb-1",
+                        getBadgeColor(index),
+                        responsiveSettings.compactMode &&
+                          "text-xs px-1.5 py-0.5",
+                      )}
+                      onClick={(e) => handleRemove(option.value, e)}
+                    >
+                      {option.icon && !responsiveSettings.compactMode && (
+                        <option.icon className="mr-2 h-4 w-4" />
+                      )}
+                      {option.label}
+                      <div
+                        role="button"
+                        tabIndex={0}
+                        className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") {
+                            handleRemove(option.value, e as any);
+                          }
+                        }}
+                        onMouseDown={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                        }}
+                        onClick={(e) => handleRemove(option.value, e)}
+                      >
+                        <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
+                      </div>
+                    </Badge>
+                  ))}
+                {value.length > responsiveSettings.maxCount && (
+                  <Badge
+                    className={cn(
+                      "mr-1 mb-1 bg-muted text-muted-foreground hover:bg-muted",
+                      responsiveSettings.compactMode && "text-xs px-1.5 py-0.5",
+                    )}
+                  >
+                    +{value.length - responsiveSettings.maxCount} more
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        clearExtraOptions();
+                      }}
+                    >
+                      <X className="h-3 w-3" />
+                    </div>
+                  </Badge>
+                )}
+              </>
+            ) : (
+              <span className="text-muted-foreground">{placeholder}</span>
+            )}
+          </div>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+
+        {open && (
+          <div
+            ref={dropdownRef}
+            className="absolute z-[100] mt-1 w-full rounded-md border bg-popover text-popover-foreground shadow-md"
+            style={{
+              top: "100%",
+              left: 0,
+            }}
+          >
+            <div className="flex flex-col">
+              {/* Search Input */}
+              <div className="flex items-center border-b px-3 py-2">
+                <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                <Input
+                  ref={searchInputRef}
+                  placeholder={searchPlaceholder}
+                  value={searchValue}
+                  onChange={(e) => {
+                    e.stopPropagation();
+                    setSearchValue(e.target.value);
+                  }}
+                  onKeyDown={(e) => {
+                    // Prevent Dialog from intercepting keyboard events
+                    e.stopPropagation();
+                    // Close dropdown on Escape
+                    if (e.key === "Escape") {
+                      e.preventDefault();
+                      setOpen(false);
+                    }
+                  }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  onFocus={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-9 bg-transparent px-0"
+                />
+                {searchValue && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 w-6 p-0"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setSearchValue("");
+                      searchInputRef.current?.focus();
+                    }}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                )}
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex items-center justify-between border-b p-1">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 px-2 text-xs"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleSelectAll();
+                  }}
+                >
+                  Select All
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 px-2 text-xs"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleClearAll();
+                  }}
+                >
+                  Clear All
+                </Button>
+              </div>
+
+              {/* Options List */}
+              <ScrollArea className="max-h-[300px]">
+                {filteredOptions.length === 0 ? (
+                  <div className="py-6 text-center text-sm text-muted-foreground">
+                    {emptyText}
+                  </div>
+                ) : (
+                  <div className="p-1">
+                    {filteredOptions.map((option) => {
+                      const isSelected = value.includes(option.value);
+                      const isDisabled = option.disabled || false;
+                      return (
+                        <div
+                          key={String(option.value)}
+                          role="option"
+                          aria-selected={isSelected}
+                          aria-disabled={isDisabled}
+                          className={cn(
+                            "relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+                            isDisabled
+                              ? "cursor-not-allowed opacity-50"
+                              : "cursor-pointer hover:bg-accent hover:text-accent-foreground",
+                            isSelected &&
+                              !isDisabled &&
+                              "bg-accent text-accent-foreground",
+                          )}
+                          onMouseDown={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                          }}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (!isDisabled) {
+                              handleSelect(option.value);
+                            }
+                          }}
+                        >
+                          <div
+                            className={cn(
+                              "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                              isSelected
+                                ? "bg-primary text-primary-foreground"
+                                : "opacity-50 [&_svg]:invisible",
+                            )}
+                          >
+                            <Check className={cn("h-4 w-4")} />
+                          </div>
+                          {option.icon && (
+                            <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                          )}
+                          <span className="flex-1 truncate">
+                            {option.label}
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </ScrollArea>
+
+              {/* Close Button */}
+              <div className="border-t p-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="w-full h-8 text-xs"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setOpen(false);
+                  }}
+                >
+                  Close
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+MultiSelect.displayName = "MultiSelect";

package/src/ui/forms/multiple-date-picker.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+import { Button } from "../primitives";
+import { Calendar } from "../primitives/client";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/client";
+
+type MultipleDatesPickerProps = Omit<
+  ComponentProps<typeof Calendar>,
+  "mode" | "selected" | "onSelect"
+> & {
+  value?: Date[];
+  onValueChange: (dates?: Date[]) => void;
+  formatStr?: string;
+  popoverContentClassName?: string;
+  popoverContentOptions?: ComponentProps<typeof PopoverContent>;
+  buttonClassName?: string;
+  buttonOptions?: ComponentProps<typeof Button>;
+  placeholder?: string;
+};
+
+export function MultipleDatesPicker({
+  value,
+  onValueChange,
+  formatStr = "yyyy-MM-dd p",
+  popoverContentClassName,
+  popoverContentOptions,
+  buttonClassName,
+  buttonOptions,
+  placeholder = "Pick dates",
+  ...props
+}: MultipleDatesPickerProps) {
+  return (
+    <Popover modal>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "w-full px-3 text-start font-normal overflow-hidden",
+            buttonClassName,
+          )}
+          {...buttonOptions}
+        >
+          {value && value.length > 0 ? (
+            <div className="truncate me-1">
+              {value.map((date) => format(date, formatStr)).join(", ")}
+            </div>
+          ) : (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
+          <CalendarIcon className="shrink-0 ms-auto h-4 w-4 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn("w-auto p-0", popoverContentClassName)}
+        align="start"
+        {...popoverContentOptions}
+      >
+        <Calendar
+          mode="multiple"
+          selected={value}
+          onSelect={onValueChange}
+          {...props}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}