@firecms/collection_editor 3.0.0-alpha.72 → 3.0.0-alpha.74

package/dist/ui/collection_editor/templates/pages_template.d.ts

@@ -0,0 +1,2 @@
+import { EntityCollection } from "@firecms/core";
+export declare const pagesCollectionTemplate: EntityCollection;

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-alpha.72",
+  "version": "3.0.0-alpha.74",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_import_export": "^3.0.0-alpha.72",
-    "@firecms/schema_inference": "^3.0.0-alpha.72",
-    "@firecms/ui": "^3.0.0-alpha.72",
+    "@firecms/data_import_export": "^3.0.0-alpha.74",
+    "@firecms/schema_inference": "^3.0.0-alpha.74",
+    "@firecms/ui": "^3.0.0-alpha.74",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.0"
   },
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e"
+  "gitHead": "52ebcaf1e5c019f0f5e03cc63a3ea7663c356d23"
 }

package/src/ui/EditorCollectionAction.tsx

@@ -7,7 +7,7 @@ import {
     useNavigationController,
     useSnackbarController
 } from "@firecms/core";
-import { Button, IconButton, SaveIcon, SettingsIcon, Tooltip, } from "@firecms/ui";
+import { Button, IconButton, SaveIcon, SettingsIcon, Tooltip, UndoIcon, } from "@firecms/ui";
 
 import { useCollectionEditorController } from "../useCollectionEditorController";
 import { useCollectionsConfigController } from "../useCollectionsConfigController";
@@ -52,7 +52,7 @@ export function EditorCollectionAction({
                         if (collection?.initialSort)
                             tableController.setSortBy?.(collection?.initialSort);
                     }}>
-                    <SaveIcon/>
+                    <UndoIcon/>
                 </Button>
             </Tooltip>}
 

package/src/ui/PropertyAddColumnComponent.tsx

@@ -25,7 +25,7 @@ export function PropertyAddColumnComponent({
     return (
         <Tooltip title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
             <div
-                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-950"}
+                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-gray-100 bg-opacity-40 hover:bg-gray-100 dark:bg-gray-950 dark:bg-opacity-40 dark:hover:bg-gray-950"}
                 // className={onHover ? "bg-white dark:bg-gray-950" : undefined}
                 onClick={() => {
                     collectionEditorController.editProperty({

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -19,6 +19,7 @@ import { productsCollectionTemplate } from "./templates/products_template";
 import { blogCollectionTemplate } from "./templates/blog_template";
 import { usersCollectionTemplate } from "./templates/users_template";
 import { ImportFileUpload } from "@firecms/data_import_export";
+import { pagesCollectionTemplate } from "./templates/pages_template";
 
 export function CollectionEditorWelcomeView({
                                                 path,
@@ -125,6 +126,13 @@ export function CollectionEditorWelcomeView({
                                             setValues(productsCollectionTemplate);
                                             onContinue();
                                         }}/>
+                        <TemplateButton title={"Users"}
+                                        subtitle={"A collection of users with emails, names and roles"}
+                                        icon={<Icon size={"small"} iconKey={usersCollectionTemplate.icon!}/>}
+                                        onClick={() => {
+                                            setValues(usersCollectionTemplate);
+                                            onContinue();
+                                        }}/>
                         <TemplateButton title={"Blog posts"}
                                         subtitle={"A collection of blog posts with images, authors and complex content"}
                                         icon={<Icon size={"small"} iconKey={blogCollectionTemplate.icon!}/>}
@@ -132,11 +140,11 @@ export function CollectionEditorWelcomeView({
                                             setValues(blogCollectionTemplate);
                                             onContinue();
                                         }}/>
-                        <TemplateButton title={"Users"}
-                                        subtitle={"A collection of users with emails, names and roles"}
-                                        icon={<Icon size={"small"} iconKey={usersCollectionTemplate.icon!}/>}
+                        <TemplateButton title={"Pages"}
+                                        subtitle={"A collection of pages with images, authors and complex content"}
+                                        icon={<Icon size={"small"} iconKey={pagesCollectionTemplate.icon!}/>}
                                         onClick={() => {
-                                            setValues(usersCollectionTemplate);
+                                            setValues(pagesCollectionTemplate);
                                             onContinue();
                                         }}/>
                     </div>

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import { Field, FormikErrors, getIn, useFormikContext } from "formik";
 import {
@@ -248,6 +248,14 @@ export function CollectionPropertiesEditorForm({
             setFieldTouched(previousPropertyPath, false, false);
         }
 
+        console.debug("onPropertyChanged", {
+            id,
+            property,
+            previousId,
+            namespace,
+            propertyPath
+        })
+
         if (propertyPath) {
             setFieldValue(propertyPath, property, false);
             setFieldTouched(propertyPath, true, false);
@@ -255,7 +263,7 @@ export function CollectionPropertiesEditorForm({
 
     };
 
-    const onPropertyErrorInternal = (id: string, namespace?: string, error?: FormikErrors<any>) => {
+    const onPropertyErrorInternal = useCallback((id: string, namespace?: string, error?: FormikErrors<any>) => {
         const propertyPath = id ? getFullId(id, namespace) : undefined;
         console.warn("onPropertyErrorInternal", {
             id,
@@ -268,7 +276,7 @@ export function CollectionPropertiesEditorForm({
             onPropertyError(id, namespace, hasError ? error : undefined);
             setFieldError(idToPropertiesPath(propertyPath), hasError ? "Property error" : undefined);
         }
-    };
+    }, [])
 
     const closePropertyDialog = () => {
         setSelectedPropertyIndex(undefined);

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -137,7 +137,7 @@ export const PropertyForm = React.memo(
                 ? { id: propertyKey, ...property } as PropertyWithId
                 : initialValue}
             onSubmit={(newPropertyWithId: PropertyWithId, helpers) => {
-                console.log("onSubmit", newPropertyWithId);
+                console.debug("onSubmit", newPropertyWithId);
                 const {
                     id,
                     ...property

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/users_template.ts

@@ -25,6 +25,14 @@ export const usersCollectionTemplate: EntityCollection = {
             name: "Phone",
             dataType: "string"
         },
+        favourite_products: {
+            name: "Favourite products",
+            dataType: "array",
+            of: {
+                dataType: "reference",
+                path: "products"
+            }
+        },
         photoURL: {
             name: "Photo URL",
             dataType: "string",