Merge pull request #362 from zimmerman-team/develop

Develop

Author: Psami-wondah

.eslintrc.js

@@ -15,10 +15,9 @@ module.exports = {
   extends: [
     "eslint-config-react-app",
     "react-app",
-    "airbnb-typescript-prettier",
     "plugin:sonarjs/recommended",
   ],
-  plugins: ["sonarjs"],
+  plugins: ["sonarjs", "no-relative-import-paths"],
   rules: {
     "@typescript-eslint/explicit-function-return-type": "off",
     "react/no-array-index-key": 0,
@@ -33,17 +32,23 @@ module.exports = {
     "@typescript-eslint/ban-ts-ignore ": 0,
     "@typescript-eslint/no-unused-vars": 0,
     "react-hooks/exhaustive-deps": 0,
-    "no-restricted-imports": [
+    "sonarjs/cognitive-complexity": ["error", 20],
+    // "no-restricted-imports": [
+    //   "error",
+    //   {
+    //     paths: [
+    //       {
+    //         name: "styled-components",
+    //         message: "Please import from styled-components/macro.",
+    //       },
+    //     ],
+    //     patterns: ["!styled-components/macro"],
+    //   },
+    // ],
+
+    "no-relative-import-paths/no-relative-import-paths": [
       "error",
-      {
-        paths: [
-          {
-            name: "styled-components",
-            message: "Please import from styled-components/macro.",
-          },
-        ],
-        patterns: ["!styled-components/macro"],
-      },
+      { allowSameFolder: true, rootDir: "src", prefix: "" },
     ],
   },
   /*overrides: [

.github/workflows/lint.yml

@@ -15,10 +15,10 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '16.19.1'
+          node-version: "16.19.1"
 
       - name: Install Dependencies
         run: yarn install
-      
+
       - name: Prettier Lint
-        run: yarn prettier src/app --check
+        run: yarn prettier src/app --check

.github/workflows/tests.yml

@@ -5,109 +5,75 @@ on:
   pull_request:
     branches: ["main", "develop"]
 
-
-env:
-    # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY
-    # in GitHub repo → Settings → Secrets → Actions
-    CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-    # Creating a token https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
-    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-    # Custom environment variables
-
-
-    # AUTH0
-    AUTH0_USERNAME: ${{ secrets.AUTH0_USERNAME }}
-    AUTH0_PASSWORD: ${{ secrets.AUTH0_PASSWORD }}
-    AUTH0_CLIENT_SECRET: ${{ secrets.AUTH0_CLIENT_SECRET }}
-
-    REACT_APP_AUTH0_DOMAIN: ${{ secrets.REACT_APP_AUTH0_DOMAIN }}
-    REACT_APP_AUTH0_AUDIENCE: ${{ secrets.REACT_APP_AUTH0_AUDIENCE }}
-    REACT_APP_AUTH0_CLIENT: ${{ secrets.REACT_APP_AUTH0_CLIENT }}
-
-    # API
-    REACT_APP_API: ${{ secrets.REACT_APP_API }}
-    REACT_APP_BASE_URL: ${{ secrets.REACT_APP_BASE_URL }}
-    REACT_APP_MAPBOX_TOKEN: ${{ secrets.REACT_APP_MAPBOX_TOKEN }}
-    REACT_APP_GOOGLE_ANALYTICS_ID: ${{ secrets.REACT_APP_GOOGLE_ANALYTICS_ID }}
-    REACT_APP_CMS_API: ${{ secrets.REACT_APP_CMS_API }}
-    REACT_APP_CMS_TOKEN: ${{ secrets.REACT_APP_CMS_TOKEN }}
-    REACT_APP_GOOGLE_API_CLIENT_ID: ${{ secrets.REACT_APP_GOOGLE_API_CLIENT_ID }}
-    REACT_APP_GOOGLE_API_DEV_KEY: ${{ secrets.REACT_APP_GOOGLE_API_DEV_KEY }}
-    REACT_APP_CYPRESS_TEST: "true"
-    CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
-    GENERATE_SOURCEMAP: false
-
-    # GOOGLE CYPRESS
-    GOOGLE_CLIENT_ID_TEST: ${{ secrets.GOOGLE_CLIENT_ID_TEST }}
-    GOOGLE_CLIENT_SECRET_TEST: ${{ secrets.GOOGLE_CLIENT_SECRET_TEST }}
-    GOOGLE_REFRESH_TOKEN_TEST: ${{ secrets.GOOGLE_REFRESH_TOKEN_TEST }}
-
 jobs:
-  jest-run:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '16'
-          cache: 'yarn'
-
-      - name: Install packages
-        run: yarn install && yarn add "https://github.com/zimmerman-team/rawgraphs-charts.git#b86c928" 
-
-      - name: Build rawgraphs package
-        run: |
-          if [ -d "node_modules/@rawgraphs/rawgraphs-charts" ]; then
-            cd node_modules/@rawgraphs/rawgraphs-charts
-            yarn 
-            yarn build
-          else
-            echo "Package directory not found"
-          fi
-
-      - name: Jest run
-        run: yarn test
+  # jest-run:
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout
+  #       uses: actions/checkout@v4
+
+  #     - name: Set up Node.js
+  #       uses: actions/setup-node@v4
+  #       with:
+  #         node-version: "16"
+  #         cache: "yarn"
+
+  #     - name: Install packages
+  #       run: yarn install --frozen-lockfile && yarn add "https://github.com/zimmerman-team/rawgraphs-charts.git#0fc0c9d"
+
+  #     - name: Build rawgraphs package
+  #       run: |
+  #         if [ -d "node_modules/@rawgraphs/rawgraphs-charts" ]; then
+  #           cd node_modules/@rawgraphs/rawgraphs-charts
+  #           yarn
+  #           yarn build
+  #         else
+  #           echo "Package directory not found"
+  #         fi
+
+  #     - name: Jest run
+  #       run: yarn test
 
   cypress-run:
-    runs-on: ubuntu-latest
+    runs-on: [self-hosted, cypress]
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
+      - name: Checkout to current branch
+        run: |
+          cd ~/DX
+          cd dx.client
+          git fetch origin
+          git checkout ${{ github.head_ref || github.ref_name }} 
+          git pull origin ${{ github.head_ref || github.ref_name }}
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '16'
-          cache: 'yarn'
+      - name: Build yarn
+        run: |
+          cd ~/DX
+          cd dx.client
+          yarn install
 
-      - name: Install packages
-        run: yarn install && yarn add "https://github.com/zimmerman-team/rawgraphs-charts.git#b86c928" 
+      - name: Run app with pm2
+        run: |
+          cd ~/DX
+          cd dx.client
+          pm2 start yarn --name "dx.client" -- start
 
-      - name: Build rawgraphs package
+      - name: Wait for app to be ready
         run: |
-          if [ -d "node_modules/@rawgraphs/rawgraphs-charts" ]; then
-            cd node_modules/@rawgraphs/rawgraphs-charts
-            yarn 
-            yarn build
-          else
-            echo "Package directory not found"
-          fi
-        
+          cd ~/DX
+          cd dx.client
+          while ! curl -s -f -o /dev/null http://localhost:3000; do sleep 5; done
+          echo "App is ready"
+
       - name: Cypress run
         # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
-        uses: cypress-io/github-action@v6
-        with:
-          # Starts web server for E2E tests - replace with your own server invocation
-          # https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server
-          start: yarn start
-          wait-on: "http://127.0.0.1:3000" # Waits for above
-          wait-on-timeout: 180
-          # Records to Cypress Cloud
-          # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record
-          record: true
-          # parallel: true # Runs test in parallel using settings above
-
+        run: |
+          cd ~/DX
+          cd dx.client
+          npx cypress run --record --key ${{ secrets.CYPRESS_RECORD_KEY }}
 
+      - name: Stop pm2
+        run: |
+          cd ~/DX
+          cd dx.client
+          pm2 stop dx.client
+          pm2 delete dx.client

.gitignore

@@ -75,5 +75,8 @@ cypress.env.json
 cypress/fixtures/localStorage.json
 cypress/e2e/3-getting-started
 cypress/e2e/2-advanced-examples
+cypress/downloads/
 
 rawgraphs-charts
+
+.vscode

.husky/pre-commit

@@ -1,5 +1,14 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn prettier src/app --check
+# Get staged files in src/app directory to check with prettier.
+files=$(git diff --cached --name-only --diff-filter=ACM | grep -E '^src/app/.*\.(js|jsx|ts|tsx|json)$' || true)
 
+# Check if there are any files to format
+if [ -n "$files" ]; then
+  echo "Checking formatting for: $files"
+  yarn prettier --check $files
+  npx eslint $files
+else
+  echo "No matching files to check."
+fi

.stylelintrc

@@ -1,9 +1,7 @@
 {
-  "processors": [
-    "stylelint-processor-styled-components"
-  ],
+  "processors": ["stylelint-processor-styled-components"],
   "extends": [
     "stylelint-config-recommended",
     "stylelint-config-styled-components"
   ]
-}
+}

.vscode/settings.json

@@ -1,32 +1,29 @@
-module.exports = function(grunt) {
+module.exports = function (grunt) {
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON("package.json"),
 
-    // Project configuration.
-    grunt.initConfig({
-      pkg: grunt.file.readJSON('package.json'),
-
-      svgstore: {
-        options: {
-          prefix : 'plyr-', // This will prefix each ID
-          svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG
-            viewBox : '0 0 100 100',
-            xmlns: 'http://www.w3.org/2000/svg'
-          }
+    svgstore: {
+      options: {
+        prefix: "plyr-", // This will prefix each ID
+        svg: {
+          // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG
+          viewBox: "0 0 100 100",
+          xmlns: "http://www.w3.org/2000/svg",
         },
-        default : {
-            files: {
-              'dest/svg-defs.svg': ['plyr-svgs/*.svg'],
-            }
-          },
-        
+      },
+      default: {
+        files: {
+          "dest/svg-defs.svg": ["plyr-svgs/*.svg"],
         },
-    });
-  
-    // Load the plugin that provides the "uglify" task.
-    // grunt.loadNpmTasks('grunt-contrib-uglify');
-    grunt.loadNpmTasks('grunt-svgstore');
-  
-    // Default task(s).
-    grunt.registerTask('default', ['svgstore']);
+      },
+    },
+  });
+
+  // Load the plugin that provides the "uglify" task.
+  // grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks("grunt-svgstore");
 
-  
-  };
+  // Default task(s).
+  grunt.registerTask("default", ["svgstore"]);
+};

GruntFile.js

@@ -30,7 +30,7 @@ module.exports = () => {
       loaders: [
         {
           test: /plugin\.css$/,
-          loaders: ['style-loader', 'css'],
+          loaders: ["style-loader", "css"],
         },
       ],
     },

craco.config.js

@@ -24,5 +24,4 @@ export default defineConfig({
     },
     baseUrl: process.env.REACT_APP_BASE_URL,
   },
-  experimentalMemoryManagement: true,
 });