Refactor, move from react-scripts to vite

.circleci/config.yml

@@ -38,6 +38,6 @@ jobs:
 
       - run:
           name: Run Frontend tests
-          command: yarn test --updateSnapshot --ci
+          command: yarn test
           # use this line instead if we version control snapshots
           # command: yarn test --ci

.dockerignore

@@ -2,11 +2,13 @@ node_modules/
 README.md
 LICENSE
 .prettierignore
-.eslintrc.js
+eslint.config.cjs
 .prettierrc.js
+stylelint.config.js
 .circleci/
 .github/
 scripts/
 .storybook/
 .env
 build/
+/.yarn/

.github/workflows/ci.yml

@@ -15,11 +15,14 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Run corepack enable
+        run: corepack enable
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: yarn
+#          cache: yarn
 
       - name: Install project
         run: yarn install --frozen-lockfile
@@ -28,20 +31,23 @@ jobs:
         env:
           ESLINT_NO_DEV_ERRORS: true
           DISABLE_ESLINT_PLUGIN: true
-          REACT_APP_AUTH0_CLIENT_ID: "${{secrets.REACT_APP_AUTH0_CLIENT_ID}}"
-          REACT_APP_reCAPTCHA_SITE_KEY: "${{secrets.REACT_APP_reCAPTCHA_SITE_KEY}}"
-        run: yarn test --updateSnapshot --ci
+          VITE_AUTH0_CLIENT_ID: "${{secrets.VITE_AUTH0_CLIENT_ID}}"
+          VITE_RECAPTCHA_SITE_KEY: "${{secrets.VITE_RECAPTCHA_SITE_KEY}}"
+        run: yarn test
 
   build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
 
+      - name: Run corepack enable
+        run: corepack enable
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: yarn
+#          cache: yarn
 
       - name: Install project
         run: yarn install --frozen-lockfile
@@ -50,4 +56,4 @@ jobs:
         env:
           ESLINT_NO_DEV_ERRORS: true
           DISABLE_ESLINT_PLUGIN: true
-        run: yarn sass && yarn build
+        run: yarn build

.github/workflows/deploy.yml

@@ -177,31 +177,31 @@ jobs:
           cache-from: type=gha
           cache-to: type=gha,mode=max
           build-args: |
