@firecms/collection_editor 3.0.0-alpha.31 → 3.0.0-alpha.33

package/dist/ui/collection_editor/GetCodeDialog.d.ts

@@ -0,0 +1,5 @@
+export declare function GetCodeDialog({ collection, onOpenChange, open }: {
+    onOpenChange: (open: boolean) => void;
+    collection: any;
+    open: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/utils/strings.d.ts

@@ -0,0 +1 @@
+export declare function camelCase(str: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firecms/collection_editor",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.33",
   "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.31",
-    "@firecms/schema_inference": "^3.0.0-alpha.31"
+    "@firecms/data_import": "^3.0.0-alpha.33",
+    "@firecms/schema_inference": "^3.0.0-alpha.33",
+    "json5": "^2.2.3",
+    "prism-react-renderer": "^2.3.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -76,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "50f21001373521c63e1eea47f551037eb9e4d0c9"
+  "gitHead": "6d5339ab786c9e239ff98da651fde4e4f4879f21"
 }

package/src/ConfigControllerProvider.tsx

@@ -10,12 +10,12 @@ import {
     User,
     useSnackbarController
 } from "@firecms/core";
-import { CollectionEditorDialog } from "./components/collection_editor/CollectionEditorDialog";
+import { CollectionEditorDialog } from "./ui/collection_editor/CollectionEditorDialog";
 import { useNavigate } from "react-router";
 import { CollectionEditorController } from "./types/collection_editor_controller";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { CollectionInference } from "./types/collection_inference";
-import { PropertyFormDialog } from "./components/collection_editor/PropertyEditView";
+import { PropertyFormDialog } from "./ui/collection_editor/PropertyEditView";
 import { PersistedCollection } from "./types/persisted_collection";
 
 export const ConfigControllerContext = React.createContext<CollectionsConfigController>({} as any);

package/src/index.ts

@@ -30,5 +30,5 @@ export type {
     CollectionInference
 } from "./types/collection_inference";
 
-export { MissingReferenceWidget } from "./components/MissingReferenceWidget";
-export * from "./components/collection_editor/util";
+export { MissingReferenceWidget } from "./ui/MissingReferenceWidget";
+export * from "./ui/collection_editor/util";

package/src/{components → ui}/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -7,28 +7,31 @@ import {
     Button,
     CircularProgress,
     cn,
+    CodeIcon,
     DebouncedTextField,
     defaultBorderMixin,
     EntityCollection,
     ErrorBoundary,
-    PropertyConfig,
+    IconButton,
     isPropertyBuilder,
     makePropertiesEditable,
     Paper,
     Properties,
     Property,
+    PropertyConfig,
     PropertyOrBuilder,
     Tooltip,
     Typography,
     useLargeLayout,
     User,
-    useSnackbarController,
+    useSnackbarController
 } from "@firecms/core";
 
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "./util";
 import { OnPropertyChangedParams, PropertyForm, PropertyFormDialog } from "./PropertyEditView";
 import { PropertyTree } from "./PropertyTree";
 import { PersistedCollection } from "../../types/persisted_collection";
+import { GetCodeDialog } from "./GetCodeDialog";
 
 type CollectionEditorFormProps = {
     showErrors: boolean;
@@ -81,6 +84,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 +116,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 +126,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 +136,7 @@ export function CollectionPropertiesEditorForm({
                             acc[propertyKey] = newCollection.properties[propertyKey];
                             return acc;
                         }, {} as { [key: string]: PropertyOrBuilder }),
-                        ...values.properties,
+                        ...values.properties
                     };
                     const updatedPropertiesOrder = [
                         ...newPropertyKeys,
@@ -323,13 +327,21 @@ export function CollectionPropertiesEditorForm({
                     </div>}
 
                     <div className="ml-1 mt-2 flex flex-row gap-2">
+                        <Tooltip title={"Get the code for 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 +470,11 @@ export function CollectionPropertiesEditorForm({
                 collectionEditable={collectionEditable}
                 existingPropertyKeys={values.propertiesOrder as string[]}/>
 
+            <GetCodeDialog
+                collection={values}
+                open={codeDialogOpen}
+                onOpenChange={setCodeDialogOpen}/>
+
         </>
     );
 }

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -0,0 +1,118 @@
+import {
+    Button,
+    ContentCopyIcon,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    EntityCollection,
+    Typography,
+    useSnackbarController
+} from "@firecms/core";
+import React from "react";
+import JSON5 from "json5";
+import { Highlight, themes } from "prism-react-renderer"
+import { camelCase } from "./utils/strings";
+
+export function GetCodeDialog({ collection, onOpenChange, open }: { onOpenChange: (open: boolean) => void, collection: any, open: any }) {
+
+    const snackbarController = useSnackbarController();
+
+    const code = "const " + camelCase(collection.name) + "Collection = " + JSON5.stringify(collectionToCode(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 text-sm"}>
+        {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line })}>
+                {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token })} />
+                ))}
+            </div>
+        ))}
+      </pre>
+                )}
+            </Highlight>
+
+        </DialogContent>
+        <DialogActions>
+            <Button
+                variant={"text"}
+                size={"small"}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    snackbarController.open({
+                        type: "success",
+                        message: `Copied}`
+                    })
+                    return navigator.clipboard.writeText(code);
+                }}>
+                <ContentCopyIcon size={"small"}/>
+                Copy to clipboard
+            </Button>
+            <Button onClick={() => onOpenChange(false)}>Close</Button>
+        </DialogActions>
+    </Dialog>;
+}
+
+function collectionToCode(collection: EntityCollection): object {
+
+    const propertyCleanup = (property: any) => {
+
+        const updatedProperty = {
+            ...property
+        };
+
+        delete updatedProperty.fromBuilder;
+        delete updatedProperty.resolved;
+        delete updatedProperty.propertiesOrder;
+        delete updatedProperty.editable;
+
+        if (updatedProperty.type === "map") {
+            return {
+                ...updatedProperty,
+                properties: updatedProperty.properties.map(propertyCleanup)
+            }
+        }
+        return updatedProperty;
+    }
+
+    return {
+        name: collection.name,
+        singularName: collection.singularName,
+        description: collection.description,
+        path: collection.path,
+        editable: true,
+        collectionGroup: collection.collectionGroup,
+        alias: collection.alias,
+        icon: collection.icon,
+        group: collection.group,
+        customId: collection.customId,
+        initialFilter: collection.initialFilter,
+        initialSort: collection.initialSort,
+        properties: Object.entries(collection.properties)
+            .map(([key, value]) => ({
+                [key]: propertyCleanup(value)
+            }))
+            .reduce((a, b) => ({ ...a, ...b }), {}),
+        subcollections: (collection.subcollections ?? []).map(collectionToCode)
+    }
+
+}

