@firecms/collection_editor 3.0.0-alpha.16 → 3.0.0-alpha.18

package/src/components/collection_editor/utils/update_property_for_widget.ts

@@ -0,0 +1,258 @@
+import { buildProperty, FieldConfig, mergeDeep, Property } from "@firecms/core";
+
+export function updatePropertyFromWidget(propertyData: any,
+                                         selectedWidgetId: string | undefined,
+                                         customFields: Record<string, FieldConfig>): Property {
+
+    let updatedProperty;
+    if (selectedWidgetId === "text_field") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "string",
+                fieldConfig: "text_field",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                storage: undefined,
+                multiline: undefined,
+                markdown: undefined,
+                email: undefined,
+                url: undefined,
+                enumValues: undefined
+            })
+        );
+    } else if (selectedWidgetId === "multiline") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "string",
+                fieldConfig: "multiline",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                multiline: true,
+                storage: undefined,
+                markdown: undefined,
+                email: undefined,
+                url: undefined,
+                enumValues: undefined
+            })
+        );
+    } else if (selectedWidgetId === "markdown") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "string",
+                fieldConfig: "markdown",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                storage: undefined,
+                multiline: undefined,
+                markdown: true,
+                email: undefined,
+                url: undefined
+            })
+        );
+    } else if (selectedWidgetId === "url") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "string",
+                fieldConfig: "url",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                storage: undefined,
+                multiline: undefined,
+                markdown: undefined,
+                email: undefined,
+                url: true,
+                enumValues: undefined
+            })
+        );
+    } else if (selectedWidgetId === "email") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "string",
+                fieldConfig: "email",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                storage: undefined,
+                multiline: undefined,
+                markdown: undefined,
+                email: true,
+                url: undefined,
+                enumValues: undefined
+            })
+        );
+    } else if (selectedWidgetId === "select") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "string",
+                fieldConfig: "select",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                storage: undefined,
+                multiline: undefined,
+                markdown: undefined,
+                email: undefined,
+                url: undefined,
+                enumValues: propertyData.enumValues ?? []
+            })
+        );
+    } else if (selectedWidgetId === "multi_select") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "array",
+                fieldConfig: "multi_select",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                of: {
+                    dataType: "string",
+                    enumValues: propertyData.of?.enumValues ?? []
+                }
+            })
+        );
+    } else if (selectedWidgetId === "number_input") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "number",
+                fieldConfig: "number_input",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                enumValues: undefined
+            })
+        );
+    } else if (selectedWidgetId === "number_select") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "number",
+                fieldConfig: "number_select",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                enumValues: propertyData.enumValues ?? []
+            })
+        );
+    } else if (selectedWidgetId === "multi_number_select") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "array",
+                fieldConfig: "multi_number_select",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                of: {
+                    dataType: "number",
+                    enumValues: propertyData.of?.enumValues ?? []
+                }
+            })
+        );
+    } else if (selectedWidgetId === "file_upload") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "string",
+                fieldConfig: "file_upload",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                storage: {
+                    storagePath: "/"
+                }
+            })
+        );
+    } else if (selectedWidgetId === "multi_file_upload") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "array",
+                fieldConfig: "multi_file_upload",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                of: {
+                    dataType: "string",
+                    storage: propertyData.of?.storage ?? {
+                        storagePath: "/"
+                    }
+                }
+            })
+        );
+    } else if (selectedWidgetId === "group") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "map",
+                fieldConfig: "group",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                keyValue: false,
+                properties: propertyData.properties ?? {}
+            })
+        );
+    } else if (selectedWidgetId === "key_value") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "map",
+                fieldConfig: "key_value",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                keyValue: true,
+                properties: undefined
+            })
+        );
+    } else if (selectedWidgetId === "reference") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "reference",
+                fieldConfig: "reference",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true
+            })
+        );
+    } else if (selectedWidgetId === "multi_references") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "array",
+                fieldConfig: "multi_references",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                of: {
+                    dataType: "reference"
+                }
+            })
+        );
+    } else if (selectedWidgetId === "switch") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "boolean",
+                fieldConfig: "switch",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true
+            })
+        );
+    } else if (selectedWidgetId === "date_time") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "date",
+                fieldConfig: "date_time",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                mode: "date_time"
+            })
+        );
+    } else if (selectedWidgetId === "repeat") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "array",
+                fieldConfig: "repeat",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true
+            })
+        );
+    } else if (selectedWidgetId === "block") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            buildProperty({
+                dataType: "array",
+                fieldConfig: "block",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true,
+                oneOf: {
+                    properties: {}
+                }
+            })
+        );
+    } else if (selectedWidgetId && customFields[selectedWidgetId]) {
+        updatedProperty = { ...customFields[selectedWidgetId].property, fieldConfig: selectedWidgetId };
+    }
+
+    return updatedProperty;
+}

