@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -0,0 +1,277 @@
+import type { Properties } from "@rebasepro/types";
+import type { ArrayProperty, MapProperty, Property, StringProperty } from "@rebasepro/types";
+import { PreviewSize } from "../../types/components/PropertyPreviewProps";
+import React from "react";
+import { Skeleton } from "@rebasepro/ui";
+import { getThumbnailMeasure } from "../util";
+
+export interface SkeletonPropertyComponentProps {
+    property: Property,
+    size: PreviewSize
+}
+
+/**
+ * @group Preview components
+ */
+export function SkeletonPropertyComponent({
+    property,
+    size
+}: SkeletonPropertyComponentProps
+) {
+
+    if (!property) {
+        console.error("No property assigned for skeleton component", property, size);
+    }
+
+    let content: React.ReactNode | any;
+    if (property.type === "string") {
+        const stringProperty = property as StringProperty;
+        if (stringProperty.url) {
+            content = renderUrlComponent(stringProperty, size);
+        } else if (stringProperty.storage) {
+            content = renderSkeletonImageThumbnail(size);
+        } else {
+            content = renderSkeletonText();
+        }
+    } else if (property.type === "array") {
+        const arrayProperty = property as ArrayProperty;
+
+        if (arrayProperty.of) {
+            if (Array.isArray(arrayProperty.of)) {
+                content = <>{arrayProperty.of.map((p, i) => renderGenericArrayCell(p, i))} </>;
+            } else {
+                if (arrayProperty.of.type === "map" && arrayProperty.of.properties) {
+                    content = renderArrayOfMaps(arrayProperty.of.properties, size, arrayProperty.of.previewProperties);
+                } else if (arrayProperty.of.type === "string") {
+                    if (arrayProperty.of.enum) {
+                        content = renderArrayEnumTableCell();
+                    } else if (arrayProperty.of.storage) {
+                        content = renderGenericArrayCell(arrayProperty.of);
+                    } else {
+                        content = renderArrayOfStrings();
+                    }
+                } else {
+                    content = renderGenericArrayCell(arrayProperty.of);
+                }
+            }
+        }
+
+    } else if (property.type === "map") {
+        content = renderMap(property as MapProperty, size);
+    } else if (property.type === "date") {
+        content = renderSkeletonText();
+    } else if (property.type === "reference") {
+        content = renderReference();
+    } else if (property.type === "boolean") {
+        content = renderSkeletonText();
+    } else {
+        content = renderSkeletonText();
+    }
+    return (content || null);
+}
+
+function renderMap<T extends Record<string, any>>(property: MapProperty, size: PreviewSize) {
+
+    if (!property.properties)
+        return <></>;
+
+    let mapPropertyKeys: string[];
+    if (size === "large") {
+        mapPropertyKeys = Object.keys(property.properties);
+    } else {
+        mapPropertyKeys = (property.previewProperties || Object.keys(property.properties)) as string[];
+        if (size === "medium")
+            mapPropertyKeys = mapPropertyKeys.slice(0, 3);
+        else if (size === "small")
+            mapPropertyKeys = mapPropertyKeys.slice(0, 1);
+    }
+
+    if (size !== "large")
+        return (
+            <div
+                className="w-full flex flex-col space-y-4"
+            >
+                {mapPropertyKeys.map((key, index) => (
+                    <div key={`map_${key}`}>
+                        {property.properties && property.properties[key] &&
+                            <SkeletonPropertyComponent
+                                property={property.properties[key]}
+                                size={"medium"} />}
+                    </div>
+                ))}
+            </div>
+        );
+
+    return (
+        <table className="table-auto">
+            <tbody>
+                {mapPropertyKeys &&
+                    mapPropertyKeys.map((key, index) => {
+                        return (
+                            <tr
+                                key={`map_preview_table__${index}`}
+                                className="border-b last:border-b-0">
+                                <th key={`table-cell-title--${key}`}
+                                    className="align-top"
+                                    style={{ width: "30%" }}>
+                                    <p className="text-xs text-secondary">
+                                        {property.properties![key].name}
+                                    </p>
+                                </th>
+                                <th key={`table-cell-${key}`}
+                                    style={{ width: "70%" }}>
+                                    {property.properties && property.properties[key] &&
+                                        <SkeletonPropertyComponent
+                                            property={property.properties[key]}
+                                            size={"medium"} />}
+                                </th>
+                            </tr>
+                        );
+                    })}
+            </tbody>
+        </table>
+    );
+}
+
+function renderArrayOfMaps(properties: Properties, size: PreviewSize, previewProperties?: string[]) {
+    let tableProperties = previewProperties;
+    if (!tableProperties || !tableProperties.length) {
+        tableProperties = Object.keys(properties) as string[];
+        if (size)
+            tableProperties = tableProperties.slice(0, 3);
+    }
+
+    return (
+        <table className="table-auto">
+            <tbody>
+                {
+                    [0, 1, 2].map((value, index) => {
+                        return (
+                            <tr key={`table_${value}_${index}`}>
+                                {tableProperties && tableProperties.map(
+                                    (key) => (
+                                        <th
+                                            key={`table-cell-${key}`}
+                                        >
+                                            <SkeletonPropertyComponent
+                                                property={(properties)[key]}
+                                                size={"medium"} />
+                                        </th>
+                                    )
+                                )}
+                            </tr>
+                        );
+                    })}
+            </tbody>
+        </table>
+    );
+}
+
+function renderArrayOfStrings() {
+    return (
+        <div className={"flex flex-col gap-2"}>
+            {
+                [0, 1].map((value, index) => (
+                    renderSkeletonText(index)
+                ))}
+        </div>
+    );
+}
+
+function renderArrayEnumTableCell() {
+    return (
+        <div className={"flex flex-col gap-2"}>
+            {
+                [0, 1].map((value, index) =>
+                    <>
+                        {renderSkeletonText(index)}
+                    </>
+                )}
+        </div>
+    );
+}
+
+function renderGenericArrayCell(
+    property: Property,
+    index = 0
+) {
+    return (
+
+        <div key={"array_index_" + index}
+            className={"flex flex-col gap-2"}>
+
+            {
+                [0, 1].map((value, index) =>
+                    <>
+                        <SkeletonPropertyComponent key={`i_${index}`}
+                            property={property}
+                            size={"medium"} />
+                    </>
+                )}
+        </div>
+    );
+}
+
+function renderUrlAudioComponent() {
+    return (
+        <Skeleton width={300}
+            height={100} />
+    );
+}
+
+export function renderSkeletonImageThumbnail(size: PreviewSize) {
+    const imageSize = size === "small" ? 40 : size === "medium" ? 100 : 200;
+    return (
+        <Skeleton width={imageSize}
+            height={imageSize} />
+    );
+}
+
+function renderUrlVideo(size: PreviewSize) {
+
+    return (
+        <Skeleton width={size !== "large" ? 300 : 500}
+            height={size !== "large" ? 200 : 250} />
+    );
+}
+
+function renderReference() {
+    return <Skeleton width={200} height={100} />;
+}
+
+function renderUrlComponent(property: StringProperty, size: PreviewSize = "large") {
+
+    if (typeof property.url === "boolean") {
+        return <div style={{
+            display: "flex"
+        }}>
+            {renderSkeletonIcon()}
+            {renderSkeletonText()}
+        </div>;
+    }
+
+    return renderUrlFile(size);
+}
+
+function renderUrlFile(size: PreviewSize) {
+
+    return (
+        <div
+            className={`w-${getThumbnailMeasure(size)} h-${getThumbnailMeasure(size)}`}>
+            {renderSkeletonIcon()}
+        </div>
+    );
+}
+
+export function renderSkeletonText(index?: number, width = 120) {
+    return <Skeleton width={width} key={`skeleton_${index}`} />;
+}
+
+export function renderSkeletonCaptionText(index?: number) {
+    return <Skeleton
+        height={20} />;
+}
+
+export function renderSkeletonIcon() {
+    return <Skeleton width={24} height={24} />;
+}

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -0,0 +1,59 @@
+import type { StringProperty } from "@rebasepro/types";
+import React from "react";
+
+import { EnumValuesChip } from "../components/EnumValuesChip";
+import { PreviewType } from "@rebasepro/types";
+import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
+import { UrlComponentPreview } from "../components/UrlComponentPreview";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { Chip, cls, getColorSchemeForSeed } from "@rebasepro/ui";
+
+/**
+ * @group Preview components
+ */
+export function StringPropertyPreview({
+    propertyKey,
+    value,
+    property,
+    size
+}: PropertyPreviewProps<StringProperty>): React.ReactElement {
+
+    if (property.enum) {
+        const enumKey = value;
+        return <EnumValuesChip
+            enumKey={enumKey}
+            enumValues={property.enum}
+            size={size} />;
+    } else if (property.previewAsTag) {
+        const colorScheme = getColorSchemeForSeed(propertyKey ?? "");
+        return (
+            <ErrorBoundary>
+                <Chip
+                    colorScheme={colorScheme}
+                    size={size}>
+                    {value}
+                </Chip>
+            </ErrorBoundary>);
+    } else if (property.url) {
+        return (
+            <UrlComponentPreview size={size}
+                url={value}
+                previewType={typeof property.url === "string" ? property.url as PreviewType : undefined} />
+        );
+    } else {
+        if (!value) return <></>;
+        const lines = value.split("\n");
+        return value && value.includes("\n")
+            ? <div className={cls("overflow-x-scroll overflow-hidden", size === "small" ? "text-sm" : "")}>
+                {lines.map((str: any, index: number) =>
+                    <React.Fragment key={`string_preview_${index}`}>
+                        <span>{str}</span>
+                        {index !== lines.length - 1 && <br />}
+                    </React.Fragment>)}
+            </div>
+            : (size === "small"
+                ? <span className={"text-sm"}>{value}</span>
+                : <>{value}</>
+            );
+    }
+}

