@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/components/SearchIconsView.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+
+import { coolIconKeys, debounce, IconButton, iconKeys, SearchBar, Tooltip, iconSize } from "@rebasepro/ui";
+import { icons as lucideIcons } from "lucide-react";
+import { iconsSearch, iconSynonyms } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/core";
+
+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\``);
+        }
+    });
+}
+
+function toPascalCase(str: string): string {
+    return str.split(/[-_]/).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+}
+
+function resolveIcon(iconKey: string): React.ComponentType<{ size: number }> | null {
+    const allIcons = lucideIcons as Record<string, React.ComponentType<{ size: number }>>;
+    let icon = allIcons[iconKey];
+    if (!icon) {
+        icon = allIcons[toPascalCase(iconKey)];
+    }
+    return icon ?? null;
+}
+
+export interface SearchIconsProps {
+    selectedIcon?: string;
+    onIconSelected?: (icon: string) => void;
+}
+
+export function SearchIconsView({
+    selectedIcon = "",
+    onIconSelected
+}: SearchIconsProps) {
+    const { t } = useTranslation();
+    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={t("search_for_more_icons")}
+            />
+
+            <div className={"flex max-w-full flex-wrap mt-4"}>
+                {icons.map((icon: string) => {
+                    const LucideIcon = resolveIcon(icon);
+                    if (!LucideIcon) return null;
+                    return (
+                        <Tooltip title={icon} key={icon}
+                            asChild={true}>
+                            <IconButton
+                                shape={"square"}
+                                toggled={selectedIcon === icon}
+                                onClick={onIconSelected ? () => onIconSelected(icon) : undefined}
+                                className="box-content m-1"
+                            >
+                                <LucideIcon size={iconSize.medium}/>
+                            </IconButton>
+                        </Tooltip>
+                    );
+                })}
+            </div>
+        </>
+    );
+}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -0,0 +1,356 @@
+import { createSelectionStore } from "./SelectionStore";
+import type { Property } from "@rebasepro/types";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { CollectionSize, Entity, EntityTableController, FilterValues, SelectedCellProps } from "@rebasepro/types";
+import { CellRendererParams, VirtualTable, VirtualTableColumn } from "@rebasepro/ui";
+import { enumToObjectEntries } from "@rebasepro/common";
+import { DEFAULT_PAGE_SIZE, EntityCollectionTableController, OnCellValueChange, OnColumnResizeParams } from "@rebasepro/core";
+import { FilterFormFieldProps } from "@rebasepro/ui";
+import { ReferenceFilterField } from "./filters/ReferenceFilterField";
+import { StringNumberFilterField } from "./filters/StringNumberFilterField";
+import { BooleanFilterField } from "./filters/BooleanFilterField";
+import { DateTimeFilterField } from "./filters/DateTimeFilterField";
+import { useOutsideAlerter } from "@rebasepro/ui";
+import { SelectableTableContext } from "./SelectableTableContext";
+import { getRowHeight } from "@rebasepro/core";
+import { RelationFilterField } from "./filters/RelationFilterField";
+
+export type SelectableTableProps<M extends Record<string, unknown>> = {
+
+    /**
+     * Callback when a cell value changes.
+     */
+    onValueChange?: OnCellValueChange<any, M>;
+
+    columns: VirtualTableColumn[];
+
+    cellRenderer: React.ComponentType<CellRendererParams<Entity<M>>>;
+
+    /**
+     * Builder for creating the buttons in each row
+     * @param entity
+     * @param size
+     */
+    tableRowActionsBuilder?: (params: {
+        entity: Entity<M>,
+        size: CollectionSize,
+        width: number,
+        frozen?: boolean
+    }) => React.ReactNode;
+
+    /**
+     * Callback when anywhere on the table is clicked
+     */
+    onEntityClick?(entity: Entity<M>): void;
+
+    /**
+     * Callback when a column is resized
+     */
+    onColumnResize?(params: OnColumnResizeParams): void;
+
+    /**
+     * Should apply a different style to a row when hovering
+     */
+    hoverRow?: boolean;
+
+    /**
+     * Controller holding the logic for the table
+     * {@link useDataTableController}
+     * {@link EntityTableController}
+     */
+    tableController: EntityTableController<M>;
+
+    filterable?: boolean;
+
+    sortable?: boolean;
+
+    inlineEditing?: boolean;
+
+    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
+
+    highlightedRow?: (data: Entity<M>) => boolean;
+
+    size?: CollectionSize;
+
+    initialScroll?: number;
+
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
+
+    emptyComponent?: React.ReactNode;
+
+    endAdornment?: React.ReactNode;
+
+    AddColumnComponent?: React.ComponentType;
+
+    /**
+     * Callback when columns are reordered via drag-and-drop
+     */
+    onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
+
+    /**
+     * Extra data passed to VirtualTable cells. Changes to this object
+     * bust the cell memo comparator, triggering re-render of cells
+     * even when rowData hasn't changed.
+     */
+    extraData?: Record<string, any>;
+}
+
+/**
+ * This component is in charge of rendering a collection table with a high
+ * degree of customization.
+ *
+ * This component is used internally by {@link EntityCollectionView} and
+ * {@link useReferenceDialog}
+ *
+ * Please note that you only need to use this component if you are building
+ * a custom view. If you just need to create a default view you can do it
+ * exclusively with config options.
+ *
+ * If you want to bind a {@link EntityCollection} to a table with the default
+ * options you see in collections in the top level navigation, you can
+ * check {@link EntityCollectionView}.
+ *
+ * The data displayed in the table is managed by a {@link EntityTableController}.
+ * You can build the default, bound to a path in the driver, by using the hook
+ * {@link useDataTableController}
+ *
+ * @see EntityCollectionTableProps
+ * @see EntityCollectionView
+ * @see VirtualTable
+ * @group Components
+ */
+export const SelectableTable = function SelectableTable<M extends Record<string, unknown>>
+    ({
+        onValueChange,
+        cellRenderer,
+        onEntityClick,
+        onColumnResize,
+        hoverRow = true,
+        size = "m",
+        inlineEditing = false,
+        tableController:
+        {
+            data,
+            dataLoading,
+            noMoreToLoad,
+            dataLoadingError,
+            filterValues,
+            setFilterValues,
+            sortBy,
+            setSortBy,
+            itemCount,
+            setItemCount,
+            pageSize = DEFAULT_PAGE_SIZE,
+            paginationEnabled,
+            checkFilterCombination,
+            setPopupCell
+        },
+        filterable = true,
+        onScroll,
+        initialScroll,
+        emptyComponent,
+        columns,
+        forceFilter,
+        highlightedRow,
+        endAdornment,
+        AddColumnComponent,
+        onColumnsOrderChange,
+        extraData
+    }: SelectableTableProps<M>) {
+
+    const ref = useRef<HTMLDivElement>(null);
+
+    // Create the selection store once
+    const selectionStore = useMemo(() => createSelectionStore(), []);
+    // We still keep local state for side-effects like outside-alerter, but we don't put it in context
+    const [localSelectedCell, setLocalSelectedCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
+
+    const loadNextPage = useCallback(() => {
+        if (!paginationEnabled || dataLoading || noMoreToLoad)
+            return;
+        if (itemCount !== undefined)
+            setItemCount?.(itemCount + pageSize);
+    }, [paginationEnabled, dataLoading, noMoreToLoad, itemCount, pageSize, setItemCount]);
+
+    const resetPagination = useCallback(() => {
+        setItemCount?.(pageSize);
+    }, [pageSize]);
+
+    const onRowClick = useCallback(({ rowData }: {
+        rowData: Entity<M>
+    }) => {
+        if (inlineEditing)
+            return;
+        return onEntityClick && onEntityClick(rowData);
+    }, [onEntityClick, inlineEditing]);
+
+    const select = useCallback((cell?: SelectedCellProps<M>) => {
+        setLocalSelectedCell(cell);
+        selectionStore.select(cell);
+    }, [selectionStore]);
+
+    const unselect = useCallback(() => {
+        setLocalSelectedCell(undefined);
+        selectionStore.select(undefined);
+    }, [selectionStore]);
+
+    useOutsideAlerter(ref,
+        () => {
+            if (localSelectedCell) {
+                unselect();
+            }
+        },
+        Boolean(localSelectedCell));
+
+    // on ESC key press
+    useEffect(() => {
+        const escFunction = (event: KeyboardEvent) => {
+            if (event.keyCode === 27) {
+                unselect();
+            }
+        };
+        document.addEventListener("keydown", escFunction, false);
+        return () => {
+            document.removeEventListener("keydown", escFunction, false);
+        };
+    }, [unselect]);
+
+    const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
+        setFilterValues?.({ ...updatedFilterValues,
+...forceFilter } as FilterValues<any>);
+    }, [forceFilter]);
+
+    const contextValue = useMemo(() => ({
+        setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
+        select,
+        onValueChange,
+        size: size ?? "m",
+        selectionStore
+    } as unknown as EntityCollectionTableController<any>), [setPopupCell, select, onValueChange, size, selectionStore]);
+
+    return (
+        <SelectableTableContext.Provider
+            value={contextValue}>
+            <div className="h-full w-full flex flex-col bg-white dark:bg-surface-800"
+                ref={ref}>
+
+                <VirtualTable
+                    data={data}
+                    columns={columns}
+                    // @ts-ignore
+                    cellRenderer={cellRenderer}
+                    onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
+                    onEndReached={loadNextPage}
+                    onResetPagination={resetPagination}
+                    error={dataLoadingError}
+                    onColumnResize={onColumnResize}
+                    rowHeight={getRowHeight(size)}
+                    loading={dataLoading}
+                    filter={filterValues}
+                    onFilterUpdate={setFilterValues ? onFilterUpdate : undefined}
+                    sortBy={sortBy}
+                    onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"]) => void)}
+                    hoverRow={hoverRow}
+                    initialScroll={initialScroll}
+                    onScroll={onScroll}
+                    checkFilterCombination={checkFilterCombination}
+                    createFilterField={filterable ? createFilterField : undefined}
+                    rowClassName={useCallback((entity: Entity<M>) => {
+                        return highlightedRow?.(entity) ? "bg-surface-50/75 bg-surface-100/75 dark:!bg-surface-800/60" : "";
+                    }, [highlightedRow])}
+                    className="grow"
+                    emptyComponent={emptyComponent}
+                    endAdornment={endAdornment}
+                    AddColumnComponent={AddColumnComponent}
+                    onColumnsOrderChange={onColumnsOrderChange}
+                    extraData={extraData}
+                />
+
+            </div>
+        </SelectableTableContext.Provider>
+    );
+
+};
+
+function createFilterField({
+    id,
+    filterValue,
+    setFilterValue,
+    column,
+    hidden,
+    setHidden
+}: FilterFormFieldProps<{
+    resolvedProperty: Property,
+    disabled: boolean,
+}>): React.ReactNode {
+
+    if (!column.custom) {
+        return null;
+    }
+
+    const { resolvedProperty } = column.custom;
+
+    const isArray = resolvedProperty?.type === "array";
+    const ofVal = isArray && resolvedProperty ? resolvedProperty.of : undefined;
+    const baseProperty: Property | undefined = isArray ? (Array.isArray(ofVal) ? ofVal[0] : ofVal) : resolvedProperty;
+    if (!baseProperty) {
+        return null;
+    }
+    if (baseProperty.type === "reference") {
+        return <ReferenceFilterField value={filterValue}
+            setValue={setFilterValue}
+            name={id as string}
+            isArray={isArray}
+            path={baseProperty.path}
+            title={resolvedProperty?.name}
+            includeId={baseProperty.includeId}
+            previewProperties={baseProperty?.previewProperties}
+            hidden={hidden}
+            setHidden={setHidden}/>;
+    } else if (baseProperty.type === "relation" && baseProperty.relation) {
+        return <RelationFilterField value={filterValue}
+            setValue={setFilterValue}
+            name={id as string}
+            relation={baseProperty.relation}
+            hidden={hidden}
+            setHidden={setHidden}/>;
+    } else if (baseProperty.type === "number" || baseProperty.type === "string") {
+        const name = baseProperty.name;
+        const enumValues = baseProperty.enum ? enumToObjectEntries(baseProperty.enum) : undefined;
+        return <StringNumberFilterField value={filterValue}
+            setValue={setFilterValue}
+            name={id as string}
+            type={baseProperty.type}
+            isArray={isArray}
+            enumValues={enumValues}
+            title={name}/>;
+    } else if (baseProperty.type === "boolean") {
+        const name = baseProperty.name;
+        return <BooleanFilterField value={filterValue}
+            setValue={setFilterValue}
+            name={id as string}
+            title={name}/>;
+
+    } else if (baseProperty.type === "date") {
+        const title = baseProperty.name;
+        return <DateTimeFilterField value={filterValue}
+            setValue={setFilterValue}
+            name={id as string}
+            mode={baseProperty.mode}
+            isArray={isArray}
+            title={title}/>;
+    }
+
+    return (
+        <div>{`Currently the filter field ${resolvedProperty.type} is not supported`}</div>
+    );
+}
+