package/src/components/collection_editor/utils/useTraceUpdate.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+
+function printChanged(props: any, prev: any, path = "", depth = 0) {
+    if (depth > 10) {
+        return;
+    }
+    if (props && prev && typeof props === "object" && typeof prev === "object") {
+        Object.keys(props).forEach((key) => {
+            printChanged(props[key], prev[key], path + "." + key, depth + 1);
+        });
+    } else if (props !== prev) {
+        console.log("Changed props:", path);
+    }
+
+}
+
+export function useTraceUpdate(props: any) {
+    const prev = useRef(props);
+    useEffect(() => {
+        printChanged(props, prev.current, "");
+        prev.current = props;
+    });
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+export {
+    useCollectionEditorPlugin
+} from "./useCollectionEditorPlugin";
+
+export {
+    useCollectionEditorController
+} from "./useCollectionEditorController";
+export {
+    useCollectionsConfigController
+} from "./useCollectionsConfigController";
+
+export {
+    editableProperty, removeNonEditableProperties
+} from "./utils/entities";
+
+export type {
+    CollectionsConfigController, DeleteCollectionParams, SaveCollectionParams
+} 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";

package/src/types/collection_editor_controller.tsx

@@ -0,0 +1,31 @@
+import { CollectionEditorPermissionsBuilder } from "./config_permissions";
+import { EntityCollection } from "@firecms/core";
+
+/**
+ * Controller to open the collection editor dialog.
+ * @category Hooks and utilities
+ */
+export interface CollectionEditorController {
+
+    editCollection: (props: {
+        path?: string,
+        fullPath?: string,
+        parentPathSegments: string[],
+        parentCollection?: EntityCollection<any, any, any>
+    }) => void;
+
+    createCollection: (props: {
+        initialValues?: {
+            group?: string,
+            path?: string,
+            name?: string
+        },
+        parentPathSegments: string[],
+        parentCollection?: EntityCollection<any, any, any>
+    }) => 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, parentPathSegments: string[]) => Promise<EntityCollection | null>;

package/src/types/config_controller.tsx

@@ -0,0 +1,30 @@
+import { CMSType, EntityCollection } 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[];
+
+    saveCollection: <M extends { [Key: string]: CMSType }>(params:SaveCollectionParams<M>) => Promise<void>;
+
+    deleteCollection: (props: DeleteCollectionParams) => Promise<void>;
+
+}
+
+export type SaveCollectionParams<M extends Record<string, any>> = {
+    path: string,
+    collectionData: PersistedCollection<M>,
+    previousPath?: string,
+    parentPathSegments?: string[]
+}
+
+export type DeleteCollectionParams = {
+    path: string,
+    parentPathSegments?: string[]
+}

package/src/types/config_permissions.ts

@@ -0,0 +1,20 @@
+import { EntityCollection } from "@firecms/core";
+
+export type CollectionEditorPermissionsBuilder<UserType = any, EC extends EntityCollection = EntityCollection> = (params: { user: UserType | null, collection?: EC }) => CollectionEditorPermissions;
+
+export type CollectionEditorPermissions = {
+    /**
+     * Is the user allowed to create new collections.
+     */
+    createCollections: boolean;
+
+    /**
+     * Is the user allowed to modify this collection
+     */
+    editCollections: boolean;
+
+    /**
+     * Is the user allowed to delete this collection
+     */
+    deleteCollections: boolean;
+}

package/src/types/persisted_collection.ts

@@ -0,0 +1,7 @@
+import { EntityCollection, Properties, User } from "@firecms/core";
+
+export type PersistedCollection<M extends Record<string, any> = any, AdditionalKey extends string = string, UserType extends User = User>
+    = Omit<EntityCollection<M, AdditionalKey, UserType>, "properties"> & {
+    properties: Properties<M>;
+    ownerId: string;
+}

package/src/useCollectionEditorController.tsx

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

