@firecms/collection_editor 3.0.0-alpha.30 → 3.0.0-alpha.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firecms/collection_editor",
-  "version": "3.0.0-alpha.30",
+  "version": "3.0.0-alpha.32",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -14,8 +14,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/data_import": "^3.0.0-alpha.30",
-    "@firecms/schema_inference": "^3.0.0-alpha.30"
+    "@firecms/data_import": "^3.0.0-alpha.32",
+    "@firecms/schema_inference": "^3.0.0-alpha.32",
+    "json5": "^2.2.3",
+    "prism-react-renderer": "^2.3.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -76,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "89854d00f9088e09134623a84be752990c6cbc32"
+  "gitHead": "f545e3572aa7f025222713984025288bf62b0d4c"
 }

package/src/components/collection_editor/CollectionEditorDialog.tsx

@@ -391,7 +391,7 @@ export function CollectionEditorDialogInternal<M extends {
               }) => {
 
                 const path = values.path ?? editedCollectionPath;
-                const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path;
+                const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path; // TODO: this path is wrong
                 const resolvedPath = navigation.resolveAliasesFrom(updatedFullPath);
                 const getDataWithPath = resolvedPath && getData ? () => getData(resolvedPath) : undefined;
 

package/src/components/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
+import JSON5 from "json5";
 
 import { Field, FormikErrors, getIn, useFormikContext } from "formik";
 import {
@@ -7,28 +8,36 @@ import {
     Button,
     CircularProgress,
     cn,
+    CodeIcon,
     DebouncedTextField,
     defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
     EntityCollection,
     ErrorBoundary,
-    PropertyConfig,
+    IconButton,
     isPropertyBuilder,
     makePropertiesEditable,
     Paper,
     Properties,
     Property,
+    PropertyConfig,
     PropertyOrBuilder,
     Tooltip,
     Typography,
     useLargeLayout,
     User,
-    useSnackbarController,
+    useSnackbarController
 } from "@firecms/core";
 
+import { Highlight, themes } from "prism-react-renderer"
+
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "./util";
 import { OnPropertyChangedParams, PropertyForm, PropertyFormDialog } from "./PropertyEditView";
 import { PropertyTree } from "./PropertyTree";
 import { PersistedCollection } from "../../types/persisted_collection";
+import { camelCase } from "./utils/strings";
 
 type CollectionEditorFormProps = {
     showErrors: boolean;
@@ -45,6 +54,47 @@ type CollectionEditorFormProps = {
     collectionEditable: boolean;
 };
 
+function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange: (open: boolean) => void, collection: any, open: any }) {
+    const code = "const " + camelCase(collection.name) + "Collection = " + JSON5.stringify(collection, null, "\t");
+    return <Dialog open={open}
+                   onOpenChange={onOpenChange}
+                   maxWidth={"4xl"}>
+        <DialogContent>
+            <Typography variant={"h6"} className={"my-4"}>
+                Code for {collection.name}
+            </Typography>
+            <Typography variant={"body2"} className={"my-4 mb-8"}>
+                If you want to customise the collection in code, you can add this collection code to your CMS
+                app configuration.
+                More info in the <a
+                rel="noopener noreferrer"
+                href={"https://firecms.co/docs/customization_quickstart"}>docs</a>.
+            </Typography>
+            <Highlight
+                theme={themes.vsDark}
+                code={code}
+                language="typescript"
+            >
+                {({ className, style, tokens, getLineProps, getTokenProps }) => (
+                    <pre style={style} className={"p-4 rounded"}>
+        {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line })}>
+                {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token })} />
+                ))}
+            </div>
+        ))}
+      </pre>
+                )}
+            </Highlight>
+
+        </DialogContent>
+        <DialogActions>
+            <Button onClick={() => onOpenChange(false)}>Close</Button>
+        </DialogActions>
+    </Dialog>;
+}
+
 export function CollectionPropertiesEditorForm({
                                                    showErrors,
                                                    isNewCollection,
@@ -81,6 +131,7 @@ export function CollectionPropertiesEditorForm({
 
     const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
     const selectedProperty = selectedPropertyFullId ? getIn(values.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
+    const [codeDialogOpen, setCodeDialogOpen] = useState<boolean>(false);
 
     const [inferringProperties, setInferringProperties] = useState<boolean>(false);
 
@@ -112,7 +163,7 @@ export function CollectionPropertiesEditorForm({
                     if (!newCollection) {
                         snackbarController.open({
                             type: "error",
-                            message: "Could not infer properties from data",
+                            message: "Could not infer properties from data"
                         });
                         return;
                     }
@@ -122,7 +173,7 @@ export function CollectionPropertiesEditorForm({
                     if (newPropertyKeys.length === 0) {
                         snackbarController.open({
                             type: "info",
-                            message: "No new properties found",
+                            message: "No new properties found"
                         });
                         return;
                     }
@@ -132,7 +183,7 @@ export function CollectionPropertiesEditorForm({
                             acc[propertyKey] = newCollection.properties[propertyKey];
                             return acc;
                         }, {} as { [key: string]: PropertyOrBuilder }),
-                        ...values.properties,
+                        ...values.properties
                     };
                     const updatedPropertiesOrder = [
                         ...newPropertyKeys,
@@ -323,13 +374,21 @@ export function CollectionPropertiesEditorForm({
                     </div>}
 
                     <div className="ml-1 mt-2 flex flex-row gap-2">
+                        <Tooltip title={"Get the code of this collection"}>
+                            <IconButton
+                                variant={"filled"}
+                                disabled={inferringProperties}
+                                onClick={() => setCodeDialogOpen(true)}>
+                                <CodeIcon/>
+                            </IconButton>
+                        </Tooltip>
                         {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}>
-                            <Button
-                                variant={"text"}
+                            <IconButton
+                                variant={"filled"}
                                 disabled={inferringProperties}
                                 onClick={inferPropertiesFromData}>
                                 {inferringProperties ? <CircularProgress size={"small"}/> : <AutoAwesomeIcon/>}
-                            </Button>
+                            </IconButton>
                         </Tooltip>}
                         <Tooltip title={"Add new property"}>
                             <Button
@@ -458,6 +517,11 @@ export function CollectionPropertiesEditorForm({
                 collectionEditable={collectionEditable}
                 existingPropertyKeys={values.propertiesOrder as string[]}/>
 
+            <GetCodeDialog
+                collection={values}
+                open={codeDialogOpen}
+                onOpenChange={setCodeDialogOpen}/>
+
         </>
     );
 }

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

@@ -1,6 +1,6 @@
-import { buildCollection, buildProperty } from "@firecms/core";
+import { EntityCollection } from "@firecms/firebase";
 
-export const blogCollectionTemplate = buildCollection({
+export const blogCollectionTemplate:EntityCollection = {
     path: "blog",
     name: "Blog",
     singularName: "Blog entry",
@@ -9,12 +9,12 @@ export const blogCollectionTemplate = buildCollection({
     description: "A collection of blog entries",
     defaultSize: "l",
     properties: {
-        name: buildProperty({
+        name: {
             name: "Name",
             validation: { required: true },
             dataType: "string"
-        }),
-        header_image: buildProperty({
+        },
+        header_image: {
             name: "Header image",
             dataType: "string",
             storage: {
@@ -24,8 +24,8 @@ export const blogCollectionTemplate = buildCollection({
                     cacheControl: "max-age=1000000"
                 }
             }
-        }),
-        content: buildProperty({
+        },
+        content: {
             name: "Content",
             description: "Content blocks for the blog entry",
             validation: { required: true },
@@ -71,7 +71,7 @@ export const blogCollectionTemplate = buildCollection({
                 },
                 propertiesOrder: ["text", "quote", "images", "products"]
             }
-        }),
+        },
         created_on: {
             name: "Created on",
             dataType: "date",
@@ -112,4 +112,4 @@ export const blogCollectionTemplate = buildCollection({
     initialFilter: {
         status: ["==", "published"]
     }
-});
+};

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

@@ -1,6 +1,6 @@
-import { buildCollection } from "@firecms/core";
+import { EntityCollection } from "@firecms/core";
 
-export const productsCollectionTemplate = buildCollection({
+export const productsCollectionTemplate: EntityCollection = {
     path: "products",
     name: "Products",
     singularName: "Product",
@@ -86,4 +86,4 @@ export const productsCollectionTemplate = buildCollection({
         }
     }
 
-});
+};

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

@@ -1,6 +1,6 @@
-import { buildCollection } from "@firecms/core";
+import { EntityCollection } from "@firecms/core";
 
-export const usersCollectionTemplate = buildCollection({
+export const usersCollectionTemplate: EntityCollection = {
     path: "users",
     name: "Users",
     singularName: "User",
@@ -31,4 +31,4 @@ export const usersCollectionTemplate = buildCollection({
             url: "image"
         }
     },
-});
+};

package/src/components/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/components/collection_editor/utils/update_property_for_widget.ts

@@ -1,4 +1,14 @@
-import { buildProperty, PropertyConfig, mergeDeep, Property } from "@firecms/core";
+import {
+    ArrayProperty,
+    BooleanProperty,
+    DateProperty,
+    MapProperty,
+    mergeDeep,
+    NumberProperty,
+    Property,
+    PropertyConfig,
+    StringProperty
+} from "@firecms/core";
 
 export function updatePropertyFromWidget(propertyData: any,
                                          selectedWidgetId: string | undefined,
@@ -8,7 +18,7 @@ export function updatePropertyFromWidget(propertyData: any,
     if (selectedWidgetId === "text_field") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 dataType: "string",
                 propertyConfig: "text_field",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
@@ -18,12 +28,12 @@ export function updatePropertyFromWidget(propertyData: any,
                 email: undefined,
                 url: undefined,
                 enumValues: undefined
-            })
+            } satisfies StringProperty
         );
     } else if (selectedWidgetId === "multiline") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 dataType: "string",
                 propertyConfig: "multiline",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
@@ -33,12 +43,12 @@ export function updatePropertyFromWidget(propertyData: any,
                 email: undefined,
                 url: undefined,
                 enumValues: undefined
-            })
+            } satisfies StringProperty
         );
     } else if (selectedWidgetId === "markdown") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 dataType: "string",
                 propertyConfig: "markdown",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
@@ -47,12 +57,12 @@ export function updatePropertyFromWidget(propertyData: any,
                 markdown: true,
                 email: undefined,
                 url: undefined
-            })
+            } satisfies StringProperty
         );
     } else if (selectedWidgetId === "url") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 dataType: "string",
                 propertyConfig: "url",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
@@ -62,12 +72,12 @@ export function updatePropertyFromWidget(propertyData: any,
                 email: undefined,
                 url: true,
                 enumValues: undefined
-            })
+            } satisfies StringProperty
         );
     } else if (selectedWidgetId === "email") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 dataType: "string",
                 propertyConfig: "email",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
@@ -77,12 +87,12 @@ export function updatePropertyFromWidget(propertyData: any,
                 email: true,
                 url: undefined,
                 enumValues: undefined
-            })
+            } satisfies StringProperty
         );
     } else if (selectedWidgetId === "select") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 dataType: "string",
                 propertyConfig: "select",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
