@questpie/admin 0.0.1 → 1.0.1

package/src/components/primitives/select-input.tsx

@@ -1,296 +0,0 @@
-"use client";
-
-import { useState, useCallback, useMemo, useEffect, useRef } from "react";
-import { Check, CircleNotch } from "@phosphor-icons/react";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "../ui/select";
-import {
-	Combobox,
-	ComboboxInput,
-	ComboboxContent,
-	ComboboxList,
-	ComboboxItem,
-	ComboboxEmpty,
-	ComboboxChips,
-	ComboboxChip,
-	ComboboxChipsInput,
-	useComboboxAnchor,
-} from "../ui/combobox";
-import { cn } from "../../lib/utils";
-import type { SelectInputProps, SelectOption } from "./types";
-import { flattenOptions } from "./types";
-
-/**
- * Select Input Primitive
- *
- * A unified select component that supports:
- * - Single select (dropdown)
- * - Multi-select (chips)
- * - Static options
- * - Dynamic loading via loadOptions
- * - Search/filtering
- *
- * @example
- * ```tsx
- * // Single select with static options
- * <SelectInput
- *   value={status}
- *   onChange={setStatus}
- *   options={[
- *     { value: "active", label: "Active" },
- *     { value: "inactive", label: "Inactive" },
- *   ]}
- * />
- *
- * // Multi-select with dynamic loading
- * <SelectInput
- *   value={selectedTags}
- *   onChange={setSelectedTags}
- *   multiple
- *   loadOptions={async (search) => {
- *     const res = await fetch(`/api/tags?search=${search}`)
- *     return res.json()
- *   }}
- * />
- * ```
- */
-export function SelectInput<TValue extends string = string>({
-	value,
-	onChange,
-	options: staticOptions = [],
-	loadOptions,
-	multiple = false,
-	clearable = true,
-	maxSelections,
-	debounceMs = 300,
-	loading: externalLoading = false,
-	emptyMessage = "No options found",
-	placeholder = "Select...",
-	disabled,
-	className,
-	id,
-	"aria-invalid": ariaInvalid,
-}: SelectInputProps<TValue>) {
-	const [search, setSearch] = useState("");
-	const [dynamicOptions, setDynamicOptions] = useState<SelectOption<TValue>[]>(
-		[],
-	);
-	const [isLoading, setIsLoading] = useState(false);
-	const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
-	const anchorRef = useComboboxAnchor();
-
-	// Flatten static options
-	const flatStaticOptions = useMemo(
-		() => flattenOptions(staticOptions),
-		[staticOptions],
-	);
-
-	// Merge static and dynamic options
-	const allOptions = useMemo(() => {
-		if (loadOptions) {
-			return dynamicOptions;
-		}
-		return flatStaticOptions;
-	}, [loadOptions, dynamicOptions, flatStaticOptions]);
-
-	// Filter options by search (for static options)
-	const filteredOptions = useMemo(() => {
-		if (loadOptions) {
-			return allOptions; // Dynamic options are already filtered by server
-		}
-		if (!search) {
-			return allOptions;
-		}
-		return allOptions.filter((opt) =>
-			opt.label.toLowerCase().includes(search.toLowerCase()),
-		);
-	}, [allOptions, search, loadOptions]);
-
-	// Load dynamic options
-	useEffect(() => {
-		if (!loadOptions) return;
-
-		if (debounceRef.current) {
-			clearTimeout(debounceRef.current);
-		}
-
-		debounceRef.current = setTimeout(async () => {
-			setIsLoading(true);
-			try {
-				const results = await loadOptions(search);
-				setDynamicOptions(results);
-			} catch (error) {
-				console.error("Failed to load options:", error);
-				setDynamicOptions([]);
-			} finally {
-				setIsLoading(false);
-			}
-		}, debounceMs);
-
-		return () => {
-			if (debounceRef.current) {
-				clearTimeout(debounceRef.current);
-			}
-		};
-	}, [search, loadOptions, debounceMs]);
-
-	// Get label for a value
-	const getLabel = useCallback(
-		(val: TValue): string => {
-			const option = allOptions.find((opt) => opt.value === val);
-			return option?.label ?? String(val);
-		},
-		[allOptions],
-	);
-
-	// Normalize value to array for internal handling
-	const selectedValues = useMemo((): TValue[] => {
-		if (value === null || value === undefined) return [];
-		return Array.isArray(value) ? value : [value];
-	}, [value]);
-
-	// Handle selection for multi-select
-	const handleMultiSelect = useCallback(
-		(selectedValue: TValue) => {
-			const currentValues = selectedValues;
-			const isSelected = currentValues.includes(selectedValue);
-
-			if (isSelected) {
-				// Remove
-				const newValues = currentValues.filter((v) => v !== selectedValue);
-				onChange(newValues as TValue & (TValue | TValue[] | null));
-			} else {
-				// Add (check max)
-				if (maxSelections && currentValues.length >= maxSelections) return;
-				const newValues = [...currentValues, selectedValue];
-				onChange(newValues as TValue & (TValue | TValue[] | null));
-			}
-		},
-		[selectedValues, onChange, maxSelections],
-	);
-
-	// Handle removal (for multi-select chips)
-	const handleRemove = useCallback(
-		(removedValue: TValue) => {
-			const newValues = selectedValues.filter((v) => v !== removedValue);
-			onChange(newValues as TValue & (TValue | TValue[] | null));
-		},
-		[selectedValues, onChange],
-	);
-
-	const showLoading = isLoading || externalLoading;
-
-	// ==========================================================================
-	// Single Select (using shadcn Select) - only for static options
-	// ==========================================================================
-	if (!multiple && !loadOptions) {
-		return (
-			<Select
-				value={selectedValues[0] ?? ""}
-				onValueChange={(val) =>
-					onChange(val as TValue & (TValue | TValue[] | null))
-				}
-				disabled={disabled}
-			>
-				<SelectTrigger
-					id={id}
-					className={cn("w-full", className)}
-					aria-invalid={ariaInvalid}
-				>
-					<SelectValue>
-						{selectedValues[0] ? getLabel(selectedValues[0]) : placeholder}
-					</SelectValue>
-				</SelectTrigger>
-				<SelectContent>
-					{filteredOptions.map((option) => (
-						<SelectItem
-							key={String(option.value)}
-							value={String(option.value)}
-							disabled={option.disabled}
-						>
-							{option.icon}
-							{option.label}
-						</SelectItem>
-					))}
-				</SelectContent>
-			</Select>
-		);
-	}
-
-	// ==========================================================================
-	// Multi-Select or Dynamic Loading (using Combobox)
-	// ==========================================================================
-	return (
-		<Combobox
-			value={multiple ? undefined : (selectedValues[0] ?? null)}
-			onValueChange={(val) => {
-				if (val !== null && val !== undefined) {
-					if (multiple) {
-						handleMultiSelect(val as TValue);
-					} else {
-						onChange(val as TValue & (TValue | TValue[] | null));
-					}
-				}
-			}}
-			disabled={disabled}
-		>
-			{multiple ? (
-				// Multi-select with chips
-				<ComboboxChips
-					ref={anchorRef}
-					className={cn(className)}
-					aria-invalid={ariaInvalid}
-				>
-					{selectedValues.map((val) => (
-						<ComboboxChip key={String(val)}>{getLabel(val)}</ComboboxChip>
-					))}
-					<ComboboxChipsInput
-						placeholder={selectedValues.length === 0 ? placeholder : undefined}
-						value={search}
-						onChange={(e) => setSearch(e.target.value)}
-					/>
-				</ComboboxChips>
-			) : (
-				// Single select with search
-				<ComboboxInput
-					id={id}
-					placeholder={placeholder}
-					value={search}
-					onChange={(e) => setSearch(e.target.value)}
-					className={cn(className)}
-					aria-invalid={ariaInvalid}
-					showClear={clearable && selectedValues.length > 0}
-				/>
-			)}
-
-			<ComboboxContent anchor={multiple ? anchorRef : undefined}>
-				{showLoading && (
-					<div className="flex items-center justify-center py-4">
-						<CircleNotch className="size-4 animate-spin text-muted-foreground" />
-					</div>
-				)}
-				<ComboboxList>
-					{filteredOptions.map((option) => (
-						<ComboboxItem
-							key={String(option.value)}
-							value={option.value}
-							disabled={option.disabled}
-						>
-							{option.icon}
-							{option.label}
-							{multiple && selectedValues.includes(option.value) && (
-								<Check className="ml-auto size-3.5" />
-							)}
-						</ComboboxItem>
-					))}
-				</ComboboxList>
-				<ComboboxEmpty>{emptyMessage}</ComboboxEmpty>
-			</ComboboxContent>
-		</Combobox>
-	);
-}

