Merge branch 'develop' into vontell-561-scraping-code

.devcontainer/devcontainer.json

@@ -25,7 +25,7 @@
       "openFiles": ["README.md"]
     }
   },
-  "forwardPorts": [3000],
+  "forwardPorts": [5173],
   "postCreateCommand": "yarn install",
   "remoteUser": "node"
 }

.eslintrc.json

@@ -1,22 +1,36 @@
 {
   "extends": [
     "eslint:recommended",
+    "airbnb",
     "plugin:react/recommended",
-    "prettier",
     "plugin:react/jsx-runtime",
-    "plugin:react-hooks/recommended"
+    "plugin:react-hooks/recommended",
+    "plugin:storybook/recommended",
+    "prettier"
   ],
+  "globals": { "google": "readonly" },
   "rules": {
     "react/prop-types": 0,
     "no-console": 1,
-    "no-unused-vars": 0
+    "no-unused-vars": 0,
+    "no-param-reassign": 0,
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    "react/jsx-props-no-spreading": [
+      2,
+      {
+        "explicitSpread": "ignore",
+        "exceptions": ["ContactInput", "ContactCheckbox", "TextField", "svg"]
+      }
+    ]
   },
   "plugins": ["react", "import", "jsx-a11y"],
   "parserOptions": {
-    "parser": "@babel/eslint-parser",
-    "babelOptions": {
-      "presets": ["@babel/preset-react"]
-    },
     "sourceType": "module",
     "ecmaVersion": "latest",
     "ecmaFeatures": {
@@ -29,7 +43,21 @@
     "node": true,
     "es2021": true
   },
+  "overrides": [
+    {
+      "files": ["./src/stories/*.stories.js", "./vite.config.js"],
+      "rules": {
+        "import/no-extraneous-dependencies": [2, { "devDependencies": true }]
+      }
+    }
+  ],
   "settings": {
+    "import/resolver": {
+      "node": {
+        "moduleDirectory": ["node_modules", "src"],
+        "paths": ["src"]
+      }
+    },
     "react": {
       "version": "detect"
     }

.github/workflows/betasite.yml

@@ -6,27 +6,27 @@ on:
       - develop
 env:
   AWS_DEFAULT_REGION: us-east-2
-  REACT_APP_DB_URL: https://phlask-beta.firebaseio.com
+  VITE_DB_URL: https://phlask-beta.firebaseio.com
 permissions:
-  id-token: write   # This is required for requesting the JWT
-  contents: read    # This is required for actions/checkout
+  id-token: write # This is required for requesting the JWT
+  contents: read # This is required for actions/checkout
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v1
-    - name: Configure AWS Credentials
-      uses: aws-actions/configure-aws-credentials@v1-node16
-      with:
-        role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/beta-access
-        role-session-name: github-${{ github.sha }}
-        aws-region: ${{ env.AWS_DEFAULT_REGION }}
-    - name: Build and Deploy the Map
-      run: |
-         echo Build started on `date`
-         echo Building the webapp...
-         docker compose run prod_build
-         echo Build completed on `date`
-         echo Pushing the webapp to S3...
-         aws s3 sync docker/build s3://beta.phlask.me --acl public-read --delete
+      - uses: actions/checkout@v1
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v1-node16
+        with:
+          role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/beta-access
+          role-session-name: github-${{ github.sha }}
+          aws-region: ${{ env.AWS_DEFAULT_REGION }}
+      - name: Build and Deploy the Map
+        run: |
+          echo Build started on `date`
+          echo Building the webapp...
+          docker compose run prod_build
+          echo Build completed on `date`
+          echo Pushing the webapp to S3...
+          aws s3 sync docker/build s3://beta.phlask.me --delete

.github/workflows/build_testsite.yml

@@ -22,8 +22,8 @@ jobs:
           docker compose run prod_build
           echo Build completed on `date`
           echo Pushing the webapp to S3...
-          aws s3 sync docker/build s3://test.phlask.me/${GITHUB_SHA} --acl public-read --delete
-          aws s3 sync docker/testResults s3://test.phlask.me/${GITHUB_SHA}/testResults --acl public-read
+          aws s3 sync docker/build s3://test.phlask.me/${GITHUB_SHA} --delete
+          aws s3 sync docker/testResults s3://test.phlask.me/${GITHUB_SHA}/testResults
           echo "Test site for this run can be accessed at: https://test.phlask.me/${GITHUB_SHA}"
       - name: Record the test build
         run: |

.github/workflows/cypress_testing.yml

@@ -8,7 +8,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
       - name: Checkout
         uses: actions/checkout@v4
       - name: Cypress run

.github/workflows/lighthouse_testing.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Upload Lighthouse Test Result to S3
         run: |
           mv ${GITHUB_WORKSPACE}/tmp/artifacts/lighthouse/${GITHUB_SHA}/report-*.html ${GITHUB_WORKSPACE}/tmp/artifacts/lighthouse/${GITHUB_SHA}/lighthouse_result.html
-          aws s3 cp ${GITHUB_WORKSPACE}/tmp/artifacts/lighthouse/${GITHUB_SHA}/lighthouse_result.html s3://test.phlask.me/${GITHUB_SHA}/testResults/lighthouse_result.html --acl public-read
+          aws s3 cp ${GITHUB_WORKSPACE}/tmp/artifacts/lighthouse/${GITHUB_SHA}/lighthouse_result.html s3://test.phlask.me/${GITHUB_SHA}/testResults/lighthouse_result.html
           aws --region us-east-1 dynamodb update-item --table-name test-page-list --key '{
             "gitHash": {"S": "'${GITHUB_SHA}'"}
           }' --update-expression "SET #G = :g" --expression-attribute-names '{

.github/workflows/userTestsite.yml

@@ -3,7 +3,7 @@ name: Build User Testing Site
 on:
   push:
     branches:
-      - develop
+      - main
 env:
   AWS_DEFAULT_REGION: us-east-2
   REACT_APP_DB_URL: https://phlask-usertest.firebaseio.com

.gitignore

@@ -29,6 +29,7 @@ docker/
 # dev files
 resources/
 .env
+*storybook.log
 
 # testing
 newrelic_agent.log

.nvmrc

@@ -1 +1 @@
-16.18.0
+20.16.0

.storybook/main.js

@@ -1,8 +1,16 @@
-module.exports = {
-  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/preset-create-react-app"],
-  "framework": {
-    name: "@storybook/react-webpack5",
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/react-vite',
     options: {}
   }
-};
+};
+export default config;

.storybook/preview.js

@@ -1,13 +1,17 @@
 import withThemeProvider from './decorators/withThemeProvider';
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
     }
   }
 };
 
 export const decorators = [withThemeProvider];