package/src/preview/util.ts

@@ -0,0 +1,30 @@
+import { CollectionSize } from "@rebasepro/types";
+import type { PreviewSize } from "../types/components/PropertyPreviewProps";
+export const SMALL_THUMBNAIL = 40;
+export const MEDIUM_THUMBNAIL = 100;
+export const LARGE_THUMBNAIL = 200;
+
+export function getThumbnailMeasure(size: PreviewSize): number {
+    if (size === "small")
+        return SMALL_THUMBNAIL;
+    else if (size === "medium")
+        return MEDIUM_THUMBNAIL;
+    else if (size === "large")
+        return LARGE_THUMBNAIL;
+    else throw Error("Thumbnail size not mapped");
+}
+
+export function getPreviewSizeFrom(size: CollectionSize): PreviewSize {
+    switch (size) {
+        case "xs":
+        case "s":
+            return "small";
+        case "m":
+            return "medium";
+        case "l":
+        case "xl":
+            return "large";
+        default:
+            throw Error("Missing mapping value in getPreviewSizeFrom: " + size);
+    }
+}

package/src/routes/CustomViewRoute.tsx

@@ -0,0 +1,24 @@
+import type { AppView } from "@rebasepro/types";
+;
+import { useEffect } from "react";
+import { useBreadcrumbsController } from "../index";
+import { useUrlController } from "../index";
+
+export function CustomViewRoute({ view }: {
+    view: AppView
+}) {
+
+    const breadcrumbs = useBreadcrumbsController();
+    const urlController = useUrlController();
+
+    useEffect(() => {
+        breadcrumbs.set({
+            breadcrumbs: [{
+                title: view.name,
+                url: urlController.buildAppUrlPath(view.slug)
+            }]
+        });
+    }, [view.slug, urlController]);
+
+    return view.view;
+}

