@rebasepro/cms 0.17.3 → 0.18.1

package/src/components/HomePage/NavigationCard.tsx

@@ -1,81 +0,0 @@
-import { ArrowRightIcon, Card, cls, iconSize, Markdown, Typography } from "@rebasepro/ui";
-import React from "react";
-
-export type NavigationCardProps = {
-    name: string,
-    description?: string;
-    actions: React.ReactNode;
-    icon: React.ReactNode;
-    additionalContent?: React.ReactNode;
-    onClick?: () => void,
-    shrink?: boolean
-};
-
-// Wrap the component with React.memo
-export const NavigationCard = React.memo(function NavigationCard({
-    name,
-    description,
-    icon,
-    actions,
-    additionalContent,
-    onClick,
-    shrink
-}: NavigationCardProps) {
-
-    return (
-        <Card
-            className={cls(
-                "group h-full p-4 cursor-pointer transition-colors duration-150 ease-in-out",
-                "hover:bg-primary/5 dark:hover:bg-primary/5",
-                shrink && "w-full max-w-full min-h-0 scale-75"
-            )}
-            onClick={() => {
-                onClick?.();
-            }}
-        >
-
-            <div className="flex flex-col h-full">
-                {/* Header: title + icon left, actions right */}
-                <div className="flex items-center w-full justify-between mb-1">
-                    <div className="flex items-center gap-3">
-                        <div className="flex items-center justify-center w-5 h-5 text-surface-400 dark:text-surface-500 transition-colors duration-150 group-hover:text-primary dark:group-hover:text-primary">
-                            {icon}
-                        </div>
-                        <Typography variant="subtitle1"
-                            component="h2">
-                            {name}
-                        </Typography>
-                    </div>
-
-                    <div
-                        className="flex items-center gap-0.5"
-                        onClick={(event: React.MouseEvent) => {
-                            event.preventDefault();
-                            event.stopPropagation();
-                        }}>
-                        {actions}
-                    </div>
-                </div>
-
-                {/* Description */}
-                <div className="pl-8">
-                    {description && <Typography variant="caption"
-                        color="secondary"
-                        component="div">
-                        <Markdown source={description} size={"small"}/>
-                    </Typography>}
-                </div>
-
-                {additionalContent && (
-                    <div className="pl-8 pointer-events-none">
-                        {additionalContent}
-                    </div>
-                )}
-
-                {/* Spacer pushes content above to align at the top across grid siblings */}
-                <div className="grow"/>
-
-            </div>
-
-        </Card>)
-});

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -1,107 +0,0 @@
-
-import type { NavigationEntry, AdminCollection } from "@rebasepro/cms-types";
-import { useNavigate } from "react-router";
-;
-import { IconButton, StarIcon, Tooltip } from "@rebasepro/ui";
-import { NavigationCard } from "./NavigationCard";
-import { SmallNavigationCard } from "./SmallNavigationCard";
-import React from "react";
-import { useRebaseContext, useSlot } from "@rebasepro/app";
-import { IconForView } from "@rebasepro/app";
-import { useUserConfigurationPersistence } from "@rebasepro/app";
-
-/**
- * This is the component used in the home page to render a card for each
- * collection or view.
- * @group Components
- * @param view
- * @param path
- * @param collection
- * @param url
- * @param name
- * @param description
- * @param onClick
-
- */
-export function NavigationCardBinding({
-    slug,
-    collection,
-    view,
-    url,
-    name,
-    description,
-    onClick,
-    type,
-    shrink
-}: NavigationEntry & {
-    onClick?: () => void,
-    shrink?: boolean // <-- add shrink prop type
-}) {
-
-    const userConfigurationPersistence = useUserConfigurationPersistence();
-    const collectionIcon = <IconForView collectionOrView={collection ?? view} size={"small"}/>;
-
-    const navigate = useNavigate();
-    const context = useRebaseContext();
-
-    const favourite = (userConfigurationPersistence?.favouritePaths ?? []).includes(slug);
-
-    const actionsArray: React.ReactNode[] = userConfigurationPersistence
-        ? [
-            <IconButton
-                key={"favourite"}
-                size={"small"}
-                onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    if (favourite) {
-                        userConfigurationPersistence.setFavouritePaths(
-                            userConfigurationPersistence.favouritePaths.filter(p => p !== slug)
-                        );
-                    } else {
-                        userConfigurationPersistence.setFavouritePaths(
-                            [...userConfigurationPersistence.favouritePaths, slug]
-                        );
-                    }
-                }}>
-                <StarIcon
-                    className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500"}/>
-            </IconButton>
-        ]
-        : [];
-
-    const pluginCardActions = useSlot("home.collection.actions", {
-        slug: slug,
-        collection: collection!,
-        context
-    });
-
-    const pluginCardWidgets = useSlot("home.card.widget", {
-        slug: slug,
-        collection: collection!,
-        context
-    });
-
-    const actions: React.ReactNode | undefined = <>
-        {actionsArray}
-        {pluginCardActions}
-    </>
-
-    return <NavigationCard
-        icon={collectionIcon}
-        name={name}
-        description={description}
-        actions={actions}
-        additionalContent={pluginCardWidgets.length > 0 ? <>{pluginCardWidgets}</> : undefined}
-        onClick={() => {
-            onClick?.();
-            navigate(url);
-            if (userConfigurationPersistence) {
-                userConfigurationPersistence.setRecentlyVisitedPaths(
-                    [slug, ...(userConfigurationPersistence.recentlyVisitedPaths ?? []).filter(p => p !== slug)]
-                );
-            }
-        }}
-        shrink={shrink}
-    />;
-}

