From 0d4e98a5e3a8a11d31b39cb26d6ca39e9ff7e076 Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Thu, 25 Apr 2024 21:55:57 -0600
Subject: [PATCH 01/13] feat: first pass at the updated React Quickstart

---
 apps/embedding/react/new_space_quickstart.mdx | 234 +++++++++---------
 1 file changed, 122 insertions(+), 112 deletions(-)

diff --git a/apps/embedding/react/new_space_quickstart.mdx b/apps/embedding/react/new_space_quickstart.mdx
index 2b149df2c..d68a3e576 100644
--- a/apps/embedding/react/new_space_quickstart.mdx
+++ b/apps/embedding/react/new_space_quickstart.mdx
@@ -23,7 +23,7 @@ Setup your app to look something like this:
    └── index.html
 ├── src/
    └── blueprint.js
-   └── index.js
+   └── index.jsx
 ├── package.json
 ```
 
@@ -43,22 +43,22 @@ Initialize Flatfile to open in a modal. Pass in your `publishableKey` and a new
 
 <CodeGroup>
 
-```javascript src/index.js
+```jsx src/index.jsx
 import ReactDOM from "react-dom/client";
-import { usePortal } from "@flatfile/react";
+import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
 
+const FlatfilePortal = () => {
+  const { openPortal, closePortal } = useFlatfile();
+  return <Sheet config={} />
+};
+
 function App() {
-  const FlatfilePortal = () => {
-    return usePortal({
-      publishableKey: "pk_1234",
-      spaceBody: {
-        namespace: "portal",
-      },
-    });
-  };
-
-  return <FlatfilePortal />;
+  return (
+    <FlatfileProvider publishableKey="pk_1234" config={{ namespace: "portal" }}>
+      <FlatfilePortal />
+    </FlatfileProvider>
+  );
 }
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
@@ -151,23 +151,22 @@ const blueprint = {
 }
 ```
 
-```javascript src/index.js
+```jsx src/index.jsx
 import ReactDOM from "react-dom/client";
-import { usePortal } from "@flatfile/react";
+import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
 
+const FlatfilePortal = () => {
+  const { openPortal, closePortal } = useFlatfile();
+  return <Sheet config={blueprint} />;
+};
+
 function App() {
-  const FlatfilePortal = () => {
-    return usePortal({
-      publishableKey: "pk_1234",
-      spaceBody: {
-        namespace: "portal",
-      },
-      sheet: blueprint,
-    });
-  };
-
-  return <FlatfilePortal />;
+  return (
+    <FlatfileProvider publishableKey="pk_1234" config={{ namespace: "portal" }}>
+      <FlatfilePortal />
+    </FlatfileProvider>
+  );
 }
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
@@ -183,47 +182,37 @@ Finally, let's get the data out of our system and to your destination with `onSu
 Once you add this code, when the submit button is clicked, this will be the place you can egress your data. Learn more about [Egress Out](/guides/egress).
 
 <CodeGroup>
-
-```js public/index.html
-window.onload = function () {
-  FlatFileJavaScript.startFlatfile({
-    publishableKey: "pk_1234",
-    spaceBody: {
-      namespace: "portal",
-    },
-    sheet: blueprint,
-    onSubmit: async ({ sheet }) => {
-      const data = await sheet.allData();
-      console.log("onSubmit", data);
-    },
-  });
-};
-```
-
-```javascript src/index.js
+```jsx src/index.jsx
 import ReactDOM from "react-dom/client";
-import { usePortal } from "@flatfile/react";
+import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
 
+const FlatfilePortal = () => {
+  const { openPortal, closePortal } = useFlatfile();
+  return (
+    <Sheet
+        config={bluprint}
+        onSubmit={
+          async ({ sheet }) => {
+            const data = await sheet.allData();
+            console.log("onSubmit", data);
+          }
+        }
+    />
+  )
+};
+
 function App() {
-  const FlatfilePortal = () => {
-    return usePortal({
-      publishableKey: "pk_1234",
-      spaceBody: {
-        namespace: "portal",
-      },
-      sheet: blueprint,
-      onSubmit: async ({ sheet }) => {
-        const data = await sheet.allData();
-        console.log("onSubmit", data);
-      },
-    });
-  };
-  return <FlatfilePortal />;
+  return (
+    <FlatfileProvider publishableKey="pk_1234" config={{ namespace: "portal" }}>
+      <FlatfilePortal />
+    </FlatfileProvider>
+  ); 
 }
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
+
 ```
 
 </CodeGroup>
@@ -234,82 +223,103 @@ Next, we'll listen for data changes and respond `onRecordHook`,
 
 Once you add this code, when a change occurs, we'll log the entered first name and update the last name to "Rock." You'll immediately see this begin to work when you add or update any records. Learn more about [Handling Data](/guides/handling-data)
 
-```javascript src/index.js
+```jsx src/index.jsx
 import ReactDOM from "react-dom/client";
-import { usePortal } from "@flatfile/react";
+import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
 
+const FlatfilePortal = () => {
+  const { openPortal, closePortal } = useFlatfile();
+  return (
+    <Sheet
+        config={bluprint}
+        onSubmit={
+          async ({ sheet }) => {
+            const data = await sheet.allData();
+            console.log("onSubmit", data);
+          }
+        }
+        onRecordHook={
+          (record) => {
+            const firstName = record.get("firstName");
+            console.log({ firstName });
+            record.set("lastName", "Rock");
+            return record;
+          }
+        },
+    />
+  )
+};
+
 function App() {
-  const FlatfilePortal = () => {
-    return usePortal({
-      publishableKey: "pk_1234",
-      spaceBody: {
-        namespace: "portal",
-      },
-      sheet: blueprint,
-      onSubmit: async ({ sheet }) => {
-        const data = await sheet.allData();
-        console.log("onSubmit", data);
-      },
-      onRecordHook: (record) => {
-        const firstName = record.get("firstName");
-        console.log({ firstName });
-        record.set("lastName", "Rock");
-        return record;
-      },
-    });
-  };
-  return <FlatfilePortal />;
+  return (
+    <FlatfileProvider publishableKey="pk_1234" config={{ namespace: "portal" }}>
+      <FlatfilePortal />
+    </FlatfileProvider>
+  ); 
 }
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
+
 ```
 
 ### 6. Match your brand
 
-By attaching a `themeConfig`, we will now override colors in your Space to match your brand. See all of the options here in the [Theming Reference](/guides/theming).
+By attaching a `theme`, we will now override colors in your Space to match your brand. See all of the options here in the [Theming Reference](/guides/theming).
 
-```javascript src/index.js
+```jsx src/index.jsx
 import ReactDOM from "react-dom/client";
-import { usePortal } from "@flatfile/react";
+import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
 
