@rebasepro/core 0.0.1-canary.0

package/dist/util/icons.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { IconColor } from "@rebasepro/ui";
+export declare function getIcon(iconKey?: string | React.ReactNode, className?: string, color?: IconColor, size?: "smallest" | "small" | "medium" | "large" | number): React.ReactElement | undefined;
+export type IconViewProps = {
+    slug: string;
+    name: string;
+    singularName?: string;
+    group?: string;
+    icon?: string | React.ReactNode;
+};
+export declare const IconForView: React.NamedExoticComponent<{
+    collectionOrView?: IconViewProps;
+    color?: IconColor;
+    className?: string;
+    size?: "smallest" | "small" | "medium" | "large" | number;
+}>;

package/dist/util/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./property_utils";
+export * from "./icon_list";
+export * from "./icon_synonyms";
+export * from "./icons";
+export * from "./createFormexStub";
+export * from "./entity_cache";
+export * from "./useDebouncedCallback";
+export * from "./useStorageUploadController";
+export * from "./useTraceUpdate";
+export * from "./previews";
+export * from "./enums";

package/dist/util/previews.d.ts

@@ -0,0 +1,3 @@
+import { AuthController, EntityCollection, PropertyConfig } from "@rebasepro/types";
+export declare function getEntityPreviewKeys(authController: AuthController, targetCollection: EntityCollection<any>, fields: Record<string, PropertyConfig>, previewProperties?: string[], limit?: number): string[];
+export declare function getEntityTitlePropertyKey<M extends Record<string, any>>(collection: EntityCollection<M>, propertyConfigs: Record<string, PropertyConfig>): string | undefined;

package/dist/util/property_utils.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { EntityCollection, Properties, Property, PropertyConfig } from "@rebasepro/types";
+export declare function isReferenceProperty(property: Property): boolean | null;
+export declare function isRelationProperty(property: Property): boolean | null;
+export declare function getIconForWidget(widget: PropertyConfig | undefined, size: "smallest" | "small" | "medium" | "large" | number): import("react/jsx-runtime").JSX.Element;
+export declare function getIconForProperty(property: Property, size?: "smallest" | "small" | "medium" | "large" | number, fields?: Record<string, PropertyConfig>): React.ReactNode;
+/**
+ * Get a property in a property tree from a path like
+ * `address.street`
+ * @param properties
+ * @param path
+ */
+export declare function getPropertyInPath(properties: Properties, path: string): Property | undefined;
+export declare function getResolvedPropertyInPath(properties: Record<string, Property>, path: string): Property | undefined;
+export declare function getBracketNotation(path: string): string;
+/**
+ * Get properties sorted by their order, but include ALL properties.
+ * Nested keys (like "data.mode") in propertiesOrder are ignored - they're for column ordering.
+ * @param properties
+ * @param propertiesOrder
+ */
+export declare function getPropertiesWithPropertiesOrder(properties: Properties, propertiesOrder?: string[]): Properties;
+export declare function getDefaultPropertiesOrder(collection: EntityCollection<any>): string[];

package/dist/util/useDebouncedCallback.d.ts

@@ -0,0 +1 @@
+export declare function useDebouncedCallback<T>(value: T, callback: () => void, immediate: boolean, timeoutMs?: number): void;

package/dist/util/useStorageUploadController.d.ts

@@ -0,0 +1,36 @@
+import { ArrayProperty, EntityValues, PreviewSize, StorageConfig, StorageSource, StringProperty } from "@rebasepro/types";
+/**
+ * Internal representation of an item in the storage
+ * It can have two states, having a storagePathOrDownloadUrl set,
+ * which means the file has been uploaded, and it is rendered as a preview
+ * Or have a pending file being uploaded.
+ */
+export interface StorageFieldItem {
+    id: number;
+    storagePathOrDownloadUrl?: string;
+    file?: File;
+    fileName?: string;
+    metadata?: any;
+    size: PreviewSize;
+}
+export declare function useStorageUploadController<M extends object>({ entityId, entityValues, path, value, property, propertyKey, storageSource, disabled, onChange }: {
+    entityId?: string | number;
+    entityValues: EntityValues<M>;
+    value: string | string[] | null;
+    path?: string;
+    propertyKey: string;
+    property: StringProperty | ArrayProperty | StringProperty | ArrayProperty;
+    storageSource: StorageSource;
+    disabled: boolean;
+    onChange: (value: string | string[] | null) => void;
+}): {
+    internalValue: StorageFieldItem[];
+    setInternalValue: import("react").Dispatch<import("react").SetStateAction<StorageFieldItem[]>>;
+    storage: StorageConfig;
+    fileNameBuilder: (file: File) => Promise<string>;
+    storagePathBuilder: (file: File) => string;
+    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, metadata?: any, uploadedUrl?: string) => Promise<void>;
+    onFileUploadError: (entry: StorageFieldItem) => void;
+    onFilesAdded: (acceptedFiles: File[]) => Promise<void>;
+    multipleFilesSupported: boolean;
+};

