@rebasepro/cms 0.17.3 → 0.18.0

package/src/form/components/FormRail.tsx

@@ -1,153 +0,0 @@
-import type { Entity } from "@rebasepro/types";
-import type { ResolvedFormField } from "@rebasepro/app";
-import React from "react";
-import { CheckIcon, cls, CopyIcon, defaultBorderMixin, IconButton, iconSize, Tooltip, Typography } from "@rebasepro/ui";
-
-export interface FormRailProps {
-    fields: ResolvedFormField[];
-    showRecordMeta: boolean;
-    entity?: Entity<Record<string, unknown>>;
-    renderField: (field: ResolvedFormField) => React.ReactNode;
-}
-
-/**
- * The metadata column beside the form.
- *
- * This replaces a `w-80 2xl:w-96` rail that held a Save button and several
- * hundred pixels of nothing. It renders only when it has something to say, and
- * the actions it used to hold now live in the identity bar, where they stay
- * visible while you scroll.
- */
-export function FormRail({
-    fields,
-    showRecordMeta,
-    entity,
-    renderField
-}: FormRailProps) {
-
-    if (!fields.length && !showRecordMeta) return null;
-
-    return (
-        <aside className={cls(
-            // No responsive hiding here. The caller decides whether the rail is
-            // shown, by measuring; a CSS `hidden` would leave the fields the
-            // resolver moved in here unreachable rather than folding them back.
-            //
-            // `w-76` (304px), between the old 288 and a full `w-80`. The rail
-            // holds real controls — a status select, a date picker — plus a
-            // record block whose id is a 36-character UUID, so 288 left the
-            // select tighter than the identical select in the column.
-            //
-            // 304 is the floor rather than the answer everywhere. It was chosen
-            // against the *narrow* end, where 320 took more than it gave back —
-            // past about 300px the extra went to the gap beside a chip. That
-            // stops being true once the form is genuinely wide: `@7xl/form`
-            // (1280px of form) is the same signal the column widens on, and by
-            // then 32px is coming out of gutters, not out of the column.
-            //
-            // Container, not viewport, for the reason the whole rail is
-            // measured rather than breakpointed: a side panel inside a large
-            // window is not a wide form. Both surfaces that render a rail —
-            // `EntityForm` and `EntityViewBinding` — name their form element
-            // `@container/form`, so a panel that never gets that wide keeps 304.
-            "flex flex-col gap-6 shrink-0 w-76 @7xl/form:w-84 border-l overflow-y-auto",
-            "px-5 py-6 bg-surface-50 dark:bg-surface-900",
-            defaultBorderMixin
-        )}>
-            {fields.length > 0 && (
-                <div className={"flex flex-col gap-5"}>
-                    {fields.map(renderField)}
-                </div>
-            )}
-
-            {showRecordMeta && entity && <RecordMeta entity={entity}/>}
-        </aside>
-    );
-}
-
-/**
- * The record's id and audit timestamps.
- *
- * Exported because the rail is not the only place it renders. The rail is shown
- * only when it has been *measured* to fit, and every layout narrower than that —
- * the split pane, the side panel, the dialog — folds its contents back into the
- * column. The fields folded back but this block did not, so on three of the four
- * layouts a record simply had no id on screen: the only copy of it was the
- * truncated `e166a394…b422` chip in the identity bar.
- */
-export function RecordMeta({ entity }: { entity: Entity<Record<string, unknown>> }) {
-
-    const createdAt = pickDate(entity.values, ["created_at", "createdAt", "created_on"]);
-    const updatedAt = pickDate(entity.values, ["updated_at", "updatedAt", "modified_at"]);
-
-    return (
-        <div className={"flex flex-col gap-2.5"}>
-            <Typography variant={"caption"}
-                className={"text-xs font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark"}>
-                Record
-            </Typography>
-
-            <MetaRow label={"ID"} value={String(entity.id)} copyable/>
-            {createdAt && <MetaRow label={"Created"} value={createdAt}/>}
-            {updatedAt && <MetaRow label={"Updated"} value={updatedAt}/>}
-        </div>
-    );
-}
-
-function MetaRow({
-    label,
-    value,
-    copyable
-}: {
-    label: string;
-    value: string;
-    copyable?: boolean;
-}) {
-    const [copied, setCopied] = React.useState(false);
-
-    const copy = () => {
-        navigator.clipboard?.writeText(value).then(() => {
-            setCopied(true);
-            setTimeout(() => setCopied(false), 1600);
-        }, () => undefined);
-    };
-
-    return (
-        <div className={"flex items-baseline justify-between gap-3 min-w-0"}>
-            <span className={"text-xs text-text-disabled dark:text-text-disabled-dark shrink-0"}>
-                {label}
-            </span>
-            <span className={"flex items-center gap-1 min-w-0"}>
-                <span className={"font-mono text-xs text-text-secondary dark:text-text-secondary-dark truncate"}
-                    title={value}>
-                    {value}
-                </span>
-                {copyable && (
-                    <Tooltip title={copied ? "Copied" : "Copy"}>
-                        <IconButton size={"smallest"} onClick={copy}>
-                            {copied ? <CheckIcon size={iconSize.smallest}/> : <CopyIcon size={iconSize.smallest}/>}
-                        </IconButton>
-                    </Tooltip>
-                )}
-            </span>
-        </div>
-    );
-}
-
-/**
- * Audit timestamps are a convention, not a contract — a collection may name them
- * anything or not have them at all — so this reads the values it recognises and
- * stays quiet otherwise rather than rendering an empty row.
- */
-function pickDate(values: Record<string, unknown> | undefined, keys: string[]): string | undefined {
-    if (!values) return undefined;
-    for (const key of keys) {
-        const value = values[key];
-        if (value instanceof Date) return value.toLocaleDateString();
-        if (typeof value === "string" && value) {
-            const parsed = new Date(value);
-            if (!Number.isNaN(parsed.getTime())) return parsed.toLocaleDateString();
-        }
-    }
-    return undefined;
-}

