feat: add typescript, migrate to dart-scss, change to vite

.eslintrc.js

@@ -2,55 +2,75 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
-    jest: true,
+    node: true,
   },
-  extends: ['eslint:recommended', 'plugin:react/recommended', 'eslint-config-airbnb', 'prettier'],
-  overrides: [],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  overrides: [
+    {
+      files: ['**/*.test.js', '**/*.test.ts', '**/*.test.tsx', '**/*.stories.*'],
+      // env: {
+      //   jest: true // now **/*.test.js files' env has both es6 *and* jest
+      // },
+      // // Can't extend in overrides: https://github.com/eslint/eslint/issues/8813
+      // // "extends": ["plugin:jest/recommended"]
+      // plugins: ['jest'],
+      // rules: {
+      //   'jest/no-disabled-tests': 'warn',
+      //   'jest/no-focused-tests': 'error',
+      //   'jest/no-identical-title': 'error',
+      //   'jest/prefer-to-have-length': 'warn',
+      //   'jest/valid-expect': 'error',
+      //   'import/no-anonymous-default-export': 'off'
+      // }
+    },
+  ],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
-    parser: '@babel/eslint-parser',
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  plugins: ['react'],
+  plugins: ['@typescript-eslint', 'react', 'prettier'],
   rules: {
-    'jsx-a11y/click-events-have-key-events': 0,
-    'jsx-a11y/mouse-events-have-key-events': 0,
-    'jsx-a11y/no-static-element-interactions': 0,
-
-    'arrow-body-style': 'off',
-    'arrow-parens': [2, 'always'],
-    'comma-dangle': [
-      'error',
+    'no-console': 'error',
+    'linebreak-style': 'off',
+    'import/extensions': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    'import/no-unresolved': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/require-default-props': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'react/no-deprecated': 'warn',
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': 'off',
+    'react/prop-types': 'off',
+    'react/no-unstable-nested-components': 'off',
+    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+    'jsx-a11y/no-noninteractive-element-interactions': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'no-param-reassign': ['error', { props: false }],
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
       {
-        arrays: 'always-multiline',
-        objects: 'always-multiline',
-        imports: 'always-multiline',
-        exports: 'always-multiline',
-        functions: 'only-multiline',
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
       },
     ],
-    'no-nested-ternary': 'off',
-    'no-underscore-dangle': ['error', { allowAfterThis: true, allowAfterSuper: true }],
-    'no-unused-vars': ['error', { args: 'none' }],
-    'object-shorthand': [1, 'never'],
-    'prefer-destructuring': 'off',
-    'prefer-object-spread': 'off',
-    'default-param-last': 'off',
-    'class-methods-use-this': 'off',
-
-    'import/prefer-default-export': 'off',
-
-    'react/button-has-type': 'off',
-    'react/destructuring-assignment': 1,
-    'react/jsx-boolean-value': 'off',
-    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
-    'react/require-default-props': 'off',
-    'react/prefer-stateless-function': 0,
-    'react/prop-types': [2, { ignore: ['children', 'match', 't', 'i18n'] }],
-    'react/no-unknown-property': 0,
-    'react/function-component-definition': 'off',
-    'react/jsx-props-no-spreading': 'off',
-    'react/jsx-no-useless-fragment': 'off',
-    'react/no-unused-class-component-methods': 'off',
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
   },
 };

.github/workflows/ci.yml

@@ -20,13 +20,13 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: npm
-      - name: Install npm dependencies
-        run: npm install
+          cache: yarn
+      - name: Install yarn dependencies
+        run: yarn install
       - name: Format
-        run: npm run prettier
+        run: yarn prettier
       - name: Lint
-        run: npm run lint
+        run: yarn lint
 
   build:
     name: Build
@@ -38,11 +38,11 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: npm
-      - name: Install npm dependencies
-        run: npm install
+          cache: yarn
+      - name: Install yarn dependencies
+        run: yarn install
       - name: Build
-        run: npm run build
+        run: yarn build
 
   test:
     name: Test
@@ -54,8 +54,8 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
-          cache: npm
-      - name: Install npm dependencies
-        run: npm install
+          cache: yarn
+      - name: Install yarn dependencies
+        run: yarn install
       - name: Run tests
-        run: npm test
+        run: yarn test