@rebasepro/cms 0.0.1-canary.4d4fb3e

package/package.json

@@ -0,0 +1,170 @@
+{
+    "name": "@rebasepro/cms",
+    "type": "module",
+    "version": "0.0.1-canary.4d4fb3e",
+    "description": "Rebase CMS — content management views, forms, and routing",
+    "funding": {
+        "url": "https://github.com/sponsors/rebaseco"
+    },
+    "author": "Rebase",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/rebasepro/rebase.git",
+        "directory": "packages/cms"
+    },
+    "main": "./dist/index.js",
+    "module": "./dist/index.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": "pnpm run 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": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "development": "./src/index.ts",
+            "import": "./dist/index.js"
+        },
+        "./collection_editor_ui": {
+            "types": "./dist/collection_editor_ui.d.ts",
+            "development": "./src/collection_editor_ui.ts",
+            "import": "./dist/collection_editor_ui.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@floating-ui/dom": "^1.7.4",
+        "@radix-ui/react-portal": "^1.1.10",
+        "@radix-ui/react-slot": "^1.2.4",
+        "@rebasepro/common": "0.0.1-canary.4d4fb3e",
+        "@rebasepro/core": "0.0.1-canary.4d4fb3e",
+        "@rebasepro/formex": "0.0.1-canary.4d4fb3e",
+        "@rebasepro/schema-inference": "0.0.1-canary.4d4fb3e",
+        "@rebasepro/types": "0.0.1-canary.4d4fb3e",
+        "@rebasepro/ui": "0.0.1-canary.4d4fb3e",
+        "@rebasepro/utils": "0.0.1-canary.4d4fb3e",
+        "date-fns": "^3.6.0",
+        "fast-equals": "5.3.0",
+        "json5": "^2.2.3",
+        "markdown-it": "^14.1.0",
+        "markdown-it-ins": "^4.0.0",
+        "markdown-it-mark": "^4.0.0",
+        "markdown-it-task-lists": "^2.1.1",
+        "prism-react-renderer": "^2.4.1",
+        "prosemirror-commands": "^1.6.0",
+        "prosemirror-dropcursor": "^1.8.1",
+        "prosemirror-gapcursor": "^1.3.2",
+        "prosemirror-history": "^1.4.1",
+        "prosemirror-inputrules": "^1.5.1",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-markdown": "^1.13.0",
+        "prosemirror-model": "^1.22.3",
+        "prosemirror-schema-list": "^1.4.1",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-tables": "^1.8.5",
+        "prosemirror-transform": "^1.10.0",
+        "prosemirror-view": "^1.33.8",
+        "react-dropzone": "^14.3.8",
+        "react-use-measure": "^2.1.7",
+        "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
+        "zod": "^3.25.0"
+    },
+    "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/node": "^20.19.17",
+        "@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": "71bcef3c51a458cd054f7924cc18efbbe515dcc8",
+    "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/"
+        ],
+        "setupFilesAfterEnv": [
+            "<rootDir>/test/setupTests.ts"
+        ],
+        "moduleNameMapper": {
+            "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
+            "^@rebasepro/ui$": "<rootDir>/../ui/src/index.ts",
+            "^@rebasepro/core$": "<rootDir>/../core/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/utils$": "<rootDir>/../utils/src/index.ts"
+        }
+    }
+}

package/src/collection_editor/CollectionEditorDialogsContext.tsx

@@ -0,0 +1,25 @@
+import React, { createContext, useContext } from "react";
+
+/**
+ * Holds the dialog state + rendering props that ConfigControllerProvider
+ * sets and CollectionEditorDialogs reads.
+ *
+ * This indirection exists because ConfigControllerProvider is a root-scope
+ * plugin provider that wraps <RebaseShell>, therefore living ABOVE the CMS
+ * context providers (CollectionRegistryContext, NavigationStateContext,
+ * UrlContext).  The actual dialog components need those contexts, so they
+ * must render inside the shell tree.
+ */
+export interface CollectionEditorDialogsState {
+    /** Props for the active CollectionEditorDialog, or undefined when closed. */
+    collectionDialogProps: Record<string, any> | undefined;
+    /** Props for the active PropertyFormDialog, or undefined when closed. */
+    propertyDialogProps: Record<string, any> | undefined;
+}
+
+export const CollectionEditorDialogsContext =
+    createContext<CollectionEditorDialogsState | undefined>(undefined);
+
+export function useCollectionEditorDialogsState(): CollectionEditorDialogsState | undefined {
+    return useContext(CollectionEditorDialogsContext);
+}

