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

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,154 @@
+import React from "react";
+import { FireCMSPlugin, useAuthController, useNavigationController, 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";
+import { NewCollectionButton } from "./ui/NewCollectionButton";
+import { AddIcon, Button, Typography } from "@firecms/ui";
+import { useCollectionEditorController } from "./useCollectionEditorController";
+
+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 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> {
+
+    return {
+        name: "Collection Editor",
+        loading: collectionConfigController.loading,
+        provider: {
+            Component: ConfigControllerProvider,
+            props: {
+                collectionConfigController,
+                configPermissions,
+                collectionInference,
+                reservedGroups,
+                extraView,
+                pathSuggestions,
+                getUser,
+                getData,
+                onAnalyticsEvent
+            }
+        },
+        homePage: {
+            additionalActions: <NewCollectionButton/>,
+            additionalChildrenStart: introMode ? <IntroWidget introMode={introMode}/> : undefined,
+            additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
+            CollectionActions: HomePageEditorCollectionAction,
+            AdditionalCards: introMode ? undefined : NewCollectionCard,
+        },
+        collectionView: {
+            CollectionActions: EditorCollectionAction,
+            HeaderAction: CollectionViewHeaderAction,
+            AddColumnComponent: PropertyAddColumnComponent
+        }
+    };
+}
+
+export function IntroWidget({ introMode }: {
+    introMode?: "new_project" | "existing_project";
+}) {
+
+    const navigation = useNavigationController();
+    if (!navigation.topLevelNavigation)
+        throw Error("Navigation not ready in FireCMSHomePage");
+
+    const authController = useAuthController();
+
+    const collectionEditorController = useCollectionEditorController();
+    const canCreateCollections = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+        }).createCollections
+        : true;
+
+    return (
+        <div className={"mt-8 flex flex-col mt-8 p-2"}>
+            <Typography variant={"h4"} className="mb-4">Welcome</Typography>
+            <Typography paragraph={true}>Your admin panel is ready ✌️</Typography>
+            <Typography paragraph={true}>
+                Start building collections in FireCMS easily. Map them to your existing
+                database data, import from files, or use our templates. Simplify your data management process
+                now.
+            </Typography>
+            {canCreateCollections && <Button
+                className={"mt-4"}
+                onClick={collectionEditorController && canCreateCollections
+                    ? () => collectionEditorController.createCollection({
+                        parentCollectionIds: [],
+                        redirect: true,
+                        sourceClick: "new_collection_card"
+                    })
+                    : undefined}>
+                <AddIcon/>Create your first collection
+            </Button>}
+        </div>
+    );
+}

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/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />