@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/components/EntityPreview.tsx

@@ -0,0 +1,366 @@
+import type { EntityCollection } from "@rebasepro/types";
+import type { Property } from "@rebasepro/types";
+import * as React from "react";
+import { useEffect, useMemo } from "react";
+
+import { Entity } from "@rebasepro/types";
+import type { PreviewSize } from "../types/components/PropertyPreviewProps";
+import { getEntityImagePreviewPropertyKey } from "@rebasepro/common";
+import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@rebasepro/ui";
+import { PropertyPreview, SkeletonPropertyComponent } from "../preview";
+import {
+    useAuthController,
+    useCustomizationController,
+    useData
+} from "@rebasepro/core";
+import { useAnalyticsController } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/core";
+import { getPropertyInPath } from "../util/property_utils";
+import { getEntityPreviewKeys, getEntityTitlePropertyKey } from "../util/previews";
+import { getValueInPath } from "@rebasepro/utils";
+import { useCollectionRegistryController, useSideEntityController } from "../index";
+
+export type EntityPreviewProps = {
+    size?: PreviewSize,
+    actions?: React.ReactNode,
+    collection?: EntityCollection,
+    hover?: boolean;
+    previewKeys?: string[],
+    disabled?: boolean,
+    entity: Entity<any>,
+    includeId?: boolean,
+    includeTitle?: boolean,
+    includeEntityLink?: boolean,
+    includeImage?: boolean,
+    onClick?: (e: React.SyntheticEvent) => void;
+    onSideEntityClick?: (entity: Entity) => void,
+};
+
+export type EntityPreviewDataProps = {
+    size?: "smallest" | "small" | "medium" | "large",
+    actions?: React.ReactNode,
+    collection?: EntityCollection,
+    previewKeys?: string[],
+    entity: Entity<any>,
+    onSideEntityClick?: (entity: Entity) => void,
+    includeId?: boolean,
+    includeTitle?: boolean,
+    includeEntityLink?: boolean,
+    includeImage?: boolean,
+};
+
+/**
+ * This component contains the main logic and content for displaying an entity preview,
+ * without any container wrapper. Used internally by EntityPreview.
+ */
+export function EntityPreviewData({
+    actions,
+    collection: collectionProp,
+    previewKeys,
+    size = "medium",
+    includeId = true,
+    onSideEntityClick,
+    includeTitle = true,
+    includeEntityLink = true,
+    includeImage = true,
+    entity
+}: EntityPreviewDataProps) {
+
+    const authController = useAuthController();
+    const analyticsController = useAnalyticsController();
+    const sideEntityController = useSideEntityController();
+    const customizationController = useCustomizationController();
+
+    const collectionRegistryController = useCollectionRegistryController();
+
+    const collection = collectionProp ?? collectionRegistryController.getCollection(entity.path);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection view for the path: ${entity.path}`);
+    }
+
+    const listProperties = useMemo(() => previewKeys ?? getEntityPreviewKeys(authController, collection, customizationController.propertyConfigs, previewKeys, size === "medium" || size === "large" ? 3 : 2),
+        [previewKeys, collection, size]);
+
+    const titleProperty = includeTitle ? getEntityTitlePropertyKey(collection, customizationController.propertyConfigs) : undefined;
+    const imagePropertyKey = includeImage ? getEntityImagePreviewPropertyKey(collection) : undefined;
+    const imageProperty = imagePropertyKey ? collection.properties[imagePropertyKey] : undefined;
+    const ofProp = imageProperty && "of" in imageProperty ? imageProperty.of : undefined;
+    const usedImageProperty = ofProp ? (Array.isArray(ofProp) ? ofProp[0] : ofProp) : imageProperty;
+    const restProperties = listProperties.filter(p => p !== titleProperty && p !== imagePropertyKey);
+
+    const imageValue = imagePropertyKey ? getValueInPath(entity.values, imagePropertyKey) : undefined;
+    const usedImageValue = imageProperty !== undefined ? ("of" in imageProperty
+        ? (((imageValue as unknown[]) ?? []).length > 0
+            ? (imageValue as unknown[])[0] : undefined)
+        : imageValue)
+        : undefined;
+
+    return (
+        <>
+            <div className={cls("flex  shrink-0", {
+                "w-6 h-6 mx-1 my-0.5": size === "small" || size === "smallest",
+                "w-8 h-8 ml-1 mr-2 m-2 self-start": size === "medium",
+                "w-10 h-10 ml-2 mr-2 m-2 self-start": size === "large"
+            })}>
+                {usedImageProperty && usedImageValue ? <PropertyPreview property={usedImageProperty}
+                    propertyKey={imagePropertyKey as string}
+                    size={"small"}
+                    value={usedImageValue as never} /> : null}
+                {(!usedImageProperty || !usedImageValue) ? <IconForView collectionOrView={collection}
+                    color={"primary"}
+                    size={size}
+                    className={"m-auto p-1"} /> : null}
+            </div>
+
+            <div
+                className={"flex flex-col grow w-full m-1 shrink min-w-0 text-text-primary dark:text-text-primary-dark flex-1 mr-2"}>
+
+                {includeId && (
+                    entity
+                        ? <div className={"block whitespace-nowrap overflow-hidden truncate"}>
+                            <Typography variant={"caption"}
+                                color={"disabled"}
+                                className={"font-mono"}>
+                                {entity.id}
+                            </Typography>
+                        </div>
+                        : <Skeleton />)}
+
+                {titleProperty && (
+                    <div
+                        className={"truncate my-0.5 text-sm font-medium text-text-primary dark:text-text-primary-dark"}>
+                        {
+                            entity
+                                ? <PropertyPreview
+                                    propertyKey={titleProperty as string}
+                                    value={getValueInPath(entity.values, titleProperty) as never}
+                                    property={collection.properties[titleProperty as string] as Property}
+                                    size={"medium"} />
+                                : <SkeletonPropertyComponent
+                                    property={collection.properties[titleProperty as string] as Property}
+                                    size={"medium"} />
+                        }
+                    </div>
+                )}
+
+                {restProperties && restProperties.map((key) => {
+                    const childProperty = getPropertyInPath(collection.properties, key);
+                    if (!childProperty) return null;
+
+                    const valueInPath = getValueInPath(entity.values, key);
+                    return (
+                        <div key={"ref_prev_" + key}
+                            className={cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0")}>
+                            {
+                                entity
+                                    ? <PropertyPreview
+                                        propertyKey={key as string}
+                                        value={valueInPath as never}
+                                        property={childProperty as Property}
+                                        size={"small"} />
+                                    : <SkeletonPropertyComponent
+                                        property={childProperty as Property}
+                                        size={"small"} />
+                            }
+                        </div>
+                    );
+                })}
+
+            </div>
+
+            {entity && includeEntityLink &&
+                <div className="flex-shrink-0">
+                    <Tooltip title={`See details for ${entity.id}`} className={"shrink-0"}>
+                        <IconButton
+                            color={"inherit"}
+                            size={"small"}
+                            className={size !== "small" ? "self-start" : ""}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                onSideEntityClick?.(entity);
+                                analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
+                                    path: entity.path,
+                                    entityId: entity.id
+                                });
+                                sideEntityController.open({
+                                    entityId: entity.id,
+                                    path: entity.path,
+                                    collection,
+                                    updateUrl: true
+                                });
+                            }}>
+                            <KeyboardTabIcon size={"small"} />
+                        </IconButton>
+                    </Tooltip>
+                </div>}
+
+            {actions && <div className="flex-shrink-0">{actions}</div>}
+        </>
+    );
+}
+
+export function EntityPreviewWithId({
+    entityId,
+    path,
+    ...props
+}: Omit<EntityPreviewProps, "entity"> & {
+    entityId: string | number;
+    path: string;
+    databaseId?: string;
+}) {
+
+    const [entity, setEntity] = React.useState<Entity | undefined>();
+    const [dataLoading, setDataLoading] = React.useState(false);
+    const dataClient = useData();
+
+    useEffect(() => {
+        let isMounted = true;
+        if (!entityId || !path) {
+            setEntity(undefined);
+            return;
+        }
+        const fetchEntity = async () => {
+            setDataLoading(true);
+            try {
+                const fetchedEntity = await dataClient.collection(path).findById(entityId);
+                if (isMounted) {
+                    setEntity(fetchedEntity);
+                }
+            } catch (error) {
+                console.error("Error fetching entity:", error);
+                if (isMounted) {
+                    setEntity(undefined);
+                }
+            } finally {
+                if (isMounted) {
+                    setDataLoading(false);
+                }
+            }
+        }
+
+        fetchEntity();
+
+        return () => {
+            isMounted = false;
+        }
+    }, [entityId, path]);
+
+    if (dataLoading && !entity) {
+        return (
+            <EntityPreviewContainer
+                hover={props.hover}
+                size={props.size}>
+                <Skeleton />
+            </EntityPreviewContainer>
+        );
+    }
+
+    if (!entity) {
+        return (
+            <EntityPreviewContainer
+                hover={props.hover}
+                size={props.size}>
+                <div className={"text-text-secondary dark:text-text-secondary-dark"}>
+                    Entity not found
+                </div>
+            </EntityPreviewContainer>
+        );
+    }
+
+    return <EntityPreviewData
+        {...props}
+        entity={entity} />;
+}
+
+/**
+ * This view is used to display a preview of an entity.
+ * It is used by default in reference fields and whenever a reference is displayed.
+ */
+export function EntityPreview({
+    actions,
+    disabled,
+    hover,
+    collection,
+    previewKeys,
+    onClick,
+    size = "medium",
+    includeId = true,
+    includeTitle = true,
+    includeEntityLink = true,
+    includeImage = true,
+    onSideEntityClick,
+    entity
+}: EntityPreviewProps) {
+
+    return (
+        <EntityPreviewContainer
+            onClick={disabled ? undefined : onClick}
+            hover={disabled ? undefined : hover}
+            size={size}>
+            <EntityPreviewData
+                actions={actions}
+                collection={collection}
+                previewKeys={previewKeys}
+                size={size}
+                includeId={includeId}
+                includeTitle={includeTitle}
+                includeEntityLink={includeEntityLink}
+                includeImage={includeImage}
+                onSideEntityClick={onSideEntityClick}
+                entity={entity}
+            />
+        </EntityPreviewContainer>
+    );
+}
+
+export type EntityPreviewContainerProps = {
+    children: React.ReactNode;
+    hover?: boolean;
+    fullwidth?: boolean;
+    size?: PreviewSize;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.SyntheticEvent) => void;
+};
+
+export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
+    children,
+    hover,
+    onClick,
+    size = "medium",
+    style,
+    className,
+    fullwidth = true,
+    ...props
+}, ref) => {
+    return <div
+        ref={ref}
+        style={{
+            ...style,
+            tabIndex: 0
+        } as React.CSSProperties}
+        className={cls(
+            "bg-white dark:bg-surface-900",
+            size === "small" ? "min-h-[32px]" : "min-h-[44px]",
+            fullwidth ? "w-full" : "",
+            "items-center",
+            hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "",
+            size === "small" ? "p-1" : "px-2 py-1",
+            "flex border rounded-lg",
+            onClick ? "cursor-pointer" : "",
+            defaultBorderMixin,
+            className)}
+        onClick={(event) => {
+            if (onClick) {
+                event.preventDefault();
+                onClick(event);
+            }
+        }}
+        {...props}>
+        {children}
+    </div>;
+});
+
+EntityPreviewContainer.displayName = "EntityPreviewContainer";

package/src/components/EntitySidePanel.tsx

@@ -0,0 +1,159 @@
+import type { EntityCollection } from "@rebasepro/types";
+import type { EntitySidePanelProps } from "@rebasepro/types";
+import React, { useCallback, useEffect, useMemo } from "react";
+
+import type { OnUpdateParams } from "../types/components/EntityFormProps";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { EntityEditView } from "./EntityEditView";
+import { useSideDialogContext } from "./SideDialogs";
+import { CloseIcon, IconButton, OpenInFullIcon } from "@rebasepro/ui";
+import { useLocation, useNavigate } from "react-router-dom";
+import { saveEntityToMemoryCache } from "@rebasepro/core";
+import { useCollectionRegistryController, useSideEntityController } from "../index";
+import { useUrlController } from "../index";
+
+/**
+ * This is the component in charge of rendering the side dialog used
+ * for editing entities. Use the {@link useSideEntityController} to open
+ * and control the dialogs.
+ * This component needs a parent {@link Rebase}
+ * {@link useSideEntityController}
+ * @group Components
+ */
+export function EntitySidePanel(props: EntitySidePanelProps) {
+
+    const {
+        allowFullScreen = true,
+        path,
+        entityId,
+        formProps,
+    } = props;
+
+    const {
+        blocked,
+        setBlocked,
+        setBlockedNavigationMessage,
+        close,
+    } = useSideDialogContext();
+
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const sideEntityController = useSideEntityController();
+    const collectionRegistryController = useCollectionRegistryController();
+    const sideDialogsController = useSideDialogContext();
+    const urlController = useUrlController();
+
+    const onClose = () => {
+        if (props.onClose) {
+            props.onClose();
+        }
+
+        setBlocked(false);
+        close(true);
+    }
+
+    const onUpdate = (params: OnUpdateParams) => {
+        if (props.onUpdate) {
+            props.onUpdate(params);
+        }
+        if (params.status !== "existing") {
+            sideEntityController.replace({
+                path: params.path,
+                entityId: params.entityId,
+                selectedTab: params.selectedTab,
+                updateUrl: true,
+                collection: params.collection,
+            });
+        }
+
+        if (sideDialogsController.pendingClose) {
+            sideDialogsController.setPendingClose(false);
+            onClose();
+        }
+
+    }
+
+    const parentCollectionIds = useMemo(() => {
+        return collectionRegistryController.getParentCollectionIds(path);
+    }, [collectionRegistryController, path]);
+
+    const collection = collectionRegistryController.getCollection(path) ?? props.collection;
+
+    // Note: beforeunload is handled by useUnsavedChangesDialog in SideDialogView,
+    // which listens to the same `blocked` state via SideDialogContext.
+
+    const onValuesModified = useCallback((modified: boolean) => {
+        setBlockedNavigationMessage(modified
+            ? <> You have unsaved changes in this <b>{collection?.singularName ?? collection?.name}</b>.</>
+            : undefined)
+        setBlocked(modified);
+    }, [collection?.name, setBlocked, setBlockedNavigationMessage]);
+
+    if (!props || !collection) {
+        return <div className={"w-full"} />;
+    }
+
+    return (
+        <>
+            <ErrorBoundary>
+                <EntityEditView
+                    {...props}
+                    layout={"side_panel"}
+                    collection={collection as EntityCollection}
+                    parentCollectionIds={parentCollectionIds}
+                    onValuesModified={onValuesModified}
+                    onSaved={onUpdate}
+                    barActions={({
+                        status,
+                        values
+                    }) => <div className="flex gap-1">
+                            <IconButton
+                                className="self-center"
+                                size={"small"}
+                                onClick={onClose}>
+                                <CloseIcon size={"small"} />
+                            </IconButton>
+                            {allowFullScreen && <IconButton
+                                className="self-center"
+                                size={"small"}
+                                onClick={() => {
+                                    const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+                                    saveEntityToMemoryCache(key, values);
+                                    // Clear blocked so no unsaved-changes dialog fires
+                                    setBlocked(false);
+                                    setBlockedNavigationMessage(undefined);
+                                    // IMPORTANT: useLocation() returns the frozen base_location from RebaseRoutes
+                                    // (the collection URL), not the actual browser URL.
+                                    // Build the full-screen URL directly from props using urlController.
+                                    if (entityId) {
+                                        const fullScreenUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}`);
+                                        navigate(fullScreenUrl, { state: null });
+                                    } else {
+                                        const fullScreenUrl = urlController.buildUrlCollectionPath(path);
+                                        navigate(fullScreenUrl + "#new", { state: null });
+                                    }
+                                }}>
+                                <OpenInFullIcon size={"smallest"} />
+                            </IconButton>}
+                        </div>}
+                    onTabChange={({
+                        entityId,
+                        selectedTab,
+                        collection,
+                    }) => {
+                        sideEntityController.replace({
+                            path: path,
+                            entityId,
+                            selectedTab,
+                            updateUrl: true,
+                            collection,
+                        });
+                    }}
+                    formProps={formProps}
+                />
+            </ErrorBoundary>
+
+        </>
+    );
+}

