Upgrade dependencies

package.json

@@ -20,26 +20,26 @@
     "postinstall": "husky install"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.26.2",
+    "@changesets/cli": "^2.27.1",
     "@changesets/get-github-info": "^0.6.0",
-    "@changesets/types": "^5.2.1",
-    "@commitlint/cli": "^17.7.1",
-    "@commitlint/config-conventional": "^17.7.0",
-    "@swc/core": "^1.3.83",
-    "@swc/jest": "^0.2.29",
-    "@types/jest": "^29.5.4",
+    "@changesets/types": "^6.0.0",
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.2",
+    "@swc/core": "^1.4.2",
+    "@swc/jest": "^0.2.36",
+    "@types/jest": "^29.5.12",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^7.32.0",
     "eslint-config-bezier": "workspace:*",
-    "husky": "^8.0.3",
-    "jest": "^29.6.4",
-    "jest-environment-jsdom": "^29.6.4",
-    "npm-run-all": "^4.1.5",
-    "stylelint": "^16.1.0",
-    "stylelint-config-clean-order": "^5.4.0",
+    "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "npm-run-all2": "^6.1.2",
+    "stylelint": "^16.2.1",
+    "stylelint-config-clean-order": "^5.4.1",
     "stylelint-config-standard-scss": "^13.0.0",
-    "ts-node": "^10.9.1",
-    "turbo": "^1.10.13",
+    "ts-node": "^10.9.2",
+    "turbo": "^1.12.4",
     "typescript": "^4.9.5"
   },
   "engines": {

packages/bezier-codemod/package.json

@@ -28,13 +28,13 @@
 	"dependencies": {
 		"@inkjs/ui": "^1.0.0",
 		"ink": "^4.4.1",
-		"meow": "^12.1.1",
+		"meow": "^13.2.0",
 		"react": "^18.2.0",
-		"ts-morph": "^19.0.0"
+		"ts-morph": "^21.0.1"
 	},
 	"devDependencies": {
-		"@types/node": "^20.6.0",
-		"@types/react": "^18.2.21",
+		"@types/node": "^20.11.20",
+		"@types/react": "^18.2.59",
 		"eslint-config-bezier": "workspace:*",
 		"tsconfig": "workspace:*"
 	},

packages/bezier-figma-plugin/package.json

@@ -22,27 +22,27 @@
   "author": "Channel Corp.",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@figma/plugin-typings": "^1.76.0",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "css-loader": "^6.8.1",
+    "@figma/plugin-typings": "^1.87.0",
+    "@types/react": "^18.2.59",
+    "@types/react-dom": "^18.2.19",
+    "css-loader": "^6.10.0",
     "eslint-config-bezier": "workspace:*",
     "html-webpack-inline-source-plugin": "^0.0.10",
-    "html-webpack-plugin": "^5.5.3",
+    "html-webpack-plugin": "^5.6.0",
     "react-dev-utils": "^12.0.1",
-    "style-loader": "^3.3.3",
-    "ts-loader": "^9.4.4",
+    "style-loader": "^3.3.4",
+    "ts-loader": "^9.5.1",
     "tsconfig": "workspace:*",
     "url-loader": "^4.1.1",
-    "webpack": "^5.88.2",
+    "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "@channel.io/bezier-icons": "^0.18.0",
-    "@channel.io/bezier-react": "^2.0.0-alpha.12",
-    "octokit": "^2.1.0",
+    "@channel.io/bezier-react": "^2.0.0-alpha.15",
+    "octokit": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.15.0"
+    "react-router-dom": "^6.22.1"
   }
 }

packages/bezier-figma-plugin/src/ui/hooks/useGithubAPI.ts

