framer · triozer · Dec 13, 2024 · Dec 13, 2024 · Dec 18, 2024 · Dec 19, 2024
diff --git a/examples/cms-starter/README.md b/examples/cms-starter/README.md
@@ -0,0 +1,17 @@
+# Framer Plugin Template
+
+Run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+And [open in Framer](https://www.framer.com/developers/plugins/quick-start#opening-in-framer).
+
+Learn more: https://www.framer.com/developers/plugins/introduction
diff --git a/examples/cms-starter/datasources/articles.json b/examples/cms-starter/datasources/articles.json
@@ -0,0 +1,49 @@
+{
+    "id": "articles",
+    "fields": {
+        "Title": {
+            "type": "string"
+        },
+        "Content": {
+            "type": "formattedText"
+        },
+        "Reading time": {
+            "type": "number"
+        },
+        "Featured": {
+            "type": "boolean"
+        }
+    },
+    "items": [
+        {
+            "Title": "Getting Started",
+            "Reading time": 5,
+            "Featured": true,
+            "Content": "<h2>Editing Content</h2><blockquote><p>You can choose to set up different types of input fields depending on your content...</p></blockquote>..."
+        },
+        {
+            "Title": "What's New",
+            "Reading time": 5,
+            "Featured": false,
+            "Content": "<h2>Reference Fields</h2>..."
+        },
+        {
+            "Title": "Styling Elements",
+            "Reading time": 5,
+            "Featured": false,
+            "Content": "<h2>Reference Fields</h2>..."
+        },
+        {
+            "Title": "Importing Content",
+            "Reading time": 5,
+            "Featured": false,
+            "Content": "<h2>Prepare your CSV file</h2><p>Make sure your file is exported as a \"CSV\" file...</p>"
+        },
+        {
+            "Title": "Best Practices",
+            "Reading time": 5,
+            "Featured": true,
+            "Content": "<h3>Choose Compelling Topics</h3><p>Use analytics tools to understand demographic data and user behavior...</p>"
+        }
+    ]
+}
diff --git a/examples/cms-starter/datasources/categories.json b/examples/cms-starter/datasources/categories.json
@@ -0,0 +1,29 @@
+{
+    "id": "categories",
+    "fields": {
+        "Title": {
+            "type": "string"
+        },
+        "Color": {
+            "type": "color"
+        }
+    },
+    "items": [
+        {
+            "Title": "CMS",
+            "Color": "orange"
+        },
+        {
+            "Title": "Basics",
+            "Color": "red"
+        },
+        {
+            "Title": "Updates",
+            "Color": "blue"
+        },
+        {
+            "Title": "Pro Tips",
+            "Color": "green"
+        }
+    ]
+}
diff --git a/examples/cms-starter/eslint.config.js b/examples/cms-starter/eslint.config.js
@@ -0,0 +1,25 @@
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import tseslint from "typescript-eslint"
+
+export default tseslint.config(
+    { ignores: ["dist"] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            ecmaVersion: 2022,
+            globals: globals.browser,
+        },
+        plugins: {
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+        },
+    }
+)
diff --git a/examples/cms-starter/framer.json b/examples/cms-starter/framer.json
@@ -0,0 +1,6 @@
+{
+    "id": "72745a",
+    "name": "CMS Starter",
+    "modes": ["configureManagedCollection", "syncManagedCollection"],
+    "icon": "/icon.svg"
+}
diff --git a/examples/cms-starter/index.html b/examples/cms-starter/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>CMS Starter</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>
diff --git a/examples/cms-starter/package.json b/examples/cms-starter/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "cms-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "pack": "npx framer-plugin-tools@latest pack"
+  },
+  "dependencies": {
+    "framer-plugin": "^2",
+    "motion": "^11.13.4",
+    "react": "^18",
+    "react-dom": "^18",
+    "vite-plugin-mkcert": "^1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react-swc": "^3",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "typescript": "^5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5",
+    "vite-plugin-framer": "^1"
+  }
+}
diff --git a/examples/cms-starter/public/icon.svg b/examples/cms-starter/public/icon.svg
diff --git a/examples/cms-starter/src/App.css b/examples/cms-starter/src/App.css
@@ -0,0 +1,153 @@
+/* Your Plugin CSS */
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    padding: 0 15px 15px;
+    height: 100%;
+    gap: 15px;
+}
+
+/* Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+.no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+
+.scroll-fade {
+    flex-shrink: 0;
+    height: 45px;
+    width: 100%;
+    display: block;
+    overflow: visible;
+    z-index: 10;
+    position: absolute;
+    left: 0;
+    bottom: 61px;
+}
+
+[data-framer-theme="light"] .scroll-fade {
+    background: linear-gradient(to bottom, transparent, white);
+}
+
+[data-framer-theme="dark"] .scroll-fade {
+    background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, rgb(17, 17, 17) 97.8%);
+}
+
+[data-framer-theme="dark"] input[type="checkbox"]:checked {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+PHBhdGggZD0iTSAzIDYgTCA1IDggTCA5IDQiIGZpbGw9InRyYW5zcGFyZW50IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMmIyYjJiIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IiI+PC9wYXRoPjwvc3ZnPg==");
+}
+
+.sticky-top {
+    position: sticky;
+    top: 0;
+}
+
+.field-input {
+    width: 100%;
+    flex-shrink: 1;
+}
+
+.column-span-2 {
+    grid-column: span 2 / span 2;
+}
+
+.mapping {
+    padding: 0 15px;
+}
+
+.mapping form {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 10px;
+    width: 100%;
+}
+
+.mapping-fields {
+    display: grid;
+    grid-template-columns: 1fr 8px 1fr;
+    gap: 10px;
+    margin-bottom: auto;
+    align-items: center;
+    overflow: hidden;
+    color: var(--framer-color-text-tertiary);
+}
+
+.mapping .source-field {
+    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;
+}
+
+.mapping .source-field[aria-disabled="true"] {
+    opacity: 0.5;
+}
+
+.mapping .source-field input[type="checkbox"] {
+    cursor: pointer;
+}
+
+.mapping .slug-field {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: space-between;
+    gap: 4px;
+    color: var(--framer-color-text-tertiary);
+}
+
+.mapping 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;
+}
+
+.mapping-footer hr {
+    margin-bottom: 5px;
+}
+
+.setup form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+}
+
+.setup 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);
+}
+
+.setup select {
+    width: 164px;
+    text-transform: capitalize;
+}