feat: simplify @flatfile/javascript onboarding (#853)

* feat: initial pass at startFlatfile * feat: fix types * adds data returning to the onData CB * gets record hooks working * restructures data egress * adds sheet option and creates a workbook from a sheet * data egress start * adds stream and inChunks methods * removes a code comment * adds new example app for the simplest of use cases * adds onCancel * updated egress * styling from Friday demo * fail job if error is caught * reworks some things * add proper detail to tsignore comment * handle empty state for onRecordHook and onSubmit * refactor onSubmit stuff --------- Co-authored-by: brentkulwicki <[email protected]> Co-authored-by: Brent Kulwicki <[email protected]>
FlatFilers · Nov 22, 2023 · 87ce826 · 87ce826
1 parent 565a8da
commit 87ce826
Show file tree

Hide file tree

Showing 12 changed files with 559 additions and 30 deletions.
diff --git a/apps/simple/index.css b/apps/simple/index.css
@@ -0,0 +1,45 @@
+h3 {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    margin-top: 48px;
+}
+
+#flatfileButton {
+    color: #ffffff;
+    background-color: #3b2fc9;
+    padding: 10px;
+    border: 1px solid #3b2fc9;
+    border-radius: 6px;
+}
+
+#flatfileButton:hover {
+    background-color: #090B2F;
+    border: 1px solid #090B2F;
+    cursor: pointer;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#raw_output {
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 50%;
+    padding: 64px;
+    margin: 32px 0;
+    border: 1px solid #c1c6d1;
+    border-radius: 4px;
+    font-family: "Monaco", monospace;
+    background-color: #31383d;
+    color: #fff;
+    height: 500px;
+}
+
+p {
+    text-align: center;
+}
diff --git a/apps/simple/index.html b/apps/simple/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Your Page Title</title>
+    <script src="../../packages/javascript/dist/index.js"></script>
+    <link rel="stylesheet" type="text/css" href="index.css">
+    <script>
+      window.openFlatfile = ({ publishableKey, environmentId }) => {
+        const output = document.getElementById('raw_output')
+        const sheet = {
+          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',
+            },
+          ],
+        }
+        if (!publishableKey) {
+          throw new Error(
+            'You must provide a publishable key - pass through in index.html'
+          )
+        }
+
+        const flatfileOptions = {
+          publishableKey,
+          environmentId,
+          sheet,
+          onSubmit: async (job, sheet) => {
+            const data = await sheet.allData()
+            output.value = JSON.stringify(data, " ", 2)
+            console.log('onSubmit', data)
+          },
+          onRecordHook: (record, event) => {
+            const firstName = record.get('firstName')
+            const lastName = record.get('lastName')
+            if (firstName && !lastName) {
+              record.set('lastName', 'Rock')
+              record.addInfo('lastName', 'Welcome to the Rock fam')
+            }
+            return record
+          },
+          onCancel: () => {
+            console.log('cancel')
+          },
+        }
+
+        window.FlatFileJavaScript.startFlatfile(flatfileOptions)
+      }
+    </script>
+  </head>
+  <body>
+    <h3>We heard you like Rocks? So do we. Tell us about this 👇</h3>
+    <div class="container">
+      <button
+              id="flatfileButton"
+              onclick="openFlatfile({ publishableKey: 'pk_c7ea3ee12a4f4636b99dcf48429b541b', environmentId: 'us_env_HuwLrKpB'})"
+      >
+        Import stuff
+      </button>
+    </div>
+    <label for="raw_output"></label>
+    <textarea id="raw_output">Your raw output will appear here.</textarea>
+    <br>
+    <p>*In order for this to work properly, you must have the JavaScript package built locally.</p>
+  </body>
+</html>
diff --git a/apps/simple/package.json b/apps/simple/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "simplest-flatfile",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "start": "parcel index.html"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "dotenv": "^16.3.1",
+    "parcel": "^2.3.1"
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/embedded-utils/package.json b/packages/embedded-utils/package.json
@@ -13,9 +13,10 @@
     "test": "jest --runInBand --forceExit --passWithNoTests"
   },
   "dependencies": {
-    "pubnub": "^7.2.2",
+    "@flatfile/api": "^1.5.34",
     "@flatfile/listener": "*",
-    "@flatfile/api": "^1.5.34"
+    "@flatfile/util-common": "^0.2.4",
+    "pubnub": "^7.2.2"
   },
   "devDependencies": {
     "@types/jest": "^28.1.4",

diff --git a/packages/embedded-utils/src/index.ts b/packages/embedded-utils/src/index.ts
@@ -1,5 +1,5 @@
 import { State } from './types/State'
-import { ISpace, NewSpaceFromPublishableKey, IUserInfo, ISpaceInfo } from './types/Space'
+import { ISpace, NewSpaceFromPublishableKey, IUserInfo, ISpaceInfo, SimpleOnboarding } from './types/Space'
 import { InitializePubnub } from './types/InitializePubnub'
 import { IThemeConfig } from './types/IThemeConfig'
 import { IThemeGenerator } from './types/ThemeGenerator'
@@ -17,8 +17,10 @@ export type {
   IUserInfo,
   ISpaceInfo,
   ISidebarConfig,
+  SimpleOnboarding
 }
 
 export { initializePubnub } from './utils/initializePubnub'
 export { fetchEventToken, EventSubscriber } from './utils/EventSubscriber'
-export { getErrorMessage } from './utils/getErrorMessage'
+export { getErrorMessage } from './utils/getErrorMessage'
+export { JobHandler, SheetHandler } from './utils/SubmitUtil'