@classytic/fluid 0.2.4 → 0.3.3

package/dist/client/hooks.mjs

@@ -0,0 +1,447 @@
+"use client";
+
+import { a as getApiParams, i as clearSearchAndFilterParams, r as buildSearchParams, t as buildFilterParams } from "../filter-utils-DqMmy_v-.mjs";
+import { t as useIsMobile } from "../use-mobile-BX3SQVo2.mjs";
+import { t as useMediaQuery } from "../use-media-query-BnVNIKT4.mjs";
+import { t as useScrollDetection } from "../use-scroll-detection-CsgsQYvy.mjs";
+import { n as useDebouncedCallback, t as useDebounce } from "../use-debounce-xmZucz5e.mjs";
+import { t as useKeyboardShortcut } from "../use-keyboard-shortcut-Bl6YM5Q7.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+//#region src/hooks/use-base-search.ts
+/**
+* Base search hook that provides common search functionality
+* Can be extended by specific search hooks for different entities
+* Supports bracket syntax: field[operator]=value
+*/
+function useBaseSearch(config) {
+	const { basePath, searchFields = {}, filterFields = {}, defaultSearchType = Object.keys(searchFields)[0] || "" } = config;
+	const router = useRouter();
+	const searchParams = useSearchParams();
+	const [searchType, setSearchType] = useState(() => {
+		for (const [type, paramName] of Object.entries(searchFields)) if (searchParams.has(paramName)) return type;
+		return defaultSearchType;
+	});
+	const [searchValue, setSearchValue] = useState(() => {
+		for (const paramName of Object.values(searchFields)) {
+			const value = searchParams.get(paramName);
+			if (value) return value;
+		}
+		return "";
+	});
+	const [filters, setFilters] = useState(() => {
+		const initialFilters = {};
+		Object.entries(filterFields).forEach(([key, fieldConfig]) => {
+			const paramValue = searchParams.get(fieldConfig.paramName);
+			if (paramValue) if (fieldConfig.type === "array") initialFilters[key] = paramValue.split(",");
+			else initialFilters[key] = paramValue;
+			else initialFilters[key] = fieldConfig.defaultValue ?? (fieldConfig.type === "array" ? [] : "");
+		});
+		return initialFilters;
+	});
+	useEffect(() => {
+		let urlType = defaultSearchType;
+		for (const [type, paramName] of Object.entries(searchFields)) if (searchParams.has(paramName)) {
+			urlType = type;
+			break;
+		}
+		setSearchType((prev) => prev === urlType ? prev : urlType);
+		let urlValue = "";
+		for (const paramName of Object.values(searchFields)) {
+			const v = searchParams.get(paramName);
+			if (v) {
+				urlValue = v;
+				break;
+			}
+		}
+		setSearchValue((prev) => prev === urlValue ? prev : urlValue);
+		const urlFilters = {};
+		Object.entries(filterFields).forEach(([key, fieldConfig]) => {
+			const paramValue = searchParams.get(fieldConfig.paramName);
+			if (paramValue) urlFilters[key] = fieldConfig.type === "array" ? paramValue.split(",") : paramValue;
+			else urlFilters[key] = fieldConfig.defaultValue ?? (fieldConfig.type === "array" ? [] : "");
+		});
+		setFilters((prev) => {
+			return Object.keys(urlFilters).some((k) => {
+				const a = prev[k];
+				const b = urlFilters[k];
+				if (a === b) return false;
+				if (Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((v, i) => v === b[i])) return false;
+				return true;
+			}) ? urlFilters : prev;
+		});
+	}, [searchParams]);
+	const stableConfig = {
+		basePath,
+		searchFields,
+		filterFields,
+		defaultSearchType
+	};
+	const handleSearch = useCallback(() => {
+		const params = new URLSearchParams(searchParams);
+		clearSearchAndFilterParams(params, stableConfig);
+		const searchParamsNew = buildSearchParams(searchType, searchValue, searchFields);
+		for (const [key, value] of searchParamsNew) params.set(key, value);
+		const filterParams = buildFilterParams(filters, filterFields);
+		for (const [key, value] of filterParams) params.set(key, value);
+		const nextQs = params.toString();
+		if (nextQs !== searchParams.toString()) router.push(nextQs ? `${basePath}?${nextQs}` : basePath);
+	}, [
+		searchType,
+		searchValue,
+		filters,
+		searchFields,
+		filterFields,
+		searchParams,
+		router,
+		basePath,
+		defaultSearchType
+	]);
+	const clearSearch = useCallback(() => {
+		const params = new URLSearchParams(searchParams);
+		clearSearchAndFilterParams(params, stableConfig);
+		setSearchValue("");
+		setSearchType(defaultSearchType);
+		const resetFilters = {};
+		Object.entries(filterFields).forEach(([key, fieldConfig]) => {
+			resetFilters[key] = fieldConfig.defaultValue ?? (fieldConfig.type === "array" ? [] : "");
+		});
+		setFilters(resetFilters);
+		const next = params.toString();
+		router.push(next ? `${basePath}?${next}` : `${basePath}`);
+	}, [
+		searchParams,
+		router,
+		basePath,
+		defaultSearchType,
+		searchFields,
+		filterFields
+	]);
+	const clearSearchValue = useCallback(() => {
+		const params = new URLSearchParams(searchParams);
+		Object.values(searchFields).forEach((paramName) => {
+			params.delete(paramName);
+		});
+		setSearchValue("");
+		setSearchType(defaultSearchType);
+		params.delete("page");
+		const next = params.toString();
+		router.push(next ? `${basePath}?${next}` : basePath);
+	}, [
+		searchParams,
+		router,
+		basePath,
+		defaultSearchType,
+		searchFields
+	]);
+	const clearFilters = useCallback(() => {
+		const params = new URLSearchParams(searchParams);
+		Object.values(filterFields).forEach((fc) => {
+			params.delete(fc.paramName);
+			const base = fc.paramName.replace(/\[.*\]$/, "");
+			params.delete(`${base}[in]`);
+		});
+		const resetFilters = {};
+		Object.entries(filterFields).forEach(([key, fieldConfig]) => {
+			resetFilters[key] = fieldConfig.defaultValue ?? (fieldConfig.type === "array" ? [] : "");
+		});
+		setFilters(resetFilters);
+		params.delete("page");
+		const next = params.toString();
+		router.push(next ? `${basePath}?${next}` : basePath);
+	}, [
+		searchParams,
+		router,
+		basePath,
+		filterFields
+	]);
+	const removeFilter = useCallback((key) => {
+		const fieldConfig = filterFields[key];
+		if (!fieldConfig) return;
+		const defaultValue = fieldConfig.defaultValue ?? (fieldConfig.type === "array" ? [] : "");
+		setFilters((prev) => ({
+			...prev,
+			[key]: defaultValue
+		}));
+		const params = new URLSearchParams(searchParams);
+		params.delete(fieldConfig.paramName);
+		const base = fieldConfig.paramName.replace(/\[.*\]$/, "");
+		params.delete(`${base}[in]`);
+		params.delete("page");
+		const next = params.toString();
+		router.push(next ? `${basePath}?${next}` : basePath);
+	}, [
+		filterFields,
+		searchParams,
+		router,
+		basePath
+	]);
+	const getSearchParamsForApi = useCallback(() => {
+		return getApiParams(searchParams);
+	}, [searchParams]);
+	return {
+		searchType,
+		setSearchType,
+		searchValue,
+		setSearchValue,
+		filters,
+		setFilters,
+		updateFilter: useCallback((key, value) => {
+			setFilters((prev) => ({
+				...prev,
+				[key]: value
+			}));
+		}, []),
+		handleSearch,
+		clearSearch,
+		clearSearchValue,
+		clearFilters,
+		removeFilter,
+		getSearchParams: getSearchParamsForApi,
+		filterFields,
+		hasActiveSearch: Object.values(searchFields).some((paramName) => {
+			return searchParams.has(paramName);
+		}),
+		hasActiveFilters: Object.values(filterFields).some((fieldConfig) => {
+			const baseField = fieldConfig.paramName.replace(/\[.*\]$/, "");
+			return searchParams.has(fieldConfig.paramName) || searchParams.has(`${baseField}[in]`) || searchParams.has(baseField);
+		})
+	};
+}
+
+//#endregion
+//#region src/hooks/use-copy-to-clipboard.ts
+/**
+* useCopyToClipboard — Copy text to clipboard with status tracking.
+*
+* @param resetDelay - How long (ms) the `copied` state stays true. Default: 2000
+*
+* @example
+* ```tsx
+* const { copy, copied } = useCopyToClipboard();
+*
+* <Button onClick={() => copy(apiKey)}>
+*   {copied ? "Copied!" : "Copy API Key"}
+* </Button>
+* ```
+*/
+function useCopyToClipboard(resetDelay = 2e3) {
+	const [copied, setCopied] = useState(false);
+	const [error, setError] = useState(null);
+	const timerRef = useRef(void 0);
+	useEffect(() => {
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, []);
+	const reset = useCallback(() => {
+		setCopied(false);
+		setError(null);
+	}, []);
+	return {
+		copy: useCallback(async (text) => {
+			if (!navigator?.clipboard) {
+				setError(/* @__PURE__ */ new Error("Clipboard API not available"));
+				return false;
+			}
+			try {
+				await navigator.clipboard.writeText(text);
+				setCopied(true);
+				setError(null);
+				if (timerRef.current) clearTimeout(timerRef.current);
+				timerRef.current = setTimeout(() => setCopied(false), resetDelay);
+				return true;
+			} catch (e) {
+				setError(e instanceof Error ? e : /* @__PURE__ */ new Error("Copy failed"));
+				setCopied(false);
+				return false;
+			}
+		}, [resetDelay]),
+		copied,
+		error,
+		reset
+	};
+}
+
+//#endregion
+//#region src/lib/storage.ts
+/**
+* A utility module for handling localStorage operations with error handling and SSR safety
+*/
+/**
+* Gets an item from localStorage with parsing and expiry check
+* @param {string} key - The key to retrieve from localStorage
+* @param {any} defaultValue - Default value to return if key doesn't exist or on error
+* @returns {any} The parsed value or defaultValue
+*/
+const getStorageItem = (key, defaultValue = null) => {
+	if (typeof window === "undefined") return defaultValue;
+	try {
+		const item = window.localStorage.getItem(key);
+		if (!item) return defaultValue;
+		const parsed = JSON.parse(item);
+		if (parsed && typeof parsed === "object" && parsed.__expiresAt) {
+			if (Date.now() > parsed.__expiresAt) {
+				window.localStorage.removeItem(key);
+				return defaultValue;
+			}
+			return parsed.value;
+		}
+		return parsed;
+	} catch (error) {
+		console.error(`Error reading localStorage key "${key}":`, error);
+		return defaultValue;
+	}
+};
+/**
+* Sets an item in localStorage with serialization and optional expiry
+* @param {string} key - The key to set in localStorage
+* @param {any} value - The value to serialize and store
+* @param {number} [ttl] - Time to live in milliseconds (optional)
+* @returns {boolean} Success status
+*/
+const setStorageItem = (key, value, ttl = null) => {
+	if (typeof window === "undefined") return false;
+	try {
+		let itemToStore = value;
+		if (ttl && typeof ttl === "number" && ttl > 0) itemToStore = {
+			value,
+			__expiresAt: Date.now() + ttl
+		};
+		window.localStorage.setItem(key, JSON.stringify(itemToStore));
+		return true;
+	} catch (error) {
+		console.error(`Error setting localStorage key "${key}":`, error);
+		return false;
+	}
+};
+/**
+* Removes an item from localStorage
+* @param {string} key - The key to remove from localStorage
+* @returns {boolean} Success status
+*/
+const removeStorageItem = (key) => {
+	if (typeof window === "undefined") return false;
+	try {
+		window.localStorage.removeItem(key);
+		return true;
+	} catch (error) {
+		console.error(`Error removing localStorage key "${key}":`, error);
+		return false;
+	}
+};
+/**
+* Clears all items from localStorage
+* @returns {boolean} Success status
+*/
+const clearStorage = () => {
+	if (typeof window === "undefined") return false;
+	try {
+		window.localStorage.clear();
+		return true;
+	} catch (error) {
+		console.error("Error clearing localStorage:", error);
+		return false;
+	}
+};
+/**
+* Checks if localStorage is empty for a specific key
+* @param {string} key - The key to check in localStorage
+* @returns {boolean} True if empty or doesn't exist
+*/
+const isStorageEmpty = (key) => {
+	const data = getStorageItem(key);
+	return !data || Array.isArray(data) && data.length === 0;
+};
+/**
+* Generates a UUID (v4)
+* Uses crypto.randomUUID() when available, with a fallback for older environments.
+* @returns {string} A random UUID
+*/
+const generateUUID = () => {
+	if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID();
+	return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+		const r = Math.random() * 16 | 0;
+		return (c === "x" ? r : r & 3 | 8).toString(16);
+	});
+};
+/**
+* Common expiry durations in milliseconds
+*/
+const TTL = {
+	MINUTE: 60 * 1e3,
+	HOUR: 3600 * 1e3,
+	DAY: 1440 * 60 * 1e3,
+	WEEK: 10080 * 60 * 1e3,
+	MONTH: 720 * 60 * 60 * 1e3
+};
+/**
+* Shorthand object for all localStorage operations
+*/
+const storage = {
+	get: getStorageItem,
+	set: setStorageItem,
+	remove: removeStorageItem,
+	clear: clearStorage,
+	isEmpty: isStorageEmpty,
+	generateUUID,
+	TTL
+};
+
+//#endregion
+//#region src/hooks/use-local-storage.ts
+/**
+* useLocalStorage — Persist state in localStorage with type safety and optional expiry.
+*
+* @param key - The localStorage key
+* @param initialValue - Default value if no stored value exists
+* @param ttl - Time to live in milliseconds (optional)
+*
+* @example
+* ```tsx
+* const [theme, setTheme] = useLocalStorage("theme", "light");
+* const [cache, setCache] = useLocalStorage("api-cache", {}, 60000); // 1 min TTL
+* ```
+*/
+function useLocalStorage(key, initialValue, ttl) {
+	const [storedValue, setStoredValue] = useState(() => {
+		const item = storage.get(key, initialValue);
+		return item !== null ? item : initialValue;
+	});
+	const keyRef = useRef(key);
+	const ttlRef = useRef(ttl);
+	useEffect(() => {
+		keyRef.current = key;
+		ttlRef.current = ttl;
+	}, [key, ttl]);
+	const setValue = useCallback((value) => {
+		setStoredValue((prev) => {
+			const nextValue = value instanceof Function ? value(prev) : value;
+			storage.set(keyRef.current, nextValue, ttlRef.current);
+			return nextValue;
+		});
+	}, []);
+	const removeValue = useCallback(() => {
+		storage.remove(keyRef.current);
+		setStoredValue(initialValue);
+	}, [initialValue]);
+	useEffect(() => {
+		const handleStorage = (e) => {
+			if (e.key === keyRef.current) {
+				const item = storage.get(keyRef.current, initialValue);
+				setStoredValue(item !== null ? item : initialValue);
+			}
+		};
+		window.addEventListener("storage", handleStorage);
+		return () => window.removeEventListener("storage", handleStorage);
+	}, [initialValue]);
+	return [
+		storedValue,
+		setValue,
+		removeValue
+	];
+}
+
+//#endregion
+export { TTL, clearStorage, generateUUID, getStorageItem, isStorageEmpty, removeStorageItem, setStorageItem, storage, useBaseSearch, useCopyToClipboard, useDebounce, useDebouncedCallback, useIsMobile, useKeyboardShortcut, useLocalStorage, useMediaQuery, useScrollDetection };

