Merge pull request #503 from framer/feature/35469-cms-import-csv

[CSV Plugin] select and create collections from plugin

Author: Nick-Lucas

.vscode/settings.json

@@ -30,22 +30,7 @@
         "**/dist": true,
         "**/yarn.lock": true
     },
-    "editor.codeActionsOnSave": {
-        "source": "never",
-        "source.addMissingImports.ts": "never",
-        "source.fixAll.eslint": "explicit",
-        "source.fixAll.ts": "never",
-        "source.fixAll.tsslint": "never",
-        "source.organizeImports": "never",
-        "source.fixAll": "never",
-        "source.removeUnused.ts": "never",
-        "source.removeUnusedImports": "never",
-        "source.sortImports": "never",
-        "quickfix": "never",
-
-        "source.fixAll.biome": "explicit",
-        "source.organizeImports.biome": "explicit"
-    },
+    "editor.formatOnSave": true,
     "workbench.editorAssociations": {
         "*.svg": "default"
     }

.yarn/cache/framer-plugin-npm-3.9.0-beta.1-d4f15f8a6a-1f58b75683.zip

@@ -14,7 +14,7 @@
     },
     "dependencies": {
         "csv-parse": "^6.1.0",
-        "framer-plugin": "^3.8.0",
+        "framer-plugin": "3.9.0-beta.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "valibot": "^1.2.0"

plugins/csv-import/package.json

@@ -12,6 +12,15 @@
     align-items: center;
 }
 
+.import-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+    width: 100%;
+    position: relative;
+}
+
 .manage-conflicts {
     gap: 10px;
 }
@@ -100,9 +109,74 @@
     color: var(--framer-color-text-tertiary);
 }
 
+.collection-selector {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+    padding-top: 15px;
+}
+
 .collection-select {
+    flex: 1;
+    min-width: 0;
+}
+
+.create-collection-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    flex-shrink: 0;
+}
+
+.create-collection-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s ease;
+}
+
+.create-collection-icon.active {
+    transform: rotate(45deg);
+}
+
+.create-collection-section {
     width: 100%;
-    margin-bottom: 10px;
+    max-height: 0;
+    overflow: hidden;
+    transition:
+        max-height 0.3s ease,
+        opacity 0.3s ease;
+    opacity: 0;
+}
+
+.create-collection-section.expanded {
+    max-height: 100px;
+    opacity: 1;
+}
+
+.create-collection-form {
+    display: flex;
+    gap: 8px;
+    padding-top: 8px;
+    width: 100%;
+}
+
+.create-collection-input {
+    flex: 1;
+    min-width: 0;
+}
+
+.create-collection-submit-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    flex-shrink: 0;
 }
 
 /* Manage conflicts screen */