@rebasepro/cms 0.17.3 → 0.18.0

package/src/components/DrawerNavigationGroup.tsx

@@ -1,141 +0,0 @@
-import type { NavigationEntry } from "@rebasepro/cms-types";
-import React from "react";
-import { ChevronDownIcon, cls, iconSize, Typography } from "@rebasepro/ui";
-
-import { IconForView, getIcon } from "@rebasepro/app";
-import { DrawerNavigationItem } from "./DrawerNavigationItem";
-import { useTranslation, useComponentOverride } from "@rebasepro/app";
-
-export interface DrawerNavigationGroupProps {
-    /**
-     * Group name to display in header
-     */
-    group: string;
-    /**
-     * Navigation entries in this group
-     */
-    entries: NavigationEntry[];
-    /**
-     * Whether the group is collapsed
-     */
-    collapsed: boolean;
-    /**
-     * Callback when collapse state should toggle
-     */
-    onToggleCollapsed: () => void;
-    /**
-     * Whether the drawer is in open (expanded) state
-     */
-    drawerOpen: boolean;
-    /**
-     * Optional actions to render in the group header (e.g., "Add collection" button)
-     */
-    headerActions?: React.ReactNode;
-    /**
-     * Optional callback when a navigation item is clicked
-     */
-    onItemClick?: (entry: NavigationEntry) => void;
-    /**
-     * Hide the group header (title and expandable panel)
-     */
-    hideHeader?: boolean;
-    /**
-     * Lucide icon name for the group header, from `NavigationGroupMapping.icon`.
-     *
-     * It decorates the header and nothing else: the entries below are untouched and
-     * keep their own icons. An app that wants the categorised look — rows giving up
-     * their icons to indent under the group — builds it in its own drawer, by
-     * overriding `Shell.DrawerNavigationItem` and passing `indented`.
-     */
-    icon?: string;
-}
-
-/**
- * Shared drawer navigation group component used by both DefaultDrawer and RebaseCloudDrawer.
- * Renders a collapsible group with header and navigation items.
- */
-export function DrawerNavigationGroup({
-    group,
-    entries,
-    collapsed,
-    onToggleCollapsed,
-    drawerOpen,
-    headerActions,
-    onItemClick,
-    hideHeader,
-    icon
-}: DrawerNavigationGroupProps) {
-    const { t } = useTranslation();
-    const ResolvedDrawerNavigationItem = useComponentOverride("Shell.DrawerNavigationItem", DrawerNavigationItem);
-
-    // The icon decorates the header, and stops there. It used to also strip the
-    // entries of theirs and indent them, which made a per-app styling choice into
-    // framework behaviour: every project that labelled a group with an icon lost the
-    // icons on its rows, with nothing to turn it off. An app that wants that look
-    // now opts into it in its own drawer — see `indented` on
-    // {@link DrawerNavigationItem}.
-    const groupIcon = !hideHeader && drawerOpen ? getIcon(icon, undefined, undefined, "small") : undefined;
-    return (
-        <div
-            className={"my-2 mx-2 flex flex-col"}
-            key={`drawer_group_${group}`}
-        >
-            {/* Group Header */}
-            {!hideHeader && (
-                <div
-                    className={cls("pl-3 pr-2 py-0.5 flex flex-row items-center transition-colors",
-                        drawerOpen ? "cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-800/40 rounded-lg" : "opacity-0 invisible pointer-events-none"
-                    )}
-                    onClick={drawerOpen ? onToggleCollapsed : undefined}
-                >
-                    <ChevronDownIcon
-                        size={iconSize.small}
-                        className={cls(
-                            "text-surface-400 dark:text-surface-400 transition-transform duration-200 mr-1",
-                            collapsed ? "-rotate-90" : "rotate-0"
-                        )}
-                    />
-                    {groupIcon && (
-                        <span className="shrink-0 mr-2 flex items-center text-surface-600 dark:text-surface-300 [&>svg]:size-4">
-                            {groupIcon}
-                        </span>
-                    )}
-                    <Typography
-                        variant={"caption"}
-                        color={"secondary"}
-                        className="font-semibold text-[11px] uppercase tracking-wider flex-grow line-clamp-1 text-surface-400 dark:text-surface-400"
-                    >
-                        {(group || t("views_group"))}
-                    </Typography>
-                    {headerActions && (
-                        <div onClick={(e) => e.stopPropagation()}>
-                            {headerActions}
-                        </div>
-                    )}
-                </div>
-            )}
-
-            {/* Collapsible Content */}
-            <div
-                className={cls(
-                    "transition-all duration-200 ease-in-out",
-                    "overflow-hidden",
-                    !hideHeader && "dark:bg-transparent",
-                    "rounded-lg",
-                    (!hideHeader && collapsed) ? "max-h-0 opacity-0" : "max-h-[2000px] opacity-100"
-                )}
-            >
-                {entries.map((entry) => (
-                    <ResolvedDrawerNavigationItem
-                        key={entry.id}
-                        icon={<IconForView collectionOrView={entry.collection ?? entry.view} size={"small"}/>}
-                        drawerOpen={drawerOpen}
-                        onClick={() => onItemClick?.(entry)}
-                        url={entry.url}
-                        name={entry.name}
-                    />
-                ))}
-            </div>
-        </div>
-    );
-}

