@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/preview/components/ReferencePreview.tsx

@@ -0,0 +1,166 @@
+import type { EntityCollection } from "@rebasepro/types";
+import * as React from "react";
+
+import { Entity, EntityReference } from "@rebasepro/types";
+import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { useCustomizationController, useEntityFetch } from "@rebasepro/core";
+import { Skeleton } from "@rebasepro/ui";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { ErrorView } from "@rebasepro/core";
+import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
+import { useCollectionRegistryController } from "../../index";
+
+export type ReferencePreviewProps = {
+    disabled?: boolean;
+    reference: EntityReference,
+    size?: PreviewSize;
+    previewProperties?: string[];
+    onClick?: (e: React.SyntheticEvent) => void;
+    hover?: boolean;
+    includeEntityLink?: boolean;
+    includeId?: boolean;
+};
+
+/**
+ * @group Preview components
+ */
+export const ReferencePreview = function ReferencePreview(props: ReferencePreviewProps) {
+    const reference = props.reference;
+    if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
+        console.warn("Reference preview received value of type", typeof reference);
+        return <EntityPreviewContainer
+            onClick={props.onClick}
+            size={props.size ?? "medium"}>
+            <ErrorView error={"Unexpected value. Click to edit"}
+                tooltip={JSON.stringify(reference)}/>
+        </EntityPreviewContainer>;
+    }
+    return <ErrorBoundary>
+        <ReferencePreviewInternal {...props}/>
+    </ErrorBoundary>;
+};
+
+function ReferencePreviewInternal({
+    disabled,
+    reference,
+    previewProperties,
+    size,
+    hover,
+    onClick,
+    includeEntityLink = true,
+    includeId = true
+}: ReferencePreviewProps) {
+
+    const customizationController = useCustomizationController();
+
+    const collectionRegistryController = useCollectionRegistryController();
+
+    const collection = collectionRegistryController.getCollection(reference.path);
+    if (!collection) {
+        if (customizationController.components?.missingReference) {
+            return <customizationController.components.missingReference path={reference.path}/>;
+        } else {
+            return <EntityPreviewContainer
+                onClick={onClick}
+                size={size ?? "medium"}>
+                <ErrorView error={"Unexpected reference value. Click to edit"}
+                    tooltip={reference.pathWithId}/>
+            </EntityPreviewContainer>;
+        }
+    }
+
+    return <ReferencePreviewExisting
+        reference={reference}
+        collection={collection}
+        previewProperties={previewProperties}
+        size={size}
+        disabled={disabled}
+        includeEntityLink={includeEntityLink}
+        includeId={includeId}
+        onClick={onClick}
+        hover={hover}/>
+}
+
+function ReferencePreviewExisting<M extends Record<string, unknown> = Record<string, unknown>>({
+    reference,
+    collection,
+    previewProperties,
+    size,
+    disabled,
+    includeEntityLink,
+    includeId,
+    onClick,
+    hover
+}: ReferencePreviewProps & {
+    collection: EntityCollection<M>
+}) {
+
+    const {
+        entity,
+        dataLoading,
+        dataLoadingError
+    } = useEntityFetch({
+        path: reference.path,
+        entityId: reference.id,
+        collection,
+        useCache: true
+    });
+
+    if (entity) {
+        referencesCache.set(reference.pathWithId, entity);
+    }
+
+    const usedEntity = entity ?? referencesCache.get(reference.pathWithId);
+
+    let body: React.ReactNode;
+
+    if (!reference) {
+        body = <ErrorView error={"Reference not set"}/>;
+    } else if (usedEntity && !usedEntity.values) {
+        body = <ErrorView error={"Reference does not exist"}
+            tooltip={reference.path}/>;
+    }
+    if (body) {
+
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                hover={disabled ? undefined : hover}
+                size={size}>
+                {body}
+            </EntityPreviewContainer>
+        );
+    }
+
+    if (dataLoading && !usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                hover={disabled ? undefined : hover}
+                size={size}>
+                <Skeleton/>
+            </EntityPreviewContainer>
+        );
+    }
+
+    if (!usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                hover={disabled ? undefined : hover}
+                size={size}>
+                <ErrorView error={"Entity not found"}/>
+            </EntityPreviewContainer>
+        );
+    }
+
+    return <EntityPreview size={size}
+        previewKeys={previewProperties}
+        disabled={disabled}
+        entity={usedEntity}
+        collection={collection}
+        onClick={onClick}
+        includeEntityLink={includeEntityLink}
+        includeId={includeId}
+        hover={hover}/>;
+
+}
+
+const referencesCache = new Map<string, Entity<any>>();

