Feature/35514 csv import mapping

[Nick-Lucas]

Closes framer/company#35514

Description

• Adds a field mapping view with simple automatic type inference
• Replaces the increasingly complex state management of this plugin with a simple minirouter and more procedural workflows
• Tidies up UI look and feel, fixes bugs with drag and drop detection
• Breaks up some huge files which were becoming difficult to work with

Test files:

jobs.csv
people_added_column.csv
people_duplicate.csv
people_empty.csv
people_missing_slug.csv
people_removed_column.csv
people_reordered.csv
people.csv
people2_changed_column_type.csv
people2_draft.csv
people2_renamed_column.csv
people2_withjob.csv

Testing

Useful synthetic test imports:

• Import people.csv and it works
• Import people.csv and then a variety of scenarios on top, ie.
  • added_column
  • removed_column
  • reordered
  • people2.csv (some overlap with conflicts and some new entries
  • changed column type (we only warn that incompatible data will be skipped, it's up to the user to change their fields model)
  • renamed column (can rebind to the existing column)
• Importing people2_draft.csv sets drafts up correctly
• Importing jobs.csv, manually creating a multireference to your people collection and reference to jobs collection, and importing people2_withjobs.csv correctly links up references
  • Bonus: importing people2_withjobs.csv into a new collection doesn't handle the reference but does create the column
• importing empty csv just rejects
• Customising types
  • New columns can have a selection of compatible column types selected from beyond the inferred type
  • Existing columns do not permit changing the column type

[Nick-Lucas]

/cursor review

[Copilot]

Pull request overview

This PR implements CSV import field mapping with automatic type inference for the Framer plugin. It replaces complex state management with a custom minirouter solution and updates the framer-plugin dependency from beta to stable version.

Key Changes:

• Added field mapping interface with automatic type inference for CSV columns
• Implemented a lightweight routing system (minirouter) to manage plugin views
• Refactored CSV import logic into modular utilities for better maintainability

Reviewed changes

Copilot reviewed 17 out of 23 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
yarn.lock	Updated framer-plugin from 3.9.0-beta.1 to stable 3.9.0
plugins/csv-import/src/utils/typeInference.ts	New utility for inferring field types from CSV data
plugins/csv-import/src/utils/prepareImportPayload.ts	Refactored import payload preparation with field mapping support
plugins/csv-import/src/utils/parseCSV.ts	Extracted CSV parsing logic into dedicated module
plugins/csv-import/src/utils/importCSV.ts	Separated import execution logic
plugins/csv-import/src/utils/fieldReconciliation.ts	Handles field creation and removal operations
plugins/csv-import/src/utils/assert.ts	Custom assertion utility
plugins/csv-import/src/routes/FieldMapper.tsx	New field mapping UI component with type compatibility checking
plugins/csv-import/src/routes/Home.tsx	Home route component
plugins/csv-import/src/routes/ManageConflicts.tsx	Updated to use new import types
plugins/csv-import/src/minirouter.tsx	Custom routing implementation for plugin views
plugins/csv-import/src/main.tsx	Wrapped app with MiniRouterProvider
plugins/csv-import/src/App.tsx	Refactored to use routing and new import flow
plugins/csv-import/src/App.css	Extensive styling additions for field mapper
plugins/csv-import/src/components/SelectCSVFile.tsx	Extracted file selection component
plugins/csv-import/src/components/CollectionSelector.tsx	Minor formatting improvements
plugins/csv-import/src/components/*.tsx	New icon components

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[cursor]

Comment @cursor review or bugbot run to trigger another review on this PR

[Nick-Lucas]

home-rolled minirouter. Makes it much easier to navigate between views in an explicit way while also passing in callbacks to treat views as asynchronous information collection with a promise (see app.tsx)

[Nick-Lucas]

I can't figure out which isAllowedTo key to use here, it seems to be checked in App.tsx but still I'm seeing:

Invoking protected message type "addCollectionFields2" without checking permissions first

[triozer]

Should be Collection.addFields

[Nick-Lucas]

Likely bug in https://github.com/framer/FramerStudio/blob/master/src/plugin-api/src/permissions.ts#L414-L415

should be addCollectionFields2

[Nick-Lucas]

Possible bug here, but may be in vekter: https://github.com/framer/company/issues/35575#issuecomment-3671377441

[Nick-Lucas]

Let's bring the UI design of this in line with Notion as much as possible