startx 0.0.1

package/packages/ui/src/components/ui/multiple-select.tsx

@@ -0,0 +1,510 @@
+/* eslint-disable local-rules/no-json-parse-json-stringify */
+"use client";
+
+import { Command as CommandPrimitive, useCommandState } from "cmdk";
+import { X } from "lucide-react";
+import * as React from "react";
+import { forwardRef, useEffect } from "react";
+
+import { Command, CommandGroup, CommandItem, CommandList } from "./command";
+import { cn } from "../lib/utils";
+import { Badge } from "../ui/badge";
+
+export interface Option {
+	value: string;
+	label: string;
+	disable?: boolean;
+	/** fixed option that can't be removed. */
+	fixed?: boolean;
+	/** Group the options by providing key. */
+	[key: string]: string | boolean | undefined;
+}
+interface GroupOption {
+	[key: string]: Option[];
+}
+
+interface MultipleSelectorProps {
+	value?: Option[];
+	defaultOptions?: Option[];
+	/** manually controlled options */
+	options?: Option[];
+	placeholder?: string;
+	/** Loading component. */
+	loadingIndicator?: React.ReactNode;
+	/** Empty component. */
+	emptyIndicator?: React.ReactNode;
+	/** Debounce time for async search. Only work with `onSearch`. */
+	delay?: number;
+	/**
+	 * Only work with `onSearch` prop. Trigger search when `onFocus`.
+	 * For example, when user click on the input, it will trigger the search to get initial options.
+	 **/
+	triggerSearchOnFocus?: boolean;
+	/** async search */
+	onSearch?: (value: string) => Promise<Option[]>;
+	onChange?: (options: Option[]) => void;
+	/** Limit the maximum number of selected options. */
+	maxSelected?: number;
+	/** When the number of selected options exceeds the limit, the onMaxSelected will be called. */
+	onMaxSelected?: (maxLimit: number) => void;
+	/** Hide the placeholder when there are options selected. */
+	hidePlaceholderWhenSelected?: boolean;
+	disabled?: boolean;
+	/** Group the options base on provided key. */
+	groupBy?: string;
+	className?: string;
+	badgeClassName?: string;
+	/**
+	 * First item selected is a default behavior by cmdk. That is why the default is true.
+	 * This is a workaround solution by add a dummy item.
+	 *
+	 * @reference: https://github.com/pacocoursey/cmdk/issues/171
+	 */
+	selectFirstItem?: boolean;
+	/** Allow user to create option when there is no option matched. */
+	creatable?: boolean;
+	/** Props of `Command` */
+	commandProps?: React.ComponentPropsWithoutRef<typeof Command>;
+	/** Props of `CommandInput` */
+	inputProps?: Omit<
+		React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,
+		"value" | "placeholder" | "disabled"
+	>;
+}
+
+export interface MultipleSelectorRef {
+	selectedValue: Option[];
+	input: HTMLInputElement;
+}
+
+export function useDebounce<T>(value: T, delay?: number): T {
+	const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
+
+	useEffect(() => {
+		const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500);
+
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [value, delay]);
+
+	return debouncedValue;
+}
+
+function transToGroupOption(options: Option[], groupBy?: string) {
+	if (options.length === 0) {
+		return {};
+	}
+	if (!groupBy) {
+		return {
+			"": options,
+		};
+	}
+
+	const groupOption: GroupOption = {};
+	options.forEach(option => {
+		const key = (option[groupBy] as string) || "";
+		if (!groupOption[key]) {
+			groupOption[key] = [];
+		}
+		groupOption[key].push(option);
+	});
+	return groupOption;
+}
+
+function removePickedOption(groupOption: GroupOption, picked: Option[]) {
+	const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption;
+
+	for (const [key, value] of Object.entries(cloneOption)) {
+		cloneOption[key] = value.filter(val => !picked.find(p => p.value === val.value));
+	}
+	return cloneOption;
+}
+
+function isOptionsExist(groupOption: GroupOption, targetOption: Option[]) {
+	for (const [key, value] of Object.entries(groupOption)) {
+		if (value.some(option => targetOption.find(p => p.value === option.value))) {
+			return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * The `CommandEmpty` of shadcn/ui will cause the cmdk empty not rendering correctly.
+ * So we create one and copy the `Empty` implementation from `cmdk`.
+ *
+ * @reference: https://github.com/hsuanyi-chou/shadcn-ui-expansions/issues/34#issuecomment-1949561607
+ **/
+const CommandEmpty = forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, forwardedRef) => {
+	const render = useCommandState(state => state.filtered.count === 0);
+
+	if (!render) return null;
+
+	return (
+		<div
+			ref={forwardedRef}
+			className={cn("py-6 text-center text-sm", className)}
+			// cmdk-empty=""
+			role="presentation"
+			{...props}
+		/>
+	);
+});
+
+CommandEmpty.displayName = "CommandEmpty";
+
+const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorProps>(
+	(
+		{
+			value,
+			onChange,
+			placeholder,
+			defaultOptions: arrayDefaultOptions = [],
+			options: arrayOptions,
+			delay,
+			onSearch,
+			loadingIndicator,
+			emptyIndicator,
+			maxSelected = Number.MAX_SAFE_INTEGER,
+			onMaxSelected,
+			hidePlaceholderWhenSelected,
+			disabled,
+			groupBy,
+			className,
+			badgeClassName,
+			selectFirstItem = true,
+			creatable = false,
+			triggerSearchOnFocus = false,
+			commandProps,
+			inputProps,
+		}: MultipleSelectorProps,
+		ref: React.Ref<MultipleSelectorRef>
+	) => {
+		const inputRef = React.useRef<HTMLInputElement>(null);
+		const [open, setOpen] = React.useState(false);
+		const [isLoading, setIsLoading] = React.useState(false);
+
+		const [selected, setSelected] = React.useState<Option[]>(value ?? []);
+		const [options, setOptions] = React.useState<GroupOption>(
+			transToGroupOption(arrayDefaultOptions, groupBy)
+		);
+		const [inputValue, setInputValue] = React.useState("");
+		const debouncedSearchTerm = useDebounce(inputValue, delay ?? 500);
+
+		React.useImperativeHandle(
+			ref,
+			() => ({
+				selectedValue: [...selected],
+				input: inputRef.current as HTMLInputElement,
+				focus: () => inputRef.current?.focus(),
+			}),
+			[selected]
+		);
+
+		const handleUnselect = React.useCallback(
+			(option: Option) => {
+				const newOptions = selected.filter(s => s.value !== option.value);
+				setSelected(newOptions);
+				onChange?.(newOptions);
+			},
+			[onChange, selected]
+		);
+
+		const handleKeyDown = React.useCallback(
+			(e: React.KeyboardEvent<HTMLDivElement>) => {
+				const input = inputRef.current;
+				if (input) {
+					if (e.key === "Delete" || e.key === "Backspace") {
+						if (input.value === "" && selected.length > 0) {
+							const value = selected[selected.length - 1];
+							if (value) {
+								handleUnselect(value);
+							}
+						}
+					}
+					// This is not a default behavior of the <input /> field
+					if (e.key === "Escape") {
+						input.blur();
+					}
+				}
+			},
+			[handleUnselect, selected]
+		);
+
+		useEffect(() => {
+			if (value) {
+				setSelected(value);
+			}
+		}, [value]);
+
+		useEffect(() => {
+			/** If `onSearch` is provided, do not trigger options updated. */
+			if (!arrayOptions || onSearch) {
+				return;
+			}
+			const newOption = transToGroupOption(arrayOptions || [], groupBy);
+			if (JSON.stringify(newOption) !== JSON.stringify(options)) {
+				setOptions(newOption);
+			}
+		}, [arrayDefaultOptions, arrayOptions, groupBy, onSearch, options]);
+
+		useEffect(() => {
+			const doSearch = async () => {
+				setIsLoading(true);
+				const res = await onSearch?.(debouncedSearchTerm);
+				setOptions(transToGroupOption(res ?? [], groupBy));
+				setIsLoading(false);
+			};
+
+			const exec = async () => {
+				if (!onSearch || !open) return;
+
+				if (triggerSearchOnFocus) {
+					await doSearch();
+				}
+
+				if (debouncedSearchTerm) {
+					await doSearch();
+				}
+			};
+
+			void exec();
+		}, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus]);
+
+		const CreatableItem = () => {
+			if (!creatable) return undefined;
+			if (
+				isOptionsExist(options, [{ value: inputValue, label: inputValue }]) ||
+				selected.find(s => s.value === inputValue)
+			) {
+				return undefined;
+			}
+
+			const Item = (
+				<CommandItem
+					value={inputValue}
+					className="cursor-pointer"
+					onMouseDown={e => {
+						e.preventDefault();
+						e.stopPropagation();
+					}}
+					onSelect={(value: string) => {
+						if (selected.length >= maxSelected) {
+							onMaxSelected?.(selected.length);
+							return;
+						}
+						setInputValue("");
+						const newOptions = [...selected, { value, label: value }];
+						setSelected(newOptions);
+						onChange?.(newOptions);
+					}}
+				>
+					{`Create "${inputValue}"`}
+				</CommandItem>
+			);
+
+			// For normal creatable
+			if (!onSearch && inputValue.length > 0) {
+				return Item;
+			}
+
+			// For async search creatable. avoid showing creatable item before loading at first.
+			if (onSearch && debouncedSearchTerm.length > 0 && !isLoading) {
+				return Item;
+			}
+
+			return undefined;
+		};
+
+		const EmptyItem = React.useCallback(() => {
+			if (!emptyIndicator) return undefined;
+
+			// For async search that showing emptyIndicator
+			if (onSearch && !creatable && Object.keys(options).length === 0) {
+				return (
+					<CommandItem value="-" disabled>
+						{emptyIndicator}
+					</CommandItem>
+				);
+			}
+
+			return <CommandEmpty>{emptyIndicator}</CommandEmpty>;
+		}, [creatable, emptyIndicator, onSearch, options]);
+
+		const selectables = React.useMemo<GroupOption>(
+			() => removePickedOption(options, selected),
+			[options, selected]
+		);
+
+		/** Avoid Creatable Selector freezing or lagging when paste a long string. */
+		const commandFilter = React.useCallback(() => {
+			if (commandProps?.filter) {
+				return commandProps.filter;
+			}
+
+			if (creatable) {
+				return (value: string, search: string) => {
+					return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;
+				};
+			}
+			// Using default filter in `cmdk`. We don't have to provide it.
+			return undefined;
+		}, [creatable, commandProps?.filter]);
+
+		return (
+			<Command
+				{...commandProps}
+				onKeyDown={e => {
+					handleKeyDown(e);
+					commandProps?.onKeyDown?.(e);
+				}}
+				className={cn("h-auto max-h-fit overflow-visible  bg-transparent", commandProps?.className)}
+				shouldFilter={
+
+					commandProps?.shouldFilter !== undefined ? commandProps.shouldFilter : !onSearch
+				} // When onSearch is provided, we don't want to filter the options. You can still override it.
+				filter={commandFilter()}
+			>
+				<div
+					className={cn(
+						" rounded-md border border-input text-sm ring-offset-background focus-within:ring-2 focus-within:border-primary focus-within:ring-ring/50 focus-within:ring-offset-0",
+						" placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex  w-full min-w-0 rounded-md border bg-transparent  text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+						"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+						"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+						{
+							"px-3 py-2": selected.length !== 0,
+							"cursor-text": !disabled && selected.length !== 0,
+						},
+						className
+					)}
+					onClick={() => {
+						if (disabled) return;
+						inputRef.current?.focus();
+					}}
+				>
+					<div className="flex flex-wrap gap-1">
+						{selected.map(option => {
+							return (
+								<Badge
+									key={option.value}
+									className={cn(
+										"data-[disabled]:bg-muted-foreground data-[disabled]:text-muted data-[disabled]:hover:bg-muted-foreground cursor-default",
+										"data-[fixed]:bg-muted-foreground data-[fixed]:text-muted data-[fixed]:hover:bg-muted-foreground",
+										badgeClassName
+									)}
+									data-fixed={option.fixed}
+									data-disabled={disabled ?? undefined}
+								>
+									{option.label}
+									<button
+										className={cn(
+											"ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer",
+											(disabled ?? option.fixed) && "hidden"
+										)}
+										onKeyDown={e => {
+											if (e.key === "Enter") {
+												handleUnselect(option);
+											}
+										}}
+										onMouseDown={e => {
+											e.preventDefault();
+											e.stopPropagation();
+										}}
+										onClick={() => handleUnselect(option)}
+									>
+										<X className="h-3 w-3 text-white hover:text-foreground" />
+									</button>
+								</Badge>
+							);
+						})}
+						{/* Avoid having the "Search" Icon */}
+						<CommandPrimitive.Input
+							{...inputProps}
+							ref={inputRef}
+							value={inputValue}
+							disabled={disabled}
+							onValueChange={value => {
+								setInputValue(value);
+								inputProps?.onValueChange?.(value);
+							}}
+							onBlur={event => {
+								setOpen(false);
+								inputProps?.onBlur?.(event);
+							}}
+							onFocus={async event => {
+								setOpen(true);
+								if (triggerSearchOnFocus) await onSearch?.(debouncedSearchTerm);
+								inputProps?.onFocus?.(event);
+							}}
+							placeholder={hidePlaceholderWhenSelected && selected.length !== 0 ? "" : placeholder}
+							className={cn(
+								"flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+								{
+									"w-full": hidePlaceholderWhenSelected,
+									"px-3 py-2": selected.length === 0,
+									"ml-1": selected.length !== 0,
+								},
+								inputProps?.className
+							)}
+						/>
+					</div>
+				</div>
+				<div className="relative">
+					{open ? <CommandList className="absolute top-1 z-10 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
+							{isLoading ? (
+								<>{loadingIndicator}</>
+							) : (
+								<>
+									{EmptyItem()}
+									{CreatableItem()}
+									{!selectFirstItem && <CommandItem value="-" className="hidden" />}
+									{Object.entries(selectables).map(([key, dropdowns]) => (
+										<CommandGroup key={key} heading={key} className="h-full overflow-auto">
+											<>
+												{dropdowns.map(option => {
+													return (
+														<CommandItem
+															key={option.value}
+															value={option.value}
+															disabled={option.disable}
+															onMouseDown={e => {
+																e.preventDefault();
+																e.stopPropagation();
+															}}
+															onSelect={() => {
+																if (selected.length >= maxSelected) {
+																	onMaxSelected?.(selected.length);
+																	return;
+																}
+																setInputValue("");
+																const newOptions = [...selected, option];
+																setSelected(newOptions);
+																onChange?.(newOptions);
+															}}
+															className={cn(
+																"cursor-pointer",
+																option.disable && "cursor-default text-muted-foreground"
+															)}
+														>
+															{option.label}
+														</CommandItem>
+													);
+												})}
+											</>
+										</CommandGroup>
+									))}
+								</>
+							)}
+						</CommandList> : null}
+				</div>
+			</Command>
+		);
+	}
+);
+
+MultipleSelector.displayName = "MultipleSelector";
+export { MultipleSelector };

package/packages/ui/src/components/ui/popover.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import type * as React from 'react';
+
+import { cn } from '../lib/utils';
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+	className,
+	align = 'center',
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Content
+				data-slot="popover-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+					className,
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	);
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };