@rebasepro/core 0.0.1-canary.0

package/src/internal/useBuildSideEntityController.tsx

@@ -0,0 +1,309 @@
+import { useCallback, useEffect, useRef } from "react";
+import {
+    AuthController,
+    CustomizationController,
+    EntityCollection,
+    EntitySidePanelProps,
+    SideDialogPanelProps,
+    SideDialogsController,
+    SideEntityController,
+    CollectionRegistryController,
+    CMSUrlController,
+    NavigationStateController,
+    Property
+} from "@rebasepro/types";
+import { useLocation } from "react-router-dom";
+import {
+    getNavigationEntriesFromPath,
+    NavigationViewInternal,
+    removeInitialAndTrailingSlashes,
+    resolveDefaultSelectedView, resolvedSelectedEntityView,
+} from "@rebasepro/common";
+import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
+import { useCustomizationController, useLargeLayout } from "../hooks";
+import { JSON_TAB_VALUE } from "../core/EntityEditView";
+
+const NEW_URL_HASH = "new_side";
+const SIDE_URL_HASH = "side";
+
+export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean, customizationController: CustomizationController): string {
+    if (small) return CONTAINER_FULL_WIDTH;
+
+    const {
+        selectedSecondaryForm
+    } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
+
+    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || props.selectedTab === "__history" || Boolean(selectedSecondaryForm);
+
+    let resolvedWidth: string | undefined;
+    if (props.width) {
+        resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
+    } else if (props.collection?.sideDialogWidth) {
+        resolvedWidth = typeof props.collection.sideDialogWidth === "number" ? `${props.collection.sideDialogWidth}px` : props.collection.sideDialogWidth;
+    }
+
+    if (!shouldUseSmallLayout) {
+        return `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})`
+    } else {
+        if (resolvedWidth) {
+            return resolvedWidth
+        } else if (!props.collection) {
+            return FORM_CONTAINER_WIDTH;
+        } else {
+            return calculateCollectionDesiredWidth(props.collection);
+        }
+    }
+}
+
+const collectionViewWidthCache: { [key: string]: string } = {};
+
+function calculateCollectionDesiredWidth(collection: EntityCollection<any>): string {
+    if (collectionViewWidthCache[collection.slug]) {
+        return collectionViewWidthCache[collection.slug];
+    }
+
+    let result = FORM_CONTAINER_WIDTH
+    if (collection?.properties) {
+        const values = Object.values(collection.properties).map((p: Property) => getNestedPropertiesDepth(p));
+        const maxDepth = Math.max(...values);
+        if (maxDepth < 3) {
+            result = FORM_CONTAINER_WIDTH;
+        } else {
+            result = 768 + 32 * (maxDepth - 2) + "px";
+        }
+    }
+    collectionViewWidthCache[collection.slug] = result;
+    return result;
+}
+
+function getNestedPropertiesDepth(property: Property, accumulator: number = 0): number {
+    if (property.type === "map" && property.properties) {
+        const values = Object.values(property.properties).flatMap((property) => getNestedPropertiesDepth(property, accumulator + 1));
+        return Math.max(...values);
+    } else if (property.type === "array" && property.oneOf) {
+        return accumulator + 3;
+    } else if (property.type === "array" && property.of) {
+        if (Array.isArray(property.of)) {
+            return Math.max(...property.of.map((p) => getNestedPropertiesDepth(p, accumulator + 1)));
+        } else {
+            return getNestedPropertiesDepth(property.of, accumulator + 1);
+        }
+    } else {
+        return accumulator + 1;
+    }
+}
+
+export const useBuildSideEntityController = (collectionRegistryController: CollectionRegistryController,
+    cmsUrlController: CMSUrlController,
+    navigationStateController: NavigationStateController,
+    sideDialogsController: SideDialogsController,
+    authController: AuthController
+): SideEntityController => {
+
+    const location = useLocation();
+    const initialised = useRef<boolean>(false);
+    const currentPanelKeysRef = useRef<string[]>([]);
+    const customizationController = useCustomizationController();
+
+    const smallLayout = !useLargeLayout();
+
+    useEffect(() => {
+
+        const newFlag = location.hash === `#${NEW_URL_HASH}`;
+        const sideFlag = location.hash === `#${SIDE_URL_HASH}`;
+
+        if (!navigationStateController.loading) {
+            if ((newFlag || sideFlag) && cmsUrlController.isUrlCollectionPath(location.pathname)) {
+                const entityOrCollectionPath = cmsUrlController.urlPathToDataPath(location.pathname);
+                const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, collectionRegistryController.collections ?? [], newFlag);
+                for (let i = 0; i < panelsFromUrl.length; i++) {
+                    const props = panelsFromUrl[i];
+                    if (i === 0)
+                        sideDialogsController.replace(propsToSidePanel(props, cmsUrlController.buildUrlCollectionPath, cmsUrlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search));
+                    else
+                        sideDialogsController.open(propsToSidePanel(props, cmsUrlController.buildUrlCollectionPath, cmsUrlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search))
+                }
+            }
+            initialised.current = true;
+        }
+    }, [navigationStateController.loading]);
+
+    // sync panels if URL changes with #side
+    // Use a ref for currentPanelKeys so this effect only fires on URL changes,
+    // not on panel state changes. This prevents a race condition with React Router 7
+    // where close() clears panels before the URL updates, causing the effect to
+    // re-open the panel from the stale #side hash.
+    currentPanelKeysRef.current = sideDialogsController.sidePanels.map(p => p.key);
+    useEffect(() => {
+        if (initialised.current) {
+            const sideFlag = location.hash === `#${SIDE_URL_HASH}`;
+            if (sideFlag) {
+                const currentKeys = currentPanelKeysRef.current;
+                const entityOrCollectionPath = cmsUrlController.urlPathToDataPath(location.pathname);
+                const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, collectionRegistryController.collections ?? [], false);
+                // if we have more panels than determined by the url, we ignore the url. We might have references open
+                if (panelsFromUrl.length <= currentKeys.length) {
+                    return;
+                }
+                const lastPanel = panelsFromUrl[panelsFromUrl.length - 1];
+                const panelProps = propsToSidePanel(lastPanel, cmsUrlController.buildUrlCollectionPath, cmsUrlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search);
+                const lastCurrentPanel = currentKeys.length > 0 ? currentKeys[currentKeys.length - 1] : undefined;
+                if (!lastCurrentPanel || lastCurrentPanel !== panelProps.key) {
+                    sideDialogsController.replace(panelProps);
+                }
+            }
+        }
+    }, [location.pathname, location.hash]);
+
+    // update side panels to match browser size
+    useEffect(() => {
+        const updatedSidePanels = sideDialogsController.sidePanels.map(sidePanelProps => {
+            if (sidePanelProps.additional) {
+                return propsToSidePanel(sidePanelProps.additional as EntitySidePanelProps, cmsUrlController.buildUrlCollectionPath, cmsUrlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search);
+            }
+            return sidePanelProps;
+        });
+        sideDialogsController.setSidePanels(updatedSidePanels);
+    }, [smallLayout]);
+
+    const close = useCallback(() => {
+        sideDialogsController.close();
+    }, [sideDialogsController]);
+
+    const open = useCallback((props: EntitySidePanelProps<any>) => {
+
+        if (props.copy && !props.entityId) {
+            throw Error("If you want to copy an entity you need to provide an entityId");
+        }
+
+        const defaultSelectedView = resolveDefaultSelectedView(
+            props.collection ? props.collection.defaultSelectedView : undefined,
+            {
+                status: props.copy ? "copy" : (props.entityId ? "existing" : "new"),
+                entityId: props.entityId
+            }
+        );
+
+        sideDialogsController.open(
+            propsToSidePanel({
+                selectedTab: defaultSelectedView,
+                ...props
+            },
+                cmsUrlController.buildUrlCollectionPath,
+                cmsUrlController.resolveDatabasePathsFrom,
+                smallLayout,
+                customizationController,
+                authController,
+                location.search
+            ));
+
+    }, [sideDialogsController, cmsUrlController.buildUrlCollectionPath, cmsUrlController.resolveDatabasePathsFrom, smallLayout, authController.user, location.search]);
+
+    const replace = useCallback((props: EntitySidePanelProps<any>) => {
+
+        if (props.copy && !props.entityId) {
+            throw Error("If you want to copy an entity you need to provide an entityId");
+        }
+
+        sideDialogsController.replace(propsToSidePanel(props, cmsUrlController.buildUrlCollectionPath, cmsUrlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search));
+
+    }, [cmsUrlController.buildUrlCollectionPath, cmsUrlController.resolveDatabasePathsFrom, sideDialogsController, smallLayout, authController.user, location.search]);
+
+    return {
+        close,
+        open,
+        replace
+    };
+};
+
+export function buildSidePanelsFromUrl(path: string, collections: EntityCollection[], newFlag: boolean): EntitySidePanelProps<any>[] {
+
+    const navigationViewsForPath: NavigationViewInternal<any>[] = getNavigationEntriesFromPath({
+        path,
+        collections
+    });
+
+    let sidePanel: EntitySidePanelProps<any> | undefined = undefined;
+    let lastCollectionPath = "";
+    let lastCollectionId: string | undefined = undefined;
+    for (let i = 0; i < navigationViewsForPath.length; i++) {
+        const navigationEntry = navigationViewsForPath[i];
+
+        if (navigationEntry.type === "collection") {
+            lastCollectionPath = navigationEntry.slug;
+            lastCollectionId = navigationEntry.collection.slug;
+        }
+
+        const previousEntry = navigationViewsForPath[i - 1];
+        if (navigationEntry.type === "entity") {
+            sidePanel = {
+                path: navigationEntry.slug,
+                entityId: navigationEntry.entityId,
+                copy: false,
+                width: navigationEntry.parentCollection?.sideDialogWidth
+            };
+        } else if (navigationEntry.type === "custom_view") {
+            if (previousEntry?.type === "entity") {
+                if (sidePanel)
+                    sidePanel.selectedTab = navigationEntry.view.key;
+            }
+        } else if (navigationEntry.type === "collection") {
+            if (previousEntry?.type === "entity") {
+                if (sidePanel)
+                    sidePanel.selectedTab = navigationEntry.collection.slug;
+            }
+        }
+
+    }
+
+    if (newFlag) {
+        sidePanel = {
+            path: lastCollectionPath,
+            copy: false
+        }
+    }
+
+    return sidePanel ? [sidePanel] : [];
+}
+
+const propsToSidePanel = (props: EntitySidePanelProps,
+    buildUrlCollectionPath: (path: string) => string,
+    resolveIdsFrom: (pathWithAliases: string) => string,
+    smallLayout: boolean,
+    customizationController: CustomizationController,
+    authController: AuthController,
+    locationSearch: string
+): SideDialogPanelProps => {
+
+    const collectionPath = removeInitialAndTrailingSlashes(props.path);
+
+    // When updateUrl is explicitly false, don't generate URL paths — the dialog
+    // opens as an overlay without affecting the browser URL / router.
+    const shouldUpdateUrl = props.updateUrl !== false;
+
+    const urlPath = shouldUpdateUrl
+        ? (props.entityId
+            ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}${props.selectedTab ? "/" + props.selectedTab : ""}${locationSearch}#${SIDE_URL_HASH}`)
+            : buildUrlCollectionPath(`${collectionPath}${locationSearch}#${NEW_URL_HASH}`))
+        : undefined;
+
+    const parentUrlPath = shouldUpdateUrl
+        ? buildUrlCollectionPath(collectionPath)
+        : undefined;
+
+    const resolvedPanelProps: EntitySidePanelProps<any> = {
+        ...props,
+        formProps: props.formProps
+    };
+
+    const entityViewWidth = getEntityViewWidth(props, smallLayout, customizationController);
+    return {
+        key: `${props.path}/${props.entityId}`,
+        component: undefined, // Lazy render in SideDialogs for better performance
+        urlPath: urlPath,
+        parentUrlPath: parentUrlPath,
+        width: entityViewWidth,
+        onClose: props.onClose,
+        additional: resolvedPanelProps
+    };
+}