package/src/{components → ui}/collection_editor/PropertyFieldPreview.tsx

@@ -92,10 +92,6 @@ export function PropertyFieldPreview({
                             </Typography>
                         </ErrorBoundary>
 
-                        {disabled && <div
-                            className="text-xs h-3 ml-0.5">
-                            <RemoveCircleIcon color={"disabled"}/>
-                        </div>}
                     </div>
                 </div>
 

package/src/{components → ui}/collection_editor/PropertyTree.tsx

@@ -80,7 +80,7 @@ export function PropertyTree<M extends {
                                 // .filter((propertyKey) => Boolean(properties[propertyKey]))
                                 .map((propertyKey: string, index: number) => {
                                     const property = properties[propertyKey] as PropertyOrBuilder;
-                                    const additionalField = additionalFields?.find(field => field.id === propertyKey);
+                                    const additionalField = additionalFields?.find(field => field.key === propertyKey);
 
                                     if (!property && !additionalField) {
                                         console.warn(`Property ${propertyKey} not found in properties or additionalFields`);

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/useCollectionEditorPlugin.tsx

@@ -2,16 +2,16 @@ import React, { useCallback } from "react";
 import { EntityCollection, FireCMSPlugin, makePropertiesEditable, User } from "@firecms/core";
 import { ConfigControllerProvider } from "./ConfigControllerProvider";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
-import { EditorCollectionAction } from "./components/EditorCollectionAction";
-import { HomePageEditorCollectionAction } from "./components/HomePageEditorCollectionAction";
-import { NewCollectionCard } from "./components/NewCollectionCard";
+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 "./components/RootCollectionSuggestions";
+import { RootCollectionSuggestions } from "./ui/RootCollectionSuggestions";
 import { joinCollectionLists } from "./utils/join_collections";
-import { CollectionViewHeaderAction } from "./components/CollectionViewHeaderAction";
-import { PropertyAddColumnComponent } from "./components/PropertyAddColumnComponent";
+import { CollectionViewHeaderAction } from "./ui/CollectionViewHeaderAction";
+import { PropertyAddColumnComponent } from "./ui/PropertyAddColumnComponent";
 
 export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
 

package/src/utils/join_collections.ts

@@ -96,10 +96,18 @@ function mergePropertyOrBuilder(target: Property, source: PropertyOrBuilder): Pr
 
 function getCollectionKeys(collection: EntityCollection) {
     if (collection.propertiesOrder && collection.propertiesOrder.length > 0) {
-        return collection.propertiesOrder;
+        const propertiesOrder = collection.propertiesOrder;
+        if (collection.additionalFields) {
+            collection.additionalFields.forEach((field) => {
+                if (!propertiesOrder.includes(field.key)) {
+                    propertiesOrder.push(field.key);
+                }
+            });
+        }
+        return propertiesOrder;
     }
     return [
         ...Object.keys(collection.properties),
-        ...(collection.additionalFields ?? [])?.map(f => f.id)
+        ...(collection.additionalFields ?? [])?.map(f => f.key)
     ];
 }