build: Bump eslint-related dependencies and fix errors

[frankieyan]

Short description

This is a second attempt at updating @doist/eslint-config to v12.0, which contains eslint-plugin-react-hooks v7.0, replacing the first attempt at #979.

Reference: https://github.com/Doist/eslint-config/pull/131

The difference is that we're now disabling no-restricted-imports and keeping react/react-in-jsx-scope after having issues bringing in React's JSX runtime. Since the exports appear to be different between React 17 and 18+, it may be easier to attempt this again after dropping React 17 support here.

Note

It should be easier to review commit-by-commit and omit certain ones, such as when prettier or import sorting are applied.

Please pay extra attention to the last few commits where eslint errors are fixed, e.g. setState and refs access during render.

Test plan

• In the TextField component's story, change the maxLength prop and verify that it is respected, and an indicator is rendered
• In the Modal component's story, verify that the modal's content receives focus on first render, rather than the close button. Then, verify that you can traverse to the close button via the keyboard
• In the KeyCapturer component's story, verify that the actions tab show the appropriate key events
  • Switch to either a Japanese, Korean, or Chinese input method, enter composition mode (e.g. cmd + space then start typing) and press enter. The enter key's event should not be logged until composition mode ends

[Copilot]

Pull Request Overview

This PR updates the project's linting and code formatting tooling by upgrading ESLint, TypeScript ESLint, Prettier, and related configurations to their latest versions. It also applies automatic formatting fixes across the entire codebase to comply with the new rules.

Key changes:

• Upgrades ESLint, TypeScript ESLint, and Prettier to latest major versions
• Reorganizes TypeScript configurations (moves stories config, excludes stories from main config)
• Applies code formatting fixes: import sorting, blank line standardization, trailing comma additions, indentation fixes

Reviewed Changes

Copilot reviewed 132 out of 139 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
package.json	Updates linting tool versions to latest
.eslintrc	Updates ESLint config to use new recommended ruleset names
tsconfig.stories.json	Deleted - moved to stories/tsconfig.json
stories/tsconfig.json	New TypeScript config for stories directory
tsconfig.json	Excludes stories directory from compilation
src/**/*.tsx	Formatting fixes: import sorting, blank lines, trailing commas
stories/**/*.tsx	Formatting fixes: import sorting, blank lines
README.md, CHANGELOG.md, etc.	Markdown list formatting standardization

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[nats12]

In the KeyCapturer component's story, verify that the actions tab show the appropriate key events

@frankieyan KeyCapturer doesn't have an actions tab 🤔

Did you mean KeyboardShortcut? If so, the actions area is empty for me there.

Switch to either a Japanese, Korean, or Chinese input method, enter composition mode (e.g. cmd + space then start typing) and press enter. The enter key's event should not be logged until composition mode ends

This triggers Spotlight search on Mac. Unless I'm missing something relating to the actions.

[nats12]

State is now set in the body of the component, is this safe?

[frankieyan]

Yup, there is an example and explanation of this in https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes

[nats12]

Given we're checking again for eventHandler on line 184, we could probably invert this check and check for eventHandler first, then whether key is enter:

if(eventHandler) {

	if(key === 'Enter' & ( isComposing ||
	  // Safari fires the onCompositionEnd event before the keydown event, so we
	  // have to rely on the 229 keycode, which is Enter when fired from an IME
	  // https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
	  (event.keyCode || event.which) === 229)
	) {
	
		return 
	}


	eventHandler(event)
     if (!propagateEvent) {
          event.preventDefault()
          event.stopPropagation()
      }
}

[frankieyan]

In the KeyCapturer component's story, verify that the actions tab show the appropriate key events

@frankieyan KeyCapturer doesn't have an actions tab 🤔

The bottom tabs are all buried in the "Canvas" tab as they are hidden from the docs page. Sorry, I should've mentioned this in the test plan.

Switch to either a Japanese, Korean, or Chinese input method, enter composition mode (e.g. cmd + space then start typing) and press enter. The enter key's event should not be logged until composition mode ends

This triggers Spotlight search on Mac. Unless I'm missing something relating to the actions.

You'll have to have one of those input methods installed first. Here's a recording:

Screen.Recording.2025-11-03.at.10.27.59.AM.mov

[frankieyan]

KeyCapturer doesn't have an actions tab 🤔

Also just in case, it looks like the changes you're seeing here are old, as the title has been changed from "Component Documentation" to "KeyCapturer" in this PR:

https://github.com/Doist/reactist/blob/eb6f2e09b4d400e970189316dee9486bc637edea/stories/components/KeyCapturer.stories.mdx

[nats12]

OK after seeing the video I totally got what you meant by composition mode 👍🏼 I had a Japanese input method installed but it does seem I was also looking at an older version.

Looks good! 🚀