package/src/internal/useRestoreScroll.tsx

@@ -0,0 +1,60 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { useLocation } from "react-router-dom";
+
+const scrollsMap: Record<string, number> = {};
+
+export function useRestoreScroll() {
+
+    const location = useLocation();
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [scroll, setScroll] = React.useState(0);
+    const [direction, setDirection] = React.useState<"up" | "down">("down");
+
+    // Use ref to track previous scroll for direction calculation
+    // This avoids recreating handleScroll on every scroll
+    const prevScrollRef = useRef(0);
+
+    const handleScroll = useCallback(() => {
+        if (!containerRef.current || !location.key) return;
+        const scrollTop = containerRef.current.scrollTop;
+        scrollsMap[location.key] = scrollTop;
+        setScroll(scrollTop);
+        setDirection(scrollTop > prevScrollRef.current ? "down" : "up");
+        prevScrollRef.current = scrollTop;
+    }, [location.key]);
+
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+        container.addEventListener("scroll", handleScroll, { passive: true });
+
+        return () => {
+            if (container)
+                container.removeEventListener("scroll", handleScroll);
+        };
+    }, [handleScroll]);
+
+    // Defer scroll restoration to next tick to allow async content to render
+    // This is necessary because DefaultHomePage content loads asynchronously
+    useEffect(() => {
+        const savedScroll = scrollsMap[location.key];
+        if (!containerRef.current || !savedScroll) return;
+
+        const timeoutId = setTimeout(() => {
+            if (!containerRef.current) return;
+            containerRef.current.scrollTo({
+                top: savedScroll,
+                behavior: "auto"
+            });
+        }, 0);
+
+        return () => clearTimeout(timeoutId);
+    }, [location.key]);
+
+    return {
+        containerRef,
+        scroll,
+        direction
+    };
+}

