@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/InfiniteSelect.tsx

@@ -0,0 +1,397 @@
+import { cn } from "../support/utils";
+import { Check, ChevronDown, Loader2, Search } from "lucide-react";
+import React, { useState } from "react";
+import { ThemedText } from "../index";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "./dropdown-menu";
+import { Input } from "./input";
+
+import {
+    FieldError,
+    FieldValidationProps,
+    resolveFieldErrors,
+    ERROR_OUTLINE_CLASSES,
+} from "./form-error";
+
+function renderIcon(icon: any, className = "w-3.5 h-3.5 shrink-0") {
+    if (!icon) return null;
+    if (React.isValidElement(icon)) return icon;
+    if (
+        typeof icon === "function" ||
+        (typeof icon === "object" && icon.$$typeof)
+    ) {
+        const IconComponent = icon as React.ComponentType<{
+            className?: string;
+        }>;
+        return <IconComponent className={className} />;
+    }
+    return null;
+}
+
+export interface InfiniteSelectProps<T> extends FieldValidationProps {
+    id?: string;
+    value?: string;
+    onValueChange?: (value: string, item?: T) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    loadingPlaceholder?: string;
+    noItemsPlaceholder?: string;
+    disabled?: boolean;
+
+    search?: string;
+    onSearchChange?: (search: string) => void;
+
+    items?: T[];
+    isLoading?: boolean;
+    isFetchingNextPage?: boolean;
+    hasNextPage?: boolean;
+    fetchNextPage?: () => void;
+
+    getItemKey?: (item: T) => string;
+    getItemLabel?: (item: T) => string;
+    getItemIcon?: (item: T) => React.ReactNode;
+
+    selectedLabel?: string;
+
+    // Controlled open state
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+
+    // Custom Slots
+    trigger?: React.ReactNode;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    renderCustomItem?: (item: T, closeDropdown: () => void) => React.ReactNode;
+
+    align?: "start" | "end" | "center";
+    className?: string;
+    contentClassName?: string;
+
+    extraAction?: {
+        id: string;
+        label: string;
+        icon?: React.ReactNode;
+        className?: string;
+        onClick?: () => void;
+    };
+
+    // Toolbar / Style Variants
+    variant?: "default" | "toolbar";
+    icon?: any;
+    label?: string;
+}
+
+export function InfiniteSelect<T>({
+    id,
+    value = "",
+    onValueChange,
+    placeholder = "Select item...",
+    searchPlaceholder = "Search...",
+    loadingPlaceholder = "Loading...",
+    noItemsPlaceholder = "No items found",
+    disabled = false,
+    search,
+    onSearchChange,
+    items = [],
+    isLoading = false,
+    isFetchingNextPage = false,
+    hasNextPage = false,
+    fetchNextPage,
+    getItemKey,
+    getItemLabel,
+    getItemIcon,
+    selectedLabel,
+    open,
+    onOpenChange,
+    trigger,
+    header,
+    footer,
+    renderCustomItem,
+    align,
+    className,
+    contentClassName,
+    extraAction,
+    variant = "default",
+    icon,
+    label,
+    error,
+    errors,
+    payloadKey,
+    errorKey,
+    containerClassName,
+    errorClassName,
+}: InfiniteSelectProps<T>) {
+    const resolvedErrors = React.useMemo(() => {
+        const key = payloadKey || errorKey || id;
+        return resolveFieldErrors(error, errors, key);
+    }, [error, errors, payloadKey, errorKey, id]);
+
+    const hasError = resolvedErrors.length > 0;
+    const errorId = id ? `${id}-error` : undefined;
+
+    const [internalOpen, setInternalOpen] = useState(false);
+    const isOpen = open !== undefined ? open : internalOpen;
+    const setIsOpen =
+        onOpenChange !== undefined ? onOpenChange : setInternalOpen;
+
+    const isToolbar = variant === "toolbar";
+
+    const defaultItemKey = (item: T): string => {
+        if (getItemKey) return getItemKey(item);
+        if (typeof item === "string" || typeof item === "number")
+            return String(item);
+        if (item && typeof item === "object") {
+            return (
+                (item as any).value ??
+                (item as any).id ??
+                (item as any).key ??
+                String(item)
+            );
+        }
+        return String(item);
+    };
+
+    const defaultItemLabel = (item: T): string => {
+        if (getItemLabel) return getItemLabel(item);
+        if (typeof item === "string" || typeof item === "number")
+            return String(item);
+        if (item && typeof item === "object") {
+            return (
+                (item as any).label ??
+                (item as any).name ??
+                (item as any).title ??
+                String(item)
+            );
+        }
+        return String(item);
+    };
+
+    const defaultItemIcon = (item: T): React.ReactNode => {
+        if (getItemIcon) return getItemIcon(item);
+        if (item && typeof item === "object" && (item as any).icon) {
+            return (item as any).icon;
+        }
+        return null;
+    };
+
+    const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+        const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
+        if (
+            scrollHeight - scrollTop <= clientHeight * 1.5 &&
+            hasNextPage &&
+            !isFetchingNextPage &&
+            fetchNextPage
+        ) {
+            fetchNextPage();
+        }
+    };
+
+    const selectedItem = items.find((item) => defaultItemKey(item) === value);
+    const triggerText = selectedItem
+        ? defaultItemLabel(selectedItem)
+        : selectedLabel
+          ? selectedLabel
+          : isLoading && value
+            ? loadingPlaceholder
+            : value || placeholder;
+
+    return (
+        <div className={cn("w-full", containerClassName)}>
+            <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+                {trigger ? (
+                    trigger
+                ) : (
+                    <DropdownMenuTrigger
+                        id={id}
+                        disabled={disabled}
+                        aria-invalid={hasError ? true : undefined}
+                        aria-describedby={hasError && errorId ? errorId : undefined}
+                        className={cn(
+                            isToolbar
+                                ? "flex items-center gap-1.5 h-8 px-2.5 rounded-md text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-secondary border border-dashboard-border transition-colors outline-none cursor-pointer text-xs font-medium bg-dashboard-card dark:bg-dashboard-card/40 select-none shrink-0"
+                                : "w-full bg-dashboard-background border border-dashboard-border justify-between text-sm text-dashboard-foreground font-normal rounded-md px-3 py-2 flex items-center h-10 select-none outline-none focus:ring-1 focus:ring-dashboard-primary/20 cursor-pointer",
+                            disabled &&
+                                "opacity-50 cursor-not-allowed pointer-events-none",
+                            className,
+                            hasError && ERROR_OUTLINE_CLASSES,
+                        )}
+                        aria-label={placeholder || "Toggle select dropdown"}
+                    >
+                    {isToolbar ? (
+                        <>
+                            {selectedItem && defaultItemIcon(selectedItem)
+                                ? renderIcon(defaultItemIcon(selectedItem))
+                                : renderIcon(icon)}
+                            {label && (
+                                <span className="opacity-75">{label}</span>
+                            )}
+                            <span className="truncate">{triggerText}</span>
+                            <ChevronDown className="w-3 h-3 opacity-50 ml-0.5 shrink-0" />
+                        </>
+                    ) : (
+                        <>
+                            <span className="truncate flex items-center gap-2">
+                                {selectedItem && defaultItemIcon(selectedItem)
+                                    ? renderIcon(
+                                          defaultItemIcon(selectedItem),
+                                          "w-4 h-4 shrink-0",
+                                      )
+                                    : renderIcon(icon, "w-4 h-4 shrink-0")}
+                                <span>{triggerText}</span>
+                            </span>
+                            <ChevronDown className="h-4 w-4 opacity-50 ml-2 shrink-0" />
+                        </>
+                    )}
+                </DropdownMenuTrigger>
+            )}
+            <DropdownMenuContent
+                align={align ?? (isToolbar ? "end" : "start")}
+                className={cn(
+                    isToolbar
+                        ? "min-w-40 max-w-72 bg-dashboard-card border border-dashboard-border rounded-lg p-1 shadow-lg flex flex-col z-[100]"
+                        : "w-(--anchor-width) p-1.5 rounded-xl border border-dashboard-border shadow-2xl bg-dashboard-card flex flex-col z-[100]",
+                    contentClassName,
+                )}
+            >
+                {header ? (
+                    header
+                ) : onSearchChange && search !== undefined ? (
+                    <div
+                        className={cn(
+                            "flex items-center gap-2 border-b border-dashboard-border bg-dashboard-background/30 rounded-t-lg mb-1",
+                            isToolbar ? "px-2 py-1.5" : "px-2.5 py-2",
+                        )}
+                        onKeyDown={(e) => e.stopPropagation()}
+                    >
+                        <Search className="w-3.5 h-3.5 text-dashboard-muted-foreground shrink-0" />
+                        <Input
+                            value={search}
+                            onChange={(e) => onSearchChange(e.target.value)}
+                            placeholder={searchPlaceholder}
+                            className="h-7 border-none bg-transparent p-0 text-xs text-dashboard-foreground placeholder:text-dashboard-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0 focus:ring-0"
+                        />
+                    </div>
+                ) : null}
+
+                <div
+                    className={cn(
+                        "flex flex-col gap-0.5 overflow-y-auto custom-scrollbar",
+                        isToolbar ? "max-h-[300px]" : "max-h-[350px] mt-1.5",
+                    )}
+                    onScroll={handleScroll}
+                >
+                    {extraAction && (
+                        <DropdownMenuItem
+                            onClick={() => {
+                                if (extraAction.onClick) {
+                                    extraAction.onClick();
+                                } else if (onValueChange) {
+                                    onValueChange(extraAction.id);
+                                }
+                                setIsOpen(false);
+                            }}
+                            className={cn(
+                                "flex items-center justify-between text-xs rounded-md hover:bg-dashboard-secondary focus:bg-dashboard-secondary cursor-pointer",
+                                !extraAction.className && "font-semibold",
+                                isToolbar ? "py-1.5 px-2" : "py-2 px-2.5",
+                            )}
+                        >
+                            <ThemedText
+                                as="span"
+                                className={cn(
+                                    "flex items-center gap-2",
+                                    extraAction.className ||
+                                        "text-dashboard-primary font-bold",
+                                )}
+                            >
+                                {extraAction.icon}
+                                {extraAction.label}
+                            </ThemedText>
+                            {value === extraAction.id && (
+                                <Check
+                                    className={cn(
+                                        "w-3.5 h-3.5",
+                                        extraAction.className
+                                            ? "text-dashboard-foreground"
+                                            : "text-dashboard-primary",
+                                    )}
+                                />
+                            )}
+                        </DropdownMenuItem>
+                    )}
+
+                    {isLoading ? (
+                        <div className="p-3 text-center text-xs text-dashboard-muted-foreground">
+                            {loadingPlaceholder}
+                        </div>
+                    ) : items.length === 0 ? (
+                        <div className="p-3 text-center text-xs text-dashboard-muted-foreground">
+                            {noItemsPlaceholder}
+                        </div>
+                    ) : renderCustomItem ? (
+                        items.map((item) =>
+                            renderCustomItem(item, () => setIsOpen(false)),
+                        )
+                    ) : (
+                        items.map((item) => {
+                            const key = defaultItemKey(item);
+                            const itemLabel = defaultItemLabel(item);
+                            const itemIcon = defaultItemIcon(item);
+                            const isSelected = value === key;
+                            return (
+                                <DropdownMenuItem
+                                    key={key}
+                                    onClick={() => {
+                                        if (onValueChange) {
+                                            onValueChange(key, item);
+                                        }
+                                        setIsOpen(false);
+                                    }}
+                                    className={cn(
+                                        "flex items-center justify-between gap-2 text-xs rounded-md cursor-pointer outline-none transition-colors",
+                                        isToolbar
+                                            ? "px-2 py-1.5"
+                                            : "py-2 px-2.5",
+                                        isSelected
+                                            ? "bg-dashboard-secondary text-dashboard-foreground font-medium"
+                                            : "text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground",
+                                    )}
+                                >
+                                    <span className="flex items-center gap-2 truncate min-w-0">
+                                        {renderIcon(itemIcon)}
+                                        <span className="truncate">
+                                            {itemLabel}
+                                        </span>
+                                    </span>
+                                    {isSelected && (
+                                        <Check className="w-3.5 h-3.5 text-dashboard-primary shrink-0 ml-auto" />
+                                    )}
+                                </DropdownMenuItem>
+                            );
+                        })
+                    )}
+
+                    {isFetchingNextPage && (
+                        <div className="py-2 flex justify-center text-dashboard-muted-foreground shrink-0">
+                            <Loader2 size={14} className="animate-spin" />
+                        </div>
+                    )}
+                </div>
+
+                {footer}
+            </DropdownMenuContent>
+        </DropdownMenu>
+        <FieldError
+            id={errorId}
+            errors={resolvedErrors}
+            className={errorClassName}
+        />
+    </div>
+);
+}
+
+export default InfiniteSelect;

