Support for React 19 (#2559)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue

<!-- Please link to issue if one exists -->

- Fixes #2558

## Summary

<!-- Please brief explanation of the changes made -->

- bezier-react를 React 19 버전으로 업데이트하고, 피어 디펜던시를 업데이트합니다. React 19 버전에서는
17 버전부터 도입된 새로운 JSX tranform을 사용하므로, 이를 지원하지 않는 16.8 버전에 대한 지원은 제거했습니다.
따라서 메이저 버전을 올립니다.
- bezier-icons도 마찬가지로 React 19 버전으로 업데이트하고, 옵셔널 피어디펜던시로 React 17 버전 이상을
추가했습니다. bezier-icons는 svg만 사용할 수도 있으므로 옵셔널로 두었습니다.

## Details

<!-- Please elaborate description of the changes -->

몇몇 개선사항들

- bezier-react에 새로운 JSX transform을 사용합니다. 사용처에서 번들 사이즈 감소와 성능 향상이 있을 거로
예상합니다.
- bezier-icons에 browserlist를 추가하여 불필요한 polyfill이 생기지 않도록 합니다. 원래
`ai.mjs` 파일에 objectSpread2 폴리필이 추가되어있었는데, 제거되었습니다. 마찬가지로 사용처에서 번들 사이즈
감소와 성능 향상이 있을 거로 예상합니다.
- babel의 corejs 속성 등 불필요한 속성을 제거했습니다.

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

Yes. 더 이상 React 16.8 버전을 지원하지 않습니다.

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->

-
https://react.dev/blog/2024/04/25/react-19-upgrade-guide#new-jsx-transform-is-now-required
- https://babeljs.io/docs/babel-preset-react#react-automatic-runtime

.changeset/few-walls-design.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': major
+---
+
+Add support for React 19 and enable new JSX transform. Increase minimum supported React peer dependency version from 16.8 to 17.

.changeset/fifty-gorillas-smell.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-icons': minor
+---
+
+Enable new JSX transform and update React peer dependency to be optional for version 17 and above

configs/tsconfig/browser.json

@@ -2,6 +2,7 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "@channel.io/typescript-config/web.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "allowJs": true
   }
 }

configs/tsconfig/node.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "module": "nodenext",
     "moduleResolution": "nodenext",
+    "jsx": "react-jsx",
     "allowJs": true
   }
 }

packages/bezier-codemod/package.json

@@ -29,12 +29,12 @@
     "@inkjs/ui": "^2.0.0",
     "ink": "^5.1.0",
     "meow": "^13.2.0",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "ts-morph": "^24.0.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.16",
+    "@types/react": "^19.0.1",
     "eslint-config-bezier": "workspace:*",
     "tsconfig": "workspace:*"
   },

