deps: upgrade ariakit and linting

.eslintrc

@@ -1,7 +1,7 @@
 {
     "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"
     ],
@@ -24,6 +24,7 @@
         "webpack.config.*"
     ],
     "rules": {
+        "react/react-in-jsx-scope": "off",
         "func-style": "off",
         "import/no-default-export": "off", // Legacy API.
         "react/no-find-dom-node": "off",

.nvmrc

@@ -1 +1 @@
-v16
+v20

.plop/templates/component/component.stories.tsx.hbs

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import { {{pascalCase name}} } from './{{dashCase name}}'
 
 export default {

.plop/templates/component/component.test.tsx.hbs

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
 import { {{pascalCase name}} } from './{{dashCase name}}'
 

.plop/templates/component/component.tsx.hbs

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { Box } from '../box'
 import styles from './{{dashCase name}}.module.css'
 
@@ -7,6 +6,7 @@ type {{pascalCase name}}Props = {
      * The {{pascalCase name}}’s visual variant.
      */
     variant: 'primary' | 'secondary'
+
     /**
      * The content or label of the {{pascalCase name}}.
      */

.storybook/BaseDecorator.js

@@ -1,6 +1,4 @@
 /**
  * This decorator acts as a base decorator for all stories.
  */
-import * as React from 'react'
-
 export default (Story) => Story()

babel.config.js

@@ -8,7 +8,7 @@ module.exports = {
                 targets: test ? { node: 'current' } : { browsers: 'defaults, not IE 11' },
             },
         ],
-        '@babel/preset-react',
+        ['@babel/preset-react', { runtime: 'automatic' }],
         '@babel/preset-typescript',
     ],
     plugins: ['@babel/proposal-object-rest-spread'],

package.json

@@ -53,6 +53,7 @@
         "plop": "plop"
     },
     "peerDependencies": {
+        "@ariakit/react": ">=0.4.6",
         "classnames": "^2.2.5",
         "prop-types": "^15.6.2",
         "react": "^17.0.0 || ^18.0.0",
@@ -70,9 +71,9 @@
         "@babel/preset-react": "^7.0.0",
         "@babel/preset-typescript": "^7.10.1",
         "@babel/register": "^7.0.0",
-        "@doist/eslint-config": "^7.1.2",
-        "@doist/prettier-config": "^3.0.5",
-        "@doist/tsconfig": "^1.0.0",
+        "@doist/eslint-config": "^11.1.0",
+        "@doist/prettier-config": "^4.0.0",
+        "@doist/tsconfig": "^2.0.0",
         "@geometricpanda/storybook-addon-badges": "^0.2.2",
         "@rollup/plugin-typescript": "11.1.6",
         "@storybook/addon-actions": "^6.5.3",
@@ -83,7 +84,6 @@
         "@storybook/addon-links": "^6.5.3",
         "@storybook/addon-postcss": "^2.0.0",
         "@storybook/addons": "^6.5.3",
-        "@storybook/jest": "^0.0.10",
         "@storybook/react": "^6.5.3",
         "@storybook/testing-library": "^0.0.13",
         "@testing-library/jest-dom": "^5.14.1",
@@ -97,8 +97,8 @@
         "@types/marked": "^4.0.8",
         "@types/react": "18.3.1",
         "@types/react-dom": "18.3.0",
-        "@typescript-eslint/eslint-plugin": "^5.25.0",
-        "@typescript-eslint/parser": "^5.25.0",
+        "@typescript-eslint/eslint-plugin": "^6.0.0",
+        "@typescript-eslint/parser": "^6.0.0",
         "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
         "autoprefixer": "^9.8.0",
         "babel-core": "^7.0.0-bridge.0",
@@ -110,9 +110,9 @@
         "eslint": "^8.16.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-formatter-codeframe": "^7.32.1",
-        "eslint-plugin-jest": "^26.2.2",
+        "eslint-plugin-jest": "^27.9.0",
         "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react": "^7.30.0",
         "husky": "^4.3.0",
         "jest": "^28.1.0",
@@ -128,7 +128,7 @@
         "optimize-css-assets-webpack-plugin": "^5.0.3",
         "path": "^0.12.7",
         "plop": "^3.1.1",
-        "prettier": "2.1.2",
+        "prettier": "3.3.3",
         "raw-loader": "^4.0.1",
         "react": "^17.0.2",
         "react-docgen-typescript-loader": "^3.7.2",
@@ -145,11 +145,10 @@
         "ts-loader": "^8.0.2",
         "tsdx": "0.14.1",
         "tslib": "^2.0.0",
-        "typescript": "^4.6.4",
+        "typescript": "^5.5.4",
         "webpack": "^4.43.0"
     },
     "dependencies": {
-        "@ariakit/react": "0.4.5",
         "aria-hidden": "^1.2.1",
         "dayjs": "^1.8.10",
         "patch-package": "^6.4.6",
@@ -159,9 +158,9 @@
         "use-callback-ref": "^1.3.0"
     },
     "overrides": {
-        "typescript": "^4.6.4",
         "@rollup/plugin-typescript": "11.1.6",
-        "rollup": "2.79.1"
+        "rollup": "2.79.1",
+        "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
     },
     "bugs": {
         "url": "https://github.com/Doist/reactist/issues"

src/alert/alert.test.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
-import { Alert, AlertProps } from './alert'
+import { Alert, type AlertProps } from './alert'
 
 describe('Alert', () => {
     it('allows to be dismissed', () => {
         function Example(props: Omit<AlertProps, 'closeLabel' | 'onClose'>) {
-            const [show, setShow] = React.useState(true)
+            const [show, setShow] = useState(true)
             return show ? (
                 <Alert {...props} closeLabel="Close alert" onClose={() => setShow(false)} />
             ) : null

src/alert/alert.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { getClassNames } from '../utils/responsive-props'
 import { Box } from '../box'
 import { Button } from '../button'

src/avatar/avatar.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from '@testing-library/react'
-import * as React from 'react'
 
 import { Avatar } from './avatar'
 

src/avatar/avatar.tsx

@@ -1,8 +1,6 @@
-import * as React from 'react'
-
 import { getInitials, emailToIndex } from './utils'
 
-import { getClassNames, ResponsiveProp } from '../utils/responsive-props'
+import { getClassNames, type ResponsiveProp } from '../utils/responsive-props'
 import styles from './avatar.module.css'
 import { Box } from '../box'
 import type { ObfuscatedClassName } from '../utils/common-types'

src/badge/badge.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
 import { Badge } from './badge'
 

src/badge/badge.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import { Box } from '../box'
 
 import styles from './badge.module.css'

src/banner/banner.test.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
-import { Banner, BannerTone } from './banner'
+import { Banner, type BannerTone } from './banner'
 
 describe('Banner', () => {
     it('renders as a <div /> element', () => {
@@ -18,11 +17,7 @@ describe('Banner', () => {
         ['info' as BannerTone, 'title-info'],
         ['promotion' as BannerTone, 'title-promotion'],
     ])('renders a different CSS class according to the tone', (tone, expectedCSSClass) => {
-        render(
-            <>
-                <Banner tone={tone} icon={'💚'} title={'Info'} />
-            </>,
-        )
+        render(<Banner tone={tone} icon={'💚'} title={'Info'} />)
         expect(screen.getByText('Info')).toHaveClass(expectedCSSClass)
     })
 

src/banner/banner.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { forwardRef } from 'react'
 import { Box } from '../box'
 import { Columns, Column } from '../columns'
 import { useId } from '../utils/common-helpers'
@@ -36,7 +36,7 @@ type BannerProps = {
     action?: React.ReactElement | string | number
 }
 
-const Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(
+const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
     { id, tone, icon, title, description, action, ...props }: BannerProps,
     ref,
 ) {

src/base-field/base-field.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react'
-import { Box, BoxProps } from '../box'
+import { Box, type BoxProps } from '../box'
 import { useId } from '../utils/common-helpers'
 import { Text } from '../text'
-import styles from './base-field.module.css'
 import { Stack } from '../stack'
+import styles from './base-field.module.css'
 
 import type { WithEnhancedClassName } from '../utils/common-types'
 import { Spinner } from '../spinner'

src/box/box.stories.tsx

@@ -1,17 +1,15 @@
-import * as React from 'react'
-
 import {
     select,
     selectWithNone,
     reusableBoxProps,
     Placeholder,
     ResponsiveWidthRef,
     Wrapper,
-    PartialProps,
+    type PartialProps,
     selectSize,
 } from '../utils/storybook-helper'
 
-import { Box, BoxBorderRadius } from './box'
+import { Box, type BoxBorderRadius } from './box'
 import { Inline } from '../inline'
 import { Stack } from '../stack'
 import { Text } from '../text'

src/box/box.test.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
-import { Box, BoxProps } from './'
+import { Box, type BoxProps } from './'
 import { axe } from 'jest-axe'
 
 describe('Box', () => {

src/box/box.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { createElement } from 'react'
 import classNames from 'classnames'
 import { polymorphicComponent } from '../utils/polymorphism'
 import { getClassNames } from '../utils/responsive-props'
@@ -217,7 +217,7 @@ const Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(
     },
     ref,
 ) {
-    return React.createElement(
+    return createElement(
         component,
         {
             ...props,

src/button/button.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { act, render, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Button, IconButton } from './button'

src/button/button.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react'
+import { forwardRef } from 'react'
 import classNames from 'classnames'
-import { Role, RoleProps } from '@ariakit/react'
+import { Role, type RoleProps } from '@ariakit/react'
 
 import { Box, getBoxClassNames } from '../box'
 import { Spinner } from '../spinner'
-import { Tooltip, TooltipProps } from '../tooltip'
+import { Tooltip, type TooltipProps } from '../tooltip'
 
 import styles from './button.module.css'
 
@@ -132,7 +132,7 @@ interface ButtonProps extends CommonButtonProps {
  * A button element that displays a text label and optionally a start or end icon. It follows the
  * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
  */
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     {
         variant,
         tone = 'normal',
@@ -225,7 +225,7 @@ interface IconButtonProps extends CommonButtonProps {
  * also makes sure to always show a tooltip with its label. It follows the
  * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
  */
-const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
     {
         variant,
         tone = 'normal',

src/checkbox-field/checkbox-field.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { render, screen } from '@testing-library/react'
 import { CheckboxField } from '.'
 import userEvent from '@testing-library/user-event'
@@ -7,7 +7,7 @@ import { TestIcon } from '../utils/test-helpers'
 
 describe('CheckboxField', () => {
     function IndeterminateTestCase({ initialState }: { initialState: boolean[] }) {
-        const [state, setState] = React.useState<boolean[]>(initialState)
+        const [state, setState] = useState<boolean[]>(initialState)
         const checkedCount = state.filter(Boolean).length
         const indeterminate = checkedCount > 0 && checkedCount < state.length
 
@@ -151,7 +151,7 @@ describe('CheckboxField', () => {
 
     it('can be a controlled input field', () => {
         function TestCase() {
-            const [checked, setChecked] = React.useState(false)
+            const [checked, setChecked] = useState(false)
             return (
                 <>
                     <CheckboxField

src/checkbox-field/checkbox-field.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { forwardRef, useEffect, useRef, useState } from 'react'
 import { Box } from '../box'
 import { Text } from '../text'
 import { CheckboxIcon } from './checkbox-icon'
@@ -60,7 +60,7 @@ interface CheckboxFieldProps
     indeterminate?: boolean
 }
 
-const CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(
+const CheckboxField = forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(
     { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },
     ref,
 ) {
@@ -76,13 +76,13 @@ const CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(fun
         console.warn('A Checkbox needs a label')
     }
 
-    const [keyFocused, setKeyFocused] = React.useState(false)
-    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)
+    const [keyFocused, setKeyFocused] = useState(false)
+    const [checkedState, setChecked] = useState(props.checked ?? defaultChecked ?? false)
     const isChecked = props.checked ?? checkedState
 
-    const internalRef = React.useRef<HTMLInputElement>(null)
+    const internalRef = useRef<HTMLInputElement>(null)
     const combinedRef = useForkRef(internalRef, ref)
-    React.useEffect(
+    useEffect(
         function setIndeterminate() {
             if (internalRef.current && typeof indeterminate === 'boolean') {
                 internalRef.current.indeterminate = indeterminate

src/checkbox-field/checkbox-icon.tsx

@@ -1,14 +1,10 @@
-import * as React from 'react'
-
 const svgPath = {
     checked:
         'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',
     unchecked:
         'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',
-    mixed:
-        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',
-    filled:
-        'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z',
+    mixed: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',
+    filled: 'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z',
 } as const
 
 type Props = React.SVGProps<SVGSVGElement> & {