package/src/components/HomePage/NavigationGroup.tsx

@@ -1,156 +0,0 @@
-import React, { PropsWithChildren, useState } from "react";
-import { cls, ExpandablePanel, IconButton, iconSize, PencilIcon, Typography } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
-
-export function NavigationGroup({
-    children,
-    group,
-    minimised,
-    isPreview,
-    isPotentialCardDropTarget,
-    onEditGroup,
-    dndDisabled,
-    collapsed,
-    onToggleCollapsed
-}: PropsWithChildren<{
-    group: string | undefined,
-    minimised?: boolean,
-    isPreview?: boolean,
-    isPotentialCardDropTarget?: boolean,
-    onEditGroup?: (groupName: string) => void;
-    dndDisabled?: boolean;
-    collapsed?: boolean;
-    onToggleCollapsed?: () => void;
-}>) {
-
-    const { t } = useTranslation();
-    const [isHovered, setIsHovered] = useState(false);
-    const currentGroupName = group ?? t("views_group");
-
-    // Show caret only when not in preview and there is a toggle handler
-    const showCaret = !isPreview && !!onToggleCollapsed;
-
-    // Helper for the title content (left side)
-    const TitleContent = (
-        <div className={cls("flex items-center", isPreview ? "px-1 py-0.5" : "")}
-        >
-            <Typography
-                variant={isPreview ? "body2" : "caption"}
-                component={"h2"}
-                color="secondary"
-                className={cls(
-                    "px-4 py-1 rounded",
-                    "font-medium text-[10px] uppercase tracking-[0.08em] text-primary/50 dark:text-primary/70"
-                )}
-            >
-                {currentGroupName}
-            </Typography>
-            {!isPreview && onEditGroup && !dndDisabled && (
-                <IconButton
-                    size="smallest"
-                    onClick={(e) => {
-                        e.stopPropagation(); // Prevent toggle on click
-                        onEditGroup(currentGroupName);
-                    }}
-                    className={cls("ml-2 ", isHovered ? "opacity-100" : "opacity-0", "transition-opacity duration-100")}
-                >
-                    <PencilIcon size={iconSize.smallest}/>
-                </IconButton>
-            )}
-        </div>
-    );
-
-    return (
-        <div className={cls(
-            !isPotentialCardDropTarget ? "my-10" : "my-6",
-            "transition-all duration-200 ease-in-out"
-        )}
-        >
-            {/* Preview: static header + content (no caret / no collapse) */}
-            {isPreview && (
-                <>
-                    <div
-                        className={cls(
-                            "flex items-center justify-between w-full",
-                            "p-4 py-2"
-                        )}
-                        onMouseEnter={() => setIsHovered(true)}
-                        onMouseLeave={() => setIsHovered(false)}
-                    >
-                        {TitleContent}
-                    </div>
-                    {children}
-                </>
-            )}
-
-            {/* Interactive collapsible version when a toggle handler is provided */}
-            {!isPreview && showCaret && (
-                <ExpandablePanel
-                    invisible
-                    expanded={!collapsed}
-                    onExpandedChange={(open) => {
-                        if (open !== !collapsed) {
-                            onToggleCollapsed?.();
-                        }
-                    }}
-                    className={cls("mt-6")}
-                    titleClassName={cls(
-                        "min-h-0 p-0 border-none",
-                        "rounded flex items-center justify-between w-full",
-                        "hover:bg-transparent",
-                        "cursor-pointer select-none",
-                        collapsed && "bg-surface-100 dark:bg-surface-900/50"
-                    )}
-                    innerClassName={cls("mt-4", !minimised ? "pt-0" : "")}
-                    title={
-                        <div
-                            onMouseEnter={() => setIsHovered(true)}
-                            onMouseLeave={() => setIsHovered(false)}
-                            className="flex items-center"
-                        >
-                            {TitleContent}
-                        </div>
-                    }
-                >
-                    {minimised ? (
-                        <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
-                            style={{ minHeight: "50px" }}>
-                        </div>
-                    ) : (
-                        <div className={cls("mt-4", !minimised ? "pt-0" : "")}>
-                            {children}
-                        </div>
-                    )}
-                </ExpandablePanel>
-            )}
-
-            {/* Non-collapsible (no caret) runtime, keep old behavior */}
-            {!isPreview && !showCaret && (
-                <>
-                    <div
-                        className={cls(
-                            "flex items-center justify-between w-full",
-                            "mt-6"
-                        )}
-                        onMouseEnter={() => setIsHovered(true)}
-                        onMouseLeave={() => setIsHovered(false)}
-                    >
-                        {TitleContent}
-                    </div>
-
-                    {!collapsed && (
-                        minimised ? (
-                            <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
-                                style={{ minHeight: "50px" }}>
-                            </div>
-                        ) : (
-                            <div className={cls("mt-4", !minimised ? "pt-0" : "")}>
-                                {children}
-                            </div>
-                        )
-                    )}
-                </>
-            )}
-        </div>
-    );
-}

