@rebasepro/cms 0.17.3 → 0.18.0

package/src/components/HomePage/ContentHomePage.tsx

@@ -1,586 +0,0 @@
-import type { HomePageSection, NavigationEntry, NavigationGroupMapping, PluginGenericProps } from "@rebasepro/cms-types";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import Fuse from "fuse.js";
-import { Container, SearchBar } from "@rebasepro/ui";
-import { AnalyticsEvent } from "@rebasepro/cms-types";
-import { FavouritesView } from "./FavouritesView";
-import { ErrorBoundary } from "@rebasepro/ui";
-import { NavigationGroup } from "./NavigationGroup";
-import {
-    NavigationGroupDroppable,
-    NewGroupDropZone,
-    SortableNavigationCard,
-    SortableNavigationGroup,
-    useHomePageDnd
-} from "./HomePageDnD";
-import { DndContext, DragOverlay, MeasuringStrategy } from "@dnd-kit/core";
-import { NavigationCardBinding } from "./NavigationCardBinding";
-import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
-import { RenameGroupDialog } from "./RenameGroupDialog";
-import { toArray } from "@rebasepro/utils";
-import { useCollapsedGroups, buildCollapsedDefaults, useCustomizationController, useTranslation, useSlot, useAdminModeController, useRebaseRegistry } from "@rebasepro/app";
-import { useRestoreScroll } from "@rebasepro/app";
-
-import { SchemaDriftBanner } from "@rebasepro/app";
-import { useBreadcrumbsController } from "../../hooks/useBreadcrumbsController";
-import { useAdminContext } from "../../hooks/useAdminContext";
-
-export const DEFAULT_GROUP_NAME = "Views";
-export const ADMIN_GROUP_NAME = "Admin";
-
-export function ContentHomePage({
-    additionalActions,
-    additionalChildrenStart,
-    additionalChildrenEnd,
-    sections,
-    hiddenGroups
-}: {
-    additionalActions?: React.ReactNode;
-    additionalChildrenStart?: React.ReactNode;
-    additionalChildrenEnd?: React.ReactNode;
-    sections?: HomePageSection[];
-    hiddenGroups?: string[];
-}) {
-
-    const context = useAdminContext();
-    const { navigationStateController } = context;
-    const customizationController = useCustomizationController();
-    const adminModeController = useAdminModeController();
-    const registry = useRebaseRegistry();
-
-    const { resolvedSlots } = customizationController;
-    const breadcrumbs = useBreadcrumbsController();
-    const { t } = useTranslation();
-
-    useEffect(() => {
-        breadcrumbs.set({ breadcrumbs: [] });
-    }, [breadcrumbs.set]);
-
-    const {
-        allowDragAndDrop = false,
-        navigationEntries: unFilteredNavigationEntries = [],
-        groups: unFilteredGroupOrder = [],
-        onNavigationEntriesUpdate = () => {}
-    } = navigationStateController.topLevelNavigation || {};
-
-    // Build a set of Studio-only dev view slugs so we can distinguish them from
-    // admin custom views added via <RebaseCMS views={...}> or plugins.
-    const studioViewSlugs = useMemo(() => {
-        const slugs = new Set<string>();
-        (registry.studioConfig?.devViews ?? []).forEach(v => slugs.add(v.slug));
-        if (registry.studioConfig && registry.cmsConfig?.collectionEditor) slugs.add("schema");
-        return slugs;
-    }, [registry.studioConfig, registry.cmsConfig?.collectionEditor]);
-
-    // Studio mode shows Studio dev views + admin entries (Users/Roles).
-    // Content mode shows collections, admin custom views, and admin entries — but not Studio dev views.
-    const rawNavigationEntries = useMemo(() => {
-        if (adminModeController.mode === "studio") {
-            return unFilteredNavigationEntries.filter(e => (e.type === "view" && studioViewSlugs.has(e.slug)) || e.type === "admin");
-        }
-        return unFilteredNavigationEntries.filter(e => e.type !== "view" || !studioViewSlugs.has(e.slug));
-    }, [unFilteredNavigationEntries, adminModeController.mode, studioViewSlugs]);
-
-    const groupOrderFromNavController = useMemo(() => {
-        const entryGroups = new Set(rawNavigationEntries.map(e => e.group).filter(Boolean));
-        return unFilteredGroupOrder.filter(g => entryGroups.has(g));
-    }, [unFilteredGroupOrder, rawNavigationEntries]);
-
-    const fuse = useRef<Fuse<NavigationEntry> | null>(null);
-    const [filteredUrls, setFilteredUrls] = useState<string[] | null>(null);
-    const performingSearch = Boolean(filteredUrls);
-
-    // Memoize filtered navigation entries to prevent unnecessary recalculations
-    const filteredNavigationEntries = useMemo(() => {
-        return filteredUrls
-            ? rawNavigationEntries.filter((e) => filteredUrls.includes(e.url))
-            : rawNavigationEntries;
-    }, [filteredUrls, rawNavigationEntries]);
-
-    useEffect(() => {
-        fuse.current = new Fuse(rawNavigationEntries, {
-            keys: ["name", "description", "group", "path"]
-        });
-    }, [rawNavigationEntries]);
-
-    const updateSearch = useCallback((v?: string) => {
-        if (!v?.trim()) {
-            setFilteredUrls(null);
-            return;
-        }
-        const results = fuse.current?.search(v.trim());
-        setFilteredUrls(results ? results.map((x) => x.item.url) : []);
-    }, []);
-
-    /* ───────────────────────────────────────────────────────────────
-       Build groups (all items) + isolate Admin
-       ─────────────────────────────────────────────────────────────── */
-    const [items, setItems] = useState<
-        { name: string; entries: NavigationEntry[] }[]
-    >([]);
-    const [adminGroupData, setAdminGroupData] = useState<{
-        name: string;
-        entries: NavigationEntry[];
-    } | null>(null);
-
-    // Flag to prevent useEffect from overwriting local DnD state
-    const isDndDirtyRef = useRef(false);
-    const dndDirtyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-    // Memoize the processed groups to avoid unnecessary recalculations
-    const processedGroups = useMemo(() => {
-        const src = filteredNavigationEntries;
-        const entriesByGroup: Record<string, NavigationEntry[]> = {};
-
-        src.forEach((e) => {
-            const g =
-                e.type === "admin"
-                    ? ADMIN_GROUP_NAME
-                    : e.group ?? DEFAULT_GROUP_NAME;
-            (entriesByGroup[g] ??= []).push(e);
-        });
-
-        // Check if there are custom additional card components from plugins
-        const hasPluginAdditionalCards = customizationController.resolvedSlots.some(s => s.slot === "home.cards");
-
-        let allProcessed: { name: string; entries: NavigationEntry[] }[];
-
-        if (performingSearch) {
-            const ordered = [
-                ...new Set(src.map((e) => e.group ?? DEFAULT_GROUP_NAME))
-            ];
-            allProcessed = ordered
-                .map((name) => ({
-                    name,
-                    entries: entriesByGroup[name] || []
-                }))
-                .filter((g) => g.entries.length);
-        } else {
-            allProcessed = groupOrderFromNavController.map((g) => ({
-                name: g,
-                entries: entriesByGroup[g] || []
-            }));
-            Object.keys(entriesByGroup).forEach((g) => {
-                if (!groupOrderFromNavController.includes(g))
-                    allProcessed.push({
-                        name: g,
-                        entries: entriesByGroup[g]
-                    });
-            });
-
-            // Ensure default group exists if there are plugin additional cards but no collections
-            if (hasPluginAdditionalCards && !allProcessed.some(g => g.name === DEFAULT_GROUP_NAME)) {
-                allProcessed.push({
-                    name: DEFAULT_GROUP_NAME,
-                    entries: []
-                });
-            }
-
-            allProcessed = allProcessed.filter(
-                (g) =>
-                    g.entries.length ||
-                    (g.name === DEFAULT_GROUP_NAME && hasPluginAdditionalCards)
-            );
-        }
-
-        const admin = allProcessed.find((g) => g.name === ADMIN_GROUP_NAME);
-        return {
-            adminGroupData: admin || null,
-            items: allProcessed.filter((g) => g.name !== ADMIN_GROUP_NAME && !hiddenGroups?.includes(g.name))
-        };
-    }, [filteredNavigationEntries, performingSearch, groupOrderFromNavController, customizationController.resolvedSlots, hiddenGroups]);
-
-    // Update state only when processedGroups actually changes
-    // Skip update if DnD just made a local change (dirty flag is set)
-    useEffect(() => {
-        if (isDndDirtyRef.current) {
-            // DnD just updated the state, skip this sync
-            return;
-        }
-        setAdminGroupData(processedGroups.adminGroupData);
-        setItems(processedGroups.items);
-    }, [processedGroups]);
-
-    /* ───────────────────────────────────────────────────────────────
-       Local update vs. persistence helpers
-       ─────────────────────────────────────────────────────────────── */
-    const updateItems = (
-        updater:
-            | { name: string; entries: NavigationEntry[] }[]
-            | ((
-                prev: { name: string; entries: NavigationEntry[] }[]
-            ) => { name: string; entries: NavigationEntry[] }[])
-    ) => {
-        setItems(updater); // local only
-    };
-
-    const persistNavigationGroups = (
-        latest: { name: string; entries: NavigationEntry[] }[]
-    ) => {
-        // Set dirty flag to prevent useEffect from overwriting local state
-        isDndDirtyRef.current = true;
-
-        // Clear any existing timeout
-        if (dndDirtyTimeoutRef.current) {
-            clearTimeout(dndDirtyTimeoutRef.current);
-        }
-
-        // Clear dirty flag after a delay to allow navigation to update
-        dndDirtyTimeoutRef.current = setTimeout(() => {
-            isDndDirtyRef.current = false;
-        }, 1000);
-
-        // Map ALL groups including "Views"
-        const draggable: NavigationGroupMapping[] = latest.map((g) => ({
-            name: g.name,
-            entries: g.entries.map((e) => e.slug)
-        }));
-
-        const all: NavigationGroupMapping[] = adminGroupData
-            ? [
-                ...draggable,
-                {
-                    name: adminGroupData.name,
-                    entries: adminGroupData.entries.map((e) => e.slug)
-                }
-            ]
-            : draggable;
-
-        onNavigationEntriesUpdate(all);
-    };
-
-    // Use custom hook for collapsed groups with localStorage persistence
-    const groupNames = useMemo(() => [
-        ...items.map(item => item.name),
-        ...(adminGroupData ? [adminGroupData.name] : [])
-    ], [items, adminGroupData]);
-
-    const collapsedDefaults = useMemo(
-        () => buildCollapsedDefaults(registry.cmsConfig?.navigationGroupMappings, "home"),
-        [registry.cmsConfig?.navigationGroupMappings]
-    );
-    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupNames, "home", collapsedDefaults);
-
-    const {
-        sensors,
-        collisionDetection,
-        onDragStart,
-        onDragOver,
-        onDragEnd,
-        dropAnimation,
-        activeItemForOverlay,
-        activeGroupData,
-        draggingGroupId,
-        containers,
-        dndKitActiveNode,
-        onDragCancel,
-        isDraggingCardOnly,
-        dialogOpenForGroup,
-        setDialogOpenForGroup,
-        handleRenameGroup,
-        handleDialogClose,
-        isHoveringNewGroupDropZone,
-        setIsHoveringNewGroupDropZone
-    } = useHomePageDnd({
-        items,
-        setItems: updateItems,
-        disabled: !allowDragAndDrop || performingSearch,
-        onPersist: persistNavigationGroups,
-        onGroupMoved: (g) =>
-            context.analyticsController?.onAnalyticsEvent?.("home_move_group", {
-                name: g
-            }),
-        onCardMovedBetweenGroups: (card) =>
-            context.analyticsController?.onAnalyticsEvent?.("home_move_card", {
-                id: card.id
-            }),
-        onNewGroupDrop: () =>
-            context.analyticsController?.onAnalyticsEvent?.(
-                "home_drop_new_group"
-            )
-    });
-
-    const {
-        containerRef,
-        direction
-    } = useRestoreScroll();
-
-    const dndDisabled = !allowDragAndDrop || performingSearch;
-
-    const dndModifiers = dndKitActiveNode?.data.current?.type === "group"
-        ? [restrictToVerticalAxis, restrictToWindowEdges]
-        : [restrictToWindowEdges];
-
-    const sectionProps: PluginGenericProps = { context };
-    const additionalPluginChildrenStart = useSlot("home.children.start", sectionProps);
-    const additionalPluginChildrenEnd = useSlot("home.children.end", sectionProps);
-    const additionalPluginActions = useSlot("home.actions", sectionProps);
-
-    // Pre-compute home.cards slot contributions (cannot call useSlot inside .map loop)
-    const homeCardContributions = useMemo(() => {
-        return resolvedSlots
-            .filter(s => s.slot === "home.cards")
-            .sort((a, b) => (a.order ?? 50) - (b.order ?? 50));
-    }, [resolvedSlots]);
-
-    /* ───────────────────────────────────────────────────────────────
-       Render
-       ─────────────────────────────────────────────────────────────── */
-    return (
-        <div ref={containerRef} className="py-2 overflow-auto h-full w-full bg-surface-50 dark:bg-surface-800">
-            <Container maxWidth="6xl">
-                <div className="mb-4 flex flex-col gap-2">
-                    <SchemaDriftBanner />
-                </div>
-                {/* search & actions */}
-                <div
-                    className="w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4"
-                    style={{ top: direction === "down" ? -84 : 0 }}
-                >
-                    <SearchBar
-                        onTextSearch={updateSearch}
-                        placeholder={t("search_collections")}
-                        autoFocus
-                        size="small"
-                        innerClassName="w-full"
-                        className="w-full grow"
-                    />
-                    {additionalActions}
-                    {additionalPluginActions}
-                </div>
-
-                <FavouritesView hidden={performingSearch}/>
-
-                {additionalChildrenStart}
-                {additionalPluginChildrenStart}
-
-                {/* ─────── DND context ─────── */}
-                <DndContext
-                    sensors={sensors}
-                    collisionDetection={collisionDetection}
-                    measuring={{
-                        droppable: {
-                            strategy: MeasuringStrategy.Always,
-                            frequency: 500
-                        }
-                    }}
-                    onDragStart={onDragStart}
-                    onDragOver={onDragOver}
-                    onDragEnd={onDragEnd}
-                    onDragCancel={onDragCancel}
-                    modifiers={dndModifiers}
-                >
-                    <SortableContext
-                        key={containers.join(",")}
-                        items={containers}
-                        strategy={verticalListSortingStrategy}
-                    >
-                        {items.map((groupData, groupIndex) => {
-                            const groupKey = groupData.name;
-                            const entriesInGroup = groupData.entries;
-
-                            const homeCardsProps = {
-                                group:
-                                    groupKey === DEFAULT_GROUP_NAME
-                                        ? undefined
-                                        : groupKey,
-                                context
-                            };
-                            // Render home.cards contributions inline (no hook call inside loop)
-                            const additionalCards = homeCardContributions.map((s, i) => (
-                                <ErrorBoundary key={`home_cards_${groupKey}_${i}`}>
-                                    <s.Component {...homeCardsProps} {...(s.props ?? {})}/>
-                                </ErrorBoundary>
-                            ));
-
-                            if (
-                                entriesInGroup.length === 0 &&
-                                (additionalCards.length === 0 || performingSearch)
-                            )
-                                return null;
-
-                            return (
-                                <SortableNavigationGroup
-                                    key={`group-${groupIndex}`}
-                                    groupName={groupKey}
-                                    disabled={dndDisabled}
-                                >
-                                    <NavigationGroup
-                                        group={
-                                            groupKey === DEFAULT_GROUP_NAME
-                                                ? undefined
-                                                : groupKey
-                                        }
-                                        minimised={
-                                            draggingGroupId === groupKey &&
-                                            !isDraggingCardOnly
-                                        }
-                                        isPotentialCardDropTarget={
-                                            isDraggingCardOnly
-                                        }
-                                        dndDisabled={dndDisabled}
-                                        onEditGroup={() => {
-                                            if (dndDisabled) return;
-                                            setDialogOpenForGroup(groupKey);
-                                        }}
-                                        collapsed={isGroupCollapsed(groupKey)}
-                                        onToggleCollapsed={() => toggleGroupCollapsed(groupKey)}
-                                    >
-                                        <NavigationGroupDroppable
-                                            id={groupKey}
-                                            itemIds={entriesInGroup.map(
-                                                (e) => e.url
-                                            )}
-                                            isPotentialCardDropTarget={
-                                                isDraggingCardOnly
-                                            }
-                                        >
-                                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ">
-                                                {entriesInGroup.map(
-                                                    (entry) => (
-                                                        <SortableNavigationCard
-                                                            key={entry.url}
-                                                            entry={entry}
-                                                            onClick={() => {
-                                                                let event: AnalyticsEvent =
-                                                                    "unmapped_event";
-                                                                if (
-                                                                    entry.type ===
-                                                                    "collection"
-                                                                )
-                                                                    event =
-                                                                        "home_navigate_to_collection";
-                                                                else if (
-                                                                    entry.type ===
-                                                                    "view"
-                                                                )
-                                                                    event =
-                                                                        "home_navigate_to_view";
-                                                                else if (
-                                                                    entry.type ===
-                                                                    "admin"
-                                                                )
-                                                                    event =
-                                                                        "home_navigate_to_admin_view";
-
-                                                                context.analyticsController?.onAnalyticsEvent?.(
-                                                                    event,
-                                                                    {
-                                                                        path: entry.slug
-                                                                    }
-                                                                );
-                                                            }}
-                                                        />
-                                                    )
-                                                )}
-                                                {!performingSearch &&
-                                                    groupKey.toLowerCase() !==
-                                                    ADMIN_GROUP_NAME.toLowerCase() &&
-                                                    additionalCards}
-                                            </div>
-                                        </NavigationGroupDroppable>
-                                    </NavigationGroup>
-                                </SortableNavigationGroup>
-                            );
-                        })}
-                    </SortableContext>
-
-                    <NewGroupDropZone
-                        disabled={dndDisabled}
-                        setIsHovering={setIsHoveringNewGroupDropZone}
-                    />
-
-                    <DragOverlay adjustScale={false} dropAnimation={dropAnimation}>
-                        {activeGroupData &&
-                            draggingGroupId === activeGroupData.name ? (
-                            <div
-                                className="rounded-lg bg-transparent"
-                                style={{
-                                    padding: 0,
-                                    margin: 0
-                                }}
-                            >
-                                <NavigationGroup
-                                    group={
-                                        activeGroupData.name ===
-                                            DEFAULT_GROUP_NAME
-                                            ? undefined
-                                            : activeGroupData.name
-                                    }
-                                    isPreview={false}
-                                    minimised
-                                />
-                            </div>
-                        ) : activeItemForOverlay ? (
-                            <NavigationCardBinding
-                                {...activeItemForOverlay}
-                                shrink={isHoveringNewGroupDropZone}
-                            />
-                        ) : null}
-                    </DragOverlay>
-                </DndContext>
-
-                {!performingSearch && adminGroupData && (
-                    <NavigationGroup
-                        group={adminGroupData.name}
-                        collapsed={isGroupCollapsed(adminGroupData.name)}
-                        onToggleCollapsed={() => toggleGroupCollapsed(adminGroupData.name)}
-                    >
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ">
-                            {adminGroupData.entries.map((entry) => (
-                                <NavigationCardBinding
-                                    key={entry.url}
-                                    {...entry}
-                                    onClick={() => {
-                                        let event: AnalyticsEvent =
-                                            "unmapped_event";
-                                        if (entry.type === "collection")
-                                            event =
-                                                "home_navigate_to_collection";
-                                        else if (entry.type === "view")
-                                            event = "home_navigate_to_view";
-                                        else if (entry.type === "admin")
-                                            event =
-                                                "home_navigate_to_admin_view";
-
-                                        context.analyticsController?.onAnalyticsEvent?.(
-                                            event,
-                                            { path: entry.slug }
-                                        );
-                                    }}
-                                />
-                            ))}
-                        </div>
-                    </NavigationGroup>
-                )}
-
-                {sections && sections.map((section) => (
-                    <NavigationGroup
-                        key={section.key}
-                        group={section.title}
-                    >
-                        {section.children}
-                    </NavigationGroup>
-                ))}
-
-                {additionalPluginChildrenEnd}
-                {additionalChildrenEnd}
-            </Container>
-
-            {dialogOpenForGroup && (
-                <RenameGroupDialog
-                    open
-                    initialName={dialogOpenForGroup}
-                    existingGroupNames={items
-                        .map((g) => g.name)
-                        .filter((n) => n !== dialogOpenForGroup)}
-                    onClose={handleDialogClose}
-                    onRename={(newName) => {
-                        handleRenameGroup(dialogOpenForGroup, newName);
-                    }}
-                />
-            )}
-        </div>
-    );
-}