package/src/components/LoadingState.tsx

@@ -0,0 +1,105 @@
+/**
+ * LoadingState Component
+ *
+ * Standardized loading UI for different contexts.
+ *
+ * @example
+ * ```tsx
+ * // Default loading
+ * <LoadingState />
+ *
+ * // With message
+ * <LoadingState message="Loading courses..." />
+ *
+ * // Small inline
+ * <LoadingState size="sm" fullScreen={false} />
+ *
+ * // Overlay
+ * <LoadingState overlay />
+ * ```
+ */
+
+import type { BaseComponentProps, LoadingStateProps } from "../types";
+import { ThemedText } from "../index";
+
+interface Props extends LoadingStateProps, BaseComponentProps {}
+
+const sizeClasses = {
+    sm: "h-6 w-6 border-2",
+    md: "h-10 w-10 border-[3px]",
+    lg: "h-14 w-14 border-4",
+};
+
+const glowSizeClasses = {
+    sm: "h-8 w-8",
+    md: "h-16 w-16",
+    lg: "h-20 w-20",
+};
+
+/**
+ * Loading state component
+ */
+export function LoadingState({
+    message,
+    size = "md",
+    fullScreen = true,
+    overlay = false,
+    className = "",
+    testId,
+}: Props) {
+    const content = (
+        <div
+            className={`${
+                fullScreen ? "h-full" : "h-full min-h-[200px]"
+            } flex flex-col items-center justify-center gap-6`}
+        >
+            <div className="relative flex items-center justify-center">
+                {/* Subtle glowing aura */}
+                <div
+                    className={`absolute ${glowSizeClasses[size]} bg-dashboard-primary/10 rounded-full blur-xl animate-pulse`}
+                />
+
+                {/* Faint background track */}
+                <div
+                    className={`absolute rounded-full ${sizeClasses[size]} border-dashboard-border`}
+                />
+
+                {/* Sleek spinning gradient ring */}
+                <div
+                    className={`relative animate-spin rounded-full ${sizeClasses[size]} border-transparent border-t-dashboard-primary border-r-dashboard-primary/30`}
+                    style={{ animationDuration: "0.8s" }}
+                />
+            </div>
+
+            {message && (
+                <ThemedText as="p" className="text-xs font-semibold  tracking-widest text-dashboard-muted-foreground animate-pulse">
+                    {message}
+                </ThemedText>
+            )}
+        </div>
+    );
+
+    if (overlay) {
+        return (
+            <div
+                className={`fixed inset-0 z-50 flex items-center justify-center bg-dashboard-background/80 backdrop-blur-xs ${className}`}
+                data-testid={testId}
+            >
+                {content}
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className={`flex items-center justify-center ${
+                fullScreen ? "h-screen" : "h-full min-h-[200px]"
+            } ${className}`}
+            data-testid={testId}
+        >
+            {content}
+        </div>
+    );
+}
+
+export default LoadingState;

package/src/components/LucidIconRender.tsx

@@ -0,0 +1,25 @@
+import { lucid_icons } from "../support/utils";
+
+type Props = {
+    iconName: any;
+    parentClassName?: string;
+    iconClassName?: string;
+    iconSize?: string | number;
+    text?:string
+};
+export function LucidIconRender({
+    iconName,
+    parentClassName,
+    iconClassName,
+    iconSize,
+    text
+}: Props) {
+    const Icon = lucid_icons[iconName as keyof typeof lucid_icons];
+    return Icon ? (
+        <div className={parentClassName}>
+            <Icon size={iconSize} className={iconClassName} />
+            {text}
+        </div>
+    ) : null;
+}
+