@firecms/collection_editor 3.0.0-alpha.9 → 3.0.0-beta.2-pre.1

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

@@ -0,0 +1,188 @@
+import { EntityCollection } from "@firecms/core";
+
+export const pagesCollectionTemplate: EntityCollection = {
+    id: "pages",
+    path: "pages",
+    name: "Pages",
+    singularName: "Page",
+    icon: "insert_drive_file",
+    description: "List of website pages that can be edited here",
+    properties: {
+        title: {
+            dataType: "string",
+            name: "Page Title",
+            validation: { required: true }
+        },
+        slug: {
+            dataType: "string",
+            name: "URL Slug",
+            validation: {
+                required: true,
+                unique: true,
+                matches: /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
+                matchesMessage: "Must be lowercase, alphanumeric, and hyphenated"
+            }
+        },
+        hero_section: {
+            dataType: "map",
+            name: "Hero Section",
+            properties: {
+                headline: {
+                    dataType: "string",
+                    name: "Headline",
+                    validation: { required: true }
+                },
+                subhead: {
+                    dataType: "string",
+                    name: "Subheadline"
+                },
+                background_image: {
+                    dataType: "string",
+                    name: "Background Image",
+                    storage: {
+                        storagePath: "page_hero/images",
+                        acceptedFiles: ["image/*"],
+                    }
+                },
+                call_to_action: {
+                    dataType: "string",
+                    name: "Call to Action"
+                },
+                call_to_action_link: {
+                    dataType: "string",
+                    name: "CTA Link",
+                    url: true
+                }
+            }
+        },
+        content: {
+            dataType: "array",
+            name: "Content",
+            oneOf: {
+                properties: {
+                    section: {
+                        dataType: "map",
+                        name: "Section",
+                        properties: {
+                            title: {
+                                dataType: "string",
+                                name: "Section Title",
+                                validation: { required: true }
+                            },
+                            content: {
+                                dataType: "string",
+                                name: "Section Content",
+                                markdown: true
+                            },
+                            image: {
+                                dataType: "string",
+                                name: "Section Image",
+                                storage: {
+                                    storagePath: "page_sections/images",
+                                    acceptedFiles: ["image/*"]
+                                }
+                            },
+                            link: {
+                                dataType: "string",
+                                name: "Section Link",
+                                url: true
+                            }
+                        }
+                    },
+                    image: {
+                        dataType: "string",
+                        name: "Image",
+                        storage: {
+                            storagePath: "page_sections/images",
+                            acceptedFiles: ["image/*"]
+                        }
+                    },
+                    slider: {
+                        dataType: "array",
+                        name: "Slider",
+                        of: {
+                            dataType: "map",
+                            properties: {
+                                title: {
+                                    dataType: "string",
+                                    name: "Title",
+                                    validation: { required: true }
+                                },
+                                image: {
+                                    dataType: "string",
+                                    storage: {
+                                        storagePath: "page_sections/images",
+                                        acceptedFiles: ["image/*"]
+                                    }
+                                }
+                            }
+                        }
+                    },
+                }
+            }
+        },
+        sidebar: {
+            dataType: "map",
+            name: "Sidebar",
+            properties: {
+                title: {
+                    dataType: "string",
+                    name: "Sidebar Title",
+                    validation: { required: false }
+                },
+                content: {
+                    dataType: "string",
+                    name: "Sidebar Content",
+                    markdown: true
+                }
+            }
+        },
+        seo_metadata: {
+            dataType: "map",
+            name: "SEO Metadata",
+            properties: {
+                meta_title: {
+                    dataType: "string",
+                    name: "Meta Title"
+                },
+                meta_description: {
+                    dataType: "string",
+                    name: "Meta Description"
+                },
+                focus_keywords: {
+                    dataType: "array",
+                    name: "Focus Keywords",
+                    of: {
+                        dataType: "string"
+                    }
+                }
+            }
+        },
+        footer_override: {
+            dataType: "string",
+            name: "Footer Override",
+            markdown: true
+        },
+        publish_date: {
+            dataType: "date",
+            name: "Publish Date",
+            validation: { required: true }
+        },
+        last_updated: {
+            dataType: "date",
+            name: "Last Updated",
+            autoValue: "on_update"
+        },
+        is_published: {
+            dataType: "boolean",
+            name: "Is Published",
+            columnWidth: 100,
+            description: "Should this page be live on the site?"
+        },
+        author_uid: {
+            dataType: "reference",
+            name: "Author",
+            path: "users"
+        }
+    }
+};

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,42 @@
+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"
+        },
+        favourite_products: {
+            name: "Favourite products",
+            dataType: "array",
+            of: {
+                dataType: "reference",
+                path: "products"
+            }
+        },
+        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,29 @@
+import { DEFAULT_FIELD_CONFIGS, FieldConfigId, PropertyConfig } 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",
+    "reference",
+    "multi_references",
+    "switch",
+    "date_time",
+    "group",
+    "key_value",
+    "repeat",
+    "block"
+];
+
+export const supportedFields: Record<string, PropertyConfig> = Object.entries(DEFAULT_FIELD_CONFIGS)
+    .filter(([id]) => supportedFieldsIds.includes(id as FieldConfigId))
+    .map(([id, config]) => ({ [id]: config }))
+    .reduce((a, b) => ({ ...a, ...b }), {});

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);