package/src/form/components/FormSections.tsx

@@ -1,145 +0,0 @@
-import type { ResolvedFormField, ResolvedFormSection } from "@rebasepro/app";
-import React from "react";
-import { ChevronDownIcon, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
-
-export interface FormSectionsProps {
-    sections: ResolvedFormSection[];
-    /** Section keys the user has collapsed. */
-    collapsed: ReadonlySet<string>;
-    onToggle: (key: string) => void;
-    /**
-     * Field keys currently showing a validation error. A section holding one is
-     * forced open — an error that hides inside a collapsed group is a form the
-     * user cannot submit and cannot debug.
-     */
-    errorKeys: ReadonlySet<string>;
-    renderField: (field: ResolvedFormField) => React.ReactNode;
-    /**
-     * Which rendering this is. `"read"` opens the gaps up rather than closing
-     * them: a control is a bordered 40px box that separates itself from the next
-     * one, and a value is bare text that does not. The form can also afford
-     * tighter rows because a description usually sits between them; with that
-     * gone, the same numbers ran a record's values together into one block.
-     */
-    mode?: "edit" | "read";
-    /**
-     * Renders one field as a summary row, for a section that asked for
-     * `readVariant: "summary"`. Only the read view supplies it; without it such
-     * a section falls back to the grid rather than to nothing.
-     */
-    renderSummaryField?: (field: ResolvedFormField, index: number, total: number) => React.ReactNode;
-}
-
-export function FormSections({
-    sections,
-    collapsed,
-    onToggle,
-    errorKeys,
-    renderField,
-    mode = "edit",
-    renderSummaryField
-}: FormSectionsProps) {
-
-    const reading = mode === "read";
-
-    return (
-        <div className={cls("flex flex-col", reading ? "gap-10" : "gap-8")}>
-            {sections.map((section) => {
-
-                const hasError = section.fields.some(f => errorKeys.has(f.key));
-                const isCollapsed = section.collapsible && collapsed.has(section.key) && !hasError;
-                const summary = reading
-                    && section.readVariant === "summary"
-                    && Boolean(renderSummaryField);
-
-                return (
-                    <section key={section.key} className={"min-w-0"}>
-
-                        {section.title && (
-                            <Header
-                                title={section.title}
-                                collapsible={section.collapsible}
-                                collapsed={isCollapsed}
-                                controls={`form_section_${section.key}`}
-                                onToggle={() => onToggle(section.key)}/>
-                        )}
-
-                        {!isCollapsed && (summary
-                            ? <div id={`form_section_${section.key}`}
-                                className={"flex flex-col min-w-0 @2xl:max-w-md @2xl:ml-auto"}>
-                                {section.fields.map((field, index) =>
-                                    renderSummaryField!(field, index, section.fields.length))}
-                            </div>
-                            // A container query, not a media query: the form is
-                            // rendered at four very different widths (full
-                            // screen, side panel, split pane, dialog) inside the
-                            // same viewport, so spans have to answer to the
-                            // column they are in, not to the window.
-                            : <div id={`form_section_${section.key}`}
-                                className={cls(
-                                    "grid min-w-0",
-                                    reading ? "gap-x-8 gap-y-7" : "gap-x-4 gap-y-5",
-                                    "grid-cols-1 @2xl:grid-cols-4"
-                                )}>
-                                {section.fields.map(renderField)}
-                            </div>
-                        )}
-                    </section>
-                );
-            })}
-        </div>
-    );
-}
-
-function Header({
-    title,
-    collapsible,
-    collapsed,
-    controls,
-    onToggle
-}: {
-    title: string;
-    collapsible: boolean;
-    collapsed: boolean;
-    /**
-     * Id of the region this header shows and hides. Only referenced while that
-     * region exists — a collapsed section unmounts its fields, and pointing
-     * `aria-controls` at an id that is not in the document is its own defect.
-     */
-    controls: string;
-    onToggle: () => void;
-}) {
-
-    const content = (
-        <>
-            {collapsible && (
-                <ChevronDownIcon
-                    size={iconSize.smallest}
-                    className={cls(
-                        "text-text-disabled dark:text-text-disabled-dark transition-transform duration-150",
-                        collapsed && "-rotate-90"
-                    )}/>
-            )}
-            <span className={"text-xs font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark whitespace-nowrap"}>
-                {title}
-            </span>
-            <span className={cls("flex-1 border-t", defaultBorderMixin)}/>
-        </>
-    );
-
-    const className = "flex items-center gap-2.5 w-full mb-3.5";
-
-    if (!collapsible) {
-        return <div className={className}>{content}</div>;
-    }
-
-    return (
-        <button type={"button"}
-            onClick={onToggle}
-            aria-expanded={!collapsed}
-            aria-controls={collapsed ? undefined : controls}
-            className={cls(className, "text-left hover:opacity-80 transition-opacity")}>
-            {content}
-        </button>
-    );
-}

package/src/form/components/LabelWithIcon.tsx

@@ -1,43 +0,0 @@
-import React, { forwardRef } from "react";
-import { cls } from "@rebasepro/ui";
-
-interface LabelWithIconProps {
-    icon: React.ReactNode;
-    title?: string;
-    small?: boolean;
-    className?: string;
-    required?: boolean;
-}
-
-/**
- * Render the label of with an icon and the title of a property
- * @group Form custom fields
- */
-export const LabelWithIcon = forwardRef<HTMLDivElement, LabelWithIconProps>(
-    ({
-        icon,
-        title,
-        small,
-        className,
-        required
-    }, ref) => {
-        return (
-            <div
-                ref={ref}
-                className={cls("align-middle inline-flex items-center my-0.5",
-                    small ? "gap-1" : "gap-2",
-                    className)}
-            >
-                {icon}
-                <span
-                    className={`text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""
-                        }`}
-                >
-                    {(title ?? "") + (required ? " *" : "")}
-                </span>
-            </div>
-        );
-    }
-);
-
-LabelWithIcon.displayName = "LabelWithIcon";

package/src/form/components/LabelWithIconAndTooltip.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import { LabelWithIcon } from "./LabelWithIcon";
-import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
-
-interface LabelWithIconAndTooltip {
-    icon: React.ReactNode;
-    title?: string;
-    small?: boolean;
-    className?: string;
-    required?: boolean;
-    propertyKey: string
-}
-
-/**
- * Render the label of with an icon and the title of a property
- * @group Form custom fields
- */
-export function LabelWithIconAndTooltip({
-                                            propertyKey,
-                                            className,
-                                            ...props
-                                        }: LabelWithIconAndTooltip) {
-    return (
-        <PropertyIdCopyTooltip propertyKey={propertyKey} className={className}>
-            <LabelWithIcon {...props}/>
-        </PropertyIdCopyTooltip>
-    );
-}

package/src/form/components/LocalChangesMenu.tsx

@@ -1,147 +0,0 @@
-
-import type { Properties } from "@rebasepro/types";
-import React, { useState } from "react";
-import {
-    AlertTriangleIcon,
-    Button,
-    CheckIcon,
-    ChevronDownIcon,
-    defaultBorderMixin,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    EyeIcon,
-    iconSize,
-    Menu,
-    MenuItem,
-    Typography,
-    XCircleIcon
-} from "@rebasepro/ui";
-import { FormexController } from "@rebasepro/forms";
-import { useSnackbarController, useTranslation } from "@rebasepro/app";
-import { flattenKeys, removeEntityFromCache } from "@rebasepro/app";
-;
-import { PropertyCollectionView } from "../../components/PropertyCollectionView";
-import { mergeDeep } from "@rebasepro/utils";
-
-interface LocalChangesMenuProps<M extends Record<string, unknown>> {
-    cacheKey: string;
-    cachedData: Partial<M>;
-    formex: FormexController<M>;
-    onClearLocalChanges?: () => void;
-    properties: Properties;
-}
-
-export function LocalChangesMenu<M extends Record<string, unknown>>({
-    cachedData,
-    formex,
-    onClearLocalChanges,
-    cacheKey,
-    properties
-}: LocalChangesMenuProps<M>) {
-
-    const snackbarController = useSnackbarController();
-    const { t } = useTranslation();
-    const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
-    const [open, setOpen] = useState(false);
-
-    const handleOpenMenu = () => setOpen(true);
-    const handleCloseMenu = () => setOpen(false);
-
-    const handlePreview = () => {
-        setPreviewDialogOpen(true);
-        handleCloseMenu();
-    };
-
-    const handleApply = () => {
-        const mergedValues = mergeDeep(formex.values, cachedData, true);
-        const touched = { ...formex.touched };
-        const cachedKeys = flattenKeys(cachedData);
-        cachedKeys.forEach((key) => {
-            touched[key] = true;
-        });
-
-        formex.setTouched(touched);
-        formex.setValues(mergedValues);
-        snackbarController.open({
-            type: "info",
-            message: t("local_changes_applied")
-        });
-        handleCloseMenu();
-        onClearLocalChanges?.();
-    };
-
-    const handleDiscard = () => {
-        removeEntityFromCache(cacheKey);
-        snackbarController.open({
-            type: "info",
-            message: t("local_changes_discarded")
-        });
-        handleCloseMenu();
-        onClearLocalChanges?.();
-    };
-
-    return (
-        <>
-            <Menu
-                trigger={
-                    <Button
-                        size={"small"}
-                        className={
-                            "font-semibold text-xs rounded-full px-4 py-1 bg-yellow-200 dark:bg-yellow-900 hover:bg-yellow-300 dark:hover:bg-yellow-800 text-yellow-800 dark:text-yellow-200"
-                        }
-                        onClick={handleOpenMenu}
-                    >
-                        <AlertTriangleIcon size={iconSize.smallest} className={"mr-1 text-yellow-600 dark:text-yellow-400"}/>
-                        {t("unsaved_local_changes")}
-                        <ChevronDownIcon size={iconSize.smallest}/>
-                    </Button>
-                }
-                open={open}
-                onOpenChange={setOpen}
-            >
-                <div className={"max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300"}>
-                    {t("unsaved_local_changes_description")}
-                </div>
-                <MenuItem dense onClick={handlePreview}><EyeIcon size={iconSize.small}/>{t("preview_changes")}</MenuItem>
-                <MenuItem dense onClick={handleApply}><CheckIcon size={iconSize.small}/>{t("apply_changes")}</MenuItem>
-                <MenuItem dense onClick={handleDiscard}><XCircleIcon size={iconSize.small}/>{t("discard_local_changes")}</MenuItem>
-            </Menu>
-
-            <Dialog
-                open={previewDialogOpen}
-                onOpenChange={setPreviewDialogOpen}
-                maxWidth={"4xl"}
-            >
-                <DialogTitle variant={"h6"}>{t("preview_local_changes")}</DialogTitle>
-                <DialogContent className={"my-4"}>
-                    <Typography variant={"body2"} className={"mb-4"}>
-                        {t("preview_local_changes_description")}
-                    </Typography>
-                    <div className={`border rounded-lg ${defaultBorderMixin}`} style={{
-                        maxHeight: 520,
-                        overflow: "auto"
-                    }}>
-                        <div className="p-4">
-                            <PropertyCollectionView data={cachedData}
-                                properties={properties as Properties}/>
-                        </div>
-                    </div>
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={() => setPreviewDialogOpen(false)}>{t("close")}</Button>
-                    <Button
-                        variant={"filled"}
-                        onClick={() => {
-                            handleApply();
-                            setPreviewDialogOpen(false);
-                        }}
-                    >
-                        {t("apply_changes")}
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        </>
-    );
-}

package/src/form/components/StorageItemPreview.tsx

@@ -1,81 +0,0 @@
-import type { StringProperty } from "@rebasepro/types";
-import React from "react";
-
-import { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { PropertyPreview } from "../../preview";
-
-import { cls, IconButton, paperMixin, Tooltip } from "@rebasepro/ui";
-import { ErrorBoundary, FileTextIcon, MinusIcon } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
-
-interface StorageItemPreviewProps {
-    name: string;
-    property: StringProperty;
-    value: string,
-    onRemove: (value: string) => void;
-    size: PreviewSize;
-    disabled: boolean;
-    placeholder?: boolean;
-    className?: string;
-}
-
-export function StorageItemPreview({
-    name,
-    property,
-    value,
-    onRemove,
-    disabled,
-    size,
-    placeholder,
-    className
-}: StorageItemPreviewProps) {
-    const { t } = useTranslation();
-
-    return (
-        <div className={cls(
-            "relative border-box flex items-center justify-center",
-            size === "large" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]",
-            paperMixin,
-            className)}>
-
-            {!placeholder && !disabled &&
-                <div
-                    className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-surface-900">
-
-                    <Tooltip
-                        asChild={true}
-                        title={t("remove")}>
-                        <IconButton
-                            size={"small"}
-                            onClick={(event) => {
-                                event.stopPropagation();
-                                onRemove(value);
-                            }}>
-                            <MinusIcon/>
-                        </IconButton>
-                    </Tooltip>
-                </div>
-            }
-
-            {!placeholder && value &&
-                <ErrorBoundary>
-                    <PropertyPreview propertyKey={name}
-                        value={value}
-                        property={property}
-                        interactive={false}
-                        size={size}/>
-                </ErrorBoundary>
-            }
-
-            {placeholder &&
-                <div
-                    onClick={(e) => e.stopPropagation()}
-                    className="flex flex-col items-center justify-center w-full h-full">
-                    <FileTextIcon className="text-surface-700 dark:text-surface-300"/>
-                </div>
-            }
-
-        </div>
-    );
-
-}