-            REACT_APP_ES_PROXY_HOST="${{secrets.REACT_APP_ES_PROXY_HOST}}"
-            REACT_APP_API_SERVICE_ADDRESS="${{secrets.REACT_APP_API_SERVICE_ADDRESS}}"
-            REACT_APP_API_SERVICE_KEY="${{secrets.REACT_APP_API_SERVICE_KEY}}"
-            REACT_APP_SIGNED_URL_ENDPOINT="${{secrets.REACT_APP_SIGNED_URL_ENDPOINT}}"
-            REACT_APP_USER_REGISTRATION_ENDPOINT="${{secrets.REACT_APP_USER_REGISTRATION_ENDPOINT}}"
-            REACT_APP_SEND_EMAIL_ENDPOINT="${{secrets.REACT_APP_SEND_EMAIL_ENDPOINT}}"
-            REACT_APP_FILE_DOWNLOAD_ENDPOINT="${{secrets.REACT_APP_FILE_DOWNLOAD_ENDPOINT}}"
-            REACT_APP_QC_DATA_ENDPOINT="${{secrets.REACT_APP_QC_DATA_ENDPOINT}}"
-            REACT_APP_ES_ENDPOINT="${{secrets.REACT_APP_ES_ENDPOINT}}"
-            REACT_APP_FILE_SEARCH_ENDPOINT="${{secrets.REACT_APP_FILE_SEARCH_ENDPOINT}}"
-            REACT_APP_DATA_FILE_BUCKET="${{secrets.REACT_APP_DATA_FILE_BUCKET}}"
-            REACT_APP_QC_REPORT_BUCKET="${{secrets.REACT_APP_QC_REPORT_BUCKET}}"
-            REACT_APP_ES_ACCESS_TOKEN="${{secrets.REACT_APP_ES_ACCESS_TOKEN}}"
-            REACT_APP_reCAPTCHA_SITE_KEY="${{secrets.REACT_APP_reCAPTCHA_SITE_KEY}}"
-            REACT_APP_AUTH0_CLIENT_ID="${{secrets.REACT_APP_AUTH0_CLIENT_ID}}"
-            REACT_APP_QUALTRICS_SURVEY_URL="${{secrets.REACT_APP_QUALTRICS_SURVEY_URL}}"
-            REACT_APP_USER_SURVEY_SUBMIT_URL="${{secrets.REACT_APP_USER_SURVEY_SUBMIT_URL}}"
-            REACT_APP_USER_SURVEY_INPUT_1="${{secrets.REACT_APP_USER_SURVEY_INPUT_1}}"
-            REACT_APP_USER_SURVEY_INPUT_2="${{secrets.REACT_APP_USER_SURVEY_INPUT_2}}"
-            REACT_APP_USER_SURVEY_INPUT_3="${{secrets.REACT_APP_USER_SURVEY_INPUT_3}}"
-            REACT_APP_USER_SURVEY_INPUT_4="${{secrets.REACT_APP_USER_SURVEY_INPUT_4}}"
-            REACT_APP_USER_SURVEY_INPUT_5="${{secrets.REACT_APP_USER_SURVEY_INPUT_5}}"
-            REACT_APP_OFFICE_HOUR_DAY="${{secrets.REACT_APP_OFFICE_HOUR_DAY}}"
-            REACT_APP_OFFICE_HOUR_DATE="${{secrets.REACT_APP_OFFICE_HOUR_DATE}}"
-            REACT_APP_OFFICE_HOUR_SIGNUP_URL="${{secrets.REACT_APP_OFFICE_HOUR_SIGNUP_URL}}"
+            VITE_ES_PROXY_HOST="${{secrets.VITE_ES_PROXY_HOST}}"
+            VITE_API_SERVICE_ADDRESS="${{secrets.VITE_API_SERVICE_ADDRESS}}"
+            VITE_API_SERVICE_KEY="${{secrets.VITE_API_SERVICE_KEY}}"
+            VITE_SIGNED_URL_ENDPOINT="${{secrets.VITE_SIGNED_URL_ENDPOINT}}"
+            VITE_USER_REGISTRATION_ENDPOINT="${{secrets.VITE_USER_REGISTRATION_ENDPOINT}}"
+            VITE_SEND_EMAIL_ENDPOINT="${{secrets.VITE_SEND_EMAIL_ENDPOINT}}"
+            VITE_FILE_DOWNLOAD_ENDPOINT="${{secrets.VITE_FILE_DOWNLOAD_ENDPOINT}}"
+            VITE_QC_DATA_ENDPOINT="${{secrets.VITE_QC_DATA_ENDPOINT}}"
+            VITE_ES_ENDPOINT="${{secrets.VITE_ES_ENDPOINT}}"
+            VITE_FILE_SEARCH_ENDPOINT="${{secrets.VITE_FILE_SEARCH_ENDPOINT}}"
+            VITE_DATA_FILE_BUCKET="${{secrets.VITE_DATA_FILE_BUCKET}}"
+            VITE_QC_REPORT_BUCKET="${{secrets.VITE_QC_REPORT_BUCKET}}"
+            VITE_ES_ACCESS_TOKEN="${{secrets.VITE_ES_ACCESS_TOKEN}}"
+            VITE_RECAPTCHA_SITE_KEY="${{secrets.VITE_RECAPTCHA_SITE_KEY}}"
+            VITE_AUTH0_CLIENT_ID="${{secrets.VITE_AUTH0_CLIENT_ID}}"
+            VITE_QUALTRICS_SURVEY_URL="${{secrets.VITE_QUALTRICS_SURVEY_URL}}"
+            VITE_USER_SURVEY_SUBMIT_URL="${{secrets.VITE_USER_SURVEY_SUBMIT_URL}}"
+            VITE_USER_SURVEY_INPUT_1="${{secrets.VITE_USER_SURVEY_INPUT_1}}"
+            VITE_USER_SURVEY_INPUT_2="${{secrets.VITE_USER_SURVEY_INPUT_2}}"
+            VITE_USER_SURVEY_INPUT_3="${{secrets.VITE_USER_SURVEY_INPUT_3}}"
+            VITE_USER_SURVEY_INPUT_4="${{secrets.VITE_USER_SURVEY_INPUT_4}}"
+            VITE_USER_SURVEY_INPUT_5="${{secrets.VITE_USER_SURVEY_INPUT_5}}"
+            VITE_OFFICE_HOUR_DAY="${{secrets.VITE_OFFICE_HOUR_DAY}}"
+            VITE_OFFICE_HOUR_DATE="${{secrets.VITE_OFFICE_HOUR_DATE}}"
+            VITE_OFFICE_HOUR_SIGNUP_URL="${{secrets.VITE_OFFICE_HOUR_SIGNUP_URL}}"
 
       - name: Build and push server image (dev)
         if: github.ref != 'refs/heads/master'
