@rebasepro/core 0.0.1-canary.0

package/src/components/HomePage/StudioHomePage.tsx

@@ -0,0 +1,231 @@
+import React, { useEffect, useMemo } from "react";
+import { Container, Typography } from "@rebasepro/ui";
+import {
+    useCollapsedGroups,
+    useCustomizationController,
+    useRebaseContext,
+    useNavigationStateController
+} from "../../hooks";
+import { useBreadcrumbsController } from "../../hooks/useBreadcrumbsController";
+import {
+    CMSAnalyticsEvent,
+    HomePageSection,
+    NavigationEntry,
+    PluginGenericProps
+} from "@rebasepro/types";
+import { NavigationCardBinding } from "./NavigationCardBinding";
+
+export function StudioHomePage({
+    additionalActions,
+    additionalChildrenStart,
+    additionalChildrenEnd,
+    sections,
+    hiddenGroups
+}: {
+    additionalActions?: React.ReactNode;
+    additionalChildrenStart?: React.ReactNode;
+    additionalChildrenEnd?: React.ReactNode;
+    sections?: HomePageSection[];
+    hiddenGroups?: string[];
+}) {
+    const context = useRebaseContext();
+    const customizationController = useCustomizationController();
+    const navigationController = useNavigationStateController();
+    const breadcrumbs = useBreadcrumbsController();
+
+    useEffect(() => {
+        breadcrumbs.set({ breadcrumbs: [] });
+    }, [breadcrumbs.set]);
+
+    if (!navigationController.topLevelNavigation)
+        throw Error("Navigation not ready");
+
+    const {
+        navigationEntries: rawNavigationEntries,
+    } = navigationController.topLevelNavigation;
+
+    // Filter to only studio items (exclude "Views" and "Admin" generally)
+    const processedGroups = useMemo(() => {
+        const entriesByGroup: Record<string, NavigationEntry[]> = {};
+
+        rawNavigationEntries.forEach((e) => {
+            if (e.group && e.group !== "Views" && e.group !== "Admin" && !hiddenGroups?.includes(e.group)) {
+                (entriesByGroup[e.group] ??= []).push(e);
+            }
+        });
+
+        return Object.entries(entriesByGroup)
+            .map(([name, entries]) => ({
+                name,
+                entries
+            }));
+    }, [rawNavigationEntries, hiddenGroups]);
+
+    /* ───────────────────────────────────────────────────────────────
+       Plugin extras
+       ─────────────────────────────────────────────────────────────── */
+    let additionalPluginChildrenStart: React.ReactNode | undefined;
+    let additionalPluginChildrenEnd: React.ReactNode | undefined;
+    let additionalPluginSections: React.ReactNode | undefined;
+    let additionalPluginActions: React.ReactNode | undefined;
+
+    if (customizationController.plugins) {
+        const sectionProps: PluginGenericProps = { context };
+
+        additionalPluginSections = (
+            <>
+                {customizationController.plugins
+                    .filter((p) => p.homePage?.includeSection)
+                    .map((plugin) => {
+                        const section = plugin.homePage!.includeSection!(
+                            sectionProps
+                        );
+                        return (
+                            <div key={`plugin_section_${plugin.key}`} className="flex flex-col gap-4 mt-8">
+                                <Typography
+                                    variant="caption"
+                                    color="secondary"
+                                    className="px-4 py-2 font-medium uppercase text-sm text-surface-600 dark:text-surface-400"
+                                >
+                                    {section.title}
+                                </Typography>
+                                {section.children}
+                            </div>
+                        );
+                    })}
+            </>
+        );
+
+        additionalPluginChildrenStart = (
+            <div className="flex flex-col gap-2">
+                {customizationController.plugins
+                    .filter((p) => p.homePage?.additionalChildrenStart)
+                    .map((plugin, i) => (
+                        <div key={`plugin_children_start_${i}`}>
+                            {plugin.homePage!.additionalChildrenStart}
+                        </div>
+                    ))}
+            </div>
+        );
+
+        additionalPluginChildrenEnd = (
+            <div className="flex flex-col gap-2">
+                {customizationController.plugins
+                    .filter((p) => p.homePage?.additionalChildrenEnd)
+                    .map((plugin, i) => (
+                        <div key={`plugin_children_end_${i}`}>
+                            {plugin.homePage!.additionalChildrenEnd}
+                        </div>
+                    ))}
+            </div>
+        );
+
+        // Collect additionalActions from plugins
+        additionalPluginActions = (
+            <>
+                {customizationController.plugins
+                    .filter((p) => p.homePage?.additionalActions)
+                    .map((plugin, i) => (
+                        <React.Fragment key={`plugin_actions_${i}`}>
+                            {plugin.homePage!.additionalActions}
+                        </React.Fragment>
+                    ))}
+            </>
+        );
+    }
+
+    /* ───────────────────────────────────────────────────────────────
+       Render
+       ─────────────────────────────────────────────────────────────── */
+    return (
+        <div className="py-2 overflow-auto h-full w-full">
+            <Container maxWidth="6xl">
+                {/* Search & Actions Area */}
+                <div className="w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4 justify-end">
+                    {additionalActions}
+                    {additionalPluginActions}
+                </div>
+
+                {additionalChildrenStart}
+                {additionalPluginChildrenStart}
+
+                <div className="flex flex-col gap-10">
+                    {processedGroups.map((groupData) => (
+                        <div key={groupData.name} className="flex flex-col gap-4">
+                            <Typography
+                                variant="caption"
+                                color="secondary"
+                                className="px-4 py-2 font-medium uppercase text-sm text-surface-600 dark:text-surface-400"
+                            >
+                                {groupData.name}
+                            </Typography>
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                                {groupData.entries.map((entry) => (
+                                    <NavigationCardBinding
+                                        key={entry.url}
+                                        {...entry}
+                                        onClick={() => {
+                                            let event: CMSAnalyticsEvent = "unmapped_event";
+                                            if (entry.type === "collection") event = "home_navigate_to_collection";
+                                            else if (entry.type === "view") event = "home_navigate_to_view";
+                                            else if (entry.type === "admin") event = "home_navigate_to_admin_view";
+
+                                            context.analyticsController?.onAnalyticsEvent?.(event, { path: entry.slug });
+                                        }}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    ))}
+
+                    <div className="flex flex-col gap-4">
+                        <Typography
+                            variant="caption"
+                            color="secondary"
+                            className="px-4 py-2 font-medium uppercase text-sm text-surface-600 dark:text-surface-400"
+                        >
+                            Workspace Admin
+                        </Typography>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                            <NavigationCardBinding
+                                id="users"
+                                slug="users"
+                                group="Admin"
+                                url="/users"
+                                name="Users"
+                                description="Manage developers & roles in the workspace"
+                                view={{ icon: "group" } as unknown as any}
+                                type="admin"
+                            />
+
+                            <NavigationCardBinding
+                                id="roles"
+                                slug="roles"
+                                group="Admin"
+                                url="/roles"
+                                name="Roles"
+                                description="Manage fine-grained access configurations"
+                                view={{ icon: "admin_panel_settings" } as unknown as any}
+                                type="admin"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                {additionalPluginSections}
+
+                {sections && sections.map((section) => (
+                    <div key={section.key} className="flex flex-col gap-4 mt-8">
+                        <h3 className="text-xl font-medium tracking-tight border-b border-surface-200 dark:border-surface-700 pb-2">
+                            {section.title}
+                        </h3>
+                        {section.children}
+                    </div>
+                ))}
+
+                {additionalPluginChildrenEnd}
+                {additionalChildrenEnd}
+            </Container>
+        </div>
+    );
+}

package/src/components/HomePage/index.tsx

@@ -0,0 +1,6 @@
+export * from "./ContentHomePage";
+export * from "./StudioHomePage";
+export * from "./NavigationGroup";
+export * from "./NavigationCard";
+export * from "./SmallNavigationCard";
+

package/src/components/NotFoundPage.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Button, Typography } from "@rebasepro/ui";
+
+export function NotFoundPage() {
+
+    return (
+        <div className="flex w-full h-full">
+            <div className="m-auto flex items-center flex-col"
+            >
+                <Typography variant={"h4"} align={"center"}
+                    gutterBottom={true}>
+                    Page not found
+                </Typography>
+                <Typography align={"center"} gutterBottom={true}>
+                    This page does not exist or you may not have access to it
+                </Typography>
+                <Button
+                    variant={"text"}
+                    component={Link}
+                    to={"/"}>Back to home</Button>
+            </div>
+        </div>
+    );
+}

package/src/components/PropertyCollectionView.tsx

@@ -0,0 +1,333 @@
+import React from "react";
+import { defaultBorderMixin, Typography } from "@rebasepro/ui";
+import { PropertyPreview } from "../preview";
+import { PreviewSize, Properties, Property } from "@rebasepro/types";
+import { getValueInPath } from "@rebasepro/common";
+
+/**
+ * Build a readable label for a path and resolve the property
+ * Supports map and array (including arrays of maps)
+ */
+export function buildPropertyLabelAndGetProperty(
+    properties: Properties,
+    key: string
+): { label: string; property: Property | undefined } {
+    if (!key) return {
+        label: "",
+        property: undefined
+    };
+
+    // Parse "a[0].b.c[2]" -> ["a", 0, "b", "c", 2]
+    const segments: (string | number)[] = [];
+    const re = /([^[.\]]+)|\[(\d+)\]/g;
+    let m: RegExpExecArray | null;
+    while ((m = re.exec(key)) !== null) {
+        if (m[1] !== undefined) segments.push(m[1]);
+        else if (m[2] !== undefined) segments.push(Number(m[2]));
+    }
+
+    let currentProps: Properties | undefined = properties;
+    let currentProp: Property | undefined;
+    let lastLabel = "";
+
+    const getArrayOfProp = (p?: Property): Property | undefined => {
+        if (!p || p.type !== "array") return undefined;
+        return Array.isArray(p.of) ? (p.of[0] as Property) : (p.of as Property | undefined);
+    };
+
+    for (const seg of segments) {
+        if (typeof seg === "number") {
+            // Last segment label should be the index itself
+            lastLabel = `[${seg}]`;
+
+            // Move schema context into the array element
+            if (currentProp?.type === "array") {
+                currentProp = getArrayOfProp(currentProp);
+                if (currentProp?.type === "map" && currentProp.properties) {
+                    currentProps = currentProp.properties as Properties;
+                } else {
+                    currentProps = undefined;
+                }
+            } else {
+                // Index without array schema context
+                currentProp = undefined;
+                currentProps = undefined;
+            }
+            continue;
+        }
+
+        // seg is a string key
+        if (currentProps && (currentProps as any)[seg]) {
+            const nextProp = (currentProps as any)[seg] as Property;
+            currentProp = nextProp;
+            // Last segment label should be the property name (or the raw key)
+            lastLabel = nextProp.name || String(seg);
+
+            if (nextProp.type === "map" && nextProp.properties) {
+                currentProps = nextProp.properties as Properties;
+            } else if (nextProp.type === "array") {
+                // Keep array prop; the next segment (index) will step into its element schema
+                currentProps = undefined;
+            } else {
+                currentProps = undefined;
+            }
+        } else {
+            // Unknown key or no schema context
+            currentProp = undefined;
+            currentProps = undefined;
+            lastLabel = String(seg);
+        }
+    }
+
+    return {
+        label: lastLabel,
+        property: currentProp
+    };
+}
+
+const pathEndsWithIndex = (p: string) => /\[\d+\]$/.test(p);
+
+/**
+ * Improved simple layout for nested changes:
+ * - Map or Array-of-Map -> section header + indented rows
+ * - Leaf or Array-of-Primitives -> single row with label and value
+ */
+export const PropertyCollectionView = ({
+    data,
+    properties,
+    baseKey = "",
+    suppressHeader = false,
+    size = "small"
+}: {
+    data: any;
+    properties: Properties;
+    baseKey?: string;
+    suppressHeader?: boolean;
+    size?: PreviewSize;
+}) => {
+
+    const isTopLevel = !!baseKey && !baseKey.includes(".") && !baseKey.includes("[");
+
+    // Arrays
+    if (Array.isArray(data)) {
+        const {
+            label: arrayLabel,
+            property
+        } = baseKey
+                ? buildPropertyLabelAndGetProperty(properties, baseKey)
+                : {
+                    label: "",
+                    property: undefined as Property | undefined
+                };
+
+        const ofProp = property?.type === "array"
+            ? (Array.isArray(property.of) ? property.of[0] : property.of) as Property | undefined
+            : undefined;
+
+        const isArrayOfMaps = ofProp?.type === "map";
+        const isArrayOfPrimitives = property?.type === "array" && ofProp && ofProp.type !== "map";
+
+        // Many-cardinality relation: property type is "relation" but value is an array
+        // Render as a single row via PropertyPreview (which handles relation arrays)
+        const isRelationArray = property?.type === "relation";
+
+        // Array of primitives or many-relation -> single row
+        if (baseKey && property && (isArrayOfPrimitives || isRelationArray)) {
+            return (
+                <div
+                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                            color={"secondary"}
+                            component={"span"}
+                            className="break-words">
+                            {arrayLabel}
+                        </Typography>
+                    </div>
+                    <div className="col-span-8">
+                        <PropertyPreview propertyKey={baseKey}
+                            value={data}
+                            property={property}
+                            size={size} />
+                    </div>
+                </div>
+            );
+        }
+
+        // Array of maps or unknown -> array header + combined item header (MapName [index]) then content
+        return (
+            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                {baseKey && arrayLabel && !suppressHeader && (
+                    <Typography variant="caption"
+                        color={"secondary"}
+                        component={"span"}>
+                        {arrayLabel}
+                    </Typography>
+                )}
+                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
+                    {data.map((item, index) => {
+                        if (item === null || item === undefined) return null;
+                        const currentKey = baseKey ? `${baseKey}[${index}]` : `[${index}]`;
+
+                        // Combined header text
+                        const itemHeader = isArrayOfMaps && ofProp?.name
+                            ? `${ofProp.name} [${index}]`
+                            : `[${index}]`;
+
+                        return (
+                            <div key={currentKey} className="py-1">
+                                <Typography variant="caption"
+                                    color={"secondary"}
+                                    component={"span"}>
+                                    {itemHeader}
+                                </Typography>
+                                <div className={`pl-4 mt-1 border-l ${defaultBorderMixin}`}>
+                                    <PropertyCollectionView
+                                        data={item}
+                                        properties={properties}
+                                        baseKey={currentKey}
+                                        suppressHeader={true} // don’t repeat the inner map header
+                                        size={size}
+                                    />
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+    // Objects (maps or plain objects)
+    if (typeof data === "object" && data !== null) {
+        const {
+            label,
+            property
+        } = baseKey
+                ? buildPropertyLabelAndGetProperty(properties, baseKey)
+                : {
+                    label: "",
+                    property: undefined as Property | undefined
+                };
+
+        // Non-map leaf-like object -> single row
+        if (baseKey && (!property || property.type !== "map" || !property.properties)) {
+            if (!property) return null;
+            return (
+                <div
+                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                            color={"secondary"}
+                            component={"span"}
+                            className="break-words">
+                            {label}
+                        </Typography>
+                    </div>
+                    <div className="col-span-8">
+                        <PropertyPreview propertyKey={baseKey}
+                            value={data}
+                            property={property}
+                            size={size} />
+                    </div>
+                </div>
+            );
+        }
+
+        // Map with defined properties -> show map header only if not suppressed
+        const showMapHeader =
+            baseKey &&
+            !suppressHeader &&
+            property?.type === "map" &&
+            (property.name || !pathEndsWithIndex(baseKey));
+
+        const headerText = property?.name || label;
+
+        return (
+            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                {showMapHeader && (
+                    <Typography variant="caption"
+                        color={"secondary"}
+                        component={"span"}
+                    >
+                        {headerText}
+                    </Typography>
+                )}
+                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
+                    {Object.entries(data).map(([key, value]) => {
+                        if (value === null || value === undefined) return null;
+                        const currentKey = baseKey ? `${baseKey}.${key}` : key;
+                        return (
+                            <PropertyCollectionView
+                                key={currentKey}
+                                data={value}
+                                properties={properties}
+                                baseKey={currentKey}
+                                size={size}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+    // Primitives
+    if (baseKey) {
+        const {
+            label,
+            property
+        } = buildPropertyLabelAndGetProperty(properties, baseKey);
+        if (!property) return null;
+        return (
+            <div
+                className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                <div className="col-span-4 pr-2">
+                    <Typography variant="caption"
+                        color={"secondary"}
+                        component={"span"}
+                        className="break-words">
+                        {label}
+                    </Typography>
+                </div>
+                <div className="col-span-8">
+                    <PropertyPreview propertyKey={baseKey}
+                        value={data}
+                        property={property}
+                        size={size} />
+                </div>
+            </div>
+        );
+    }
+
+    return null;
+};
+
+export function buildDataFromPaths(values: object, paths: string[]): object {
+    const result = {};
+    paths.forEach(path => {
+        const value = getValueInPath(values, path);
+        if (value === undefined) return;
+
+        // lodash.set would be perfect here
+        const segments = path.replace(/\[(\d+)\]/g, ".$1").split(".");
+        let current: any = result;
+        segments.forEach((segment, index) => {
+            if (index === segments.length - 1) {
+                current[segment] = value;
+            } else {
+                const nextSegment = segments[index + 1];
+                const isNextAnIndex = /^\d+$/.test(nextSegment);
+                if (!current[segment]) {
+                    if (isNextAnIndex) {
+                        current[segment] = [];
+                    } else {
+                        current[segment] = {};
+                    }
+                }
+                current = current[segment];
+            }
+        });
+    });
+    return result;
+}

package/src/components/PropertyConfigBadge.tsx

@@ -0,0 +1,27 @@
+import { PropertyConfig } from "@rebasepro/types";
+import { getDefaultFieldConfig } from "../core";
+import { getIconForWidget } from "../util";
+
+export function PropertyConfigBadge({
+    propertyConfig,
+    disabled,
+    size = "medium"
+}: {
+    propertyConfig: PropertyConfig | undefined,
+    disabled?: boolean,
+    size?: "extraSmall" | "small" | "medium"
+}): React.ReactNode {
+    const sizeClasses = size === "extraSmall" ? "h-5 w-5" : size === "small" ? "h-6 w-6" : "h-8 w-8";
+    const iconSize = size === "extraSmall" ? 14 : size === "small" ? "smallest" : "small";
+    const classes = `${sizeClasses} flex-shrink-0 flex items-center justify-center rounded-full shadow-2xs text-white ` + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
+
+    const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property as import("@rebasepro/types").Property) : undefined;
+
+    return <div
+        className={classes}
+        style={{
+            background: !disabled ? (propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888") : undefined
+        }}>
+        {propertyConfig?.Icon ? getIconForWidget(propertyConfig, iconSize as any) : getIconForWidget(defaultPropertyConfig, iconSize as any)}
+    </div>
+}

package/src/components/PropertyIdCopyTooltip.tsx

@@ -0,0 +1,47 @@
+import { ContentCopyIcon, IconButton, Tooltip, Typography } from "@rebasepro/ui";
+import { useCallback, useState } from "react";
+
+export function PropertyIdCopyTooltip({
+    propertyKey,
+    className,
+    children,
+}: {
+    propertyKey: string,
+    className?: string,
+    children: any
+}) {
+    return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey} />}
+        delayDuration={800}
+        side={"top"}
+        align={"start"}
+        sideOffset={8}
+        className={className}>
+        {children}
+    </Tooltip>
+
+}
+
+export function PropertyIdCopyTooltipContent({ propertyKey }: { propertyKey: string }) {
+
+    const [copied, setCopied] = useState(false);
+
+    return (
+        <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
+            <div>
+                <Typography variant={"caption"} className={"min-w-20 text-surface-accent-400"}
+                    color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
+                <Typography variant={"caption"} className={"text-white"}><code>{propertyKey}</code></Typography>
+            </div>
+            <IconButton size={"small"}>
+                <ContentCopyIcon size={"smallest"}
+                    className={"text-white"}
+                    onClick={useCallback(() => {
+                        navigator.clipboard.writeText(propertyKey);
+                        setCopied(true);
+                        setTimeout(() => setCopied(false), 2000);
+                    }, [propertyKey])}
+                />
+            </IconButton>
+        </div>
+    );
+}