package/dist/client/table.d.mts

@@ -0,0 +1,84 @@
+import { n as ApiPaginationData } from "../api-pagination-CJ0vR_w6.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React, { ReactNode } from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+//#region src/components/data-table.d.ts
+interface DataTablePaginationProps extends Partial<ApiPaginationData> {
+  onPageChange?: (page: number) => void;
+}
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  isLoading?: boolean;
+  pagination?: DataTablePaginationProps;
+  enableSorting?: boolean;
+  enableRowSelection?: boolean;
+  onRowSelectionChange?: (selectedRows: TData[]) => void;
+  className?: string;
+  /** Custom loading state renderer */
+  loadingState?: React.ReactNode;
+  /** Custom empty state renderer */
+  emptyState?: React.ReactNode;
+}
+declare function DataTable<TData, TValue>({
+  columns,
+  data,
+  isLoading,
+  pagination,
+  enableSorting,
+  enableRowSelection,
+  onRowSelectionChange,
+  className,
+  loadingState: customLoadingState,
+  emptyState: customEmptyState
+}: DataTableProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/data-table-toolbar.d.ts
+interface DataTableToolbarProps {
+  children?: ReactNode;
+  className?: string;
+  showSearch?: boolean;
+  searchPlaceholder?: string;
+  showFilters?: boolean;
+  filterContent?: ReactNode;
+  filterTitle?: string;
+  selectedCount?: number;
+  bulkActions?: ReactNode;
+  totalResults?: number;
+  showResultCount?: boolean;
+}
+/**
+ * DataTableToolbar - Composable toolbar with search, filters, and bulk actions
+ *
+ * Must be used inside a `Search.Root` context.
+ *
+ * @example
+ * ```tsx
+ * <Search.Root hook={searchHook}>
+ *   <DataTableToolbar
+ *     searchPlaceholder="Search users..."
+ *     filterContent={<SelectInput name="role" items={roles} />}
+ *     totalResults={data?.total}
+ *     selectedCount={selected.length}
+ *     bulkActions={<Button variant="destructive">Delete</Button>}
+ *   />
+ *   <DataTable columns={columns} data={data?.items ?? []} />
+ * </Search.Root>
+ * ```
+ */
+declare function DataTableToolbar({
+  children,
+  className,
+  showSearch,
+  searchPlaceholder,
+  showFilters,
+  filterContent,
+  filterTitle,
+  selectedCount,
+  bulkActions,
+  totalResults,
+  showResultCount
+}: DataTableToolbarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DataTable, type DataTablePaginationProps, type DataTableProps, DataTableToolbar, type DataTableToolbarProps };