Remove path alias of tsconfig and use tilde(~) specifier (#1109)

* fix(tsconfig.json): replace all path aliases to tilde alias * fix(tsconfig): fix tilde path to be more clear * fix(jest.config): add tilde alias to moduleNameMapper * chore(.eslintrc): ignore import/extensions temporarily * chore(*): eslint --fix all * feat(.eslintrc): add import/resolver settings for monorepo * chore(spacing.stories): fix case typo in import * fix(avatar): resolve svg import * fix(storybook): correct global types name (@sungik-choi) * Revert "feat(.eslintrc): add import/resolver settings for monorepo" This reverts commit 3cb1ed6. * chore(bezier-react/eslintrc): turn on import/extensions
channel-io · Mar 20, 2023 · 46a392f · 46a392f
1 parent f01dd49
commit 46a392f
Show file tree

Hide file tree

Showing 323 changed files with 908 additions and 919 deletions.
diff --git a/packages/bezier-react/.eslintrc.js b/packages/bezier-react/.eslintrc.js
@@ -22,37 +22,37 @@ module.exports = {
             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',
               },

diff --git a/packages/bezier-react/.storybook/preview.js b/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',

diff --git a/packages/bezier-react/babel.config.js b/packages/bezier-react/babel.config.js
@@ -13,7 +13,7 @@ module.exports = {
         ['babel-plugin-styled-components', {
           minify: true,
           pure: true,
-          topLevelImportPaths: ['Foundation'],
+          topLevelImportPaths: ['~/src/foundation'],
         }],
       ],
     },

diff --git a/packages/bezier-react/jest.config.js b/packages/bezier-react/jest.config.js
@@ -15,15 +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',
-    '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: [

diff --git a/packages/bezier-react/src/components/AlphaCenter/AlphaCenter.stories.tsx b/packages/bezier-react/src/components/AlphaCenter/AlphaCenter.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 { Text } from 'Components/Text'
+import { getTitle } from '~/src/utils/storyUtils'
+import { Text } from '~/src/components/Text'
 import { AlphaCenter } from './AlphaCenter'
 import { AlphaCenterProps } from './AlphaCenter.types'
 

diff --git a/packages/bezier-react/src/components/AlphaCenter/AlphaCenter.styled.ts b/packages/bezier-react/src/components/AlphaCenter/AlphaCenter.styled.ts
@@ -1,5 +1,5 @@
 /* Internal dependencies */
