@firecms/collection_editor 3.0.0-3.0.0-beta.4.pre.1.0

package/dist/ui/collection_editor/util.d.ts

@@ -0,0 +1,5 @@
+export declare function idToPropertiesPath(id: string): string;
+export declare function namespaceToPropertiesPath(namespace?: string): string;
+export declare function namespaceToPropertiesOrderPath(namespace?: string): string;
+export declare function getFullId(propertyKey: string, propertyNamespace?: string): string;
+export declare function getFullIdPath(propertyKey: string, propertyNamespace?: string): string;

package/dist/ui/collection_editor/utils/strings.d.ts

@@ -0,0 +1 @@
+export declare function camelCase(str: string): string;

package/dist/ui/collection_editor/utils/supported_fields.d.ts

@@ -0,0 +1,3 @@
+import { PropertyConfigId, PropertyConfig } from "@firecms/core";
+export declare const supportedFieldsIds: PropertyConfigId[];
+export declare const supportedFields: Record<string, PropertyConfig>;

package/dist/ui/collection_editor/utils/update_property_for_widget.d.ts

@@ -0,0 +1,2 @@
+import { Property, PropertyConfig } from "@firecms/core";
+export declare function updatePropertyFromWidget(propertyData: any, selectedWidgetId: string | undefined, propertyConfigs: Record<string, PropertyConfig>): Property;

package/dist/ui/collection_editor/utils/useTraceUpdate.d.ts

@@ -0,0 +1 @@
+export declare function useTraceUpdate(props: any): void;

package/dist/useCollectionEditorController.d.ts

@@ -0,0 +1,6 @@
+import { CollectionEditorController } from "./types/collection_editor_controller";
+/**
+ * Hook to access the collection editor controller.
+ * The methods in this controller can be used to open the collection editor dialog.
+ */
+export declare const useCollectionEditorController: () => CollectionEditorController;

