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]

userEditable is optional and something we are probably going to deprecate, shall we just not include it in the example?

[triozer]

It is not optional yet:

/**
 * Any kind of collection field definition that was created by a plugin and is
 * supported by the API.
 */
type ManagedCollectionField = SupportedCollectionField & {
    /** Is the user able to edit the field within the UI. */
    userEditable: boolean;
};

[jonastreub]

Oh no. Let's make it optional ASAP

[triozer]

Mhhh, actually, I think we should use the type

export type EditableManagedCollectionField = SupportedCollectionField &
    Partial<Pick<ManagedCollectionField, "userEditable">>

[triozer]

But it is not exported by framer-plugin

[jonastreub]

In Safari just clicking the field toggle button results in the text being selected, making it clear it isn't actually a button

[jonastreub]

Because there is only a single plain text field its impossible to QA if the slug field selector works as expected when there are multiple options

[jonastreub]

Last few details. Getting really close now. Great work 👏

[huntercaron]

lets move this into framer.css as "framer-hide-scrollbar"

[huntercaron]

into framer.css as "framer-scroll-fade-vertical"

[huntercaron]

not in use

[triozer]

oh no, this is the one in use not the .scroll-fade

[huntercaron]

inbetween the two states there is this inbetween size that makes it feel jumpy

[triozer]

In Safari just clicking the field toggle button results in the text being selected, making it clear it isn't actually a button

@jonastreub fixed this by making it a real button (will benefit of accessibility too)

Because there is only a single plain text field its impossible to QA if the slug field selector works as expected when there are multiple options

I added a new plain text field to categories!

[jonastreub]

Those were the last few nits code wise. Stellar work 👏

[jonastreub]

Just QA'd and it works flawlessly now ❤️

[triozer]

inbetween the two states there is this inbetween size that makes it feel jumpy

cc @huntercaron using useEffect instead of useLayoutEffect seems to fix this!