channel-io · sungik-choi · Dec 16, 2024 · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024
@@ -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.
@@ -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
@@ -2,6 +2,7 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "@channel.io/typescript-config/web.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "allowJs": true
   }
 }
@@ -4,6 +4,7 @@
   "compilerOptions": {
     "module": "nodenext",
     "moduleResolution": "nodenext",
+    "jsx": "react-jsx",
     "allowJs": true
   }
 }
@@ -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:*"
   },

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

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

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

@@ -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'
 

@@ -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'
 

@@ -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'
 

@@ -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'

@@ -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'
 

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

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

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

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

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

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

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

@@ -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"
   }
 }
@@ -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'

@@ -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'

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

@@ -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'

@@ -0,0 +1,4 @@
+>= 1% in KR
+>= 1% in JP
+>= 1% in US
+not dead
@@ -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 }],
   ],
 }
@@ -60,5 +60,13 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "svgo": "^3.3.2",
     "tsconfig": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   }
 }
@@ -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 }),

@@ -1,7 +1,4 @@
 {
   "extends": "tsconfig/node.json",
-  "compilerOptions": {
-    "jsx": "react-jsx"
-  },
   "include": ["utils", "script"]
 }
@@ -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' },
+              ],
+            ],
           },
         },
       ],

@@ -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
@@ -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 }],
   ],
 }
@@ -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: {

@@ -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": {

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

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

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

@@ -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
     }

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