@rebasepro/cms 0.17.3 → 0.18.0

package/src/components/CollectionViewBinding/FilterPresetsButton.tsx

@@ -1,298 +0,0 @@
-import React, { useCallback, useMemo } from "react";
-import { CheckIcon, ChevronsUpDownIcon, cls, FilterChip, Menu, MenuItem, Tooltip } from "@rebasepro/ui";
-import type { FilterValues, FilterPreset, OrderByTuple } from "@rebasepro/types";
-import { normalizeOrderBy } from "@rebasepro/common";
-import type { EntityTableController, PropertyPath } from "@rebasepro/cms-types";
-
-export interface FilterPresetsButtonProps<M extends Record<string, unknown>> {
-    // Matches `admin.filterPresets`, which is keyed by property path — the
-    // component is fed straight from the collection.
-    filterPresets: FilterPreset<PropertyPath<M>>[];
-    tableController: EntityTableController<M>;
-    compact?: boolean;
-}
-
-/**
- * Maximum number of presets shown as inline toggle chips before the
- * rest are collapsed into an overflow menu.
- */
-const MAX_VISIBLE_PRESETS = 4;
-
-/** Max characters for a chip label before truncation. */
-const MAX_LABEL_LENGTH = 22;
-
-// ─── Helpers ────────────────────────────────────────────────────────
-
-/**
- * Deep equality without JSON.stringify.
- * Handles primitives, arrays, Dates, and plain objects recursively.
- */
-function deepEqual(a: unknown, b: unknown): boolean {
-    if (a === b) return true;
-    if (a == null || b == null) return false;
-    if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
-    if (Array.isArray(a) && Array.isArray(b)) {
-        if (a.length !== b.length) return false;
-        return a.every((v, i) => deepEqual(v, b[i]));
-    }
-    if (typeof a === "object" && typeof b === "object") {
-        const aKeys = Object.keys(a as Record<string, unknown>);
-        const bKeys = Object.keys(b as Record<string, unknown>);
-        if (aKeys.length !== bKeys.length) return false;
-        return aKeys.every(k =>
-            deepEqual(
-                (a as Record<string, unknown>)[k],
-                (b as Record<string, unknown>)[k]
-            )
-        );
-    }
-    return false;
-}
-
-/**
- * Check if a preset's filters are a subset of the controller's
- * current filter values (key-by-key deep comparison on the tuples).
- */
-function isPresetActive(
-    preset: FilterPreset<string>,
-    controllerFilters: Record<string, unknown> | undefined
-): boolean {
-    if (!controllerFilters) return false;
-    const entries = Object.entries(preset.filterValues);
-    if (entries.length === 0) return false;
-    for (const [key, presetTuple] of entries) {
-        const controllerTuple = controllerFilters[key];
-        if (!controllerTuple || !presetTuple) return false;
-        if (!deepEqual(presetTuple, controllerTuple)) return false;
-    }
-    return true;
-}
-
-/**
- * Generate a human-readable label from filter keys when no explicit label is provided.
- */
-function generateLabel(filterValues: FilterValues<string>): string {
-    const keys = Object.keys(filterValues);
-    if (keys.length === 0) return "Filter";
-    if (keys.length === 1) return keys[0].replace(/_/g, " ");
-    if (keys.length === 2) return keys.map(k => k.replace(/_/g, " ")).join(" + ");
-    return `${keys[0].replace(/_/g, " ")} +${keys.length - 1}`;
-}
-
-/**
- * Truncate a label if it exceeds MAX_LABEL_LENGTH.
- */
-function truncateLabel(label: string): { display: string; truncated: boolean } {
-    if (label.length <= MAX_LABEL_LENGTH) return { display: label,
-truncated: false };
-    return { display: label.slice(0, MAX_LABEL_LENGTH - 1) + "…",
-truncated: true };
-}
-
-// ─── Overflow Menu ──────────────────────────────────────────────────
-
-interface OverflowMenuProps {
-    presets: { preset: FilterPreset<string>; originalIndex: number }[];
-    activeSet: Set<number>;
-    onToggle: (index: number) => void;
-}
-
-function OverflowMenu({ presets, activeSet, onToggle }: OverflowMenuProps) {
-    const activeCount = presets.filter(p => activeSet.has(p.originalIndex)).length;
-
-    const trigger = (
-        <FilterChip
-            active={activeCount > 0}
-            icon={<ChevronsUpDownIcon size={12} />}
-        >
-            +{presets.length}
-        </FilterChip>
-    );
-
-    return (
-        <Menu trigger={trigger} side="bottom" align="start">
-            <div className="min-w-[180px] max-w-[300px] max-h-[320px] overflow-y-auto">
-                {presets.map(({ preset, originalIndex }) => {
-                    const rawLabel = preset.label ?? generateLabel(preset.filterValues as FilterValues<string>);
-                    const active = activeSet.has(originalIndex);
-
-                    return (
-                        <MenuItem
-                            key={originalIndex}
-                            dense
-                            onClick={() => onToggle(originalIndex)}
-                            className={cls(active && "bg-primary/10 dark:bg-primary/20")}
-                        >
-                            <span className="flex items-center gap-2 w-full min-w-0">
-                                {active && <CheckIcon size={14} className="text-primary shrink-0" />}
-                                <span className={cls("truncate", active ? "text-primary font-medium" : "")}>
-                                    {rawLabel}
-                                </span>
-                            </span>
-                        </MenuItem>
-                    );
-                })}
-            </div>
-        </Menu>
-    );
-}
-
-// ─── Main Component ─────────────────────────────────────────────────
-
-/**
- * Filter Presets — displayed as inline toggle chips in the collection toolbar.
- *
- * Active state is **derived** from the controller's actual filter values,
- * not tracked locally. A chip is "active" when ALL of its filter entries
- * match the current controller state (deep value comparison, no JSON.stringify).
- *
- * This means:
- * - Toggling a preset on adds its filters to the controller.
- * - Toggling it off removes its filter keys.
- * - Changing filters via the dialog automatically deactivates unmatched chips.
- * - Clearing all filters deactivates all chips.
- * - Multiple presets can be active simultaneously.
- */
-export function FilterPresetsButton<M extends Record<string, unknown>>({
-    filterPresets,
-    tableController,
-    compact
-}: FilterPresetsButtonProps<M>) {
-
-    // ── Derive active state from controller ─────────────────────────
-    const activeSet = useMemo(() => {
-        const set = new Set<number>();
-        if (!filterPresets.length || !tableController.setFilterValues) return set;
-        for (let i = 0; i < filterPresets.length; i++) {
-            if (isPresetActive(
-                filterPresets[i] as FilterPreset<string>,
-                tableController.filterValues as Record<string, unknown> | undefined
-            )) {
-                set.add(i);
-            }
-        }
-        return set;
-    }, [filterPresets, tableController.filterValues, tableController.setFilterValues]);
-
-    // ── Toggle handler ──────────────────────────────────────────────
-    const handleToggle = useCallback((index: number) => {
-        const preset = filterPresets[index] as FilterPreset<string>;
-        const currentFilters = { ...(tableController.filterValues ?? {}) } as Record<string, [string, unknown]>;
-        const wasActive = isPresetActive(preset, currentFilters);
-
-        if (wasActive) {
-            // Toggle OFF: remove this preset's filter keys
-            for (const key of Object.keys(preset.filterValues)) {
-                delete currentFilters[key];
-            }
-            // Re-apply overlapping keys from other still-active presets
-            for (let i = 0; i < filterPresets.length; i++) {
-                if (i === index) continue;
-                const other = filterPresets[i] as FilterPreset<string>;
-                if (isPresetActive(other, currentFilters)) {
-                    Object.assign(currentFilters, other.filterValues);
-                }
-            }
-        } else {
-            // Toggle ON: merge this preset's filters on top
-            Object.assign(currentFilters, preset.filterValues);
-        }
-
-        // Apply
-        if (Object.keys(currentFilters).length === 0) {
-            if (tableController.clearFilter) {
-                tableController.clearFilter();
-            } else {
-                tableController.setFilterValues?.(
-                    {} as FilterValues<Extract<keyof M, string> | (string & {})>
-                );
-            }
-            tableController.setSortBy?.(undefined);
-        } else {
-            tableController.setFilterValues?.(
-                currentFilters as FilterValues<Extract<keyof M, string> | (string & {})>
-            );
-
-            // Resolve sort: use the toggled preset's sort if toggling on,
-            // otherwise find sort from remaining active presets
-            if (!wasActive && preset.sort) {
-                tableController.setSortBy?.(
-                    normalizeOrderBy(preset.sort) as OrderByTuple<Extract<keyof M, string> | (string & {})>[]
-                );
-            } else if (wasActive) {
-                let remainingSort: OrderByTuple[] | undefined;
-                for (let i = 0; i < filterPresets.length; i++) {
-                    if (i === index) continue;
-                    const other = filterPresets[i] as FilterPreset<string>;
-                    if (isPresetActive(other, currentFilters) && other.sort) {
-                        remainingSort = normalizeOrderBy(other.sort);
-                    }
-                }
-                tableController.setSortBy?.(
-                    remainingSort as OrderByTuple<Extract<keyof M, string> | (string & {})>[] | undefined
-                );
-            }
-        }
-    }, [filterPresets, tableController]);
-
-    // ── Guard (after hooks to preserve Rules of Hooks) ──────────────
-    if (!filterPresets.length || !tableController.setFilterValues) return null;
-
-    // ── Split visible vs overflow ───────────────────────────────────
-    const maxVisible = compact ? 2 : MAX_VISIBLE_PRESETS;
-    const needsOverflow = filterPresets.length > maxVisible;
-    const visibleCount = needsOverflow ? maxVisible - 1 : filterPresets.length;
-
-    const visiblePresets = filterPresets.slice(0, visibleCount);
-    const overflowPresets = needsOverflow
-        ? filterPresets.slice(visibleCount).map((preset, i) => ({
-            preset: preset as FilterPreset<string>,
-            originalIndex: visibleCount + i
-        }))
-        : [];
-
-    const hasOverflow = overflowPresets.length > 0;
-
-    return (
-        <div className="flex items-center gap-1 min-w-0 overflow-hidden">
-            {/* Scrollable chip area — on narrow screens chips scroll,
-                on desktop there's enough space so no scroll occurs.
-                py-0.5 gives the inset shadow breathing room inside the clip area. */}
-            <div
-                className="flex items-center gap-1 min-w-0 overflow-x-auto py-0.5"
-                style={{ scrollbarWidth: "none" }}
-            >
-                {visiblePresets.map((preset, index) => {
-                    const rawLabel = preset.label ?? generateLabel(preset.filterValues as FilterValues<string>);
-                    const { display, truncated } = truncateLabel(rawLabel);
-                    const active = activeSet.has(index);
-
-                    const chip = (
-                        <FilterChip
-                            key={index}
-                            active={active}
-                            onClick={() => handleToggle(index)}
-                            size="small"
-                        >
-                            {display}
-                        </FilterChip>
-                    );
-
-                    if (truncated) {
-                        return <Tooltip key={index} title={rawLabel}>{chip}</Tooltip>;
-                    }
-                    return chip;
-                })}
-            </div>
-
-            {/* Overflow button — always pinned outside the scroll area */}
-            {hasOverflow && (
-                <OverflowMenu
-                    presets={overflowPresets}
-                    activeSet={activeSet}
-                    onToggle={handleToggle}
-                />
-            )}
-        </div>
-    );
-}

