Update structure to be closer to next.js recommendation

.eslintrc

@@ -0,0 +1,73 @@
+{
+  "extends": [
+    "eslint:recommended", 
+    "plugin:@typescript-eslint/recommended",
+    "prettier", 
+    "next/core-web-vitals"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
+  ],
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "requireConfigFile": false,
+    "sourceType": "module",
+    "ecmaVersion": 2022,
+    "ecmaFeatures": {
+      "jsx": true,
+      "impliedStrict": true
+    }
+  },
+  "globals":{
+    "JSX": "readonly"
+  },
+  "rules": {
+    "react/no-unescaped-entities": "off",
+    "prettier/prettier": [
+      "error", 
+      {
+        "endOfLine": "lf",
+        "singleQuote": true,
+        "block-closing-brace-newline-after": "always-multi-line",
+        "block-closing-brace-empty-line-before": "never",
+        "block-closing-brace-space-before": "always",
+        "block-opening-brace-space-after": "always",
+        "block-opening-brace-space-before": "always",
+        "block-closing-brace-newline-before": "always-multi-line",
+        "block-opening-brace-newline-after": "always-multi-line",
+        "tabs": false,
+        "indent_size": 2,
+        "trailingComma": "none",
+        "comma-dangle": ["error", {
+          "arrays": "never",
+          "objects": "never",
+          "imports": "never",
+          "exports": "never",
+          "functions": "never"
+        }]
+      }
+    ],
+    "no-console": "warn",
+    "no-undef": "error",
+    "no-unused-vars": "warn",
+    "semi": 2,
+    "no-extra-semi": 2,
+    "quotes": [2, "single", "avoid-escape"]
+
+    // "indent": ["error", 2],
+
+  },
+  "overrides": [{
+    "files": ["*.cjs", "*.js"],
+    "rules":{
+      "@typescript-eslint/no-var-requires": "off"
+    }
+  }]
+}

.nvmrc

@@ -1 +1 @@
-v18
+v18

app/Layout.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Menu from './Menu';
+import './global.css';
+
+export const metadata = {
+  title: 'Embedded Flatfile in a Next.js App',
+  description: 'Generated by Flatfile'
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Menu />
+      <main>{children}</main>
+    </>
+  );
+}

app/globals/Menu.tsx → app/Menu/index.tsx

