@rebasepro/core 0.0.1-canary.0

package/src/components/RelationSelector.tsx

@@ -0,0 +1,518 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import {
+    CheckIcon,
+    Chip,
+    CircularProgress,
+    CloseIcon,
+    cls,
+    defaultBorderMixin,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundInvisibleMixin,
+    fieldBackgroundMixin,
+    focusedDisabled,
+    KeyboardArrowDownIcon,
+    SearchIcon,
+    Separator,
+    useInjectStyles
+} from "@rebasepro/ui";
+import { Entity, EntityRelation, FilterValues, Relation } from "@rebasepro/types";
+import { EntityPreviewData } from "./EntityPreview";
+import { useDataSource, useRelationSelector } from "../hooks";
+import { EmptyValue } from "../preview";
+
+export interface RelationItem {
+    id: string | number;
+    label: string;
+    description?: string;
+    data?: Entity;
+    relation: EntityRelation;
+}
+
+export interface RelationSelectorProps {
+    className?: string;
+    name?: string;
+    id?: string;
+    value?: EntityRelation | EntityRelation[] | null;
+    /** Callback returning selected EntityRelation(s) */
+
+    onValueChange?: (updatedValue: EntityRelation | EntityRelation[] | undefined) => void;
+    placeholder?: React.ReactNode;
+    size?: "small" | "medium";
+    useChips?: boolean;
+    disabled?: boolean;
+    error?: boolean; // kept for backwards compatibility (could be used for styling later)
+    padding?: boolean; // legacy prop
+    invisible?: boolean;
+
+    relation: Relation;
+    forceFilter?: FilterValues<string>;
+    pageSize?: number;
+    emptyPlaceholder?: string;
+    searchPlaceholder?: string;
+    noResultsText?: string;
+    loadingText?: string;
+}
+
+export const RelationSelector = React.forwardRef<
+    HTMLButtonElement,
+    RelationSelectorProps
+>(
+    (
+        {
+            value,
+            size = "medium",
+            onValueChange,
+            invisible,
+            disabled,
+            placeholder,
+            useChips = true,
+            className,
+            relation,
+            forceFilter,
+            pageSize,
+            emptyPlaceholder,
+            searchPlaceholder = "Search...",
+            noResultsText = "No relations found.",
+            loadingText = "Loading..."
+        },
+        ref
+    ) => {
+
+        const collection = relation.target();
+        const dataSource = useDataSource(collection);
+        const multiple = relation.cardinality === "many";
+
+        const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+        const [selectedItems, setSelectedItems] = useState<RelationItem[]>([]);
+        const [searchString, setSearchString] = useState<string>("");
+
+        const {
+            items: availableItems,
+            isLoading,
+            hasMore,
+            search,
+            loadMore,
+            entityToRelationItem
+        } = useRelationSelector({
+            path: collection.slug,
+            collection,
+            forceFilter,
+            pageSize
+        });
+
+        const scrollContainerRef = useRef<HTMLDivElement>(null);
+        const sentinelRef = useRef<HTMLDivElement>(null);
+        const observerRef = useRef<IntersectionObserver | null>(null);
+        const triggerRef = (ref as React.RefObject<HTMLButtonElement>) || useRef<HTMLButtonElement>(null);
+        const contentRef = useRef<HTMLDivElement | null>(null);
+        const searchInputRef = useRef<HTMLInputElement | null>(null);
+
+        const computeSelectedItems = useCallback(async (val?: EntityRelation | EntityRelation[] | null) => {
+            if (!val) return [] as RelationItem[];
+            const relationsArray = Array.isArray(val) ? val : [val];
+            const promises = relationsArray.map(async (rel) => {
+                try {
+                    const entity = await dataSource.fetchEntity({
+                        path: rel.path,
+                        entityId: rel.id,
+                        collection
+                    });
+                    if (entity) return entityToRelationItem(entity, rel);
+                } catch (e) {
+                    console.warn("RelationSelector: could not fetch entity for relation", rel, e);
+                }
+                return {
+                    id: rel.id,
+                    label: String(rel.id),
+                    relation: rel
+                } as RelationItem;
+            });
+            return Promise.all(promises);
+        }, [dataSource, collection, entityToRelationItem]);
+
+        useEffect(() => {
+            let active = true;
+            computeSelectedItems(value || undefined).then(resolved => {
+                if (active) setSelectedItems(resolved);
+            });
+            return () => {
+                active = false;
+            };
+        }, [value, computeSelectedItems]);
+
+        const sentinelCallbackRef = useCallback((node: HTMLDivElement | null) => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+                observerRef.current = null;
+            }
+            if (sentinelRef.current !== node) {
+                (sentinelRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+            }
+            if (!node || !hasMore || isLoading || !loadMore) return;
+            const observer = new IntersectionObserver(
+                (entries) => {
+                    const entry = entries[0];
+                    if (entry.isIntersecting && hasMore && !isLoading) loadMore();
+                },
+                {
+                    root: scrollContainerRef.current,
+                    rootMargin: "20px",
+                    threshold: 0
+                }
+            );
+            observer.observe(node);
+            observerRef.current = observer;
+        }, [hasMore, isLoading, loadMore]);
+
+        useEffect(() => () => {
+            if (observerRef.current) observerRef.current.disconnect();
+        }, []);
+
+        // Enhanced scroll event listener specifically for dialog contexts
+        useEffect(() => {
+            const scrollContainer = scrollContainerRef.current;
+            if (!scrollContainer || !hasMore || isLoading || !isPopoverOpen) return;
+
+            const handleScroll = () => {
+                const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+                const isNearBottom = scrollTop + clientHeight >= scrollHeight - 100;
+
+                if (isNearBottom && hasMore && !isLoading) {
+                    loadMore();
+                }
+            };
+
+            // Add scroll listener directly to the container
+            scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
+
+            return () => {
+                scrollContainer.removeEventListener("scroll", handleScroll);
+            };
+        }, [hasMore, isLoading, loadMore, isPopoverOpen]);
+
+        const handleSearchChange = useCallback((newSearchString: string) => {
+            setSearchString(newSearchString);
+            search(newSearchString);
+        }, [search]);
+
+        const emitValueChange = useCallback((selected: RelationItem[]) => {
+            if (multiple) onValueChange?.(selected.length ? selected.map(i => i.relation) : undefined);
+            else onValueChange?.(selected[0]?.relation);
+        }, [onValueChange, multiple]);
+
+        const onItemClick = useCallback((item: RelationItem) => {
+            let newSelected: RelationItem[];
+            if (multiple) {
+                const isSelected = selectedItems.some(v => String(v.id) === String(item.id));
+                newSelected = isSelected
+                    ? selectedItems.filter(v => String(v.id) !== String(item.id))
+                    : [...selectedItems, item];
+            } else {
+                newSelected = [item];
+                setIsPopoverOpen(false);
+            }
+            setSelectedItems(newSelected);
+            emitValueChange(newSelected);
+        }, [multiple, selectedItems, emitValueChange]);
+
+        const handleClear = useCallback(() => {
+            setSelectedItems([]);
+            onValueChange?.(undefined);
+        }, [onValueChange]);
+
+        const handleRemoveItem = useCallback((itemToRemove: RelationItem) => {
+            const newSelected = selectedItems.filter(v => String(v.id) !== String(itemToRemove.id));
+            setSelectedItems(newSelected);
+            emitValueChange(newSelected);
+        }, [selectedItems, emitValueChange]);
+
+        const handleRootOpenChange = useCallback((next: boolean) => {
+            if (disabled) return;
+            // We control open manually; only allow opening attempts from Radix (e.g. trigger press)
+            if (next) setIsPopoverOpen(true);
+            // Ignore close attempts here; outside click/Escape handled manually; single select closes explicitly on selection.
+        }, [disabled]);
+
+        // Outside click + Escape handling (simple and reliable)
+        useEffect(() => {
+            if (!isPopoverOpen) return;
+
+            function handlePointerDown(ev: MouseEvent) {
+                const target = ev.target as Node;
+                const triggerEl = triggerRef.current;
+                const contentEl = contentRef.current;
+                if (triggerEl?.contains(target)) return;
+                if (contentEl?.contains(target)) return;
+                // Outside
+                setIsPopoverOpen(false);
+            }
+
+            function handleKey(ev: KeyboardEvent) {
+                if (ev.key === "Escape") setIsPopoverOpen(false);
+            }
+
+            document.addEventListener("mousedown", handlePointerDown, true);
+            document.addEventListener("keydown", handleKey, true);
+            return () => {
+                document.removeEventListener("mousedown", handlePointerDown, true);
+                document.removeEventListener("keydown", handleKey, true);
+            };
+        }, [isPopoverOpen]);
+
+        useInjectStyles("RelationSelector", " [cmdk-group] { max-height: 40vh; overflow-y: auto; } ");
+
+        const closePopover = useCallback(() => {
+            setIsPopoverOpen(false);
+        }, []);
+
+        const resolvedPlaceholder = placeholder || emptyPlaceholder || <EmptyValue className={"ml-2"} />;
+
+        // Use Sheet portal container if available, otherwise document.body
+        const portalContainer = (typeof document !== "undefined" ? document.body : undefined);
+
+        return (
+            <>
+                <PopoverPrimitive.Root open={isPopoverOpen} onOpenChange={handleRootOpenChange} modal={false}>
+                    <PopoverPrimitive.Trigger asChild>
+                        <button
+                            ref={triggerRef as any}
+                            type="button"
+                            aria-haspopup="listbox"
+                            aria-expanded={isPopoverOpen}
+                            data-relation-selector-trigger
+                            disabled={disabled}
+                            onClick={() => {
+                                if (disabled) return;
+                                setIsPopoverOpen(o => !o);
+                            }}
+                            className={cls(
+                                {
+                                    "min-h-[42px] py-1 px-2": size === "small",
+                                    "min-h-[56px] py-2 px-4": size === "medium"
+                                },
+                                "w-full select-none rounded-md text-sm relative flex items-center",
+                                invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
+                                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                                className
+                            )}
+                        >
+                            <div className="flex justify-between items-center w-full">
+                                {selectedItems.length > 0 ? (
+                                    <div
+                                        className="flex flex-wrap items-center gap-1.5 text-start flex-1 min-w-0 mr-2">
+                                        {selectedItems.map((item) => {
+                                            if (!useChips || !multiple) {
+
+                                                return (
+                                                    <div key={String(item.id)}
+                                                        className="flex flex-row items-center gap-1 truncate">
+                                                        {item.data ? (
+                                                            <EntityPreviewData size={"medium"}
+                                                                entity={item.data}
+                                                                includeEntityLink={false}
+                                                                includeId={false}
+                                                                onSideEntityClick={closePopover}
+                                                            />
+                                                        ) : (
+                                                            <span className="text-sm truncate">{item.label}</span>
+                                                        )}
+                                                    </div>
+                                                );
+                                            }
+                                            return (
+                                                <Chip
+                                                    size={"small"}
+                                                    key={String(item.id)}
+                                                    className={cls("flex flex-row items-center gap-1 truncate")}
+                                                >
+                                                    {item.data ? (
+                                                        <EntityPreviewData size={"smallest"} entity={item.data}
+                                                            includeEntityLink={false}
+                                                            includeId={false} />
+                                                    ) : (
+                                                        <span className="text-sm truncate">{item.label}</span>
+                                                    )}
+                                                    <CloseIcon
+                                                        size={"smallest"}
+                                                        onClick={(event) => {
+                                                            event.stopPropagation();
+                                                            handleRemoveItem(item);
+                                                        }}
+                                                    />
+                                                </Chip>
+                                            );
+                                        })}
+                                    </div>
+                                ) :
+                                    (
+                                        <span className="text-sm text-text-secondary dark:text-text-secondary-dark">
+                                            {resolvedPlaceholder}
+                                        </span>
+                                    )}
+
+                                <div className="flex-shrink-0">
+                                    <KeyboardArrowDownIcon
+                                        size={size === "medium" ? "medium" : "small"}
+                                        className={cls("transition", isPopoverOpen ? "rotate-180" : "")}
+                                    />
+                                </div>
+                            </div>
+
+                        </button>
+                    </PopoverPrimitive.Trigger>
+                    <PopoverPrimitive.Portal container={portalContainer}>
+                        <PopoverPrimitive.Content
+                            ref={contentRef}
+                            data-relation-selector-content
+                            className={cls("z-50 overflow-hidden border bg-white dark:bg-surface-900 rounded-lg min-w-72", defaultBorderMixin)}
+                            align="start"
+                            sideOffset={8}
+                            side="bottom"
+                            avoidCollisions={true}
+                            collisionPadding={16}
+                            // Allow default auto focus (we manually refocus anyway)
+                            onOpenAutoFocus={(_e) => { /* leave default or custom manual focus */
+                            }}
+                            onCloseAutoFocus={(e) => {
+                                e.preventDefault();
+                            }}
+                            style={{ width: "var(--radix-popover-trigger-width)" }}
+                        >
+                            <CommandPrimitive shouldFilter={false}>
+                                <div className="flex flex-row items-center">
+                                    <div className="relative flex-1">
+                                        <SearchIcon
+                                            className="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary dark:text-text-secondary-dark"
+                                            size="small" />
+                                        <CommandPrimitive.Input
+                                            ref={searchInputRef}
+                                            className={cls(
+                                                focusedDisabled,
+                                                "bg-transparent outline-hidden flex-1 h-full w-full pl-10 pr-4 py-3 text-text-primary dark:text-text-primary-dark placeholder:text-text-secondary dark:placeholder:text-text-secondary-dark"
+                                            )}
+                                            placeholder={searchPlaceholder}
+                                            value={searchString}
+                                            onValueChange={handleSearchChange}
+                                        />
+                                    </div>
+                                    {isLoading && (
+                                        <div className="flex items-center justify-center px-3">
+                                            <CircularProgress size="smallest" />
+                                        </div>
+                                    )}
+                                    {selectedItems.length > 0 && (
+                                        <div
+                                            onClick={handleClear}
+                                            className="text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark hover:text-text-primary dark:hover:text-text-primary-dark"
+                                        >
+                                            Clear
+                                        </div>
+                                    )}
+                                </div>
+                                <Separator orientation="horizontal" className="my-0" />
+                                <CommandPrimitive.List
+                                    ref={scrollContainerRef}
+                                    style={{
+                                        maxHeight: "40vh",
+                                        overflowY: "auto"
+                                    }}
+                                >
+                                    {isLoading && availableItems.length === 0 && (
+                                        <div className="flex items-center justify-center py-6">
+                                            <CircularProgress size="small" />
+                                            <span
+                                                className="ml-2 text-sm text-text-secondary dark:text-text-secondary-dark">{loadingText}</span>
+                                        </div>
+                                    )}
+                                    {!isLoading && availableItems.length === 0 && (
+                                        <CommandPrimitive.Empty
+                                            className="px-4 py-6 text-center text-text-secondary dark:text-text-secondary-dark">
+                                            {noResultsText}
+                                        </CommandPrimitive.Empty>
+                                    )}
+                                    <CommandPrimitive.Group>
+                                        {availableItems.map((item) => {
+                                            const isSelected = selectedItems.some(v => String(v.id) === String(item.id));
+                                            return (
+                                                <CommandPrimitive.Item
+                                                    key={String(item.id)}
+                                                    value={String(item.id)}
+                                                    onMouseDown={(e) => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                    }}
+                                                    onSelect={() => onItemClick(item)}
+                                                    className={cls(
+                                                        "flex flex-row items-center gap-1.5 m-1 p-1 rounded-xs cursor-pointer ring-offset-transparent",
+                                                        isSelected && "bg-surface-accent-200 dark:bg-surface-accent-950",
+                                                        "aria-selected:outline-hidden aria-selected:ring-2 aria-selected:ring-primary/75 aria-selected:ring-offset-2 aria-selected:bg-surface-accent-100 dark:aria-selected:bg-surface-accent-900"
+                                                    )}
+                                                >
+                                                    {multiple && (<InnerCheckBox checked={isSelected} />)}
+                                                    {item.data ? (
+                                                        <div
+                                                            className="flex flex-row items-center gap-2 min-w-0 w-full">
+                                                            <EntityPreviewData
+                                                                size={multiple ? "smallest" : "medium"}
+                                                                entity={item.data}
+                                                                includeId={false}
+                                                                includeEntityLink={true}
+                                                            />
+                                                        </div>
+                                                    ) : (
+                                                        <div>
+                                                            <div
+                                                                className="text-sm font-medium text-text-primary dark:text-text-primary-dark">{item.label}</div>
+                                                            {item.description && (
+                                                                <div
+                                                                    className="text-xs text-text-secondary dark:text-text-secondary-dark">{item.description}</div>
+                                                            )}
+                                                        </div>
+                                                    )}
+                                                </CommandPrimitive.Item>
+                                            );
+                                        })}
+                                        {availableItems.length > 0 && hasMore && (
+                                            <div ref={sentinelCallbackRef} className="h-1 w-full"
+                                                style={{ visibility: "hidden" }} />
+                                        )}
+                                        {isLoading && availableItems.length > 0 && (
+                                            <div className="flex items-center justify-center py-4">
+                                                <CircularProgress size="smallest" />
+                                                <span
+                                                    className="ml-2 text-xs text-text-secondary dark:text-text-secondary-dark">Loading...</span>
+                                            </div>
+                                        )}
+                                    </CommandPrimitive.Group>
+                                </CommandPrimitive.List>
+                            </CommandPrimitive>
+                        </PopoverPrimitive.Content>
+                    </PopoverPrimitive.Portal>
+                </PopoverPrimitive.Root>
+            </>
+        );
+    }
+);
+
+RelationSelector.displayName = "RelationSelector";
+
+function InnerCheckBox({ checked }: { checked: boolean }) {
+    return (
+        <div className={cls(
+            "p-2 w-8 h-8 inline-flex items-center justify-center text-sm font-medium focus:outline-hidden transition-colors ease-in-out duration-150"
+        )}>
+            <div
+                className={cls(
+                    "border-2 relative transition-colors ease-in-out duration-150 w-4 h-4 rounded-xs flex items-center justify-center",
+                    checked ? "bg-primary text-surface-accent-100 dark:text-surface-accent-900 border-transparent" : "bg-white dark:bg-surface-accent-900 border-surface-accent-800 dark:border-surface-accent-200"
+                )}
+            >
+                {checked && <CheckIcon size={16} className="absolute" />}
+            </div>
+        </div>
+    );
+}