package/src/collection_editor/ConfigControllerProvider.tsx

@@ -0,0 +1,405 @@
+import { useUrlController } from "./_cms_internals";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Entity, EntityCollection, Property, TableMetadata, User } from "@rebasepro/types";
+import { deepEqual as equal } from "fast-equals";
+
+import { CollectionsConfigController } from "./types/config_controller";
+import { useCustomizationController, useRebaseContext, useAuthController, useSnackbarController } from "@rebasepro/core";
+import { useNavigate } from "react-router";
+import { CollectionEditorController } from "./types/collection_editor_controller";
+import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
+import { CollectionInference } from "./types/collection_inference";
+import { CollectionGenerationCallback } from "./api/generateCollectionApi";
+import { CollectionEditorDialogsContext, CollectionEditorDialogsState } from "./CollectionEditorDialogsContext";
+
+export const ConfigControllerContext = React.createContext<CollectionsConfigController>({} as CollectionsConfigController);
+export const CollectionEditorContext = React.createContext<CollectionEditorController>({} as CollectionEditorController);
+
+export interface ConfigControllerProviderProps {
+    /**
+     * Controller for managing the collections' config.
+     */
+    collectionConfigController: CollectionsConfigController;
+
+    /**
+     * Callback used to infer the schema from the data.
+     */
+    collectionInference?: CollectionInference;
+
+    /**
+     * Use this builder to define the permissions for the configuration per user.
+     */
+    configPermissions?: CollectionEditorPermissionsBuilder;
+
+    /**
+     * Groups that cannot be used to create new collections.
+     */
+    reservedGroups?: string[];
+
+    extraView?: {
+        View: React.ComponentType<{
+            path: string
+        }>,
+        icon: React.ReactNode
+    };
+
+    pathSuggestions?: string[];
+
+    getUser?: (uid: string) => User | null;
+
+    getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
+
+    onAnalyticsEvent?: (event: string, params?: object) => void;
+
+    /**
+     * Callback function for generating/modifying collections.
+     * The plugin is API-agnostic - the consumer provides the implementation.
+     */
+    generateCollection?: CollectionGenerationCallback;
+
+}
+
+export const ConfigControllerProvider = React.memo(
+    function ConfigControllerProvider({
+        children,
+        collectionConfigController,
+        configPermissions,
+        reservedGroups,
+        collectionInference,
+        extraView,
+        getUser,
+        getData,
+        onAnalyticsEvent,
+        pathSuggestions,
+        generateCollection
+    }: ConfigControllerProviderProps & { children?: React.ReactNode }) {
+
+        // Internal: fetch unmapped tables and table columns from the data source
+        const { databaseAdmin } = useRebaseContext();
+        const authController = useAuthController();
+        const [unmappedTables, setUnmappedTables] = useState<string[]>([]);
+
+        useEffect(() => {
+            if (!databaseAdmin?.fetchUnmappedTables || authController.initialLoading || !authController.user) return;
+            const existingPaths = (collectionConfigController.collections ?? []).map(c => (c as any).table ?? c.slug ?? "").filter(Boolean);
+            databaseAdmin.fetchUnmappedTables(existingPaths)
+                .then((tables: string[]) => setUnmappedTables(tables))
+                .catch((e: unknown) => console.warn("Could not fetch unmapped tables:", e));
+        }, [databaseAdmin, authController.initialLoading, authController.user, collectionConfigController.collections]);
+
+        const onFetchTableMetadata = useCallback(async (tableName: string): Promise<TableMetadata | undefined> => {
+            return databaseAdmin?.fetchTableMetadata?.(tableName) as Promise<TableMetadata | undefined>;
+        }, [databaseAdmin]);
+
+        const urlController = useUrlController();
+        const navigate = useNavigate();
+        const snackbarController = useSnackbarController();
+        const { propertyConfigs } = useCustomizationController();
+
+        const [currentDialog, setCurrentDialog] = React.useState<{
+            isNewCollection: boolean,
+            parentCollection?: EntityCollection,
+            editedCollectionId?: string,
+            path?: string,
+            parentCollectionIds: string[],
+            initialValues?: {
+                path?: string,
+                group?: string,
+                name?: string
+            },
+            copyFrom?: EntityCollection,
+            redirect: boolean,
+            existingEntities?: Entity[],
+            pathSuggestions?: string[];
+            initialView?: "general" | "display" | "properties";
+            expandKanban?: boolean;
+        }>();
+
+        const [currentPropertyDialog, setCurrentPropertyDialog] = React.useState<{
+            propertyKey?: string,
+            property?: Property,
+            namespace?: string,
+            parentCollection?: EntityCollection,
+            currentPropertiesOrder?: string[],
+            editedCollectionId: string,
+            path?: string,
+            parentCollectionIds: string[],
+
+            existingEntities?: Entity[];
+            collection?: EntityCollection;
+        }>();
+
+        const defaultConfigPermissions: CollectionEditorPermissionsBuilder = useCallback(() => ({
+            createCollections: true,
+            editCollections: true,
+            deleteCollections: true
+        }), []);
+
+        const editCollection = ({
+            id,
+            path,
+            parentCollectionIds,
+            parentCollection,
+            existingEntities,
+            initialView,
+            expandKanban
+        }: {
+            id?: string,
+            path?: string,
+            parentCollectionIds: string[],
+            parentCollection?: EntityCollection,
+            existingEntities?: Entity[],
+            initialView?: "general" | "display" | "properties",
+            expandKanban?: boolean
+        }) => {
+            console.debug("Edit collection", id, path, parentCollectionIds, parentCollection);
+            onAnalyticsEvent?.("edit_collection", {
+                id,
+                path
+            });
+            setCurrentDialog({
+                editedCollectionId: id,
+                path,
+                parentCollectionIds,
+                isNewCollection: false,
+                parentCollection,
+                redirect: false,
+                existingEntities,
+                pathSuggestions,
+                initialView,
+                expandKanban
+            });
+        };
+
+        const editProperty = ({
+            propertyKey,
+            property,
+            editedCollectionId,
+            currentPropertiesOrder,
+            parentCollectionIds,
+            collection,
+            existingEntities
+        }: {
+            propertyKey?: string,
+            property?: Property,
+            currentPropertiesOrder?: string[],
+            editedCollectionId: string,
+            parentCollectionIds: string[],
+            collection: EntityCollection,
+            existingEntities?: Entity[]
+        }) => {
+            console.debug("Edit property", propertyKey, property, editedCollectionId, currentPropertiesOrder, parentCollectionIds, collection);
+            onAnalyticsEvent?.("edit_property", {
+                propertyKey,
+                editedCollectionId
+            });
+            // namespace is all the path until the last dot
+            const namespace = propertyKey && propertyKey.includes(".")
+                ? propertyKey.substring(0, propertyKey.lastIndexOf("."))
+                : undefined;
+            const propertyKeyWithoutNamespace = propertyKey && propertyKey.includes(".")
+                ? propertyKey.substring(propertyKey.lastIndexOf(".") + 1)
+                : propertyKey;
+            setCurrentPropertyDialog({
+                propertyKey: propertyKeyWithoutNamespace,
+                property,
+                namespace,
+                currentPropertiesOrder,
+                editedCollectionId,
+                parentCollectionIds,
+
+                existingEntities,
+                collection
+            });
+        };
+
+        const createCollection = ({
+            parentCollectionIds,
+            parentCollection,
+            initialValues,
+            copyFrom,
+            redirect,
+            sourceClick
+        }: {
+            parentCollectionIds: string[],
+            parentCollection?: EntityCollection
+            initialValues?: {
+                group?: string,
+                path?: string,
+                name?: string
+            },
+            copyFrom?: EntityCollection,
+            redirect: boolean,
+            sourceClick?: string
+        }) => {
+            console.debug("Create collection", {
+                parentCollectionIds,
+                parentCollection,
+                initialValues,
+                copyFrom,
+                redirect,
+                sourceClick
+            });
+            onAnalyticsEvent?.(copyFrom ? "duplicate_collection" : "create_collection", {
+                parentCollectionIds,
+                parentCollection,
+                initialValues,
+                redirect,
+                sourceClick
+            });
+            setCurrentDialog({
+                isNewCollection: true,
+                parentCollectionIds,
+                parentCollection,
+                initialValues,
+                copyFrom,
+                redirect,
+                pathSuggestions
+            });
+        };
+
+        // Build the dialog props objects that will be consumed by
+        // CollectionEditorDialogs (rendered inside RebaseShell where CMS
+        // contexts are available).
+        const collectionDialogProps = useMemo(() => {
+            if (!currentDialog) return undefined;
+            return {
+                open: true,
+                configController: collectionConfigController,
+                collectionInference,
+                ...currentDialog,
+                getData,
+                reservedGroups,
+                extraView,
+                getUser,
+                generateCollection,
+                onAnalyticsEvent,
+                unmappedTables,
+                onFetchTableMetadata,
+                handleClose: (collection?: EntityCollection) => {
+                    if (currentDialog?.redirect) {
+                        if (collection && currentDialog?.isNewCollection && !currentDialog.parentCollectionIds.length) {
+                            const url = urlController.buildUrlCollectionPath(collection.slug);
+                            navigate(url);
+                        }
+                    }
+                    setCurrentDialog(undefined);
+                }
+            };
+        }, [
+            currentDialog, collectionConfigController, collectionInference,
+            getData, reservedGroups, extraView, getUser, generateCollection,
+            onAnalyticsEvent, unmappedTables, onFetchTableMetadata,
+            urlController, navigate
+        ]);
+
+        const propertyDialogProps = useMemo(() => {
+            if (!currentPropertyDialog) return undefined;
+            return {
+                open: true,
+                includeIdAndName: true,
+                existingProperty: Boolean(currentPropertyDialog.propertyKey),
+                autoUpdateId: !currentPropertyDialog.propertyKey,
+                autoOpenTypeSelect: !currentPropertyDialog.propertyKey,
+                inArray: false,
+                getData: currentPropertyDialog.existingEntities || (getData && currentPropertyDialog.editedCollectionId)
+                    ? async () => {
+                        let data: object[] = [];
+                        if (currentPropertyDialog.existingEntities) {
+                            data = currentPropertyDialog.existingEntities.map(e => e.values);
+                        }
+                        if (getData && currentPropertyDialog.editedCollectionId) {
+                            console.debug("Get data for property, path:", currentPropertyDialog.editedCollectionId);
+                            const resolvedPath = urlController.resolveDatabasePathsFrom(currentPropertyDialog.editedCollectionId!);
+                            const fetchedData = await getData(resolvedPath, []);
+                            data.push(...fetchedData);
+                        }
+                        return data;
+                    }
+                    : undefined,
+                onPropertyChanged: ({
+                    id,
+                    property
+                }: { id?: string; property: Property }) => {
+                    if (!currentPropertyDialog) return;
+                    if (!id) return;
+                    const newProperty = !(currentPropertyDialog.propertyKey);
+                    return collectionConfigController.saveProperty({
+                        path: currentPropertyDialog.editedCollectionId,
+                        property,
+                        propertyKey: id,
+                        newPropertiesOrder: newProperty && currentPropertyDialog.currentPropertiesOrder ? [...currentPropertyDialog.currentPropertiesOrder, id] : undefined,
+                        namespace: currentPropertyDialog.namespace,
+                        parentCollectionIds: currentPropertyDialog.parentCollectionIds
+                    })
+                        .catch((e: any) => {
+                            console.error(e);
+                            snackbarController.open({
+                                type: "error",
+                                message: "Error persisting property: " + (e.message ?? "Details in the console")
+                            });
+                            return false;
+                        });
+                },
+                onPropertyChangedImmediate: false,
+                onDelete: () => {
+                    if (!currentPropertyDialog.propertyKey) return;
+                    const newPropertiesOrder = currentPropertyDialog.currentPropertiesOrder?.filter((p: string) => p !== currentPropertyDialog.propertyKey);
+                    return collectionConfigController.deleteProperty({
+                        path: currentPropertyDialog.editedCollectionId,
+                        propertyKey: currentPropertyDialog.propertyKey,
+                        namespace: currentPropertyDialog.namespace,
+                        newPropertiesOrder,
+                        parentCollectionIds: currentPropertyDialog.parentCollectionIds
+                    })
+                        .then(() => {
+                            setCurrentPropertyDialog(undefined);
+                        }).catch((e: any) => {
+                            console.error(e);
+                            snackbarController.open({
+                                type: "error",
+                                message: "Error deleting property: " + (e.message ?? "Details in the console")
+                            });
+                            return false;
+                        });
+                },
+                onError: () => { },
+                onOkClicked: () => {
+                    setCurrentPropertyDialog(undefined);
+                },
+                onCancel: () => {
+                    setCurrentPropertyDialog(undefined);
+                },
+                initialErrors: {},
+                forceShowErrors: false,
+                existingPropertyKeys: currentPropertyDialog.collection?.properties ? Object.keys(currentPropertyDialog.collection.properties) : [],
+                allowDataInference: true,
+                propertyConfigs,
+                property: currentPropertyDialog.property,
+                propertyKey: currentPropertyDialog.propertyKey
+            };
+        }, [currentPropertyDialog, getData, urlController, collectionConfigController, snackbarController, propertyConfigs]);
+
+        const dialogsState: CollectionEditorDialogsState = useMemo(() => ({
+            collectionDialogProps,
+            propertyDialogProps
+        }), [collectionDialogProps, propertyDialogProps]);
+
+        return (
+            <ConfigControllerContext.Provider value={collectionConfigController}>
+                <CollectionEditorContext.Provider
+                    value={{
+                        editCollection,
+                        createCollection,
+                        editProperty,
+                        configPermissions: configPermissions ?? defaultConfigPermissions,
+                        pathSuggestions,
+                        configController: collectionConfigController
+                    }}>
+                    <CollectionEditorDialogsContext.Provider value={dialogsState}>
+                        {children}
+                    </CollectionEditorDialogsContext.Provider>
+                </CollectionEditorContext.Provider>
+            </ConfigControllerContext.Provider>
+        );
+    }, equal);

