@rebasepro/cms 0.17.3 → 0.18.0

package/src/components/SearchIconsView.tsx

@@ -1,78 +0,0 @@
-import React from "react";
-
-import {
-    coolIconKeys,
-    debounce,
-    IconButton,
-    iconSize,
-    LucideIconByName,
-    SearchBar,
-    Tooltip
-} from "@rebasepro/ui";
-import { iconsSearch } from "@rebasepro/app";
-import { useTranslation } from "@rebasepro/app";
-
-const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
-
-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) => (
-                    <Tooltip title={icon} key={icon}
-                        asChild={true}>
-                        <IconButton
-                            shape={"square"}
-                            toggled={selectedIcon === icon}
-                            onClick={onIconSelected ? () => onIconSelected(icon) : undefined}
-                            className="box-content m-1"
-                        >
-                            <LucideIconByName name={icon} size={iconSize.medium}/>
-                        </IconButton>
-                    </Tooltip>
-                ))}
-            </div>
-        </>
-    );
-}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -1,309 +0,0 @@
-import { createSelectionStore, AdminSelectedCell } from "./SelectionStore";
-import type { Property, WhereFilterOp } from "@rebasepro/types";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { Entity, FilterValues } from "@rebasepro/types";
-import { CollectionSize, EntityTableController, SelectedCellProps, AdminCollection } from "@rebasepro/cms-types";
-import { CellRendererParams, VirtualTable, VirtualTableColumn, VirtualTableFilterValues, OnRowClickParams } from "@rebasepro/ui";
-import { DEFAULT_PAGE_SIZE, DataCollectionTableController, OnCellValueChange, OnColumnResizeParams } from "@rebasepro/app";
-import { FilterFormFieldProps } from "@rebasepro/ui";
-import { useOutsideAlerter } from "@rebasepro/ui";
-import { SelectableTableContext } from "./SelectableTableContext";
-import { getRowHeight } from "@rebasepro/app";
-import { FilterFieldBinding } from "./filters/FilterFieldBinding";
-
-export type SelectableTableProps<M extends Record<string, unknown>> = {
-
-    /**
-     * Callback when a cell value changes.
-     */
-    onValueChange?: OnCellValueChange<unknown, M>;
-
-    columns: VirtualTableColumn[];
-
-    cellRenderer: (props: CellRendererParams<Entity<M>>) => React.ReactNode;
-
-    /**
-     * 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;
-
-    fixedFilter?: 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?: unknown;
-}
-
-/**
- * This component is in charge of rendering a collection table with a high
- * degree of customization.
- *
- * This component is used internally by {@link CollectionViewBinding} 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 AdminCollection} to a table with the default
- * options you see in collections in the top level navigation, you can
- * check {@link CollectionViewBinding}.
- *
- * 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 CollectionTableBindingProps
- * @see CollectionViewBinding
- * @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,
-        fixedFilter,
-        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 }: OnRowClickParams<Record<string, unknown>>) => {
-        if (inlineEditing)
-            return;
-        return onEntityClick && onEntityClick(rowData as unknown as Entity<M>);
-    }, [onEntityClick, inlineEditing]);
-
-    const select = useCallback((cell?: SelectedCellProps<M>) => {
-        setLocalSelectedCell(cell);
-        if (cell) {
-            selectionStore.select({
-                ...cell,
-                columnKey: cell.propertyKey,
-                id: cell.entityId
-            } as AdminSelectedCell);
-        } else {
-            selectionStore.select(undefined);
-        }
-    }, [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.key === "Escape") {
-                unselect();
-            }
-        };
-        document.addEventListener("keydown", escFunction, false);
-        return () => {
-            document.removeEventListener("keydown", escFunction, false);
-        };
-    }, [unselect]);
-
-    const onFilterUpdate = useCallback((updatedFilterValues?: VirtualTableFilterValues<string>) => {
-        if (setFilterValues) {
-            setFilterValues({
-                ...updatedFilterValues,
-                ...fixedFilter
-            } as FilterValues<Extract<keyof M, string> | (string & {})>);
-        }
-    }, [fixedFilter, setFilterValues]);
-
-    const contextValue = useMemo(() => ({
-        select,
-        onValueChange,
-        size: size ?? "m",
-        selectionStore,
-        setPopupCell
-    } as unknown as DataCollectionTableController<Record<string, unknown>>), [setPopupCell, select, onValueChange, size, selectionStore]);
-
-    const createFilterField = useCallback(({
-        id,
-        filterValue,
-        setFilterValue,
-        column,
-        hidden,
-        setHidden
-    }: FilterFormFieldProps<unknown>): React.ReactNode => {
-        if (!column.custom) return null;
-        const { resolvedProperty } = column.custom as { resolvedProperty?: Property };
-        if (!resolvedProperty) return null;
-        // Engine-aware operator resolution happens inside FilterFieldBinding,
-        // which reads the collection from the surrounding CollectionScopeProvider.
-        return <FilterFieldBinding
-            propertyKey={id as string}
-            property={resolvedProperty}
-            value={filterValue as [WhereFilterOp, unknown] | undefined}
-            setValue={setFilterValue as (value?: [WhereFilterOp, unknown]) => void}
-            hidden={hidden}
-            setHidden={setHidden}/>;
-    }, []);
-
-    return (
-        <SelectableTableContext.Provider
-            value={contextValue}>
-            <div className="h-full w-full flex flex-col bg-white dark:bg-surface-900"
-                ref={ref}>
-
-                 <VirtualTable
-                    data={data as unknown as Record<string, unknown>[]}
-                    columns={columns}
-                    cellRenderer={(props) => cellRenderer(props as unknown as CellRendererParams<Entity<M>>)}
-                    onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
-                    onEndReached={loadNextPage}
-                    onResetPagination={resetPagination}
-                    error={dataLoadingError}
-                    onColumnResize={onColumnResize}
-                    rowHeight={getRowHeight(size)}
-                    loading={dataLoading}
-                    filter={filterValues as any}
-                    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: Record<string, unknown>) => {
-                        return highlightedRow?.(entity as unknown as Entity<M>) ? "bg-surface-accent-50 dark:!bg-surface-accent-900" : "";
-                    }, [highlightedRow])}
-                    className="grow"
-                    emptyComponent={emptyComponent}
-                    endAdornment={endAdornment}
-                    AddColumnComponent={AddColumnComponent}
-                    onColumnsOrderChange={onColumnsOrderChange}
-                    extraData={extraData}
-                />
-
-            </div>
-        </SelectableTableContext.Provider>
-    );
-
-};
-

package/src/components/SelectableTable/SelectableTableContext.tsx

@@ -1,7 +0,0 @@
-import React, { useContext } from "react";
-import { DataCollectionTableController } from "@rebasepro/app";
-
-export const SelectableTableContext = React.createContext<DataCollectionTableController<Record<string, unknown>>>(null! as DataCollectionTableController<Record<string, unknown>>);
-
-export const useSelectableTableController = <M extends Record<string, unknown> = Record<string, unknown>>() =>
-    useContext(SelectableTableContext) as unknown as DataCollectionTableController<M>;

package/src/components/SelectableTable/SelectionStore.ts

@@ -1,43 +0,0 @@
-import { useSyncExternalStore, useCallback, useRef } from "react";
-import { SelectedCellProps } from "@rebasepro/cms-types";
-import {
-    createVirtualTableSelectionStore,
-    VirtualTableSelectionStore,
-    SelectedCell
-} from "@rebasepro/ui";
-
-export interface AdminSelectedCell extends SelectedCell {
-    entityPath: string;
-    entityId: string | number;
-    propertyKey: string;
-    cellRect: DOMRect;
-    width: number;
-    height: number;
-}
-
-export function createSelectionStore() {
-    return createVirtualTableSelectionStore<AdminSelectedCell>();
-}
-
-export type SelectionStore = VirtualTableSelectionStore<AdminSelectedCell>;
-
-export function useCellSelected(
-    store: { getEntity: () => SelectedCellProps | undefined; subscribe: (listener: () => void) => () => void },
-    propertyKey: string,
-    entityPath: string,
-    entityId: string | number
-): boolean {
-    const selectorRef = useRef({ propertyKey, entityPath, entityId });
-    selectorRef.current = { propertyKey, entityPath, entityId };
-
-    const getEntity = useCallback(() => {
-        const cell = store.getEntity();
-        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, getEntity, getEntity);
-}

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

@@ -1,59 +0,0 @@
-import React from "react";
-import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
-import { BooleanSwitchWithLabel } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
-
-interface BooleanFieldProps {
-    name: string,
-    value?: [op: VirtualTableWhereFilterOp, fieldValue: unknown];
-    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: unknown]) => void;
-    title?: string;
-    /**
-     * Restrict the offered operators. This field only ever emits `["==", …]`,
-     * so it renders nothing when `==` is not allowed.
-     */
-    operators?: readonly VirtualTableWhereFilterOp[];
-}
-
-export function BooleanFilterField({
-    name,
-    title,
-    value,
-    setValue,
-    operators
-}: BooleanFieldProps) {
-    const { t } = useTranslation();
-
-    if (operators && !operators.includes("==")) return null;
-
-    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 as boolean | null}
-                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>
-    );
-}

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