package/src/components/EntityView.tsx

@@ -0,0 +1,69 @@
+import type { Properties } from "@rebasepro/types";
+import type { EntityCollection } from "@rebasepro/types";
+import type { CustomizationController } from "@rebasepro/types";
+import React from "react";
+import { Entity } from "@rebasepro/types";
+import { cls, defaultBorderMixin, IconButton, OpenInNewIcon, Typography } from "@rebasepro/ui";
+;
+import { useCustomizationController } from "@rebasepro/core";
+import { useAuthController } from "@rebasepro/core";
+import { PropertyCollectionView } from "./PropertyCollectionView";
+
+/**
+ * @group Components
+ */
+export interface EntityViewProps<M extends Record<string, unknown>> {
+    entity: Entity<M>;
+    collection: EntityCollection<M>;
+    path: string;
+    className?: string;
+}
+
+export function EntityView<M extends Record<string, unknown>>(
+    {
+        entity,
+        collection,
+        path,
+        className
+    }: EntityViewProps<M>) {
+
+    const customizationController: CustomizationController = useCustomizationController();
+
+    const properties: Properties = collection.properties;
+
+    return (
+        <div className={"w-full " + className}>
+            <div className={"w-full mb-4 p-4"}>
+
+                <div className={`grid grid-cols-12 gap-x-4 py-4 items-start border-b ${defaultBorderMixin}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                            color={"secondary"}
+                            component={"span"}
+                            className="break-words">
+                            Id
+                        </Typography>
+                    </div>
+                    <div className="col-span-8">
+                        <div
+                            className="flex-grow text-surface-900 dark:text-white flex items-center">
+                            <span className="flex-grow mr-2">{entity.id}</span>
+                            {customizationController?.entityLinkBuilder &&
+                                <a href={customizationController.entityLinkBuilder({ entity })}
+                                    rel="noopener noreferrer"
+                                    target="_blank">
+                                    <IconButton>
+                                        <OpenInNewIcon
+                                            size={"small"} />
+                                    </IconButton>
+                                </a>}
+                        </div>
+                    </div>
+                </div>
+
+                <PropertyCollectionView data={entity.values} properties={properties} size={"medium"} />
+
+            </div>
+        </div>
+    );
+}

package/src/components/FieldCaption.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Typography } from "@rebasepro/ui";
+
+export function FieldCaption({
+    error,
+    children
+}: { error?: boolean, children?: React.ReactNode }) {
+    if (!children) return null;
+    return (
+        <Typography variant={"caption"} color={error ? "error" : "secondary"} className={"ml-3.5 mt-0.5"}>
+            {children}
+        </Typography>
+    );
+}