package/src/components/HomePage/RenameGroupDialog.tsx

@@ -1,123 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
-
-interface RenameGroupDialogProps {
-    open: boolean;
-    initialName: string;
-    existingGroupNames: string[]; // Names of other existing groups to check for duplicates
-    onClose: () => void;
-    onRename: (newName: string) => void;
-}
-
-export function RenameGroupDialog({
-    open,
-    initialName,
-    existingGroupNames,
-    onClose,
-    onRename
-}: RenameGroupDialogProps) {
-    const { t } = useTranslation();
-    const [name, setName] = useState(initialName);
-    const [error, setError] = useState<string | null>(null);
-    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null); // Create a ref for the input
-
-    useEffect(() => {
-        if (open) {
-            setName(initialName);
-            setError(null);
-            // Focus and select text when dialog opens
-            setTimeout(() => { // setTimeout to ensure the input is rendered and focusable
-                if (inputRef.current) {
-                    inputRef.current.focus();
-                    inputRef.current.select();
-                }
-            }, 100);
-        }
-    }, [initialName, open]);
-
-    const handleNameChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        const newName = event.target.value;
-        setName(newName);
-        if (!newName.trim()) {
-            setError(t("group_name_empty_error"));
-        } else if (existingGroupNames.includes(newName.trim())) {
-            setError(t("group_name_exists_error"));
-        } else {
-            setError(null);
-        }
-    };
-
-    const handleSave = () => {
-        const trimmedName = name.trim();
-        if (!trimmedName) {
-            setError(t("group_name_empty_error"));
-            return;
-        }
-        if (existingGroupNames.includes(trimmedName)) {
-            setError(t("group_name_exists_error"));
-            return;
-        }
-        if (!error) {
-            onRename(trimmedName);
-            onClose();
-        }
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        if (event.key === "Enter") {
-            event.preventDefault(); // Prevent default form submission behavior
-            const trimmedName = name.trim();
-            // We need to check the error state directly as well,
-            // because the error state might not have updated if the user types and immediately hits enter.
-            let currentError = null;
-            if (!trimmedName) {
-                currentError = t("group_name_empty_error");
-            } else if (existingGroupNames.includes(trimmedName)) {
-                currentError = t("group_name_exists_error");
-            }
-
-            if (!currentError && trimmedName) {
-                handleSave();
-            } else if (currentError) {
-                setError(currentError); // Ensure error is displayed if trying to submit with Enter
-            }
-        }
-    };
-
-    const handleClose = () => {
-        setName(initialName);
-        setError(null);
-        onClose();
-    };
-
-    if (!open) return null;
-
-    return (
-        <Dialog open={open}>
-            <DialogTitle>{t("rename_group")}</DialogTitle>
-            <DialogContent>
-                <TextField
-                    inputRef={inputRef} // Pass the ref to the TextField
-                    label={t("group_name_label")}
-                    value={name}
-                    onChange={handleNameChange}
-                    onKeyDown={handleKeyDown} // Added onKeyDown handler
-                    error={!!error}
-                    aria-describedby={error ? "group-name-error" : undefined}
-                />
-                {error && <p id="group-name-error" style={{ display: "none" }}>{error}</p>}
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={onClose}
-                    variant="text">
-                    {t("cancel")}
-                </Button>
-                <Button onClick={handleSave}
-                    disabled={!!error || !name.trim()}>
-                    {t("save")}
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
-}

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -1,41 +0,0 @@
-import { cardClickableMixin, cardMixin, cls, Typography } from "@rebasepro/ui";
-
-import { Link } from "react-router";
-
-export type SmallNavigationCardProps = {
-    name: string,
-    url: string;
-    icon: React.ReactElement;
-};
-
-export function SmallNavigationCard({
-    name,
-    url,
-    icon
-}: SmallNavigationCardProps) {
-
-    return (
-        <>
-
-            <Link
-                tabIndex={0}
-                className={cls(cardMixin,
-                    cardClickableMixin,
-                    "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit dark:visited:text-inherit hover:text-inherit dark:hover:text-inherit ")}
-                to={url}
-            >
-
-                <div className="flex flex-row items-center grow gap-2 ">
-                    {icon}
-
-                    <Typography gutterBottom variant="subtitle1"
-                        component="h2"
-                        className="mb-0 ml-3">
-                        {name}
-                    </Typography>
-                </div>
-
-            </Link>
-
-        </>);
-}