@@ -92,12 +102,12 @@ export function updatePropertyFromWidget(propertyData: any,
                 email: undefined,
                 url: undefined,
                 enumValues: propertyData.enumValues ?? []
-            })
+            } satisfies StringProperty
         );
     } else if (selectedWidgetId === "multi_select") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 dataType: "array",
                 propertyConfig: "multi_select",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
@@ -105,32 +115,32 @@ export function updatePropertyFromWidget(propertyData: any,
                     dataType: "string",
                     enumValues: propertyData.of?.enumValues ?? []
                 }
-            })
+            } satisfies ArrayProperty
         );
     } else if (selectedWidgetId === "number_input") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 dataType: "number",
                 propertyConfig: "number_input",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 enumValues: undefined
-            })
+            } satisfies NumberProperty
         );
     } else if (selectedWidgetId === "number_select") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 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,
-            buildProperty({
+            {
                 dataType: "array",
                 propertyConfig: "multi_number_select",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
@@ -138,24 +148,24 @@ export function updatePropertyFromWidget(propertyData: any,
                     dataType: "number",
                     enumValues: propertyData.of?.enumValues ?? []
                 }
-            })
+            } satisfies ArrayProperty
         );
     } else if (selectedWidgetId === "file_upload") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 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,
-            buildProperty({
+            {
                 dataType: "array",
                 propertyConfig: "multi_file_upload",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
@@ -165,90 +175,90 @@ export function updatePropertyFromWidget(propertyData: any,
                         storagePath: "/"
                     }
                 }
-            })
+            } satisfies ArrayProperty
         );
     } else if (selectedWidgetId === "group") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 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,
