Add typescript (#880)

* add typescript

* fix

* fin

* actions

* actions

.eslintrc.cjs

@@ -0,0 +1,97 @@
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:ssr-friendly/recommended',
+    'plugin:prettier/recommended'
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    project: './tsconfig.json',
+  },
+  plugins: ['import', 'prettier', '@typescript-eslint', 'ssr-friendly'],
+  rules: {
+    /**
+     * Allow empty arrow functions `() => {}`, while keeping other empty functions restricted
+     * @see https://eslint.org/docs/latest/rules/no-empty-function#allow-arrowfunctions
+     */
+    '@typescript-eslint/no-empty-function': ['error', { allow: ['arrowFunctions'] }],
+    '@typescript-eslint/ban-ts-comment': 1,
+    'no-const-assign': 'error',
+    /** Restrict imports from devDependencies since they are not included in library build. peerDependencies are ok */
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: false,
+        peerDependencies: true
+      }
+    ],
+    /**
+     * Enforce import order with empty lines between import group
+     * @see https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md
+     */
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          ['parent', 'sibling', 'index']
+        ],
+        pathGroups: [
+          {
+            pattern: '@/**',
+            group: 'internal'
+          }
+        ],
+        'newlines-between': 'always'
+      }
+    ],
+    /**
+     * Disallow combined module and type imports like this `import React, {FC} from 'react'`.
+     * Eslint will try to split into type and module imports instead
+     * @see https://typescript-eslint.io/rules/consistent-type-imports/
+     */
+    '@typescript-eslint/consistent-type-imports': 'error',
+    'import/no-cycle': 'error',
+    'prettier/prettier': ['error', {
+      "semi": true,
+      "singleQuote": true,
+      "jsxSingleQuote": false,
+      "trailingComma": "es5",
+      "bracketSpacing": false,
+      "jsxBracketSameLine": true,
+      "arrowParens": "avoid"
+    }]
+  },
+  overrides: [
+    {
+      /* Allow devDependencies imports for tests and config files */
+      files: ['*.js'],
+      rules: {
+        '@typescript-eslint/no-var-requires': 0,
+      },
+    },
+    {
+      /* Allow devDependencies imports for tests and config files */
+      files: ['**/*.spec.*', '**/testUtils/*.*', '**/*.js', '**/setupTests.ts'],
+      rules: {
+        'import/no-extraneous-dependencies': [
+          'error',
+          {
+            devDependencies: true,
+            peerDependencies: true,
+          },
+        ],
+      },
+    },
+  ],
+};
+// @typescript-eslint/no-var-requires

.github/workflows/merge-jobs.yml

@@ -14,6 +14,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - name: Cancel Workflow Action
         uses: styfle/[email protected]
         with:
@@ -25,10 +28,10 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
-          cache: 'yarn'
+          cache: 'pnpm'
       - name: Run yarn tasks
         run: |
-          yarn install --frozen-lockfile
+          pnpm install
       - name: Publish NPM package
         uses: JS-DevTools/npm-publish@v1
         with:

.github/workflows/pages.yml

@@ -30,18 +30,22 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+      - name: Checkout
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - name: Read .nvmrc
         run: echo ::set-output name=NVMRC::$(cat .nvmrc)
         id: nvm
       - name: Use Node.js ${{ steps.nvm.outputs.NVMRC }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
-          cache: 'yarn'
+          cache: 'pnpm'
       - name: Run yarn tasks
         run: |
-          yarn install --frozen-lockfile
-          yarn build:docs --quiet
+          pnpm install
+          pnpm run build:docs --quiet
       - name: Setup Pages
         uses: actions/configure-pages@v2
       - name: Upload artifact

.github/workflows/pull-request-jobs.yml

@@ -16,6 +16,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
       - name: Cancel Workflow Action
         uses: styfle/[email protected]
         with:
@@ -27,13 +30,13 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
-          cache: 'yarn'
-      - name: Run yarn tasks
+          cache: 'pnpm'
+      - name: Run tasks
         run: |
-          yarn install --frozen-lockfile
-          yarn lint:js --quiet
-          yarn lint:style --quiet
-          yarn test --silent
-          yarn start --smoke-test
-          yarn start:docs --smoke-test --quiet
-          yarn build:lib:local --silent
+          pnpm install
+          pnpm run lint:js --quiet
+          pnpm run lint:style --quiet
+          pnpm run test --silent
+          pnpm run start --smoke-test
+          pnpm run start:docs --smoke-test --quiet
+#          yarn build:lib:local --silent

.husky/pre-commit

@@ -2,3 +2,4 @@
 . "$(dirname "$0")/_/husky.sh"
 
 npx lint-staged
+npm run lint:tsc

.lintstagedrc

@@ -1,6 +1,6 @@
 {
-  "*.js": [
-    "eslint --fix --quiet"
+  "*.{js,ts,tsx}": [
+    "eslint --fix"
   ],
   "*.css": [
     "stylelint --fix --quiet"

.stylelintrc

@@ -1,5 +1,5 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "extends": ["stylelint-config-standard"],
   "rules": {
     "function-calc-no-unspaced-operator": true,
     "order/order": [

cleanFiles.js

@@ -1,4 +1,5 @@
 const rimraf = require('rimraf');
+
 const {files, templateDir} = require('./templateFiles');
 
 const cleanDir = () => {

copyFiles.js

@@ -1,4 +1,5 @@
 const copy = require('recursive-copy');
+
 const {files, templateDir} = require('./templateFiles');
 
 const copyFiles = () => {
@@ -25,4 +26,4 @@ const renameGitignore = async () => {
 };
 
 copyFiles();
-renameGitignore()
+renameGitignore();

package.json

@@ -62,20 +62,29 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
+    "@types/jest": "27.0.1",
+    "@types/node": "16.7.13",
+    "@types/prop-types": "15.7.11",
+    "@types/react": "18.0.0",
+    "@types/react-dom": "18.0.0",
+    "@typescript-eslint/parser": "6.12.0",
     "autoprefixer": "9.8.8",
     "babel-eslint": "10.1.0",
     "eslint": "8.37.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.8.0",
+    "eslint-config-prettier": "8.10.0",
     "eslint-config-react-app": "7.0.1",
+    "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-flowtype": "8.0.2",
     "eslint-plugin-fp": "2.3.0",
-    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-import": "2.29.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-ssr-friendly": "1.2.0",
     "husky": "8.0.3",
+    "identity-obj-proxy": "^3.0.0",
     "is-ci": "3.0.1",
     "lint-staged": "13.2.0",
     "npm-run-all": "4.1.5",
@@ -91,10 +100,10 @@
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-terser": "7.0.2",
-    "stylelint": "15.10.1",
-    "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-standard": "29.0.0",
-    "stylelint-order": "6.0.3"
+    "stylelint": "15.11.0",
+    "stylelint-config-standard": "34.0.0",
+    "stylelint-order": "6.0.3",
+    "typescript": "4.4.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -105,6 +114,7 @@
     "eject": "react-scripts eject",
     "lint:js": "eslint ./src/",
     "fix:js": "run-s 'lint:js --fix'",
+    "lint:tsc": "tsc --pretty --noEmit",
     "lint:style": "stylelint ./src/**/*.css",
     "fix:style": "run-s 'lint:style --fix'",
     "clean:files": "node ./cleanFiles.js",
@@ -115,9 +125,6 @@
     "build:docs": "build-storybook",
     "prepare": "is-ci || husky install"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",