Refactor: MUI5, Typescript

.eslintrc

@@ -1,37 +1,91 @@
 {
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
   "extends": [
+    "airbnb",
+    "plugin:cypress/recommended",
+    "plugin:@typescript-eslint/recommended",
     "prettier",
-    "eslint:recommended",
     "plugin:react/recommended"
   ],
-  "plugins": [
-    "react"
-  ],
-  "env": {
-    "browser": true,
-    "node": true,
-    "mocha": true,
-    "jest": true
-  },
   "globals": {
     "cy": true,
     "Cypress": true
   },
-  "parser": "@babel/eslint-parser",
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "requireConfigFile": false,
-    "babelOptions": {
-       "presets": ["@babel/preset-react"]
-    }
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
   },
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
   "rules": {
+    "react/no-array-index-key": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/destructuring-assignment": "off",
+    "react/require-default-props": "off",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "import/no-import-module-exports": "off",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true
+      }
+    ],
+    "import/prefer-default-export": "off",
+    "prettier/prettier": "error",
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "never",
+        "js": "never",
+        "tsx": "never"
+      }
+    ],
+    "@typescript-eslint/explicit-function-return-type": [
+      "error",
+      {
+        "allowExpressions": true
+      }
+    ],
+    "@typescript-eslint/no-var-requires": "off",
+    "global-require": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "comma-dangle": "off",
+    "@typescript-eslint/comma-dangle": "off",
+    "react/jsx-one-expression-per-line": "off",
     "react/jsx-filename-extension": [
-      1,
+      "warn",
       {
-        "extensions": [".js", ".jsx"]
+        "extensions": [".tsx"]
       }
     ],
-    "react/function-component-definition":  [2, { "namedComponents": "arrow-function" }],
-    "import/no-named-as-default": 0
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function"
+      }
+    ],
+    // eslint rule reports false error
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["error"]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/resolver": {
+      "typescript": {}
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    }
   }
 }

.github/workflows/cdelivery-s3-apps-caller.yml

@@ -13,7 +13,7 @@ jobs:
     name: Graasp app file-drop
     # Replace 'main' with the hash of a commit, so it points to an specific version of the reusable workflow that is used
     # Reference reusable workflow file. Using the commit SHA is the safest for stability and security
-    uses: graasp/graasp-deploy/.github/workflows/cdelivery-s3-apps.yml@a5e6f97c18c86d97e3e8f15b27e4d898746327cf
+    uses: graasp/graasp-deploy/.github/workflows/cdelivery-s3-apps.yml@78c70b9b9e3b8c66b279a5d9378b2fcc6fa680fe
     # Replace input build-folder or version if needed
     with:
       build-folder: 'build'
@@ -26,5 +26,5 @@ jobs:
       aws-region: ${{ secrets.APPS_AWS_REGION }}
       aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_APPS_STAGE }}
       cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_APPS_STAGE }}
-      app-id: ${{ secrets.APP_ID }}
+      app-key: ${{ secrets.APP_KEY }}
       graasp-domain: ${{ secrets.STAGE_GRAASP_DOMAIN }}

.github/workflows/cdeployment-s3-apps-caller.yml

@@ -13,7 +13,7 @@ jobs:
     name: Graasp app file-drop
     # Replace 'main' with the hash of a commit, so it points to an specific version of the reusable workflow that is used
     # Reference reusable workflow file. Using the commit SHA is the safest for stability and security
-    uses: graasp/graasp-deploy/.github/workflows/cdeployment-s3-apps.yml@7b5dd84304458c3c5ab03cbbde059670f77b1687
+    uses: graasp/graasp-deploy/.github/workflows/cdeployment-s3-apps.yml@78c70b9b9e3b8c66b279a5d9378b2fcc6fa680fe
     # Replace input build-folder or version if needed.
     with:
       build-folder: 'build'
@@ -26,5 +26,5 @@ jobs:
       aws-region: ${{ secrets.APPS_AWS_REGION }}
       aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_APPS_PROD }}
       cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_APPS_PROD }}
-      app-id: ${{ secrets.APP_ID }}
+      app-key: ${{ secrets.APP_KEY }}
       graasp-domain: ${{ secrets.PROD_GRAASP_DOMAIN }}

.github/workflows/cintegration-s3-apps-caller.yml

@@ -15,7 +15,7 @@ on:
 jobs:
   graasp-deploy-s3-apps-workflow:
     name: Graasp app file-drop
