Better CMS Starter

starters/cms/public/data/articles.json

@@ -1,56 +1,68 @@
 {
     "id": "articles",
     "fields": [
+        { "name": "Id", "type": "string" },
         { "name": "Title", "type": "string" },
         { "name": "Content", "type": "formattedText" },
         { "name": "Reading Time", "type": "number" },
-        { "name": "Featured", "type": "boolean" }
+        { "name": "Featured", "type": "boolean" },
+        { "name": "Categories", "type": "multiCollectionReference", "dataSourceId": "categories" }
     ],
     "items": [
         {
+            "Id": { "type": "string", "value": "1" },
             "Title": { "type": "string", "value": "Getting Started" },
             "Reading Time": { "type": "number", "value": 3 },
             "Featured": { "type": "boolean", "value": true },
             "Content": {
                 "type": "formattedText",
                 "value": "Learn how to set up content fields, add CMS content to your canvas, and create pages that automatically populate with your data. With the right setup, you can quickly build index and detail pages for your collection."
-            }
+            },
+            "Categories": { "type": "multiCollectionReference", "value": ["1", "2"] }
         },
         {
+            "Id": { "type": "string", "value": "2" },
             "Title": { "type": "string", "value": "Latest Updates" },
             "Reading Time": { "type": "number", "value": 2 },
             "Featured": { "type": "boolean", "value": false },
             "Content": {
                 "type": "formattedText",
                 "value": "We’ve added powerful new features including reference fields and filtering capabilities for your collections. These updates allow you to keep content in a single collection while customizing how it’s presented across different pages."
-            }
+            },
+            "Categories": { "type": "multiCollectionReference", "value": ["3"] }
         },
         {
+            "Id": { "type": "string", "value": "3" },
             "Title": { "type": "string", "value": "Styling Elements" },
             "Reading Time": { "type": "number", "value": 4 },
             "Featured": { "type": "boolean", "value": false },
             "Content": {
                 "type": "formattedText",
                 "value": "Latest improvements to the canvas and layer panel make styling and layout work easier than ever. New features include enhanced component controls and automatic tinting support."
-            }
+            },
+            "Categories": { "type": "multiCollectionReference", "value": ["3"] }
         },
         {
+            "Id": { "type": "string", "value": "4" },
             "Title": { "type": "string", "value": "Importing Content" },
             "Reading Time": { "type": "number", "value": 6 },
             "Featured": { "type": "boolean", "value": false },
             "Content": {
                 "type": "formattedText",
                 "value": "Learn how to prepare your CSV file for import, including formatting for rich text, images, dates, colors, and toggle fields. Ensure each field in your CSV has a matching field in your CMS collection with the same name and compatible data type."
-            }
+            },
+            "Categories": { "type": "multiCollectionReference", "value": ["3"] }
         },
         {
+            "Id": { "type": "string", "value": "5" },
             "Title": { "type": "string", "value": "Best Practices" },
             "Reading Time": { "type": "number", "value": 8 },
             "Featured": { "type": "boolean", "value": true },
             "Content": {
                 "type": "formattedText",
                 "value": "Choose compelling topics based on audience needs and industry trends, while organizing your content with clear structure using proper HTML tags. Consider adding pagination for extensive content lists to enhance performance and improve SEO by reducing load times."
-            }
+            },
+            "Categories": { "type": "multiCollectionReference", "value": ["3"] }
         }
     ]
 }

starters/cms/public/data/categories.json

