feat!: add msw alternative for mocking (#169)

fix: upgrade node to v18
fix: update yarn to v4
feat: add a GraaspDevTools component
feat: transform Contexts from HOC to components for nesting

Author: spaenleh

.eslintignore

@@ -3,3 +3,7 @@
 dist/*
 # data definition files
 **/*.d.ts
+# jest config
+jest.config.ts
+coverage/*
+commitlint.config.js

.eslintrc

@@ -1,29 +1,127 @@
 {
-  "parser": "@typescript-eslint/parser",
   "extends": [
+    "airbnb",
+    "airbnb-typescript",
+    "plugin:import/typescript", // this is needed because airbnb uses eslint-plugin-import
+    "prettier",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended"
   ],
+  "plugins": ["@typescript-eslint", "prettier", "react-hooks"],
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "jest": true
+  },
+  "globals": {
+    "cy": true,
+    "Cypress": true
+  },
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "project": "./tsconfig.eslint.json",
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
     "sourceType": "module"
   },
   "rules": {
-    "semi": [
+    "react/prop-types": "off",
+    "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",
-      "always"
+      {
+        "devDependencies": true
+      }
     ],
-    "quotes": [
+    "no-console": ["warn", { "allow": ["warn", "error", "debug", "info"] }],
+    "import/prefer-default-export": "off",
+    "prettier/prettier": "error",
+    "import/extensions": [
       "error",
-      "single"
+      "ignorePackages",
+      {
+        "ts": "never",
+        "js": "never",
+        "tsx": "never"
+      }
+    ],
+    "@typescript-eslint/explicit-function-return-type": [
+      "error",
+      {
+        "allowExpressions": true,
+        "allowHigherOrderFunctions": true,
+        "allowTypedFunctionExpressions": true
+      }
     ],
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/no-explicit-any": 1,
-    "@typescript-eslint/no-inferrable-types": [
+    "@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": [
       "warn",
       {
-        "ignoreParameters": true
+        "extensions": [".tsx"]
+      }
+    ],
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function"
       }
     ],
-    "@typescript-eslint/no-unused-vars": "warn"
-  }
+    // eslint rule reports false error
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["error"],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ]
+  },
+  "settings": {
+    // "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      },
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "overrides": [
+    {
+      // enable the rule specifically for TypeScript files
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "@typescript-eslint/explicit-function-return-type": [
+          "off"
+          // {
+          //   "allowExpressions": true,
+          //   "allowHigherOrderFunctions": true,
+          //   "allowTypedFunctionExpressions": true
+          // }
+        ]
+      }
+    }
+  ]
 }

.github/workflows/test.yml

@@ -9,11 +9,6 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-
       - name: Yarn Install and Cache
         uses: graasp/graasp-deploy/.github/actions/yarn-install-and-cache@v1
 

.prettierrc

@@ -2,5 +2,9 @@
   "trailingComma": "all",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": true
+  "singleQuote": true,
+  "importOrder": ["^react", "^@?mui", "^@?graasp", "<THIRD_PARTY_MODULES>", "^@/", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }

.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

@@ -1,11 +1,11 @@
 checksumBehavior: update
 
+compressionLevel: mixed
+
 defaultSemverRangePrefix: ""
 
-nodeLinker: node-modules
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-4.0.1.cjs

.yarn/releases/yarn-3.6.1.cjs

@@ -43,12 +43,7 @@ import {
 
 const values = configureQueryClient({
   GRAASP_APP_KEY: process.env.REACT_APP_GRAASP_APP_KEY,
-  // build mock parent window given cypress (app) context or mock data
-  targetWindow: process.env.REACT_APP_ENABLE_MOCK_API === 'true'
-    ? buildMockParentWindow(
-        buildMockLocalContext(window.appContext),
-      )
-    : window.parent,
+  isStandalone: MOCK_API,
 });
 export values;
 ```