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

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

@@ -0,0 +1,115 @@
+import { EntityCollection, makePropertiesEditable } from "@firecms/core";
+
+export const blogCollectionTemplate:EntityCollection = {
+    id: "blog",
+    path: "blog",
+    name: "Blog",
+    singularName: "Blog entry",
+    icon: "article",
+    description: "A collection of blog entries",
+    defaultSize: "l",
+    properties: makePropertiesEditable({
+        name: {
+            name: "Name",
+            validation: { required: true },
+            dataType: "string"
+        },
+        header_image: {
+            name: "Header image",
+            dataType: "string",
+            storage: {
+                storagePath: "images",
+                acceptedFiles: ["image/*"],
+                metadata: {
+                    cacheControl: "max-age=1000000"
+                }
+            }
+        },
+        content: {
+            name: "Content",
+            description: "Content blocks for the blog entry",
+            validation: { required: true },
+            dataType: "array",
+            oneOf: {
+                typeField: "type",
+                valueField: "value",
+                properties: {
+                    text: {
+                        dataType: "string",
+                        name: "Text",
+                        markdown: true
+                    },
+                    quote: {
+                        dataType: "string",
+                        name: "Quote",
+                        multiline: true
+                    },
+                    images: {
+                        name: "Images",
+                        dataType: "array",
+                        of: {
+                            dataType: "string",
+                            storage: {
+                                storagePath: "images",
+                                acceptedFiles: ["image/*"],
+                                metadata: {
+                                    cacheControl: "max-age=1000000"
+                                }
+                            }
+                        },
+                        description: "This fields allows uploading multiple images at once and reordering"
+                    },
+                    products: {
+                        name: "Products",
+                        dataType: "array",
+                        of: {
+                            dataType: "reference",
+                            path: "products",
+                            previewProperties: ["name", "main_image"]
+                        }
+                    }
+                },
+                propertiesOrder: ["text", "quote", "images", "products"]
+            }
+        },
+        created_on: {
+            name: "Created on",
+            dataType: "date",
+            autoValue: "on_create"
+        },
+        status: {
+            name: "Status",
+            validation: { required: true },
+            dataType: "string",
+            enumValues: {
+                published: {
+                    id: "published",
+                    label: "Published",
+                },
+                draft: "Draft"
+            },
+            defaultValue: "draft"
+        },
+        publish_date: {
+            name: "Publish date",
+            dataType: "date",
+            clearable: true
+        },
+        reviewed: {
+            name: "Reviewed",
+            dataType: "boolean"
+        },
+        tags: {
+            name: "Tags",
+            description: "Example of generic array",
+            dataType: "array",
+            of: {
+                dataType: "string",
+                previewAsTag: true
+            }
+        }
+    }),
+    initialFilter: {
+        status: ["==", "published"]
+    }
+};

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,28 @@
+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;
+}
+
+export function getFullIdPath(propertyKey: string, propertyNamespace?: string): string {
+    const keyWithNamespace = propertyNamespace
+        ? `${propertyNamespace}.${propertyKey}`
+        : propertyKey;
+    return idToPropertiesPath(keyWithNamespace);
+}

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

@@ -0,0 +1,9 @@
+export function camelCase(str: string): string {
+    if (!str) return "";
+    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, PropertyConfigId, PropertyConfig } from "@firecms/core";
+
+export const supportedFieldsIds: PropertyConfigId[] = [
+    "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 PropertyConfigId))
+    .map(([id, config]) => ({ [id]: config }))
+    .reduce((a, b) => ({ ...a, ...b }), {});