package/src/components/SearchIconsView.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+import { coolIconKeys, debounce, Icon, IconButton, iconKeys, SearchBar, Tooltip } from "@rebasepro/ui";
+import { iconsSearch, iconSynonyms } from "../util";
+
+const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
+
+if (iconSynonyms && process.env.NODE_ENV !== "production") {
+    Object.keys(iconSynonyms).forEach((icon: string) => {
+        if (!iconKeys.includes(icon)) {
+            console.warn(`The icon ${icon} no longer exists. Remove it from \`iconSynonyms\``);
+        }
+    });
+}
+
+export interface SearchIconsProps {
+    selectedIcon?: string;
+    onIconSelected?: (icon: string) => void;
+}
+
+export function SearchIconsView({
+    selectedIcon = "",
+    onIconSelected
+}: SearchIconsProps) {
+    const [keys, setKeys] = React.useState<string[] | null>(null);
+    const [query, setQuery] = React.useState<string>("");
+
+    const updateSearchResults = React.useMemo(() =>
+        debounce((value: string) => {
+            if (!value || value === "") {
+                setKeys(null);
+            } else {
+                const searchResult = iconsSearch.search(value);
+                const limit = 50;
+                const limited = searchResult.slice(0, limit);
+                setKeys(limited.map((e) => e.item.key));
+            }
+        }, UPDATE_SEARCH_INDEX_WAIT_MS), []
+    );
+
+    React.useEffect(() => {
+        updateSearchResults(query);
+        return () => {
+            updateSearchResults.clear();
+        };
+    }, [query, updateSearchResults]);
+
+    const icons = keys === null ? coolIconKeys : keys;
+
+    return (
+        <>
+            <SearchBar
+                autoFocus={false}
+                innerClassName={"w-full sticky top-0 z-10"}
+                onTextSearch={(value?: string) => setQuery(value ?? "")}
+                placeholder="Search for more icons…"
+            />
+
+            <div className={"flex max-w-full flex-wrap mt-4"}>
+                {icons.map((icon: string) => {
+                    return (
+                        <Tooltip title={icon} key={icon}
+                            asChild={true}>
+                            <IconButton
+                                shape={"square"}
+                                toggled={selectedIcon === icon}
+                                onClick={onIconSelected ? () => onIconSelected(icon) : undefined}
+                                className="box-content m-1"
+                            >
+                                <Icon iconKey={icon} size={24} />
+                            </IconButton>
+                        </Tooltip>
+                    );
+                })}
+            </div>
+        </>
+    );
+}