-function App() {
-  const FlatfilePortal = () => {
-    return usePortal({
-      publishableKey: "pk_1234",
-      spaceBody: {
-        namespace: "portal",
-      },
-      sheet: blueprint,
-      onSubmit: async ({ sheet }) => {
-        const data = await sheet.allData();
-        console.log("onSubmit", data);
-      },
-      onRecordHook: (record) => {
-        const firstName = record.get("firstName");
-        console.log({ firstName });
-        record.set("lastName", "Rock");
-        return record;
-      },
-      themeConfig: {
-        root: {
-          primaryColor: "red",
-          textColor: "white",
-          logo: "https://images.ctfassets.net/hjneo4qi4goj/gL6Blz3kTPdZXWknuIDVx/7bb7c73d93b111ed542d2ed426b42fd5/flatfile.svg",
+const FlatfilePortal = () => {
+  const { openPortal, closePortal } = useFlatfile();
+  return (
+    <Sheet
+        config={bluprint}
+        onSubmit={
+          async ({ sheet }) => {
+            const data = await sheet.allData();
+            console.log("onSubmit", data);
+          }
+        }
+        onRecordHook={
+          (record) => {
+            const firstName = record.get("firstName");
+            console.log({ firstName });
+            record.set("lastName", "Rock");
+            return record;
+          }
         },
-      },
-    });
-  };
-  return <FlatfilePortal />;
+    />
+  )
+};
+
+function App() {
+  return (
+    <FlatfileProvider publishableKey="pk_1234" 
+      config={{ 
+        namespace: "portal", 
+        metadata: {
+          theme: {
+            primaryColor: "red",
+            textColor: "white",
+            logo: "https://images.ctfassets.net/hjneo4qi4goj/gL6Blz3kTPdZXWknuIDVx/7bb7c73d93b111ed542d2ed426b42fd5/flatfile.svg",
+          }
+        }
+      }}>
+      <FlatfilePortal />
+    </FlatfileProvider>
+  ); 
 }
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
+
 ```
 
-### 7. Customize
+### 8. Customize
 
 Continue to customize your importer as needed. For more options, [view the full React integration reference](../reference/advanced).
 

From f7316994f74e255ce58ebecfb6fb918b3de93b6c Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Thu, 25 Apr 2024 22:04:30 -0600
Subject: [PATCH 02/13] feat: fix typos and add openPortal button

---
 apps/embedding/react/new_space_quickstart.mdx | 108 ++++++++++--------
 1 file changed, 61 insertions(+), 47 deletions(-)

diff --git a/apps/embedding/react/new_space_quickstart.mdx b/apps/embedding/react/new_space_quickstart.mdx
index d68a3e576..a5a1a507b 100644
--- a/apps/embedding/react/new_space_quickstart.mdx
+++ b/apps/embedding/react/new_space_quickstart.mdx
@@ -39,7 +39,7 @@ The `package.json` file contains the dependencies and scripts for your applicati
 
 ### 1. Initialize Flatfile
 
-Initialize Flatfile to open in a modal. Pass in your `publishableKey` and a new Space will be created on each page load.
+Initialize Flatfile to open in a modal. Pass in your `publishableKey` to the FlatfileProvider and a new Space will be created on each page load.
 
 <CodeGroup>
 
@@ -49,7 +49,7 @@ import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
 
 const FlatfilePortal = () => {
-  const { openPortal, closePortal } = useFlatfile();
+  const { openPortal } = useFlatfile();
   return <Sheet config={} />
 };
 
@@ -157,8 +157,13 @@ import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
 
 const FlatfilePortal = () => {
-  const { openPortal, closePortal } = useFlatfile();
-  return <Sheet config={blueprint} />;
+  const { openPortal } = useFlatfile();
+  return (
+    <>
+      <button onClick={openPortal}>Open Portal!</button>
+      <Sheet config={blueprint} />
+    </>
+  );
 };
 
 function App() {
@@ -188,17 +193,20 @@ import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
 
 const FlatfilePortal = () => {
-  const { openPortal, closePortal } = useFlatfile();
+  const { openPortal } = useFlatfile();
   return (
-    <Sheet
-        config={bluprint}
-        onSubmit={
-          async ({ sheet }) => {
-            const data = await sheet.allData();
-            console.log("onSubmit", data);
+    <>
+      <button onClick={openPortal}>Open Portal!</button>
+      <Sheet
+          config={blueprint}
+          onSubmit={
+            async ({ sheet }) => {
+              const data = await sheet.allData();
+              console.log("onSubmit", data);
+            }
           }
-        }
-    />
+      />
+    </>
   )
 };
 
@@ -229,25 +237,28 @@ import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
 
 const FlatfilePortal = () => {
-  const { openPortal, closePortal } = useFlatfile();
+  const { openPortal } = useFlatfile();
   return (
-    <Sheet
-        config={bluprint}
-        onSubmit={
-          async ({ sheet }) => {
-            const data = await sheet.allData();
-            console.log("onSubmit", data);
+    <>
+      <button onClick={openPortal}>Open Portal!</button>
+      <Sheet
+          config={blueprint}
+          onSubmit={
+            async ({ sheet }) => {
+              const data = await sheet.allData();
+              console.log("onSubmit", data);
+            }
           }
-        }
-        onRecordHook={
-          (record) => {
-            const firstName = record.get("firstName");
-            console.log({ firstName });
-            record.set("lastName", "Rock");
-            return record;
-          }
-        },
-    />
+          onRecordHook={
+            (record) => {
+              const firstName = record.get("firstName");
+              console.log({ firstName });
+              record.set("lastName", "Rock");
+              return record;
+            }
+          },
+      />
+    </>
   )
 };
 
@@ -274,25 +285,28 @@ import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
 
 const FlatfilePortal = () => {
-  const { openPortal, closePortal } = useFlatfile();
+  const { openPortal } = useFlatfile();
   return (
-    <Sheet
-        config={bluprint}
-        onSubmit={
-          async ({ sheet }) => {
-            const data = await sheet.allData();
-            console.log("onSubmit", data);
-          }
-        }
-        onRecordHook={
-          (record) => {
-            const firstName = record.get("firstName");
-            console.log({ firstName });
-            record.set("lastName", "Rock");
-            return record;
+    <>
+      <button onClick={openPortal}>Open Portal!</button>
+      <Sheet
+          config={blueprint}
+          onSubmit={
+            async ({ sheet }) => {
+              const data = await sheet.allData();
+              console.log("onSubmit", data);
+            }
           }
-        },
-    />
+          onRecordHook={
+            (record) => {
+              const firstName = record.get("firstName");
+              console.log({ firstName });
+              record.set("lastName", "Rock");
+              return record;
+            }
+          },
+      />
+    </>
   )
 };
 

From 8622185cc2a74de8a482e079cf9fb30793dfe878 Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Tue, 7 May 2024 14:12:53 -0600
Subject: [PATCH 03/13] feat: update the flow to be more clear about adding a
 Publishable key

---
 apps/embedding/react/new_space_quickstart.mdx | 114 +++++++++---------
 1 file changed, 59 insertions(+), 55 deletions(-)

diff --git a/apps/embedding/react/new_space_quickstart.mdx b/apps/embedding/react/new_space_quickstart.mdx
index a5a1a507b..3d0d52484 100644
--- a/apps/embedding/react/new_space_quickstart.mdx
+++ b/apps/embedding/react/new_space_quickstart.mdx
@@ -50,12 +50,13 @@ import { blueprint } from "./blueprint";
 
 const FlatfilePortal = () => {
   const { openPortal } = useFlatfile();
-  return <Sheet config={} />
+
+  return <Sheet config={blueprint} />;
 };
 
 function App() {
   return (
-    <FlatfileProvider publishableKey="pk_1234" config={{ namespace: "portal" }}>
+    <FlatfileProvider publishableKey={PUBLiSHABLE_KEY}>
       <FlatfilePortal />
     </FlatfileProvider>
   );
@@ -81,7 +82,7 @@ root.render(<App />);
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@flatfile/react": "^7.3.1",
+    "@flatfile/react": "^7.9.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
@@ -155,6 +156,8 @@ const blueprint = {
 import ReactDOM from "react-dom/client";
 import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
+// Fill in with your real Publishable Key from the Flatfile Dashboard
+const PUBLiSHABLE_KEY = undefined
 
 const FlatfilePortal = () => {
   const { openPortal } = useFlatfile();
@@ -168,7 +171,7 @@ const FlatfilePortal = () => {
 
 function App() {
   return (
-    <FlatfileProvider publishableKey="pk_1234" config={{ namespace: "portal" }}>
+    <FlatfileProvider publishableKey={PUBLiSHABLE_KEY}>
       <FlatfilePortal />
     </FlatfileProvider>
   );
@@ -191,31 +194,32 @@ Once you add this code, when the submit button is clicked, this will be the plac
 import ReactDOM from "react-dom/client";
 import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
+// Fill in with your real Publishable Key from the Flatfile Dashboard
+const PUBLiSHABLE_KEY = undefined
 
 const FlatfilePortal = () => {
-  const { openPortal } = useFlatfile();
+const { openPortal } = useFlatfile();
   return (
-    <>
-      <button onClick={openPortal}>Open Portal!</button>
-      <Sheet
-          config={blueprint}
-          onSubmit={
-            async ({ sheet }) => {
-              const data = await sheet.allData();
-              console.log("onSubmit", data);
-            }
-          }
-      />
-    </>
-  )
+
+  <>
+    <button onClick={openPortal}>Open Portal!</button>
+    <Sheet
+      config={blueprint}
+      // This helper function will make a Workbook action that can be triggered from the UI 
+      onSubmit={async ({ sheet }) => {
+        const data = await sheet.allData();
+        console.log("onSubmit", data);
+      }}
+    />
+  </>) 
 };
 
 function App() {
   return (
-    <FlatfileProvider publishableKey="pk_1234" config={{ namespace: "portal" }}>
+    <FlatfileProvider publishableKey={PUBLiSHABLE_KEY}>
       <FlatfilePortal />
     </FlatfileProvider>
-  ); 
+  );
 }
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
@@ -235,6 +239,8 @@ Once you add this code, when a change occurs, we'll log the entered first name a
 import ReactDOM from "react-dom/client";
 import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
+// Fill in with your real Publishable Key from the Flatfile Dashboard
+const PUBLiSHABLE_KEY = undefined
 
 const FlatfilePortal = () => {
   const { openPortal } = useFlatfile();
@@ -251,8 +257,6 @@ const FlatfilePortal = () => {
           }
           onRecordHook={
             (record) => {
-              const firstName = record.get("firstName");
-              console.log({ firstName });
               record.set("lastName", "Rock");
               return record;
             }
@@ -264,10 +268,10 @@ const FlatfilePortal = () => {
 
 function App() {
   return (
-    <FlatfileProvider publishableKey="pk_1234" config={{ namespace: "portal" }}>
+    <FlatfileProvider publishableKey={PUBLiSHABLE_KEY}>
       <FlatfilePortal />
     </FlatfileProvider>
-  ); 
+  );
 }
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
@@ -277,44 +281,21 @@ root.render(<App />);
 
 ### 6. Match your brand
 
-By attaching a `theme`, we will now override colors in your Space to match your brand. See all of the options here in the [Theming Reference](/guides/theming).
+By attaching a `theme`, we will now override colors in your Space to match your brand. See all of the options here in the [Theming Reference](/guides/theming). The `Space` component, can take a number of options to configure and style the component in the Portal instance. In this case we're adding `theme` to the `metadata` object and giving the Space a `namespace` of `portal`.
 
 ```jsx src/index.jsx
 import ReactDOM from "react-dom/client";
-import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
+import { useFlatfile, FlatfileProvider, Sheet, Space } from "@flatfile/react";
 import { blueprint } from "./blueprint";
-
+// Fill in with your real Publishable Key from the Flatfile Dashboard
+const PUBLiSHABLE_KEY = undefined
 const FlatfilePortal = () => {
   const { openPortal } = useFlatfile();
   return (
     <>
       <button onClick={openPortal}>Open Portal!</button>
-      <Sheet
-          config={blueprint}
-          onSubmit={
-            async ({ sheet }) => {
-              const data = await sheet.allData();
-              console.log("onSubmit", data);
-            }
-          }
-          onRecordHook={
-            (record) => {
-              const firstName = record.get("firstName");
-              console.log({ firstName });
-              record.set("lastName", "Rock");
-              return record;
-            }
-          },
-      />
-    </>
-  )
-};
-
-function App() {
-  return (
-    <FlatfileProvider publishableKey="pk_1234" 
-      config={{ 
-        namespace: "portal", 
+      <Space config={{
+        namespace: "portal",
         metadata: {
           theme: {
             primaryColor: "red",
@@ -323,9 +304,32 @@ function App() {
           }
         }
       }}>
+        <Sheet
+            config={blueprint}
+            onSubmit={
+              async ({ sheet }) => {
+                const data = await sheet.allData();
+                console.log("onSubmit", data);
+              }
+            }
+            onRecordHook={
+              (record) => {
+                record.set("lastName", "Rock");
+                return record;
+              }
+            },
+        />
+      </Space>
+    </>
+  )
+};
+
+function App() {
+  return (
+    <FlatfileProvider publishableKey={PUBLiSHABLE_KEY} >
       <FlatfilePortal />
     </FlatfileProvider>
-  ); 
+  );
 }
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
@@ -333,7 +337,7 @@ root.render(<App />);
 
 ```
 
-### 8. Customize
+### 7. Customize
 
 Continue to customize your importer as needed. For more options, [view the full React integration reference](../reference/advanced).
 

From b3b5a2c648e0ae676e7b5f1c1b8b24fbd8f0e40a Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Tue, 7 May 2024 17:01:45 -0600
Subject: [PATCH 04/13] feat: make all the files work together

---
 apps/embedding/react/new_space_quickstart.mdx | 201 +++++++++---------
 1 file changed, 100 insertions(+), 101 deletions(-)

diff --git a/apps/embedding/react/new_space_quickstart.mdx b/apps/embedding/react/new_space_quickstart.mdx
index 3d0d52484..b07d3571d 100644
--- a/apps/embedding/react/new_space_quickstart.mdx
+++ b/apps/embedding/react/new_space_quickstart.mdx
@@ -37,9 +37,10 @@ The `package.json` file contains the dependencies and scripts for your applicati
 
 ## Build your importer
 
-### 1. Initialize Flatfile
+### 1. Set up Flatfile 
 
 Initialize Flatfile to open in a modal. Pass in your `publishableKey` to the FlatfileProvider and a new Space will be created on each page load.
+Here are all the files you need to get started, we'll make edits to these in the next steps.
 
 <CodeGroup>
 
@@ -48,15 +49,22 @@ import ReactDOM from "react-dom/client";
 import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
 
+// We need to get this from the Flatfile dashboard https://platform.flatfile.com
+const PUBLISHABLE_KEY = "pk_123456";
 const FlatfilePortal = () => {
   const { openPortal } = useFlatfile();
 
-  return <Sheet config={blueprint} />;
+  return (
+    <>
+      <button onClick={openPortal}>Open Portal</button>
+      <Sheet config={blueprint} />
+    </>
+  );
 };
 
 function App() {
   return (
-    <FlatfileProvider publishableKey={PUBLiSHABLE_KEY}>
+    <FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
       <FlatfilePortal />
     </FlatfileProvider>
   );
@@ -64,15 +72,45 @@ function App() {
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
+
+```
+
+```js src/blueprint.js
+export const blueprint = {
+  "name": "Contacts",
+  "slug": "contacts",
+  "fields": [
+    {
+      "key": "firstName",
+      "type": "string",
+      "label": "First Name"
+    },
+    {
+      "key": "lastName",
+      "type": "string",
+      "label": "Last Name"
+    },
+    {
+      "key": "email",
+      "type": "string",
+      "label": "Email"
+    }
+  ]
+}
 ```
 
+
+
 ```html public/index.html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <link rel="stylesheet" type="text/css" href="./styles.css" />
-    <section id="root"></section>
+    <script src="https://cdn.jsdelivr.net/npm/@flatfile/react@7.9.2/dist/flatfile-react.min.js"></script>
   </head>
+  <body>  
+    <section id="root"></section>
+  </body>
 </html>
 ```
 
@@ -118,7 +156,7 @@ Build your React project and start the development server:
 
 Your browser should automatically open, displaying the Flatfile importer on page load.
 
-### 3. Build a Workbook
+### 3. Build on the Workbook Blueprint
 
 Now, let's build a Workbook inside the Space for next time.
 
@@ -152,38 +190,9 @@ const blueprint = {
 }
 ```
 
-```jsx src/index.jsx
-import ReactDOM from "react-dom/client";
-import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
-import { blueprint } from "./blueprint";
-// Fill in with your real Publishable Key from the Flatfile Dashboard
-const PUBLiSHABLE_KEY = undefined
-
-const FlatfilePortal = () => {
-  const { openPortal } = useFlatfile();
-  return (
-    <>
-      <button onClick={openPortal}>Open Portal!</button>
-      <Sheet config={blueprint} />
-    </>
-  );
-};
-
-function App() {
-  return (
-    <FlatfileProvider publishableKey={PUBLiSHABLE_KEY}>
-      <FlatfilePortal />
-    </FlatfileProvider>
-  );
-}
-
-const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(<App />);
-```
-
 </CodeGroup>
 
-### 4. Set the destination
+### 4. Add a Destination `onSubmit()`
 
 Finally, let's get the data out of our system and to your destination with `onSubmit`.
 
@@ -194,29 +203,27 @@ Once you add this code, when the submit button is clicked, this will be the plac
 import ReactDOM from "react-dom/client";
 import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
-// Fill in with your real Publishable Key from the Flatfile Dashboard
-const PUBLiSHABLE_KEY = undefined
+const PUBLISHABLE_KEY = undefined;
 
 const FlatfilePortal = () => {
-const { openPortal } = useFlatfile();
+  const { openPortal } = useFlatfile();
   return (
-
-  <>
-    <button onClick={openPortal}>Open Portal!</button>
-    <Sheet
-      config={blueprint}
-      // This helper function will make a Workbook action that can be triggered from the UI 
-      onSubmit={async ({ sheet }) => {
-        const data = await sheet.allData();
-        console.log("onSubmit", data);
-      }}
-    />
-  </>) 
+    <>
+      <button onClick={openPortal}>Open Portal!</button>
+      <Sheet
+        config={blueprint}
+        onSubmit={async ({ sheet }) => {
+          const data = await sheet.allData();
+          console.log("onSubmit", data);
+        }}
+      />
+    </>
+  );
 };
 
 function App() {
   return (
-    <FlatfileProvider publishableKey={PUBLiSHABLE_KEY}>
+    <FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
       <FlatfilePortal />
     </FlatfileProvider>
   );
@@ -225,11 +232,12 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
 
+
 ```
 
 </CodeGroup>
 
-### 5. Transform Data
+### 5. Transform Data with an `onRecordHook`
 
 Next, we'll listen for data changes and respond `onRecordHook`,
 
@@ -239,8 +247,7 @@ Once you add this code, when a change occurs, we'll log the entered first name a
 import ReactDOM from "react-dom/client";
 import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
-// Fill in with your real Publishable Key from the Flatfile Dashboard
-const PUBLiSHABLE_KEY = undefined
+const PUBLISHABLE_KEY = undefined;
 
 const FlatfilePortal = () => {
   const { openPortal } = useFlatfile();
@@ -248,27 +255,23 @@ const FlatfilePortal = () => {
     <>
       <button onClick={openPortal}>Open Portal!</button>
       <Sheet
-          config={blueprint}
-          onSubmit={
-            async ({ sheet }) => {
-              const data = await sheet.allData();
-              console.log("onSubmit", data);
-            }
-          }
-          onRecordHook={
-            (record) => {
-              record.set("lastName", "Rock");
-              return record;
-            }
-          },
+        config={blueprint}
+        onSubmit={async ({ sheet }) => {
+          const data = await sheet.allData();
+          console.log("onSubmit", data);
+        }}
+        onRecordHook={(record) => {
+          record.set("lastName", "Rock");
+          return record;
+        }}
       />
     </>
-  )
+  );
 };
 
 function App() {
   return (
-    <FlatfileProvider publishableKey={PUBLiSHABLE_KEY}>
+    <FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
       <FlatfilePortal />
     </FlatfileProvider>
   );
@@ -277,6 +280,7 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
 
+
 ```
 
 ### 6. Match your brand
@@ -287,46 +291,40 @@ By attaching a `theme`, we will now override colors in your Space to match your
 import ReactDOM from "react-dom/client";
 import { useFlatfile, FlatfileProvider, Sheet, Space } from "@flatfile/react";
 import { blueprint } from "./blueprint";
-// Fill in with your real Publishable Key from the Flatfile Dashboard
-const PUBLiSHABLE_KEY = undefined
+const PUBLISHABLE_KEY = undefined;
+
 const FlatfilePortal = () => {
   const { openPortal } = useFlatfile();
   return (
-    <>
-      <button onClick={openPortal}>Open Portal!</button>
-      <Space config={{
-        namespace: "portal",
-        metadata: {
-          theme: {
-            primaryColor: "red",
-            textColor: "white",
-            logo: "https://images.ctfassets.net/hjneo4qi4goj/gL6Blz3kTPdZXWknuIDVx/7bb7c73d93b111ed542d2ed426b42fd5/flatfile.svg",
-          }
+    <Space config={{
+      namespace: "portal",
+      metadata: {
+        theme: {
+          primaryColor: "red",
+          textColor: "white",
+          logo: "https://images.ctfassets.net/hjneo4qi4goj/gL6Blz3kTPdZXWknuIDVx/7bb7c73d93b111ed542d2ed426b42fd5/flatfile.svg",
         }
-      }}>
-        <Sheet
-            config={blueprint}
-            onSubmit={
-              async ({ sheet }) => {
-                const data = await sheet.allData();
-                console.log("onSubmit", data);
-              }
-            }
-            onRecordHook={
-              (record) => {
-                record.set("lastName", "Rock");
-                return record;
-              }
-            },
-        />
-      </Space>
-    </>
-  )
+      }
+    }}>
+      <button onClick={openPortal}>Open Portal!</button>
+      <Sheet
+        config={blueprint}
+        onSubmit={async ({ sheet }) => {
+          const data = await sheet.allData();
+          console.log("onSubmit", data);
+        }}
+        onRecordHook={(record) => {
+          record.set("lastName", "Rock");
+          return record;
+        }}
+      />
+    </Space>
+  );
 };
 
 function App() {
   return (
-    <FlatfileProvider publishableKey={PUBLiSHABLE_KEY} >
+    <FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
       <FlatfilePortal />
     </FlatfileProvider>
   );
@@ -335,6 +333,7 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
 
+
 ```
 
 ### 7. Customize

From 8e9104f2ecd690e711491affd095e6393edd38c9 Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Tue, 7 May 2024 17:29:55 -0600
Subject: [PATCH 05/13] feat: fix light mode and add more descriptions

---
 apps/embedding/react/new_space_quickstart.mdx | 137 ++++++++++--------
 custom.css                                    |   3 +-
 2 files changed, 75 insertions(+), 65 deletions(-)

diff --git a/apps/embedding/react/new_space_quickstart.mdx b/apps/embedding/react/new_space_quickstart.mdx
index b07d3571d..a7c00f95e 100644
--- a/apps/embedding/react/new_space_quickstart.mdx
+++ b/apps/embedding/react/new_space_quickstart.mdx
@@ -16,6 +16,7 @@ For synchronous data import/exchange completed in one session, create a new Spac
 
 ### Create your file structure
 
+We're going to set up a simple web app that serves up the `@flatfile/react` with `react-scripts`, similar to how `create-react-app` does it.
 Setup your app to look something like this:
 
 ```
@@ -31,15 +32,16 @@ In this file structure, your app should have two main directories, `public` and
 
 The `public` directory contains the `index.html` file, which is the entry point of the application's front-end.
 
-The `src` directory contains the main components and logic of the application, including the `blueprint.js` file, which defines your schema, and `index.js` from which your application is run.
+The `src` directory contains the main components and logic of the application, including the `blueprint.js` file, which defines the shape of your data, and `index.jsx` from which your application is run.
 
 The `package.json` file contains the dependencies and scripts for your application.
 
 ## Build your importer
 
-### 1. Set up Flatfile 
+### 1. Set up Flatfile
 
-Initialize Flatfile to open in a modal. Pass in your `publishableKey` to the FlatfileProvider and a new Space will be created on each page load.
+Initialize Flatfile to open in a modal. Pass in your `publishableKey` from the Flatfile dashboard ([here's a link to the exact spot](https://platform.flatfile.com/dashboard/keys-and-secrets)) to the `FlatfileProvider` and a new Space will be created on each page load.
+Paste your key (it should look like `pk_123456`) where `undefined` is in the `index.jsx` file for the `const PUBLISHABLE_KEY` and you'll be in good shape.
 Here are all the files you need to get started, we'll make edits to these in the next steps.
 
 <CodeGroup>
@@ -50,7 +52,7 @@ import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
 
 // We need to get this from the Flatfile dashboard https://platform.flatfile.com
-const PUBLISHABLE_KEY = "pk_123456";
+const PUBLISHABLE_KEY = undefined;
 const FlatfilePortal = () => {
   const { openPortal } = useFlatfile();
 
@@ -72,43 +74,40 @@ function App() {
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
-
 ```
 
 ```js src/blueprint.js
 export const blueprint = {
-  "name": "Contacts",
-  "slug": "contacts",
-  "fields": [
+  name: "Contacts",
+  slug: "contacts",
+  fields: [
     {
-      "key": "firstName",
-      "type": "string",
-      "label": "First Name"
+      key: "firstName",
+      type: "string",
+      label: "First Name",
     },
     {
-      "key": "lastName",
-      "type": "string",
-      "label": "Last Name"
+      key: "lastName",
+      type: "string",
+      label: "Last Name",
     },
     {
-      "key": "email",
-      "type": "string",
-      "label": "Email"
-    }
-  ]
-}
+      key: "email",
+      type: "string",
+      label: "Email",
+    },
+  ],
+};
 ```
 
-
-
 ```html public/index.html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <link rel="stylesheet" type="text/css" href="./styles.css" />
-    <script src="https://cdn.jsdelivr.net/npm/@flatfile/react@7.9.2/dist/flatfile-react.min.js"></script>
+    <!--  -->
   </head>
-  <body>  
+  <body>
     <section id="root"></section>
   </body>
 </html>
@@ -163,11 +162,11 @@ Now, let's build a Workbook inside the Space for next time.
 1. Update your `blueprint.js` with this simple Blueprint.
 2. Update `index.html` to import the Workbook.
 
-Next time you open Flatfile, you'll see a Workbook called "Contacts" that has one Sheet with three fields. Your Workbook will also have a Submit action. We will configure this action in the next step.
+When you opened Flatfile, you'll see a Workbook called "Contacts" that has one Sheet with three fields. You can modify that however you like according to our [Blueprint outlined here](/blueprint/overview), but as a simple example we added one more field here for the Contacts Favorite Color.
 
 <CodeGroup>
 ```js src/blueprint.js
-const blueprint = {
+export const blueprint = {
   "name": "Contacts",
   "slug": "contacts",
   "fields": [
@@ -185,18 +184,25 @@ const blueprint = {
       "key": "email",
       "type": "string",
       "label": "Email"
-    }
+    },
+    {
+      "key": "favorite-color",
+      "type": "string",
+      "label": "Favorite Color"
+    },
   ]
 }
 ```
 
 </CodeGroup>
 
-### 4. Add a Destination `onSubmit()`
+### 4. Export your data with an `onSubmit()` action.
 
 Finally, let's get the data out of our system and to your destination with `onSubmit`.
 
-Once you add this code, when the submit button is clicked, this will be the place you can egress your data. Learn more about [Egress Out](/guides/egress).
+Once you add this code, when the submit button is clicked, this will be the place you can egress your data. Learn more about [Egress Out](/guides/egress). Once you have your data, you can do whatever you want with it - from this step you can make another API call to send it where you want. 
+Keep in mind, this is just a simple example. You can do much more with your data and Flatfile! 
+We paginate the data in this call so if you have more than 10,000 records worth of data you'll need to handle that. We have lot's of ideas on how to handle that if you'd like to learn more.
 
 <CodeGroup>
 ```jsx src/index.jsx
@@ -206,38 +212,37 @@ import { blueprint } from "./blueprint";
 const PUBLISHABLE_KEY = undefined;
 
 const FlatfilePortal = () => {
-  const { openPortal } = useFlatfile();
-  return (
-    <>
-      <button onClick={openPortal}>Open Portal!</button>
-      <Sheet
-        config={blueprint}
-        onSubmit={async ({ sheet }) => {
-          const data = await sheet.allData();
-          console.log("onSubmit", data);
-        }}
-      />
-    </>
-  );
-};
+const { openPortal } = useFlatfile();
+return (
+
+<>
+  <button onClick={openPortal}>Open Portal!</button>
+  <Sheet
+    config={blueprint}
+    onSubmit={async ({ sheet }) => {
+      const data = await sheet.allData();
+      console.log("onSubmit", data);
+    }}
+  />
+</>
+); };
 
 function App() {
-  return (
-    <FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
-      <FlatfilePortal />
-    </FlatfileProvider>
-  );
-}
+return (
+
+<FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
+  <FlatfilePortal />
+</FlatfileProvider>
+); }
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
 
-
 ```
 
 </CodeGroup>
 
-### 5. Transform Data with an `onRecordHook`
+### 5. Transform Data with an `onRecordHook` 
 
 Next, we'll listen for data changes and respond `onRecordHook`,
 
@@ -259,9 +264,12 @@ const FlatfilePortal = () => {
         onSubmit={async ({ sheet }) => {
           const data = await sheet.allData();
           console.log("onSubmit", data);
+          
         }}
         onRecordHook={(record) => {
           record.set("lastName", "Rock");
+          // If you added a favorite-color field, you can use it here.
+          // record.set("favorite-color", "blue");
           return record;
         }}
       />
@@ -285,7 +293,8 @@ root.render(<App />);
 
 ### 6. Match your brand
 
-By attaching a `theme`, we will now override colors in your Space to match your brand. See all of the options here in the [Theming Reference](/guides/theming). The `Space` component, can take a number of options to configure and style the component in the Portal instance. In this case we're adding `theme` to the `metadata` object and giving the Space a `namespace` of `portal`.
+By attaching a `theme`, we will now override colors in your Space to match your brand. See all of the options here in the [Theming Reference](/guides/theming). 
+The `Space` component can take a number of options to configure and style the component in the Portal instance. In this case we're adding `theme` to the `metadata` object and giving the Space a `namespace` of `portal`.
 
 ```jsx src/index.jsx
 import ReactDOM from "react-dom/client";
@@ -296,16 +305,18 @@ const PUBLISHABLE_KEY = undefined;
 const FlatfilePortal = () => {
   const { openPortal } = useFlatfile();
   return (
-    <Space config={{
-      namespace: "portal",
-      metadata: {
-        theme: {
-          primaryColor: "red",
-          textColor: "white",
-          logo: "https://images.ctfassets.net/hjneo4qi4goj/gL6Blz3kTPdZXWknuIDVx/7bb7c73d93b111ed542d2ed426b42fd5/flatfile.svg",
-        }
-      }
-    }}>
+    <Space
+      config={{
+        namespace: "portal",
+        metadata: {
+          theme: {
+            primaryColor: "red",
+            textColor: "white",
+            logo: "https://images.ctfassets.net/hjneo4qi4goj/gL6Blz3kTPdZXWknuIDVx/7bb7c73d93b111ed542d2ed426b42fd5/flatfile.svg",
+          },
+        },
+      }}
+    >
       <button onClick={openPortal}>Open Portal!</button>
       <Sheet
         config={blueprint}
@@ -332,8 +343,6 @@ function App() {
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
-
-
 ```
 
 ### 7. Customize
diff --git a/custom.css b/custom.css
index 12924127d..2ca0b5dd7 100644
--- a/custom.css
+++ b/custom.css
@@ -321,7 +321,8 @@ html:not(.dark) .border-primary-light {
 
 html:not(.dark) .language-html,
 html:not(.dark) .language-css,
-html:not(.dark) .token.punctuation {
+html:not(.dark) .token.punctuation,
+html:not(.dark) .token.plain-text {
   color: #000;
 }
 

From 3f4fbb05d34542a7500ec7c264426c695e61621a Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Tue, 7 May 2024 17:52:30 -0600
Subject: [PATCH 06/13] feat: make the themeing and custom logo actually work!

---
 apps/embedding/react/new_space_quickstart.mdx | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/apps/embedding/react/new_space_quickstart.mdx b/apps/embedding/react/new_space_quickstart.mdx
index a7c00f95e..36ea20a79 100644
--- a/apps/embedding/react/new_space_quickstart.mdx
+++ b/apps/embedding/react/new_space_quickstart.mdx
@@ -53,12 +53,13 @@ import { blueprint } from "./blueprint";
 
 // We need to get this from the Flatfile dashboard https://platform.flatfile.com
 const PUBLISHABLE_KEY = undefined;
+
 const FlatfilePortal = () => {
   const { openPortal } = useFlatfile();
 
   return (
     <>
-      <button onClick={openPortal}>Open Portal</button>
+      <button onClick={openPortal}>Open Portal!</button>
       <Sheet config={blueprint} />
     </>
   );
@@ -105,7 +106,7 @@ export const blueprint = {
 <html lang="en">
   <head>
     <link rel="stylesheet" type="text/css" href="./styles.css" />
-    <!--  -->
+    <!-- react-scripts is going to package your .jsx file and drop it in here as a .js file -->
   </head>
   <body>
     <section id="root"></section>
@@ -115,8 +116,8 @@ export const blueprint = {
 
 ```json package.json
 {
-  "name": "flatfile-react-app",
-  "version": "0.1.0",
+  "name": "example-flatfile-react-app",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@flatfile/react": "^7.9.2",
@@ -189,7 +190,7 @@ export const blueprint = {
       "key": "favorite-color",
       "type": "string",
       "label": "Favorite Color"
-    },
+    }
   ]
 }
 ```
@@ -200,8 +201,8 @@ export const blueprint = {
 
 Finally, let's get the data out of our system and to your destination with `onSubmit`.
 
-Once you add this code, when the submit button is clicked, this will be the place you can egress your data. Learn more about [Egress Out](/guides/egress). Once you have your data, you can do whatever you want with it - from this step you can make another API call to send it where you want. 
-Keep in mind, this is just a simple example. You can do much more with your data and Flatfile! 
+Once you add this code, when the submit button is clicked, this will be the place you can egress your data. Learn more about [Egress Out](/guides/egress). Once you have your data, you can do whatever you want with it - from this step you can make another API call to send it where you want.
+Keep in mind, this is just a simple example. You can do much more with your data and Flatfile!
 We paginate the data in this call so if you have more than 10,000 records worth of data you'll need to handle that. We have lot's of ideas on how to handle that if you'd like to learn more.
 
 <CodeGroup>
@@ -209,6 +210,7 @@ We paginate the data in this call so if you have more than 10,000 records worth
 import ReactDOM from "react-dom/client";
 import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react";
 import { blueprint } from "./blueprint";
+
 const PUBLISHABLE_KEY = undefined;
 
 const FlatfilePortal = () => {
@@ -238,11 +240,11 @@ return (
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
 
-```
+````
 
 </CodeGroup>
 
-### 5. Transform Data with an `onRecordHook` 
+### 5. Transform Data with an `onRecordHook`
 
 Next, we'll listen for data changes and respond `onRecordHook`,
 
@@ -264,7 +266,7 @@ const FlatfilePortal = () => {
         onSubmit={async ({ sheet }) => {
           const data = await sheet.allData();
           console.log("onSubmit", data);
-          
+
         }}
         onRecordHook={(record) => {
           record.set("lastName", "Rock");
@@ -289,11 +291,11 @@ const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
 
 
-```
+````
 
 ### 6. Match your brand
 
-By attaching a `theme`, we will now override colors in your Space to match your brand. See all of the options here in the [Theming Reference](/guides/theming). 
+By attaching a `theme`, we will now override colors in your Space to match your brand. See all of the options here in the [Theming Reference](/guides/theming).
 The `Space` component can take a number of options to configure and style the component in the Portal instance. In this case we're adding `theme` to the `metadata` object and giving the Space a `namespace` of `portal`.
 
 ```jsx src/index.jsx
@@ -310,9 +312,13 @@ const FlatfilePortal = () => {
         namespace: "portal",
         metadata: {
           theme: {
-            primaryColor: "red",
-            textColor: "white",
-            logo: "https://images.ctfassets.net/hjneo4qi4goj/gL6Blz3kTPdZXWknuIDVx/7bb7c73d93b111ed542d2ed426b42fd5/flatfile.svg",
+            root: {
+              primaryColor: "red",
+              textColor: "white",
+            },
+            sidebar: {
+              logo: "https://images.ctfassets.net/hjneo4qi4goj/gL6Blz3kTPdZXWknuIDVx/7bb7c73d93b111ed542d2ed426b42fd5/flatfile.svg",
+            },
           },
         },
       }}

From 1598751f4939e7bb1f5ecda7f49299f6dee66cfd Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Tue, 7 May 2024 17:53:11 -0600
Subject: [PATCH 07/13] fix: typo from autoformatting...

---
 apps/embedding/react/new_space_quickstart.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/embedding/react/new_space_quickstart.mdx b/apps/embedding/react/new_space_quickstart.mdx
index 36ea20a79..f101df0ef 100644
--- a/apps/embedding/react/new_space_quickstart.mdx
+++ b/apps/embedding/react/new_space_quickstart.mdx
@@ -240,7 +240,7 @@ return (
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
 
-````
+```
 
 </CodeGroup>
 
@@ -291,7 +291,7 @@ const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
 
 
-````
+```
 
 ### 6. Match your brand
 

From 13668c38e45fe8f349790c3c99af2fbfb5de823c Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Tue, 7 May 2024 17:55:20 -0600
Subject: [PATCH 08/13] feat: fix some more autoformatting

---
 apps/embedding/react/new_space_quickstart.mdx | 64 +++++++++----------
 1 file changed, 29 insertions(+), 35 deletions(-)

diff --git a/apps/embedding/react/new_space_quickstart.mdx b/apps/embedding/react/new_space_quickstart.mdx
index f101df0ef..ae67f8159 100644
--- a/apps/embedding/react/new_space_quickstart.mdx
+++ b/apps/embedding/react/new_space_quickstart.mdx
@@ -214,28 +214,26 @@ import { blueprint } from "./blueprint";
 const PUBLISHABLE_KEY = undefined;
 
 const FlatfilePortal = () => {
-const { openPortal } = useFlatfile();
-return (
-
-<>
-  <button onClick={openPortal}>Open Portal!</button>
-  <Sheet
-    config={blueprint}
-    onSubmit={async ({ sheet }) => {
-      const data = await sheet.allData();
-      console.log("onSubmit", data);
-    }}
-  />
-</>
-); };
-
-function App() {
-return (
+  const { openPortal } = useFlatfile();
+  return (
+    <>
+      <button onClick={openPortal}>Open Portal!</button>
+      <Sheet
+        config={blueprint}
+        onSubmit={async ({ sheet }) => {
+          const data = await sheet.allData();
+          console.log("onSubmit", data);
+        }}
+      />
+    </>
+  ); 
+};
 
-<FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
-  <FlatfilePortal />
-</FlatfileProvider>
-); }
+const App = () => (
+  <FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
+    <FlatfilePortal />
+  </FlatfileProvider>
+); 
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
@@ -279,13 +277,11 @@ const FlatfilePortal = () => {
   );
 };
 
-function App() {
-  return (
-    <FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
-      <FlatfilePortal />
-    </FlatfileProvider>
-  );
-}
+const App = () => (
+  <FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
+    <FlatfilePortal />
+  </FlatfileProvider>
+);
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
@@ -339,13 +335,11 @@ const FlatfilePortal = () => {
   );
 };
 
-function App() {
-  return (
-    <FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
-      <FlatfilePortal />
-    </FlatfileProvider>
-  );
-}
+const App = () => (
+  <FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
+    <FlatfilePortal />
+  </FlatfileProvider>
+);
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);

From 15b80dc7e290fa3db55802e56b0e17068f584f8e Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Tue, 7 May 2024 17:55:42 -0600
Subject: [PATCH 09/13] feat: and one more

---
 apps/embedding/react/new_space_quickstart.mdx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/embedding/react/new_space_quickstart.mdx b/apps/embedding/react/new_space_quickstart.mdx
index ae67f8159..3ad41eaa0 100644
--- a/apps/embedding/react/new_space_quickstart.mdx
+++ b/apps/embedding/react/new_space_quickstart.mdx
@@ -65,13 +65,11 @@ const FlatfilePortal = () => {
   );
 };
 
-function App() {
-  return (
-    <FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
-      <FlatfilePortal />
-    </FlatfileProvider>
-  );
-}
+const App = () => (
+  <FlatfileProvider publishableKey={PUBLISHABLE_KEY}>
+    <FlatfilePortal />
+  </FlatfileProvider>
+);
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);

From 5c9f21f1d707c799799b3c5ba43647a3496a7f46 Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Tue, 7 May 2024 17:59:19 -0600
Subject: [PATCH 10/13] Update apps/embedding/react/new_space_quickstart.mdx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 apps/embedding/react/new_space_quickstart.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/embedding/react/new_space_quickstart.mdx b/apps/embedding/react/new_space_quickstart.mdx
index 3ad41eaa0..70db613d0 100644
--- a/apps/embedding/react/new_space_quickstart.mdx
+++ b/apps/embedding/react/new_space_quickstart.mdx
@@ -290,7 +290,7 @@ root.render(<App />);
 ### 6. Match your brand
 
 By attaching a `theme`, we will now override colors in your Space to match your brand. See all of the options here in the [Theming Reference](/guides/theming).
-The `Space` component can take a number of options to configure and style the component in the Portal instance. In this case we're adding `theme` to the `metadata` object and giving the Space a `namespace` of `portal`.
+The `Space` component can take a number of options to configure and style the component in the Portal instance. In this case, we're adding `theme` to the `metadata` object and giving the Space a `namespace` of `portal`.
 
 ```jsx src/index.jsx
 import ReactDOM from "react-dom/client";

From 7963d944463e8fb9bd6831b48d28ef24788134c6 Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Tue, 7 May 2024 17:59:57 -0600
Subject: [PATCH 11/13] Update apps/embedding/react/new_space_quickstart.mdx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 apps/embedding/react/new_space_quickstart.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/embedding/react/new_space_quickstart.mdx b/apps/embedding/react/new_space_quickstart.mdx
index 70db613d0..52659402b 100644
--- a/apps/embedding/react/new_space_quickstart.mdx
+++ b/apps/embedding/react/new_space_quickstart.mdx
@@ -201,7 +201,7 @@ Finally, let's get the data out of our system and to your destination with `onSu
 
 Once you add this code, when the submit button is clicked, this will be the place you can egress your data. Learn more about [Egress Out](/guides/egress). Once you have your data, you can do whatever you want with it - from this step you can make another API call to send it where you want.
 Keep in mind, this is just a simple example. You can do much more with your data and Flatfile!