package/src/components/DrawerNavigationItem.tsx

@@ -1,115 +0,0 @@
-import React from "react";
-
-import { NavLink } from "react-router";
-import { cls, Tooltip } from "@rebasepro/ui";
-
-/**
- * Props of a drawer navigation row, named so an app overriding
- * `Shell.DrawerNavigationItem` can type its wrapper against them.
- */
-export type DrawerNavigationItemProps = {
-    icon: React.ReactElement,
-    name: string,
-    drawerOpen: boolean,
-    url: string,
-    onClick?: () => void,
-    /**
-     * Drop the row's icon and indent the label into the space it occupied, so the
-     * row reads as a child of the group header above it.
-     *
-     * Nothing in the framework sets this: the stock drawer always passes `false`,
-     * and an app that wants the categorised look opts into it by overriding
-     * `Shell.DrawerNavigationItem` and deciding for itself which rows get it.
-     */
-    indented?: boolean,
-};
-
-export function DrawerNavigationItem({
-    name,
-    icon,
-    drawerOpen,
-    url,
-    onClick,
-    indented = false
-}: DrawerNavigationItemProps) {
-
-    // Indented rows give up the icon rather than keeping it *and* indenting: a
-    // per-row icon repeated down a group is what flattens the hierarchy, since
-    // every row then reads at the weight of the category above it. The indent is
-    // the same 44px the icon occupied, so labels stay on the original grid and the
-    // rail width does not change.
-    const iconWrap = indented
-        ? <div className={"shrink-0 w-[44px] h-[30px]"} aria-hidden={true}/>
-        : <div
-            className={"shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-text-secondary-dark [&>svg]:size-4 group-hover/nav:text-primary transition-colors duration-150"}>
-            {icon}
-        </div>;
-
-    const [wantsTooltip, setWantsTooltip] = React.useState(false);
-
-    // Radix will not report a close it never noticed: while the tooltip is masked
-    // the pointer can leave the row without `onOpenChange(false)` ever firing. So
-    // the stale `true` is dropped on the way *into* the masked state — otherwise
-    // it surfaces the moment the mask lifts, as a tooltip hanging over a rail the
-    // pointer left long ago.
-    if (drawerOpen && wantsTooltip) setWantsTooltip(false);
-
-    const listItem = <div>
-        <NavLink
-            onClick={onClick}
-            // The label below is `hidden` (display:none) while the rail is
-            // collapsed, which takes it out of the accessibility tree along with
-            // the row's only text — a collapsed rail was a column of links with no
-            // accessible name at all. The tooltip does not cover this: Radix wires
-            // a trigger to its content with `aria-describedby`, which is a
-            // description rather than a name, and only while the tooltip is open —
-            // and this one is masked shut whenever the drawer is open.
-            //
-            // Named unconditionally rather than only when collapsed: expanded, this
-            // is the same string the row already displays, so the accessible name
-            // stays stable across the transition instead of appearing with it.
-            aria-label={name}
-            style={{
-                width: "100%",
-                transition: drawerOpen ? "width 150ms ease-in" : undefined
-            }}
-            className={({ isActive }: { isActive: boolean }) => cls("rounded-lg truncate group/nav",
-                "hover:bg-primary/5 dark:hover:bg-primary/5 text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white",
-                "flex flex-row items-center",
-                drawerOpen ? "pr-4 h-[30px]" : "h-[30px]",
-                "font-medium text-[13px]",
-                isActive ? "bg-primary/8 dark:bg-primary/10 text-primary dark:text-primary [&_div]:text-primary" : ""
-            )}
-            to={url}
-        >
-
-            {iconWrap}
-
-            <div
-                className={cls(
-                    "text-text-primary dark:text-surface-200",
-                    drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                    "font-inherit truncate space-x-2"
-                )}>
-                {name}
-            </div>
-        </NavLink>
-    </div>;
-
-    // Per row, and always controlled. The old shared flag could only say "every
-    // tooltip" or "none", and the state it needed was unreachable, so no entry
-    // tooltip ever opened — leaving a bare rail of unlabelled icons. Radix decides
-    // when this one wants to be open, from the pointer and from focus; the drawer
-    // only masks it once the label says the same thing.
-    //
-    // Masked rather than withheld: dropping `open`, or the title, would move the
-    // tooltip between controlled and uncontrolled as the drawer opens, which
-    // strands the old state — a tooltip left up over a pointer nowhere near it.
-    return <Tooltip
-        open={!drawerOpen && wantsTooltip}
-        onOpenChange={setWantsTooltip}
-        side="right"
-        title={name}>
-        {listItem}
-    </Tooltip>;
-}