package/src/collection_editor/_cms_internals.ts

@@ -0,0 +1,41 @@
+/**
+ * Internal re-exports for the collection editor module.
+ * This avoids circular imports by pointing directly at source files
+ * rather than going through the CMS barrel (index.ts).
+ */
+
+// Hooks
+export { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
+export { useNavigationStateController } from "../hooks/navigation/contexts/NavigationStateContext";
+export { useUrlController } from "../hooks/navigation/contexts/UrlContext";
+export { useSideEntityController } from "../hooks/useSideEntityController";
+export { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+
+// Components
+export { FieldCaption } from "../components/FieldCaption";
+export { SearchIconsView } from "../components/SearchIconsView";
+export { PropertyConfigBadge } from "../components/PropertyConfigBadge";
+export { EntityCollectionTable } from "../components/EntityCollectionTable";
+export { VirtualTableInput } from "../components/EntityCollectionTable/fields/VirtualTableInput";
+export { ArrayContainer } from "../components/ArrayContainer";
+export type { ArrayEntryParams } from "../components/ArrayContainer";
+export { useSelectionController } from "../components/EntityCollectionView/useSelectionController";
+
+// Data import
+export { ImportFileUpload } from "../data_import/components/ImportFileUpload";
+export { ImportSaveInProgress } from "../data_import/components/ImportSaveInProgress";
+export { useImportConfig } from "../data_import/hooks/useImportConfig";
+export { getInferenceType } from "../data_import/utils/get_import_inference_type";
+export { convertDataToEntity } from "../data_import/utils/data";
+export type { ImportConfig } from "../data_import/types";
+
+// Data import components
+export { DataNewPropertiesMapping } from "../data_import/components/DataNewPropertiesMapping";
+export { ImportNewPropertyFieldPreview } from "../data_import/components/ImportNewPropertyFieldPreview";
+
+// Field config utilities
+export { getFieldConfig, getFieldId, getDefaultFieldConfig, getDefaultFieldId, DEFAULT_FIELD_CONFIGS } from "../components/field_configs";
+
+// Property & resolution utilities
+export { getPropertyInPath, getResolvedPropertyInPath, getDefaultPropertiesOrder, getPropertiesWithPropertiesOrder } from "../util/property_utils";
+export { resolveEntityAction, resolveEntityView } from "../util/resolutions";