@@ -216,28 +216,28 @@ jobs:
           cache-from: type=gha
           cache-to: type=gha,mode=max
           build-args: |
-            REACT_APP_ES_PROXY_HOST="${{secrets.REACT_APP_ES_PROXY_HOST_DEV}}"
-            REACT_APP_API_SERVICE_ADDRESS="${{secrets.REACT_APP_API_SERVICE_ADDRESS_DEV}}"
-            REACT_APP_API_SERVICE_KEY="${{secrets.REACT_APP_API_SERVICE_KEY_DEV}}"
-            REACT_APP_SIGNED_URL_ENDPOINT="${{secrets.REACT_APP_SIGNED_URL_ENDPOINT}}"
-            REACT_APP_USER_REGISTRATION_ENDPOINT="${{secrets.REACT_APP_USER_REGISTRATION_ENDPOINT}}"
-            REACT_APP_SEND_EMAIL_ENDPOINT="${{secrets.REACT_APP_SEND_EMAIL_ENDPOINT}}"
-            REACT_APP_FILE_DOWNLOAD_ENDPOINT="${{secrets.REACT_APP_FILE_DOWNLOAD_ENDPOINT}}"
-            REACT_APP_QC_DATA_ENDPOINT="${{secrets.REACT_APP_QC_DATA_ENDPOINT}}"
-            REACT_APP_ES_ENDPOINT="${{secrets.REACT_APP_ES_ENDPOINT}}"
-            REACT_APP_FILE_SEARCH_ENDPOINT="${{secrets.REACT_APP_FILE_SEARCH_ENDPOINT}}"
-            REACT_APP_DATA_FILE_BUCKET="${{secrets.REACT_APP_DATA_FILE_BUCKET}}"
-            REACT_APP_QC_REPORT_BUCKET="${{secrets.REACT_APP_QC_REPORT_BUCKET_DEV}}"
-            REACT_APP_ES_ACCESS_TOKEN="${{secrets.REACT_APP_ES_ACCESS_TOKEN_DEV}}"
-            REACT_APP_reCAPTCHA_SITE_KEY="${{secrets.REACT_APP_reCAPTCHA_SITE_KEY}}"
-            REACT_APP_AUTH0_CLIENT_ID="${{secrets.REACT_APP_AUTH0_CLIENT_ID}}"
-            REACT_APP_QUALTRICS_SURVEY_URL="${{secrets.REACT_APP_QUALTRICS_SURVEY_URL}}"
-            REACT_APP_USER_SURVEY_SUBMIT_URL="${{secrets.REACT_APP_USER_SURVEY_SUBMIT_URL}}"
-            REACT_APP_USER_SURVEY_INPUT_1="${{secrets.REACT_APP_USER_SURVEY_INPUT_1}}"
-            REACT_APP_USER_SURVEY_INPUT_2="${{secrets.REACT_APP_USER_SURVEY_INPUT_2}}"
-            REACT_APP_USER_SURVEY_INPUT_3="${{secrets.REACT_APP_USER_SURVEY_INPUT_3}}"
-            REACT_APP_USER_SURVEY_INPUT_4="${{secrets.REACT_APP_USER_SURVEY_INPUT_4}}"
-            REACT_APP_USER_SURVEY_INPUT_5="${{secrets.REACT_APP_USER_SURVEY_INPUT_5}}"
-            REACT_APP_OFFICE_HOUR_DAY="${{secrets.REACT_APP_OFFICE_HOUR_DAY}}"
-            REACT_APP_OFFICE_HOUR_DATE="${{secrets.REACT_APP_OFFICE_HOUR_DATE}}"
-            REACT_APP_OFFICE_HOUR_SIGNUP_URL="${{secrets.REACT_APP_OFFICE_HOUR_SIGNUP_URL}}"
+            VITE_ES_PROXY_HOST="${{secrets.VITE_ES_PROXY_HOST_DEV}}"
+            VITE_API_SERVICE_ADDRESS="${{secrets.VITE_API_SERVICE_ADDRESS_DEV}}"
+            VITE_API_SERVICE_KEY="${{secrets.VITE_API_SERVICE_KEY_DEV}}"
+            VITE_SIGNED_URL_ENDPOINT="${{secrets.VITE_SIGNED_URL_ENDPOINT}}"
+            VITE_USER_REGISTRATION_ENDPOINT="${{secrets.VITE_USER_REGISTRATION_ENDPOINT}}"
+            VITE_SEND_EMAIL_ENDPOINT="${{secrets.VITE_SEND_EMAIL_ENDPOINT}}"
+            VITE_FILE_DOWNLOAD_ENDPOINT="${{secrets.VITE_FILE_DOWNLOAD_ENDPOINT}}"
+            VITE_QC_DATA_ENDPOINT="${{secrets.VITE_QC_DATA_ENDPOINT}}"
+            VITE_ES_ENDPOINT="${{secrets.VITE_ES_ENDPOINT}}"
+            VITE_FILE_SEARCH_ENDPOINT="${{secrets.VITE_FILE_SEARCH_ENDPOINT}}"
+            VITE_DATA_FILE_BUCKET="${{secrets.VITE_DATA_FILE_BUCKET}}"
+            VITE_QC_REPORT_BUCKET="${{secrets.VITE_QC_REPORT_BUCKET_DEV}}"
+            VITE_ES_ACCESS_TOKEN="${{secrets.VITE_ES_ACCESS_TOKEN_DEV}}"
+            VITE_RECAPTCHA_SITE_KEY="${{secrets.VITE_RECAPTCHA_SITE_KEY}}"
+            VITE_AUTH0_CLIENT_ID="${{secrets.VITE_AUTH0_CLIENT_ID}}"
+            VITE_QUALTRICS_SURVEY_URL="${{secrets.VITE_QUALTRICS_SURVEY_URL}}"
+            VITE_USER_SURVEY_SUBMIT_URL="${{secrets.VITE_USER_SURVEY_SUBMIT_URL}}"
+            VITE_USER_SURVEY_INPUT_1="${{secrets.VITE_USER_SURVEY_INPUT_1}}"
+            VITE_USER_SURVEY_INPUT_2="${{secrets.VITE_USER_SURVEY_INPUT_2}}"
+            VITE_USER_SURVEY_INPUT_3="${{secrets.VITE_USER_SURVEY_INPUT_3}}"
+            VITE_USER_SURVEY_INPUT_4="${{secrets.VITE_USER_SURVEY_INPUT_4}}"
+            VITE_USER_SURVEY_INPUT_5="${{secrets.VITE_USER_SURVEY_INPUT_5}}"
+            VITE_OFFICE_HOUR_DAY="${{secrets.VITE_OFFICE_HOUR_DAY}}"
+            VITE_OFFICE_HOUR_DATE="${{secrets.VITE_OFFICE_HOUR_DATE}}"
+            VITE_OFFICE_HOUR_SIGNUP_URL="${{secrets.VITE_OFFICE_HOUR_SIGNUP_URL}}"