package/src/preview/PropertyPreview.tsx

@@ -0,0 +1,308 @@
+import React, { createElement } from "react";
+import { deepEqual as equal } from "fast-equals"
+
+import {
+    ArrayProperty,
+    EntityReference,
+    EntityRelation,
+    MapProperty,
+    NumberProperty,
+    Property,
+    PropertyPreviewProps,
+    StringProperty
+} from "@rebasepro/types";
+
+import { resolveProperty } from "@rebasepro/common";
+import { useAuthController, useCustomizationController } from "../hooks";
+import { EmptyValue } from "./components/EmptyValue";
+import { UrlComponentPreview } from "./components/UrlComponentPreview";
+import { StorageThumbnail } from "./components/StorageThumbnail";
+import { Markdown } from "@rebasepro/ui";
+import { StringPropertyPreview } from "./property_previews/StringPropertyPreview";
+import { ArrayPropertyPreview } from "./property_previews/ArrayPropertyPreview";
+import { ArrayOfReferencesPreview } from "./property_previews/ArrayOfReferencesPreview";
+import { ArrayOfRelationsPreview } from "./property_previews/ArrayOfRelationsPreview";
+import { ArrayOfStorageComponentsPreview } from "./property_previews/ArrayOfStorageComponentsPreview";
+import { ArrayPropertyEnumPreview } from "./property_previews/ArrayPropertyEnumPreview";
+import { ArrayOfStringsPreview } from "./property_previews/ArrayOfStringsPreview";
+import { ArrayOneOfPreview } from "./property_previews/ArrayOneOfPreview";
+import { MapPropertyPreview } from "./property_previews/MapPropertyPreview";
+import { ReferencePreview } from "./components/ReferencePreview";
+import { DatePreview } from "./components/DatePreview";
+import { BooleanPreview } from "./components/BooleanPreview";
+import { NumberPropertyPreview } from "./property_previews/NumberPropertyPreview";
+import { ErrorView } from "../components";
+import { RelationPreview } from "./components/RelationPreview";
+import { UserPreview } from "./components/UserPreview";
+
+/**
+ * @group Preview components
+ */
+export const PropertyPreview = React.memo(function PropertyPreview<P extends Property>(props: PropertyPreviewProps<P>) {
+
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+
+    let content: React.ReactNode | any;
+    const {
+        property: inputProperty,
+        propertyKey,
+        value,
+        size,
+        height,
+        width,
+        interactive,
+        fill
+    } = props;
+
+    const property = resolveProperty({
+        propertyKey,
+        property: inputProperty,
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
+    });
+
+    if (property === null) {
+        content = <EmptyValue />;
+    } else if (property.Preview) {
+        content = createElement(property.Preview,
+            {
+                propertyKey,
+                value,
+                property,
+                size,
+                height,
+                width,
+                // entity,
+                customProps: property.customProps
+            });
+    } else if (value === undefined || value === null) {
+        content = <EmptyValue />;
+    } else if (property.type === "string") {
+        const stringProperty = property as StringProperty;
+        if (typeof value === "string") {
+            if (stringProperty.storage) {
+                const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
+                content = <StorageThumbnail
+                    interactive={interactive}
+                    storeUrl={property.storage?.storeUrl ?? false}
+                    size={props.size}
+                    fill={fill}
+                    storagePathOrDownloadUrl={filePath} />;
+            } else if (stringProperty.url) {
+                if (typeof stringProperty.url === "boolean")
+                    content =
+                        <UrlComponentPreview size={props.size}
+                            url={value}
+                            fill={fill} />;
+                else if (typeof stringProperty.url === "string")
+                    content =
+                        <UrlComponentPreview size={props.size}
+                            url={value}
+                            interactive={interactive}
+                            fill={fill}
+                            previewType={stringProperty.url} />;
+            } else if (stringProperty.markdown) {
+                content = <Markdown source={value} size={"small"} />;
+            } else if (stringProperty.userSelect) {
+                content = <UserPreview
+                    value={value}
+                    property={stringProperty}
+                    propertyKey={propertyKey}
+                    size={props.size}
+                />;
+            } else if (stringProperty.reference) {
+                if (typeof stringProperty.reference.path === "string") {
+                    content = <ReferencePreview
+                        disabled={!stringProperty.reference.path}
+                        previewProperties={stringProperty.reference.previewProperties}
+                        includeId={stringProperty.reference.includeId}
+                        includeEntityLink={stringProperty.reference.includeEntityLink}
+                        size={props.size}
+                        reference={new EntityReference({ id: value, path: stringProperty.reference.path })}
+                    />;
+                } else {
+                    content = <EmptyValue />;
+                }
+
+            } else {
+                content = <StringPropertyPreview {...props}
+                    property={stringProperty}
+                    value={value} />;
+            }
+        } else {
+            content = buildWrongValueType(propertyKey, property.type, value);
+        }
+    } else if (property.type === "array") {
+        if (Array.isArray(value)) {
+            const arrayProperty = property as ArrayProperty;
+            if (!arrayProperty.of && !arrayProperty.oneOf) {
+                throw Error(`You need to specify an 'of' or 'oneOf' prop (or specify a custom field) in your array property ${propertyKey}`);
+            }
+
+            if (arrayProperty.of) {
+                if (Array.isArray(arrayProperty.of)) {
+                    content = <ArrayPropertyPreview {...props}
+                        value={value}
+                        property={arrayProperty} />;
+                } else if (arrayProperty.of.type === "reference") {
+                    content = <ArrayOfReferencesPreview {...props}
+                        value={value}
+                        property={property} />;
+                } else if (arrayProperty.of.type === "relation") {
+                    content = <ArrayOfRelationsPreview {...props}
+                        value={value}
+                        property={property} />;
+                } else if (arrayProperty.of.type === "string") {
+                    if (arrayProperty.of.enum) {
+                        content = <ArrayPropertyEnumPreview
+                            {...props}
+                            value={value}
+                            property={property} />;
+                    } else if (arrayProperty.of.storage) {
+                        content = <ArrayOfStorageComponentsPreview
+                            {...props}
+                            value={value}
+                            property={property as ArrayProperty} />;
+                    } else {
+                        content = <ArrayOfStringsPreview
+                            {...props}
+                            property={property as ArrayProperty}
+                            value={value as string[]} />;
+                    }
+                } else if (arrayProperty.of.type === "number" && arrayProperty.of.enum) {
+                    content = <ArrayPropertyEnumPreview
+                        {...props}
+                        value={value as number[]}
+                        property={property as ArrayProperty} />;
+                } else {
+                    content = <ArrayPropertyPreview {...props}
+                        value={value}
+                        property={property as ArrayProperty} />;
+                }
+            } else if (arrayProperty.oneOf) {
+                content = <ArrayOneOfPreview {...props}
+                    value={value}
+                    property={property as ArrayProperty} />;
+            }
+        } else {
+            content = buildWrongValueType(propertyKey, property.type, value);
+        }
+    } else if (property.type === "map") {
+        if (typeof value === "object") {
+            content =
+                <MapPropertyPreview {...props}
+                    value={value as Record<string, any>}
+                    property={property as MapProperty} />;
+        } else {
+            content = buildWrongValueType(propertyKey, property.type, value);
+        }
+    } else if (property.type === "date") {
+        if (value instanceof Date) {
+            content = <DatePreview
+                date={value}
+                mode={property.mode}
+            />;
+        } else {
+            content = buildWrongValueType(propertyKey, property.type, value);
+        }
+    } else if (property.type === "reference") {
+        if (typeof property.path === "string") {
+            if (typeof value === "object" && "isEntityReference" in value && value.isEntityReference()) {
+                content = <ReferencePreview
+                    disabled={!property.path}
+                    previewProperties={property.previewProperties}
+                    includeId={property.includeId}
+                    includeEntityLink={property.includeEntityLink}
+                    size={props.size}
+                    reference={value as EntityReference}
+                />;
+            } else {
+                content = buildWrongValueType(propertyKey, property.type, value);
+            }
+        } else {
+            content = <EmptyValue />;
+        }
+
+    } else if (property.type === "relation") {
+        if (!value) {
+            content = <EmptyValue />;
+        } else if (Array.isArray(value)) {
+            // Many-cardinality relation: value is an array of EntityRelation (or plain objects)
+            content = (
+                <div className="flex flex-col w-full gap-0.5">
+                    {(value as any[]).map((item: any, index: number) => {
+                        const entityRelation: EntityRelation | null = (item instanceof EntityRelation)
+                            ? item
+                            : (item && typeof item === "object" && (item.__type === "relation" || ("isEntityRelation" in item && item.isEntityRelation())))
+                                ? new EntityRelation(item.id, item.path)
+                                : null;
+                        if (!entityRelation) return null;
+                        return (
+                            <div className="w-full"
+                                key={`preview_rel_${propertyKey}_${index}`}>
+                                <RelationPreview
+                                    disabled={!property.relation}
+                                    previewProperties={property.previewProperties}
+                                    includeId={property.includeId}
+                                    includeEntityLink={property.includeEntityLink}
+                                    size={"small"}
+                                    relation={entityRelation}
+                                />
+                            </div>
+                        );
+                    })}
+                </div>
+            );
+        } else {
+            // Single-cardinality relation
+            const rawValue = value as any;
+            const relationValue: EntityRelation | null = (value instanceof EntityRelation)
+                ? value
+                : (typeof rawValue === "object" && (rawValue.__type === "relation" || ("isEntityRelation" in rawValue && rawValue.isEntityRelation())))
+                    ? new EntityRelation(rawValue.id, rawValue.path)
+                    : null;
+            if (relationValue) {
+                content = <RelationPreview
+                    disabled={!property.relation}
+                    previewProperties={property.previewProperties}
+                    includeId={property.includeId}
+                    includeEntityLink={property.includeEntityLink}
+                    size={props.size}
+                    relation={relationValue}
+                />;
+            } else {
+                content = buildWrongValueType(propertyKey, property.type, value);
+            }
+        }
+
+    } else if (property.type === "boolean") {
+        if (typeof value === "boolean") {
+            content = <BooleanPreview value={value} size={size} property={property} />;
+        } else {
+            content = buildWrongValueType(propertyKey, property.type, value);
+        }
+    } else if (property.type === "number") {
+        if (typeof value === "number") {
+            content = <NumberPropertyPreview {...props}
+                value={value}
+                property={property as NumberProperty} />;
+        } else {
+            content = buildWrongValueType(propertyKey, property.type, value);
+        }
+    } else {
+        content = JSON.stringify(value);
+    }
+
+    return content === undefined || content === null || (Array.isArray(content) && content.length === 0)
+        ? <EmptyValue />
+        : content;
+}, equal);
+
+function buildWrongValueType(name: string | undefined, type: string, value: any) {
+    console.warn(`Unexpected value for property ${name}, of type ${type}`, value);
+    return (
+        <ErrorView title={"Unexpected value"}
+            error={`${JSON.stringify(value)}`} />
+    );
+}