-import { styled } from 'Foundation'
+import { styled } from '~/src/foundation'
 
 export const Box = styled.div`
   display: flex;

diff --git a/packages/bezier-react/src/components/AlphaCenter/AlphaCenter.test.tsx b/packages/bezier-react/src/components/AlphaCenter/AlphaCenter.test.tsx
@@ -2,7 +2,7 @@
 import React from 'react'
 
 /* Internal dependencies */
-import { render } from 'Utils/testUtils'
+import { render } from '~/src/utils/testUtils'
 import { AlphaCenter } from './AlphaCenter'
 import { AlphaCenterProps } from './AlphaCenter.types'
 

diff --git a/packages/bezier-react/src/components/AlphaCenter/AlphaCenter.types.ts b/packages/bezier-react/src/components/AlphaCenter/AlphaCenter.types.ts
@@ -1,5 +1,5 @@
 /* Internal dependencies */
-import { BezierComponentProps, ChildrenProps } from 'Types/ComponentProps'
+import { BezierComponentProps, ChildrenProps } from '~/src/types/ComponentProps'
 
 export interface AlphaCenterProps extends
   BezierComponentProps,

diff --git a/packages/bezier-react/src/components/Avatars/Avatar/Avatar.stories.tsx b/packages/bezier-react/src/components/Avatars/Avatar/Avatar.stories.tsx
@@ -4,10 +4,10 @@ import { base } from 'paths.macro'
 import { Story, Meta } from '@storybook/react'
 
 /* Internal dependencies */
-import { styled } from 'Foundation'
-import { getTitle } from 'Utils/storyUtils'
-import { isNaN } from 'Utils/typeUtils'
-import { StatusType } from 'Components/Status'
+import { styled } from '~/src/foundation'
+import { getTitle } from '~/src/utils/storyUtils'
+import { isNaN } from '~/src/utils/typeUtils'
+import { StatusType } from '~/src/components/Status'
 import { Avatar } from './Avatar'
 import AvatarProps, { AvatarSize } from './Avatar.types'
 

diff --git a/packages/bezier-react/src/components/Avatars/Avatar/Avatar.styled.ts b/packages/bezier-react/src/components/Avatars/Avatar/Avatar.styled.ts
@@ -1,10 +1,10 @@
 /* Internal denpendencies */
-import { styled, css, smoothCorners } from 'Foundation'
-import { enableSmoothCorners } from 'Worklets/EnableCSSHoudini'
-import type { InterpolationProps } from 'Types/Foundation'
-import { ZIndex } from 'Constants/ZIndex'
-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 { ZIndex } from '~/src/constants/ZIndex'
+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 {

diff --git a/packages/bezier-react/src/components/Avatars/Avatar/Avatar.test.tsx b/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 },
 }))
 

diff --git a/packages/bezier-react/src/components/Avatars/Avatar/Avatar.tsx b/packages/bezier-react/src/components/Avatars/Avatar/Avatar.tsx
@@ -2,14 +2,13 @@
 import React, { forwardRef, useMemo } from 'react'
 
 /* Internal denpendencies */
-import { backgroundImageVariable } from 'Foundation'
+import { backgroundImageVariable } from '~/src/foundation'
 import {
   isEmpty,
-} from 'Utils/typeUtils'
-import { noop } from 'Utils/functionUtils'
-import { Status, StatusSize } from 'Components/Status'
-// eslint-disable-next-line no-restricted-imports
-import defaultAvatarUrl from '../assets/defaultAvatar.svg'
+} from '~/src/utils/typeUtils'
+import { noop } from '~/src/utils/functionUtils'
+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, AvatarWrapper, StatusWrapper } from './Avatar.styled'

diff --git a/packages/bezier-react/src/components/Avatars/Avatar/Avatar.types.ts b/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,

diff --git a/packages/bezier-react/src/components/Avatars/Avatar/useProgressiveImage.test.ts b/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 >', () => {

diff --git a/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.stories.tsx b/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.stories.tsx
@@ -4,9 +4,9 @@ import { base } from 'paths.macro'
 import { Story, Meta } from '@storybook/react'
 
 /* Internal dependencies */
-import { getTitle } from 'Utils/storyUtils'
-import { isNaN } from 'Utils/typeUtils'
-import { Avatar, AvatarSize } from 'Components/Avatars/Avatar'
+import { getTitle } from '~/src/utils/storyUtils'
+import { isNaN } from '~/src/utils/typeUtils'
+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'

diff --git a/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts b/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts
@@ -1,9 +1,9 @@
 /* Internal dependencies */
-import { styled, smoothCorners } from 'Foundation'
-import { InterpolationProps } from 'Types/Foundation'
-import { ZIndex } from 'Constants/ZIndex'
-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 { ZIndex } from '~/src/constants/ZIndex'
+import { AVATAR_BORDER_RADIUS_PERCENTAGE } from '~/src/components/Avatars/AvatarStyle'
+import { Text } from '~/src/components/Text'
 
 export const AvatarEllipsisCount = styled(Text)`
   position: relative;

diff --git a/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.test.tsx b/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 },
 }))
 

diff --git a/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.tsx b/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.tsx
@@ -2,14 +2,14 @@
 import React, { forwardRef, useCallback, useMemo } from 'react'
 
 /* Internal dependencies */
-import { Typography } from 'Foundation'
-import { isLastIndex } from 'Utils/arrayUtils'
-import { noop } from 'Utils/functionUtils'
-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 { noop } from '~/src/utils/functionUtils'
+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
 

diff --git a/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.types.ts b/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',

diff --git a/packages/bezier-react/src/components/Avatars/Avatars.mdx b/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
 

