@rebasepro/core 0.0.1-canary.0

package/src/preview/components/StorageThumbnail.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect } from "react";
+
+import { renderSkeletonImageThumbnail } from "../property_previews/SkeletonPropertyComponent";
+import { UrlComponentPreview } from "./UrlComponentPreview";
+import { useStorageSource } from "../../hooks";
+import { DownloadConfig, FileType, PreviewSize } from "@rebasepro/types";
+import { ErrorView } from "../../components";
+
+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.getDownloadURL(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,113 @@
+import React, { useMemo } from "react";
+
+import { ImagePreview } from "./ImagePreview";
+import { PreviewSize, PreviewType } from "@rebasepro/types";
+import { cls, DescriptionIcon, OpenInNewIcon, Tooltip, Typography } from "@rebasepro/ui";
+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">
+                <OpenInNewIcon size={"small"} />
+                {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)
+                    }}>
+                    <DescriptionIcon 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,27 @@
+import React from "react";
+import { useInternalUserManagementController } from "../../hooks";
+import { UserDisplay } from "../../components/UserDisplay";
+import { EmptyValue } from "./EmptyValue";
+import { Typography } from "@rebasepro/ui";
+import { PropertyPreviewProps, StringProperty, 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,26 @@
+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/AsyncPreviewComponent";
+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,72 @@
+import React from "react";
+import { ErrorBoundary } from "../../components";
+import { ArrayProperty, Property, PropertyPreviewProps } from "@rebasepro/types";
+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, index) => {
+                        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>
+    );
+}

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -0,0 +1,43 @@
+import { ArrayProperty, PreviewSize, PropertyPreviewProps, ReferenceProperty } from "@rebasepro/types";
+import { ReferencePreview } from "../components/ReferencePreview";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfReferencesPreview({
+    propertyKey,
+    value,
+    property: property,
+    size
+}: 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 !== "reference")
+        throw Error("Picked wrong preview component ArrayOfReferencesPreview");
+
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
+
+    return (
+        <div className="flex flex-col w-full">
+            {value &&
+                value.map((reference, index) => {
+                    const ofProperty = property.of as ReferenceProperty;
+                    return <div className="mt-1 mb-1 w-full"
+                        key={`preview_array_ref_${propertyKey}_${index}`}>
+                        <ReferencePreview
+                            disabled={!ofProperty.path}
+                            previewProperties={ofProperty.previewProperties}
+                            size={childSize}
+                            reference={reference}
+                            includeId={ofProperty.includeId}
+                            includeEntityLink={ofProperty.includeEntityLink}
+                        />
+                    </div>;
+                }
+                )}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayOfRelationsPreview.tsx

@@ -0,0 +1,52 @@
+import { ArrayProperty, EntityRelation, PropertyPreviewProps, RelationProperty } from "@rebasepro/types";
+import { RelationPreview } from "../components/RelationPreview";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfRelationsPreview({
+    propertyKey,
+    value,
+    property,
+    size
+}: 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 !== "relation")
+        throw Error("Picked wrong preview component ArrayOfRelationsPreview");
+
+    const ofProperty = property.of as RelationProperty;
+
+    return (
+        <div className="flex flex-col w-full gap-0.5">
+            {value &&
+                value.map((relation: any, index: number) => {
+                    // Support both EntityRelation instances and plain objects with __type === "relation"
+                    const entityRelation = (relation instanceof EntityRelation)
+                        ? relation
+                        : (relation && typeof relation === "object" && (relation.__type === "relation" || relation.isEntityRelation?.()))
+                            ? new EntityRelation(relation.id, relation.path)
+                            : null;
+
+                    if (!entityRelation) return null;
+
+                    return (
+                        <div className="w-full"
+                            key={`preview_array_rel_${propertyKey}_${index}`}>
+                            <RelationPreview
+                                disabled={!ofProperty.relation}
+                                previewProperties={ofProperty.previewProperties}
+                                size={"small"}
+                                relation={entityRelation}
+                                includeId={ofProperty.includeId}
+                                includeEntityLink={ofProperty.includeEntityLink}
+                            />
+                        </div>
+                    );
+                })}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { ArrayProperty, PreviewSize, Property, PropertyPreviewProps } from "@rebasepro/types";
+
+import { useAuthController, useCustomizationController } from "../../hooks";
+import { PropertyPreview } from "../PropertyPreview";
+import { ErrorBoundary } from "../../components";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfStorageComponentsPreview({
+    propertyKey,
+    // entity,
+    value,
+    property: property,
+    size
+}: PropertyPreviewProps<ArrayProperty>) {
+
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+
+    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 !== "string")
+        throw Error("Picked wrong preview component ArrayOfStorageComponentsPreview");
+
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
+
+    if (!property.of) {
+        throw Error(`You need to specify an 'of' prop (or specify a custom field) in your array property ${propertyKey}`);
+    }
+    return (
+        <div className={"flex flex-wrap gap-2"}>
+            {value &&
+                value.map((v, index) =>
+                    <ErrorBoundary key={`preview_array_storage_${propertyKey}_${index}`}>
+                        <PropertyPreview
+                            propertyKey={propertyKey}
+                            value={v}
+                            property={property.of as Property}
+                            size={childSize} />
+                    </ErrorBoundary>
+                )}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { ArrayProperty, PropertyPreviewProps, StringProperty } from "@rebasepro/types";
+
+import { StringPropertyPreview } from "../../preview";
+import { ErrorBoundary } from "../../components";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfStringsPreview({
+    propertyKey,
+    value,
+    property: property,
+    // entity,
+    size
+}: PropertyPreviewProps<ArrayProperty>) {
+
+    if (Array.isArray(property.of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+    if (!property.of || property.type !== "array" || property.of.type !== "string")
+        throw Error("Picked wrong preview component ArrayOfStringsPreview");
+
+    if (value && !Array.isArray(value)) {
+        return <div>{`Unexpected value: ${value}`}</div>;
+    }
+    const stringProperty = property.of as StringProperty;
+
+    return (
+        <div className="flex flex-col gap-2">
+            {value &&
+                value.map((v, index) =>
+                    <div key={`preview_array_strings_${propertyKey}_${index}`}>
+                        <ErrorBoundary>
+                            <StringPropertyPreview propertyKey={propertyKey}
+                                property={stringProperty}
+                                value={v}
+                                size={size} />
+                        </ErrorBoundary>
+                    </div>
+                )}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { ArrayProperty, PreviewSize, Property, PropertyPreviewProps } from "@rebasepro/types";
+import { useAuthController, useCustomizationController } from "../../hooks";
+import { PropertyPreview } from "../PropertyPreview";
+import { cls, defaultBorderMixin } from "@rebasepro/ui";
+import { ErrorBoundary } from "../../components";
+import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "@rebasepro/common";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOneOfPreview({
+    propertyKey,
+    value,
+    property: property,
+    size,
+    // entity
+}: PropertyPreviewProps<ArrayProperty>) {
+
+    if (property.type !== "array")
+        throw Error(
+            `You need to specify an 'of' or 'oneOf' prop (or specify a custom field) in your array property ${propertyKey}`
+        )
+
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+
+    if (property?.type !== "array")
+        throw Error("Picked wrong preview component ArrayPreview");
+
+    if (!property?.oneOf) {
+        throw Error(`You need to specify an 'of' or 'oneOf' prop (or specify a custom field) in your array property ${propertyKey}`);
+    }
+
+    const values = value;
+
+    if (!values) return null;
+
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
+
+    const typeField = property.oneOf.typeField ?? DEFAULT_ONE_OF_TYPE;
+    const valueField = property.oneOf.valueField ?? DEFAULT_ONE_OF_VALUE;
+    const properties = property.oneOf.properties;
+
+    return (
+        <div className={"flex flex-col"}>
+            {values &&
+                values.map((value: any, index: number) =>
+                    <React.Fragment
+                        key={"preview_array_" + value + "_" + index}>
+                        <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0 py-2")}>
+                            <ErrorBoundary>
+                                {value && <PropertyPreview
+                                    propertyKey={propertyKey}
+                                    // @ts-ignore
+                                    value={value[valueField]}
+                                    // entity={entity}
+                                    // @ts-ignore
+                                    property={(property.resolvedProperties[index] ?? properties[value[typeField]]) as Property}
+                                    size={childSize} />}
+                            </ErrorBoundary>
+                        </div>
+                    </React.Fragment>
+                )}
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayPropertyEnumPreview.tsx

@@ -0,0 +1,34 @@
+import { ArrayProperty, NumberProperty, PropertyPreviewProps, StringProperty } from "@rebasepro/types";
+import { ArrayEnumPreview } from "../components/ArrayEnumPreview";
+import { resolveEnumValues } from "@rebasepro/common";
+
+/**
+ * @group Preview components
+ */
+export function ArrayPropertyEnumPreview({
+    propertyKey,
+    value,
+    property,
+    size
+}: PropertyPreviewProps<ArrayProperty>) {
+
+    if (property.type !== "array")
+        throw Error("Picked wrong preview component ArrayEnumPreview");
+
+    const ofProperty = property.of as StringProperty | NumberProperty;
+    if (!ofProperty.enum)
+        throw Error("Picked wrong preview component ArrayEnumPreview");
+
+    if (!value) return null;
+
+    const enumValues = resolveEnumValues(ofProperty.enum);
+    if (!enumValues)
+        throw Error(
+            `Enum values not resolved for property ${propertyKey}`
+        )
+
+    return <ArrayEnumPreview name={propertyKey}
+        value={value}
+        enumValues={enumValues}
+        size={size} />;
+}