build: Update TypeScript to 5.9 (#980)

* Update TS to 5.9

* Update Storybook to v6.5.17 alpha for TS 5.0 compatibility

* Force storybook to use a newer version of fork-ts-checker-webpack-plugin

* Fix verbatimModuleSyntax errors

Author: frankieyan

package-lock.json

@@ -82,7 +82,7 @@
         "@babel/register": "^7.0.0",
         "@doist/eslint-config": "12.0.0",
         "@doist/prettier-config": "4.0.0",
-        "@doist/tsconfig": "^1.0.0",
+        "@doist/tsconfig": "2.0.0",
         "@geometricpanda/storybook-addon-badges": "^0.2.2",
         "@rollup/plugin-commonjs": "28.0.9",
         "@rollup/plugin-node-resolve": "16.0.3",
@@ -97,7 +97,7 @@
         "@storybook/addon-postcss": "^2.0.0",
         "@storybook/addons": "^6.5.3",
         "@storybook/jest": "^0.0.10",
-        "@storybook/react": "^6.5.3",
+        "@storybook/react": "6.5.17-alpha.0",
         "@storybook/testing-library": "^0.0.13",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^12.0.0",
@@ -127,6 +127,7 @@
         "eslint-plugin-jsx-a11y": "^6.5.1",
         "eslint-plugin-prettier": "5.5.4",
         "eslint-plugin-react": "7.37.5",
+        "fork-ts-checker-webpack-plugin": "6.5.3",
         "husky": "^4.3.0",
         "jest": "^28.1.0",
         "jest-axe": "^5.0.1",
@@ -156,7 +157,7 @@
         "svg-url-loader": "^6.0.0",
         "ts-loader": "^8.0.2",
         "tslib": "^2.0.0",
-        "typescript": "^4.8.3",
+        "typescript": "5.9.3",
         "webpack": "^4.43.0"
     },
     "dependencies": {
@@ -168,5 +169,8 @@
         "react-keyed-flatten-children": "^1.3.0",
         "react-markdown": "^5.0.3",
         "use-callback-ref": "^1.3.0"
+    },
+    "overrides": {
+        "fork-ts-checker-webpack-plugin": "$fork-ts-checker-webpack-plugin"
     }
 }

package.json

@@ -1,13 +1,14 @@
 import * as React from 'react'
 
 import { Box } from '../box'
-import { getClassNames, ResponsiveProp } from '../utils/responsive-props'
+import { getClassNames } from '../utils/responsive-props'
 
 import { emailToIndex, getInitials } from './utils'
 
 import styles from './avatar.module.css'
 
 import type { ObfuscatedClassName } from '../utils/common-types'
+import type { ResponsiveProp } from '../utils/responsive-props'
 
 const AVATAR_COLORS = [
     '#fcc652',

src/avatar/avatar.tsx

@@ -4,7 +4,9 @@ import { render, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
 
-import { Banner, SystemBannerType } from './banner'
+import { Banner } from './banner'
+
+import type { SystemBannerType } from './banner'
 
 describe('Banner', () => {
     it('renders as a <div /> element', () => {

src/banner/banner.test.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react'
 
 import { Box } from '../box'
-import { Button, ButtonProps, IconButton } from '../button'
+import { Button, IconButton } from '../button'
 import { BannerIcon } from '../icons/banner-icon'
 import { CloseIcon } from '../icons/close-icon'
 import { TextLink } from '../text-link'
 import { useId } from '../utils/common-helpers'
 
 import styles from './banner.module.css'
 
+import type { ButtonProps } from '../button'
+
 /**
  * Represents the type of a banner.
  * 'neutral' accepts a custom icon, the rest do not.

src/banner/banner.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { Box, BoxProps } from '../box'
+import { Box } from '../box'
 import { Column, Columns } from '../columns'
 import { Spinner } from '../spinner'
 import { Stack } from '../stack'
@@ -9,6 +9,7 @@ import { useId } from '../utils/common-helpers'
 
 import styles from './base-field.module.css'
 
+import type { BoxProps } from '../box'
 import type { WithEnhancedClassName } from '../utils/common-types'
 
 // Define the remaining characters before the character count turns red

src/base-field/base-field.tsx

@@ -5,7 +5,6 @@ import { Inline } from '../inline'
 import { Stack } from '../stack'
 import { Text } from '../text'
 import {
-    PartialProps,
     Placeholder,
     ResponsiveWidthRef,
     reusableBoxProps,
@@ -15,9 +14,10 @@ import {
     Wrapper,
 } from '../utils/storybook-helper'
 
-import { Box, BoxBorderRadius } from './box'
+import { Box } from './box'
 
 import type { Space, SpaceWithNegatives } from '../utils/common-types'
+import type { PartialProps } from '../utils/storybook-helper'
 import type {
     BoxAlignItems,
     BoxBackground,
@@ -29,6 +29,7 @@ import type {
     BoxPaddingProps,
     BoxTextAlign,
 } from './'
+import type { BoxBorderRadius } from './box'
 
 export default {
     title: 'Design system/Box',

src/box/box.stories.tsx

@@ -3,7 +3,9 @@ import * as React from 'react'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 
-import { Box, BoxProps } from './'
+import { Box } from './'
+
+import type { BoxProps } from './'
 
 describe('Box', () => {
     it('renders its children as its content', () => {

src/box/box.test.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react'
 
-import { Role, RoleProps } from '@ariakit/react'
+import { Role } from '@ariakit/react'
 import classNames from 'classnames'
 
 import { Box, getBoxClassNames } from '../box'
 import { Spinner } from '../spinner'
-import { Tooltip, TooltipProps } from '../tooltip'
+import { Tooltip } from '../tooltip'
 
 import styles from './button.module.css'
 
+import type { RoleProps } from '@ariakit/react'
+import type { TooltipProps } from '../tooltip'
 import type { ObfuscatedClassName } from '../utils/common-types'
 
 function preventDefault(event: React.SyntheticEvent) {

src/button/button.tsx

@@ -4,7 +4,6 @@ import { Box } from '../box'
 import { Stack } from '../stack'
 import {
     disableResponsiveProps,
-    PartialProps,
     Placeholder,
     ResponsiveWidthRef,
     reusableBoxProps,
@@ -16,6 +15,7 @@ import {
 
 import { Column, Columns } from './columns'
 
+import type { PartialProps } from '../utils/storybook-helper'
 import type {
     ColumnsCollapseBelow,
     ColumnsHorizontalAlignment,