package/src/components/primitives/tag-input.tsx

@@ -1,200 +0,0 @@
-"use client";
-
-import { useState, useCallback, KeyboardEvent } from "react";
-import { X } from "@phosphor-icons/react";
-import { Badge } from "../ui/badge";
-import { cn } from "../../lib/utils";
-import type { TagInputProps } from "./types";
-
-/**
- * Tag Input Primitive
- *
- * An input for creating and managing tags/chips.
- * Supports validation patterns, max tags, and autocomplete suggestions.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <TagInput
- *   value={tags}
- *   onChange={setTags}
- *   placeholder="Add tags..."
- * />
- *
- * // With suggestions and validation
- * <TagInput
- *   value={emails}
- *   onChange={setEmails}
- *   suggestions={["user@example.com", "admin@example.com"]}
- *   pattern={/^[^\s@]+@[^\s@]+\.[^\s@]+$/}
- *   maxTags={5}
- * />
- * ```
- */
-export function TagInput({
-	value,
-	onChange,
-	suggestions = [],
-	maxTags,
-	allowDuplicates = false,
-	pattern,
-	placeholder = "Type and press Enter...",
-	disabled,
-	className,
-	id,
-	"aria-invalid": ariaInvalid,
-}: TagInputProps) {
-	const [inputValue, setInputValue] = useState("");
-	const [showSuggestions, setShowSuggestions] = useState(false);
-
-	const addTag = useCallback(
-		(tag: string) => {
-			const trimmed = tag.trim();
-			if (!trimmed) return;
-
-			// Check max tags
-			if (maxTags && value.length >= maxTags) return;
-
-			// Check duplicates
-			if (!allowDuplicates && value.includes(trimmed)) return;
-
-			// Check pattern
-			if (pattern && !pattern.test(trimmed)) return;
-
-			onChange([...value, trimmed]);
-			setInputValue("");
-			setShowSuggestions(false);
-		},
-		[value, onChange, maxTags, allowDuplicates, pattern],
-	);
-
-	const removeTag = useCallback(
-		(index: number) => {
-			if (disabled) return;
-			const newTags = value.filter((_, i) => i !== index);
-			onChange(newTags);
-		},
-		[value, onChange, disabled],
-	);
-
-	const handleKeyDown = useCallback(
-		(e: KeyboardEvent<HTMLInputElement>) => {
-			if (e.key === "Enter") {
-				e.preventDefault();
-				addTag(inputValue);
-			} else if (e.key === "Backspace" && !inputValue && value.length > 0) {
-				removeTag(value.length - 1);
-			} else if (e.key === "Escape") {
-				setShowSuggestions(false);
-			}
-		},
-		[inputValue, value, addTag, removeTag],
-	);
-
-	const handleInputChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>) => {
-			const newValue = e.target.value;
-			setInputValue(newValue);
-			setShowSuggestions(newValue.length > 0 && suggestions.length > 0);
-		},
-		[suggestions],
-	);
-
-	const filteredSuggestions = suggestions.filter(
-		(suggestion) =>
-			suggestion.toLowerCase().includes(inputValue.toLowerCase()) &&
-			(allowDuplicates || !value.includes(suggestion)),
-	);
-
-	const canAddMore = !maxTags || value.length < maxTags;
-
-	return (
-		<div className={cn("relative", className)}>
-			<div
-				className={cn(
-					"flex flex-wrap gap-1.5 min-h-9 w-full border border-input bg-background px-3 py-2",
-					"focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-					ariaInvalid && "border-destructive ring-destructive/20",
-					disabled && "cursor-not-allowed opacity-50",
-				)}
-			>
-				{value.map((tag, index) => (
-					<Badge
-						key={`${tag}-${index}`}
-						variant="secondary"
-						className="gap-1 pr-1"
-					>
-						{tag}
-						{!disabled && (
-							<button
-								type="button"
-								onClick={() => removeTag(index)}
-								className="ml-1 rounded-full p-0.5 hover:bg-muted-foreground/20"
-								aria-label={`Remove ${tag}`}
-							>
-								<X className="size-3" />
-							</button>
-						)}
-					</Badge>
-				))}
-				{canAddMore && (
-					<input
-						id={id}
-						type="text"
-						value={inputValue}
-						onChange={handleInputChange}
-						onKeyDown={handleKeyDown}
-						onFocus={() =>
-							setShowSuggestions(
-								inputValue.length > 0 && suggestions.length > 0,
-							)
-						}
-						onBlur={() => {
-							// Delay to allow click on suggestion
-							setTimeout(() => setShowSuggestions(false), 150);
-						}}
-						placeholder={value.length === 0 ? placeholder : undefined}
-						disabled={disabled}
-						aria-invalid={ariaInvalid}
-						className={cn(
-							"flex-1 min-w-[120px] bg-transparent text-sm outline-none placeholder:text-muted-foreground",
-							"disabled:cursor-not-allowed",
-						)}
-					/>
-				)}
-			</div>
-
-			{/* Suggestions dropdown */}
-			{showSuggestions && filteredSuggestions.length > 0 && (
-				<div
-					className={cn(
-						"absolute z-50 mt-1 w-full border border-input bg-popover shadow-md",
-						"max-h-[200px] overflow-auto",
-					)}
-				>
-					{filteredSuggestions.map((suggestion, index) => (
-						<button
-							key={suggestion}
-							type="button"
-							onClick={() => addTag(suggestion)}
-							className={cn(
-								"w-full px-3 py-2 text-left text-sm",
-								"hover:bg-accent hover:text-accent-foreground",
-								"focus:bg-accent focus:text-accent-foreground focus:outline-none",
-							)}
-						>
-							{suggestion}
-						</button>
-					))}
-				</div>
-			)}
-
-			{/* Helper text for max tags */}
-			{maxTags && (
-				<p className="mt-1 text-xs text-muted-foreground">
-					{value.length} / {maxTags} tags
-				</p>
-			)}
-		</div>
-	);
-}