package/src/preview/components/RelationPreview.tsx

@@ -0,0 +1,160 @@
+import type { EntityCollection } from "@rebasepro/types";
+import * as React from "react";
+
+import { Entity, EntityRelation } from "@rebasepro/types";
+import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { useCustomizationController, useEntityFetch, ErrorView } from "@rebasepro/core";
+import { Skeleton } from "@rebasepro/ui";
+import { EntityPreview, EntityPreviewContainer } from "../../components";
+import { useCollectionRegistryController } from "../../index";
+
+export type RelationPreviewProps = {
+    disabled?: boolean;
+    relation: EntityRelation,
+    size?: PreviewSize;
+    previewProperties?: string[];
+    onClick?: (e: React.SyntheticEvent) => void;
+    hover?: boolean;
+    includeEntityLink?: boolean;
+    includeId?: boolean;
+};
+
+/**
+ * @group Preview components
+ */
+export const RelationPreview = function RelationPreview(props: RelationPreviewProps) {
+    const relation = props.relation;
+    if (!(typeof relation === "object" && "isEntityRelation" in relation && relation.isEntityRelation())) {
+        console.warn("Relation preview received value of type", typeof relation);
+        return <EntityPreviewContainer
+            onClick={props.onClick}
+            size={props.size}>
+            <ErrorView error={"Unexpected value. Click to edit"}
+                tooltip={JSON.stringify(relation)}/>
+        </EntityPreviewContainer>;
+    }
+    return <RelationPreviewInternal {...props}/>;
+};
+
+function RelationPreviewInternal({
+    disabled,
+    relation,
+    previewProperties,
+    size,
+    hover,
+    onClick,
+    includeEntityLink = true,
+    includeId = true
+}: RelationPreviewProps) {
+
+    const customizationController = useCustomizationController();
+
+    const collectionRegistryController = useCollectionRegistryController();
+
+    const collection = collectionRegistryController.getCollection(relation.path);
+    if (!collection) {
+        if (customizationController.components?.missingReference) {
+            return <customizationController.components.missingReference path={relation.path}/>;
+        } else {
+            return <EntityPreviewContainer size={size}>
+                <ErrorView error={`Collection not found: ${relation.path}`}/>
+            </EntityPreviewContainer>;
+        }
+    }
+
+    return <RelationPreviewExisting
+        relation={relation}
+        collection={collection}
+        previewProperties={previewProperties}
+        size={size}
+        disabled={disabled}
+        includeEntityLink={includeEntityLink}
+        includeId={includeId}
+        onClick={onClick}
+        hover={hover}/>
+}
+
+function RelationPreviewExisting<M extends Record<string, unknown> = Record<string, unknown>>({
+    relation,
+    collection,
+    previewProperties,
+    size,
+    disabled,
+    includeEntityLink,
+    includeId,
+    onClick,
+    hover
+}: RelationPreviewProps & {
+    collection: EntityCollection<M>
+}) {
+
+    const passedEntity = relation.data;
+
+    const {
+        entity,
+        dataLoading,
+        dataLoadingError
+    } = useEntityFetch({
+        path: relation.path,
+        entityId: passedEntity ? undefined : relation.id,
+        collection,
+        useCache: true
+    });
+
+    if (entity) {
+        relationsCache.set(relation.pathWithId, entity);
+    }
+
+    const usedEntity = passedEntity ?? entity ?? relationsCache.get(relation.pathWithId);
+
+    let body: React.ReactNode;
+
+    if (!relation) {
+        body = <ErrorView error={"Relation not set"}/>;
+    } else if (usedEntity && !usedEntity.values) {
+        body = <ErrorView error={"Relation does not exist"}
+            tooltip={relation.path}/>;
+    }
+
+    if (body) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                hover={disabled ? undefined : hover}
+                size={size}>
+                {body}
+            </EntityPreviewContainer>
+        );
+    }
+
+    if (dataLoading && !usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                hover={disabled ? undefined : hover}
+                size={size}>
+                <Skeleton/>
+            </EntityPreviewContainer>
+        );
+    }
+
+    if (!usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                hover={disabled ? undefined : hover}
+                size={size}>
+                <ErrorView error={"Entity not found"}/>
+            </EntityPreviewContainer>
+        );
+    }
+    return <EntityPreview size={size}
+        previewKeys={previewProperties}
+        disabled={disabled}
+        entity={usedEntity}
+        collection={collection}
+        onClick={onClick}
+        includeEntityLink={includeEntityLink}
+        includeId={false}
+        hover={hover}/>;
+
+}
+
+const relationsCache = new Map<string, Entity<any>>();

