@rebasepro/core 0.0.1-canary.0

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -0,0 +1,69 @@
+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 { resolveArrayProperties } from "@rebasepro/common";
+
+/**
+ * @group Preview components
+ */
+export function ArrayPropertyPreview({
+    propertyKey,
+    value,
+    property: property,
+    size
+}: PropertyPreviewProps<ArrayProperty>) {
+
+    if (property.type !== "array")
+        throw Error("Picked wrong preview component ArrayPreview");
+
+    if (!property.of) {
+        throw Error(`You need to specify an 'of' prop (or specify a custom field) in your array property ${propertyKey}`);
+    }
+
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+    const resolvedProperties = resolveArrayProperties({
+        propertyKey,
+        property: property as ArrayProperty,
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
+    });
+
+    const values = value;
+
+    if (!values) return null;
+
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
+
+    return (
+        <div className="w-full flex flex-col gap-2">
+            {values &&
+                values.map((value, index) => {
+                    if (!resolvedProperties) {
+                        throw Error("Property resolvedProperties is undefined");
+                    }
+                    const of: Property = resolvedProperties[index] ??
+                        (resolvedProperties[index] ?? (Array.isArray(property.of) ? property.of[index] : property.of));
+                    return of
+                        ? <React.Fragment
+                            key={"preview_array_" + index}>
+                            <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                                <ErrorBoundary>
+                                    <PropertyPreview
+                                        propertyKey={propertyKey}
+                                        value={value}
+                                        property={of}
+                                        size={childSize} />
+                                </ErrorBoundary>
+                            </div>
+                        </React.Fragment>
+                        : null;
+                }
+                )}
+        </div>
+    );
+}

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -0,0 +1,145 @@
+import React from "react";
+
+import { MapProperty, PropertyPreviewProps } from "@rebasepro/types";
+import { PropertyPreview } from "../PropertyPreview";
+import { cls, defaultBorderMixin, Typography } from "@rebasepro/ui";
+import { ErrorBoundary } from "../../components";
+import { EmptyValue } from "../components/EmptyValue";
+
+/**
+ * @group Preview components
+ */
+export function MapPropertyPreview({
+    propertyKey,
+    value,
+    property,
+    size
+}: PropertyPreviewProps<MapProperty>) {
+
+    if (property.type !== "map") {
+        throw Error("Picked wrong preview component MapPropertyPreview");
+    }
+
+    const mapProperty = property as MapProperty;
+
+    if (!mapProperty.properties || Object.keys(mapProperty.properties ?? {}).length === 0) {
+        return (
+            <KeyValuePreview value={value} />
+        );
+    }
+
+    if (!value) return null;
+
+    const mapPropertyKeys: string[] = Object.keys(mapProperty.properties)
+
+    if (size === "small")
+        return (
+            <div className="w-full flex flex-col space-y-1 md:space-y-2">
+                {mapPropertyKeys.map((key, index) => (
+                    <div key={`map_${key}`}>
+                        <ErrorBoundary
+                            key={"map_preview_" + mapProperty.name + key + index}>
+                            <PropertyPreview propertyKey={key}
+                                value={(value)[key]}
+                                property={mapProperty.properties![key]}
+                                // entity={entity}
+                                size={size} />
+                        </ErrorBoundary>
+                    </div>
+                ))}
+            </div>
+        );
+
+    return (
+        <div
+            className="flex flex-col gap-1 w-full">
+            {mapPropertyKeys &&
+                mapPropertyKeys.map((key, index) => {
+                    const childProperty = mapProperty.properties![key];
+                    const isArrayOrMap = childProperty.type === "map" || childProperty.type === "array";
+                    return (
+                        <div
+                            key={`map_preview_table_${key}}`}
+                            className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
+                            <div
+                                className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
+                                <div
+                                    className="min-w-[140px] w-[25%] py-1">
+                                    <Typography variant={"caption"}
+                                        className={"break-words font-semibold"}
+                                        color={"secondary"}>
+                                        {childProperty.name}
+                                    </Typography>
+                                </div>
+                                <div
+                                    className="grow max-w-[75%]">
+                                    <ErrorBoundary>
+                                        {!isArrayOrMap &&
+                                            <PropertyPreview
+                                                propertyKey={key}
+                                                value={(value)[key]}
+                                                property={childProperty}
+                                                // entity={entity}
+                                                size={size} />}
+                                    </ErrorBoundary>
+                                </div>
+                            </div>
+
+                            {isArrayOrMap &&
+                                <div className={cls(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
+                                    <PropertyPreview
+                                        propertyKey={key}
+                                        value={(value)[key]}
+                                        property={childProperty}
+                                        // entity={entity}
+                                        size={size} />
+                                </div>
+                            }
+                        </div>
+                    );
+                })}
+        </div>
+    );
+
+}
+
+export function KeyValuePreview({ value }: { value: any }) {
+    if (typeof value !== "object") return null;
+    if (!value) return <EmptyValue />;
+    return <div
+        className="flex flex-col gap-1 w-full">
+        {
+            Object.entries(value).map(([key, childValue]: [string, any]) => (
+                <div
+                    key={`map_preview_table_${key}}`}
+                    className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
+                    <div
+                        className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
+                        <div
+                            key={`table-cell-title-${key}-${key}`}
+                            className="min-w-[140px] w-[25%] py-1">
+                            <Typography variant={"caption"}
+                                className={"font-semibold break-words"}
+                                color={"secondary"}>
+                                {key}
+                            </Typography>
+                        </div>
+                        <div
+                            className="grow max-w-[75%]">
+                            {childValue && typeof childValue !== "object" && <Typography>
+                                <ErrorBoundary>
+                                    {childValue.toString()}
+                                </ErrorBoundary>
+                            </Typography>}
+                        </div>
+                    </div>
+                    {typeof childValue === "object" &&
+                        <div className={cls(defaultBorderMixin, "border-l pl-4")}>
+                            <KeyValuePreview value={childValue} />
+                        </div>
+                    }
+                </div>
+            ))
+        }
+    </div>;
+}

package/src/preview/property_previews/NumberPropertyPreview.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { EnumValuesChip } from "../../preview";
+import { NumberProperty, PropertyPreviewProps } from "@rebasepro/types";
+import { enumToObjectEntries } from "@rebasepro/common";
+
+/**
+ * @group Preview components
+ */
+export function NumberPropertyPreview({
+    value,
+    property,
+    size
+}: PropertyPreviewProps<NumberProperty>): React.ReactElement {
+
+    if (property.enum) {
+        const enumKey = value;
+        const enumValues = enumToObjectEntries(property.enum);
+        if (!enumValues)
+            return <span className={size === "small" ? "text-sm" : ""}>{value}</span>;
+        return <EnumValuesChip
+            enumKey={enumKey}
+            enumValues={enumValues}
+            size={size !== "medium" ? "small" : "medium"} />;
+    } else {
+        return <span className={size === "small" ? "text-sm" : ""}>{value}</span>;
+    }
+}

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -0,0 +1,275 @@
+import { ArrayProperty, MapProperty, PreviewSize, Properties, Property, StringProperty } from "@rebasepro/types";
+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,57 @@
+import React from "react";
+
+import { EnumValuesChip } from "../components/EnumValuesChip";
+import { PreviewType, PropertyPreviewProps, StringProperty } from "@rebasepro/types";
+import { UrlComponentPreview } from "../components/UrlComponentPreview";
+import { ErrorBoundary } from "../../components";
+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 as any}
+            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, index) =>
+                    <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, PreviewSize } from "@rebasepro/types";
+
+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/CustomCMSRoute.tsx

@@ -0,0 +1,21 @@
+import { CMSView } from "@rebasepro/types";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { useEffect } from "react";
+
+export function CustomCMSRoute({ cmsView }: {
+    cmsView: CMSView
+}) {
+
+    const breadcrumbs = useBreadcrumbsController();
+
+    useEffect(() => {
+        breadcrumbs.set({
+            breadcrumbs: [{
+                title: cmsView.name,
+                url: cmsView.slug
+            }]
+        });
+    }, [cmsView.slug]);
+
+    return cmsView.view;
+}