packages/bezier-codemod/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import {
   Select,

packages/bezier-codemod/src/cli.tsx

@@ -1,5 +1,4 @@
 #!/usr/bin/env node
-import React from 'react'
 
 import { render } from 'ink'
 import meow from 'meow'

packages/bezier-codemod/src/transforms/icon-name-to-bezier-icons/fixtures/input1.tsx

@@ -1,5 +1,4 @@
 /* External dependencies */
-import React from 'react'
 import { Button } from '@channel.io/bezier-react'
 
 /* Internal dependencies */

packages/bezier-codemod/src/transforms/icon-name-to-bezier-icons/fixtures/input2.tsx

@@ -1,5 +1,5 @@
 /* External dependencies */
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { Button } from '@channel.io/bezier-react'
 import { ArrowRightIcon } from '@channel.io/bezier-icons'
 

packages/bezier-codemod/src/transforms/icon-name-to-bezier-icons/fixtures/output1.tsx

@@ -1,5 +1,4 @@
 /* External dependencies */
-import React from 'react'
 import { Button } from '@channel.io/bezier-react'
 import { ArrowLeftIcon, AllIcon } from '@channel.io/bezier-icons'
 

packages/bezier-codemod/src/transforms/icon-name-to-bezier-icons/fixtures/output2.tsx

@@ -1,5 +1,5 @@
 /* External dependencies */
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { Button } from '@channel.io/bezier-react'
 import { ArrowRightIcon, FlagFilledIcon, ArrowLeftIcon, AllIcon } from '@channel.io/bezier-icons'
 

packages/bezier-codemod/src/transforms/icons-to-bezier-icons/fixtures/input.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { AllIcon, Button, CheckIcon as CheckIconSource, Icon, type IconName, IconSize, LegacyIcon } from '@channel.io/bezier-react'
 
 import { Foo } from './foo.js'

packages/bezier-codemod/src/transforms/icons-to-bezier-icons/fixtures/output.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { AllIcon, CheckIcon as CheckIconSource, type IconName } from '@channel.io/bezier-icons'
 import { Button, Icon, IconSize, LegacyIcon } from '@channel.io/bezier-react'
 

packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/fixtures/input1.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ProgressBar, ProgressBarSize, ProgressBarVariant, AvatarSize, Avatar } from '@channel.io/bezier-react'
 
 export default function UploadProgress({

packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/fixtures/input2.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ProgressBar, type ProgressBarSize, ProgressBarVariant } from '@channel.io/bezier-react'
 
 export default function UploadProgress({

packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/fixtures/input3.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ProgressBar, ProgressBarSize, ProgressBarVariant } from '@channel.io/bezier-react'
 
 export default function UploadProgress({

packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/fixtures/output1.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ProgressBar, Avatar } from '@channel.io/bezier-react'
 
 export default function UploadProgress({

packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/fixtures/output2.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ProgressBar, type ProgressBarSize } from '@channel.io/bezier-react'
 
 export default function UploadProgress({

packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/fixtures/output3.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ProgressBar, ProgressBarVariant } from '@channel.io/bezier-react'
 
 export default function UploadProgress({

packages/bezier-codemod/tsconfig.json

@@ -2,7 +2,6 @@
   "extends": "tsconfig/node.json",
   "compilerOptions": {
     "outDir": "dist",
-    "jsx": "react",
     "declaration": true
   },
   "include": ["src"],

packages/bezier-figma-plugin/package.json

@@ -23,8 +23,8 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@figma/plugin-typings": "^1.104.0",
-    "@types/react": "^18.3.16",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "css-loader": "^7.1.2",
     "eslint-config-bezier": "workspace:*",
     "html-webpack-inline-source-plugin": "^0.0.10",
@@ -41,8 +41,8 @@
     "@channel.io/bezier-icons": "0.38.0",
     "@channel.io/bezier-react": "2.6.2",
     "octokit": "^4.0.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router-dom": "^7.0.2"
   }
 }

packages/bezier-figma-plugin/src/ui/components/ExtractSuccess.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 
 import { Button, Text, VStack } from '@channel.io/bezier-react'
 import { useLocation, useNavigate } from 'react-router-dom'

packages/bezier-figma-plugin/src/ui/components/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 
 import { HexahedronIcon } from '@channel.io/bezier-icons'
 import { ListItem, VStack } from '@channel.io/bezier-react'

packages/bezier-figma-plugin/src/ui/components/IconExtract.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import {
   Button,

packages/bezier-figma-plugin/src/ui/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { AppProvider } from '@channel.io/bezier-react'
 import { createRoot } from 'react-dom/client'
 import { MemoryRouter, Route, Routes } from 'react-router-dom'

packages/bezier-icons/.browserslistrc

@@ -0,0 +1,4 @@
+>= 1% in KR
+>= 1% in JP
+>= 1% in US
+not dead

packages/bezier-icons/babel.config.js

@@ -1,12 +1,7 @@
 module.exports = {
   presets: [
-    '@babel/preset-env',
-    /**
-     * Will use the native built-in instead of trying to polyfill behavior for any plugins that require one.
-     * Remove the helper function for Object.assign.
-     * @see https://babeljs.io/docs/babel-preset-react#usebuiltins
-     */
-    ['@babel/preset-react', { useBuiltIns: true }],
+    ['@babel/preset-env', { bugfixes: true }],
+    ['@babel/preset-react', { runtime: 'automatic' }],
     ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
   ],
 }

packages/bezier-icons/package.json

@@ -60,5 +60,13 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "svgo": "^3.3.2",
     "tsconfig": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   }
 }

packages/bezier-icons/rollup.config.mjs

@@ -197,7 +197,7 @@ function svgBuild(options = {}) {
            */
           plugins: ['@svgr/plugin-jsx'],
           icon: true,
-          jsxRuntime: 'classic',
+          jsxRuntime: 'automatic',
           ref: true,
           template: reactIconTemplate,
         },
@@ -281,7 +281,7 @@ export default defineConfig({
       manualChunks,
     },
   ],
-  external: ['react'],
+  external: ['react', 'react/jsx-runtime'],
   plugins: [
     virtual({ 'src/index.ts': entryModuleContent }),
     nodeResolve({ extensions }),

packages/bezier-icons/tsconfig.json

@@ -1,7 +1,4 @@
 {
   "extends": "tsconfig/node.json",
-  "compilerOptions": {
-    "jsx": "react-jsx"
-  },
   "include": ["utils", "script"]
 }

packages/bezier-react/.storybook/main.ts

@@ -45,6 +45,9 @@ export default {
                    * @see {@link https://github.com/webpack-contrib/sass-loader/releases/tag/v16.0.0}
                    */
                   api: 'legacy',
+                  sassOptions: {
+                    silenceDeprecations: ['legacy-js-api'],
+                  },
                   implementation: require.resolve('sass'),
                 },
               },
@@ -91,7 +94,12 @@ export default {
           test: /\.(ts|tsx)$/,
           loader: require.resolve('babel-loader'),
           options: {
-            presets: [['react-app', { flow: false, typescript: true }]],
+            presets: [
+              [
+                'react-app',
+                { flow: false, typescript: true, runtime: 'automatic' },
+              ],
+            ],
           },
         },
       ],

packages/bezier-react/.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import type { Preview } from '@storybook/react'
 
@@ -55,7 +55,7 @@ const preview: Preview = {
     ),
   ],
 
-  tags: ['autodocs']
+  tags: ['autodocs'],
 }
 
 export default preview

packages/bezier-react/babel.config.js

@@ -1,12 +1,7 @@
 module.exports = {
   presets: [
     ['@babel/preset-env', { bugfixes: true }],
-    /**
-     * Will use the native built-in instead of trying to polyfill behavior for any plugins that require one.
-     * Remove the helper function for Object.assign.
-     * @see https://babeljs.io/docs/babel-preset-react#usebuiltins
-     */
-    ['@babel/preset-react', { useBuiltIns: true }],
+    ['@babel/preset-react', { runtime: 'automatic' }],
     ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
   ],
 }

packages/bezier-react/jest.config.js

@@ -6,7 +6,18 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   transformIgnorePatterns: [],
   transform: {
-    '^.+\\.[t|j]sx?$': ['@swc/jest'],
+    '^.+\\.[t|j]sx?$': [
+      '@swc/jest',
+      {
+        jsc: {
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
+        },
+      },
+    ],
   },
   testMatch: ['**/*.test.(ts|tsx)'],
   moduleNameMapper: {

packages/bezier-react/package.json

@@ -90,8 +90,8 @@
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
-    "@types/react": "^18.3.16",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "@types/uuid": "^10.0.0",
     "babel-loader": "^9.2.1",
     "babel-preset-react-app": "^10.0.1",
@@ -106,8 +106,8 @@
     "paths.macro": "^3.0.1",
     "postcss": "^8.4.49",
     "postcss-preset-env": "^10.1.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rollup": "^4.28.1",
     "rollup-plugin-node-externals": "^7.1.3",
     "rollup-plugin-postcss": "^4.0.2",
@@ -123,8 +123,8 @@
   },
   "peerDependencies": {
     "@channel.io/bezier-icons": ">=0.2.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": ">=17",
+    "react-dom": ">=17"
   },
   "peerDependenciesMeta": {
     "@channel.io/bezier-icons": {

packages/bezier-react/src/components/AlphaAvatar/AlphaAvatar.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
 
 import { Avatar } from './Avatar'

packages/bezier-react/src/components/AlphaAvatar/Avatar.figma.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import figma from '@figma/code-connect'
 
 import { type StatusType } from '~/src/components/Status'

packages/bezier-react/src/components/AlphaAvatar/Avatar.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { render } from '~/src/utils/test'
 
 import {

packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { forwardRef, useMemo } from 'react'
+import { forwardRef, isValidElement, useMemo } from 'react'
 
 import classNames from 'classnames'
 
@@ -95,7 +95,7 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
   const StatusComponent = useMemo(() => {
     if (
       (isEmpty(children) && !status) ||
-      (children && !React.isValidElement(children))
+      (children && !isValidElement(children))
     ) {
       return null
     }

packages/bezier-react/src/components/AlphaAvatarGroup/AlphaAvatarGroup.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
 
 import { AlphaAvatar } from '~/src/components/AlphaAvatar'