package/src/preview/components/StorageThumbnail.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect } from "react";
+
+import { renderSkeletonImageThumbnail } from "../property_previews/SkeletonPropertyComponent";
+import { UrlComponentPreview } from "./UrlComponentPreview";
+import { ErrorView, useStorageSource } from "@rebasepro/core";
+import { DownloadConfig, FileType } from "@rebasepro/types";
+import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
+type StorageThumbnailProps = {
+    storagePathOrDownloadUrl: string;
+    storeUrl: boolean;
+    size: PreviewSize;
+    interactive?: boolean;
+    fill?: boolean;
+};
+
+/**
+ * @group Preview components
+ */
+export const StorageThumbnail = React.memo<StorageThumbnailProps>(StorageThumbnailInternal, areEqual) as React.FunctionComponent<StorageThumbnailProps>;
+
+function areEqual(prevProps: StorageThumbnailProps, nextProps: StorageThumbnailProps) {
+    return prevProps.size === nextProps.size &&
+        prevProps.storagePathOrDownloadUrl === nextProps.storagePathOrDownloadUrl &&
+        prevProps.storeUrl === nextProps.storeUrl &&
+        prevProps.interactive === nextProps.interactive &&
+        prevProps.fill === nextProps.fill;
+}
+
+const URL_CACHE: Record<string, DownloadConfig> = {};
+
+export function StorageThumbnailInternal({
+    storeUrl,
+    interactive,
+    storagePathOrDownloadUrl,
+    size,
+    fill
+}: StorageThumbnailProps) {
+
+    const [error, setError] = React.useState<Error | undefined>(undefined);
+    const storage = useStorageSource();
+
+    const [downloadConfig, setDownloadConfig] = React.useState<DownloadConfig>(URL_CACHE[storagePathOrDownloadUrl]);
+
+    useEffect(() => {
+        if (!storagePathOrDownloadUrl)
+            return;
+        let unmounted = false;
+        storage.getSignedUrl(storagePathOrDownloadUrl)
+            .then(function (downloadConfig) {
+                if (!unmounted) {
+                    setDownloadConfig(downloadConfig);
+                    URL_CACHE[storagePathOrDownloadUrl] = downloadConfig;
+                }
+            }).catch(setError);
+        return () => {
+            unmounted = true;
+        };
+    }, [storagePathOrDownloadUrl]);
+
+    if (!storagePathOrDownloadUrl) return null;
+
+    const filetype = downloadConfig?.metadata ? getFiletype(downloadConfig?.metadata.contentType) : undefined;
+    const previewType = filetype?.startsWith("image")
+        ? "image"
+        : (filetype?.startsWith("video")
+            ? "video"
+            : (filetype?.startsWith("audio") ? "audio" : "file"));
+
+    if (downloadConfig?.fileNotFound)
+        return <ErrorView error={"File not found"}></ErrorView>
+
+    return downloadConfig?.url
+        ? <UrlComponentPreview previewType={previewType}
+            url={downloadConfig.url}
+            interactive={interactive}
+            size={size}
+            fill={fill}
+            hint={storagePathOrDownloadUrl}/>
+        : renderSkeletonImageThumbnail(size);
+}
+
+function getFiletype(input: string): FileType {
+    if (input.startsWith("image")) return "image/*";
+    else if (input.startsWith("video")) return "video/*";
+    else if (input.startsWith("audio")) return "audio/*";
+    else if (input.startsWith("application")) return "application/*";
+    else if (input.startsWith("text")) return "text/*";
+    else if (input.startsWith("font")) return "font/*";
+    else return input;
+}