package/src/routes/RebaseRoute.tsx

@@ -0,0 +1,265 @@
+import type { EntityCollection } from "@rebasepro/types";
+import { Blocker, useBlocker, useLocation } from "react-router";
+import { EntityEditView } from "../components/EntityEditView";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { EntityCollectionView } from "../components";
+import { NotFoundPage } from "@rebasepro/core";
+import { UnsavedChangesDialog } from "@rebasepro/core";
+import { CircularProgressCenter } from "@rebasepro/ui";
+import { getNavigationEntriesFromPath, NavigationViewCollectionInternal, NavigationViewEntityCustomInternal, NavigationViewInternal } from "@rebasepro/common";
+import { toArray } from "@rebasepro/utils";
+import { useCollectionRegistryController, useUrlController } from "../index";
+import { useBreadcrumbsController } from "../index";
+
+export function RebaseRoute() {
+
+    const location = useLocation();
+    const collectionRegistry = useCollectionRegistryController();
+    const urlController = useUrlController();
+    const breadcrumbs = useBreadcrumbsController();
+
+    const hash = location.hash;
+    const isSidePanel = hash.includes("#side");
+    const isNew = hash.includes("#new") || hash.includes("#new_side");
+    const isCopy = hash.includes("#copy");
+
+    const pathname = location.pathname;
+    const navigationPath = urlController.urlPathToDataPath(pathname);
+
+    const navigationEntries = getNavigationEntriesFromPath({
+        path: navigationPath,
+        collections: collectionRegistry.collections ?? []
+    });
+
+    useEffect(() => {
+        const lastEntry = navigationEntries[navigationEntries.length - 1];
+        const isViewingCollection = lastEntry?.type === "collection";
+
+        breadcrumbs.set({
+            breadcrumbs: navigationEntries.map((entry, index) => {
+                const isLastEntry = index === navigationEntries.length - 1;
+
+                if (entry.type === "entity") {
+                    return ({
+                        title: String(entry.entityId),
+                        url: urlController.buildUrlCollectionPath(entry.path)
+                        // count: undefined (not applicable for entities)
+                    });
+                } else if (entry.type === "custom_view") {
+                    return ({
+                        title: String(entry.view.name ?? entry.view.key),
+                        url: urlController.buildUrlCollectionPath(entry.path)
+                        // count: undefined (not applicable for custom views)
+                    });
+                } else if (entry.type === "collection") {
+                    // Only show count badge (loading state) when viewing this collection directly
+                    // Don't show count for parent collections when viewing an entity
+                    const showCount = isLastEntry && isViewingCollection;
+                    return ({
+                        title: entry.collection.name,
+                        url: urlController.buildUrlCollectionPath(entry.path),
+                        id: entry.path,
+                        ...(showCount ? { count: null } : {}) // null = loading, undefined = no badge
+                    });
+                } else {
+                    throw new Error("Unexpected navigation entry type");
+                }
+            })
+        });
+    }, [navigationEntries.map(entry => entry.path).join(",")]);
+
+    if (isNew) {
+        return <EntityFullScreenRoute
+            pathname={pathname}
+            navigationEntries={navigationEntries}
+            isNew={true}
+            isCopy={false}
+        />;
+    }
+
+    if (navigationEntries.length === 1 && navigationEntries[0].type === "collection") {
+        let collection: EntityCollection<any> | undefined;
+        collection = collectionRegistry.getCollection(navigationEntries[0].id);
+        if (!collection)
+            collection = collectionRegistry.getCollection(navigationEntries[0].slug);
+        if (!collection) {
+            if (!collectionRegistry.initialised) {
+                return <CircularProgressCenter />;
+            }
+            return null;
+        }
+        return <EntityCollectionView
+            key={`collection_view_${collection.slug}`}
+            parentCollectionIds={[]}
+            path={collection.slug}
+            updateUrl={true}
+            {...collection}
+            Actions={toArray(collection.Actions)} />
+    }
+
+    if (isSidePanel) {
+        const lastCollectionEntry = [...navigationEntries].reverse().find((entry) => entry.type === "collection");
+        if (lastCollectionEntry) {
+            let collection: EntityCollection<any> | undefined;
+            const firstEntry = navigationEntries[0] as NavigationViewCollectionInternal<any>;
+            collection = collectionRegistry.getCollection(firstEntry.id);
+            if (!collection)
+                collection = collectionRegistry.getCollection(firstEntry.slug);
+            if (!collection) {
+                if (!collectionRegistry.initialised) {
+                    return <CircularProgressCenter />;
+                }
+                return null;
+            }
+            return <EntityCollectionView
+                key={`collection_view_${collection.slug}`}
+                parentCollectionIds={[]}
+                path={collection.slug}
+                updateUrl={true}
+                {...collection}
+                Actions={toArray(collection.Actions)} />;
+        }
+    }
+
+    return <EntityFullScreenRoute
+        pathname={pathname}
+        navigationEntries={navigationEntries}
+        isNew={isNew}
+        isCopy={isCopy}
+    />;
+
+}
+
+function getSelectedTabFromUrl(isNew: boolean, lastCustomView: NavigationViewCollectionInternal<any> | NavigationViewEntityCustomInternal<any> | undefined) {
+    if (isNew) {
+        return undefined;
+    } else if (lastCustomView) {
+        if (lastCustomView.type === "custom_view") {
+            return lastCustomView.view.key;
+        } else if (lastCustomView.type === "collection") {
+            return lastCustomView.id ?? lastCustomView.slug;
+        }
+    }
+    return undefined;
+}
+
+function EntityFullScreenRoute({
+    pathname,
+    navigationEntries,
+    isNew,
+    isCopy
+}: {
+    pathname: string;
+    navigationEntries: NavigationViewInternal[],
+    isNew: boolean,
+    isCopy: boolean
+}) {
+
+    const collectionRegistry = useCollectionRegistryController();
+    const urlController = useUrlController();
+    const navigate = useNavigate();
+
+    const navigationPath = urlController.urlPathToDataPath(pathname);
+
+    // is navigating away blocked
+    const blocked = useRef(false);
+
+    const lastEntityEntry = [...navigationEntries].reverse().find((entry) => entry.type === "entity");
+    const navigationEntriesAfterEntity = lastEntityEntry ? navigationEntries.slice(navigationEntries.indexOf(lastEntityEntry) + 1) : [];
+
+    const lastCustomView = [...navigationEntriesAfterEntity].reverse().find(
+        (entry) => entry.type === "custom_view" || entry.type === "collection"
+    ) as NavigationViewCollectionInternal<any> | NavigationViewEntityCustomInternal<any> | undefined;
+
+    const entityId = lastEntityEntry && "entityId" in lastEntityEntry ? lastEntityEntry.entityId : undefined;
+
+    const urlTab = getSelectedTabFromUrl(isNew, lastCustomView);
+    const [selectedTab, setSelectedTab] = useState<string | undefined>(urlTab);
+
+    const parentCollectionIds = collectionRegistry.getParentCollectionIds(navigationPath);
+    useEffect(() => {
+        if (urlTab !== selectedTab) {
+            setSelectedTab(urlTab);
+        }
+    }, [urlTab]);
+
+    const basePath = !entityId || isNew
+        ? pathname
+        : pathname.substring(0, pathname.lastIndexOf(`/${entityId}`));
+
+    const entityPath = basePath + `/${entityId}`;
+
+    let blocker: Blocker | undefined = undefined;
+    try {
+        blocker = useBlocker(({
+            nextLocation
+        }) => {
+            if (nextLocation.pathname.startsWith(entityPath))
+                return false;
+            return blocked.current;
+        });
+    } catch (e) {
+        // console.warn("Blocker not available, navigation will not be blocked");
+    }
+
+    const lastCollectionEntry = [...navigationEntries].reverse().find((entry) => entry.type === "collection");
+
+    if (isNew && !lastCollectionEntry) {
+        throw new Error("INTERNAL: No collection found in the navigation");
+    }
+
+    if (!isNew && !lastEntityEntry) {
+        if (!collectionRegistry.initialised) {
+            return <CircularProgressCenter />;
+        }
+        return <NotFoundPage />;
+    }
+
+    const collection = isNew
+        ? (lastCollectionEntry && "collection" in lastCollectionEntry ? lastCollectionEntry.collection : undefined)!
+        : (lastEntityEntry && "parentCollection" in lastEntityEntry ? lastEntityEntry.parentCollection : undefined)!;
+    const fullIdPath = isNew ? lastCollectionEntry!.slug : lastEntityEntry!.slug;
+    const collectionPath = urlController.resolveDatabasePathsFrom(fullIdPath);
+    return <>
+        <EntityEditView
+            key={collection.slug + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
+            entityId={isNew ? undefined : entityId}
+            collection={collection}
+            layout={"full_screen"}
+            path={collectionPath}
+            copy={isCopy}
+            selectedTab={selectedTab ?? undefined}
+            onValuesModified={(modified) => blocked.current = modified}
+            onSaved={(params) => {
+                const newSelectedTab = params.selectedTab;
+                const newEntityId = params.entityId;
+                if (newSelectedTab) {
+                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}`, { replace: true });
+                } else {
+                    navigate(`${basePath}/${newEntityId}`, { replace: true });
+                }
+            }}
+            onTabChange={(params) => {
+                setSelectedTab(params.selectedTab);
+                if (isNew) {
+                    return;
+                }
+                const newSelectedTab = params.selectedTab;
+                if (newSelectedTab) {
+                    navigate(`${basePath}/${entityId}/${newSelectedTab}`, { replace: true });
+                } else {
+                    navigate(`${basePath}/${entityId}`, { replace: true });
+                }
+            }}
+            parentCollectionIds={parentCollectionIds}
+        />
+
+        <UnsavedChangesDialog
+            open={blocker?.state === "blocked"}
+            handleOk={() => blocker?.proceed?.()}
+            handleCancel={() => blocker?.reset?.()}
+            body={"You have unsaved changes in this entity."} />
+
+    </>;
+}

package/src/routes/index.ts

@@ -0,0 +1,2 @@
+export * from "./CustomViewRoute";
+export * from "./RebaseRoute";

package/src/types/components/EntityFormActionsProps.tsx

@@ -0,0 +1,20 @@
+import { Entity } from "@rebasepro/types";
+import { EntityCollection } from "@rebasepro/types";
+import { FormContext } from "../fields";
+import { FormexController } from "./formex";
+
+export interface EntityFormActionsProps {
+    path: string;
+    collection: EntityCollection;
+    entity?: Entity;
+    layout: "bottom" | "side";
+    savingError?: Error;
+    formex: FormexController<any>;
+    disabled: boolean;
+    status: "new" | "existing" | "copy";
+    pluginActions: React.ReactNode[];
+    openEntityMode: "side_panel" | "full_screen";
+    showDefaultActions?: boolean;
+    navigateBack: () => void;
+    formContext: FormContext
+}