feat: cleanup and add tests

apps/react/app/App.tsx

@@ -11,11 +11,11 @@ import {
   Document,
   Sheet,
 } from '@flatfile/react'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styles from './page.module.css'
 import { recordHook } from '@flatfile/plugin-record-hook'
+
 import api from '@flatfile/api'
-import { config } from '../../../packages/cli/src/config'
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
@@ -25,10 +25,8 @@ const App = () => {
   const [label, setLabel] = useState('Rock')
 
   useListener((listener) => {
-    // currentListener
     listener.on('**', (event) => {
       console.log('FFApp useListener Event => ', event.topic)
-      // Handle the workbook:deleted event
     })
   }, [])
 
@@ -41,11 +39,11 @@ const App = () => {
 
   useListener((client) => {
     client.use(
-      recordHook('contacts', (record) => {
+      recordHook('contacts2', (record) => {
         const firstName = record.get('firstName')
         console.log({ firstName })
-        // Gettign the real types here would be nice but seems tricky
-        record.set('email', 'Rock')
+
+        record.set('lastName', 'Rock')
         return record
       })
     )
@@ -60,12 +58,10 @@ const App = () => {
     [label]
   )
 
-  useEvent('workbook:created', (event) => {
-    console.log('workbook:created', { event })
-  })
-
-  useEvent('*:created', (event) => {
-    console.log({ topic: event.topic })
+  useEvent('space:created', async ({ context: { spaceId } }) => {
+    console.log('workbook:created')
+    const { data: space } = await api.spaces.get(spaceId)
+    console.log({ space })
   })
 
   useEvent('job:ready', { job: 'sheet:submitActionFg' }, async (event) => {
@@ -102,9 +98,6 @@ const App = () => {
     }
   })
 
-  const listenerConfig = (label: string) => {
-    setLabel(label)
-  }
   return (
     <div className={styles.main}>
       <div className={styles.description}>
@@ -115,11 +108,12 @@ const App = () => {
         >
           {open ? 'CLOSE' : 'OPEN'} PORTAL
         </button>
-        <button onClick={() => listenerConfig('blue')}>blue listener</button>
-        <button onClick={() => listenerConfig('green')}>green listener</button>
+        <button onClick={() => setLabel('blue')}>blue listener</button>
+        <button onClick={() => setLabel('green')}>green listener</button>
       </div>
       <Space
         config={{
+          name: "Alex's Space",
           metadata: {
             sidebarConfig: {
               showSidebar: true,
@@ -129,26 +123,54 @@ const App = () => {
       >
         <Document config={document} />
         <Workbook
-          config={workbook}
-          onSubmit={(sheet) => {
-            console.log('onSubmit', { sheet })
+          config={{ ...workbook, name: "ALEX'S WORKBOOK" }}
+          onSubmit={async (sheet) => {
+            console.log('on Workbook Submit ', { sheet })
           }}
           onRecordHooks={[
             [
-              '**',
               (record) => {
-                record.set('email', 'TEST SHEET RECORD')
+                record.set('email', 'SHEET 1 RECORDHOOKS')
+                return record
+              },
+            ],
+            [
+              (record) => {
+                record.set('email', 'SHEET 2 RECORDHOOKS')
                 return record
               },
             ],
           ]}
-        />
-        {/* <Sheet
-          config={workbook.sheets![0]}
-          onSubmit={(sheet) => {
-            console.log('onSubmit', { sheet })
-          }}
-        /> */}
+        >
+          <Sheet
+            config={{
+              ...workbook.sheets![0],
+              slug: 'contacts3',
+              name: 'Contacts 3',
+            }}
+            onRecordHook={(record) => {
+              record.set('email', 'SHEET 3 RECORDHOOK')
+              return record
+            }}
+            onSubmit={async (sheet) => {
+              console.log('onSubmit from Sheet 3', { sheet })
+            }}
+          />
+          <Sheet
+            config={{
+              ...workbook.sheets![0],
+              slug: 'contacts4',
+              name: 'Contacts 4',
+            }}
+            onRecordHook={(record) => {
+              record.set('email', 'SHEET 4 RECORDHOOK')
+              return record
+            }}
+            onSubmit={(sheet) => {
+              console.log('onSubmit from Sheet 4', { sheet })
+            }}
+          />
+        </Workbook>
       </Space>
     </div>
   )

apps/react/app/page.tsx

@@ -12,6 +12,7 @@ export default function Home() {
       publishableKey={PUBLISHABLE_KEY}
       config={{
         mountElement: 'example-mount-class',
+        preload: true
       }}
     >
       <App />

packages/embedded-utils/package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@flatfile/api": "^1.7.11",
-    "@flatfile/listener": "^1.0.0",
+    "@flatfile/listener": "^1.0.1",
     "@flatfile/util-common": "^1.1.0",
     "pubnub": "^7.2.2"
   },

packages/embedded-utils/src/types/Space.ts

@@ -117,7 +117,7 @@ export interface SimpleOnboarding extends NewSpaceFromPublishableKey {
     sheet?: any
     job?: any
     event?: FlatfileEvent
-  }) => void
+  }) => Promise<void> | void
   onRecordHook?: (
     record: FlatfileRecord<TRecordDataWithLinks<TPrimitive>>,
     event?: FlatfileEvent

packages/listener/src/events/event.handler.ts

@@ -129,7 +129,7 @@ export class EventHandler extends AuthenticatedClient {
     event: FlatfileEvent | Flatfile.Event | any
   ): Promise<void> {
     if (!event) return
-    const eventPayload = event.src ? event.src : event
+    const eventPayload = event.src || event
 
     event = new FlatfileEvent(eventPayload, this._accessToken, this._apiUrl)
 

packages/react/src/components/Document.tsx

@@ -4,7 +4,26 @@ import { useCallback, useContext } from 'react'
 import type { Flatfile } from '@flatfile/api'
 import { useDeepCompareEffect } from '../utils/useDeepCompareEffect'
 
-export const Document = (props: { config: Flatfile.DocumentConfig }) => {
+type DocumentProps = {
+  config: Flatfile.DocumentConfig
+}
+/**
+ * `Document` component responsible for updating the document configuration within the Flatfile context.
+ * It utilizes the `useDeepCompareEffect` hook to deeply compare the `config` prop changes and update the document accordingly.
+ * 
+ * @component
+ * @example
+ * const documentConfig = {
+ *   title: "Document Title",
+ *   body: "Example Body",
+ * }
+ * return <Document config={documentConfig} />
+ * 
+ * @param {DocumentProps} props - The props for the Document component.
+ * @param {Flatfile.DocumentConfig} props.config - The configuration object for the document.
+ */
+
+export const Document = (props: DocumentProps) => {
   const { config } = props
   const { updateDocument } = useContext(FlatfileContext)
 

packages/react/src/components/FlatfileContext.tsx

@@ -8,6 +8,23 @@ type ReUseSpace = Partial<Flatfile.SpaceConfig> & {
   id: string
   accessToken: string
 }
+
+export const DEFAULT_CREATE_SPACE = {
+  document: undefined,
+  workbook: {
+    name: 'Embedded Workbook',
+    sheets: [],
+  },
+  space: {
+    name: 'Embedded Space',
+    labels: ['embedded'],
+    namespace: 'portal',
+    metadata: {
+      sidebarConfig: { showSidebar: false },
+    },
+  },
+}
+
 export interface FlatfileContextType {
   publishableKey?: string
   environmentId?: string

packages/react/src/components/FlatfileProvider.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import FlatfileContext from './FlatfileContext'
+import FlatfileContext, { DEFAULT_CREATE_SPACE } from './FlatfileContext'
 import FlatfileListener, { Browser } from '@flatfile/listener'
 import { Flatfile } from '@flatfile/api'
 import { EmbeddedIFrameWrapper } from './EmbeddedIFrameWrapper'
@@ -24,32 +24,18 @@ export const FlatfileProvider: React.FC<ExclusiveFlatfileProviderProps> = ({
     document: Flatfile.DocumentConfig | undefined
     workbook: Flatfile.CreateWorkbookConfig
     space: Flatfile.SpaceConfig
-  }>({
-    document: undefined,
-    workbook: {
-      name: 'Embedded Workbook',
-      sheets: [],
-    },
-    space: {
-      name: 'Embedded Space',
-      labels: ['embedded'],
-      namespace: 'portal',
-      metadata: {
-        sidebarConfig: { showSidebar: false },
-      },
-    },
-  })
+  }>(DEFAULT_CREATE_SPACE)
 
   const addSheet = (newSheet: Flatfile.SheetConfig) => {
     setCreateSpace((prevSpace) => {
       // Check if the sheet already exists
       const sheetExists = prevSpace.workbook.sheets?.some(
-        (sheet: any) => sheet.slug === newSheet.slug
+        (sheet) => sheet.slug === newSheet.slug
       )
       if (sheetExists) {
-        return prevSpace // Return the state unchanged if the sheet exists
+        return prevSpace
       }
-      // Add the new sheet if it doesn't exist
+
       return {
         ...prevSpace,
         workbook: {
@@ -88,6 +74,15 @@ export const FlatfileProvider: React.FC<ExclusiveFlatfileProviderProps> = ({
       workbook: {
         ...prevSpace.workbook,
         ...workbookUpdates,
+        // Prioritize order of sheets passed along in the Workbook.config then subsequent <Sheet config /> components
+        actions: [
+          ...(workbookUpdates.actions || []),
+          ...(prevSpace.workbook.actions || []),
+        ],
+        sheets: [
+          ...(workbookUpdates.sheets || []),
+          ...(prevSpace.workbook.sheets || []),
+        ],
       },
     }))
   }
@@ -118,13 +113,15 @@ export const FlatfileProvider: React.FC<ExclusiveFlatfileProviderProps> = ({
     listener.dispatchEvent(flatfileEvent)
   }
 
+  // Listen to the postMessage event from the created iFrame
   useEffect(() => {
     window.addEventListener('message', handlePostMessage, false)
     return () => {
       window.removeEventListener('message', handlePostMessage)
     }
   }, [listener])
 
+  // Mount the event listener to the FlatfileProvider
   useEffect(() => {
     if (listener && internalAccessToken) {
       listener.mount(