.gitignore

@@ -4,6 +4,11 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 # Runtime data
 pids
@@ -16,11 +21,12 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
+*.lcov
 
 # nyc test coverage
 .nyc_output
 
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
 # Bower dependency directory (https://bower.io/)
@@ -36,15 +42,27 @@ build/Release
 node_modules/
 jspm_packages/
 
-# TypeScript v1 declaration files
-typings/
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
 
 # Optional npm cache directory
 .npm
 
 # Optional eslint cache
 .eslintcache
 
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
 # Optional REPL history
 .node_repl_history
 
@@ -54,11 +72,62 @@ typings/
 # Yarn Integrity file
 .yarn-integrity
 
-# dotenv environment variables file
+# dotenv environment variable files
 .env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
 
-# next.js build output
+# Next.js build output
 .next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
 
 # Mac autogenerated folder information (file color/position/etc)
 .DS_Store
@@ -73,7 +142,11 @@ src/__snapshots__/*
 # VS Code user settings
 .vscode/
 
-# Jetbrains IDE settings
-.idea/
+# Build files
+build/
+
+.yarnrc.yml
+.yarn
 
-.terraform/
+# generated by rollup-plugin-visualizer
+stats.html

.prettierrc.cjs

@@ -0,0 +1,4 @@
+export default {
+  arrowParens: 'always',
+  singleQuote: true,
+};

.storybook/main.js

@@ -0,0 +1,16 @@
+/**
+ *
+ * @type {import('@storybook/react-vite').StorybookConfig}
+ */
+module.exports = {
+  framework: {
+    name: "@storybook/react-vite",
+  },
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
+  docs: {
+    autodocs: true
+  },
+
+  addons: ['storybook-addon-remix-react-router', '@storybook/addon-actions', "@storybook/addon-links"]
+}