package/src/components/SelectableTable/SelectableTableContext.tsx

@@ -0,0 +1,6 @@
+import React, { useContext } from "react";
+import { EntityCollectionTableController } from "@rebasepro/core";
+
+export const SelectableTableContext = React.createContext<EntityCollectionTableController<Record<string, unknown>>>(null! as EntityCollectionTableController<Record<string, unknown>>);
+
+export const useSelectableTableController = () => useContext<EntityCollectionTableController<any>>(SelectableTableContext);

package/src/components/SelectableTable/SelectionStore.ts

@@ -0,0 +1,67 @@
+import { useSyncExternalStore, useCallback, useRef } from "react";
+import { SelectedCellProps } from "@rebasepro/types";
+
+/**
+ * A ref-based selection store that avoids React context re-renders.
+ *
+ * The problem with putting `selectedCell` in a React context value is that
+ * ANY cell selection change triggers a context value change, which forces
+ * ALL consumers (every PropertyTableCell in the table) to re-render.
+ * This causes the DOM to be replaced between mousedown and click events,
+ * breaking `alwaysInteractive` cells (like relation selectors) where the
+ * user needs to click a button on the very first interaction.
+ *
+ * This store uses `useSyncExternalStore` so only cells whose `selected`
+ * derivation actually changed will re-render.
+ */
+export function createSelectionStore() {
+    let selectedCell: SelectedCellProps<any> | undefined = undefined;
+    const listeners = new Set<() => void>();
+
+    function getSnapshot(): SelectedCellProps<any> | undefined {
+        return selectedCell;
+    }
+
+    function subscribe(listener: () => void): () => void {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    }
+
+    function select(cell: SelectedCellProps<any> | undefined) {
+        selectedCell = cell;
+        listeners.forEach(l => l());
+    }
+
+    return { getSnapshot, subscribe, select };
+}
+
+export type SelectionStore = ReturnType<typeof createSelectionStore>;
+
+/**
+ * Hook that subscribes a cell to the selection store and returns
+ * whether THIS cell is selected. Only re-renders when the cell's
+ * `selected` boolean actually changes (not on every store update).
+ */
+export function useCellSelected(
+    store: SelectionStore,
+    propertyKey: string,
+    entityPath: string,
+    entityId: string | number
+): boolean {
+    // Memoize a selector that derives a boolean from the store snapshot.
+    // useSyncExternalStore calls this on every store notification, but
+    // React only re-renders when the returned value !== the previous one.
+    const selectorRef = useRef({ propertyKey, entityPath, entityId });
+    selectorRef.current = { propertyKey, entityPath, entityId };
+
+    const getSnapshot = useCallback(() => {
+        const cell = store.getSnapshot();
+        if (!cell) return false;
+        const s = selectorRef.current;
+        return cell.propertyKey === s.propertyKey &&
+            cell.entityPath === s.entityPath &&
+            cell.entityId === s.entityId;
+    }, [store]);
+
+    return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}

package/src/components/SelectableTable/filters/BooleanFilterField.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
+import { BooleanSwitchWithLabel } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/core";
+
+interface BooleanFieldProps {
+    name: string,
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
+    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: any]) => void;
+    title?: string;
+}
+
+export function BooleanFilterField({
+    name,
+    title,
+    value,
+    setValue
+}: BooleanFieldProps) {
+    const { t } = useTranslation();
+
+    function updateFilter(val?: boolean) {
+        if (val !== undefined) {
+            setValue(
+                ["==", val]
+            );
+        } else {
+            setValue(
+                undefined
+            );
+        }
+    }
+
+    const valueSetToTrue = value && value[1];
+    const valueSet = !!value;
+
+    return (
+        <div className="w-full">
+            <BooleanSwitchWithLabel
+                size={"medium"}
+                value={valueSetToTrue}
+                allowIndeterminate={true}
+                onValueChange={(v: boolean | null) => updateFilter(v === null ? undefined : v)}
+                label={!valueSet
+                    ? t("no_filter")
+                    : valueSetToTrue
+                        ? `${title} ${t("is_true")}`
+                        : `${title} ${t("is_false")}`}
+            />
+        </div>
+    );
+}