-    uses: graasp/graasp-deploy/.github/workflows/cintegration-s3-apps.yml@7b5dd84304458c3c5ab03cbbde059670f77b1687
+    uses: graasp/graasp-deploy/.github/workflows/cintegration-s3-apps.yml@78c70b9b9e3b8c66b279a5d9378b2fcc6fa680fe
     with:
       build-folder: 'build'
       version: 'latest'
@@ -25,5 +25,5 @@ jobs:
       aws-region: ${{ secrets.APPS_AWS_REGION }}
       aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_APPS_DEV }}
       cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_APPS_DEV }}
-      app-id: ${{ secrets.APP_ID }}
+      app-key: ${{ secrets.APP_KEY }}
       graasp-domain: ${{ secrets.DEV_GRAASP_DOMAIN }}

.github/workflows/release-please.yml

@@ -0,0 +1,48 @@
+# Automate releases of new app versions
+name: release-please
+
+on:
+  push:
+    branches:
+      - 'main'
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v3
+        id: release
+        with:
+          release-type: node
+          package-name: graasp-app-file-drop
+          changelog-types: '[{"type":"feat","section":"Features","hidden":false},{"type":"fix","section":"Bug Fixes","hidden":false},{"type":"docs","section":"Documentation","hidden":false},{"type":"test","section":"Tests","hidden":false}]'
+
+      - uses: actions/checkout@v3
+
+      # creates minor and major tags that follow the latest release
+      - name: Tag major and minor versions
+        uses: jacobsvante/tag-major-minor-action@v0.1
+        if: ${{ steps.release.outputs.release_created }}
+        with:
+          major: ${{ steps.release.outputs.major }}
+          minor: ${{ steps.release.outputs.minor }}
+
+      # put created tag in an env variable to be sent to the dispatch
+      - name: Set tag
+        if: ${{ steps.release.outputs.release_created }}
+        id: set-tag
+        run: |
+          REPOSITORY=$(echo '${{ github.repository }}')
+          TAG=$(echo '${{ steps.release.outputs.tag_name }}')
+          JSON=$(jq -c --null-input --arg repository "$REPOSITORY" --arg tag "$TAG" '{"repository": $repository, "tag": $tag}')
+          echo "json=$JSON" >> $GITHUB_OUTPUT
+
+      # Trigger an 'on: repository_dispatch' workflow to run in graasp-deploy repository
+      - name: Push tag to Graasp Deploy (Staging)
+        if: ${{ steps.release.outputs.release_created }}
+        uses: peter-evans/repository-dispatch@v2
+        with:
+          token: ${{ secrets.REPO_ACCESS_TOKEN }}
+          repository: graasp/graasp-deploy
+          event-type: update-staging-version
+          client-payload: ${{ steps.set-tag.outputs.json }}

.gitignore

@@ -28,21 +28,12 @@ yarn-error.log*
 # include encrypted environment variables
 !.env*.encrypted
 
-# cache
-.eslintcache
-
 # exclude keys
 *.aes
 
 # exclude coverage
 /coverage
 .nyc_output
-cypress/downloads
-cypress/videos
-cypress/screenshots
-
-# exclude local database
-db.json
 
 # yarn
 .yarn/*
@@ -51,3 +42,9 @@ db.json
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# cypress
+cypress/screenshots
+cypress/videos
+
+.vscode

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install commitlint --edit "$1"
+yarn commitlint --edit ${1}

.husky/post-checkout

@@ -1,4 +1,8 @@
 #!/bin/sh
+
+# skip hook when in CI
+[ -n "$CI" ] && exit 0
+
 . "$(dirname "$0")/_/husky.sh"
 
 yarn install

.husky/post-commit

@@ -1,4 +1,8 @@
 #!/bin/sh
+
+# skip hook when in CI
+[ -n "$CI" ] && exit 0
+
 . "$(dirname "$0")/_/husky.sh"
 
 git status

.husky/pre-commit

@@ -1,4 +1,8 @@
 #!/bin/sh
+
+# skip hook when in CI
+[ -n "$CI" ] && exit 0
+
 . "$(dirname "$0")/_/husky.sh"
 
-yarn pre-commit
+yarn pretty-quick --staged && yarn lint && yarn test

.huskyrc

@@ -0,0 +1,10 @@
+{
+  "hooks": {
+    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+    "post-checkout": "yarn install",
+    "pre-commit": "pretty-quick --staged && yarn lint && yarn test:once",
+    "post-commit": "git status",
+    "post-merge": "yarn install",
+    "pre-push": "yarn lint && yarn test:once && yarn build"
+  }
+}

.prettierrc

@@ -2,5 +2,9 @@
   "trailingComma": "all",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": true
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "importOrder": ["^react", "^@?graasp*", "^@?mui*", "^@.*", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}