fix critical (#222)

* fix npm

* fix critical

* fix eslint mdx

* force upgrade

* fix ci

* fix storybook

* fix eslintrc

* fix some jsx issue

* fix : eslint upgrade to 8

* added jest fix

* fix: emotion core

* remove old babel

* split babelrc

* fix css

* fix: typecheck

* fix: remove babel preset from webpack

Co-authored-by: David <david_tjokroaminoto@tech.gov.sg>

.eslintrc.json

@@ -0,0 +1,73 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "browser": true,
+    "jest": true,
+    "es2020": true
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["react-hooks", "@typescript-eslint"],
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
+    "@typescript-eslint/explicit-function-return-type": [
+      "warn",
+      {
+        "allowExpressions": true,
+        "allowTypedFunctionExpressions": true
+      }
+    ],
+    "@typescript-eslint/no-explicit-any": "off",
+    "react/prop-types": "off",
+    "react/self-closing-comp": "error",
+    "array-callback-return": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+    "prettier/prettier": [
+      1,
+      {
+        "endOfLine": "auto"
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["*.md"],
+      "rules": {
+        "prettier/prettier": [
+          2,
+          {
+            "parser": "markdown"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.mdx"],
+      "extends": ["plugin:mdx/overrides", "plugin:mdx/recommended"]
+    },
+    {
+      "files": ["*.test.ts", "*.test.tsx"],
+      "extends": ["plugin:jest/all"],
+      "rules": {
+        "jest/prefer-expect-assertions": "off"
+      }
+    }
+  ]
+}

.github/workflows/ci-pull-request-open.yml

@@ -22,11 +22,12 @@ jobs:
     runs-on: ubuntu-latest
     name: Tests
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: "14.x"
-      - run: npm install
+      - run: npm install -g npm@9
+      - run: npm ci
       - run: npm run lint
       - run: npm run check-types
       - run: npm run test

.github/workflows/dependency-check.yml

@@ -17,11 +17,12 @@ jobs:
       matrix:
         node-version: [14.x]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
+      - run: npm i -g npm@9
       - run: npm ci
       - uses: GovTechSG/dependency-check-action@v2.0.0
         env:

.gitignore

@@ -9,3 +9,4 @@ yarn.lock
 dist
 *.iml
 .idea
+docs/*

.npmrc

@@ -0,0 +1,2 @@
+legacy-peer-deps=true
+engine-strict=true

.storybook/webpack.config.js

@@ -11,7 +11,6 @@ module.exports = ({ config }) => {
     }),
     require.resolve("@babel/preset-typescript"),
     require.resolve("@babel/preset-react"),
-    require.resolve("@emotion/babel-preset-css-prop"),
   ];
 
   config.module.rules.push(

application/app.tsx

@@ -4,7 +4,7 @@ import {
   FrameConnector,
   HostActionsHandler,
 } from "@govtechsg/decentralized-renderer-react-components";
-import { css } from "@emotion/core";
+import { css } from "@emotion/css";
 import styled from "@emotion/styled";
 
 interface AppProps {

babel.config.json

@@ -0,0 +1,19 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@babel/plugin-proposal-optional-chaining",
+    "@emotion"
+  ]
+}