Clean up CMS Starter

Move all styles to App.css. Drop unnecessary tabIndex. Use
ManagedCollectionFieldInput instead of deprecated
EditableManagedCollectionField. Other minor fixes.

Author: alecmev

starters/cms/src/App.css

@@ -24,8 +24,17 @@ form {
     top: 0;
 }
 
-.field-input {
+select {
     width: 100%;
+}
+
+select:disabled,
+input[type="text"]:disabled,
+.ignored {
+    opacity: 0.5;
+}
+
+.mapping select {
     flex-shrink: 1;
 }
 
@@ -88,10 +97,6 @@ form {
     color: var(--framer-color-text-secondary);
 }
 
-.setup select {
-    width: 100%;
-}
-
 .mapping {
     padding-bottom: 0;
 }
@@ -130,10 +135,6 @@ form {
     gap: 8px;
 }
 
-.mapping .source-field[aria-disabled="true"] {
-    opacity: 0.5;
-}
-
 .mapping .source-field:focus-visible {
     outline: none;
     box-shadow: inset 0 0 0 1px var(--framer-color-tint);
@@ -147,14 +148,18 @@ form {
     box-shadow: none;
 }
 
-[data-framer-theme=light] .mapping .source-field input[type="checkbox"]:not(:checked) {
+[data-framer-theme="light"] .mapping .source-field input[type="checkbox"]:not(:checked) {
     background: #ccc;
 }
 
-[data-framer-theme=dark] .mapping .source-field input[type="checkbox"]:not(:checked) {
+[data-framer-theme="dark"] .mapping .source-field input[type="checkbox"]:not(:checked) {
     background: #666;
 }
 
+.mapping input[type="text"] {
+    width: 100%;
+}
+
 .mapping footer {
     position: sticky;
     bottom: 0;
@@ -178,3 +183,7 @@ form {
     background: linear-gradient(to bottom, transparent, var(--framer-color-bg));
     pointer-events: none;
 }
+
+.mapping footer > button {
+    text-transform: capitalize;
+}

starters/cms/src/FieldMapping.tsx

@@ -1,26 +1,30 @@
-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
+    isIgnored: boolean
     onToggleDisabled: (fieldId: string) => void
     onNameChange: (fieldId: string, name: string) => void
 }
 
-function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled, onNameChange }: FieldMappingRowProps) {
+function FieldMappingRow({
+    field,
+    originalFieldName,
+    isIgnored,
+    onToggleDisabled,
+    onNameChange,
+}: FieldMappingRowProps) {
     return (
         <>
             <button
                 type="button"
-                className="source-field"
-                aria-disabled={disabled}
+                className={`source-field ${isIgnored ? "ignored" : ""}`}
                 onClick={() => onToggleDisabled(field.id)}
-                tabIndex={0}
             >
-                <input type="checkbox" checked={!disabled} tabIndex={-1} readOnly />
+                <input type="checkbox" checked={!isIgnored} tabIndex={-1} readOnly />
                 <span>{originalFieldName ?? field.id}</span>
             </button>
             <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none">
@@ -35,8 +39,7 @@ function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled,
             </svg>
             <input
                 type="text"
-                style={{ width: "100%", opacity: disabled ? 0.5 : 1 }}
-                disabled={disabled}
+                disabled={isIgnored}
                 placeholder={field.id}
                 value={field.name}
                 onChange={event => onNameChange(field.id, event.target.value)}
@@ -50,7 +53,7 @@ function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled,
     )
 }
 
-const initialManagedCollectionFields: EditableManagedCollectionField[] = []
+const initialManagedCollectionFields: ManagedCollectionFieldInput[] = []
 const initialFieldIds: ReadonlySet<string> = new Set()
 
 interface FieldMappingProps {
@@ -68,7 +71,7 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
 
     const [possibleSlugFields] = useState(() => dataSource.fields.filter(field => field.type === "string"))
 
-    const [selectedSlugField, setSelectedSlugField] = useState<EditableManagedCollectionField | null>(
+    const [selectedSlugField, setSelectedSlugField] = useState<ManagedCollectionFieldInput | null>(
         possibleSlugFields.find(field => field.id === initialSlugFieldId) ?? possibleSlugFields[0] ?? null
     )
 
@@ -204,23 +207,17 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
                             key={`field-${field.id}`}
                             field={field}
                             originalFieldName={dataSource.fields.find(sourceField => sourceField.id === field.id)?.name}
-                            disabled={ignoredFieldIds.has(field.id)}
+                            isIgnored={ignoredFieldIds.has(field.id)}
                             onToggleDisabled={toggleFieldDisabledState}
                             onNameChange={changeFieldName}
                         />
                     ))}
                 </div>
 
                 <footer>
-                    <hr className="sticky-top" />
-                    <button disabled={isSyncing} tabIndex={0}>
-                        {isSyncing ? (
-                            <div className="framer-spinner" />
-                        ) : (
-                            <span>
-                                Import <span style={{ textTransform: "capitalize" }}>{dataSourceName}</span>
-                            </span>
-                        )}
+                    <hr />
+                    <button disabled={isSyncing}>
+                        {isSyncing ? <div className="framer-spinner" /> : `Import ${dataSourceName}`}
                     </button>
                 </footer>
             </form>

starters/cms/src/data.ts

@@ -1,5 +1,5 @@
 import {
-    type EditableManagedCollectionField,
+    type ManagedCollectionFieldInput,
     type FieldDataInput,
     framer,
     type ManagedCollection,
@@ -13,7 +13,7 @@ export const PLUGIN_KEYS = {
 
 export interface DataSource {
     id: string
-    fields: readonly EditableManagedCollectionField[]
+    fields: readonly ManagedCollectionFieldInput[]
     items: FieldDataInput[]
 }
 
@@ -44,7 +44,7 @@ export async function getDataSource(dataSourceId: string, abortSignal?: AbortSig
     const dataSource = await dataSourceResponse.json()
 
     // Map your source fields to supported field types in Framer
-    const fields: EditableManagedCollectionField[] = []
+    const fields: ManagedCollectionFieldInput[] = []
     for (const field of dataSource.fields) {
         switch (field.type) {
             case "string":
@@ -83,9 +83,9 @@ export async function getDataSource(dataSourceId: string, abortSignal?: AbortSig
 }
 
 export function mergeFieldsWithExistingFields(
-    sourceFields: readonly EditableManagedCollectionField[],
-    existingFields: readonly EditableManagedCollectionField[]
-): EditableManagedCollectionField[] {
+    sourceFields: readonly ManagedCollectionFieldInput[],
+    existingFields: readonly ManagedCollectionFieldInput[]
+): ManagedCollectionFieldInput[] {
     return sourceFields.map(sourceField => {
         const existingField = existingFields.find(existingField => existingField.id === sourceField.id)
         if (existingField) {
@@ -98,8 +98,8 @@ export function mergeFieldsWithExistingFields(
 export async function syncCollection(
     collection: ManagedCollection,
     dataSource: DataSource,
-    fields: readonly EditableManagedCollectionField[],
-    slugField: EditableManagedCollectionField
+    fields: readonly ManagedCollectionFieldInput[],
+    slugField: ManagedCollectionFieldInput
 ) {
     const sanitizedFields = fields.map(field => ({
         ...field,