package/src/components/primitives/text-input.tsx

@@ -1,49 +0,0 @@
-import { Input } from "../ui/input";
-import { cn } from "../../lib/utils";
-import type { TextInputProps } from "./types";
-
-/**
- * Text Input Primitive
- *
- * A basic text input with value/onChange pattern.
- * Supports different input types: text, email, password, url, tel, search.
- *
- * @example
- * ```tsx
- * <TextInput
- *   value={email}
- *   onChange={setEmail}
- *   type="email"
- *   placeholder="Enter email"
- * />
- * ```
- */
-export function TextInput({
-	value,
-	onChange,
-	type = "text",
-	placeholder,
-	disabled,
-	readOnly,
-	maxLength,
-	autoComplete,
-	className,
-	id,
-	"aria-invalid": ariaInvalid,
-}: TextInputProps) {
-	return (
-		<Input
-			id={id}
-			type={type}
-			value={value}
-			onChange={(e) => onChange(e.target.value)}
-			placeholder={placeholder}
-			disabled={disabled}
-			readOnly={readOnly}
-			maxLength={maxLength}
-			autoComplete={autoComplete}
-			aria-invalid={ariaInvalid}
-			className={cn(className)}
-		/>
-	);
-}

package/src/components/primitives/textarea-input.tsx