package/src/components/HomePage/FavouritesView.tsx

@@ -1,60 +0,0 @@
-import type { NavigationEntry } from "@rebasepro/cms-types";
-import { useNavigate } from "react-router";
-;
-import { Chip, Collapse, StarIcon } from "@rebasepro/ui";
-import { useUserConfigurationPersistence } from "@rebasepro/app";
-import { useNavigationStateController } from "../../hooks/navigation/contexts/NavigationStateContext";
-
-function NavigationChip({ entry }: { entry: NavigationEntry }) {
-
-    const navigate = useNavigate();
-    const userConfigurationPersistence = useUserConfigurationPersistence();
-
-    if (!userConfigurationPersistence)
-        return null;
-
-    const favourite = userConfigurationPersistence.favouritePaths.includes(entry.slug);
-    const onIconClick = (e: React.SyntheticEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (favourite) {
-            userConfigurationPersistence.setFavouritePaths(
-                userConfigurationPersistence.favouritePaths.filter(p => p !== entry.slug)
-            );
-        } else {
-            userConfigurationPersistence.setFavouritePaths(
-                [...userConfigurationPersistence.favouritePaths, entry.slug]
-            );
-        }
-    };
-    return <Chip
-        key={entry.slug}
-        onClick={() => navigate(entry.url)}
-        icon={<StarIcon
-            onClick={onIconClick}
-            size={"small"}
-            className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500"}/>
-        }>
-        {entry.name}
-    </Chip>;
-}
-
-export function FavouritesView({ hidden }: { hidden: boolean }) {
-
-    const navigationStateController = useNavigationStateController();
-    const userConfigurationPersistence = useUserConfigurationPersistence();
-
-    if (!userConfigurationPersistence)
-        return null;
-
-    const favouriteCollections = (userConfigurationPersistence?.favouritePaths ?? [])
-        .map((path) => navigationStateController.topLevelNavigation?.navigationEntries.find((entry) => entry.slug === path))
-        .filter(Boolean) as NavigationEntry[];
-
-    return <Collapse in={favouriteCollections.length > 0}>
-        <div className="flex flex-row flex-wrap gap-2 pb-2 min-h-[32px]">
-            {favouriteCollections.map((entry) => <NavigationChip key={entry.slug}
-                entry={entry}/>)}
-        </div>
-    </Collapse>;
-}