diff --git a/packages/bezier-react/src/components/Avatars/Avatars.stories.tsx b/packages/bezier-react/src/components/Avatars/Avatars.stories.tsx
@@ -7,37 +7,37 @@ import {
 import base from 'paths.macro'
 
 /* Internal dependencies */
-import { styled } from 'Foundation'
-import { getTitle } from 'Utils/storyUtils'
+import { styled } from '~/src/foundation'
+import { getTitle } from '~/src/utils/storyUtils'
 import {
   range,
-} from 'Utils/numberUtils'
+} from '~/src/utils/numberUtils'
 import {
   Avatar,
   AvatarSize,
-} from 'Components/Avatars/Avatar'
+} from '~/src/components/Avatars/Avatar'
 import {
   AvatarGroup,
   AvatarGroupEllipsisType,
-} from 'Components/Avatars/AvatarGroup'
+} from '~/src/components/Avatars/AvatarGroup'
 import {
   CheckableAvatar,
-} from 'Components/Avatars/CheckableAvatar'
+} from '~/src/components/Avatars/CheckableAvatar'
 import {
   Emoji,
   EmojiSize,
-} from 'Components/Emoji'
+} from '~/src/components/Emoji'
 import {
   HStack,
   StackItem,
   VStack,
-} from 'Components/Stack'
+} from '~/src/components/Stack'
 import {
   StatusType,
-} from 'Components/Status'
+} from '~/src/components/Status'
 import {
   Text,
-} from 'Components/Text'
+} from '~/src/components/Text'
 import mdx from './Avatars.mdx'
 
 export default {

diff --git a/packages/bezier-react/src/components/Avatars/CheckableAvatar/CheckableAvatar.stories.tsx b/packages/bezier-react/src/components/Avatars/CheckableAvatar/CheckableAvatar.stories.tsx
@@ -4,10 +4,10 @@ import { base } from 'paths.macro'
 import { Story, Meta } from '@storybook/react'
 
 /* Internal dependencies */
-import { styled } from 'Foundation'
-import { getTitle } from 'Utils/storyUtils'
-import { isNaN } from 'Utils/typeUtils'
-import { Avatar, AvatarSize } from 'Components/Avatars/Avatar'
+import { styled } from '~/src/foundation'
+import { getTitle } from '~/src/utils/storyUtils'
+import { isNaN } from '~/src/utils/typeUtils'
+import { Avatar, AvatarSize } from '~/src/components/Avatars/Avatar'
 import { CheckableAvatar } from './CheckableAvatar'
 import CheckableAvatarProps from './CheckableAvatar.types'
 

diff --git a/packages/bezier-react/src/components/Avatars/CheckableAvatar/CheckableAvatar.styled.ts b/packages/bezier-react/src/components/Avatars/CheckableAvatar/CheckableAvatar.styled.ts
@@ -1,12 +1,12 @@
 /* Internal denpendencies */
-import { styled, css, smoothCorners, Foundation, SemanticNames } from 'Foundation'
-import { enableSmoothCorners } from 'Worklets/EnableCSSHoudini'
-import type { InjectedInterpolation, InterpolationProps } from 'Types/Foundation'
-import { ZIndex } from 'Constants/ZIndex'
-import { Icon, CheckIcon as CheckIconSource } from 'Components/Icon'
-import { AVATAR_BORDER_RADIUS_PERCENTAGE } from 'Components/Avatars/AvatarStyle'
-import { AvatarSize } from 'Components/Avatars/Avatar'
-import { AvatarImage } from 'Components/Avatars/Avatar/Avatar.styled'
+import { styled, css, smoothCorners, Foundation, SemanticNames } from '~/src/foundation'
+import { enableSmoothCorners } from '~/src/worklets/EnableCSSHoudini'
+import type { InjectedInterpolation, InterpolationProps } from '~/src/types/Foundation'
+import { ZIndex } from '~/src/constants/ZIndex'
+import { Icon, CheckIcon as CheckIconSource } from '~/src/components/Icon'
+import { AVATAR_BORDER_RADIUS_PERCENTAGE } from '~/src/components/Avatars/AvatarStyle'
+import { AvatarSize } from '~/src/components/Avatars/Avatar'
+import { AvatarImage } from '~/src/components/Avatars/Avatar/Avatar.styled'
 
 interface CheckableAvatarWrapperProps extends InterpolationProps {
   isChecked: boolean