feat: add simple flows to apps/react

apps/react/app/layout.tsx

@@ -37,6 +37,8 @@ export default function RootLayout({
         >
           <a style={menuLinkStyles} href="/">Create a New Space</a>
           <a style={menuLinkStyles} href="/re-used-space">Re-use a Space</a>
+          <a style={menuLinkStyles} href="/sheet">Sheet</a>
+          <a style={menuLinkStyles} href="/workbook">Workbook</a>
         </div>
         {children}
       </body>

apps/react/app/page.tsx

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

apps/react/app/sheet/App.tsx

@@ -0,0 +1,44 @@
+'use client'
+import { sheet } from '@/utils/sheet'
+import { useFlatfile, useEvent, Sheet, Workbook, Space } from '@flatfile/react'
+import React from 'react'
+import styles from '../page.module.css'
+const App = () => {
+  const { open, openPortal, closePortal } = useFlatfile()
+
+  useEvent('**', async (event) => {
+    console.group('Event ->', event.topic)
+    console.log({ event })
+    console.groupEnd()
+  })
+
+  return (
+    <div className={styles.main}>
+      <div className={styles.description}>
+        <button
+          onClick={() => {
+            open ? closePortal() : openPortal()
+          }}
+        >
+          {open ? 'CLOSE' : 'OPEN'} PORTAL
+        </button>
+      </div>
+
+      <Sheet
+        config={sheet}
+        onRecordHook={(record) => {
+          const email = record.get('email')
+          if (!email) {
+            record.addError('email', 'Gotta add an Email here!')
+          }
+          return record
+        }}
+        onSubmit={(sheet) => {
+          console.log('onSubmit from Sheet Action', { sheet })
+        }}
+      />
+    </div>
+  )
+}
+
+export default App

apps/react/app/sheet/page.tsx

@@ -0,0 +1,20 @@
+'use client'
+import React from 'react'
+
+import App from './App'
+import { FlatfileProvider } from '@flatfile/react'
+
+export default function Home() {
+  const PUBLISHABLE_KEY = process.env.NEXT_PUBLIC_FLATFILE_PUBLISHABLE_KEY
+  if (!PUBLISHABLE_KEY) return <>No Publishable Key Available</>
+  return (
+    <FlatfileProvider
+      publishableKey={PUBLISHABLE_KEY}
+      config={{
+        preload: true,
+      }}
+    >
+      <App />
+    </FlatfileProvider>
+  )
+}

apps/react/app/workbook/App.tsx

@@ -0,0 +1,53 @@
+'use client'
+import { workbook } from '@/utils/workbook'
+import { useFlatfile, useEvent, Sheet, Workbook, Space } from '@flatfile/react'
+import React from 'react'
+import styles from '../page.module.css'
+const App = () => {
+  const { open, openPortal, closePortal } = useFlatfile()
+
+  useEvent('**', async (event) => {
+    console.group('Event ->', event.topic)
+    console.log({ event })
+    console.groupEnd()
+  })
+
+  return (
+    <div className={styles.main}>
+      <div className={styles.description}>
+        <button
+          onClick={() => {
+            open ? closePortal() : openPortal()
+          }}
+        >
+          {open ? 'CLOSE' : 'OPEN'} PORTAL
+        </button>
+      </div>
+
+      <Workbook
+        config={workbook}
+        onSubmit={async (sheet) => {
+          console.log('on Workbook Submit ', { sheet })
+        }}
+        onRecordHooks={[
+          [
+            'contacts',
+            (record) => {
+              record.set('email', 'SHEET 1 RECORDHOOKS')
+              return record
+            },
+          ],
+          [
+            'contacts2',
+            (record) => {
+              record.set('email', 'SHEET 2 RECORDHOOKS')
+              return record
+            },
+          ],
+        ]}
+      />
+    </div>
+  )
+}
+
+export default App

apps/react/app/workbook/page.tsx

@@ -0,0 +1,20 @@
+'use client'
+import React from 'react'
+
+import App from './App'
+import { FlatfileProvider } from '@flatfile/react'
+
+export default function Home() {
+  const PUBLISHABLE_KEY = process.env.NEXT_PUBLIC_FLATFILE_PUBLISHABLE_KEY
+  if (!PUBLISHABLE_KEY) return <>No Publishable Key Available</>
+  return (
+    <FlatfileProvider
+      publishableKey={PUBLISHABLE_KEY}
+      config={{
+        preload: true,
+      }}
+    >
+      <App />
+    </FlatfileProvider>
+  )
+}