-            buildProperty({
+            {
                 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,
-            buildProperty({
+            {
                 dataType: "reference",
                 propertyConfig: "reference",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true
-            })
+            } satisfies Property
         );
     } else if (selectedWidgetId === "multi_references") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 dataType: "array",
                 propertyConfig: "multi_references",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 of: {
                     dataType: "reference"
                 }
-            })
+            } satisfies ArrayProperty
         );
     } else if (selectedWidgetId === "switch") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 dataType: "boolean",
                 propertyConfig: "switch",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true
-            })
+            } satisfies BooleanProperty
         );
     } else if (selectedWidgetId === "date_time") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 dataType: "date",
                 propertyConfig: "date_time",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 mode: "date_time"
-            })
+            } satisfies DateProperty
         );
     } else if (selectedWidgetId === "repeat") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 dataType: "array",
                 propertyConfig: "repeat",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true
-            })
+            } satisfies ArrayProperty
         );
     } else if (selectedWidgetId === "block") {
         updatedProperty = mergeDeep(
             propertyData,
-            buildProperty({
+            {
                 dataType: "array",
                 propertyConfig: "block",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 oneOf: {
                     properties: {}
                 }
-            })
+            } satisfies ArrayProperty
         );
     } else if (selectedWidgetId && customFields[selectedWidgetId]) {
         updatedProperty = { ...customFields[selectedWidgetId].property, propertyConfig: selectedWidgetId };