+
+export default preview;

.svgrrc.json

@@ -0,0 +1,10 @@
+{
+  "icon": true,
+  "typescript": false,
+  "jsxRuntime": "classic",
+  "exportType": "default",
+  "prettierConfig": ".prettierrc",
+  "ref": true,
+  "titleProp": true,
+  "ext": "jsx"
+}

.vscode/launch.json

@@ -8,7 +8,7 @@
       "type": "chrome",
       "request": "launch",
       "name": "Launch Chrome against localhost",
-      "url": "http://localhost:3000",
+      "url": "http://localhost:5173",
       "webRoot": "${workspaceFolder}/src"
     }
   ]

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16-slim
+FROM node:20-slim
 
 WORKDIR /usr/src/app
 

README.md

@@ -100,7 +100,7 @@ Note that `core hours per month` means each core on your codespace consumes inde
     Starting the development server...
     ```
 
-1.  Navigate to localhost:3000 on your browser.
+1.  Navigate to localhost:5173 on your browser.
 
 ## Recommended Development Tools
 

cypress.config.mjs

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    watchForFileChanges: false,
+    specPattern: 'cypress/e2e/desktop/*.cy.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:5173',
+    video: true
+  }
+});

cypress.mobile.config.mjs

@@ -0,0 +1,17 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    watchForFileChanges: false,
+    specPattern: 'cypress/e2e/mobile/*.cy.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:5173',
+    video: true,
+    userAgent:
+      'Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1'
+  }
+  // reporter: 'junit',
+  // reporterOptions: {
+  //   mochaFile: 'results/my-test-output.xml',
+  //   toConsole: true,
+  // },
+});