@@ -1,46 +0,0 @@
-import { Textarea } from "../ui/textarea";
-import { cn } from "../../lib/utils";
-import type { TextareaInputProps } from "./types";
-
-/**
- * Textarea Input Primitive
- *
- * A multi-line text input.
- *
- * @example
- * ```tsx
- * <TextareaInput
- *   value={description}
- *   onChange={setDescription}
- *   rows={4}
- *   placeholder="Enter description..."
- * />
- * ```
- */
-export function TextareaInput({
-	value,
-	onChange,
-	rows = 3,
-	maxLength,
-	placeholder,
-	disabled,
-	readOnly,
-	className,
-	id,
-	"aria-invalid": ariaInvalid,
-}: TextareaInputProps) {
-	return (
-		<Textarea
-			id={id}
-			value={value}
-			onChange={(e) => onChange(e.target.value)}
-			rows={rows}
-			maxLength={maxLength}
-			placeholder={placeholder}
-			disabled={disabled}
-			readOnly={readOnly}
-			aria-invalid={ariaInvalid}
-			className={cn(className)}
-		/>
-	);
-}

package/src/components/primitives/toggle-input.tsx

@@ -1,36 +0,0 @@
-import { Switch } from "../ui/switch";
-import { cn } from "../../lib/utils";
-import type { ToggleInputProps } from "./types";
-
-/**
- * Toggle Input Primitive
- *
- * A switch/toggle for boolean values.
- *
- * @example
- * ```tsx
- * <ToggleInput
- *   value={isActive}
- *   onChange={setIsActive}
- * />
- * ```
- */
-export function ToggleInput({
-	value,
-	onChange,
-	disabled,
-	className,
-	id,
-	"aria-invalid": ariaInvalid,
-}: ToggleInputProps) {
-	return (
-		<Switch
-			id={id}
-			checked={value}
-			onCheckedChange={onChange}
-			disabled={disabled}
-			aria-invalid={ariaInvalid}
-			className={cn(className)}
-		/>
-	);
-}