package/src/useCollectionEditorPlugin.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback } from "react";
+import { EntityCollection, FireCMSPlugin, User } from "@firecms/core";
+import { ConfigControllerProvider } from "./ConfigControllerProvider";
+import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
+import { EditorCollectionAction } from "./components/EditorCollectionAction";
+import { HomePageEditorCollectionAction } from "./components/HomePageEditorCollectionAction";
+import { NewCollectionCard } from "./components/NewCollectionCard";
+import { PersistedCollection } from "./types/persisted_collection";
+import { CollectionInference } from "./types/collection_inference";
+import { CollectionsConfigController } from "./types/config_controller";
+import { RootCollectionSuggestions } from "./components/RootCollectionSuggestions";
+import { joinCollectionLists } from "./utils/join_collections";
+
+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) => Promise<object[]>;
+
+    getUser: (uid: string) => UserType | null;
+
+}
+
+/**
+ * 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 function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>
+({
+     collectionConfigController,
+     configPermissions,
+     reservedGroups,
+     extraView,
+     pathSuggestions,
+     getUser,
+     collectionInference,
+     getData
+ }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin {
+
+    const injectCollections = useCallback(
+        (collections: EntityCollection[]) => joinCollectionLists(collectionConfigController.collections ?? [], collections),
+        [collectionConfigController.collections]);
+
+    return {
+        name: "Collection Editor",
+        loading: collectionConfigController.loading,
+        collections: {
+            injectCollections,
+            CollectionActions: EditorCollectionAction
+        },
+        provider: {
+            Component: ConfigControllerProvider,
+            props: {
+                collectionConfigController,
+                configPermissions,
+                collectionInference,
+                reservedGroups,
+                extraView,
+                pathSuggestions,
+                getUser,
+                getData
+            }
+        },
+        homePage: {
+            additionalChildrenStart: <RootCollectionSuggestions/>,
+            CollectionActions: HomePageEditorCollectionAction,
+            AdditionalCards: NewCollectionCard,
+        }
+    };
+}

package/src/useCollectionsConfigController.tsx

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

package/src/utils/arrays.ts

@@ -0,0 +1,3 @@
+export function toArray<T>(input?: T | T[]):T[] {
+    return Array.isArray(input) ? input : (input ? [input] : []);
+}

package/src/utils/entities.ts

@@ -0,0 +1,38 @@
+import { isPropertyBuilder, Properties, PropertiesOrBuilders, Property, PropertyOrBuilder } from "@firecms/core";
+
+export function editableProperty(property: PropertyOrBuilder | PropertyOrBuilder): boolean {
+    if (isPropertyBuilder(property))
+        return false;
+    if (isPropertyBuilder(property as PropertyOrBuilder))
+        return false;
+    else {
+        const eProperty = property as Property;
+        if (eProperty.dataType === "array" && typeof eProperty.of === "function")
+            return false;
+        else if (eProperty.dataType === "array" && Array.isArray(eProperty.of))
+            return false;
+        return Boolean(eProperty.editable);
+    }
+}
+
+export function removeNonEditableProperties(properties: PropertiesOrBuilders<any>): Properties {
+    return Object.entries(properties)
+        .filter(([_, property]) => editableProperty(property))
+        .map(([key, propertyOrBuilder]) => {
+            const property = propertyOrBuilder as Property;
+            if (!editableProperty(property)) {
+                return undefined;
+            } else if (property.dataType === "map" && property.properties) {
+                return {
+                    [key]: {
+                        ...property,
+                        properties: removeNonEditableProperties(property.properties as PropertiesOrBuilders)
+                    }
+                };
+            } else {
+                return { [key]: property };
+            }
+        })
+        .filter((e) => Boolean(e))
+        .reduce((a, b) => ({ ...a, ...b }), {}) as Properties;
+}

package/src/utils/icons.ts

@@ -0,0 +1,17 @@
+import synonyms from "./synonyms";
+import { iconKeys } from "@firecms/core";
+
+// @ts-ignore
+import * as JsSearch from "js-search";
+
+export const iconsSearch = new JsSearch.Search("key");
+iconsSearch.addIndex("synonyms");
+
+iconsSearch.addDocuments(iconKeys
+    .map((importName) => {
+        return {
+            key: importName,
+            // @ts-ignore
+            synonyms: synonyms[importName] ?? [],
+        }
+    }));