diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..2a4e0ae
--- /dev/null
+++ b/.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"
+ }
+ }]
+}
\ No newline at end of file
diff --git a/.nvmrc b/.nvmrc
index 3f430af..0828ab7 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v18
+v18
\ No newline at end of file
diff --git a/app/Layout.tsx b/app/Layout.tsx
new file mode 100644
index 0000000..9b13c9b
--- /dev/null
+++ b/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 (
+ <>
+
+ {children}
+ >
+ );
+}
diff --git a/app/globals/page.module.css b/app/Menu/Menu.module.css
similarity index 100%
rename from app/globals/page.module.css
rename to app/Menu/Menu.module.css
diff --git a/app/globals/Menu.tsx b/app/Menu/index.tsx
similarity index 63%
rename from app/globals/Menu.tsx
rename to app/Menu/index.tsx
index c9e758c..3bbed4a 100644
--- a/app/globals/Menu.tsx
+++ b/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}
diff --git a/app/new-space/NewSpaceApp.tsx b/app/NewSpace/index.tsx
similarity index 89%
rename from app/new-space/NewSpaceApp.tsx
rename to app/NewSpace/index.tsx
index 1640b2e..444df5e 100644
--- a/app/new-space/NewSpaceApp.tsx
+++ b/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 (
{credentials ? (
diff --git a/app/reused-space/ReusedSpaceApp.tsx b/app/ReuseSpace/index.tsx
similarity index 91%
rename from app/reused-space/ReusedSpaceApp.tsx
rename to app/ReuseSpace/index.tsx
index edd1674..7b36806 100644
--- a/app/reused-space/ReusedSpaceApp.tsx
+++ b/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({
);
}
- if (!spaceId || !environmentId || error) {
+ if (!spaceId || error) {
return (