@@ -1,27 +1,32 @@
 {
     "id": "categories",
     "fields": [
+        { "name": "Id", "type": "string" },
         { "name": "Title", "type": "string" },
         { "name": "Description", "type": "string" },
         { "name": "Color", "type": "color" }
     ],
     "items": [
         {
+            "Id": { "type": "string", "value": "1" },
             "Title": { "type": "string", "value": "CMS" },
             "Description": { "type": "string", "value": "Content Management System" },
             "Color": { "type": "color", "value": "orange" }
         },
         {
+            "Id": { "type": "string", "value": "2" },
             "Title": { "type": "string", "value": "Basics" },
             "Description": { "type": "string", "value": "Basic content management" },
             "Color": { "type": "color", "value": "red" }
         },
         {
+            "Id": { "type": "string", "value": "3" },
             "Title": { "type": "string", "value": "Updates" },
             "Description": { "type": "string", "value": "Updates to the CMS" },
             "Color": { "type": "color", "value": "blue" }
         },
         {
+            "Id": { "type": "string", "value": "4" },
             "Title": { "type": "string", "value": "Pro Tips" },
             "Description": { "type": "string", "value": "Tips for using the CMS" },
             "Color": { "type": "color", "value": "green" }

starters/cms/src/FieldMapping.tsx

@@ -1,16 +1,24 @@
-import { type EditableManagedCollectionField, framer, type ManagedCollection } from "framer-plugin"
+import { type ManagedCollectionFieldInput, framer, type ManagedCollection } from "framer-plugin"
 import { useEffect, useState } from "react"
 import { type DataSource, dataSourceOptions, mergeFieldsWithExistingFields, syncCollection } from "./data"
 
 interface FieldMappingRowProps {
-    field: EditableManagedCollectionField
+    field: ManagedCollectionFieldInput
     originalFieldName: string | undefined
     disabled: boolean
     onToggleDisabled: (fieldId: string) => void
     onNameChange: (fieldId: string, name: string) => void
+    style?: React.CSSProperties
 }
 
-function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled, onNameChange }: FieldMappingRowProps) {
+function FieldMappingRow({
+    field,
+    originalFieldName,
+    disabled,
+    onToggleDisabled,
+    onNameChange,
+    style,
+}: FieldMappingRowProps) {
     return (
         <>
             <button
@@ -19,6 +27,7 @@ function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled,
                 aria-disabled={disabled}
                 onClick={() => onToggleDisabled(field.id)}
                 tabIndex={0}
+                style={style}
             >
                 <input type="checkbox" checked={!disabled} tabIndex={-1} readOnly />
                 <span>{originalFieldName ?? field.id}</span>
@@ -27,15 +36,15 @@ function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled,
                 <path
                     fill="transparent"
                     stroke="#999"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="1.5"
                     d="m2.5 7 3-3-3-3"
                 />
             </svg>
             <input
                 type="text"
-                style={{ width: "100%", opacity: disabled ? 0.5 : 1 }}
+                style={{ width: "100%", opacity: disabled ? 0.5 : 1, ...style }}
                 disabled={disabled}
                 placeholder={field.id}
                 value={field.name}
@@ -50,8 +59,10 @@ function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled,
     )
 }
 
-const initialManagedCollectionFields: EditableManagedCollectionField[] = []
-const initialFieldIds: ReadonlySet<string> = new Set()
+const initialManagedCollectionFields: ManagedCollectionFieldInput[] = []
+
+const isMissingReferenceField = (field: ManagedCollectionFieldInput) =>
+    (field.type === "multiCollectionReference" || field.type === "collectionReference") && !field.collectionId
 
 interface FieldMappingProps {
     collection: ManagedCollection
@@ -68,12 +79,25 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
 
     const [possibleSlugFields] = useState(() => dataSource.fields.filter(field => field.type === "string"))
 
-    const [selectedSlugField, setSelectedSlugField] = useState<EditableManagedCollectionField | null>(
-        possibleSlugFields.find(field => field.id === initialSlugFieldId) ?? possibleSlugFields[0] ?? null
+    const [selectedSlugField, setSelectedSlugField] = useState<ManagedCollectionFieldInput | null>(
+        possibleSlugFields.find(field => field.id === initialSlugFieldId) ??
+            dataSource.slugField ??
+            possibleSlugFields[0] ??
+            null
     )
 
     const [fields, setFields] = useState(initialManagedCollectionFields)
-    const [ignoredFieldIds, setIgnoredFieldIds] = useState(initialFieldIds)
+    const [ignoredFieldIds, setIgnoredFieldIds] = useState(() => {
+        const initialFieldIds = new Set()
+
+        for (const field of dataSource.fields) {
+            if (isMissingReferenceField(field)) {
+                initialFieldIds.add(field.id)
+            }
+        }
+
+        return initialFieldIds
+    })
 
     const dataSourceName = dataSourceOptions.find(option => option.id === dataSource.id)?.name ?? dataSource.id
 
@@ -85,7 +109,9 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
             .then(collectionFields => {
                 if (abortController.signal.aborted) return
 
-                setFields(mergeFieldsWithExistingFields(dataSource.fields, collectionFields))
+                setFields(
+                    mergeFieldsWithExistingFields(dataSource.fields, collectionFields as ManagedCollectionFieldInput[])
+                )
 
                 const existingFieldIds = new Set(collectionFields.map(field => field.id))
                 const ignoredFields = dataSource.fields.filter(sourceField => !existingFieldIds.has(sourceField.id))
@@ -202,11 +228,18 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
                     {fields.map(field => (
                         <FieldMappingRow
                             key={`field-${field.id}`}
-                            field={field}
+                            field={{
+                                ...field,
+                                name: isMissingReferenceField(field) ? "Missing Collection" : field.name,
+                            }}
                             originalFieldName={dataSource.fields.find(sourceField => sourceField.id === field.id)?.name}
                             disabled={ignoredFieldIds.has(field.id)}
-                            onToggleDisabled={toggleFieldDisabledState}
+                            onToggleDisabled={() => {
+                                if (isMissingReferenceField(field)) return
+                                toggleFieldDisabledState(field.id)
+                            }}
                             onNameChange={changeFieldName}
+                            style={isMissingReferenceField(field) ? { cursor: "not-allowed" } : {}}
                         />
                     ))}
                 </div>