Add a CMS Starter example

[triozer]

Description

This pull request introduces a new CMS starter example, including updates to various configuration files, data sources, and UI components. The changes aim to set up a basic CMS plugin for Framer, providing a template for further development.

QA

• Clone the repository.
• Navigate to the examples/cms directory.
• Install dependencies and start the plugin locally.
• Adding a new Collection
  • Create a new collection.
  • Open the CMS plugin.
    • Confirm a prompt appears asking to select a collection to sync.
    • Verify you can select from the available collections.
• Managing an existing Collection
  • Open an existing collection that has been set up previously.
  • Click the "Manage" button.
    • Confirm the "Field Mapping UI" is displayed.
    • Verify you can:
      • Change the slug field to a valid string field.
      • Rename fields.
      • Toggle fields on/off by clicking them.
• Syncing an existing Collection
  • Open an existing, pre-configured collection.
  • Click the "Sync" button.
    • Confirm the sync process starts immediately.
    • Verify the collection syncs with the configured data source without further setup.

Additional Checks

• Ensure all UI elements are properly styled and responsive.
• Confirm error states are handled gracefully.
• Verify field changes persist after saving.
• Ensure sync operations display appropriate loading states.

[huntercaron]

Lets call the actual folder "cms" instead of "cms-starter" since its already in a folder called "examples"

[jonastreub]

Sorry if the amount of feedback seems overwhelming. Since this will be the starter kit for many customers I like it to become as simple and clear as we can possibly make it. And it's getting really good already 👏

[jonastreub]

By moving the rendering of Spinner up before SelectDataSource, you don't need to check for !isLoadingConfiguredDataSource

[jonastreub]

Why do you need the logic for hasStartedLoadingDataSource? The value of previouslyConfiguredDataSourceId can't change at runtime, right?

[jonastreub]

Any reason we use hasDataSourceSelected for all layout states except for resizable?

[jonastreub]

I think the assertNever looks way too scary for something that should never happen anyway. You already have an early return when there is no data source

[jonastreub]

Let's remove this

[jonastreub]

Should we show a toast? I think user feedback would be useful

[jonastreub]

Nit. I would move attributes without a value like required all the way up, that way it's easier to read without them hanging in the void.

[jonastreub]

This can be simplified by doing only one operation per line:

const selectedFieldId = event.target.value
const selectedField = possibleSlugFields.find(field => field.id === selectedFieldId)
if (!selectedField) return
setSelectedSlugField(selectedField)

[jonastreub]

This works but it's hard to read. Let's do the same thing again, one operation per line.

const updatedFields = previousFields.map(field => {
  if (field.id !== fieldId) return field
  return {...field, name }
})
setFields(updatedFields)

[jonastreub]

Can we get rid of all special casing here? And by default have empty strings and you can type whatever you want and also manually clear the values, and then on sync we check if the value is valid or different?

[jonastreub]

Nit. Since the Props are so important to the component I would move that next to the component and have other types like FieldMappingStatus be further away. I think it would also be fine to have that type inline since it isn't used anywhere else

[jonastreub]

This effect can run multiple times and it is doing something async, so we need to be able to cancel it when the effect is cleaned up

[jonastreub]

I thin it would be good to mark these as readonly. And I wonder if the defaults should be lifted outside of rendering, so they don't have to be recreated on every render.

// Outside of rendering
type ManagedCollectionFields = readonly ManagedCollectionField[]
const initialManagedCollectionFields: ManagedCollectionFields = []

type FieldId = string
type FieldIds = ReadonlySet<FieldId>
const initialFieldIds: FieldIds = new Set()

// Within the component
const [fields, setFields] = useState<ManagedCollectionFields>(initialManagedCollectionFields)
const [ignoredFieldIds, setIgnoredFieldIds] = useState<FieldIds>(initialFieldIds)

[jonastreub]

I would move the check if there is no initialSlugFieldId to the beginning of the effect, because that means we don't need to do any work

[jonastreub]

And I don't think we need to check for a length of zero. Fine to set an empty array again. No reason to add extra conditionals for

[jonastreub]

Oh wait. I missed that it's &&. So you can't do that

[jonastreub]

I still don't understand this early return though

[jonastreub]

Let's name what's happening here by doing one operation per line with clearly named variables

[jonastreub]

If you create a utility named getId you can use it in a tone of places like this: ignoredFields.map(getId)

[jonastreub]

We have a similar utility in Vekter

[jonastreub]

Let's move this out into a variable, something like:

const fieldsToUpdate = fields.filter(field => !ignoredFieldIds.has(field.id))

[jonastreub]

I would make icon components just the SVG, no other HTML tags. Logo is a generic name, maybe the name of the component could be more descriptive so users will recognize it.

[jonastreub]

This reads like a poem ❤️

[jonastreub]

The icon doesn't seem centered

[jonastreub]

Since the left side acts as a button, I don't think the text should be selectable

[jonastreub]

When typing something in this field and pressing Enter the plugin syncs and automatically closes. That feels unexpected because I thought I was only updating the name.

[jonastreub]

Would be nice if the reading time isn't the same for all items

[jonastreub]

Getting really good 💪