rowyio · shamsmosowi · Jun 10, 2023 · Jun 6, 2023 · Jun 6, 2023 · Jun 6, 2023
diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
@@ -6,8 +6,8 @@ on:
     # paths:
     # - "website/**"
 env:
-  REACT_APP_FIREBASE_PROJECT_ID: rowyio
-  REACT_APP_FIREBASE_PROJECT_WEB_API_KEY:
+  VITE_APP_FIREBASE_PROJECT_ID: rowyio
+  VITE_APP_FIREBASE_PROJECT_WEB_API_KEY:
     "${{ secrets.FIREBASE_WEB_API_KEY_TRYROWY }}"
   CI: ""
 jobs:

diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,7 @@
 
 # production
 /build
+/dist
 cloud_functions/functions/lib
 
 # firebase

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -17,12 +17,11 @@ Read the documentation on setting up your local development environment
 Read how to submit a pull request [here](https://docs.rowy.io/contributing).
 
 To get familiar with the project,
-[good first issues](https://github.com/rowyio/rowy/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) is a good place
-to start.
+[good first issues](https://github.com/rowyio/rowy/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)
+is a good place to start.
 
 ## Working on existing issues
 
-
 Before you get started working on an
 [issue](https://github.com/rowyio/rowy/issues), please make sure to share that
 you are working on it by commenting on the issue and posting a message on
@@ -39,18 +38,16 @@ assigned to you, then we will assume you have stopped working on it and we will
 unassign it from you - so that we can give a chance to others in the community
 to work on it.
 
-
 ## File a feature request
 
 If you have some interesting idea that will be a good addition to Rowy, then
 create a new issue using
 [Feature Request Template](https://github.com/rowyio/rowy/issues/new?assignees=&labels=&template=feature_request.md)
 to share your idea. If you are working on this to contribute to the project,
 then let others in the community and project maintainers know by posting on
-#contributions channel in Rowy's
-[Discord](https://rowy.io/discord). This allows others in the
-community and the maintainers a chance to provide feedback and guidance before
-you spend time working on it.
+#contributions channel in Rowy's [Discord](https://rowy.io/discord). This allows
+others in the community and the maintainers a chance to provide feedback and
+guidance before you spend time working on it.
 
 ## Report an issue
 

diff --git a/README.md b/README.md
@@ -33,7 +33,6 @@ Low-code for Firebase and Google Cloud.
 
 ## Features ✨
 
-
 <!-- <table>
     <tr>
     <th>
@@ -56,6 +55,7 @@ Low-code for Firebase and Google Cloud.
     </td>
     </tr>
 </table> -->
+
 https://user-images.githubusercontent.com/307298/157185793-f67511cd-7b7b-4229-9589-d7defbf7a63f.mp4
 
 <!-- <img width="85%" src="https://firebasestorage.googleapis.com/v0/b/rowyio.appspot.com/o/publicDemo%2FRowy%20Website%20Video%20GIF%20Small.gif?alt=media&token=3f699a8f-c1f2-4046-8ed5-e4ff66947cd8" />
@@ -99,8 +99,10 @@ https://user-images.githubusercontent.com/307298/157185793-f67511cd-7b7b-4229-95
 
 ## Quick guided install
 
-Set up Rowy on your Google Cloud Platform project with this easy deploy button. Your
-data and cloud functions stay on your own Firestore/GCP and is managed via a cloud run instance that operates exclusively on your GCP project. So we do do not access or store any of your data on Rowy.
+Set up Rowy on your Google Cloud Platform project with this easy deploy button.
+Your data and cloud functions stay on your own Firestore/GCP and is managed via
+a cloud run instance that operates exclusively on your GCP project. So we do do
+not access or store any of your data on Rowy.
 
 [<img width="200" alt="Guided quick start button" src="https://user-images.githubusercontent.com/307298/185548050-e9208fb6-fe53-4c84-bbfa-53c08e03c15f.png">](https://rowy.app/)
 
@@ -113,12 +115,17 @@ You can find the full documentation with how-to guides and templates
 
 ## Manual Install
 
-We recommend the [quick guided install](https://github.com/rowyio/rowy#quick-guided-install) option above. Manual install option is only recommended if you want to develop and contribute to the project. Follow this [guide](https://docs.rowy.io/setup/install#option-2-manual-install) for manual setup.
+We recommend the
+[quick guided install](https://github.com/rowyio/rowy#quick-guided-install)
+option above. Manual install option is only recommended if you want to develop
+and contribute to the project. Follow this
+[guide](https://docs.rowy.io/setup/install#option-2-manual-install) for manual
+setup.
 
 ## Roadmap
 
-[View our roadmap](https://roadmap.rowy.io/) on Rowy - Upvote,
-downvote, share your thoughts!
+[View our roadmap](https://roadmap.rowy.io/) on Rowy - Upvote, downvote, share
+your thoughts!
 
 If you'd like to propose a feature, submit an issue
 [here](https://github.com/rowyio/rowy/issues/new?assignees=&labels=&template=feature_request.md&title=).

diff --git a/createDotEnv.js b/createDotEnv.js
@@ -8,10 +8,10 @@ const main = (
 ) => {
   return fs.writeFileSync(
     ".env",
-    `REACT_APP_FIREBASE_PROJECT_ID = ${projectID}
-REACT_APP_FIREBASE_PROJECT_WEB_API_KEY = ${firebaseWebApiKey}
-REACT_APP_ALGOLIA_APP_ID = ${algoliaAppId}
-REACT_APP_ALGOLIA_SEARCH_API_KEY = ${algoliaSearhApiKey}`
+    `VITE_APP_FIREBASE_PROJECT_ID = ${projectID}
+VITE_APP_FIREBASE_PROJECT_WEB_API_KEY = ${firebaseWebApiKey}
+VITE_APP_ALGOLIA_APP_ID = ${algoliaAppId}
+VITE_APP_ALGOLIA_SEARCH_API_KEY = ${algoliaSearhApiKey}`
   );
 };
 

diff --git a/firebase.json b/firebase.json
@@ -1,6 +1,6 @@
 {
   "hosting": {
-    "public": "build",
+    "public": "dist",
     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "rewrites": [
       {

diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -15,30 +15,30 @@
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="%PUBLIC_URL%/favicon/apple-touch-icon.png"
+      href="/favicon/apple-touch-icon.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="%PUBLIC_URL%/favicon/favicon-32x32.png"
+      href="/favicon/favicon-32x32.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="%PUBLIC_URL%/favicon/favicon-16x16.png"
+      href="/favicon/favicon-16x16.png"
     />
     <link
       rel="icon"
       type="image/svg+xml"
-      href="%PUBLIC_URL%/favicon/icon.svg"
+      href="/favicon/icon.svg"
       id="favicon-svg"
     />
-    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
+    <link rel="manifest" href="/site.webmanifest" />
     <link
       rel="mask-icon"
-      href="%PUBLIC_URL%/favicon/safari-pinned-tab.svg"
+      href="/favicon/safari-pinned-tab.svg"
       color="#4200FF"
     />
     <meta name="msapplication-TileColor" content="#4200FF" />
@@ -47,13 +47,13 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
@@ -87,7 +87,7 @@
       property="og:description"
       content="Build on the Google Cloud Platform in minutes. Manage Firestore data in a spreadsheet-like UI, write Cloud Functions effortlessly in the browser, and connect to third-party apps. Rowy is open source!"
     />
-    <meta property="og:image" content="%PUBLIC_URL%/static/meta.png" />
+    <meta property="og:image" content="/static/meta.png" />
 
     <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:url" content="https://rowy.io/" />
@@ -96,11 +96,12 @@
       property="twitter:description"
       content="Build on the Google Cloud Platform in minutes. Manage Firestore data in a spreadsheet-like UI, write Cloud Functions effortlessly in the browser, and connect to third-party apps. Rowy is open source!"
     />
-    <meta property="twitter:image" content="%PUBLIC_URL%/static/meta.png" />
+    <meta property="twitter:image" content="/static/meta.png" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@json2csv/plainjs": "^7.0.1",
     "@mdi/js": "^6.6.96",
     "@monaco-editor/react": "^4.4.4",
     "@mui/icons-material": "^5.10.16",
@@ -24,6 +25,7 @@
     "algoliasearch": "^4.13.1",
     "ansi-to-react": "^6.1.6",
     "buffer": "^6.0.3",
+    "colord": "^2.9.3",
     "compare-versions": "^4.1.3",
     "csv-parse": "^5.1.0",
     "date-fns": "^2.28.0",
@@ -33,7 +35,6 @@
     "firebaseui": "^6.0.1",
     "jotai": "^1.8.4",
     "json-stable-stringify-without-jsonify": "^1.0.1",
-    "json2csv": "^5.0.7",
     "jszip": "^3.10.0",
     "lodash-es": "^4.17.21",
     "match-sorter": "^6.3.1",
@@ -61,7 +62,6 @@
     "react-markdown": "^8.0.3",
     "react-router-dom": "6.3.0",
     "react-router-hash-link": "^2.4.3",
-    "react-scripts": "^5.0.1",
     "react-usestateref": "^1.0.8",
     "react-virtual": "^2.10.4",
     "remark-gfm": "^3.0.1",
@@ -73,17 +73,18 @@
     "typescript": "^4.9.3",
     "use-algolia": "^1.5.3",
     "use-async-memo": "^1.2.4",
-    "use-debounce": "^8.0.0",
+    "use-debounce": "^9.0.4",
     "use-memo-value": "^1.0.1",
     "web-vitals": "^2.1.4",
     "workbox-webpack-plugin": "^6.5.4"
   },
   "scripts": {
-    "start": "cross-env PORT=7699 craco start",
-    "startWithEmulators": "cross-env PORT=7699 REACT_APP_FIREBASE_EMULATORS=true craco start",
+    "start": "vite --port 7699",
+    "startWithEmulators": "VITE_APP_FIREBASE_EMULATORS=true vite --port 7699",
     "emulators": "firebase emulators:start --only firestore,auth --import ./emulators/ --export-on-exit",
-    "test": "craco test --env ./src/test/custom-jest-env.js --verbose --detectOpenHandles",
-    "build": "craco build",
+    "test": "vitest",
+    "build": "tsc && vite build",
+    "preview": "vite preview --port 7699",
     "analyze": "source-map-explorer ./build/static/js/*.js",
     "prepare": "husky install",
     "env": "node createDotEnv",
@@ -153,7 +154,6 @@
     "@types/dompurify": "^2.3.3",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "^27.4.1",
-    "@types/json2csv": "^5.0.3",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^17.0.23",
     "@types/react": "^18.0.25",
@@ -166,6 +166,8 @@
     "@types/seedrandom": "^3.0.2",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "craco-alias": "^3.0.1",
     "craco-swc": "^0.5.1",
     "cross-env": "^7.0.3",
@@ -175,14 +177,19 @@
     "eslint-plugin-local-rules": "^1.1.0",
     "eslint-plugin-no-relative-import-paths": "^1.2.0",
     "eslint-plugin-tsdoc": "^0.2.16",
+    "happy-dom": "^9.20.3",
     "husky": ">=7.0.4",
     "lint-staged": ">=12.3.7",
     "monaco-editor": "^0.33.0",
     "prettier": "^2.6.2",
     "raw-loader": "^4.0.2",
     "source-map-explorer": "^2.5.2",
     "ts-jest": "^28.0.2",
-    "typedoc": "^0.23.21"
+    "typedoc": "^0.23.21",
+    "vite": "^4.3.9",
+    "vite-plugin-svgr": "^3.2.0",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^0.31.4"
   },
   "resolutions": {
     "@types/react": "^18"

diff --git a/src/components/CodeEditor/useMonacoCustomizations.ts b/src/components/CodeEditor/useMonacoCustomizations.ts
@@ -12,13 +12,12 @@ import type { languages } from "monaco-editor/esm/vs/editor/editor.api";
 import { useTheme } from "@mui/material";
 import type { SystemStyleObject, Theme } from "@mui/system";
 
-/* eslint-disable import/no-webpack-loader-syntax */
-import firestoreDefs from "!!raw-loader!./firestore.d.ts";
-import firebaseAuthDefs from "!!raw-loader!./firebaseAuth.d.ts";
-import firebaseStorageDefs from "!!raw-loader!./firebaseStorage.d.ts";
-import utilsDefs from "!!raw-loader!./utils.d.ts";
-import rowyUtilsDefs from "!!raw-loader!./rowy.d.ts";
-import extensionsDefs from "!!raw-loader!./extensions.d.ts";
+import firestoreDefs from "./firestore.d.ts?raw";
+import firebaseAuthDefs from "./firebaseAuth.d.ts?raw";
+import firebaseStorageDefs from "./firebaseStorage.d.ts?raw";
+import utilsDefs from "./utils.d.ts?raw";
+import rowyUtilsDefs from "./rowy.d.ts?raw";
+import extensionsDefs from "./extensions.d.ts?raw";
 import { projectScope, secretNamesAtom } from "@src/atoms/projectScope";
 import { getFieldProp } from "@src/components/fields";
 

diff --git a/src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx b/src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx
@@ -11,8 +11,7 @@ import CodeEditorHelper from "@src/components/CodeEditor/CodeEditorHelper";
 import { FieldType } from "@src/constants/fields";
 import { WIKI_LINKS } from "@src/constants/externalLinks";
 
-/* eslint-disable import/no-webpack-loader-syntax */
-import defaultValueDefs from "!!raw-loader!./defaultValue.d.ts";
+import defaultValueDefs from "./defaultValue.d.ts?raw";
 import {
   projectScope,
   compatibleRowyRunVersionAtom,

diff --git a/src/components/RichTextEditor.tsx b/src/components/RichTextEditor.tsx
@@ -11,14 +11,14 @@ import "tinymce/themes/silver";
 import "tinymce/icons/default";
 // Editor styles
 /* eslint import/no-webpack-loader-syntax: off */
-import skinCss from "!!raw-loader!tinymce/skins/ui/oxide/skin.min.css";
-import skinDarkCss from "!!raw-loader!tinymce/skins/ui/oxide-dark/skin.min.css";
+import skinCss from "tinymce/skins/ui/oxide/skin.min.css?inline";
+import skinDarkCss from "tinymce/skins/ui/oxide-dark/skin.min.css?inline";
 // Content styles, including inline UI like fake cursors
 /* eslint import/no-webpack-loader-syntax: off */
-import contentCss from "!!raw-loader!tinymce/skins/content/default/content.min.css";
-import contentUiCss from "!!raw-loader!tinymce/skins/ui/oxide/content.min.css";
-import contentCssDark from "!!raw-loader!tinymce/skins/content/dark/content.min.css";
-import contentUiCssDark from "!!raw-loader!tinymce/skins/ui/oxide-dark/content.min.css";
+import contentCss from "tinymce/skins/content/default/content.min.css?inline";
+import contentUiCss from "tinymce/skins/ui/oxide/content.min.css?inline";
+import contentCssDark from "tinymce/skins/content/dark/content.min.css?inline";
+import contentUiCssDark from "tinymce/skins/ui/oxide-dark/content.min.css?inline";
 
 // Plugins
 import "tinymce/plugins/autoresize";

diff --git a/src/components/TableModals/ExportModal/ModalContentsExport.tsx b/src/components/TableModals/ExportModal/ModalContentsExport.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useAtom } from "jotai";
-import { parse as json2csv } from "json2csv";
+import { Parser } from "@json2csv/plainjs";
 import { saveAs } from "file-saver";
 import { useSnackbar } from "notistack";
 import { getDocs } from "firebase/firestore";
@@ -171,10 +171,10 @@ export default function Export({
         const csvData = docs.map((doc: any) =>
           columns.reduce(selectedColumnsCsvReducer(doc), {})
         );
-        const csv = json2csv(
-          csvData,
+        const parser = new Parser(
           exportType === "tsv" ? { delimiter: "\t" } : undefined
         );
+        const csv = parser.parse(csvData);
         const csvBlob = new Blob([csv], {
           type: `text/${exportType};charset=utf-8`,
         });

diff --git a/src/components/TableModals/ImportAirtableWizard/Step1Columns.tsx b/src/components/TableModals/ImportAirtableWizard/Step1Columns.tsx
@@ -234,9 +234,7 @@ export default function Step1Columns({
               />
             }
             label={
-
               selectedFields.length === fieldKeys.length
-
                 ? "Clear all"
                 : "Select all"
             }

diff --git a/src/components/TableToolbar/ImportData/ImportFromCsv.tsx b/src/components/TableToolbar/ImportData/ImportFromCsv.tsx
@@ -1,7 +1,7 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 import { useAtom, useSetAtom } from "jotai";
 import { parse } from "csv-parse/browser/esm";
-import { parse as parseJSON } from "json2csv";
+import { Parser, ParserOptions } from "@json2csv/plainjs";
 import { useDropzone } from "react-dropzone";
 import { useDebouncedCallback } from "use-debounce";
 import { useSnackbar } from "notistack";
@@ -78,7 +78,8 @@ function convertJSONToCSV(rawData: string): string | false {
   };
 
   try {
-    const csv = parseJSON(rawDataJSONified, opts);
+    const parser = new Parser(opts as ParserOptions);
+    const csv = parser.parse(rawDataJSONified);
     return csv;
   } catch (err) {
     return false;
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ @@
     # production
     /build
+    /dist
     cloud_functions/functions/lib
     # firebase
@@ Expand Down @@