package/src/components/HomePage/index.tsx

@@ -1,5 +0,0 @@
-export * from "./ContentHomePage";
-export * from "./NavigationGroup";
-export * from "./NavigationCard";
-export * from "./SmallNavigationCard";
-

package/src/components/InlineEntityPreview.tsx

@@ -1,149 +0,0 @@
-import * as React from "react";
-
-import { Entity } from "@rebasepro/types";
-import { cls, LinkIcon, Skeleton, Tooltip } from "@rebasepro/ui";
-import { useAnalyticsController } from "@rebasepro/app";
-import type { AdminCollection } from "@rebasepro/cms-types";
-
-import { useEntityTitle } from "../hooks/useEntityDisplay";
-import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
-import { useSidePanel } from "../hooks/useSidePanel";
-
-export type InlineEntityPreviewProps = {
-    entity: Entity<any>;
-    collection?: AdminCollection;
-    /** Overrides the resolved title. */
-    label?: string;
-    disabled?: boolean;
-    /** When set, takes over the click. Otherwise the row opens the side panel. */
-    onClick?: (e: React.SyntheticEvent) => void;
-    /** Set to false to render text only, with no click target. */
-    includeEntityLink?: boolean;
-    /** Icon size in px. Defaults to a hair under the surrounding text. */
-    iconSize?: number;
-    className?: string;
-};
-
-const inlineMixin = "inline-flex items-center gap-1 min-w-0 max-w-full align-middle";
-
-/**
- * An entity rendered as one line of text: a small link glyph that marks it as
- * pointing elsewhere, then the target's title in whatever typography surrounds
- * it.
- *
- * This is what a reference or relation renders as when it is *not* the subject
- * of its slot — nested inside another entity preview, or filling a title slot.
- * The card treatment (image, id, preview properties, side-panel button) only
- * makes sense at the top level; repeating it one level down produces a bordered
- * box inside a bordered box, each with its own action buttons.
- *
- * @group Preview components
- */
-export function InlineEntityPreview({
-    entity,
-    collection: collectionProp,
-    label,
-    disabled,
-    onClick,
-    includeEntityLink = true,
-    iconSize = 12,
-    className
-}: InlineEntityPreviewProps) {
-
-    const collectionRegistryController = useCollectionRegistryController();
-    const analyticsController = useAnalyticsController();
-    const sidePanelController = useSidePanel();
-
-    const collection = collectionProp ?? collectionRegistryController.getCollection(entity.path);
-
-    // The id is the right fallback *here* specifically: this renders a pointer at
-    // another record, and a pointer with no label is still followable if it says
-    // which record it points at. A page heading makes the opposite choice.
-    const { value: title } = useEntityTitle({
-        collection: collection as AdminCollection,
-        entity,
-        enabled: Boolean(collection)
-    });
-    const resolvedLabel = label ?? title ?? String(entity.id);
-
-    const interactive = !disabled && (onClick !== undefined || (includeEntityLink && collection !== undefined));
-
-    const handleClick = (event: React.SyntheticEvent) => {
-        if (!interactive) return;
-        // This sits inside a container with its own click handler (the parent
-        // card opens the parent entity); a click here is about the target.
-        event.preventDefault();
-        event.stopPropagation();
-        if (onClick) {
-            onClick(event);
-            return;
-        }
-        analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
-            path: entity.path,
-            entityId: entity.id
-        });
-        sidePanelController.open({
-            entityId: entity.id,
-            path: entity.path,
-            collection,
-            updateUrl: true
-        });
-    };
-
-    const content = <span
-        tabIndex={interactive ? 0 : undefined}
-        role={interactive ? "button" : undefined}
-        onClick={interactive ? handleClick : undefined}
-        onKeyDown={interactive
-            ? (event) => {
-                if (event.key === "Enter" || event.key === " ") handleClick(event);
-            }
-            : undefined}
-        className={cls(
-            inlineMixin,
-            interactive ? "cursor-pointer hover:underline underline-offset-2" : "",
-            className)}>
-        <LinkIcon size={iconSize}
-            className={"shrink-0 opacity-40"}/>
-        <span className={"truncate"}>{resolvedLabel}</span>
-    </span>;
-
-    if (!interactive) return content;
-
-    return <Tooltip title={`See details for ${resolvedLabel}`}
-        asChild={true}>
-        {content}
-    </Tooltip>;
-}
-
-/**
- * Placeholder shown while the target of an inline reference is being fetched.
- */
-export function InlineEntityPreviewSkeleton({ className }: { className?: string }) {
-    return <span className={cls(inlineMixin, className)}>
-        <LinkIcon size={12}
-            className={"shrink-0 opacity-40"}/>
-        <Skeleton className={"w-20 h-3"}/>
-    </span>;
-}
-
-/**
- * Shown when the target of an inline reference cannot be resolved — a deleted
- * row, or a collection that is not registered. Keeps the line readable instead
- * of dropping an error box into the middle of a card.
- */
-export function InlineEntityPreviewMissing({
-    label,
-    tooltip,
-    className
-}: { label: string, tooltip?: string, className?: string }) {
-    const content = <span
-        className={cls(inlineMixin, "text-text-secondary dark:text-text-secondary-dark", className)}>
-        <LinkIcon size={12}
-            className={"shrink-0 opacity-40"}/>
-        <span className={"truncate italic"}>{label}</span>
-    </span>;
-    if (!tooltip) return content;
-    return <Tooltip title={tooltip}
-        asChild={true}>{content}</Tooltip>;
-}