package/dist/util/useTraceUpdate.d.ts

@@ -0,0 +1,2 @@
+export declare function printChanged(props: any, prev: any, path?: string | undefined, depth?: number | undefined, maxDepth?: number | undefined): void;
+export declare function useTraceUpdate(props: any, maxDepth?: number): void;

package/dist/vitePlugin.d.ts

@@ -0,0 +1,16 @@
+export interface RebaseCollectionsPluginOptions {
+    /**
+     * The path to the collections directory containing the schema definitions.
+     * Use a relative or absolute path from the root of your frontend workspace.
+     */
+    collectionsDir: string;
+}
+/**
+ * A Vite plugin that dynamically loads and automatically wires Rebase collections.
+ * It provides a virtual module "virtual:rebase-collections" that statically exports the resolved collections array.
+ */
+export declare function rebaseCollectionsPlugin(options: RebaseCollectionsPluginOptions): {
+    name: string;
+    resolveId(id: string): string | null;
+    load(id: string): string | null;
+};

package/package.json

@@ -0,0 +1,165 @@
+{
+    "name": "@rebasepro/core",
+    "type": "module",
+    "version": "0.0.1-canary.0",
+    "description": "Awesome Firebase/Firestore-based headless open-source CMS",
+    "funding": {
+        "url": "https://github.com/sponsors/rebaseco"
+    },
+    "author": "Rebase",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/rebaseco/rebase.git",
+        "directory": "packages/core"
+    },
+    "main": "./dist/index.umd.js",
+    "module": "./dist/index.es.js",
+    "types": "./dist/index.d.ts",
+    "source": "src/index.ts",
+    "engines": {
+        "node": ">=14"
+    },
+    "keywords": [
+        "firebase",
+        "cms",
+        "admin",
+        "admin panel",
+        "firebase panel",
+        "firestore",
+        "headless",
+        "headless cms",
+        "content manager"
+    ],
+    "scripts": {
+        "watch": "vite build --watch",
+        "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
+        "prepublishOnly": "run-s build",
+        "test:lint": "eslint \"src/**\" --quiet",
+        "test": "jest --passWithNoTests",
+        "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
+        "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
+    },
+    "exports": {
+        ".": {
+            "development": "./src/index.ts",
+            "import": "./dist/index.es.js",
+            "types": "./dist/index.d.ts",
+            "require": "./dist/index.umd.js"
+        },
+        "./vitePlugin": {
+            "development": "./src/vitePlugin.ts",
+            "types": "./src/vitePlugin.ts",
+            "import": "./src/vitePlugin.ts",
+            "require": "./src/vitePlugin.ts"
+        },
+        "./package.json": "./package.json"
+    },
+    "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@radix-ui/react-portal": "^1.1.10",
+        "@rebasepro/common": "0.0.1-canary.0",
+        "@rebasepro/editor": "0.0.1-canary.0",
+        "@rebasepro/formex": "0.0.1-canary.0",
+        "@rebasepro/types": "0.0.1-canary.0",
+        "@rebasepro/ui": "0.0.1-canary.0",
+        "clsx": "^2.1.1",
+        "compressorjs": "^1.2.1",
+        "date-fns": "^3.6.0",
+        "fast-equals": "5.3.0",
+        "fuse.js": "^7.1.0",
+        "history": "^5.3.0",
+        "json-logic-js": "^2.0.5",
+        "markdown-it": "^14.1.0",
+        "notistack": "^3.0.2",
+        "object-hash": "^3.0.0",
+        "prism-react-renderer": "^2.4.1",
+        "react-dropzone": "^14.3.8",
+        "react-transition-group": "^4.4.5",
+        "react-use-measure": "^2.1.7",
+        "react-window": "^1.8.11",
+        "vite-plugin-static-copy": "3.1.4",
+        "yup": "^1.7.1"
+    },
+    "peerDependencies": {
+        "react": ">=19.0.0",
+        "react-dom": ">=19.0.0",
+        "react-router": "^7.0.0",
+        "react-router-dom": "^7.0.0"
+    },
+    "devDependencies": {
+        "@jest/globals": "^30.2.0",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/jest": "^29.5.14",
+        "@types/json-logic-js": "^2.0.8",
+        "@types/node": "^20.19.17",
+        "@types/object-hash": "^3.0.6",
+        "@types/react": "^19.0.8",
+        "@types/react-dom": "^19.0.3",
+        "@types/react-measure": "^2.0.12",
+        "@vitejs/plugin-react": "^4.3.4",
+        "babel-plugin-react-compiler": "beta",
+        "cross-env": "^7.0.3",
+        "eslint-plugin-react-compiler": "^19.1.0-rc.2",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^30.2.0",
+        "npm-run-all": "^4.1.5",
+        "react-router": "^7.0.0",
+        "react-router-dom": "^7.0.0",
+        "ts-jest": "^29.4.5",
+        "ts-node": "^10.9.2",
+        "tsd": "^0.31.2",
+        "typescript": "^5.9.3",
+        "vite": "^7.2.4"
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "gitHead": "646afae9c387c3ce02c699d98cd8c7272bdd1929",
+    "publishConfig": {
+        "access": "public"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "jest": {
+        "transform": {
+            "^.+\\.tsx?$": "ts-jest"
+        },
+        "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+        "moduleFileExtensions": [
+            "ts",
+            "tsx",
+            "js",
+            "jsx",
+            "json",
+            "node"
+        ],
+        "testEnvironment": "jsdom",
+        "testPathIgnorePatterns": [
+            "/node_modules/",
+            "/src/components/",
+            "objects.test.ts",
+            "navigation.test.ts",
+            "resolutions.test.ts"
+        ],
+        "setupFilesAfterEnv": [
+            "<rootDir>/test/setupTests.ts"
+        ],
+        "moduleNameMapper": {
+            "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
+            "^@rebasepro/ui$": "<rootDir>/../ui/src/index.ts",
+            "^@rebasepro/common$": "<rootDir>/../common/src/index.ts",
+            "^@rebasepro/types$": "<rootDir>/../types/src/index.ts",
+            "^@rebasepro/formex$": "<rootDir>/../formex/src/index.ts",
+            "^@rebasepro/editor$": "<rootDir>/../editor/src/index.ts"
+        }
+    }
+}