package/src/components/CollectionViewBinding/FiltersDialog.tsx

@@ -1,218 +0,0 @@
-
-import type { Property } from "@rebasepro/types";
-import React, { useCallback, useMemo, useState } from "react";
-import { FilterValues, WhereFilterOp } from "@rebasepro/types";
-import { Button, cls, defaultBorderMixin, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
-import { FilterIcon, VirtualTableWhereFilterOp } from "@rebasepro/ui";
-import { resolveFilterOperators } from "@rebasepro/app";
-import { useCollectionScope, useTranslation } from "@rebasepro/app";
-import { FilterFieldBinding } from "../SelectableTable/filters/FilterFieldBinding";
-
-/**
- * `WhereFilterOp` is declared twice: once in `@rebasepro/types` as the canonical
- * operator set every driver translates, and once in `@rebasepro/ui` for the
- * table's own props. That is deliberate — `ui` is a standalone design system and
- * depends on no Rebase package, so it cannot import the canonical one (and a
- * type-only import would not help: `ui` emits declarations with `tsc`, which
- * references external types rather than inlining them, so its published `.d.ts`
- * would demand `@rebasepro/types` from every consumer).
- *
- * This file is where the two meet and get cast into each other, so it is where
- * their agreement is checked. Adding an operator to one and not the other stops
- * this line compiling instead of silently producing a filter the table can build
- * and no driver can run — or one a driver supports and the table cannot offer.
- */
-type MutuallyAssignable<A, B> = [A] extends [B] ? ([B] extends [A] ? true : never) : never;
-const _whereFilterOpDefinitionsAgree: MutuallyAssignable<WhereFilterOp, VirtualTableWhereFilterOp> = true;
-void _whereFilterOpDefinitionsAgree;
-
-export interface FiltersDialogProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    properties: Record<string, Property>;
-    filterValues: FilterValues<any> | undefined;
-    setFilterValues: (filterValues?: FilterValues<any>) => void;
-    fixedFilter?: FilterValues<any>;
-}
-
-/**
- * Dialog that displays all filterable properties from a collection
- * and allows setting filter values for each.
- */
-export function FiltersDialog({
-    open,
-    onOpenChange,
-    properties,
-    filterValues,
-    setFilterValues,
-    fixedFilter
-}: FiltersDialogProps) {
-    const { t } = useTranslation();
-    // Engine of the collection this dialog filters — read from the
-    // surrounding CollectionScopeProvider mounted by the collection view.
-    const engine = useCollectionScope()?.engine;
-    // Local state for filters being edited
-    const [localFilters, setLocalFilters] = useState<FilterValues<any>>(filterValues ?? {});
-
-    // Track hidden state for reference fields (when reference dialog is open)
-    const [hiddenFields, setHiddenFields] = useState<Record<string, boolean>>({});
-
-    // Reset local state when dialog opens
-    React.useEffect(() => {
-        if (open) {
-            setLocalFilters(filterValues ?? {});
-        }
-    }, [open, filterValues]);
-
-    // Get list of filterable properties
-    const filterableProperties = useMemo(() => {
-        return Object.entries(properties).filter(([key, property]) => {
-            if (!property) return false;
-            // Force filter properties should not be editable
-            if (fixedFilter && key in fixedFilter) return false;
-            const isArray = property.type === "array";
-            const ofProp = isArray && "of" in property ? property.of : undefined;
-            const baseProperty = isArray ? (Array.isArray(ofProp) ? ofProp[0] : ofProp) as Property | undefined : property;
-            if (!baseProperty) return false;
-            // A property is filterable when it has a custom filter field, or
-            // when at least one operator survives the engine ∩ type ∩
-            // property-narrowing resolution.
-            if (baseProperty.admin?.Filter) return true;
-            return resolveFilterOperators({ property: baseProperty, isArray, engine }).length > 0;
-        });
-    }, [properties, fixedFilter, engine]);
-
-    const handleFilterChange = useCallback((propertyKey: string, value?: [VirtualTableWhereFilterOp, any]) => {
-        setLocalFilters(prev => {
-            const newFilters = { ...prev };
-            if (value) {
-                newFilters[propertyKey] = value as [WhereFilterOp, any];
-            } else {
-                delete newFilters[propertyKey];
-            }
-            return newFilters;
-        });
-    }, []);
-
-    const handleApply = useCallback(() => {
-        const hasFilters = Object.keys(localFilters).length > 0;
-        setFilterValues(hasFilters ? { ...localFilters,
-...fixedFilter } : (fixedFilter || undefined));
-        onOpenChange(false);
-    }, [localFilters, setFilterValues, fixedFilter, onOpenChange]);
-
-    const handleClearAll = useCallback(() => {
-        setLocalFilters({});
-    }, []);
-
-    const setHiddenForField = useCallback((propertyKey: string, hidden: boolean) => {
-        setHiddenFields(prev => ({
-            ...prev,
-            [propertyKey]: hidden
-        }));
-    }, []);
-
-    // Check if any reference field's dialog is currently open (should hide this dialog)
-    const isAnyFieldHidden = Object.values(hiddenFields).some(hidden => hidden);
-    const activeFilterCount = Object.keys(localFilters).length;
-
-    const renderFilterField = useCallback((propertyKey: string, property: Property) => {
-        const filterValue = localFilters[propertyKey] as [WhereFilterOp, any] | undefined;
-        const setValue = (value?: [WhereFilterOp, any]) => handleFilterChange(propertyKey, value as [VirtualTableWhereFilterOp, any] | undefined);
-
-        return (
-            <FilterFieldBinding
-                propertyKey={propertyKey}
-                property={property}
-                engine={engine}
-                value={filterValue}
-                setValue={setValue}
-                hidden={hiddenFields[propertyKey] ?? false}
-                setHidden={(hidden) => setHiddenForField(propertyKey, hidden)}
-            />
-        );
-    }, [localFilters, handleFilterChange, hiddenFields, setHiddenForField, engine]);
-
-    return (
-        <Dialog
-            open={open}
-            onOpenChange={onOpenChange}
-            maxWidth="3xl"
-            fullWidth
-            containerClassName={isAnyFieldHidden ? "hidden" : undefined}
-        >
-            <DialogTitle className="flex items-center gap-2" variant="h6">
-                {t("filters")}
-                {activeFilterCount > 0 && (
-                    <span className="ml-2 px-2 py-0.5 text-xs rounded-full bg-primary text-white">
-                        {activeFilterCount}
-                    </span>
-                )}
-            </DialogTitle>
-
-            <DialogContent >
-                {filterableProperties.length === 0 ? (
-                    <Typography color="secondary" className="py-8 text-center">
-                        {t("no_filterable_properties")}
-                    </Typography>
-                ) : (
-                    <table className="w-full border-collapse">
-                        <tbody>
-                            {filterableProperties.map(([propertyKey, property], index) => {
-                                const hasFilter = propertyKey in localFilters;
-
-                                return (
-                                    <tr key={propertyKey} className={cls(
-                                        index > 0 && "border-t",
-                                        defaultBorderMixin
-                                    )}>
-                                        {/* Property name on the left */}
-                                        <td className="py-3 pr-4 align-middle w-[160px]">
-                                            <Typography
-                                                variant="body2"
-                                                className={cls(
-                                                    "font-medium",
-                                                    hasFilter && "text-primary"
-                                                )}
-                                            >
-                                                {property.name || propertyKey}
-                                            </Typography>
-                                        </td>
-
-                                        {/* FilterIcon field on the right */}
-                                        <td className="py-3">
-                                            {renderFilterField(propertyKey, property)}
-                                        </td>
-                                    </tr>
-                                );
-                            })}
-                        </tbody>
-                    </table>
-                )}
-            </DialogContent>
-
-            <DialogActions>
-                <Button
-                    variant="text"
-                    onClick={handleClearAll}
-                    disabled={activeFilterCount === 0}
-                >
-                    {t("clear_all")}
-                </Button>
-                <div className="flex-grow"/>
-                <Button
-                    variant="text"
-                    onClick={() => onOpenChange(false)}
-                >
-                    {t("cancel")}
-                </Button>
-                <Button
-                    variant="filled"
-                    onClick={handleApply}
-                >
-                    {t("apply_filters")}
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
-}

package/src/components/CollectionViewBinding/SearchExplanation.tsx

@@ -1,106 +0,0 @@
-import React, { useMemo } from "react";
-import type { SearchMatch } from "@rebasepro/types";
-import { Snippet, searchTerms, offSlotMatch, localRowMatch } from "./SearchHighlight";
-
-/**
- * The one place a view asks "why is this row here?" and gets something to draw.
- *
- * List, cards and board all render the same title-and-subtitle slots over the
- * same machinery. An explanation that shows up in one of them and not the others
- * reads as randomness rather than as a feature, so the decision and the markup
- * live here and each view calls them.
- */
-
-/**
- * Terms to mark inside values the row already shows, plus the single match
- * worth putting where the subtitle would go — or nothing, when the row is not
- * the product of a search or the hit is already visible.
- *
- * Prefers the server's `_matches`, which knows the stemming the index used, and
- * falls back to reading the row directly. That fallback is not belt-and-braces:
- * rows reach the panel over REST, the realtime socket and the offline cache,
- * and only one of those carries query metadata.
- */
-export function useSearchExplanation(
-    entity: { values?: Record<string, unknown>; searchMatches?: SearchMatch[] },
-    properties: Record<string, unknown> | undefined,
-    shownKeys: (string | undefined)[],
-    searchString: string | undefined
-): { terms: string[]; offSlot: SearchMatch | undefined } {
-    const terms = useMemo(() => searchTerms(searchString), [searchString]);
-
-    // Joined so the memo compares by value: the caller builds this array inline,
-    // so its identity changes every render and would defeat the memo entirely.
-    //
-    // `|` is the separator because a property path is identifiers and dots — it
-    // cannot contain one, so the round trip is lossless. (A NUL would also be
-    // unambiguous and is what this first used; a raw control byte in a source
-    // file makes grep treat the whole file as binary, and the repo rejects it.)
-    const shownKey = shownKeys.map(k => k ?? "").join("|");
-
-    const offSlot = useMemo(
-        () => {
-            if (terms.length === 0) return undefined;
-            const shown = shownKey.split("|").map(k => k || undefined);
-            return offSlotMatch(entity.searchMatches, shown)
-                ?? localRowMatch(entity.values, properties, terms, shown);
-        },
-        [entity.searchMatches, entity.values, properties, shownKey, terms]
-    );
-
-    return { terms, offSlot };
-}
-
-/**
- * Which field the hit was in, and the text around it.
- *
- * Sits where the subtitle would have gone. Deliberately quiet — a small amber
- * caption and one line — because it is context for a result, not the result. It
- * has to survive a narrow column, so it truncates rather than wraps.
- */
-export function MatchExplanation({ match, label }: { match: SearchMatch; label: string }) {
-    return (
-        <div className="mt-0.5 flex items-baseline gap-1.5 min-w-0">
-            <span
-                className="shrink-0 text-[10px] uppercase tracking-wide font-semibold text-amber-700 dark:text-amber-500/90"
-                title={match.field}
-            >
-                {label}
-            </span>
-            <span className="truncate text-xs text-surface-500 dark:text-surface-400 min-w-0">
-                <Snippet text={match.snippet}/>
-            </span>
-        </div>
-    );
-}
-
-/**
- * What to call a matched field on screen.
- *
- * The path is what the config and the server speak — `questionnaire.
- * certifications` — and is unreadable in a list. Resolve it to the property's
- * declared `name`, walking into `map` properties for a dotted path, and fall
- * back to the last segment humanised, so an unnamed field still reads as words
- * rather than as a path.
- */
-export function fieldLabel(properties: Record<string, unknown> | undefined, path: string): string {
-    const segments = path.split(".");
-    let node = properties;
-    let named: string | undefined;
-
-    for (const segment of segments) {
-        const property = node?.[segment] as { name?: string; properties?: Record<string, unknown> } | undefined;
-        // A path can run deeper than the schema describes — `content.value`,
-        // where `content` is an array of blocks whose shape is not declared
-        // property-by-property. Keep the last name that *was* declared rather
-        // than discarding it: "Content" is the answer a reader wants, and
-        // resetting to undefined here labelled that field "Value".
-        if (!property) break;
-        named = property.name ?? named;
-        node = property.properties;
-    }
-
-    if (named) return named;
-    const last = segments[segments.length - 1] ?? path;
-    return last.replace(/[_-]+/g, " ").replace(/^./, c => c.toUpperCase());
-}