@@ -157,7 +157,7 @@ function useGithubAPI({
   const addLabels = useCallback(async ({
     issueNumber,
     labels,
-  }: { issueNumber: AddLabelsRequestParameters['issue_number'] } & Pick<AddLabelsRequestParameters, 'labels'>) => {
+  }: { issueNumber: AddLabelsRequestParameters['issue_number'] } & { labels: string[] }) => {
     const { data } = await octokit.rest.issues.addLabels({
       owner,
       repo,

packages/bezier-icons/package.json

@@ -43,21 +43,21 @@
   "author": "Channel Corp.",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@babel/core": "^7.22.17",
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
-    "@rollup/plugin-alias": "^5.0.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-virtual": "^3.0.1",
-    "@rollup/pluginutils": "^5.0.4",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-virtual": "^3.0.2",
+    "@rollup/pluginutils": "^5.1.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "eslint-config-bezier": "workspace:^",
-    "rollup": "^3.29.1",
-    "rollup-plugin-visualizer": "^5.9.2",
+    "rollup": "^3.29.4",
+    "rollup-plugin-visualizer": "^5.12.0",
     "svgo": "^3.2.0",
     "tsconfig": "workspace:^"
   }

packages/bezier-react/.browserslistrc

@@ -0,0 +1,18 @@
+# To support the following CSS features
+# - CSS Variables
+# - CSS Cascade Layers
+# - Modern selectors, such as :has(), :where() and :is()
+>= 1% in KR
+>= 1% in JP
+>= 1% in US
+not dead
+Chrome >= 105
+Edge >= 105
+# As of February 2024, added because it includes Edge version 87.
+not Edge < 105
+Firefox >= 121
+iOS >= 15.4
+Safari >= 15.4
+Android >= 121
+Opera >= 91
+Samsung >= 20

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

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import type { Preview } from '@storybook/react'
+import type { Decorator } from '@storybook/react'
 
 import { AppProvider } from '~/src/components/AppProvider'
 import { SmoothCornersFeature } from '~/src/components/FeatureProvider'
@@ -11,7 +11,7 @@ import styles from './preview.module.scss'
 
 const features = [SmoothCornersFeature]
 
-export const WithProvider: NonNullable<Preview['decorators']>[number] = (Story, context) => (
+export const WithProvider: Decorator = (Story, context) => (
   <AppProvider
     themeName="light"
     features={features}

packages/bezier-react/babel.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   presets: [
-    ['@babel/preset-env', { useBuiltIns: 'entry', corejs: '3.31.0', bugfixes: true }],
+    ['@babel/preset-env', { useBuiltIns: 'entry', corejs: '3.36', 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.

packages/bezier-react/jest.config.js

@@ -3,7 +3,7 @@ module.exports = {
   cacheDirectory: '.jestcache',
   testEnvironment: 'jsdom',
   roots: ['./src'],
-  setupFilesAfterEnv: ['./jest.setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   transformIgnorePatterns: [],
   transform: {
     '^.+\\.[t|j]sx?$': ['@swc/jest'],

packages/bezier-react/package.json

@@ -58,70 +58,62 @@
   ],
   "author": "Channel Corp.",
   "license": "Apache-2.0",
-  "browserslist": [
-    "> 1% in KR",
-    "> 1% in JP",
-    "> 1% in US",
-    "not dead"
-  ],
   "devDependencies": {
-    "@babel/core": "^7.22.17",
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@channel.io/bezier-icons": "^0.18.0",
-    "@mdx-js/react": "^1.6.22",
-    "@rollup/plugin-alias": "^5.0.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-url": "^8.0.1",
-    "@storybook/addon-a11y": "^7.4.2",
-    "@storybook/addon-actions": "^7.4.2",
-    "@storybook/addon-backgrounds": "^7.4.2",
-    "@storybook/addon-controls": "^7.4.2",
-    "@storybook/addon-docs": "^7.4.2",
-    "@storybook/addon-styling": "^1.3.2",
-    "@storybook/addon-toolbars": "^7.4.2",
-    "@storybook/react": "^7.4.2",
-    "@storybook/react-webpack5": "^7.4.2",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-url": "^8.0.2",
+    "@storybook/addon-a11y": "7.5.3",
+    "@storybook/addon-actions": "7.5.3",
+    "@storybook/addon-backgrounds": "7.5.3",
+    "@storybook/addon-controls": "7.5.3",
+    "@storybook/addon-docs": "7.5.3",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-toolbars": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-webpack5": "7.5.3",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.4",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@types/uuid": "^9.0.3",
-    "autoprefixer": "^10.4.14",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.59",
+    "@types/react-dom": "^18.2.19",
+    "@types/uuid": "^9.0.8",
     "babel-loader": "^9.1.3",
     "babel-preset-react-app": "^10.0.1",
-    "chromatic": "^7.0.0",
-    "core-js": "^3.32.2",
+    "chromatic": "^11.0.0",
+    "core-js": "^3.36.0",
     "eslint-config-bezier": "workspace:*",
     "eslint-plugin-jsdoc": "^48.0.4",
     "eslint-plugin-sort-export-all": "^1.4.1",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.8.0",
     "identity-obj-proxy": "^3.0.0",
-    "lightningcss": "^1.22.1",
+    "lightningcss": "^1.24.0",
     "minimatch": "^9.0.3",
     "paths.macro": "^3.0.1",
-    "postcss": "^8.4.33",
-    "postcss-preset-env": "^9.3.0",
+    "postcss": "^8.4.35",
+    "postcss-preset-env": "^9.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.29.1",
-    "rollup-plugin-node-externals": "^6.1.1",
+    "rollup": "^3.29.4",
+    "rollup-plugin-node-externals": "^7.0.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-visualizer": "^5.9.2",
-    "sass": "^1.63.6",
-    "storybook": "^7.4.2",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.71.1",
+    "storybook": "7.5.3",
     "ts-prune": "^0.10.3",
     "tsconfig": "workspace:*",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "ttypescript": "^1.5.15",
-    "typescript-plugin-css-modules": "^5.0.2",
-    "typescript-transform-paths": "^3.4.6"
+    "typescript-plugin-css-modules": "^5.1.0",
+    "typescript-transform-paths": "^3.4.7"
   },
   "peerDependencies": {
     "@channel.io/bezier-icons": ">=0.2.0",
@@ -136,19 +128,19 @@
   "dependencies": {
     "@channel.io/bezier-tokens": "0.1.0-alpha.5",
     "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toolbar": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.6",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/react-visually-hidden": "^1.0.3",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "react-textarea-autosize": "8.3.4",
     "ssr-window": "^4.0.2",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.1"
   }
 }

packages/bezier-react/rollup.config.mjs

@@ -8,7 +8,6 @@ import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import url from '@rollup/plugin-url'
-import autoprefixer from 'autoprefixer'
 import { transform } from 'lightningcss'
 import postcssPresetEnv from 'postcss-preset-env'
 import { defineConfig } from 'rollup'
@@ -78,7 +77,6 @@ const generateConfig = ({
         hashPrefix: 'bezier',
       },
       plugins: [
-        autoprefixer(),
         postcssPresetEnv(),
         postcssAutoLayer({
           name: 'components',

packages/bezier-react/src/components/LegacyStack/LegacyStack.mdx

@@ -8,7 +8,7 @@ import {
   LegacyVStack,
   LegacyStack,
   LegacyStackItem,
-  LegacaySpacer,
+  LegacySpacer,
 } from '~/src/components/LegacyStack'
 
 # Stack
@@ -118,7 +118,7 @@ Flex layout의 특징은, container의 크기에 맞춰 item의 크기가 적절
 
 ### Spacer
 
-<ArgsTable of={LegacaySpacer} />
+<ArgsTable of={LegacySpacer} />
 
 ## Version
 

packages/bezier-react/src/components/Text/Text.module.scss

@@ -34,12 +34,12 @@ $typo-sizes: 11, 12, 13, 14, 15, 16, 17, 18, 22, 24, 30, 36;
   &:where(.multi-line-truncated) {
     overflow: hidden;
     display: -webkit-box;
+    -webkit-box-orient: vertical;
 
     max-height: calc(var(--b-text-line-clamp) * var(--b-text-line-height));
 
     text-overflow: ellipsis;
 
-    -webkit-box-orient: vertical;
     -webkit-line-clamp: var(--b-text-line-clamp);
   }
 

packages/bezier-react/src/utils/test.tsx

@@ -30,7 +30,7 @@ export function render(
 
 interface RenderHookOptions<Props> {
   initialProps?: Props
-  wrapper?: React.JSXElementConstructor<{ children: React.ReactElement }>
+  wrapper?: React.JSXElementConstructor<{ children: React.ReactNode }>
 }
 
 export function renderHook<Result, Props>(

packages/bezier-react/tsconfig.json

@@ -23,6 +23,7 @@
   "include": [
     "src/*",
     "src/**/*",
-    ".storybook/**/*",
+    "./jest.setup.ts",
+    ".storybook/**/*"
   ],
 }