package/src/app/AppBar.tsx

@@ -0,0 +1,18 @@
+import { DefaultAppBar, DefaultAppBarProps } from "../core/DefaultAppBar";
+
+/**
+ * This component renders the main app bar of Rebase.
+ */
+export function AppBar({
+    children,
+    ...props
+}: {
+    children?: React.ReactNode,
+    className?: string,
+    style?: React.CSSProperties
+} & DefaultAppBarProps) {
+    const usedChildren = children ?? <DefaultAppBar {...props} />;
+    return <>{usedChildren}</>;
+}
+
+AppBar.componentType = "AppBar";

package/src/app/Drawer.tsx

@@ -0,0 +1,30 @@
+import { DefaultDrawer } from "../core";
+
+/**
+ * This component is in charge of rendering the drawer.
+ * If you add this component under your {@link Scaffold}, it will be rendered
+ * as a drawer, and the open and close functionality will be handled automatically.
+ * If you want to customise the drawer, you can create your own component and pass it as a child.
+ * For custom drawers, you can use the {@link useApp} to open and close the drawer.
+ *
+ */
+export function Drawer({
+                           children,
+                           title,
+                           logo,
+                           logoDestination,
+                           className,
+                           style
+                       }: {
+    children?: React.ReactNode,
+    title?: React.ReactNode,
+    logo?: string,
+    logoDestination?: string,
+    className?: string,
+    style?: React.CSSProperties
+}) {
+    const usedChildren = children ?? <DefaultDrawer title={title} logo={logo} logoDestination={logoDestination} className={className} style={style}/>;
+    return <>{usedChildren}</>;
+}
+
+Drawer.componentType = "Drawer";

package/src/app/Scaffold.tsx