-We paginate the data in this call so if you have more than 10,000 records worth of data you'll need to handle that. We have lot's of ideas on how to handle that if you'd like to learn more.
+We paginate the data in this call so if you have more than 10,000 records worth of data you'll need to handle that. We have lots of ideas on how to handle that, if you'd like to learn more.
 
 <CodeGroup>
 ```jsx src/index.jsx

From 406ddab87a6933740f2be699092710323caf0fe8 Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Tue, 7 May 2024 18:01:25 -0600
Subject: [PATCH 12/13] Update apps/embedding/react/new_space_quickstart.mdx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 apps/embedding/react/new_space_quickstart.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/embedding/react/new_space_quickstart.mdx b/apps/embedding/react/new_space_quickstart.mdx
index 52659402b..40696dee6 100644
--- a/apps/embedding/react/new_space_quickstart.mdx
+++ b/apps/embedding/react/new_space_quickstart.mdx
@@ -16,7 +16,7 @@ For synchronous data import/exchange completed in one session, create a new Spac
 
 ### Create your file structure
 
-We're going to set up a simple web app that serves up the `@flatfile/react` with `react-scripts`, similar to how `create-react-app` does it.
+Set up your app to look something like this:
 Setup your app to look something like this:
 
 ```

From 64fddf171da8fec753f7e96d2255ce6acf505b9c Mon Sep 17 00:00:00 2001
From: Alex Rock <hi@lxrck.com>
Date: Tue, 7 May 2024 18:01:40 -0600
Subject: [PATCH 13/13] Update apps/embedding/react/new_space_quickstart.mdx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 apps/embedding/react/new_space_quickstart.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/embedding/react/new_space_quickstart.mdx b/apps/embedding/react/new_space_quickstart.mdx
index 40696dee6..b1ad56bc9 100644
--- a/apps/embedding/react/new_space_quickstart.mdx
+++ b/apps/embedding/react/new_space_quickstart.mdx
@@ -161,7 +161,7 @@ Now, let's build a Workbook inside the Space for next time.
 1. Update your `blueprint.js` with this simple Blueprint.
 2. Update `index.html` to import the Workbook.
 
-When you opened Flatfile, you'll see a Workbook called "Contacts" that has one Sheet with three fields. You can modify that however you like according to our [Blueprint outlined here](/blueprint/overview), but as a simple example we added one more field here for the Contacts Favorite Color.
+When you opened Flatfile, you'll see a Workbook called "Contacts" that has one Sheet with three fields. You can modify that however you like according to our [Blueprint outlined here](/blueprint/overview), but as a simple example, we added one more field here for the Contacts' Favorite Color.
 
 <CodeGroup>
 ```js src/blueprint.js