build: Bump eslint-related dependencies and fix errors (#982)

* chore(deps): Bump eslint-related dependencies

* Update doist eslint-config preset name

* Disable no-restricted-imports as we aren't using React 17+'s jsx runtime

* Run prettify

* Colocate storybook tsconfig with its modules

* Add @doist/eslint-config/simple-import-sort preset

* Update autosorted imports/exports

* Fix setState synchronously during effect error

* Fix unbound-method error

* Fix and suppress react-hooks/refs

* Early return when there's no handler in KeyCapturer

Author: frankieyan

.eslintrc

@@ -1,9 +1,10 @@
 {
     "plugins": ["jest", "jsx-a11y"],
     "extends": [
-        "@doist/eslint-config/recommended-requiring-type-checking",
+        "@doist/eslint-config/recommended-type-checked",
         "@doist/eslint-config/react",
-        "plugin:jest/recommended"
+        "plugin:jest/recommended",
+        "@doist/eslint-config/simple-import-sort"
     ],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
@@ -12,7 +13,7 @@
             "impliedStrict": true
         },
         "sourceType": "module",
-        "project": ["tsconfig.json", "tsconfig.stories.json"]
+        "project": ["tsconfig.json", "stories/tsconfig.json"]
     },
     "ignorePatterns": [
         "dist/**",
@@ -28,7 +29,12 @@
         "import/no-default-export": "off", // Legacy API.
         "react/no-find-dom-node": "off",
         "@typescript-eslint/explicit-module-boundary-types": "off",
-        "@typescript-eslint/ban-ts-comment": "off"
+        "@typescript-eslint/ban-ts-comment": "off",
+
+        // Resolving jsx-runtime mismatched versions of React (e.g. v17 vs v18)
+        // See https://github.com/Doist/reactist/pull/979
+        "no-restricted-imports": "off"
+
     },
     "overrides": [
         {

.github/CONTRIBUTING.md

@@ -10,19 +10,19 @@ Our [README](../README.md) should contain all information to get you started. If
 
 Do you want to work on an existing issue?
 
--   Leave a comment on the issue saying that you start working on it.
+- Leave a comment on the issue saying that you start working on it.
 
 Do you want to add a new component?
 
--   Create an issue describing the component and we'll tell you whether it's a good fit for Reactist (most of them will be so don't be shy 😊). After that you can start working on it.
+- Create an issue describing the component and we'll tell you whether it's a good fit for Reactist (most of them will be so don't be shy 😊). After that you can start working on it.
 
 Did you find a bug or a component not behaving as expected?
 
--   Create an issue describing the problem. Either we will fix this or give you the opportunity (and help) to fix it yourself.
+- Create an issue describing the problem. Either we will fix this or give you the opportunity (and help) to fix it yourself.
 
 Any other question / feedback?
 
--   Open an issue and let us know :)
+- Open an issue and let us know :)
 
 ## Struggling during development or need help?
 

.github/ISSUE_TEMPLATE/Bug.md

@@ -31,6 +31,6 @@ If possible, describe how this bug could be fixed.
 Consider adding any relevant environment information here.
 -->
 
--   `@doist/reactist` version:
--   `react` version:
--   Browser:
+- `@doist/reactist` version:
+- `react` version:
+- Browser:

.github/PULL_REQUEST_TEMPLATE.md

@@ -16,9 +16,9 @@ Please describe your implementation and any details that we should keep in mind
 Feel free to leave unchecked or remove the lines that are not applicable.
 -->
 
--   [ ] Added tests for bugs / new features
--   [ ] Updated docs (storybooks, readme)
--   [ ] Reviewed and approved Chromatic visual regression tests in CI
+- [ ] Added tests for bugs / new features
+- [ ] Updated docs (storybooks, readme)
+- [ ] Reviewed and approved Chromatic visual regression tests in CI
 
 <!--
 _Note:_ versioning is handled by [release-please](https://github.com/googleapis/release-please) action, based on the PR title.

.storybook/webpack.config.js

@@ -40,7 +40,8 @@ module.exports = {
             {
                 test: /\.(m?jsx?|tsx?)$/,
                 // Exclude all node_modules from transpilation, except for Ariakit and Storybook testing libraries
-                exclude: /node_modules\/(?!(ariakit.*|@storybook\/expect|@storybook\/jest|@adobe\/css-tools|@testing-library\/jest-dom)\/).*/,
+                exclude:
+                    /node_modules\/(?!(ariakit.*|@storybook\/expect|@storybook\/jest|@adobe\/css-tools|@testing-library\/jest-dom)\/).*/,
                 use: [{ loader: 'babel-loader', options: babelConfigForNodeModules }],
             },
             {

CHANGELOG.md

@@ -10,19 +10,19 @@ We pledge to act and interact in ways that contribute to an open, welcoming, div
 
 Examples of behavior that contributes to a positive environment for our community include:
 
--   Demonstrating empathy and kindness toward other people
--   Being respectful of differing opinions, viewpoints, and experiences
--   Giving and gracefully accepting constructive feedback
--   Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
--   Focusing on what is best not just for us as individuals, but for the overall community
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall community
 
 Examples of unacceptable behavior include:
 
--   The use of sexualized language or imagery, and sexual attention or advances of any kind
--   Trolling, insulting or derogatory comments, and personal or political attacks
--   Public or private harassment
--   Publishing others' private information, such as a physical or email address, without their explicit permission
--   Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of sexualized language or imagery, and sexual attention or advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
 
 ## Enforcement Responsibilities
 

CODE_OF_CONDUCT.md

@@ -197,9 +197,9 @@ We recommend you enable these tests on those Storybook stories that have several
 
 When you open a GitHub PR, you'll notice the "UI Review" and "UI Tests" CI steps.
 
--   Clicking on "Details" will bring you to the Chromatic UI (if you don't already have a Chromatic account, please sign-up using your GitHub account).
--   Now you can review and accept your changes (or go back and change your code).
--   When you're happy with your changes, make sure to mark them as "Approved".
+- Clicking on "Details" will bring you to the Chromatic UI (if you don't already have a Chromatic account, please sign-up using your GitHub account).
+- Now you can review and accept your changes (or go back and change your code).
+- When you're happy with your changes, make sure to mark them as "Approved".
 
 # Releasing
 
@@ -208,7 +208,6 @@ This project uses [release-please](https://github.com/googleapis/release-please)
 ## How it works
 
 1. Make your changes using [Conventional Commits](https://www.conventionalcommits.org/):
-
     - `feat:` for new features (minor version bump)
     - `fix:` for bug fixes (patch version bump)
     - `style:` for code style changes
@@ -223,7 +222,6 @@ This project uses [release-please](https://github.com/googleapis/release-please)
     - `chore:` for maintenance tasks (NOTE: these are not included in the changelog)
 
 2. When commits are pushed to `main`:
-
     - Release-please automatically creates/updates a release PR
     - The PR includes version bump and changelog updates
     - Review the PR and merge when ready