@@ -0,0 +1,238 @@
+import React, { PropsWithChildren, useCallback } from "react";
+import { ChevronLeftIcon, cls, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@rebasepro/ui";
+import { deepEqual as equal } from "fast-equals"
+
+import { useLargeLayout, useAdminModeController } from "../hooks";
+import { ErrorBoundary } from "../components";
+import { AppContext } from "./useApp";
+
+export const DRAWER_WIDTH = 280;
+
+/**
+ * @group Core
+ */
+export interface ScaffoldProps {
+
+    /**
+     * Open the drawer on hover
+     */
+    autoOpenDrawer?: boolean;
+
+    /**
+     * Logo to be displayed in the top bar and drawer.
+     * Note that this has no effect if you are using a custom AppBar or Drawer.
+     */
+    logo?: string;
+
+    /**
+     * If true, the main content will be padded in large layouts. Defaults to true.
+     */
+    padding?: boolean;
+
+    className?: string;
+
+    style?: React.CSSProperties;
+}
+
+/**
+ * This view acts as a scaffold for Rebase.
+ *
+ * It is in charge of displaying the navigation drawer, top bar and main
+ * collection views.
+ * This component needs a parent {@link Rebase}
+ *
+ * @param props
+
+ * @group Core
+ */
+export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
+    function Scaffold(props: PropsWithChildren<ScaffoldProps>) {
+
+        const {
+            children,
+            autoOpenDrawer,
+            logo,
+            className,
+            style,
+            padding = true
+        } = props;
+
+        const drawerChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "Drawer");
+        if (drawerChildren.length > 1) {
+            throw Error("Only one Drawer component is allowed in Scaffold");
+        }
+        const appBarChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "AppBar");
+        if (appBarChildren.length > 1) {
+            throw Error("Only one AppBar component is allowed in Scaffold");
+        }
+        const otherChildren = React.Children.toArray(children)
+            .filter((child: any) => child.type.componentType !== "Drawer" && child.type.componentType !== "AppBar");
+        const includeDrawer = drawerChildren.length > 0;
+        const largeLayout = useLargeLayout();
+
+        const [drawerOpen, setDrawerOpen] = React.useState(false);
+        const [onHover, setOnHover] = React.useState(false);
+
+        const setOnHoverTrue = useCallback(() => setOnHover(true), []);
+        const setOnHoverFalse = useCallback(() => setOnHover(false), []);
+
+        const handleDrawerOpen = useCallback(() => {
+            setDrawerOpen(true);
+        }, []);
+
+        const handleDrawerClose = useCallback(() => {
+            setDrawerOpen(false);
+        }, []);
+
+        const computedDrawerOpen: boolean = drawerOpen;
+        const computedDrawerHovered: boolean = Boolean(largeLayout && onHover);
+
+        const adminModeController = useAdminModeController();
+        const isStudioDark = adminModeController.mode === "studio";
+
+        const hasAppBar = Boolean(appBarChildren.length > 0);
+        return (
+            <AppContext.Provider
+                value={{
+                    hasDrawer: Boolean(includeDrawer),
+                    drawerOpen: computedDrawerOpen,
+                    drawerHovered: computedDrawerHovered,
+                    openDrawer: () => setDrawerOpen(true),
+                    closeDrawer: () => setDrawerOpen(false),
+                    closeHover: () => setOnHover(false),
+                    logo
+                }}>
+                <div
+                    className={cls("flex h-screen w-screen overflow-hidden",
+                        isStudioDark ? "bg-surface-50 dark:bg-surface-950" : "bg-surface-50 dark:bg-surface-900",
+                        "text-surface-900 dark:text-white", className)}
+                    style={{
+                        paddingTop: "env(safe-area-inset-top)",
+                        paddingLeft: "env(safe-area-inset-left)",
+                        paddingRight: "env(safe-area-inset-right)",
+                        paddingBottom: "env(safe-area-inset-bottom)",
+                        height: "100dvh",
+                        ...style
+                    }}>
+                    {appBarChildren}
+
+                    <DrawerWrapper
+                        displayed={includeDrawer}
+                        onMouseEnter={setOnHoverTrue}
+                        onMouseMove={setOnHoverTrue}
+                        onMouseLeave={setOnHoverFalse}
+                        open={drawerOpen}
+                        hovered={onHover}
+                        isStudioDark={isStudioDark}
+                        setDrawerOpen={setDrawerOpen}>
+                        {includeDrawer && drawerChildren}
+                    </DrawerWrapper>
+
+                    <main
+                        className="flex flex-col grow overflow-auto">
+
+                        {hasAppBar && <DrawerHeader />}
+
+                        <div
+                            className={cls(defaultBorderMixin, "bg-surface-50 dark:bg-surface-900 grow overflow-auto m-0", {
+                                "lg:mt-4": !hasAppBar,
+                                "mt-1 lg:m-0 lg:mx-2 lg:mb-2 lg:rounded-lg lg:border lg:border-solid": padding,
+                                "border-t": hasAppBar && !padding,
+                            })}>
+
+                            <ErrorBoundary>
+                                {otherChildren}
+                            </ErrorBoundary>
+
+                        </div>
+                    </main>
+                </div>
+            </AppContext.Provider>
+        );
+    },
+    equal
+)
+
+const DrawerHeader = () => {
+    return (
+        <div className="flex flex-col min-h-16"></div>
+    );
+};
+
+function DrawerWrapper(props: {
+    children: React.ReactNode,
+    displayed: boolean,
+    open: boolean,
+    logo?: string,
+    hovered: boolean,
+    isStudioDark: boolean,
+    setDrawerOpen: (open: boolean) => void,
+    onMouseEnter: () => void,
+    onMouseMove: () => void,
+    onMouseLeave: () => void
+}) {
+
+    const layoutWidth = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
+    const visualWidth = !props.displayed ? 0 : ((props.open || props.hovered) ? DRAWER_WIDTH : 72);
+
+    const isFloating = props.hovered && !props.open;
+    const darkBg = props.isStudioDark ? "dark:bg-surface-950" : "dark:bg-surface-900";
+
+    const innerDrawer = <div
+        className={cls("h-full no-scrollbar overflow-y-auto overflow-x-hidden", defaultBorderMixin,
+            isFloating ? "absolute top-0 left-0 bottom-0 z-50 bg-surface-50 dark:bg-surface-950 shadow-2xl border-r" : `relative bg-surface-50 ${darkBg}`)}
+        style={{
+            width: visualWidth,
+            transition: "left 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+        }}
+    >
+
+
+
+        <div className={"flex flex-col h-full"}>
+            {props.children}
+        </div>
+
+    </div>;
+
+    const largeLayout = useLargeLayout();
+    if (!largeLayout) {
+        if (!props.displayed)
+            return null;
+        return <>
+            <IconButton
+                color="inherit"
+                aria-label="Open drawer"
+                onClick={() => props.setDrawerOpen(true)}
+                className="absolute sm:top-2 sm:left-4 top-1 left-2"
+            >
+                <MenuIcon />
+            </IconButton>
+            <Sheet side={"left"}
+                transparent={true}
+                open={props.open}
+                onOpenChange={props.setDrawerOpen}
+                title={"Navigation drawer"}
+                overlayClassName={"bg-white/80 dark:bg-surface-900/80"}
+            >
+                {innerDrawer}
+            </Sheet>
+        </>;
+    }
+
+    return (
+        <div
+            className="z-20 relative"
+            onMouseEnter={props.onMouseEnter}
+            onMouseMove={props.onMouseMove}
+            onMouseLeave={props.onMouseLeave}
+            style={{
+                width: layoutWidth,
+                transition: "left 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+            }}>
+
+            {innerDrawer}
+
+        </div>
+    );
+}

package/src/app/index.ts

@@ -0,0 +1,4 @@
+export * from "./Drawer";
+export * from "./AppBar";
+export * from "./Scaffold";
+export * from "./useApp";

package/src/app/useApp.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+/**
+ * This context represents the state of the app in terms of layout.
+ * @group Core
+ */
+export type AppState = {
+    hasDrawer: boolean,
+    drawerHovered: boolean,
+    drawerOpen: boolean,
+    openDrawer: () => void,
+    closeDrawer: () => void,
+    closeHover: () => void,
+    autoOpenDrawer?: boolean,
+    logo?: string
+}
+
+export const AppContext = React.createContext<AppState>({
+    hasDrawer: false,
+    drawerHovered: false,
+    drawerOpen: false,
+    openDrawer: () => {
+        throw new Error("openDrawer not implemented");
+    },
+    closeDrawer: () => {
+        throw new Error("closeDrawer not implemented");
+    },
+    closeHover: () => {
+        throw new Error("closeHover not implemented");
+    },
+    autoOpenDrawer: false
+});
+
+export function useApp() {
+    return React.useContext(AppContext);
+}

package/src/components/AIIcon.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { AutoAwesomeIcon } from "@rebasepro/ui";
+
+export interface AIIconProps {
+    size?: "smallest" | "small" | "medium" | "large";
+    className?: string;
+}
+
+/**
+ * AI-styled AutoAwesome icon with gradient coloring.
+ * Used consistently across AI features for visual identification.
+ */
+export function AIIcon({ size = "small", className }: AIIconProps) {
+    return (
+        <AutoAwesomeIcon
+            size={size}
+            className={className}
+            style={{
+                background: "linear-gradient(to right, var(--color-primary), var(--color-secondary))",
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent",
+                backgroundClip: "text"
+            }}
+        />
+    );
+}
+
+/**
+ * Small animated dot indicator for AI-modified elements.
+ * Shows a pulsing gradient dot.
+ */
+export function AIModifiedIndicator({ className }: { className?: string }) {
+    return (
+        <div
+            className={`w-2 h-2 rounded-full bg-gradient-to-r from-primary to-secondary animate-pulse ${className ?? ""}`}
+            title="AI modified"
+        />
+    );
+}