@@ -1,12 +1,10 @@
-"use client";
-import styles from "./page.module.css";
-import Link from "next/link";
-import "./global.css";
-import { usePathname } from "next/navigation";
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import styles from './Menu.module.css';
 
 const routes = [
-  { path: "/new-space", label: "New Space" },
-  { path: "/reused-space", label: "Reused Space" },
+  { path: '/new-space', label: 'New Space' },
+  { path: '/reuse-space', label: 'Reuse Space' }
 ];
 
 export default function Menu() {
@@ -24,7 +22,7 @@ export default function Menu() {
             key={path}
             href={path}
             className={`tab tab-bordered ${
-              currentRoute === path ? "tab-active" : ""
+              currentRoute === path ? 'tab-active' : ''
             }`}
           >
             {label}

app/new-space/NewSpaceApp.tsx → app/NewSpace/index.tsx

@@ -1,7 +1,7 @@
 "use client";
-import React, { Dispatch, SetStateAction, useState } from "react";
 import { ISpace, useSpace } from "@flatfile/react";
 import Link from "next/link";
+import React, { useState } from "react";
 
 const Space = ({
   callback,
@@ -10,20 +10,19 @@ const Space = ({
   callback: () => void;
   config: ISpace;
 }) => {
-  const space = useSpace({
+  return useSpace({
     ...config,
     closeSpace: {
-      operation: "contacts:submit",
+      operation: "submitActionFg",
       onClose: () => callback(),
     },
   });
-  return space;
 };
 
-export default function App({ config }: { config: ISpace }) {
+export default function NewSpace({ config }: { config: ISpace }) {
   const [showSpace, setShowSpace] = useState(false);
   const [success, setSuccess] = useState(false);
-  const credentials = !!config.publishableKey && !!config.environmentId;
+  const credentials = !!config.publishableKey;
   return (
     <div>
       {credentials ? (

app/reused-space/ReusedSpaceApp.tsx → app/ReuseSpace/index.tsx

@@ -1,7 +1,7 @@
 "use client";
-import React, { Dispatch, SetStateAction, useState } from "react";
 import { ISpace, useSpace } from "@flatfile/react";
-import { useEffect } from "react";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { listener } from "../listeners/listeners";
 
 const Space = ({
   setShowSpace,
@@ -16,22 +16,22 @@ const Space = ({
 }) => {
   const spaceProps: ISpace = {
     environmentId: config.environmentId,
+    listener,
     space: {
       id: config.spaceId,
       accessToken: config.accessToken,
     },
   };
-  const space = useSpace({
+  return useSpace({
     ...spaceProps,
     closeSpace: {
-      operation: "contacts:submit",
+      operation: "simpleSubmitAction",
       onClose: () => setShowSpace(false),
     },
   });
-  return space;
 };
 
-function App({
+export default function ReuseSpace({
   spaceId,
   environmentId,
 }: {
@@ -55,14 +55,14 @@ function App({
       const spaceInfo = {
         spaceId,
         accessToken: json.space.data.accessToken,
-        environmentId,
+        ...(environmentId ? { environmentId } : {}),
       };
 
       setData(spaceInfo);
       setLoading(false);
     };
 
-    if (!spaceId || !environmentId) {
+    if (!spaceId) {
       setLoading(false);
       return;
     }
@@ -81,7 +81,7 @@ function App({
       </button>
     );
   }
-  if (!spaceId || !environmentId || error) {
+  if (!spaceId || error) {
     return (
       <div className="alert alert-error">
         <svg
@@ -155,5 +155,3 @@ function App({
     </div>
   );
 }
-
-export default App;

app/globals/global.css → app/global.css

@@ -123,4 +123,4 @@ pre {
 
 /* The description text you see in the error component */
 /* .ff_error_text {
-}*/
+}*/

listeners/basic.ts → app/listeners/listeners.ts

@@ -7,7 +7,7 @@ import { recordHook } from "@flatfile/plugin-record-hook";
  */
 export const listener = FlatfileListener.create((listener) => {
   listener.on("**", (event) => {
-    console.log(`Received event: ${event.topic}`);
+    console.log(`Received event: ${event.topic}`, { event });
   });
 
   listener.use(
@@ -50,4 +50,35 @@ export const listener = FlatfileListener.create((listener) => {
       }
     });
   });
+  listener.filter({ job: "workbook:simpleSubmitAction" }, (configure) => {
+    configure.on("job:ready", async ({ context: { jobId } }) => {
+      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");
+
+        await api.jobs.complete(jobId, {
+          outcome: {
+            acknowledge: true,
+            message: "This is now complete.",
+            next: {
+              type: "wait",
+            },
+          },
+        });
+      } catch (error: any) {
+        console.error("Error:", error.stack);
+
+        await api.jobs.fail(jobId, {
+          outcome: {
+            message: "This job encountered an error.",
+          },
+        });
+      }
+    });
+  });
 });

app/workbooks/workbooks.ts

@@ -0,0 +1,42 @@
+import { Flatfile } from '@flatfile/api';
+
+export const workbook: Pick<
+  Flatfile.CreateWorkbookConfig,
+  'name' | 'labels' | 'sheets' | 'actions'
+> = {
+  name: 'All Data',
+  labels: ['pinned'],
+  sheets: [
+    {
+      name: 'Contacts',
+      slug: 'contacts',
+      allowAdditionalFields: true,
+      fields: [
+        {
+          key: 'firstName',
+          type: 'string',
+          label: 'First Name'
+        },
+        {
+          key: 'lastName',
+          type: 'string',
+          label: 'Last Name'
+        },
+        {
+          key: 'email',
+          type: 'string',
+          label: 'Email'
+        }
+      ]
+    }
+  ],
+  actions: [
+    {
+      operation: 'submitActionFg',
+      mode: 'foreground',
+      label: 'Submit foreground',
+      description: 'Submit data to webhook.site',
+      primary: true
+    }
+  ]
+};