package/src/components/EditFormActions.tsx

@@ -1,303 +0,0 @@
-
-
-import type { FormContext } from "../types/fields";
-import type { EntityAction, EntityActionClickProps, SidePanelController, AdminCollection } from "@rebasepro/cms-types";
-import React, { useMemo } from "react";
-import { Entity, getCollectionDataPath } from "@rebasepro/types";
-import { RebaseContext } from "@rebasepro/cms-types";
-import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
-import { copyEntityAction, deleteEntityAction, unlinkEntityAction } from "./common/default_entity_actions";
-import { mergeEntityActions } from "../util/entity_actions";
-import { resolveEntityAction } from "../util/resolutions";
-import { Button, CircularProgress, cls, defaultBorderMixin, DialogActions, IconButton, LoadingButton, Tooltip, Typography } from "@rebasepro/ui";
-import { AlertCircleIcon, iconSize } from "@rebasepro/ui";
-import {
-    useCustomizationController,
-    useSnackbarController,
-    useTranslation
-} from "@rebasepro/app";
-import { SideDialogController, useSideDialogContext } from "./SideDialogs";
-import { FormexController } from "@rebasepro/forms";
-import { ErrorTooltip } from "@rebasepro/app";
-import { usePermissions } from "@rebasepro/app";
-import { getIcon } from "@rebasepro/app";
-import { useAdminContext } from "../hooks/useAdminContext";
-import { useChildViewSource } from "../hooks/useChildViewSource";
-
-/**
- * The entity form's footer.
- *
- * It used to render in two shapes: this footer, and a `w-80 2xl:w-96` sticky
- * side rail carrying the same Save and Discard above several hundred pixels of
- * nothing. The rail is gone, and Save/Discard have moved to the identity bar
- * where they stay visible while the form scrolls — so with
- * `showDefaultActions={false}` this renders only what the bar cannot host:
- * record actions (copy, delete, custom), plugin actions, the saving error, and
- * the side-panel-only "save and close".
- */
-export function EditFormActions({
-    collection,
-    path,
-    entity,
-    savingError,
-    formex,
-    disabled,
-    status,
-    pluginActions,
-    openEntityMode,
-    showDefaultActions = true,
-    navigateBack,
-    formContext
-}: EntityFormActionsProps) {
-
-    const { canCreate, canDelete } = usePermissions();
-    const context = useAdminContext();
-    const sidePanelController = context.sidePanelController;
-    const sideDialogContext = useSideDialogContext();
-    const customizationController = useCustomizationController();
-    const { t } = useTranslation();
-
-    // Rows shared through a junction: the delete button here removes the
-    // link, because that is what the server does for this path.
-    const childViewSource = useChildViewSource(path);
-    const isLinkedChildView = childViewSource?.kind === "relation" && childViewSource.mode === "linked";
-
-    const entityActions = useMemo((): EntityAction[] => {
-        const customEntityActions = (collection.entityActions ?? [])
-            .map(action => resolveEntityAction(action, customizationController.entityActions))
-            .filter(Boolean) as EntityAction[];
-        const createEnabled = canCreate(collection, path);
-        const deleteEnabled = entity ? canDelete(collection, path, entity) : false;
-        const disableActions = collection.disableDefaultActions ?? [];
-        const actions: EntityAction[] = [];
-        if (createEnabled && !disableActions.includes("copy"))
-            actions.push(copyEntityAction);
-        if (deleteEnabled && !disableActions.includes("delete"))
-            actions.push(isLinkedChildView ? unlinkEntityAction : deleteEntityAction);
-        if (customEntityActions)
-            return mergeEntityActions(actions, customEntityActions);
-        return actions;
-    }, [canCreate, canDelete, collection, path, customizationController.entityActions?.length, entity, collection.disableDefaultActions, isLinkedChildView]);
-
-    // Record actions stay in the footer whether or not the bar carries Save;
-    // they are things you do *to* the record, not ways to leave the form.
-    const formActions = entityActions.filter(a => a.includeInForm === undefined || a.includeInForm);
-
-    return buildBottomActions({
-        savingError,
-        entity,
-        formActions,
-        collection,
-        context,
-        sidePanelController,
-        disabled,
-        status,
-        sideDialogContext,
-        pluginActions,
-        openEntityMode,
-        navigateBack,
-        formContext,
-        formex,
-        t,
-        showDefaultActions
-    });
-}
-
-type ActionsViewProps<M extends Record<string, unknown>> = {
-    savingError: Error | undefined,
-    entity: Entity<M> | undefined,
-    formActions: EntityAction[],
-    collection: AdminCollection,
-    context: RebaseContext,
-    sidePanelController: SidePanelController,
-    disabled: boolean,
-    status: "new" | "existing" | "copy",
-    sideDialogContext: SideDialogController,
-    pluginActions?: React.ReactNode[],
-    openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
-    navigateBack: () => void;
-    formContext: FormContext,
-    formex: FormexController<Record<string, unknown>>;
-    t: (key: string, vars?: Record<string, string>) => string;
-    showDefaultActions: boolean;
-    className?: string;
-};
-
-function buildBottomActions<M extends Record<string, unknown>>({
-    savingError,
-    entity,
-    formActions,
-    collection,
-    context,
-    sidePanelController,
-    disabled,
-    status,
-    sideDialogContext,
-    pluginActions,
-    openEntityMode,
-    navigateBack,
-    formContext,
-    formex,
-    t,
-    showDefaultActions,
-    className
-}: ActionsViewProps<M>) {
-
-    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
-    // "Save and close" only means something where there is something to close.
-    const canClose = openEntityMode === "side_panel" || openEntityMode === "dialog";
-    const showBackToDetail = collection.defaultEntityAction === "view" && status === "existing";
-
-    // When the container carries the actions — the entity view's identity bar
-    // does — this renders nothing at all. A full-width bar holding a copy icon
-    // and a delete icon is the same waste as the side rail it replaced: the
-    // record actions moved into the bar's overflow menu, and Save, Discard and
-    // "save and close" are buttons up there too.
-    const hasContent = showDefaultActions || Boolean(savingError);
-
-    if (!hasContent) return null;
-
-    return <DialogActions
-        className={className}
-        // In normal flow at the foot of the form column, not overlaying it.
-        position={"sticky"}>
-        {savingError &&
-            <div className="text-right">
-                <Typography color={"error"}>{savingError.message}</Typography>
-            </div>
-        }
-
-        {formActions.length > 0 && <div className="grow flex overflow-auto no-scrollbar">
-            {formActions.map((action, index) => {
-
-                const props = {
-                    view: "form",
-                    entity,
-                    path: getCollectionDataPath(collection),
-                    collection: collection,
-                    context,
-                    sidePanelController,
-                    openEntityMode,
-                    navigateBack,
-                    formContext
-                } satisfies EntityActionClickProps<Record<string, unknown>>;
-
-                const isEnabled = !action.isEnabled || action.isEnabled(props);
-                return (
-                    <EntityActionButton
-                        key={action.key ?? action.name ?? index}
-                        action={action}
-                        enabled={isEnabled}
-                        props={props}
-                    />
-                );
-            })}
-        </div>}
-
-        {pluginActions}
-
-        {hasErrors ?
-            <ErrorTooltip title={"This form has errors"}>
-                <AlertCircleIcon className="ml-4 text-red-500" size={iconSize.smallest}/>
-            </ErrorTooltip> : null}
-
-        {showBackToDetail && (
-            <Button variant="text"
-                color="primary"
-                disabled={disabled}
-                onClick={navigateBack}>
-                {t("back_to_detail") ?? "Back to details"}
-            </Button>
-        )}
-
-        {showDefaultActions && <>
-            <Button variant="text"
-                color="primary"
-                disabled={disabled || formex.isSubmitting}
-                type="reset">
-                {status === "existing" ? t("discard") : t("clear")}
-            </Button>
-            <Tooltip title={hasErrors ? (t("fix_errors_before_saving") ?? "Fix highlighted errors before saving") : undefined}>
-                <Button variant={canClose ? "text" : "filled"}
-                    color="primary"
-                    type="submit"
-                    disabled={disabled || formex.isSubmitting}
-                    onClick={() => {
-                        sideDialogContext.setPendingClose(false);
-                    }}>
-                    {status === "existing" && t("save")}
-                    {status === "copy" && t("create_copy")}
-                    {status === "new" && t("create")}
-                </Button>
-            </Tooltip>
-        </>}
-
-        {canClose && <LoadingButton variant="filled"
-            color="primary"
-            type="submit"
-            loading={formex.isSubmitting}
-            disabled={disabled}
-            onClick={() => {
-                sideDialogContext.setPendingClose?.(true);
-            }}>
-            {status === "existing" && t("save_and_close")}
-            {status === "copy" && t("create_copy_and_close")}
-            {status === "new" && t("create_and_close")}
-        </LoadingButton>}
-    </DialogActions>;
-}
-
-function EntityActionButton({
-    action,
-    enabled,
-    props
-}: {
-    action: EntityAction,
-    enabled: boolean,
-    props: EntityActionClickProps<Record<string, unknown>>
-}) {
-    const snackbarController = useSnackbarController();
-    const [loading, setLoading] = React.useState(false);
-    return <Tooltip
-        title={action.name}>
-        <IconButton
-            color="primary"
-            disabled={!enabled}
-            onClick={(event) => {
-                console.debug("Executing action", action.key, props);
-                try {
-                    event.stopPropagation();
-                    if (props.entity) {
-                        const onClick = action.onClick(props);
-                        // If the action returns a promise, we can handle it
-                        if (onClick instanceof Promise) {
-                            setLoading(true);
-                            onClick
-                                .catch((error) => {
-                                    console.error("Error executing action", action.key, error);
-                                    snackbarController.open({
-                                        message: `Error executing action: ${error.message}`,
-                                        type: "error"
-                                    })
-                                })
-                                .finally(() => setLoading(false));
-                        } else {
-                            snackbarController.open({
-                                message: `Action ${action.name} executed successfully`,
-                                type: "success"
-                            });
-                        }
-
-                    }
-                } catch (e: unknown) {
-                    console.error("Error executing action", action.key, e);
-                    snackbarController.open({
-                        message: `Error executing action: ${e instanceof Error ? e.message : String(e)}`,
-                        type: "error"
-                    });
-                }
-            }}>
-            {loading ? <CircularProgress size={"smallest"}/> : getIcon(action.icon, undefined, undefined, "smallest")}
-        </IconButton>
-    </Tooltip>;
-}