@rebasepro/cms 0.17.3 → 0.18.0

package/src/form/components/StorageUploadProgress.tsx

@@ -1,118 +0,0 @@
-import React, { useCallback } from "react";
-
-import { useSnackbarController, useStorageSource } from "@rebasepro/app";
-import { StorageFieldItem } from "@rebasepro/app";
-import { ErrorView } from "@rebasepro/app";
-import type { StorageSource } from "@rebasepro/types";
-import { cls, paperMixin, Skeleton } from "@rebasepro/ui";
-
-export interface StorageUploadItemProps {
-    storagePath: string;
-    metadata?: Record<string, unknown>,
-    entry: StorageFieldItem,
-    onFileUploadComplete: (value: string,
-        entry: StorageFieldItem,
-        metadata?: Record<string, unknown>,
-        uploadedUrl?: string) => Promise<void>;
-    imageSize: number;
-    simple: boolean;
-    /** Override the storage source for this upload. When provided, this source
-     *  is used instead of the default from context — enabling per-property
-     *  multi-backend uploads. */
-    storageSource?: StorageSource;
-}
-
-export function StorageUploadProgress({
-    storagePath,
-    entry,
-    metadata,
-    onFileUploadComplete,
-    imageSize,
-    simple,
-    storageSource: storageSourceProp
-}: StorageUploadItemProps) {
-
-    const defaultStorageSource = useStorageSource();
-    const storageSource = storageSourceProp ?? defaultStorageSource;
-
-    const snackbarController = useSnackbarController();
-
-    const [error, setError] = React.useState<Error | undefined>();
-    const [loading, setLoading] = React.useState<boolean>(false);
-    const mounted = React.useRef(false);
-    const uploading = React.useRef(false);
-
-    const upload = useCallback((file: File, fileName?: string) => {
-
-        if (uploading.current) return;
-        uploading.current = true;
-        setError(undefined);
-        setLoading(true);
-
-        const key = storagePath && fileName ? `${storagePath}/${fileName}` : fileName || storagePath || "unnamed";
-        storageSource.putObject({
-            file,
-            key,
-            metadata
-        })
-            .then(async ({ key: resultKey, storageUrl }) => {
-                console.debug("Upload successful", resultKey);
-                await onFileUploadComplete(resultKey, entry, metadata, storageUrl);
-                if (mounted.current)
-                    setLoading(false);
-            })
-            .catch((e) => {
-                console.warn("Upload error", e);
-                if (mounted.current) {
-                    setError(e);
-                    setLoading(false);
-                    snackbarController.open({
-                        type: "error",
-                        message: "Error uploading file: " + e.message
-                    });
-                }
-            })
-            .finally(() => {
-                uploading.current = false;
-            });
-    }, [entry, metadata, onFileUploadComplete, storageSource, storagePath]);
-
-    React.useEffect(() => {
-        mounted.current = true;
-        if (entry.file)
-            upload(entry.file, entry.fileName);
-        return () => {
-            mounted.current = false;
-        };
-    }, [entry.file, entry.fileName, upload]);
-
-    if (simple) {
-        // `imageSize` is a pixel count, so it has to be sized inline: `w-${n}`
-        // is neither a real Tailwind scale value nor a class the JIT can see.
-        return <div style={{
-            width: imageSize,
-            height: imageSize
-        }}>
-
-            {loading && <Skeleton width={imageSize}
-                height={imageSize}/>}
-
-        </div>
-    }
-    return (
-
-        <div className={cls(paperMixin,
-            "p-4 relative border-box flex items-center justify-center",
-            `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
-
-            {loading &&
-                <Skeleton className="w-full h-full"/>}
-
-            {error && <ErrorView title={"Error uploading file"}
-                error={error}/>}
-
-        </div>
-
-    );
-
-}

package/src/form/components/index.tsx

@@ -1,6 +0,0 @@
-export * from "./FieldHelperText";
-export * from "./LabelWithIcon";
-export * from "./LabelWithIconAndTooltip";
-export * from "./FieldBlock";
-export * from "./FormRail";
-export * from "./FormSections";

package/src/form/components/useRailVisible.tsx

@@ -1,47 +0,0 @@
-import React, { useLayoutEffect, useState } from "react";
-
-/**
- * Below this the form is a single column and the rail is not shown.
- *
- * Roughly the 320px rail plus a content column still wide enough to hold a
- * four-up row — at the threshold that leaves ~680px, which is four columns of
- * ~145px once the gutters are taken out. Above it the rail is worth having even
- * in the split view; below it — a narrow split pane, the side panel, the dialog,
- * a phone — its fields fold back into the column.
- */
-export const RAIL_MIN_WIDTH = 1000;
-
-/**
- * Is there room beside the form for the metadata rail?
- *
- * Measured on the form element rather than the viewport, because the same form
- * renders in a side panel and a dialog inside a wide window — a media query
- * would say "desktop" and hand a 600px panel a rail it cannot fit.
- *
- * This has to be a real measurement rather than a CSS `hidden` class: the
- * layout resolver *moves* fields into the rail, so hiding it with CSS did not
- * fold them back into the column, it made them unreachable. Status, category
- * and any other rail field simply could not be edited in the side panel, the
- * dialog, or on a phone.
- */
-export function useRailVisible(ref: React.RefObject<HTMLElement | null>): boolean {
-
-    const [visible, setVisible] = useState(false);
-
-    // Layout effect, not effect: measured before paint, so a wide form does
-    // not render single-column for a frame and then snap the rail in.
-    useLayoutEffect(() => {
-        const element = ref.current;
-        if (!element) return;
-
-        const measure = () => setVisible(element.getBoundingClientRect().width >= RAIL_MIN_WIDTH);
-        measure();
-
-        if (typeof ResizeObserver === "undefined") return;
-        const observer = new ResizeObserver(measure);
-        observer.observe(element);
-        return () => observer.disconnect();
-    }, [ref]);
-
-    return visible;
-}

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -1,109 +0,0 @@
-import type { FieldProps } from "../../types/fields";
-import type { ArrayProperty, Property } from "@rebasepro/types";
-import React from "react";
-;
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIconAndTooltip } from "../components/LabelWithIconAndTooltip";
-import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel, Typography } from "@rebasepro/ui";
-import { getArrayResolvedProperties } from "@rebasepro/common";
-import { isDisabled, isReadOnly } from "@rebasepro/app";
-import { getIconForProperty } from "../../util/property_utils";
-import { useClearRestoreValue } from "../useClearRestoreValue";
-import { useAuthController } from "@rebasepro/app";
-
-/**
- * Array field used for custom
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export function ArrayCustomShapedFieldBinding({
-    propertyKey,
-    value,
-    error,
-    showError,
-    isSubmitting,
-    setValue,
-    setFieldValue,
-    customProps,
-    minimalistView: minimalistViewProp,
-    property,
-    includeDescription,
-    context,
-    disabled
-}: FieldProps<ArrayProperty | ArrayProperty>) {
-
-    const authController = useAuthController();
-    const minimalistView = minimalistViewProp || property.admin?.minimalistView;
-
-    const resolvedProperties: Property[] | undefined = getArrayResolvedProperties({
-        propertyValue: value,
-        propertyKey,
-        property,
-        ignoreMissingFields: false,
-        authController
-    })
-
-    const expanded = property.admin?.expanded === undefined ? true : property.admin?.expanded;
-
-    useClearRestoreValue({
-        property,
-        value,
-        setValue
-    });
-
-    const title = (<>
-        <LabelWithIconAndTooltip
-            propertyKey={propertyKey}
-            icon={getIconForProperty(property, "small")}
-            required={property.validation?.required}
-            title={property.name ?? propertyKey}
-            className={"h-8 grow text-text-secondary dark:text-text-secondary-dark"}/>
-        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
-    </>);
-
-    const body = (resolvedProperties ?? []).map((childProperty, index) => {
-        const thisDisabled = isReadOnly(childProperty) || isDisabled(childProperty);
-        const fieldProps = {
-            propertyKey: `${propertyKey}[${index}]`,
-            disabled: disabled || thisDisabled,
-            property: childProperty,
-            includeDescription,
-            context,
-            partOfArray: true,
-            minimalistView: false,
-            autoFocus: false,
-            value,
-            setValue,
-            setFieldValue,
-            customProps
-        } as FieldProps;
-        return <div key={`custom_shaped_array_${index}`} className="pb-4">
-            <PropertyFieldBinding {...fieldProps}/>
-        </div>;
-    });
-
-    return (
-
-        <>
-
-            {!minimalistView &&
-                <ExpandablePanel initiallyExpanded={expanded}
-                    title={title}
-                    innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
-                    {body}
-                </ExpandablePanel>}
-
-            {minimalistView && body}
-
-            <FieldHelperText includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                disabled={disabled}
-                property={property}/>
-
-        </>
-    );
-}

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -1,172 +0,0 @@
-import { useSelectionDialog } from "../../hooks/useSelectionDialog";
-
-import type { FieldProps } from "../../types/fields";
-import type { ArrayProperty, Property } from "@rebasepro/types";
-import React, { useCallback, useMemo } from "react";
-import { Entity, EntityReference } from "@rebasepro/types";
-import { ReferencePreview } from "../../preview";
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIconAndTooltip } from "../components/LabelWithIconAndTooltip";
-import { ArrayContainer, ArrayEntryParams } from "../../components/ArrayContainer";
-import { getIconForProperty } from "../../util/property_utils";
-import { getReferenceFrom } from "@rebasepro/common";
-
-import { useTranslation, ErrorView } from "@rebasepro/app";
-import { Button, cls, ExpandablePanel, fieldBackgroundMixin, PencilIcon, Typography } from "@rebasepro/ui";
-import { useClearRestoreValue } from "../useClearRestoreValue";
-import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
-import type { AdminCollection } from "@rebasepro/cms-types";
-
-type ArrayOfReferencesFieldProps = FieldProps<ArrayProperty, EntityReference[]>;
-
-/**
- * This field allows selecting multiple references.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export function ArrayOfReferencesFieldBinding({
-    propertyKey,
-    value,
-    error,
-    showError,
-    disabled,
-    isSubmitting,
-    minimalistView: minimalistViewProp,
-    property,
-    includeDescription,
-    setValue,
-    setFieldValue
-}: ArrayOfReferencesFieldProps) {
-
-    const minimalistView = minimalistViewProp || property.admin?.minimalistView;
-    const { t } = useTranslation();
-
-    const ofProperty = property.of as Property;
-    if (ofProperty.type !== "reference") {
-        throw Error("ArrayOfReferencesField expected a property containing references");
-    }
-
-    const expanded = property.admin?.expanded === undefined ? true : property.admin?.expanded;
-    const selectedEntityIds = value && Array.isArray(value) ? value.map((ref) => ref.id) : [];
-
-    useClearRestoreValue({
-        property,
-        value,
-        setValue
-    });
-
-    const collectionRegistryController = useCollectionRegistryController();
-    const collection: AdminCollection | undefined = useMemo(() => {
-        return ofProperty.path ? collectionRegistryController.getCollection(ofProperty.path) : undefined;
-    }, [ofProperty.path]);
-
-    if (!collection) {
-        throw Error(`Couldn't find the corresponding collection for the path: ${ofProperty.path}`);
-    }
-
-    const onMultipleEntitiesSelected = useCallback((entities: Entity<Record<string, unknown>>[]) => {
-        const refs = entities.map(e => getReferenceFrom(e));
-        setValue(refs);
-    }, [setValue]);
-
-    const referenceDialogController = useSelectionDialog({
-        multiselect: true,
-        path: ofProperty.path,
-        collection,
-        onMultipleEntitiesSelected,
-        selectedEntityIds,
-        fixedFilter: ofProperty.admin?.fixedFilter
-    }
-    );
-
-    const onEntryClick = (e: React.SyntheticEvent) => {
-        e.preventDefault();
-        referenceDialogController.open();
-    };
-
-    const buildEntry = useCallback(({
-        index,
-        internalId,
-        storedProps,
-        storeProps
-    }: ArrayEntryParams) => {
-        const entryValue = value && value.length > index ? value[index] : undefined;
-        if (!entryValue)
-            return <div>Internal ERROR</div>;
-        return (
-            <ReferencePreview
-                key={internalId}
-                disabled={!ofProperty.path}
-                previewProperties={ofProperty.admin?.previewProperties}
-                size={"medium"}
-                onClick={onEntryClick}
-                hover={!disabled}
-                reference={entryValue}
-                includeId={ofProperty.admin?.includeId}
-                includeEntityLink={ofProperty.admin?.includeEntityLink}
-            />
-        );
-    }, [ofProperty.path, ofProperty.admin?.previewProperties, value]);
-
-    const title = (<>
-        <LabelWithIconAndTooltip
-            propertyKey={propertyKey}
-            icon={getIconForProperty(property, "small")}
-            required={property.validation?.required}
-            title={property.name ?? propertyKey}
-            className={"h-8 flex grow text-text-secondary dark:text-text-secondary-dark"}/>
-        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
-    </>);
-
-    const body = <>
-        {!collection && <ErrorView
-            error={"The specified collection does not exist. Check console"}/>}
-
-        {collection && <div className={"group"}>
-
-            <ArrayContainer droppableId={propertyKey}
-                value={value}
-                disabled={isSubmitting}
-                buildEntry={buildEntry}
-                canAddElements={false}
-                addLabel={property.name ? t("add_reference_to", { name: property.name }) : t("add_reference")}
-                newDefaultEntry={property.of && "defaultValue" in property.of ? property.of?.defaultValue : null}
-                onValueChange={(value) => setFieldValue(propertyKey, value)}
-            />
-
-            <Button
-                className="ml-3.5 my-4 justify-center text-left"
-                variant="text"
-                disabled={isSubmitting}
-                onClick={onEntryClick}>
-                <PencilIcon size={16}/>
-                {t("edit")} {property.name}
-            </Button>
-        </div>}
-    </>;
-
-    return (
-        <>
-
-            {!minimalistView &&
-                <ExpandablePanel
-                    titleClassName={fieldBackgroundMixin}
-                    innerClassName={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
-                    initiallyExpanded={expanded}
-                    title={title}>
-                    {body}
-                </ExpandablePanel>}
-
-            {minimalistView && body}
-
-            <FieldHelperText includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                disabled={disabled}
-                property={property}/>
-
-        </>
-    );
-}

package/src/form/field_bindings/BinaryFieldBinding.tsx

@@ -1,177 +0,0 @@
-import type { FieldProps } from "../../types/fields";
-import type { BinaryProperty } from "@rebasepro/types";
-import React, { useCallback, useEffect, useState } from "react";
-import { Button, CheckIcon, cls, defaultBorderMixin, IconButton, PencilIcon, TextField, Trash2Icon } from "@rebasepro/ui";
-
-import { FieldHelperText } from "../components/FieldHelperText";
-import { LabelWithIcon } from "../components/LabelWithIcon";
-import { useClearRestoreValue } from "../useClearRestoreValue";
-import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
-import { getIconForProperty } from "../../util/property_utils";
-
-/** Base64, optionally padded. Empty is allowed — that is a cleared field. */
-export const BASE64 = /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/;
-
-/** Decoded byte count of a base64 string, without decoding it. */
-export function decodedBytes(base64: string): number {
-    const clean = base64.replace(/\s/g, "");
-    if (!clean) return 0;
-    const padding = clean.endsWith("==") ? 2 : clean.endsWith("=") ? 1 : 0;
-    return Math.max(0, (clean.length * 3) / 4 - padding);
-}
-
-export function humanSize(bytes: number): string {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-/**
- * Field binding for `type: "binary"`, whose value is a base64-encoded string.
- *
- * Before this there was no binary field. The widget lookup mapped the type
- * straight to `text_field`, so a binary column rendered as an ordinary string
- * input — offering multiline, markdown and email options that mean nothing for
- * bytes, and, worse, pushing the property through a widget whose editor merges
- * `type: "string"`. Opening a binary property and touching its widget silently
- * changed its type.
- *
- * Shown collapsed by default. Base64 is long, unreadable and never worth
- * scrolling past to reach the next field; what a person actually wants to know
- * is whether there is anything in there and how big it is.
- *
- * @group Form fields
- */
-export function BinaryFieldBinding({
-    propertyKey,
-    value,
-    setValue,
-    error,
-    showError,
-    disabled,
-    autoFocus,
-    property,
-    includeDescription,
-    hideLabel,
-    size = "large"
-}: FieldProps<BinaryProperty>) {
-
-    const stored = typeof value === "string" ? value : "";
-    const [text, setText] = useState(stored);
-    const [isEditing, setIsEditing] = useState(false);
-
-    useEffect(() => {
-        setText(typeof value === "string" ? value : "");
-    }, [value]);
-
-    useClearRestoreValue({ property, value, setValue });
-
-    const handleClear = useCallback((e: React.MouseEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-        setText("");
-        setValue(null);
-    }, [setValue]);
-
-    const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        const raw = e.target.value;
-        setText(raw);
-        setValue(raw === "" ? null : (raw as never));
-    }, [setValue]);
-
-    const malformed = text.trim() !== "" && !BASE64.test(text.replace(/\s/g, ""));
-    const bytes = malformed ? 0 : decodedBytes(text);
-    const isPopulated = text.trim() !== "";
-
-    const localError = malformed ? "Not valid base64" : undefined;
-
-    return (
-        <div className="flex flex-col gap-2 w-full">
-            {/* The row goes away with the label rather than emptying out. Left
-                unconditional it still contributed its `mb-1` and the column's
-                `gap-2`, which — on top of the `mt-2` that used to sit on the
-                wrapper — pushed this control 20px below the one next to it
-                while the two labels stayed level. */}
-            {!hideLabel && <div className="flex items-center justify-between mb-1">
-                <LabelWithIcon
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    title={property.name ?? propertyKey}
-                />
-            </div>}
-
-            <PropertyIdCopyTooltip propertyKey={propertyKey}>
-                <div className="w-full">
-                    {!isEditing ? (
-                        <div className={cls("flex items-center justify-between gap-2 p-4 rounded-xl border bg-surface-50/50 dark:bg-surface-800/20", defaultBorderMixin)}>
-                            <div className="flex items-center gap-2.5 min-w-0">
-                                <div className={`w-2.5 h-2.5 rounded-full shrink-0 ${isPopulated ? "bg-emerald-500" : "bg-surface-300 dark:bg-surface-600"}`}/>
-                                <span className="text-sm font-semibold text-text-primary truncate">
-                                    {malformed
-                                        ? "Invalid base64"
-                                        : isPopulated ? `${humanSize(bytes)} of binary data` : "Empty"}
-                                </span>
-                            </div>
-                            <div className="flex items-center gap-2 shrink-0">
-                                {!disabled && (
-                                    <Button
-                                        variant="outlined"
-                                        size="small"
-                                        onClick={() => setIsEditing(true)}
-                                        startIcon={<PencilIcon size={14}/>}
-                                    >
-                                        {isPopulated ? "Edit base64" : "Add base64"}
-                                    </Button>
-                                )}
-                                {isPopulated && !disabled && (
-                                    <IconButton
-                                        size="small"
-                                        onClick={handleClear}
-                                        className="text-text-secondary hover:text-red-500"
-                                        aria-label="Clear binary value"
-                                    >
-                                        <Trash2Icon size={14}/>
-                                    </IconButton>
-                                )}
-                            </div>
-                        </div>
-                    ) : (
-                        <div className={cls("flex flex-col gap-2 p-4 rounded-xl border", defaultBorderMixin)}>
-                            <TextField
-                                size={size}
-                                aria-label={`${property.name ?? propertyKey} base64 value`}
-                                value={text}
-                                onChange={onChange}
-                                autoFocus={autoFocus ?? true}
-                                multiline
-                                minRows={4}
-                                disabled={disabled}
-                                placeholder="Base64-encoded bytes, e.g. iVBORw0KGgo…"
-                                error={showError ? Boolean(error) || malformed : malformed}
-                                inputClassName={`font-mono text-xs ${malformed ? "text-red-500" : ""}`}
-                            />
-                            <div className="flex justify-end">
-                                <Button
-                                    variant="filled"
-                                    size="small"
-                                    onClick={() => setIsEditing(false)}
-                                    startIcon={<CheckIcon size={14}/>}
-                                >
-                                    Done
-                                </Button>
-                            </div>
-                        </div>
-                    )}
-                </div>
-            </PropertyIdCopyTooltip>
-
-            <FieldHelperText
-                includeDescription={includeDescription}
-                showError={showError || malformed}
-                error={error || localError}
-                disabled={disabled}
-                property={property}
-            />
-        </div>
-    );
-}