@@ -1,146 +0,0 @@
-import React, { useState } from "react";
-import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
-import { DateTimeField, Select, SelectItem } from "@rebasepro/ui";
-import { useCustomizationController } from "@rebasepro/app";
-
-interface DateTimeFilterFieldProps {
-    name: string,
-    mode?: "date" | "date_time",
-    value?: [op: VirtualTableWhereFilterOp, fieldValue: unknown];
-    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: unknown]) => void;
-    isArray?: boolean;
-    title?: string;
-    timezone?: string;
-    /**
-     * Restrict the offered operators (already resolved against engine
-     * capabilities and property config). When omitted, all operators this
-     * field can render are offered.
-     */
-    operators?: readonly VirtualTableWhereFilterOp[];
-}
-
-const operationLabels: Partial<Record<VirtualTableWhereFilterOp, string>> = {
-    "==": "==",
-    "!=": "!=",
-    ">": ">",
-    "<": "<",
-    ">=": ">=",
-    "<=": "<=",
-    "not-in": "not in",
-    in: "in",
-    "array-contains": "Contains",
-    "array-contains-any": "Any",
-    "is-null": "Is null",
-    "is-not-null": "Is not null"
-};
-
-const multipleSelectOperations = ["array-contains-any", "in"];
-
-export function DateTimeFilterField({
-    name,
-    isArray,
-    mode,
-    value,
-    setValue,
-    title,
-    timezone,
-    operators
-}: DateTimeFilterFieldProps) {
-
-    const { locale } = useCustomizationController();
-    let possibleOperations: (keyof typeof operationLabels)[] = isArray
-        ? ["array-contains"]
-        : ["==", "!=", ">", "<", ">=", "<=", "is-null", "is-not-null"];
-
-    if (operators) {
-        possibleOperations = possibleOperations.filter(op => (operators as readonly string[]).includes(op));
-    }
-
-    const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
-    // Read back both the canonical null operators and the legacy `["==", null]` /
-    // `["!=", null]` form saved by older filter presets.
-    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(
-        fieldOperation === "==" && fieldValue === null ? "is-null"
-            : fieldOperation === "!=" && fieldValue === null ? "is-not-null"
-                : fieldOperation
-    );
-    const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue as Date | null | undefined);
-
-    const isNullOperation = operation === "is-null" || operation === "is-not-null";
-
-    // All renderable operators were filtered out (engine/property narrowing).
-    if (possibleOperations.length === 0) return null;
-
-    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined | null) {
-        // Null-testing operators ignore their value.
-        if (op === "is-null" || op === "is-not-null") {
-            setOperation(op);
-            setInternalValue(null);
-            setValue([op, null]);
-            return;
-        }
-
-        let newValue: Date | Date[] | null | undefined = val;
-        const prevOpIsArray = multipleSelectOperations.includes(operation);
-        const newOpIsArray = multipleSelectOperations.includes(op);
-        if (prevOpIsArray !== newOpIsArray) {
-            newValue = newOpIsArray ? (val ? [val] : []) : undefined;
-        }
-
-        setOperation(op);
-        setInternalValue(Array.isArray(newValue) ? newValue[0] ?? null : newValue);
-
-        const hasNewValue = newValue !== null && Array.isArray(newValue)
-            ? newValue.length > 0
-            : newValue !== undefined;
-        if (op && hasNewValue) {
-            setValue(
-                [op, newValue]
-            );
-        } else {
-            setValue(
-                undefined
-            );
-        }
-    }
-
-    return (
-
-        <div className="flex w-full">
-            <div className="w-[100px]">
-                <Select value={operation}
-                    size={"medium"}
-                    fullWidth={true}
-                    onValueChange={(value) => {
-                        updateFilter(value as VirtualTableWhereFilterOp, internalValue);
-                    }}
-                    renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}>
-                    {possibleOperations.map((op) => (
-                        <SelectItem key={op} value={op}>
-                            {operationLabels[op]}
-                        </SelectItem>
-                    ))}
-                </Select>
-            </div>
-
-            <div className="grow ml-2 flex flex-col gap-2">
-
-                <DateTimeField
-                    mode={mode}
-                    size={"medium"}
-                    locale={locale}
-                    timezone={timezone}
-                    disabled={isNullOperation}
-                    value={isNullOperation ? undefined : (internalValue ?? undefined)}
-                    onChange={(dateValue: Date | null) => {
-                        updateFilter(operation, dateValue === null ? undefined : dateValue);
-                    }}
-                    clearable={true}
-                />
-
-            </div>
-
-        </div>
-    );
-
-}