package/src/preview/components/UrlComponentPreview.tsx

@@ -0,0 +1,115 @@
+import React, { useMemo } from "react";
+
+import { ImagePreview } from "./ImagePreview";
+import { PreviewType } from "@rebasepro/types";
+import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { cls, Tooltip, Typography } from "@rebasepro/ui";
+import { ExternalLinkIcon, FileTextIcon } from "lucide-react";
+import { EmptyValue } from "./EmptyValue";
+import { getThumbnailMeasure } from "../util";
+
+/**
+ * @group Preview components
+ */
+export function UrlComponentPreview({
+    url,
+    previewType,
+    size,
+    hint,
+    interactive = true,
+    fill
+}: {
+    url: string,
+    previewType?: PreviewType,
+    size: PreviewSize,
+    hint?: string,
+    // for video controls
+    interactive?: boolean,
+    fill?: boolean
+}): React.ReactElement {
+
+    if (!previewType) {
+        if (!url || !url.trim()) return <EmptyValue/>;
+        return (
+            <a className="flex gap-4 break-words items-center font-medium text-primary visited:text-primary dark:visited:text-primary dark:text-primary"
+                href={url}
+                rel="noopener noreferrer"
+                onMouseDown={(e: React.MouseEvent) => {
+                    e.preventDefault();
+                }}
+                target="_blank">
+                <ExternalLinkIcon/>
+                {url}
+            </a>
+        );
+    }
+
+    if (previewType === "image") {
+        return <ImagePreview url={url}
+            size={size}
+            fill={fill}/>;
+    } else if (previewType === "audio") {
+        return <audio controls
+            className={"max-w-100%"}
+            src={url}>
+            Your browser does not support the
+            <code>audio</code> element.
+        </audio>;
+    } else if (previewType === "video") {
+        return <VideoPreview size={size} src={url} interactive={interactive}/>;
+    } else {
+        return (
+            <Tooltip title={hint}>
+                <a
+                    href={url}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    onClick={(e) => e.stopPropagation()}
+                    className="flex flex-col items-center justify-center"
+                    style={{
+                        width: getThumbnailMeasure(size),
+                        height: getThumbnailMeasure(size)
+                    }}>
+                    <FileTextIcon className="text-surface-700 dark:text-surface-300"/>
+                    {hint && <Typography
+                        className="max-w-full truncate rtl text-left"
+                        variant={"caption"}>{hint}</Typography>}
+                </a>
+            </Tooltip>
+        );
+    }
+}
+
+function VideoPreview({
+    size,
+    src,
+    interactive
+}: { size: PreviewSize, src: string, interactive: boolean }) {
+
+    const imageSize = useMemo(() => {
+        if (size === "small")
+            return "140px";
+        else if (size === "medium")
+            return "240px";
+        else if (size === "large")
+            return "100%";
+        else throw new Error("Invalid size");
+    }, [size]);
+
+    const videoProps = {
+        controls: interactive
+    };
+    return <video
+        style={{
+            position: "relative",
+            objectFit: "cover",
+            width: imageSize,
+            minWidth: "140px",
+            // height: imageSize,
+            maxHeight: "100%"
+        }}
+        {...videoProps}
+        className={cls("max-w-100% rounded-xs", { "pointer-events-none": !interactive })}>
+        <source src={src}/>
+    </video>;
+}

package/src/preview/components/UserPreview.tsx