package/dist/useCollectionEditorPlugin.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import { FireCMSPlugin, User } from "@firecms/core";
+import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
+import { PersistedCollection } from "./types/persisted_collection";
+import { CollectionInference } from "./types/collection_inference";
+import { CollectionsConfigController } from "./types/config_controller";
+export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
+    /**
+     * Firebase app where the configuration is saved.
+     */
+    collectionConfigController: CollectionsConfigController;
+    /**
+     * Define what actions can be performed on the configuration.
+     */
+    configPermissions?: CollectionEditorPermissionsBuilder<UserType, EC>;
+    /**
+     * The words you define here will not be allowed to be used as group
+     * names when creating collections.
+     * e.g. ["admin"]
+     */
+    reservedGroups: string[];
+    extraView?: {
+        View: React.ComponentType<{
+            path: string;
+        }>;
+        icon: React.ReactNode;
+    };
+    pathSuggestions?: (path: string) => Promise<string[]>;
+    collectionInference?: CollectionInference;
+    getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
+    getUser: (uid: string) => UserType | null;
+    onAnalyticsEvent?: (event: string, params?: object) => void;
+    introMode?: "new_project" | "existing_project";
+}
+/**
+ * Use this hook to initialise the Collection Editor plugin.
+ * This is likely the only hook you will need to use.
+ * @param firebaseApp Firebase app where your project data lives.
+ * @param configPermissions
+ * @param reservedGroups
+ * @param extraView
+ * @param pathSuggestions
+ * @param getUser
+ * @param collectionInference
+ */
+export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>({ collectionConfigController, introMode, configPermissions, reservedGroups, extraView, pathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection>;
+export declare function IntroWidget({ introMode }: {
+    introMode?: "new_project" | "existing_project";
+}): import("react/jsx-runtime").JSX.Element;

package/dist/useCollectionsConfigController.d.ts

@@ -0,0 +1,6 @@
+import { CollectionsConfigController } from "./types/config_controller";
+/**
+ * Use this hook to access the configuration controller.
+ * You can use it to get the list of collections, and to save/delete collections.
+ */
+export declare const useCollectionsConfigController: () => CollectionsConfigController;

package/dist/utils/arrays.d.ts

@@ -0,0 +1 @@
+export declare function toArray<T>(input?: T | T[]): T[];

package/dist/utils/entities.d.ts

@@ -0,0 +1,3 @@
+import { Properties, PropertiesOrBuilders, PropertyOrBuilder } from "@firecms/core";
+export declare function editableProperty(property: PropertyOrBuilder | PropertyOrBuilder): boolean;
+export declare function removeNonEditableProperties(properties: PropertiesOrBuilders<any>): Properties;

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@firecms/collection_editor",
+  "type": "module",
+  "version": "3.0.0-3.0.0-beta.4.pre.1.0",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "dependencies": {
+    "@firecms/data_import_export": "^3.0.0-3.0.0-beta.4.pre.1.0",
+    "@firecms/formex": "^3.0.0-3.0.0-beta.4.pre.1.0",
+    "@firecms/schema_inference": "^3.0.0-3.0.0-beta.4.pre.1.0",
+    "@firecms/ui": "^3.0.0-3.0.0-beta.4.pre.1.0",
+    "json5": "^2.2.3",
+    "prism-react-renderer": "^2.3.1"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.22.2",
+    "react-router-dom": "^6.22.2"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/src/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "vite",
+    "test": "jest",
+    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
+    "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.7.0",
+    "react-router": "^6.22.3",
+    "react-router-dom": "^6.22.3",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "vite-plugin-fonts": "^0.7.0"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "bfe875c02132b5763ac0c9d8c8a885c791bb5a24"
+}

package/src/ConfigControllerProvider.tsx

@@ -0,0 +1,338 @@
+import React, { PropsWithChildren, useCallback, useEffect } from "react";
+import equal from "react-fast-compare"
+
+import { CollectionsConfigController } from "./types/config_controller";
+import {
+    Property,
+    useCustomizationController,
+    useNavigationController,
+    User,
+    useSnackbarController
+} from "@firecms/core";
+import { CollectionEditorDialog } from "./ui/collection_editor/CollectionEditorDialog";
+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 { PropertyFormDialog } from "./ui/collection_editor/PropertyEditView";
+import { PersistedCollection } from "./types/persisted_collection";
+
+export const ConfigControllerContext = React.createContext<CollectionsConfigController>({} as any);
+export const CollectionEditorContext = React.createContext<CollectionEditorController>({} as any);
+
+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?: (path?: string) => Promise<string[]>;
+
+    getUser: (uid: string) => User | null
+
+    getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
+
+    onAnalyticsEvent?: (event: string, params?: object) => void;
+
+}
+
+export const ConfigControllerProvider = React.memo(
+    function ConfigControllerProvider({
+                                          children,
+                                          collectionConfigController,
+                                          configPermissions,
+                                          reservedGroups,
+                                          collectionInference,
+                                          extraView,
+                                          pathSuggestions,
+                                          getUser,
+                                          getData,
+                                          onAnalyticsEvent
+                                      }: PropsWithChildren<ConfigControllerProviderProps>) {
+
+        const navigation = useNavigationController();
+        const navigate = useNavigate();
+        const snackbarController = useSnackbarController();
+        const { propertyConfigs } = useCustomizationController();
+
+        const {
+            collections
+        } = navigation;
+        const existingPaths = (collections ?? []).map(col => col.path.trim().toLowerCase());
+
+        const [rootPathSuggestions, setRootPathSuggestions] = React.useState<string[] | undefined>();
+        useEffect(() => {
+            if (pathSuggestions) {
+                pathSuggestions().then((paths) => {
+                    setRootPathSuggestions(paths.filter(p => !existingPaths.includes(p.trim().toLowerCase())));
+                });
+            }
+        }, [pathSuggestions]);
+
+        const [currentDialog, setCurrentDialog] = React.useState<{
+            isNewCollection: boolean,
+            parentCollection?: PersistedCollection,
+            editedCollectionId?: string,
+            fullPath?: string,
+            parentCollectionIds: string[],
+            initialValues?: {
+                path?: string,
+                group?: string,
+                name?: string
+            },
+            redirect: boolean
+        }>();
+
+        const [currentPropertyDialog, setCurrentPropertyDialog] = React.useState<{
+            propertyKey?: string,
+            property?: Property,
+            namespace?: string,
+            parentCollection?: PersistedCollection,
+            currentPropertiesOrder?: string[],
+            editedCollectionId: string,
+            fullPath?: string,
+            parentCollectionIds: string[],
+            collectionEditable: boolean;
+        }>();
+
+        const defaultConfigPermissions: CollectionEditorPermissionsBuilder = useCallback(() => ({
+            createCollections: true,
+            editCollections: true,
+            deleteCollections: true
+        }), []);
+
+        const editCollection = useCallback(({
+                                                id,
+                                                fullPath,
+                                                parentCollectionIds,
+                                                parentCollection
+                                            }: {
+            id?: string,
+            fullPath?: string,
+            parentCollectionIds: string[],
+            parentCollection?: PersistedCollection
+        }) => {
+            console.debug("Edit collection", id, fullPath, parentCollectionIds, parentCollection);
+            onAnalyticsEvent?.("edit_collection", { id, fullPath });
+            setCurrentDialog({
+                editedCollectionId: id,
+                fullPath,
+                parentCollectionIds,
+                isNewCollection: false,
+                parentCollection,
+                redirect: false
+            });
+        }, []);
+
+        const editProperty = useCallback(({
+                                              propertyKey,
+                                              property,
+                                              editedCollectionId,
+                                              currentPropertiesOrder,
+                                              parentCollectionIds,
+                                              collection
+                                          }: {
+            propertyKey?: string,
+            property?: Property,
+            currentPropertiesOrder?: string[],
+            editedCollectionId: string,
+            parentCollectionIds: string[],
+            collection: PersistedCollection,
+        }) => {
+            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: editedCollectionId,
+                parentCollectionIds,
+                collectionEditable: collection?.editable ?? false
+            });
+        }, []);
+
+        const createCollection = React.useCallback(({
+                                                        parentCollectionIds,
+                                                        parentCollection,
+                                                        initialValues,
+                                                        redirect,
+                                                        sourceClick
+                                                    }: {
+            parentCollectionIds: string[],
+            parentCollection?: PersistedCollection
+            initialValues?: {
+                group?: string,
+                path?: string,
+                name?: string
+            },
+            redirect: boolean,
+            sourceClick?: string
+        }) => {
+            console.debug("Create collection", { parentCollectionIds, parentCollection, initialValues, redirect, sourceClick });
+            onAnalyticsEvent?.("create_collection", { parentCollectionIds, parentCollection, initialValues, redirect, sourceClick });
+            setCurrentDialog({
+                isNewCollection: true,
+                parentCollectionIds,
+                parentCollection,
+                initialValues,
+                redirect
+            });
+        }, []);
+
+        const getPathSuggestions = !pathSuggestions
+            ? undefined
+            : (path?: string) => {
+                if (!path && rootPathSuggestions)
+                    return Promise.resolve(rootPathSuggestions);
+                else {
+                    return pathSuggestions?.(path);
+                }
+            }
+
+        return (
+            <ConfigControllerContext.Provider value={collectionConfigController}>
+                <CollectionEditorContext.Provider
+                    value={{
+                        editCollection,
+                        createCollection,
+                        editProperty,
+                        configPermissions: configPermissions ?? defaultConfigPermissions,
+                        rootPathSuggestions
+                    }}>
+
+                    {children}
+
+                    <CollectionEditorDialog
+                        open={Boolean(currentDialog)}
+                        configController={collectionConfigController}
+                        isNewCollection={false}
+                        collectionInference={collectionInference}
+                        {...currentDialog}
+                        getData={getData}
+                        reservedGroups={reservedGroups}
+                        extraView={extraView}
+                        pathSuggestions={getPathSuggestions}
+                        getUser={getUser}
+                        handleClose={(collection) => {
+                            if (currentDialog?.redirect) {
+                                if (collection && currentDialog?.isNewCollection && !currentDialog.parentCollectionIds.length) {
+                                    const url = navigation.buildUrlCollectionPath(collection.id ?? collection.path);
+                                    navigate(url);
+                                }
+                            }
+                            setCurrentDialog(undefined);
+                        }}/>
+
+                    {/* Used for editing properties*/}
+                    <PropertyFormDialog
+                        open={Boolean(currentPropertyDialog)}
+                        includeIdAndName={true}
+                        existingProperty={Boolean(currentPropertyDialog?.propertyKey)}
+                        autoUpdateId={!currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey}
+                        autoOpenTypeSelect={!currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey}
+                        inArray={false}
+                        collectionEditable={currentPropertyDialog?.collectionEditable ?? false}
+                        getData={getData && currentPropertyDialog?.editedCollectionId
+                            ? () => {
+                                console.debug("get data for property", currentPropertyDialog?.editedCollectionId);
+                                const resolvedPath = navigation.resolveAliasesFrom(currentPropertyDialog.editedCollectionId!)
+                                return getData(resolvedPath, []);
+                            }
+                            : undefined}
+                        onPropertyChanged={({
+                                                id,
+                                                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) => {
+                                    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 => p !== currentPropertyDialog?.propertyKey);
+                            return collectionConfigController.deleteProperty({
+                                path: currentPropertyDialog?.editedCollectionId,
+                                propertyKey: currentPropertyDialog?.propertyKey,
+                                namespace: currentPropertyDialog?.namespace,
+                                newPropertiesOrder,
+                                parentCollectionIds: currentPropertyDialog?.parentCollectionIds
+                            })
+                                .then(() => {
+                                    setCurrentPropertyDialog(undefined);
+                                }).catch((e) => {
+                                    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={[]}
+                        allowDataInference={true}
+                        propertyConfigs={propertyConfigs}
+                        property={currentPropertyDialog?.property}
+                        propertyKey={currentPropertyDialog?.propertyKey}/>
+
+                </CollectionEditorContext.Provider>
+
+            </ConfigControllerContext.Provider>
+        );
+    }, equal);

package/src/index.ts

@@ -0,0 +1,35 @@
+export {
+    useCollectionEditorPlugin
+} from "./useCollectionEditorPlugin";
+
+export {
+    useCollectionEditorController
+} from "./useCollectionEditorController";
+export {
+    useCollectionsConfigController
+} from "./useCollectionsConfigController";
+
+export {
+    editableProperty, removeNonEditableProperties
+} from "./utils/entities";
+
+export type {
+    CollectionsConfigController, DeleteCollectionParams, SaveCollectionParams, UpdateCollectionParams
+} from "./types/config_controller";
+export type {
+    CollectionEditorController
+} from "./types/collection_editor_controller";
+export type {
+    CollectionEditorPermissions, CollectionEditorPermissionsBuilder
+} from "./types/config_permissions";
+export type {
+    PersistedCollection
+} from "./types/persisted_collection";
+
+export type {
+    CollectionInference
+} from "./types/collection_inference";
+
+export { MissingReferenceWidget } from "./ui/MissingReferenceWidget";
+
+export * from "./ui/collection_editor/util";

package/src/types/collection_editor_controller.tsx

@@ -0,0 +1,43 @@
+import { CollectionEditorPermissionsBuilder } from "./config_permissions";
+import { Property } from "@firecms/core";
+import { PersistedCollection } from "./persisted_collection";
+
+/**
+ * Controller to open the collection editor dialog.
+ * @group Hooks and utilities
+ */
+export interface CollectionEditorController {
+
+    editCollection: (props: {
+        id?: string,
+        fullPath?: string,
+        parentCollectionIds: string[],
+        parentCollection?: PersistedCollection
+    }) => void;
+
+    createCollection: (props: {
+        initialValues?: {
+            group?: string,
+            path?: string,
+            name?: string
+        },
+        parentCollectionIds: string[],
+        parentCollection?: PersistedCollection,
+        redirect: boolean,
+        sourceClick?: string
+    }) => void;
+
+    editProperty: (props: {
+        propertyKey?: string,
+        property?: Property,
+        currentPropertiesOrder?: string[],
+        editedCollectionId: string,
+        parentCollectionIds: string[],
+        collection: PersistedCollection
+    }) => void;
+
+    configPermissions: CollectionEditorPermissionsBuilder;
+
+    rootPathSuggestions?: string[];
+
+}

package/src/types/collection_inference.ts

@@ -0,0 +1,3 @@
+import { EntityCollection } from "@firecms/core";
+
+export type CollectionInference = (path: string, collectionGroup: boolean, parentCollectionIds: string[]) => Promise<Partial<EntityCollection> | null>;

package/src/types/config_controller.tsx

@@ -0,0 +1,60 @@
+import { CMSType, Property } from "@firecms/core";
+import { PersistedCollection } from "./persisted_collection";
+
+/**
+ * Use this controller to access the configuration that is stored externally,
+ * and not defined in code.
+ */
+export interface CollectionsConfigController {
+
+    loading: boolean;
+
+    collections?: PersistedCollection[];
+
+    getCollection: (id: string) => PersistedCollection;
+
+    saveCollection: <M extends { [Key: string]: CMSType }>(params: SaveCollectionParams<M>) => Promise<void>;
+    updateCollection: <M extends { [Key: string]: CMSType }>(params: UpdateCollectionParams<M>) => Promise<void>;
+
+    saveProperty: (params: SavePropertyParams) => Promise<void>;
+    deleteProperty: (params: DeletePropertyParams) => Promise<void>;
+
+    deleteCollection: (props: DeleteCollectionParams) => Promise<void>;
+
+}
+
+export type UpdateCollectionParams<M extends Record<string, any>> = {
+    id: string,
+    collectionData: Partial<PersistedCollection<M>>,
+    previousId?: string,
+    parentCollectionIds?: string[]
+}
+
+export type SaveCollectionParams<M extends Record<string, any>> = {
+    id: string,
+    collectionData: PersistedCollection<M>,
+    previousId?: string,
+    parentCollectionIds?: string[]
+}
+
+export type SavePropertyParams = {
+    path: string,
+    propertyKey: string,
+    namespace?: string,
+    newPropertiesOrder?: string[],
+    property: Property,
+    parentCollectionIds?: string[]
+}
+
+export type DeletePropertyParams = {
+    path: string,
+    propertyKey: string,
+    namespace?: string,
+    newPropertiesOrder?: string[],
+    parentCollectionIds?: string[]
+}
+
+export type DeleteCollectionParams = {
+    id: string,
+    parentCollectionIds?: string[]
+}