diff --git a/examples/cms-starter/datasources/articles.json b/examples/cms-starter/datasources/articles.json index 680b9241..7f4c751f 100644 --- a/examples/cms-starter/datasources/articles.json +++ b/examples/cms-starter/datasources/articles.json @@ -28,6 +28,9 @@ "type": "enum", "options": ["draft", "published", "archived"] }, + "Featured": { + "type": "boolean" + }, "Related Articles": { "type": "reference", "reference": "articles", @@ -44,7 +47,8 @@ "Reading time": 5, "Status": "published", "Content": "
...", - "Related Articles": ["getting-started"] + "Related Articles": ["getting-started"], + "Featured": true }, { "Slug": "whats-new", @@ -55,7 +59,8 @@ "Reading time": 5, "Status": "published", "Content": "You can choose to set up different types of input fields depending on your content...
This quality update brings canvas and layer panel improvements...
", - "Related Articles": ["getting-started"] + "Related Articles": ["getting-started"], + "Featured": false }, { "Slug": "importing-content", @@ -77,7 +83,8 @@ "Reading time": 5, "Status": "published", "Content": "Make sure your file is exported as a \"CSV\" file...
", - "Related Articles": ["getting-started"] + "Related Articles": ["getting-started"], + "Featured": false }, { "Slug": "best-practices", @@ -88,7 +95,8 @@ "Reading time": 5, "Status": "draft", "Content": "Use analytics tools to understand demographic data and user behavior...
", - "Related Articles": ["getting-started"] + "Related Articles": ["getting-started"], + "Featured": true } ] } diff --git a/examples/cms-starter/src/App.css b/examples/cms-starter/src/App.css index 5ec6ea77..eead4822 100644 --- a/examples/cms-starter/src/App.css +++ b/examples/cms-starter/src/App.css @@ -42,3 +42,135 @@ main { [data-framer-theme="dark"] input[type="checkbox"]:checked { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+PHBhdGggZD0iTSAzIDYgTCA1IDggTCA5IDQiIGZpbGw9InRyYW5zcGFyZW50IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMmIyYjJiIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IiI+PC9wYXRoPjwvc3ZnPg=="); } + +.field-mapping-container { + display: flex; + flex-direction: column; + height: 100%; + gap: 10px; + padding: 0 15px; +} + +.field-mapping-form { + display: flex; + flex-direction: column; + flex: 1; + gap: 10px; + width: 100%; +} + +.divider { + height: 1px; + border-bottom: 1px solid var(--framer-color-divider); +} + +.sticky-divider { + composes: divider; + position: sticky; + top: 0; +} + +.field-grid { + display: grid; + grid-template-columns: 1fr 8px 1fr 1fr; + gap: 10px; + margin-bottom: auto; + align-items: center; + overflow: hidden; + color: var(--framer-color-text-tertiary); +} + +.column-span-2 { + grid-column: span 2 / span 2; +} + +.column-row { + display: flex; + flex-direction: row; + align-items: center; + white-space: nowrap; + height: 30px; + padding: 0px 10px; + font-size: 12px; + color: var(--framer-color-text); + background-color: var(--framer-color-bg-tertiary); + border-radius: 8px; + cursor: pointer; + gap: 8px; + user-select: none; +} + +.column-row[aria-disabled="true"] { + opacity: 0.5; +} + +.column-row input[type="checkbox"] { + cursor: pointer; +} + +.field-slug-label { + display: flex; + flex-direction: column; + width: 100%; + justify-content: space-between; + gap: 4px; + color: var(--framer-color-text-tertiary); +} + +.field-input { + width: 100%; + flex-shrink: 1; +} + +.field-input--disabled { + pointer-events: none; + user-select: none; +} + +.sticky-footer { + position: sticky; + bottom: 0; + left: 0; + width: 100%; + background-color: var(--framer-color-bg); + padding-bottom: 15px; + margin-top: auto; + display: flex; + flex-direction: column; + gap: 10px; +} + +.sticky-footer hr { + margin-bottom: 5px; +} + +.intro-container { + display: flex; + flex-direction: column; + gap: 10px; + padding: 0 15px 15px; + width: 100%; +} + +.collection-form { + display: flex; + flex-direction: column; + gap: 10px; + width: 100%; +} + +.collection-label { + display: flex; + flex-direction: row; + align-items: center; + height: 30px; + width: 100%; + justify-content: space-between; + padding-left: 15px; + color: var(--framer-color-text-tertiary); +} + +.collection-select { + width: 164px; + text-transform: capitalize; +} diff --git a/examples/cms-starter/src/App.tsx b/examples/cms-starter/src/App.tsx index 309ca171..3457e8b3 100644 --- a/examples/cms-starter/src/App.tsx +++ b/examples/cms-starter/src/App.tsx @@ -1,217 +1,19 @@ -import { CollectionItemData, framer, ManagedCollectionField } from "framer-plugin" +import { framer } from "framer-plugin" import "./App.css" -import { Fragment, useLayoutEffect, useMemo, useState } from "react" -import { DataSource, DataSourceFieldType, getDataSources, listDataSourcesIds } from "./data" - -// Plugin keys -const PLUGIN_PREFIX = "cms_starter" -const LOCAL_STORAGE_LAST_LAUNCH_KEY = `${PLUGIN_PREFIX}.lastLaunched` - -const PLUGIN_COLLECTION_SYNC_REFERENCE_KEY = `collectionSyncReference` -const PLUGIN_COLLECTION_SYNC_SLUG_KEY = `collectionSyncSlug` - -// Match everything except for letters, numbers and parentheses. -const nonSlugCharactersRegExp = /[^\p{Letter}\p{Number}()]+/gu -// Match leading/trailing dashes, for trimming purposes. -const trimSlugRegExp = /^-+|-+$/gu - -type SupportedCollectionFieldType = ManagedCollectionField["type"] -type SupportedCollectionFieldTypeWithoutReference = Exclude< - SupportedCollectionFieldType, - "collectionReference" | "multiCollectionReference" -> - -/** - * Reference fields are special fields that reference other collections. - */ -interface ReferenceField { - type: "collectionReference" | "multiCollectionReference" - source: string - destination: string | null -} - -/** - * Field configuration for a managed collection field. - */ -interface FieldConfig { - source: { - name: string - type: DataSourceFieldType - ignored: boolean - } - field: ManagedCollectionField | null - reference: ReferenceField | null -} - -/** - * Mapping of data source field types to managed collection field types. - */ -const FIELD_MAPPING: Record
This is a starter for the CMS plugin. Laboris duis dolore culpa culpa sint do. In commodo aliquip
consequat qui sit laboris cillum veniam voluptate irure.
@@ -681,39 +118,17 @@ export function App() {
if (!selectDataSource) {
return (
- Select a collection to sync with Framer.