nucleus-core-ts 0.8.6 → 0.8.8

package/dist/fe/components/SearchBox/components/SearchBox.js

@@ -0,0 +1,271 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useEffect, useId, useRef, useState } from "react";
+import { searchBoxTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { debounce } from "../utils/debounce";
+import { sanitizeSearchQuery } from "../utils/sanitize";
+import { SearchBoxDropdown } from "./SearchBoxDropdown";
+gsap.registerPlugin(useGSAP);
+export function SearchBox({ value, onChange, onSearch, results, renderItem, onSelect, placeholder = "Search...", label, debounceMs = 300, minSearchLength = 1, disabled = false, loading = false, emptyMessage = "No results found", className, inputClassName, dropdownClassName, itemClassName, showClearButton = true, leftIcon, rightIcon, disableDropdown = false, showSearchIcon = true, maxLength = 200, sanitize = true, trimOnSearch = true, preventXSS = true }) {
+    const [isFocused, setIsFocused] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const [dropdownPosition, setDropdownPosition] = useState("bottom");
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const containerRef = useRef(null);
+    const debounceRef = useRef(null);
+    const onSearchRef = useRef(onSearch);
+    const inputId = useId();
+    onSearchRef.current = onSearch;
+    const theme = searchBoxTheme;
+    const showDropdown = !disableDropdown && isFocused && results !== undefined && results.length >= 0 && value.length >= minSearchLength;
+    const { contextSafe } = useGSAP({
+        scope: wrapperRef
+    });
+    useEffect(()=>{
+        debounceRef.current = debounce((query)=>{
+            if (query.length >= minSearchLength || query.length === 0) {
+                const sanitizedQuery = sanitize ? sanitizeSearchQuery(query, {
+                    trim: trimOnSearch,
+                    escapeHtml: preventXSS,
+                    maxLength,
+                    removeScripts: true
+                }) : query;
+                onSearchRef.current(sanitizedQuery);
+            }
+        }, debounceMs);
+        return ()=>{
+            debounceRef.current?.cancel();
+        };
+    }, [
+        debounceMs,
+        minSearchLength,
+        sanitize,
+        trimOnSearch,
+        preventXSS,
+        maxLength
+    ]);
+    useEffect(()=>{
+        if (!showDropdown) return;
+        const updatePosition = ()=>{
+            if (!containerRef.current) return;
+            const rect = containerRef.current.getBoundingClientRect();
+            const spaceBelow = window.innerHeight - rect.bottom;
+            const spaceAbove = rect.top;
+            const dropdownHeight = 256;
+            if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+                setDropdownPosition("top");
+            } else {
+                setDropdownPosition("bottom");
+            }
+        };
+        updatePosition();
+        window.addEventListener("scroll", updatePosition, true);
+        window.addEventListener("resize", updatePosition);
+        return ()=>{
+            window.removeEventListener("scroll", updatePosition, true);
+            window.removeEventListener("resize", updatePosition);
+        };
+    }, [
+        showDropdown
+    ]);
+    useEffect(()=>{
+        setActiveIndex(-1);
+    }, [
+        results
+    ]);
+    const handleFocus = contextSafe(()=>{
+        if (disabled) return;
+        setIsFocused(true);
+        if (wrapperRef.current) {
+            gsap.to(wrapperRef.current, {
+                scale: 1.01,
+                duration: 0.15,
+                ease: "power2.out"
+            });
+        }
+    });
+    const handleBlur = contextSafe(()=>{
+        setTimeout(()=>{
+            setIsFocused(false);
+            setActiveIndex(-1);
+        }, 150);
+        if (wrapperRef.current) {
+            gsap.to(wrapperRef.current, {
+                scale: 1,
+                duration: 0.15,
+                ease: "power2.out"
+            });
+        }
+    });
+    const handleChange = (e)=>{
+        const newValue = e.target.value;
+        onChange(newValue);
+        debounceRef.current?.call(newValue);
+    };
+    const handleClear = contextSafe(()=>{
+        onChange("");
+        debounceRef.current?.call("");
+        inputRef.current?.focus();
+        if (wrapperRef.current) {
+            gsap.fromTo(wrapperRef.current, {
+                scale: 0.98
+            }, {
+                scale: 1,
+                duration: 0.2,
+                ease: "elastic.out(1, 0.5)"
+            });
+        }
+    });
+    const handleKeyDown = (e)=>{
+        if (!results || results.length === 0) return;
+        switch(e.key){
+            case "ArrowDown":
+                e.preventDefault();
+                setActiveIndex((prev)=>prev < results.length - 1 ? prev + 1 : 0);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                setActiveIndex((prev)=>prev > 0 ? prev - 1 : results.length - 1);
+                break;
+            case "Enter":
+                {
+                    e.preventDefault();
+                    const selectedItem = results[activeIndex];
+                    if (activeIndex >= 0 && activeIndex < results.length && selectedItem) {
+                        handleSelect(selectedItem);
+                    }
+                    break;
+                }
+            case "Escape":
+                e.preventDefault();
+                setIsFocused(false);
+                inputRef.current?.blur();
+                break;
+        }
+    };
+    const handleSelect = (item)=>{
+        onSelect?.(item);
+        setIsFocused(false);
+        setActiveIndex(-1);
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: containerRef,
+        className: cn(theme.container.base, theme.container.spacing, className),
+        children: [
+            label && /*#__PURE__*/ _jsx("label", {
+                htmlFor: inputId,
+                className: cn(theme.label.base, theme.label.text.size, theme.label.text.color.light, theme.label.text.color.dark, theme.label.spacing),
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "relative",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        ref: wrapperRef,
+                        className: cn(theme.wrapper.base, theme.wrapper.border.base, theme.wrapper.background.light, theme.wrapper.background.dark, theme.wrapper.padding.md, theme.wrapper.rounded, theme.wrapper.shadow, theme.wrapper.transition, isFocused && theme.wrapper.border.focused, disabled && theme.wrapper.border.disabled),
+                        children: [
+                            (leftIcon || showSearchIcon) && /*#__PURE__*/ _jsx("span", {
+                                className: cn(theme.icon.base, theme.icon.size.md, theme.icon.color.light, theme.icon.color.dark, theme.icon.spacing.left, isFocused && theme.icon.color.focused),
+                                children: leftIcon || /*#__PURE__*/ _jsxs("svg", {
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    viewBox: "0 0 24 24",
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    strokeWidth: "2",
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round",
+                                    className: "w-full h-full",
+                                    "aria-hidden": "true",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("circle", {
+                                            cx: "11",
+                                            cy: "11",
+                                            r: "8"
+                                        }),
+                                        /*#__PURE__*/ _jsx("path", {
+                                            d: "m21 21-4.3-4.3"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                ref: inputRef,
+                                id: inputId,
+                                type: "text",
+                                value: value,
+                                onChange: handleChange,
+                                onFocus: handleFocus,
+                                onBlur: handleBlur,
+                                onKeyDown: handleKeyDown,
+                                disabled: disabled,
+                                placeholder: placeholder,
+                                maxLength: maxLength,
+                                autoComplete: "off",
+                                spellCheck: false,
+                                autoCapitalize: "off",
+                                autoCorrect: "off",
+                                "aria-label": label || placeholder,
+                                role: "combobox",
+                                "aria-expanded": showDropdown,
+                                "aria-autocomplete": "list",
+                                "aria-haspopup": "listbox",
+                                className: cn(theme.input.base, theme.input.text.size, theme.input.text.color.light, theme.input.text.color.dark, theme.input.placeholder.light, theme.input.placeholder.dark, inputClassName)
+                            }),
+                            showClearButton && value && /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: handleClear,
+                                className: cn(theme.clearButton.base, theme.clearButton.size, theme.clearButton.color.light, theme.clearButton.color.dark, theme.clearButton.color.hover, theme.clearButton.transition),
+                                "aria-label": "Clear search",
+                                children: /*#__PURE__*/ _jsxs("svg", {
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    viewBox: "0 0 24 24",
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    strokeWidth: "2",
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round",
+                                    className: "w-full h-full",
+                                    "aria-hidden": "true",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("line", {
+                                            x1: "18",
+                                            y1: "6",
+                                            x2: "6",
+                                            y2: "18"
+                                        }),
+                                        /*#__PURE__*/ _jsx("line", {
+                                            x1: "6",
+                                            y1: "6",
+                                            x2: "18",
+                                            y2: "18"
+                                        })
+                                    ]
+                                })
+                            }),
+                            rightIcon && /*#__PURE__*/ _jsx("span", {
+                                className: cn(theme.icon.base, theme.icon.size.md, theme.icon.color.light, theme.icon.color.dark, theme.icon.spacing.right, isFocused && theme.icon.color.focused),
+                                children: rightIcon
+                            })
+                        ]
+                    }),
+                    showDropdown && /*#__PURE__*/ _jsx(SearchBoxDropdown, {
+                        results: results,
+                        renderItem: renderItem,
+                        onSelect: handleSelect,
+                        loading: loading,
+                        emptyMessage: emptyMessage,
+                        className: dropdownClassName,
+                        itemClassName: itemClassName,
+                        position: dropdownPosition,
+                        activeIndex: activeIndex,
+                        onActiveIndexChange: setActiveIndex
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/fe/components/SearchBox/components/SearchBoxDropdown.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useRef } from "react";
+import { searchBoxTheme } from "../theme";
+import { cn } from "../utils/cn";
+gsap.registerPlugin(useGSAP);
+export function SearchBoxDropdown({ results, renderItem, onSelect, loading = false, emptyMessage = "No results found", className, itemClassName, position, activeIndex, onActiveIndexChange }) {
+    const dropdownRef = useRef(null);
+    const theme = searchBoxTheme;
+    useGSAP(()=>{
+        if (!dropdownRef.current) return;
+        gsap.fromTo(dropdownRef.current, {
+            opacity: 0,
+            y: position === "bottom" ? -8 : 8,
+            scale: 0.98
+        }, {
+            opacity: 1,
+            y: 0,
+            scale: 1,
+            duration: 0.2,
+            ease: "power2.out"
+        });
+    }, [
+        position
+    ]);
+    const handleItemClick = (item)=>{
+        onSelect?.(item);
+    };
+    const handleItemMouseEnter = (index)=>{
+        onActiveIndexChange(index);
+    };
+    const defaultRenderItem = (item)=>/*#__PURE__*/ _jsx("span", {
+            children: String(item.data)
+        });
+    if (loading) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: cn(theme.dropdown.base, theme.dropdown.background.light, theme.dropdown.background.dark, theme.dropdown.border.light, theme.dropdown.border.dark, theme.dropdown.rounded, theme.dropdown.shadow, position === "top" && theme.dropdown.position.top, position === "top" && theme.dropdown.spacing.top, position === "bottom" && theme.dropdown.position.bottom, position === "bottom" && theme.dropdown.spacing.bottom, className),
+            children: /*#__PURE__*/ _jsx("div", {
+                className: theme.loading.base,
+                children: /*#__PURE__*/ _jsxs("svg", {
+                    className: cn(theme.loading.size, theme.loading.color, "animate-spin"),
+                    xmlns: "http://www.w3.org/2000/svg",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    "aria-hidden": "true",
+                    children: [
+                        /*#__PURE__*/ _jsx("circle", {
+                            className: "opacity-25",
+                            cx: "12",
+                            cy: "12",
+                            r: "10",
+                            stroke: "currentColor",
+                            strokeWidth: "4"
+                        }),
+                        /*#__PURE__*/ _jsx("path", {
+                            className: "opacity-75",
+                            fill: "currentColor",
+                            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        })
+                    ]
+                })
+            })
+        });
+    }
+    if (results.length === 0) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: cn(theme.dropdown.base, theme.dropdown.background.light, theme.dropdown.background.dark, theme.dropdown.border.light, theme.dropdown.border.dark, theme.dropdown.rounded, theme.dropdown.shadow, position === "top" && theme.dropdown.position.top, position === "top" && theme.dropdown.spacing.top, position === "bottom" && theme.dropdown.position.bottom, position === "bottom" && theme.dropdown.spacing.bottom, className),
+            children: /*#__PURE__*/ _jsx("div", {
+                className: cn(theme.empty.base, theme.empty.text.size, theme.empty.text.color.light, theme.empty.text.color.dark, theme.empty.padding),
+                children: emptyMessage
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        ref: dropdownRef,
+        className: cn(theme.dropdown.base, theme.dropdown.background.light, theme.dropdown.background.dark, theme.dropdown.border.light, theme.dropdown.border.dark, theme.dropdown.rounded, theme.dropdown.shadow, theme.dropdown.maxHeight, position === "top" && theme.dropdown.position.top, position === "top" && theme.dropdown.spacing.top, position === "bottom" && theme.dropdown.position.bottom, position === "bottom" && theme.dropdown.spacing.bottom, className),
+        children: results.map((item, index)=>/*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: ()=>handleItemClick(item),
+                onMouseEnter: ()=>handleItemMouseEnter(index),
+                className: cn("w-full text-left", theme.item.base, theme.item.padding, theme.item.text.size, theme.item.text.color.light, theme.item.text.color.dark, theme.item.hover.light, theme.item.hover.dark, theme.item.transition, theme.item.rounded, activeIndex === index && theme.item.active.light, activeIndex === index && theme.item.active.dark, itemClassName),
+                children: renderItem ? renderItem(item, index) : defaultRenderItem(item)
+            }, item.id))
+    });
+}

package/dist/fe/components/SearchBox/index.js

@@ -0,0 +1,5 @@
+export { SearchBox } from "./components/SearchBox";
+export { SearchBoxDropdown } from "./components/SearchBoxDropdown";
+export { extendSearchBoxTheme, searchBoxTheme } from "./theme";
+export { debounce } from "./utils/debounce";
+export { escapeHtml, sanitizeInput, sanitizeSearchQuery } from "./utils/sanitize";

package/dist/fe/components/SearchBox/theme/index.js

@@ -0,0 +1,184 @@
+export const searchBoxTheme = {
+    container: {
+        base: "relative flex flex-col",
+        spacing: "gap-1"
+    },
+    wrapper: {
+        base: "relative flex items-center w-full",
+        border: {
+            base: "border border-gray-300 dark:border-gray-600",
+            focused: "border-blue-500 dark:border-blue-400 ring-2 ring-blue-500/20",
+            error: "border-red-500 dark:border-red-400",
+            disabled: "border-gray-200 dark:border-gray-700"
+        },
+        background: {
+            light: "bg-white",
+            dark: "dark:bg-gray-800"
+        },
+        padding: {
+            sm: "px-3 py-2",
+            md: "px-4 py-3",
+            lg: "px-5 py-4"
+        },
+        rounded: "rounded-lg",
+        shadow: "shadow-sm",
+        transition: "transition-all duration-200 ease-out"
+    },
+    input: {
+        base: "flex-1 bg-transparent border-none outline-none w-full",
+        text: {
+            size: "text-base",
+            color: {
+                light: "text-gray-900",
+                dark: "dark:text-white"
+            }
+        },
+        placeholder: {
+            light: "placeholder:text-gray-400",
+            dark: "dark:placeholder:text-gray-500"
+        }
+    },
+    label: {
+        base: "block",
+        text: {
+            size: "text-sm font-medium",
+            color: {
+                light: "text-gray-700",
+                dark: "dark:text-gray-300"
+            }
+        },
+        spacing: "mb-1.5"
+    },
+    icon: {
+        base: "flex items-center justify-center flex-shrink-0",
+        size: {
+            sm: "w-4 h-4",
+            md: "w-5 h-5",
+            lg: "w-6 h-6"
+        },
+        color: {
+            light: "text-gray-400",
+            dark: "dark:text-gray-500",
+            focused: "text-blue-500 dark:text-blue-400"
+        },
+        spacing: {
+            left: "mr-3",
+            right: "ml-3"
+        }
+    },
+    clearButton: {
+        base: "flex items-center justify-center cursor-pointer",
+        size: "w-5 h-5",
+        color: {
+            light: "text-gray-400",
+            dark: "dark:text-gray-500",
+            hover: "hover:text-gray-600 dark:hover:text-gray-300"
+        },
+        transition: "transition-colors duration-150"
+    },
+    dropdown: {
+        base: "absolute left-0 right-0 z-50 overflow-hidden",
+        background: {
+            light: "bg-white",
+            dark: "dark:bg-gray-800"
+        },
+        border: {
+            light: "border border-gray-200",
+            dark: "dark:border-gray-700"
+        },
+        rounded: "rounded-lg",
+        shadow: "shadow-lg",
+        maxHeight: "max-h-64 overflow-y-auto",
+        spacing: {
+            top: "mb-2",
+            bottom: "mt-2"
+        },
+        position: {
+            top: "bottom-full",
+            bottom: "top-full"
+        }
+    },
+    item: {
+        base: "cursor-pointer",
+        padding: "px-4 py-3",
+        text: {
+            size: "text-base",
+            color: {
+                light: "text-gray-900",
+                dark: "dark:text-white"
+            }
+        },
+        hover: {
+            light: "hover:bg-gray-50",
+            dark: "dark:hover:bg-gray-700"
+        },
+        active: {
+            light: "bg-blue-50",
+            dark: "dark:bg-blue-900/30"
+        },
+        transition: "transition-colors duration-150",
+        rounded: ""
+    },
+    loading: {
+        base: "flex items-center justify-center py-4",
+        size: "w-6 h-6",
+        color: "text-blue-500"
+    },
+    empty: {
+        base: "flex items-center justify-center",
+        text: {
+            size: "text-sm",
+            color: {
+                light: "text-gray-500",
+                dark: "dark:text-gray-400"
+            }
+        },
+        padding: "py-4 px-4"
+    }
+};
+export function extendSearchBoxTheme(overrides) {
+    return {
+        ...searchBoxTheme,
+        ...overrides,
+        container: {
+            ...searchBoxTheme.container,
+            ...overrides.container
+        },
+        wrapper: {
+            ...searchBoxTheme.wrapper,
+            ...overrides.wrapper
+        },
+        input: {
+            ...searchBoxTheme.input,
+            ...overrides.input
+        },
+        label: {
+            ...searchBoxTheme.label,
+            ...overrides.label
+        },
+        icon: {
+            ...searchBoxTheme.icon,
+            ...overrides.icon
+        },
+        clearButton: {
+            ...searchBoxTheme.clearButton,
+            ...overrides.clearButton
+        },
+        dropdown: {
+            ...searchBoxTheme.dropdown,
+            ...overrides.dropdown
+        },
+        item: {
+            ...searchBoxTheme.item,
+            ...overrides.item
+        },
+        loading: {
+            ...searchBoxTheme.loading,
+            ...overrides.loading
+        },
+        empty: {
+            ...searchBoxTheme.empty,
+            ...overrides.empty
+        }
+    };
+}

package/dist/fe/components/SearchBox/types/index.js

@@ -0,0 +1 @@
+export { };

package/dist/fe/components/SearchBox/utils/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/fe/components/SearchBox/utils/debounce.js

@@ -0,0 +1,22 @@
+export function debounce(fn, delay) {
+    let timeoutId = null;
+    const call = (...args)=>{
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(()=>{
+            fn(...args);
+            timeoutId = null;
+        }, delay);
+    };
+    const cancel = ()=>{
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+    };
+    return {
+        call,
+        cancel
+    };
+}

package/dist/fe/components/SearchBox/utils/sanitize.js

@@ -0,0 +1,48 @@
+const DANGEROUS_PATTERNS = [
+    /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
+    /javascript:/gi,
+    /on\w+\s*=/gi,
+    /<iframe/gi,
+    /<object/gi,
+    /<embed/gi,
+    /<link/gi,
+    /data:/gi,
+    /vbscript:/gi
+];
+const HTML_ENTITIES = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#x27;",
+    "/": "&#x2F;",
+    "`": "&#x60;",
+    "=": "&#x3D;"
+};
+export function sanitizeInput(input) {
+    let sanitized = input;
+    for (const pattern of DANGEROUS_PATTERNS){
+        sanitized = sanitized.replace(pattern, "");
+    }
+    return sanitized;
+}
+export function escapeHtml(input) {
+    return input.replace(/[&<>"'`=/]/g, (char)=>HTML_ENTITIES[char] || char);
+}
+export function sanitizeSearchQuery(query, options = {}) {
+    const { trim = true, escapeHtml: shouldEscape = false, maxLength, removeScripts = true } = options;
+    let result = query;
+    if (removeScripts) {
+        result = sanitizeInput(result);
+    }
+    if (trim) {
+        result = result.trim();
+    }
+    if (shouldEscape) {
+        result = escapeHtml(result);
+    }
+    if (maxLength && result.length > maxLength) {
+        result = result.slice(0, maxLength);
+    }
+    return result;
+}