@rebasepro/cms 0.17.3 → 0.18.0

package/src/components/CollectionPanel.tsx

@@ -1,179 +0,0 @@
-
-import type { ViewMode, AdminCollection } from "@rebasepro/cms-types";
-import React, { useMemo } from "react";
-import { CollectionViewBinding } from "./CollectionViewBinding/CollectionViewBinding";
-import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
-import { Typography } from "@rebasepro/ui";
-import { useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
-
-/**
- * Props for the {@link CollectionPanel} component.
- *
- * This is a high-level, consumer-friendly wrapper around {@link CollectionViewBinding}
- * designed for embedding collection views inside custom pages (home pages,
- * dashboards, entity detail views, etc.).
- *
- * At minimum, provide the `path` (collection slug). All other props are optional
- * overrides that take precedence over the collection's default configuration.
- *
- * @group Components
- */
-export type CollectionPanelProps = {
-    /**
-     * The collection slug / path to display (e.g. "tasks", "clients").
-     * The collection must be registered in the Rebase context.
-     */
-    path: string;
-
-    /**
-     * Optional title displayed above the collection.
-     * Set to `false` to hide the title entirely.
-     * Defaults to the collection's `name`.
-     */
-    title?: string | false;
-
-    /**
-     * Force a specific view mode, overriding the collection's default.
-     */
-    viewMode?: ViewMode;
-
-    /**
-     * Override the sort field.
-     */
-    sort?: [string, "asc" | "desc"];
-
-    /**
-     * Maximum number of entities to display.
-     */
-    limit?: number;
-
-    /**
-     * Whether to sync filter/sort state with URL query params.
-     * Defaults to `false` (embedded panels shouldn't hijack the URL).
-     */
-    updateUrl?: boolean;
-
-    /**
-     * Override the entity open mode when clicking a entity.
-     */
-    openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
-
-    /**
-     * Additional CSS class name for the container.
-     */
-    className?: string;
-
-    /**
-     * Any additional collection-level overrides (e.g. `previewProperties`,
-     * `enabledViews`, `entityActions`, `defaultFilter`, etc.).
-     */
-    collectionOverrides?: Partial<AdminCollection>;
-};
-
-/**
- * A high-level, reusable wrapper for embedding a Rebase collection view
- * inside custom pages (dashboards, home pages, entity detail views, etc.).
- *
- * Usage:
- * ```tsx
- * import { CollectionPanel } from "@rebasepro/cms";
- *
- * function MyDashboard() {
- *     return (
- *         <div>
- *             <CollectionPanel path="tasks" title="Pending Tasks" />
- *             <CollectionPanel
- *                 path="clients"
- *                 viewMode="table"
- *                 collectionOverrides={{
- *                     defaultFilter: { status: ["!=", "completed"] }
- *                 }}
- *             />
- *         </div>
- *     );
- * }
- * ```
- *
- * @group Components
- */
-function CollectionPanelInner({
-    mergedCollection,
-    path,
-    title,
-    updateUrl,
-    className
-}: CollectionPanelProps & { mergedCollection: AdminCollection }) {
-    const ResolvedCollectionView = useComponentOverride("Collection.View", CollectionViewBinding);
-
-    return (
-        <div className={className}>
-            {title !== false && (
-                <Typography
-                    variant="subtitle2"
-                    className="font-semibold mb-2 text-surface-700 dark:text-surface-300"
-                >
-                    {title ?? mergedCollection.name}
-                </Typography>
-            )}
-            <ResolvedCollectionView
-                {...mergedCollection}
-                path={path}
-                updateUrl={updateUrl}
-            />
-        </div>
-    );
-}
-
-export function CollectionPanel(props: CollectionPanelProps) {
-    const {
-        path,
-        viewMode,
-        sort,
-        limit,
-        openEntityMode,
-        className,
-        collectionOverrides
-    } = props;
-    const collectionRegistry = useCollectionRegistryController();
-    const registeredCollection = collectionRegistry.getCollection(path);
-
-    const mergedCollection = useMemo(() => {
-        if (!registeredCollection) return undefined;
-
-        // Build overrides object from shorthand props + explicit overrides
-        const propOverrides: Record<string, unknown> = {};
-        if (viewMode) propOverrides.defaultViewMode = viewMode;
-        if (sort) propOverrides.sort = sort;
-        if (limit) propOverrides.pagination = limit;
-        if (openEntityMode) propOverrides.openEntityMode = openEntityMode;
-
-        return {
-            ...registeredCollection,
-            ...(collectionOverrides ?? {}),
-            ...propOverrides
-        } as AdminCollection;
-    }, [registeredCollection, collectionOverrides, viewMode, sort, limit, openEntityMode]);
-
-    if (!mergedCollection) {
-        return (
-            <div className={className}>
-                <Typography variant="body2" color="secondary">
-                    Collection &quot;{path}&quot; not found.
-                </Typography>
-            </div>
-        );
-    }
-
-    const content = (
-        <CollectionPanelInner
-            {...props}
-            mergedCollection={mergedCollection}
-        />
-    );
-
-    return (
-        <CollectionScopeProvider collection={mergedCollection}>
-            {content}
-        </CollectionScopeProvider>
-    );
-}

package/src/components/CollectionTableBinding/CollectionRowActions.tsx

@@ -1,244 +0,0 @@
-
-import type { EntityAction, AdminCollection } from "@rebasepro/cms-types";
-import React, { MouseEvent, useCallback } from "react";
-
-import { Entity } from "@rebasepro/types";
-import { CollectionSize, SelectionController } from "@rebasepro/cms-types";
-import {
-    Badge,
-    Checkbox,
-    cls,
-    IconButton,
-    Menu,
-    MenuItem,
-    MoreVerticalIcon,
-    Skeleton,
-    Tooltip
-} from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
-import { getIcon } from "@rebasepro/app";
-import { getEntityFromCache } from "@rebasepro/app";
-import { getLocalChangesBackup } from "@rebasepro/app";
-import { useAdminContext } from "../../hooks/useAdminContext";
-
-/**
- *
- * @param entity
- * @param width
- * @param frozen
- * @param isSelected
- * @param selectionEnabled
- * @param size
- * @param toggleEntitySelection
- * @param hideId
- *
- * @group Collection components
- */
-export const CollectionRowActions = function CollectionRowActions({
-    entity,
-    collection,
-    path,
-    width,
-    frozen,
-    isSelected,
-    selectionEnabled,
-    size,
-    highlightEntity,
-    onCollectionChange,
-    unhighlightEntity,
-    actions = [],
-    hideId,
-    selectionController,
-    openEntityMode,
-    sortableNodeRef,
-    sortableStyle,
-    sortableAttributes,
-    isDragging,
-    isDraggable
-}:
-    {
-        entity: Entity<any>,
-        collection?: AdminCollection<any>,
-        path?: string,
-        width: number,
-        frozen?: boolean,
-        size: CollectionSize,
-        isSelected?: boolean,
-        selectionEnabled?: boolean,
-        actions?: EntityAction[],
-        hideId?: boolean,
-        onCollectionChange?: () => void,
-        selectionController?: SelectionController;
-        highlightEntity?: (entity: Entity<any>) => void;
-        unhighlightEntity?: (entity: Entity<any>) => void;
-        openEntityMode: "side_panel" | "full_screen" | "split" | "dialog";
-        // Sortable props for dnd-kit integration
-        sortableNodeRef?: (node: HTMLElement | null) => void;
-        sortableStyle?: React.CSSProperties;
-        sortableAttributes?: Record<string, any>;
-        isDragging?: boolean;
-        isDraggable?: boolean;
-    }) {
-
-    const context = useAdminContext();
-    const sidePanelCtrl = context.sidePanelController;
-    const { t } = useTranslation();
-
-    const onCheckedChange = useCallback((checked: boolean) => {
-        selectionController?.toggleEntitySelection(entity, checked);
-    }, [entity, selectionController?.toggleEntitySelection]);
-
-    const hasActions = actions.length > 0;
-    const hasCollapsedActions = actions.some(a => a.collapsed || a.collapsed === undefined);
-
-    const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
-    const uncollapsedActions = actions.filter(a => a.collapsed === false);
-    const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
-    const hasDraft = enableLocalChangesBackup ? getEntityFromCache(path + "/" + entity.id) : false;
-    const iconSize = "small" as const;
-
-    const content = (
-        <div
-            className={cls(
-                "h-full flex items-center justify-center flex-col z-10",
-                isSelected
-                    ? "bg-surface-accent-50 dark:bg-surface-accent-900"
-                    : "bg-surface-50/90 dark:bg-surface-900/90",
-                frozen ? "sticky left-0" : ""
-            )}
-            onClick={useCallback((event: React.MouseEvent) => {
-                event.stopPropagation();
-            }, [])}
-            style={{
-                width,
-                position: frozen ? "sticky" : "initial",
-                left: frozen ? 0 : "initial",
-                contain: "strict"
-            }}>
-
-            {(hasActions || selectionEnabled) &&
-                <div className="flex items-center justify-center gap-0.5">
-
-                    {uncollapsedActions.map((action, index) => {
-                        const isEditAction = action.key === "edit";
-                        const tooltip = isEditAction && hasDraft ? t("unsaved_local_changes") : action.name;
-
-                        let iconButton = <IconButton
-                            onClick={(event: MouseEvent) => {
-                                event.stopPropagation();
-                                action.onClick({
-                                    view: "collection",
-                                    entity,
-                                    path,
-                                    collection,
-                                    context,
-                                    sidePanelController: sidePanelCtrl,
-                                    selectionController,
-                                    highlightEntity,
-                                    unhighlightEntity,
-                                    onCollectionChange,
-                                    openEntityMode: openEntityMode ?? collection?.openEntityMode
-                                });
-                            }}
-                            size={iconSize}>
-                            {getIcon(action.icon, undefined, undefined, "smallest")}
-                        </IconButton>;
-                        if (isEditAction && hasDraft) {
-                            iconButton = (
-                                <Badge color={"warning"}>
-                                    {iconButton}
-                                </Badge>
-                            );
-                        }
-                        return (
-                            <Tooltip key={index}
-                                title={tooltip}
-                                asChild={true}>
-                                {iconButton}
-                            </Tooltip>
-                        );
-                    })}
-
-                    {hasCollapsedActions &&
-                        <Menu
-                            trigger={<IconButton
-                                size={iconSize}>
-                                <MoreVerticalIcon/>
-                            </IconButton>}>
-                            {collapsedActions.map((action, index) => (
-                                <MenuItem
-                                    key={index}
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        action.onClick({
-                                            view: "collection",
-                                            entity,
-                                            path,
-                                            collection,
-                                            context,
-                                            sidePanelController: sidePanelCtrl,
-                                            selectionController,
-                                            highlightEntity,
-                                            unhighlightEntity,
-                                            onCollectionChange,
-                                            openEntityMode: openEntityMode ?? collection?.openEntityMode
-                                        });
-                                    }}>
-                                    {getIcon(action.icon, undefined, undefined, "smallest")}
-                                    {action.name}
-                                </MenuItem>
-                            ))}
-                        </Menu>
-                    }
-
-                    {selectionEnabled &&
-                        <Tooltip title={`Select ${entity.id}`}>
-                            <Checkbox
-                                size={"smallest"}
-                                checked={Boolean(isSelected)}
-                                onCheckedChange={onCheckedChange}
-                            />
-                        </Tooltip>}
-
-                </div>}
-
-            {!hideId && size !== "xs" && (
-                <div
-                    className="w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center justify-center flex items-center gap-1"
-                    onClick={(event) => {
-                        event.stopPropagation();
-                    }}>
-                    <span className="min-w-0 truncate text-center">
-                        {entity
-                            ? entity.id
-                            : <Skeleton/>
-                        }
-                    </span>
-                </div>
-            )}
-
-        </div>
-    );
-
-    // Wrap with sortable outer div when sortable props are provided
-    // Remove tabIndex from attributes to avoid capturing focus before cell content
-    if (sortableNodeRef) {
-        const { tabIndex: _tabIndex, ...sortableAttrsWithoutTabIndex } = sortableAttributes ?? {};
-        return (
-            <div
-                ref={sortableNodeRef}
-                style={sortableStyle}
-                className={cls(
-                    "flex-shrink-0",
-                    frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"
-                )}
-                {...sortableAttrsWithoutTabIndex}
-            >
-                {content}
-            </div>
-        );
-    }
-
-    return content;
-
-};