@firecms/collection_editor 3.0.0-alpha.5 → 3.0.0-alpha.50

package/src/ui/collection_editor/templates/products_template.ts

@@ -0,0 +1,88 @@
+import { EntityCollection, makePropertiesEditable } from "@firecms/core";
+
+export const productsCollectionTemplate: EntityCollection = {
+    id: "products",
+    path: "products",
+    name: "Products",
+    singularName: "Product",
+    icon: "shopping_cart",
+    description: "List of the products currently sold in your shop",
+    properties: makePropertiesEditable({
+        name: {
+            dataType: "string",
+            name: "Name",
+            description: "Name of this product",
+            validation: {
+                required: true
+            }
+        },
+        brand: {
+            dataType: "string",
+            name: "Brand",
+            validation: {
+                required: true
+            }
+        },
+        description: {
+            dataType: "string",
+            name: "Description",
+            description: "Description of this product, supports markdown",
+            markdown: true
+        },
+        main_image: {
+            dataType: "string",
+            name: "Image",
+            storage: {
+                storagePath: "images",
+                acceptedFiles: ["image/*"],
+            },
+            description: "Upload field for images"
+        },
+        available: {
+            dataType: "boolean",
+            name: "Available",
+            columnWidth: 100,
+            description: "Is this product available in the website"
+        },
+        price: {
+            dataType: "number",
+            name: "Price",
+            validation: {
+                requiredMessage: "You must set a positive price",
+                min: 0
+            }
+        },
+        images: {
+            dataType: "array",
+            name: "Images",
+            hideFromCollection: true,
+            of: {
+                dataType: "string",
+                storage: {
+                    storagePath: "images",
+                    acceptedFiles: ["image/*"]
+                }
+            }
+        },
+        related_products: {
+            dataType: "array",
+            name: "Related products",
+            description: "Products related to this one",
+            of: {
+                dataType: "reference",
+                path: "products"
+            }
+        },
+        metadata: {
+            name: "Metadata",
+            description: "This is an example of a map property",
+            dataType: "map",
+            keyValue: true
+        },
+        added_on: {
+            dataType: "date",
+            name: "Added on",
+            autoValue: "on_create"
+        }
+    })
+};

package/src/ui/collection_editor/templates/users_template.ts

@@ -0,0 +1,34 @@
+import { EntityCollection, makePropertiesEditable } from "@firecms/core";
+
+export const usersCollectionTemplate: EntityCollection = {
+    id: "users",
+    path: "users",
+    name: "Users",
+    singularName: "User",
+    description: "Registered users in the app/web",
+    icon: "person",
+    properties: makePropertiesEditable({
+        displayName: {
+            name: "Display name",
+            dataType: "string"
+        },
+        email: {
+            name: "Email",
+            dataType: "string",
+            email: true
+        },
+        emailVerified: {
+            name: "Email verified",
+            dataType: "boolean"
+        },
+        phone: {
+            name: "Phone",
+            dataType: "string"
+        },
+        photoURL: {
+            name: "Photo URL",
+            dataType: "string",
+            url: "image"
+        }
+    }),
+};

package/src/ui/collection_editor/util.ts

@@ -0,0 +1,21 @@
+export function idToPropertiesPath(id: string): string {
+    return "properties." + id.replaceAll(".", ".properties.");
+}
+
+export function namespaceToPropertiesPath(namespace?: string): string {
+    return namespace
+        ? "properties." + namespace.replaceAll(".", ".properties.") + ".properties"
+        : "properties";
+}
+
+export function namespaceToPropertiesOrderPath(namespace?: string): string {
+    return namespace
+        ? "properties." + namespace.replaceAll(".", ".properties.") + ".propertiesOrder"
+        : "propertiesOrder";
+}
+
+export function getFullId(propertyKey: string, propertyNamespace?: string): string {
+    return propertyNamespace
+        ? `${propertyNamespace}.${propertyKey}`
+        : propertyKey;
+}

package/src/ui/collection_editor/utils/strings.ts