@@ -0,0 +1,30 @@
+
+import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
+import type { StringProperty } from "@rebasepro/types";
+import React from "react";
+import { useInternalUserManagementController } from "@rebasepro/core";
+import { UserDisplay } from "@rebasepro/core";
+import { EmptyValue } from "./EmptyValue";
+import { Typography } from "@rebasepro/ui";
+import { User } from "@rebasepro/types";
+
+/**
+ * Preview component for displaying user information.
+ * This is a simple wrapper around UserDisplay.
+ *
+ * @group Preview components
+ */
+export function UserPreview({ value }: PropertyPreviewProps<StringProperty>) {
+    const getUser = useInternalUserManagementController<User>()?.getUser;
+
+    if (!value) {
+        return <EmptyValue/>;
+    }
+
+    const user = getUser?.(value);
+    if (!user) {
+        return <Typography variant={"caption"} color={"secondary"}>User not found: {value}</Typography>;
+    }
+
+    return <UserDisplay user={user}/>;
+}

package/src/preview/index.ts

@@ -0,0 +1,25 @@
+export { PropertyPreview } from "./PropertyPreview";
+
+export * from "./property_previews/ArrayOfStringsPreview";
+export * from "./property_previews/ArrayPropertyEnumPreview";
+export * from "./property_previews/ArrayOfMapsPreview";
+export * from "./property_previews/NumberPropertyPreview";
+export * from "./property_previews/StringPropertyPreview";
+export * from "./property_previews/ArrayOfStorageComponentsPreview";
+export * from "./property_previews/ArrayOfReferencesPreview";
+export * from "./property_previews/MapPropertyPreview";
+export * from "./property_previews/ArrayPropertyPreview";
+export * from "./property_previews/ArrayOneOfPreview";
+export * from "./property_previews/SkeletonPropertyComponent";
+
+export * from "./components/DatePreview";
+export * from "./components/UrlComponentPreview";
+export * from "./components/StorageThumbnail";
+export * from "./components/ArrayEnumPreview";
+export * from "./components/BooleanPreview";
+export * from "./components/EnumValuesChip";
+export * from "./components/EmptyValue";
+export * from "./components/ImagePreview";
+export * from "./components/ReferencePreview";
+export * from "./components/RelationPreview";
+export * from "./components/UserPreview";

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -0,0 +1,73 @@
+import type { ArrayProperty, Property } from "@rebasepro/types";
+import React from "react";
+import { ErrorBoundary } from "@rebasepro/ui";
+import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
+import { PropertyPreview } from "../PropertyPreview";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfMapsPreview({
+    propertyKey,
+    value,
+    property,
+    size
+    // entity
+}: PropertyPreviewProps<ArrayProperty>) {
+
+    if (Array.isArray(property?.of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+
+    if (property?.type !== "array" || !property.of || property.of.type !== "map")
+        throw Error("Picked wrong preview component ArrayOfMapsPreview");
+
+    const mapProperty = property.of;
+    const properties = mapProperty.properties;
+    if (!properties) {
+        throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
+    }
+    const values = value;
+    const previewProperties: string[] | undefined = mapProperty.previewProperties;
+
+    if (!values) return null;
+
+    let mapProperties = previewProperties;
+    if (!mapProperties || !mapProperties.length) {
+        mapProperties = Object.keys(properties);
+        if (size)
+            mapProperties = mapProperties.slice(0, 3);
+    }
+
+    return (
+        <div className="table-auto text-xs">
+            <div>
+                {values &&
+                    values.map((v: any, index: number) => {
+                        return (
+                            <div key={`table_${v}_${index}`}
+                                className="border-b last:border-b-0 py-2">
+                                {mapProperties && mapProperties.map(
+                                    (key) => (
+                                        <div
+                                            key={`table-cell-${key as string}`}
+                                            className="table-cell"
+                                        >
+                                            <ErrorBoundary>
+                                                <PropertyPreview
+                                                    propertyKey={key as string}
+                                                    value={(v)[key]}
+                                                    property={properties[key as string] as Property}
+                                                    // entity={entity}
+                                                    size={"small"}/>
+                                            </ErrorBoundary>
+                                        </div>
+                                    )
+                                )}
+                            </div>
+                        );
+                    })}
+            </div>
+        </div>
+    );
+}