diff --git a/package-lock.json b/package-lock.json index 4acf132..cd52682 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,12 +8,13 @@ "name": "flatfile-react-app", "version": "0.1.0", "dependencies": { - "@flatfile/api": "^1.7.8", - "@flatfile/listener": "^1.0.1", - "@flatfile/plugin-record-hook": "^1.4.5", - "@flatfile/react": "^7.8.9", + "@flatfile/api": "^1.8.0", + "@flatfile/listener": "^1.0.2", + "@flatfile/plugin-record-hook": "^1.5.0", + "@flatfile/react": "^7.9.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", "react-scripts": "5.0.1", "web-vitals": "^3.5.2" }, @@ -2520,9 +2521,9 @@ } }, "node_modules/@flatfile/api": { - "version": "1.7.8", - "resolved": "https://registry.npmjs.org/@flatfile/api/-/api-1.7.8.tgz", - "integrity": "sha512-W077Pra/rtyQeJncznhs+KFOH5BdCO0rUJdYkF9dhLZalE9wPGT4qDuXwaNq9891OL4nGvS9+/7FCwATV4LpEw==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@flatfile/api/-/api-1.8.0.tgz", + "integrity": "sha512-Tg66BTvgewKcfbRnNQ0oW/KrsOzC5dBdLYbMJ0rRySGwJJmGHG97dYOjHcH4HJUJ7SwsGhPZN/2pjhdZht86fw==", "dependencies": { "@flatfile/cross-env-config": "0.0.4", "@types/pako": "2.0.1", @@ -2540,114 +2541,26 @@ "integrity": "sha512-mNaqtASTly4N09pjQts5zDnYXFLC891TCxJEiFUnil8p6lQciyd0gnPSnhJD0TTlO5817gX3mLE9RDoAETtIbg==" }, "node_modules/@flatfile/embedded-utils": { - "version": "1.1.12", - "resolved": "https://registry.npmjs.org/@flatfile/embedded-utils/-/embedded-utils-1.1.12.tgz", - "integrity": "sha512-Xp6PLKN7QfU6WxKxUmRiSDyEMSSY2Shawmzx5LJt5wNIaLwKXVrTrda8q0xmhCzveSGAUV/9bdJ6neKIF3plsg==", + "version": "1.1.15", + "resolved": "https://registry.npmjs.org/@flatfile/embedded-utils/-/embedded-utils-1.1.15.tgz", + "integrity": "sha512-xi0XWDo7ZdTHwDcNgfM3Mewg6w2kD14w1lpvQB0/KW6SOCjxSHd6CY/GazWVXf0DOSaaaW2UaiVrsH855cOwfA==", "dependencies": { - "@flatfile/api": "^1.6.7", - "@flatfile/listener": "^1.0.0", - "@flatfile/util-common": "^0.2.4", + "@flatfile/api": "^1.7.11", + "@flatfile/listener": "^1.0.2", + "@flatfile/util-common": "^1.1.0", "pubnub": "^7.2.2" } }, - "node_modules/@flatfile/embedded-utils/node_modules/@flatfile/util-common": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/@flatfile/util-common/-/util-common-0.2.5.tgz", - "integrity": "sha512-3Rwv4POI416OVDeIgSlXbF7FbxAeeChK/PDLw4jia0aArDWFATH2+51JHyxcdjMlKiDpr38Smf3QQdN22Ese/A==", - "dependencies": { - "@flatfile/api": "^1.6.0", - "@flatfile/listener": "^0.3.17" - }, - "engines": { - "node": ">= 16" - } - }, - "node_modules/@flatfile/embedded-utils/node_modules/@flatfile/util-common/node_modules/@flatfile/listener": { - "version": "0.3.19", - "resolved": "https://registry.npmjs.org/@flatfile/listener/-/listener-0.3.19.tgz", - "integrity": "sha512-EywBIzQ2y1NjtXZdj/3EKJAnf+Kzw/o0cvCy1xj/r5HRP4O9S2qW9muIuSyhxWRQWlLyf64UKhGX1+Se++0S+A==", - "dependencies": { - "@rollup/plugin-json": "^6.0.1", - "@rollup/plugin-node-resolve": "^15.2.3", - "ansi-colors": "^4.1.3", - "flat": "^5.0.2", - "pako": "^2.1.0", - "wildcard-match": "^5.1.2" - }, - "peerDependencies": { - "@flatfile/api": "^1.5.10", - "axios": "^1.4.0" - } - }, - "node_modules/@flatfile/embedded-utils/node_modules/@rollup/plugin-node-resolve": { - "version": "15.2.3", - "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz", - "integrity": "sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==", - "dependencies": { - "@rollup/pluginutils": "^5.0.1", - "@types/resolve": "1.20.2", - "deepmerge": "^4.2.2", - "is-builtin-module": "^3.2.1", - "is-module": "^1.0.0", - "resolve": "^1.22.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^2.78.0||^3.0.0||^4.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, - "node_modules/@flatfile/embedded-utils/node_modules/@rollup/pluginutils": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", - "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==", - "dependencies": { - "@types/estree": "^1.0.0", - "estree-walker": "^2.0.2", - "picomatch": "^2.3.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, - "node_modules/@flatfile/embedded-utils/node_modules/@types/resolve": { - "version": "1.20.2", - "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", - "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==" - }, - "node_modules/@flatfile/embedded-utils/node_modules/estree-walker": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", - "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" - }, - "node_modules/@flatfile/embedded-utils/node_modules/pako": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", - "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==" - }, "node_modules/@flatfile/hooks": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/@flatfile/hooks/-/hooks-1.3.2.tgz", - "integrity": "sha512-5HUBar6CnhhMU7lr4DnD79QfV4MtR1dUjZQJdt50HCS5pxy+tbF70JJSnoF/6itj+0hATkSC/Ep5C1XfABAGYw==" + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@flatfile/hooks/-/hooks-1.4.0.tgz", + "integrity": "sha512-P139Fkwz1GchCswjVzjduSSbIFQnSskq+gsICvgN9FY4WQ5zymJdcZDEjKgIIOxz1Jtn3Dy8Z66VHIP0HXfb/g==", + "peer": true }, "node_modules/@flatfile/listener": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@flatfile/listener/-/listener-1.0.1.tgz", - "integrity": "sha512-XClO1KhQDL9Q7zfTANcMeole7Q/2QaIhzttZI+p04PjB+bUlIvk+yUbHvhnLahNkvLHRoIth4p+oBj8tPC1cxA==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@flatfile/listener/-/listener-1.0.2.tgz", + "integrity": "sha512-/VW0UvSGBwDG85LbSOa9Nj2aCQ8pMNsaGqiK7N/tWCXtiwF0Pnani1KoESMsGN3ECS7IIrDNuGYmtlc1igUDiQ==", "dependencies": { "ansi-colors": "^4.1.3", "cross-fetch": "^4.0.0", @@ -2665,30 +2578,30 @@ "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==" }, "node_modules/@flatfile/plugin-record-hook": { - "version": "1.4.5", - "resolved": "https://registry.npmjs.org/@flatfile/plugin-record-hook/-/plugin-record-hook-1.4.5.tgz", - "integrity": "sha512-djhVTFGiXpeRXM6/4PFwk5V5dxmAV6yUv5tkVvxHiElQycRPR3kknAtawTGL82L8rfr6xlvR3jffo4HzUbPSJg==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@flatfile/plugin-record-hook/-/plugin-record-hook-1.5.0.tgz", + "integrity": "sha512-/HGJ/clZ/4mzhcu1it1niEoWeU4y67sp0rlWWcwX38E49+8S8T071qwMvqzam84lwrlhuXXmMQf5jKZxsVXlbg==", "dependencies": { - "@flatfile/hooks": "^1.3.1", - "@flatfile/util-common": "^1.0.0" + "@flatfile/util-common": "^1.1.1" }, "engines": { - "node": ">= 12" + "node": ">= 16" }, "peerDependencies": { - "@flatfile/api": "^1.7.4", + "@flatfile/api": "^1.8.0", + "@flatfile/hooks": "^1.4.0", "@flatfile/listener": "^1.0.1" } }, "node_modules/@flatfile/react": { - "version": "7.8.9", - "resolved": "https://registry.npmjs.org/@flatfile/react/-/react-7.8.9.tgz", - "integrity": "sha512-0CO9XuSoLNM7oZIigyoRvLyx7dRLDMt8hkPjH4v60uN6VTA41ZqbU3FXf+49e5OGksboTDLAiZg43xIuuoMdHQ==", + "version": "7.9.1", + "resolved": "https://registry.npmjs.org/@flatfile/react/-/react-7.9.1.tgz", + "integrity": "sha512-9s2Ct60tZheleXDyy2pNypwNZvuuh7ZlBdarFapoM6rTC7rrYZ373XLOliDFd3PC90aG1hOIZRau3SuNUEEWdg==", "dependencies": { - "@flatfile/api": "^1.6.7", + "@flatfile/api": "^1.7.4", "@flatfile/cross-env-config": "^0.0.5", - "@flatfile/embedded-utils": "^1.1.12", - "@flatfile/listener": "^1.0.1", + "@flatfile/embedded-utils": "^1.1.15", + "@flatfile/listener": "^1.0.2", "@flatfile/plugin-record-hook": "^1.4.1", "tinycolor2": "^1.6.0" }, @@ -2703,17 +2616,26 @@ "integrity": "sha512-4/hRTQ6BsD+CQKkrexcqd3wwIyRx7uilC0JOF6E0Q1K26/pgatuo1yBMO7Ofo3zs3ZqM5YISQps+0huggypMmg==" }, "node_modules/@flatfile/util-common": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@flatfile/util-common/-/util-common-1.0.0.tgz", - "integrity": "sha512-7NjZRdyucdXhhA6LnIhDwSlsoPZbSjRbFex1nlWyygcdjeVRZWMoVtyl0WcStjhmgOd1Pl8ESl8rC2mTUzrjkg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@flatfile/util-common/-/util-common-1.1.1.tgz", + "integrity": "sha512-6At1j5VdZvDGdFNbZTSk9PH9qn4LjMVLwVmdotG5u6fYkh9jvRGITv1iXaTZjVEUbQPBkU2+Jebx/EbrOxdFyA==", "dependencies": { "@flatfile/api": "^1.7.4", - "@flatfile/listener": "^1.0.1" + "@flatfile/cross-env-config": "^0.0.5", + "cross-fetch": "^4.0.0" }, "engines": { "node": ">= 16" + }, + "peerDependencies": { + "@flatfile/listener": "^1.0.1" } }, + "node_modules/@flatfile/util-common/node_modules/@flatfile/cross-env-config": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/@flatfile/cross-env-config/-/cross-env-config-0.0.5.tgz", + "integrity": "sha512-4/hRTQ6BsD+CQKkrexcqd3wwIyRx7uilC0JOF6E0Q1K26/pgatuo1yBMO7Ofo3zs3ZqM5YISQps+0huggypMmg==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -3847,6 +3769,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3869,51 +3799,6 @@ } } }, - "node_modules/@rollup/plugin-json": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz", - "integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==", - "dependencies": { - "@rollup/pluginutils": "^5.1.0" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, - "node_modules/@rollup/plugin-json/node_modules/@rollup/pluginutils": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", - "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==", - "dependencies": { - "@types/estree": "^1.0.0", - "estree-walker": "^2.0.2", - "picomatch": "^2.3.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, - "node_modules/@rollup/plugin-json/node_modules/estree-walker": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", - "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" - }, "node_modules/@rollup/plugin-node-resolve": { "version": "11.2.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz", @@ -5161,9 +5046,9 @@ } }, "node_modules/agent-base": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz", - "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz", + "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==", "dependencies": { "debug": "^4.3.4" }, @@ -5607,17 +5492,6 @@ "node": ">=4" } }, - "node_modules/axios": { - "version": "1.6.8", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", - "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", - "peer": true, - "dependencies": { - "follow-redirects": "^1.15.6", - "form-data": "^4.0.0", - "proxy-from-env": "^1.1.0" - } - }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -9952,20 +9826,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-builtin-module": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz", - "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==", - "dependencies": { - "builtin-modules": "^3.3.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/is-callable": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz", @@ -15565,9 +15425,9 @@ "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==" }, "node_modules/pubnub": { - "version": "7.6.1", - "resolved": "https://registry.npmjs.org/pubnub/-/pubnub-7.6.1.tgz", - "integrity": "sha512-wJK92ojRAqQb5uB5HmjrC2uQYHTbu18rhxZlQHqYXq0/+AMM9uyrSaVtIF9RsnVHI6j0Wr9KD9JAUHszQdsA6g==", + "version": "7.6.2", + "resolved": "https://registry.npmjs.org/pubnub/-/pubnub-7.6.2.tgz", + "integrity": "sha512-oeYja8FvKkoYh5JLPDCXAOtIaJVYyB+MJhSqyXNmCpCmtb3ES/E5rTu9QcstAfEligfV/T9eN9SR6StZI+PrIg==", "dependencies": { "agentkeepalive": "^3.5.2", "buffer": "^6.0.3", @@ -15812,6 +15672,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "dependencies": { + "@remix-run/router": "1.15.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "dependencies": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -17762,9 +17652,9 @@ } }, "node_modules/socks": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.1.tgz", - "integrity": "sha512-B6w7tkwNid7ToxjZ08rQMT8M9BJAf8DKx8Ft4NivzH0zBUfd6jldGcisJn/RLgxcX3FPNDdNQCUEMMT79b+oCQ==", + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz", + "integrity": "sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==", "dependencies": { "ip-address": "^9.0.5", "smart-buffer": "^4.2.0" @@ -17775,11 +17665,11 @@ } }, "node_modules/socks-proxy-agent": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.2.tgz", - "integrity": "sha512-8zuqoLv1aP/66PHF5TqwJ7Czm3Yv32urJQHrVyhD7mmA6d61Zv8cIXQYPTWwmg6qlupnPvs/QKDmfa4P/qct2g==", + "version": "8.0.3", + "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.3.tgz", + "integrity": "sha512-VNegTZKhuGq5vSD6XNKlbqWhyt/40CgoEw8XxD6dhnm8Jq9IEa3nIa4HwnM8XOqU0CdB0BwWVXusqiFXfHB3+A==", "dependencies": { - "agent-base": "^7.0.2", + "agent-base": "^7.1.1", "debug": "^4.3.4", "socks": "^2.7.1" }, diff --git a/package.json b/package.json index acec51a..46a3400 100644 --- a/package.json +++ b/package.json @@ -3,12 +3,13 @@ "version": "0.1.0", "private": true, "dependencies": { - "@flatfile/api": "^1.7.8", - "@flatfile/listener": "^1.0.1", - "@flatfile/plugin-record-hook": "^1.4.5", - "@flatfile/react": "^7.8.9", + "@flatfile/api": "^1.8.0", + "@flatfile/listener": "^1.0.2", + "@flatfile/plugin-record-hook": "^1.5.0", + "@flatfile/react": "^7.9.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3", "react-scripts": "5.0.1", "web-vitals": "^3.5.2" }, diff --git a/public/index.html b/public/index.html index d7340fc..5a8359b 100644 --- a/public/index.html +++ b/public/index.html @@ -1,19 +1,22 @@ - - - - - - - - - + - React App - - - -
- - - + + + \ No newline at end of file diff --git a/public/styles.css b/public/styles.css index cb9230a..9559469 100644 --- a/public/styles.css +++ b/public/styles.css @@ -5,32 +5,166 @@ body { margin: 0; padding: 0; font-family: sans-serif; - background: #090b2b; - color: #fff; + background: #fff; + font-family: "Inter", sans-serif; + font-optical-sizing: auto; + font-style: normal; + font-variation-settings: "slnt" 0; } #root { display: flex; align-items: center; justify-content: center; - height: 100%; + flex-direction: column; +} + +.success { + color: black; /* White text color */ + padding: 10px; /* Some padding */ + margin: 20px 0; /* Some space above and below */ + text-align: center; /* Centered text */ + box-shadow: rgb(0, 0, 0) 8px 8px; + border: 2px solid black; +} + +.centered-sub-navigation { + text-align: center; +} + +nav { + white-space: nowrap; + display: flex; + padding: 0 3rem; + border-bottom: 1px solid rgb(232, 237, 244); +} + +nav ul { + margin: 0; + padding: 0; + margin-left: -0.75rem; + overflow: hidden; +} + +nav li { + display: inline-block; +} + +nav li a { + align-items: center; + color: #999; + display: flex; + font-weight: 600; + transition: color 0.25s linear 0s; + white-space: nowrap; + cursor: pointer; + font-size: 0.875rem; + line-height: 1.25rem; + padding: 0.875rem 0.75rem; + text-decoration: none; + position: relative; +} + +nav li a:hover { + color: rgba(9, 11, 43, 0.8); +} +nav li a:after { + content: ""; + display: block; + position: absolute; + background: black; + bottom: -2px; + left: 0; + right: 0; + height: 2px; + transition: 0.25s ease; +} + +nav li a.active { + color: black; +} +nav li a.active:after { + content: ""; + display: block; + position: absolute; + background: black; + bottom: 0; + left: 0; + right: 0; + height: 2px; +} + +pre.inline { + display: inline-block; + background: rgb(239, 239, 239); + padding: 5px 10px; + border-radius: 20px; + margin: 0; +} + +.menu { + width: 100%; + display: flex; + flex-direction: column; + max-width: 92rem; + padding-left: 3rem; + padding: 0px; + background-color: rgb(255, 255, 255); +} + +.top-menu { + border-bottom: 1px solid rgb(232, 237, 244); + padding: 1rem 3rem; +} +.border-space { + border-bottom: 1px solid rgb(232, 237, 244); + padding: 1rem 0; +} +.top-menu img { + height: 1.75rem; } .content { /* Adjust the width and height as needed */ - width: 800px; - height: 200px; - padding: 0 20px 0 50px; + width: 1000px; + padding: 25px; } .contrast { padding: 10px; - margin: 10px 5px 0 0; + margin-right: 5px; border-radius: 4px; border: 0; font-weight: 600; cursor: pointer; } + +.flatfile-button { + background: rgb(59, 47, 201); + color: white; + border-radius: 0; + border: 0; + font-weight: 600; + cursor: pointer; + padding: 10px 30px 10px 15px; + position: relative; + transition: 0.25s ease; +} +.flatfile-button .button-arrow { + position: absolute; + right: 15px; + top: 50%; + transform: translateY(-50%); + height: 25px; + width: 5px; + transition: 0.25s ease; +} +.flatfile-button:hover { + background: rgba(59, 47, 201, 0.9); +} +.flatfile-button:hover .button-arrow { + transform: translateY(-50%) translateX(3px); +} /* End of styles for home page */ :root { @@ -134,6 +268,54 @@ body { color: var(--ff-secondary-color) !important; } +.main { + padding: 30px; + min-height: 100vh; +} + +.main .space-contents { + width: 100% !important; +} + +.description { + display: inherit; + justify-content: inherit; + align-items: inherit; + font-size: 0.85rem; + max-width: var(--max-width); + width: 100%; + z-index: 2; + font-family: var(--font-mono); +} + +.description a { + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; +} + +.description button { + position: relative; + margin: 0; + padding: 1rem; + background-color: rgba(var(--callout-rgb), 0.5); + border: 1px solid rgba(var(--callout-border-rgb), 0.3); + border-radius: var(--border-radius); + font-family: var(--font-mono); + cursor: pointer; + transition: 0.25s ease; +} + +.no-radius-iframe { + border-radius: 0!important; +} + +a { + color: black; + font-weight: 600; +} + /* End style overrides for when you cancel out of the Flatfile modal */ /* End style overrides for when Flatfile is displayed as a modal */ diff --git a/src/App.tsx b/src/App.tsx index c46a523..99c9005 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,53 +1,130 @@ -import { ISpace, initializeFlatfile } from "@flatfile/react"; -import { useState } from "react"; -import { listener } from "./listeners/simple"; -import { workbook } from "./workbook"; +import { NavLink, Outlet, Route, Routes } from "react-router-dom"; +import { WorkbookApp } from "./WorkbookApp"; +import { SheetApp } from "./SheetApp"; +import { SpaceApp } from "./SpaceApp"; export default function App() { - const spaceProps: ISpace = { - name: "Embedded Space", - publishableKey: "YOUR_PUBPLISHABLE_KEY", - environmentId: "YOUR_ENVIRONMENT_ID", - workbook, - listener, - sidebarConfig: { - showSidebar: false, - }, - themeConfig: { - root: { - primaryColor: "red", - }, - sidebar: { - logo: "https://images.ctfassets.net/hjneo4qi4goj/gL6Blz3kTPdZXWknuIDVx/7bb7c73d93b111ed542d2ed426b42fd5/flatfile.svg", - }, - }, - closeSpace: { - operation: "submitActionFg", - onClose: () => setShowSpace(false), - }, - }; + // SET YOUR OWN PUBLISHABLE KEY HERE!! + // const PUBLISHABLE_KEY = "pk_123456"; + const PUBLISHABLE_KEY = undefined; + if (PUBLISHABLE_KEY === undefined) { + return ; + } else { + return ( + + }> + } + /> + } + /> + } + /> + + + ); + } +} - const [showSpace, setShowSpace] = useState(false); - const { Space, OpenEmbed } = initializeFlatfile(spaceProps); +const Layout = ({ publishableKey }: { publishableKey: string }) => { + return ( + <> +
+
+ Flatfile logo +
- const onOpenSpace = async () => { - setShowSpace(!showSpace); - await OpenEmbed(); - }; + +
+
+ {publishableKey === "pk_123456" ? ( + <>Houston we have a problem + ) : ( + + )} + + ); +}; + +const CheckPublishableKey = () => { return ( -
-

- <Flatfile /> -

-

Embed Flatfile in just a few lines of code.

- {/*Button to trigger the modal */} -
- - {showSpace && } + <> +
+
+ Flatfile logo +
+
+
+
+

Houston we have a problem...

+

+ Looks like you need to put in your{" "} + 

publishable key
. Sign in to your{" "} + + Flatfile Dashboard + {" "} + and find it under API Keys & Secrets. +

-
+ ); -} +}; diff --git a/src/SheetApp.tsx b/src/SheetApp.tsx new file mode 100644 index 0000000..cedb1a9 --- /dev/null +++ b/src/SheetApp.tsx @@ -0,0 +1,65 @@ +import { + FlatfileProvider, + Sheet, + useEvent, + useFlatfile, +} from "@flatfile/react"; +import { sheet } from "./configs/sheet"; +import Button from "./utils/Button"; + +export const SheetApp = ({ publishableKey }: { publishableKey: string }) => { + return ( + + + + ); +}; + +const SheetConfig = () => { + const { open, openPortal, closePortal } = useFlatfile(); + + // This will close the Portal instance when you confirm the dialog after the Workbook onSubmit function runs + useEvent( + "job:outcome-acknowledged", + { + operation: `sheetSubmitAction-${sheet.slug}`, + status: "complete", + }, + async (event) => { + // any logic related to the event needed for closing the event + console.log({ event }); + // close the portal iFrame window + closePortal(); + } + ); + + return ( +
+
+

+ The 
{``}
Component +

+

Embed a Flatfile Sheet in just a few lines of code.

+ {/*Button to trigger the modal */} + +
+ + { + console.log("on Workbook Submit ", { sheet }); + }} + onRecordHook={(record) => { + record.set("lastName", "Rock"); + return record; + }} + /> +
+ ); +}; diff --git a/src/SpaceApp.tsx b/src/SpaceApp.tsx new file mode 100644 index 0000000..50bcf43 --- /dev/null +++ b/src/SpaceApp.tsx @@ -0,0 +1,179 @@ +"use client"; +import { + useFlatfile, + useListener, + usePlugin, + useEvent, + Workbook, + Space, + Document, + Sheet, + FlatfileProvider, +} from "@flatfile/react"; +import { useState } from "react"; +import { recordHook } from "@flatfile/plugin-record-hook"; +import { sheet } from "./configs/sheet"; +import { workbook } from "./configs/workbook"; +import { document } from "./configs/document"; +import Button from "./utils/Button"; + +export const SpaceApp = ({ publishableKey }: { publishableKey: string }) => ( + + + +); + +const SpaceConfig = () => { + const { open, openPortal, closePortal } = useFlatfile(); + const [color, setColor] = useState("Red"); + const [records, setRecords] = useState([]); + + const toggleButton = () => { + if (!open) { + setRecords([]); + openPortal(); + } else { + closePortal(); + } + }; + + useListener((listener) => { + listener.on("**", (event) => { + console.log("SpaceApp useListener Event => ", { + topic: event.topic, + payload: event.payload, + }); + }); + }); + + useListener((client) => { + client.use( + recordHook("sheet2", (record) => { + const firstName = record.get("firstName"); + console.log({ firstName }); + + record.set("lastName", "Doe"); + return record; + }) + ); + }, []); + + usePlugin( + recordHook("sheet", (record, event) => { + console.log("recordHook", { event }); + record.set("color", color); + return record; + }), + [color] + ); + + // This will close the Portal instance when you confirm the dialog after the Workbook onSubmit function runs + useEvent( + "job:outcome-acknowledged", + { + operation: "workbookSubmitAction", + status: "complete", + }, + async (event) => { + // any logic related to the event needed for closing the event + console.log({ event }); + // close the portal iFrame window + closePortal(); + } + ); + + return ( +
+ {/*Button to trigger the modal */} +
+

+ The 
{``}
Component +

+

+ This example shows the Space, Document, Workbook and Sheet components + working together. Note the Space has a document in the sidebar that + can take any markdown as the body. +

+
+

Record Hook Plugin Configuration

+

+ {" "} + + You can even change the logic of the listener code by updating the + color value with the buttons. By default, the color is "Red" but + you can click these buttons to toggle what the Record Hook plugin + will do on the next user edit. + +

+

+ The next Record change will set the color field to:{" "} + 

{color}
+

+ + +
+
+ +
+
+ {records.length > 0 && ( +
{records.length} Record Submitted!
+ )} + + + { + console.log("on Workbook Submit ", { sheet }); + const { records } = await sheet.allData(); + setRecords(records); + }} + onRecordHooks={[ + [ + (record) => { + record.set("email", "SHEET 1 RECORDHOOKS"); + return record; + }, + ], + [ + (record) => { + record.set("email", "SHEET 2 RECORDHOOKS"); + return record; + }, + ], + ]} + > + { + record.set("email", "SHEET 3 RECORDHOOK"); + return record; + }} + /> + + +
+ ); +}; diff --git a/src/WorkbookApp.tsx b/src/WorkbookApp.tsx new file mode 100644 index 0000000..c0e7540 --- /dev/null +++ b/src/WorkbookApp.tsx @@ -0,0 +1,57 @@ +import { FlatfileProvider, useFlatfile, Workbook } from "@flatfile/react"; +import { workbook } from "./configs/workbook"; +import Button from "./utils/Button"; + +export const WorkbookApp = ({ publishableKey }: { publishableKey: string }) => { + return ( + + + + ); +}; + +const WorkbookConfig = () => { + const { open, openPortal, closePortal } = useFlatfile(); + + return ( +
+ {/*Button to trigger the modal */} +
+

+ The 
{``}
Component +

+

Embed a Flatfile Workbook in just a few lines of code.

+ +
+ + { + console.log("on Workbook Submit ", { sheet }); + }} + onRecordHooks={[ + [ + "sheet", + (record) => { + record.set("lastName", "Rock"); + return record; + }, + ], + [ + "sheet1", + (record) => { + record.set("lastName", "Smith"); + return record; + }, + ], + ]} + /> +
+ ); +}; diff --git a/src/configs/document.ts b/src/configs/document.ts new file mode 100644 index 0000000..b4badb4 --- /dev/null +++ b/src/configs/document.ts @@ -0,0 +1,6 @@ +import { Flatfile } from "@flatfile/api"; + +export const document: Flatfile.DocumentConfig = { + title: "Carry On My Wayward Son - A Markdown Journey", + body: "# Carry On My Wayward Son - A Markdown Journey\n\n## Introduction\n\"Carry On My Wayward Son\" is a classic rock song by Kansas, released in 1976. It has become an anthem for generations, known for its powerful melody, intricate harmonies, and meaningful lyrics.\n\n![Carry On My Wayward Son Album Cover](https://source.unsplash.com/silhouette-photo-of-grass-field-roLQ_k2HEcs)\n\n## Lyrics Analysis\n\n### Verse 1\n```\nCarry on my wayward son,\nThere'll be peace when you are done.\nLay your weary head to rest,\nDon't you cry no more.\n```\nThis verse speaks to the universal journey of finding peace through trials and tribulations. The song immediately addresses the listener or \"wayward son,\" encouraging perseverance and hope.\n\n### Chorus\n```\nMasquerading as a man with a reason,\nMy charade is the event of the season.\nAnd if I claim to be a wise man, it surely means that I don't know.\n```\nThe chorus delves into themes of identity, purpose, and the humility in acknowledging one's limitations.\n\n## Interpretations\n\n- **Personal Growth:** The song is often seen as a metaphor for personal development and the struggles one faces along the way.\n- **Spiritual Journey:** Some interpret it as a spiritual quest towards enlightenment or peace.\n\n## Guitar Solo Analysis\n\nThe iconic guitar solo of the song represents a climax in the musical journey, mirroring the emotional and spiritual ascent of the lyrics.\n\n```python\n# Example Python code to play a simple melody\nnotes = ['G', 'B', 'D', 'F#', 'G', 'D', 'B', 'G']\nfor note in notes:\n play(note)\n```\n\n## Historical Context\n\n| Year | Event |\n|------|----------------------------------------------|\n| 1976 | Song released on the album *Leftoverture*. |\n| 1977 | Reached No. 11 on the Billboard Hot 100. |\n| 2000s| Became a cultural icon, featured in TV shows.|\n\n## Notable Covers and Uses\n\n- **TV Series**: \"Supernatural\" famously used the song in several episodes, enhancing its cultural significance.\n- **Live Performances**: Kansas continues to perform this song, captivating audiences worldwide.\n\n## Conclusion\n\n\"Carry On My Wayward Son\" remains a timeless piece, resonating with audiences for its profound lyrics and dynamic composition. It encourages listeners to persevere through hardships, promising peace and rest at the journey's end.\n\n> \"A song that encapsulates the essence of human struggle and the hope for a better tomorrow.\"\n\n## References\n\n- [Kansas Official Website](https://www.kansasband.com)\n- [Lyrics Analysis](https://www.genius.com/Kansas-carry-on-my-wayward-son-lyrics)\n- [Song Facts](https://www.songfacts.com/facts/kansas/carry-on-wayward-son)\n", +}; diff --git a/src/configs/sheet.ts b/src/configs/sheet.ts new file mode 100644 index 0000000..b60c58c --- /dev/null +++ b/src/configs/sheet.ts @@ -0,0 +1,28 @@ +import { Flatfile } from "@flatfile/api"; + +export const sheet: Flatfile.SheetConfig = { + name: "Sheet", + slug: "sheet", + fields: [ + { + key: "firstName", + type: "string", + label: "First Name", + }, + { + key: "lastName", + type: "string", + label: "Last Name", + }, + { + key: "color", + type: "string", + label: "Color", + }, + { + key: "email", + type: "string", + label: "Email", + }, + ], +}; diff --git a/src/configs/sheet2.ts b/src/configs/sheet2.ts new file mode 100644 index 0000000..ccc7c57 --- /dev/null +++ b/src/configs/sheet2.ts @@ -0,0 +1,23 @@ +import { Flatfile } from "@flatfile/api"; + +export const sheet2: Flatfile.SheetConfig = { + name: "Sheet 2", + slug: "sheet2", + fields: [ + { + key: "firstName", + type: "string", + label: "First Name", + }, + { + key: "lastName", + type: "string", + label: "Last Name", + }, + { + key: "email", + type: "string", + label: "Email", + }, + ], +}; diff --git a/src/configs/workbook.ts b/src/configs/workbook.ts new file mode 100644 index 0000000..522d019 --- /dev/null +++ b/src/configs/workbook.ts @@ -0,0 +1,10 @@ +import { Flatfile } from "@flatfile/api"; +import { sheet2 } from "./sheet2"; +import { sheet } from "./sheet"; + +export const workbook: Flatfile.CreateWorkbookConfig = { + name: "All Data", + labels: ["pinned"], + namespace: "portal", + sheets: [sheet, sheet2], +}; diff --git a/src/index.tsx b/src/index.tsx index 674955c..6611668 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,12 +1,14 @@ -import React from "react"; -import ReactDOM from "react-dom"; +import * as React from "react"; +import * as ReactDOM from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; import App from "./App"; const rootElement = document.getElementById("root")!; -ReactDOM.render( +ReactDOM.createRoot(rootElement).render( - - , - rootElement + + + + ); diff --git a/src/listeners/simple.ts b/src/listeners/simple.ts deleted file mode 100644 index a650c0c..0000000 --- a/src/listeners/simple.ts +++ /dev/null @@ -1,53 +0,0 @@ -import api from "@flatfile/api"; -import { FlatfileListener } from "@flatfile/listener"; -import { recordHook } from "@flatfile/plugin-record-hook"; - -/** - * Example Listener - */ -export const listener = FlatfileListener.create((listener) => { - listener.on("**", (event) => { - console.log(`Received event: ${event.topic}`); - }); - - listener.use( - recordHook("contacts", (record) => { - const firstName = record.get("firstName"); - console.log({ firstName }); - record.set("lastName", "Rock"); - return record; - }) - ); - - listener.filter({ job: "workbook:submitActionFg" }, (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.", - }, - }); - } - }); - }); -}); diff --git a/src/utils/Button.tsx b/src/utils/Button.tsx new file mode 100644 index 0000000..4ae6d99 --- /dev/null +++ b/src/utils/Button.tsx @@ -0,0 +1,24 @@ +const Button = ({ + onClick, + children, +}: { + onClick: React.MouseEventHandler; + children: React.ReactNode; +}) => { + return ( + + ); +}; + +export default Button; diff --git a/src/workbook.ts b/src/workbook.ts deleted file mode 100644 index c17a94b..0000000 --- a/src/workbook.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { Flatfile } from "@flatfile/api"; - -export const workbook: Flatfile.CreateWorkbookConfig = { - name: "All Data", - labels: ["pinned"], - sheets: [ - { - 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", - }, - ], - }, - ], - actions: [ - { - operation: "submitActionFg", - mode: "foreground", - label: "Submit foreground", - description: "Submit data to webhook.site", - primary: true, - }, - ], -};