feat: flatten adaptor onto external fields

This is a breaking change. Adaptor fields are now accessed directly inline on the external field type.

README.md

@@ -234,33 +234,28 @@ The current DropZone implementation has certain rules and limitations:
 3. You can't drag between DropZones that don't share a parent (or _area_)
 4. Your mouse must be directly over a DropZone for a collision to be detected
 
-## Adaptors
+## External fields
 
-Adaptors can be used to import data from a third-party API, such as a headless CMS.
+External fields can be used to import data from a third-party API, such as a headless CMS.
 
 ### Example
 
-The `external` field type enables us to use an adaptor to query data from a third party API:
+The `external` field type enables us to query data from a third party API:
 
 ```tsx
-const myAdaptor = {
-  name: "My adaptor",
-  fetchList: async () => {
-    const response = await fetch("https://www.example.com/api");
-
-    return {
-      text: response.json().text,
-    };
-  },
-};
-
 const config = {
   components: {
     HeadingBlock: {
       fields: {
         myData: {
           type: "external",
-          adaptor: myAdaptor,
+          fetchList: async () => {
+            const response = await fetch("https://www.example.com/api");
+
+            return {
+              text: response.json().text,
+            };
+          },
         },
       },
       render: ({ myData }) => {
@@ -271,7 +266,7 @@ const config = {
 };
 ```
 
-When the user interacts with this adaptor, they'll be presented with a list of items to choose from. Once they select an item, the value will be mapped onto the prop. In this case, `myData`.
+When the user interacts with this external field, they'll be presented with a list of items to choose from. Once they select an item, the value will be mapped onto the prop. In this case, `myData`.
 
 ## Dynamic prop resolution
 
@@ -317,29 +312,25 @@ const config = {
 };
 ```
 
-##### Combining with adaptors
+##### Combining with external fields
 
-A more advanced pattern is to combine the `resolveData` method with the adaptors to dynamically fetch data when rendering the component.
+A more advanced pattern is to combine the `resolveData` method with `external` fields to dynamically fetch data when rendering the component.
 
 ```tsx
-const myAdaptor = {
-  name: "My adaptor",
-  fetchList: async () => {
-    const response = await fetch("https://www.example.com/api");
-
-    return {
-      id: response.json().id,
-    };
-  },
-};
-
 const config = {
   components: {
     HeadingBlock: {
       fields: {
         myData: {
           type: "external",
-          adaptor: myAdaptor,
+          placeholder: "Select from example.com",
+          fetchList: async () => {
+            const response = await fetch("https://www.example.com/api");
+
+            return {
+              id: response.json().id,
+            };
+          },
         },
         title: {
           type: "text",
@@ -481,14 +472,12 @@ A `Field` represents a user input field shown in the Puck interface.
 
 ### External Fields
 
-External fields can be used to load content from an external content repository, like Strapi.js, using an `Adaptor`.
+External fields can be used to load content from an external content repository, like Strapi.js.
 
 - **type** (`"external"`)
-- **adaptor** (`Adaptor`): Content adaptor responsible for fetching data to show in the table
-  - **name** (`string`): The human-readable name of the adaptor
-  - **fetchList** (`(adaptorParams: object) => object`): Fetch content from a third-party API and return an array
-  - **mapProp** (`(selectedItem: object) => object`): Map the selected item into another shape
-- **adaptorParams** (`object`): Paramaters passed to the adaptor
+- **placeholder** (`string`): A placeholder for the external field button
+- **fetchList** (`() => object`): Fetch content from a third-party API and return an array
+- **mapProp** (`(selectedItem: object) => object`): Map the selected item into another shape
 
 ### Custom Fields
 

apps/demo/config/blocks/Hero/index.tsx

@@ -29,17 +29,15 @@ export const Hero: ComponentConfig<HeroProps> = {
   fields: {
     quote: {
       type: "external",
-      adaptor: {
-        name: "Quotes API",
-        fetchList: async () =>
-          quotes.map((quote, idx) => ({
-            index: idx,
-            title: quote.author,
-            description: quote.content,
-          })),
-        mapProp: (result) => {
-          return { index: result.index, label: result.description };
-        },
+      placeholder: "Select a quote",
+      fetchList: async () =>
+        quotes.map((quote, idx) => ({
+          index: idx,
+          title: quote.author,
+          description: quote.content,
+        })),
+      mapProp: (result) => {
+        return { index: result.index, label: result.description };
       },
       getItemSummary: (item) => item.label,
     },

apps/demo/config/index.tsx

@@ -184,7 +184,7 @@ export const initialData: Record<string, Data> = {
         props: {
           align: "center",
           level: 2,
-          text: "Plugins",
+          text: "Extending Puck",
           padding: "0px",
           size: "xxl",
           id: "Heading-1687296184321",
@@ -198,7 +198,7 @@ export const initialData: Record<string, Data> = {
         type: "Text",
         props: {
           align: "center",
-          text: "Puck can also be extended with plugins and headless CMS content adaptors, transforming Puck into the perfect tool for your Content Ops.",
+          text: "Puck can also be extended with plugins and headless CMS content fields, transforming Puck into the perfect tool for your Content Ops.",
           padding: "0px",
           size: "m",
           id: "Text-1687296579834",
@@ -336,9 +336,9 @@ export const initialData: Record<string, Data> = {
         {
           type: "Card",
           props: {
-            title: "Strapi.js Adaptor",
+            title: "External data",
             description:
-              "Connect your components with existing content from Strapi.js.",
+              "Connect your components with an existing data source, like Strapi.js.",
             icon: "Feather",
             mode: "card",
             id: "Card-4eea28543d13c41c30934c3e4c4c95a75017a89c",
@@ -349,7 +349,7 @@ export const initialData: Record<string, Data> = {
         {
           type: "Card",
           props: {
-            title: "Your custom plugin",
+            title: "Custom plugins",
             description:
               "Create your own plugin to extend Puck for your use case using React.",
             icon: "Feather",

lerna.json

@@ -1,6 +1,5 @@
 {
   "packages": [
-    "packages/adaptor-strapi",
     "packages/core",
     "packages/create-puck-app",
     "packages/plugin-heading-analyzer"