@rebasepro/cms 0.17.3 → 0.18.0

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -1,276 +0,0 @@
-import type { Properties } from "@rebasepro/types";
-import type { ArrayProperty, MapProperty, Property, StringProperty } from "@rebasepro/types";
-import { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import React from "react";
-import { Skeleton, Table, TableBody, TableRow, TableCell, Typography } 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.admin?.urlPreview) {
-            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.admin?.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.admin?.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">
-            <TableBody>
-                {mapPropertyKeys &&
-                    mapPropertyKeys.map((key, index) => {
-                        return (
-                            <TableRow
-                                key={`map_preview_table__${index}`}>
-                                <TableCell key={`table-cell-title--${key}`}
-                                    className="align-top"
-                                    style={{ width: "30%" }}>
-                                    <Typography variant="caption" color="secondary">
-                                        {property.properties![key].name}
-                                    </Typography>
-                                </TableCell>
-                                <TableCell key={`table-cell-${key}`}
-                                    style={{ width: "70%" }}>
-                                    {property.properties && property.properties[key] &&
-                                        <SkeletonPropertyComponent
-                                            property={property.properties[key]}
-                                            size={"medium"}/>}
-                                </TableCell>
-                            </TableRow>
-                        );
-                    })}
-            </TableBody>
-        </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">
-            <TableBody>
-                {
-                    [0, 1, 2].map((value, index) => {
-                        return (
-                            <TableRow key={`table_${value}_${index}`}>
-                                {tableProperties && tableProperties.map(
-                                    (key) => (
-                                        <TableCell
-                                            key={`table-cell-${key}`}
-                                        >
-                                            <SkeletonPropertyComponent
-                                                property={(properties)[key]}
-                                                size={"medium"}/>
-                                        </TableCell>
-                                    )
-                                )}
-                            </TableRow>
-                        );
-                    })}
-            </TableBody>
-        </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.admin?.urlPreview === "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

@@ -1,70 +0,0 @@
-import type { StringProperty } from "@rebasepro/types";
-import React from "react";
-
-import { EnumValuesChip } from "../components/EnumValuesChip";
-import { PreviewType } from "@rebasepro/cms-types";
-import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
-import { UrlComponentPreview } from "../components/UrlComponentPreview";
-import { ErrorBoundary } from "@rebasepro/ui";
-import { Chip, cls, getColorSchemeForSeed } from "@rebasepro/ui";
-import { collapseToSingleLine } from "../compact_text";
-
-/**
- * @group Preview components
- */
-export function StringPropertyPreview({
-    propertyKey,
-    value,
-    property,
-    size,
-    textOnly,
-    compact
-}: PropertyPreviewProps<StringProperty>): React.ReactElement {
-
-    const strValue = value as string;
-
-    if (property.enum) {
-        const enumKey = strValue;
-        return <EnumValuesChip
-            enumKey={enumKey}
-            enumValues={property.enum}
-            size={size}/>;
-    } else if (property.admin?.previewAsTag) {
-        const colorScheme = getColorSchemeForSeed(propertyKey ?? "");
-        return (
-            <ErrorBoundary>
-                <Chip
-                    colorScheme={colorScheme}
-                    size={size}>
-                    {strValue}
-                </Chip>
-            </ErrorBoundary>);
-    } else if (property.admin?.urlPreview) {
-        return (
-            <UrlComponentPreview size={size}
-                url={strValue}
-                previewType={typeof property.admin?.urlPreview === "string" ? property.admin?.urlPreview as PreviewType : undefined}/>
-        );
-    } else {
-        if (!strValue) return <></>;
-        // A title/subtitle (textOnly) or a card line (compact) is one line, and
-        // `truncate` only clamps text that has no newlines of its own to break
-        // on — so the newlines come out here rather than in CSS.
-        if (textOnly || compact) {
-            const singleLine = collapseToSingleLine(strValue);
-            return size === "small"
-                ? <span className={"text-sm"}>{singleLine}</span>
-                : <>{singleLine}</>;
-        }
-        return strValue.includes("\n")
-            ? <div className={cls(
-                "whitespace-pre-line line-clamp-3 overflow-hidden",
-                size === "small" ? "text-sm" : "")}>
-                {strValue}
-            </div>
-            : (size === "small"
-                ? <span className={"text-sm"}>{strValue}</span>
-                : <>{strValue}</>
-            );
-    }
-}

package/src/preview/util.ts

@@ -1,39 +0,0 @@
-import { CollectionSize } from "@rebasepro/cms-types";
-import type { PreviewSize } from "../types/components/PropertyPreviewProps";
-export function sanitizeUrl(url: string | undefined): string {
-    if (!url) return "about:blank";
-    const trimmed = url.trim();
-    if (/^(?:javascript|data|vbscript):/i.test(trimmed)) {
-        return "about:blank";
-    }
-    return trimmed;
-}
-
-export const SMALL_THUMBNAIL = 40;
-export const MEDIUM_THUMBNAIL = 100;
-export const LARGE_THUMBNAIL = 200;
-
-export function getThumbnailMeasure(size: PreviewSize): number {
-    if (size === "small")
-        return SMALL_THUMBNAIL;
-    else if (size === "medium")
-        return MEDIUM_THUMBNAIL;
-    else if (size === "large")
-        return LARGE_THUMBNAIL;
-    else throw Error("Thumbnail size not mapped");
-}
-
-export function getPreviewSizeFrom(size: CollectionSize): PreviewSize {
-    switch (size) {
-        case "xs":
-        case "s":
-            return "small";
-        case "m":
-            return "medium";
-        case "l":
-        case "xl":
-            return "large";
-        default:
-            throw Error("Missing mapping value in getPreviewSizeFrom: " + size);
-    }
-}

package/src/routes/CustomViewRoute.tsx

@@ -1,33 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import type { AppView } from "@rebasepro/cms-types";
-import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
-import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
-
-export function CustomViewRoute({ view }: {
-    view: AppView
-}) {
-
-    const breadcrumbs = useBreadcrumbsController();
-    const urlController = useUrlController();
-
-    // Use a ref to avoid breadcrumbs identity in the dep array —
-    // breadcrumbs.set() creates a new context value each call, which would
-    // re-trigger this effect and cause an infinite render loop.
-    const breadcrumbsRef = useRef(breadcrumbs);
-    breadcrumbsRef.current = breadcrumbs;
-
-    useEffect(() => {
-        breadcrumbsRef.current.set({
-            breadcrumbs: [{
-                title: view.name,
-                url: urlController.buildAppUrlPath(view.slug)
-            }]
-        });
-    }, [view.slug, urlController]);
-
-    if (typeof view.view === 'function') {
-        const ViewComponent = view.view;
-        return <ViewComponent />;
-    }
-    return <>{view.view}</>;
-}