feat: cleanup and add tests

apps/react/app/App.tsx

@@ -14,8 +14,6 @@ import {
 import React, { 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))
 
@@ -24,13 +22,13 @@ 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
-    })
-  }, [])
+  // useListener((listener) => {
+  //   // currentListener
+  //   listener.on('**', (event) => {
+  //     console.log('FFApp useListener Event => ', event.topic)
+  //     // Handle the workbook:deleted event
+  //   })
+  // }, [])
 
   // Both of these also work:
   // FlatfileListener.create((client) => {
@@ -39,68 +37,68 @@ const App = () => {
   // (listener: FlatfileListener) => {
   // useListener(plainListener, [])
 
-  useListener((client) => {
-    client.use(
-      recordHook('contacts', (record) => {
-        const firstName = record.get('firstName')
-        console.log({ firstName })
-        // Gettign the real types here would be nice but seems tricky
-        record.set('email', 'Rock')
-        return record
-      })
-    )
-  }, [])
-
-  usePlugin(
-    recordHook('contacts', (record, event) => {
-      console.log('recordHook', { event })
-      record.set('lastName', label)
-      return record
-    }),
-    [label]
-  )
-
-  useEvent('workbook:created', (event) => {
-    console.log('workbook:created', { event })
-  })
-
-  useEvent('*:created', (event) => {
-    console.log({ topic: event.topic })
-  })
-
-  useEvent('job:ready', { job: 'sheet:submitActionFg' }, async (event) => {
-    const { jobId } = event.context
-    try {
-      await api.jobs.ack(jobId, {
-        info: 'Getting started.',
-        progress: 10,
-      })
-
-      // Make changes after cells in a Sheet have been updated
-      console.log('Make changes here when an action is clicked')
-      const records = await event.data
-
-      console.log({ records })
-
-      await api.jobs.complete(jobId, {
-        outcome: {
-          message: 'This is now complete.',
-        },
-      })
-
-      // Probably a bad idea to close the portal here but just as an example
-      await sleep(3000)
-      closePortal()
-    } catch (error: any) {
-      console.error('Error:', error.stack)
-
-      await api.jobs.fail(jobId, {
-        outcome: {
-          message: 'This job encountered an error.',
-        },
-      })
-    }
-  })
+  // useListener((client) => {
+  //   client.use(
+  //     recordHook('contacts', (record) => {
+  //       const firstName = record.get('firstName')
+  //       console.log({ firstName })
+  //       // Gettign the real types here would be nice but seems tricky
+  //       record.set('email', 'Rock')
+  //       return record
+  //     })
+  //   )
+  // }, [])
+
+  // usePlugin(
+  //   recordHook('contacts', (record, event) => {
+  //     console.log('recordHook', { event })
+  //     record.set('lastName', label)
+  //     return record
+  //   }),
+  //   [label]
+  // )
+
+  // useEvent('workbook:created', (event) => {
+  //   console.log('workbook:created', { event })
+  // })
+
+  // useEvent('**', (event) => {
+  //   console.log({ event })
+  // })
+
+  // useEvent('job:ready', { job: 'sheet:submitActionFg' }, async (event) => {
+  //   const { jobId } = event.context
+  //   try {
+  //     await api.jobs.ack(jobId, {
+  //       info: 'Getting started.',
+  //       progress: 10,
+  //     })
+
+  //     // Make changes after cells in a Sheet have been updated
+  //     console.log('Make changes here when an action is clicked')
+  //     const records = await event.data
+
+  //     console.log({ records })
+
+  //     await api.jobs.complete(jobId, {
+  //       outcome: {
+  //         message: 'This is now complete.',
+  //       },
+  //     })
+
+  //     // Probably a bad idea to close the portal here but just as an example
+  //     await sleep(3000)
+  //     closePortal()
+  //   } catch (error: any) {
+  //     console.error('Error:', error.stack)
+
+  //     await api.jobs.fail(jobId, {
+  //       outcome: {
+  //         message: 'This job encountered an error.',
+  //       },
+  //     })
+  //   }
+  // })
 
   const listenerConfig = (label: string) => {
     setLabel(label)
@@ -130,14 +128,21 @@ const App = () => {
         <Document config={document} />
         <Workbook
           config={workbook}
-          onSubmit={(sheet) => {
+          onSubmit={async (sheet) => {
             console.log('onSubmit', { sheet })
           }}
           onRecordHooks={[
             [
-              '**',
+              'contacts',
+              (record) => {
+                record.set('email', 'SHEET 1')
+                return record
+              },
+            ],
+            [
+              'contacts',
               (record) => {
-                record.set('email', 'TEST SHEET RECORD')
+                record.set('lastName', 'SHEET 3')
                 return record
               },
             ],

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>
   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,11 @@ 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
+}
+
+export const Document = (props: DocumentProps) => {
   const { config } = props
   const { updateDocument } = useContext(FlatfileContext)
 

packages/react/src/components/FlatfileContext.tsx

@@ -50,7 +50,21 @@ export const FlatfileContext = createContext<FlatfileContextType>({
   updateSheet: () => {},
   updateWorkbook: () => {},
   updateDocument: () => {},
-  createSpace: undefined,
+  createSpace: {
+    document: undefined,
+    workbook: {
+      name: 'Embedded Workbook',
+      sheets: [],
+    },
+    space: {
+      name: 'Embedded Space',
+      labels: ['embedded'],
+      namespace: 'portal',
+      metadata: {
+        sidebarConfig: { showSidebar: false },
+      },
+    },
+  },
   setCreateSpace: () => {},
   updateSpace: () => {},
 })

packages/react/src/components/FlatfileProvider.tsx

@@ -44,7 +44,7 @@ export const FlatfileProvider: React.FC<ExclusiveFlatfileProviderProps> = ({
     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
@@ -118,13 +118,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(