Use Parcel as bundler instead of Rollup

.eslintrc.js

@@ -19,43 +19,44 @@ module.exports = {
     {
       files: ['./packages/bezier-react/**/*'],
       rules: {
+        'import/extensions': 'off', // FIXME(@aru)
         'import/order': [
           'error',
           {
             groups: ['external', 'builtin', 'internal', 'parent', 'sibling', 'index'],
             pathGroups: [
               {
-                pattern: 'Foundation',
+                pattern: '~/src/foundation',
                 group: 'internal',
                 position: 'before',
               },
               {
-                pattern: 'Foundation/**',
+                pattern: '~/src/foundation/**',
                 group: 'internal',
                 position: 'before',
               },
               {
-                pattern: 'Providers/**',
+                pattern: '~/src/providers/**',
                 group: 'internal',
                 position: 'before',
               },
               {
-                pattern: 'Hooks/**',
+                pattern: '~/src/hooks/**',
                 group: 'internal',
                 position: 'before',
               },
               {
-                pattern: 'Worklets/**',
+                pattern: '~/src/worklets/**',
                 group: 'internal',
                 position: 'before',
               },
               {
-                pattern: '@(Constants|Types|Utils)/**',
+                pattern: '~/src/@(constants|types|utils|assets)/**',
                 group: 'internal',
                 position: 'before',
               },
               {
-                pattern: '@(Components|Layout)/**',
+                pattern: '~/src/@(components|layout)/**',
                 group: 'internal',
                 position: 'before',
               },

.gitignore

@@ -212,3 +212,9 @@ stats.html
 
 # Stylelint cache
 .stylelintcache
+
+# Parcel cache
+.parcel-cache
+
+# @parcel/reporter-bundle-analyzer
+parcel-bundle-reports

packages/bezier-react/.lintstagedrc.json

@@ -1,4 +1,4 @@
-{ 
+{
   "src/**/*.(js|ts)?(x)": "yarn lint:js",
   "src/**/*.styled.{js,ts}": "yarn lint:style"
 }

packages/bezier-react/.parcelrc

@@ -0,0 +1,4 @@
+{
+  "extends": "@parcel/config-default",
+  "reporters": ["...", "@parcel/reporter-bundle-buddy"]
+}

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

@@ -6,9 +6,9 @@ import {
   LightFoundation,
   DarkFoundation,
   createGlobalStyle,
-} from 'Foundation'
-import BezierProvider from 'Providers/BezierProvider'
-import { Text } from 'Components/Text'
+} from '~/src/foundation'
+import BezierProvider from '~/src/providers/BezierProvider'
+import { Text } from '~/src/components/Text'
 
 const FoundationKeyword = {
   Light: 'light',
@@ -34,7 +34,7 @@ export const parameters = {
 
 export const globalTypes = {
   Foundation: {
-    name: 'Foundation',
+    name: '~/src/foundation',
     description: 'Global Foundation for components',
     defaultValue: 'light',
     toolbar: {

packages/bezier-react/.ts-prunerc

@@ -0,0 +1,3 @@
+{
+  "ignore": "src/components/Tabs/LegacyTabs|src/components/Modals/LegacyConfirmModal|src/components/Modals/LegacyModal"
+}

packages/bezier-react/babel.config.js → packages/bezier-react/babel.config.js.backup

@@ -25,7 +25,7 @@ module.exports = {
         ['babel-plugin-styled-components', {
           minify: true,
           pure: true,
-          topLevelImportPaths: ['Foundation'],
+          topLevelImportPaths: ['~/src/foundation'],
         }],
       ],
     },

packages/bezier-react/jest.config.js

@@ -15,16 +15,7 @@ module.exports = {
     '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
     'identity-obj-proxy',
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
-    'Components/(.*)$': '<rootDir>/src/components/$1',
-    'Constants/(.*)$': '<rootDir>/src/constants/$1',
-    '^Foundation$': '<rootDir>/src/foundation',
-    'Foundation/(.*)$': '<rootDir>/src/foundation/$1',
-    'Hooks/(.*)$': '<rootDir>/src/hooks/$1',
-    'Layout/(.*)$': '<rootDir>/src/layout/$1',
-    'Providers/(.*)$': '<rootDir>/src/providers/$1',
-    'Types/(.*)$': '<rootDir>/src/types/$1',
-    'Utils/(.*)$': '<rootDir>/src/utils/$1',
-    'Worklets/(.*)$': '<rootDir>/src/worklets/$1',
+    '~(.*)$': '<rootDir>$1',
   },
   collectCoverage: true,
   coveragePathIgnorePatterns: [

packages/bezier-react/package.json

@@ -6,6 +6,7 @@
     "type": "git",
     "url": "https://github.com/channel-io/bezier-react"
   },
+  "source": "src/index.ts",
   "main": "build/index.cjs.js",
   "module": "build/src/index.js",
   "types": "build/src/index.d.ts",
@@ -17,13 +18,13 @@
   "scripts": {
     "build": "run-s 'build:*'",
     "build:icon": "./scripts/build-icon.sh",
-    "build:rollup": "cross-env BABEL_ENV=production rollup -c",
+    "build:parcel": "cross-env NODE_ENV=production parcel build",
+    "legacy-build:rollup": "cross-env BABEL_ENV=production rollup -c",
     "dev": "yarn storybook",
     "lint": "run-p 'lint:*'",
     "lint:js": "TIMING=1 eslint --cache 'src/**/*.+(js|ts)?(x)'",
     "lint:style": "stylelint 'src/**/*.styled.{js,ts}' --cache",
-    "typecheck": "yarn find-deadcode && tsc --build --verbose",
-    "find-deadcode": "ts-prune -e -p ./tsconfig.prune.json",
+    "typecheck": "tsc --build --verbose",
     "test": "cross-env BABEL_ENV=test jest --maxWorkers=2",
     "test:watch": "cross-env BABEL_ENV=test jest --watch",
     "update-snapshot": "jest --updateSnapshot",
@@ -48,16 +49,12 @@
     "not ie <= 11"
   ],
   "devDependencies": {
-    "@babel/core": "^7.20.2",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-transform-runtime": "^7.12.15",
-    "@babel/preset-env": "^7.14.2",
-    "@babel/preset-react": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
     "@channel.io/react-docgen-typescript-plugin": "^1.0.0",
     "@mdx-js/react": "^1.6.22",
-    "@radix-ui/react-dialog": "^1.0.2",
-    "@radix-ui/react-visually-hidden": "^1.0.1",
+    "@parcel/packager-ts": "2.8.2",
+    "@parcel/reporter-bundle-analyzer": "^2.8.2",
+    "@parcel/reporter-bundle-buddy": "^2.8.2",
+    "@parcel/transformer-typescript-types": "2.8.2",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
@@ -96,6 +93,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-styled-components": "^7.1.1",
+    "parcel": "^2.8.2",
     "paths.macro": "^3.0.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
@@ -117,12 +115,15 @@
     "styled-components": ">=5"
   },
   "dependencies": {
-    "@babel/runtime": "^7.12.13",
+    "@parcel/runtime-js": "^2.8.2",
+    "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-separator": "^1.0.0",
     "@radix-ui/react-slider": "^1.0.0",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tabs": "^1.0.1",
     "@radix-ui/react-toolbar": "^1.0.1",
+    "@radix-ui/react-visually-hidden": "^1.0.1",
+    "@swc/helpers": "^0.4.14",
     "lodash-es": "^4.17.15",
     "react-resize-detector": "^7.1.1",
     "react-textarea-autosize": "^8.3.4",

packages/bezier-react/src/components/Avatars/Avatar/Avatar.stories.tsx

@@ -4,9 +4,9 @@ import { base } from 'paths.macro'
 import { Story, Meta } from '@storybook/react'
 
 /* Internal dependencies */
-import { styled } from 'Foundation'
-import { getTitle } from 'Utils/storyUtils'
-import { StatusType } from 'Components/Status'
+import { styled } from '~/src/foundation'
+import { getTitle } from '~/src/utils/storyUtils'
+import { StatusType } from '~/src/components/Status'
 import { Avatar } from './Avatar'
 import AvatarProps, { AvatarSize } from './Avatar.types'
 

packages/bezier-react/src/components/Avatars/Avatar/Avatar.styled.ts

@@ -1,9 +1,9 @@
 /* Internal denpendencies */
-import { styled, css, smoothCorners } from 'Foundation'
-import { enableSmoothCorners } from 'Worklets/EnableCSSHoudini'
-import type { InterpolationProps } from 'Types/Foundation'
-import DisabledOpacity from 'Constants/DisabledOpacity'
-import { AVATAR_BORDER_WIDTH, AVATAR_BORDER_RADIUS_PERCENTAGE } from 'Components/Avatars/AvatarStyle'
+import { styled, css, smoothCorners } from '~/src/foundation'
+import { enableSmoothCorners } from '~/src/worklets/EnableCSSHoudini'
+import type { InterpolationProps } from '~/src/types/Foundation'
+import DisabledOpacity from '~/src/constants/DisabledOpacity'
+import { AVATAR_BORDER_WIDTH, AVATAR_BORDER_RADIUS_PERCENTAGE } from '~/src/components/Avatars/AvatarStyle'
 import { AvatarSize } from './Avatar.types'
 
 interface AvatarWrapperProps extends InterpolationProps {

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

@@ -2,16 +2,16 @@
 import React from 'react'
 
 /* Internal dependencies */
-import { render } from 'Utils/testUtils'
-import DisabledOpacity from 'Constants/DisabledOpacity'
-import { StatusType } from 'Components/Status'
-import { AVATAR_BORDER_RADIUS_PERCENTAGE } from 'Components/Avatars/AvatarStyle'
+import { render } from '~/src/utils/testUtils'
+import DisabledOpacity from '~/src/constants/DisabledOpacity'
+import { StatusType } from '~/src/components/Status'
+import { AVATAR_BORDER_RADIUS_PERCENTAGE } from '~/src/components/Avatars/AvatarStyle'
 import { Avatar, AVATAR_TEST_ID, AVATAR_WRAPPER_TEST_ID, STATUS_WRAPPER_TEST_ID } from './Avatar'
 import AvatarProps, { AvatarSize } from './Avatar.types'
 
-jest.mock('Worklets/EnableCSSHoudini', () => ({
+jest.mock('~/src/worklets/EnableCSSHoudini', () => ({
   __esModule: true,
-  ...jest.requireActual('Worklets/EnableCSSHoudini') as object,
+  ...jest.requireActual('~/src/worklets/EnableCSSHoudini') as object,
   enableSmoothCorners: { current: true },
 }))
 

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

@@ -3,10 +3,9 @@ import React, { forwardRef, useMemo } from 'react'
 import { noop, isEmpty } from 'lodash-es'
 
 /* Internal denpendencies */
-import { backgroundImageVariable } from 'Foundation'
-import { Status, StatusSize } from 'Components/Status'
-// eslint-disable-next-line no-restricted-imports
-import defaultAvatarUrl from '../assets/defaultAvatar.svg'
+import { backgroundImageVariable } from '~/src/foundation'
+import { Status, StatusSize } from '~/src/components/Status'
+import defaultAvatarUrl from '~/src/components/Avatars/assets/defaultAvatar.svg'
 import useProgressiveImage from './useProgressiveImage'
 import AvatarProps, { AvatarSize } from './Avatar.types'
 import { AvatarImage, AvatarImageWrapper, AvatarWrapper, StatusWrapper } from './Avatar.styled'

packages/bezier-react/src/components/Avatars/Avatar/Avatar.types.ts

@@ -1,6 +1,12 @@
 /* Internal dependencies */
-import type { BezierComponentProps, ChildrenProps, DisableProps, SizeProps, AdditionalStylableProps } from 'Types/ComponentProps'
-import { StatusType } from 'Components/Status'
+import type {
+  BezierComponentProps,
+  ChildrenProps,
+  DisableProps,
+  SizeProps,
+  AdditionalStylableProps,
+} from '~/src/types/ComponentProps'
+import { StatusType } from '~/src/components/Status'
 
 export enum AvatarSize {
   Size20 = 20,

packages/bezier-react/src/components/Avatars/Avatar/useProgressiveImage.test.ts

@@ -1,5 +1,5 @@
 /* Internal dependencies */
-import { renderHook } from 'Utils/testUtils'
+import { renderHook } from '~/src/utils/testUtils'
 import useProgressiveImage, { CachedImage } from './useProgressiveImage'
 
 describe('useProgressiveImage >', () => {

packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.stories.tsx

@@ -4,8 +4,8 @@ import { base } from 'paths.macro'
 import { Story, Meta } from '@storybook/react'
 
 /* Internal dependencies */
-import { getTitle } from 'Utils/storyUtils'
-import { Avatar, AvatarSize } from 'Components/Avatars/Avatar'
+import { getTitle } from '~/src/utils/storyUtils'
+import { Avatar, AvatarSize } from '~/src/components/Avatars/Avatar'
 import MOCK_AVATAR_LIST from './__mocks__/avatarList'
 import { AvatarGroupEllipsisType, AvatarGroupProps } from './AvatarGroup.types'
 import { AvatarGroup } from './AvatarGroup'

packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts

@@ -1,8 +1,8 @@
 /* Internal dependencies */
-import { styled, smoothCorners } from 'Foundation'
-import { InterpolationProps } from 'Types/Foundation'
-import { AVATAR_BORDER_RADIUS_PERCENTAGE } from 'Components/Avatars/AvatarStyle'
-import { Text } from 'Components/Text'
+import { styled, smoothCorners } from '~/src/foundation'
+import { InterpolationProps } from '~/src/types/Foundation'
+import { AVATAR_BORDER_RADIUS_PERCENTAGE } from '~/src/components/Avatars/AvatarStyle'
+import { Text } from '~/src/components/Text'
 
 export const AvatarEllipsisCount = styled(Text)`
   position: relative;

packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.test.tsx

@@ -2,15 +2,15 @@
 import React from 'react'
 
 /* Internal dependencies */
-import { render } from 'Utils/testUtils'
-import { Avatar } from 'Components/Avatars/Avatar'
+import { render } from '~/src/utils/testUtils'
+import { Avatar } from '~/src/components/Avatars/Avatar'
 import MOCK_AVATAR_LIST from './__mocks__/avatarList'
 import { AvatarGroup, AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID } from './AvatarGroup'
 import { AvatarGroupEllipsisType, type AvatarGroupProps } from './AvatarGroup.types'
 
-jest.mock('Worklets/EnableCSSHoudini', () => ({
+jest.mock('~/src/worklets/EnableCSSHoudini', () => ({
   __esModule: true,
-  ...jest.requireActual('Worklets/EnableCSSHoudini') as object,
+  ...jest.requireActual('~/src/worklets/EnableCSSHoudini') as object,
   enableSmoothCorners: { current: true },
 }))
 

packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.tsx

@@ -3,13 +3,13 @@ import React, { forwardRef, useCallback, useMemo } from 'react'
 import { noop } from 'lodash-es'
 
 /* Internal dependencies */
-import { Typography } from 'Foundation'
-import { isLastIndex } from 'Utils/arrayUtils'
-import { Icon, IconSize, MoreIcon } from 'Components/Icon'
-import { AvatarProps, AvatarSize } from 'Components/Avatars/Avatar'
-import { AVATAR_GROUP_DEFAULT_SPACING } from 'Components/Avatars/AvatarStyle'
-import { AvatarGroupEllipsisType, type AvatarGroupProps } from './AvatarGroup.types'
+import { Typography } from '~/src/foundation'
+import { isLastIndex } from '~/src/utils/arrayUtils'
+import { Icon, IconSize, MoreIcon } from '~/src/components/Icon'
+import { AvatarProps, AvatarSize } from '~/src/components/Avatars/Avatar'
+import { AVATAR_GROUP_DEFAULT_SPACING } from '~/src/components/Avatars/AvatarStyle'
 import * as Styled from './AvatarGroup.styled'
+import { AvatarGroupEllipsisType, type AvatarGroupProps } from './AvatarGroup.types'
 
 const MAX_AVATAR_LIST_COUNT = 99
 

packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.types.ts

@@ -1,6 +1,6 @@
 /* Internal dependencies */
-import type { BezierComponentProps, ChildrenProps, SizeProps, AdditionalStylableProps } from 'Types/ComponentProps'
-import { AvatarSize } from 'Components/Avatars/Avatar'
+import type { BezierComponentProps, ChildrenProps, SizeProps, AdditionalStylableProps } from '~/src/types/ComponentProps'
+import { AvatarSize } from '~/src/components/Avatars/Avatar'
 
 export enum AvatarGroupEllipsisType {
   Icon = 'Icon',

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

@@ -5,13 +5,13 @@ import {
 } from '@storybook/addon-docs'
 import {
   Avatar,
-} from 'Components/Avatars/Avatar'
+} from '~/src/components/Avatars/Avatar'
 import {
   AvatarGroup,
-} from 'Components/Avatars/AvatarGroup'
+} from '~/src/components/Avatars/AvatarGroup'
 import {
   CheckableAvatar,
-} from 'Components/Avatars/CheckableAvatar'
+} from '~/src/components/Avatars/CheckableAvatar'
 
 # Avatars