@@ -0,0 +1,8 @@
+export function camelCase(str: string): string {
+    return (str.slice(0, 1).toLowerCase() + str.slice(1))
+        .replace(/([-_ ]){1,}/g, ' ')
+        .split(/[-_ ]/)
+        .reduce((cur, acc) => {
+            return cur + acc[0].toUpperCase() + acc.substring(1);
+        });
+}

package/src/ui/collection_editor/utils/supported_fields.tsx

@@ -0,0 +1,28 @@
+import { DEFAULT_FIELD_CONFIGS, FieldConfigId } from "@firecms/core";
+
+export const supportedFieldsIds: FieldConfigId[] = [
+    "text_field",
+    "multiline",
+    "markdown",
+    "url",
+    "email",
+    "select",
+    "multi_select",
+    "number_input",
+    "number_select",
+    "multi_number_select",
+    "file_upload",
+    "multi_file_upload",
+    "group",
+    "key_value",
+    "reference",
+    "multi_references",
+    "switch",
+    "date_time",
+    "repeat",
+    "block"
+];
+
+export const supportedFields = Object.entries(DEFAULT_FIELD_CONFIGS).filter(([id]) =>
+    supportedFieldsIds.includes(id as FieldConfigId)
+);

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

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

package/src/ui/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/useCollectionEditorController.tsx

@@ -0,0 +1,9 @@
+import { 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,128 @@
+import React, { useCallback } from "react";
+import {
+    EntityCollection,
+    FireCMSPlugin,
+    joinCollectionLists,
+    makePropertiesEditable,
+    ModifyCollectionProps,
+    Properties,
+    User
+} from "@firecms/core";
+import { ConfigControllerProvider } from "./ConfigControllerProvider";
+import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
+import { EditorCollectionAction } from "./ui/EditorCollectionAction";
+import { HomePageEditorCollectionAction } from "./ui/HomePageEditorCollectionAction";
+import { NewCollectionCard } from "./ui/NewCollectionCard";
+import { PersistedCollection } from "./types/persisted_collection";
+import { CollectionInference } from "./types/collection_inference";
+import { CollectionsConfigController } from "./types/config_controller";
+import { RootCollectionSuggestions } from "./ui/RootCollectionSuggestions";
+import { CollectionViewHeaderAction } from "./ui/CollectionViewHeaderAction";
+import { PropertyAddColumnComponent } from "./ui/PropertyAddColumnComponent";
+
+export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
+
+    /**
+     * Firebase app where the configuration is saved.
+     */
+    collectionConfigController: CollectionsConfigController;
+
+    modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void;
+
+    /**
+     * 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,
+    modifyCollection,
+     configPermissions,
+     reservedGroups,
+     extraView,
+     pathSuggestions,
+     getUser,
+     collectionInference,
+     getData
+ }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection> {
+
+    const injectCollections = useCallback(
+        (collections: EntityCollection[]) => {
+            const markAsEditable = (c: PersistedCollection) => {
+                makePropertiesEditable(c.properties as Properties);
+                c.subcollections?.forEach(markAsEditable);
+            };
+            const storedCollections = collectionConfigController.collections ?? [];
+            storedCollections.forEach(markAsEditable);
+            return joinCollectionLists(collections, storedCollections, [], modifyCollection);
+        },
+        [collectionConfigController.collections, modifyCollection]);
+
+    return {
+        name: "Collection Editor",
+        loading: collectionConfigController.loading,
+        collections: {
+            injectCollections,
+            CollectionActions: EditorCollectionAction
+        },
+        provider: {
+            Component: ConfigControllerProvider,
+            props: {
+                collectionConfigController,
+                configPermissions,
+                collectionInference,
+                reservedGroups,
+                extraView,
+                pathSuggestions,
+                getUser,
+                getData
+            }
+        },
+        homePage: {
+            additionalChildrenEnd: <RootCollectionSuggestions/>,
+            CollectionActions: HomePageEditorCollectionAction,
+            AdditionalCards: NewCollectionCard,
+        },
+        collectionView: {
+            HeaderAction: CollectionViewHeaderAction,
+            AddColumnComponent: PropertyAddColumnComponent
+        }
+    };
+}

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] ?? [],
+        }
+    }));