Convert enum type of component props to string literal type - Toast, Tooltip, etc

.changeset/gold-gorillas-shout.md

@@ -0,0 +1,25 @@
+---
+"@channel.io/bezier-react": major
+---
+
+**Breaking Changes: The enum type that the component receives as props is changed to a string (or number) literal type**
+
+The properties that change are:
+
+- `AvatarGroupEllipsisType`
+- `IconSize`
+- `LegacyTooltipPosition`
+- `ModalTitleSize`
+- `OverlayPosition`
+- `ProgressBarSize`, `ProgressBarVariant`
+- `SpinnerSize`
+- `SwitchSize`
+- `TagBadgeSize`, `TagBadgeVariant`
+- `TextAreaHeight`
+- `TextFieldSize`, `TextFieldVariant`
+- `ToastPlacement`, `ToastAppearance`, `ToastPreset`
+- `TooltipPosition`
+
+Also, `SpinnerThickness` props of `Spinner` is not supported any more.
+
+When changed to string literal type, it is changed to the kebab-cased value of enum. e.g. `TooltipPosition.TopCenter` -> `top-center`. Among the above enums, `TextAreaHeight` is converted to number literal type. e.g. `TextAreaHeight.Row16` -> `16`, and `IconSize.normal` is converted to `m` for consistency

.changeset/smart-ravens-rescue.md

@@ -0,0 +1,19 @@
+---
+"@channel.io/bezier-codemod": minor
+---
+
+Add more various cases to `v2-enum-member-to-string-literal`. Now it covers following enums.
+
+- `AvatarGroupEllipsisType`
+- `IconSize`
+- `LegacyTooltipPosition`
+- `ModalTitleSize`
+- `OverlayPosition`
+- `ProgressBarSize`, `ProgressBarVariant`
+- `SpinnerSize`
+- `SwitchSize`
+- `TagBadgeSize`, `TagBadgeVariant`
+- `TextAreaHeight`
+- `TextFieldSize`, `TextFieldVariant`
+- `ToastPlacement`, `ToastAppearance`, `ToastPreset`
+- `TooltipPosition`

packages/bezier-codemod/src/shared/enum.ts

@@ -11,7 +11,7 @@ import {
 
 type Name = string
 type Member = string
-type Value = string
+type Value = string | number
 export type EnumTransformMap = Record<Name, Record<Member, Value>>
 
 export const transformEnumToStringLiteralInBezier = (sourceFile: SourceFile, enumTransforms: EnumTransformMap) => {

packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts

@@ -109,6 +109,141 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = {
     GreenAlt: 'green-alt',
     Monochrome: 'monochrome',
   },
+  ModalTitleSize: {
+    L: 'l',
+    M: 'm',
+  },
+  ToastPlacement: {
+    BottomLeft: 'bottom-left',
+    BottomRight: 'bottom-right',
+  },
+  ToastAppearance: {
+    Success: 'success',
+    Warning: 'warning',
+    Error: 'error',
+    Info: 'info',
+  },
+  ToastPreset: {
+    Default: 'default',
+    Success: 'success',
+    Error: 'error',
+    Offline: 'offline',
+    Online: 'online',
+  },
+  SpinnerSize: {
+    XL: 'xl',
+    L: 'l',
+    M: 'm',
+    S: 's',
+    XS: 'xs',
+  },
+  SwitchSize: {
+    M: 'm',
+    S: 's',
+  },
+  TooltipPosition: {
+    TopCenter: 'top-center',
+    TopLeft: 'top-left',
+    TopRight: 'top-right',
+    RightCenter: 'right-center',
+    RightTop: 'right-top',
+    RightBottom: 'right-bottom',
+    BottomCenter: 'bottom-center',
+    BottomLeft: 'bottom-left',
+    BottomRight: 'bottom-right',
+    LeftCenter: 'left-center',
+    LeftTop: 'left-top',
+    LeftBottom: 'left-bottom',
+  },
+  LegacyTooltipPosition: {
+    TopCenter: 'top-center',
+    TopLeft: 'top-left',
+    TopRight: 'top-right',
+    RightCenter: 'right-center',
+    RightTop: 'right-top',
+    RightBottom: 'right-bottom',
+    BottomCenter: 'bottom-center',
+    BottomLeft: 'bottom-left',
+    BottomRight: 'bottom-right',
+    LeftCenter: 'left-center',
+    LeftTop: 'left-top',
+    LeftBottom: 'left-bottom',
+  },
+  OverlayPosition: {
+    TopCenter: 'top-center',
+    TopLeft: 'top-left',
+    TopRight: 'top-right',
+    RightCenter: 'right-center',
+    RightTop: 'right-top',
+    RightBottom: 'right-bottom',
+    BottomCenter: 'bottom-center',
+    BottomLeft: 'bottom-left',
+    BottomRight: 'bottom-right',
+    LeftCenter: 'left-center',
+    LeftTop: 'left-top',
+    LeftBottom: 'left-bottom',
+    InnerLeftTop: 'inner-left-top',
+    InnerLeftBottom: 'inner-left-bottom',
+    InnerRightTop: 'inner-right-top',
+    InnerRightBottom: 'inner-right-bottom',
+  },
+  TextFieldType: {
+    Search: 'search',
+    Text: 'text',
+    Email: 'email',
+    Password: 'password',
+    Tel: 'tel',
+    Url: 'url',
+    Hidden: 'hidden',
+    Number: 'number',
+  },
+  TextFieldVariant: {
+    Primary: 'primary',
+    Secondary: 'secondary',
+  },
+  TagBadgeVariant: {
+    Default: 'default',
+    MonochromeLight: 'monochrome-light',
+    MonochromeDark: 'monochrome-dark',
+    Blue: 'blue',
+    Cobalt: 'cobalt',
+    Teal: 'teal',
+    Green: 'green',
+    Olive: 'olive',
+    Pink: 'pink',
+    Navy: 'navy',
+    Yellow: 'yellow',
+    Orange: 'orange',
+    Red: 'red',
+    Purple: 'purple',
+  },
+  TagBadgeSize: {
+    XS: 'xs',
+    S: 's',
+    M: 'm',
+    L: 'l',
+  },
+  IconSize: {
+    XL: 'xl',
+    L: 'l',
+    Normal: 'm',
+    S: 's',
+    XS: 'xs',
+    XXS: 'xxs',
+    XXXS: 'xxxs',
+  },
+  TextAreaHeight: {
+    Row3: 3,
+    Row6: 6,
+    Row10: 10,
+    Row16: 16,
+    Row24: 24,
+    Row36: 36,
+  },
+  AvatarGroupEllipsisType: {
+    Icon: 'icon',
+    Count: 'count',
+  },
 }
 
 function enumMemberToStringLiteral(sourceFile: SourceFile): true | void {

packages/bezier-codemod/src/utils/enum.ts

@@ -3,7 +3,7 @@ import {
   SyntaxKind,
 } from 'ts-morph'
 
-export const renameEnumMember = (node: PropertyAccessExpression, to: string) => {
+export const renameEnumMember = (node: PropertyAccessExpression, to: string | number) => {
   const ancestor = node.getFirstAncestor()
 
   if (ancestor?.isKind(SyntaxKind.JsxExpression)) {

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

@@ -9,21 +9,12 @@ import {
 import { Avatar } from '~/src/components/Avatar'
 
 import { AvatarGroup } from './AvatarGroup'
-import {
-  AvatarGroupEllipsisType,
-  type AvatarGroupProps,
-} from './AvatarGroup.types'
+import { type AvatarGroupProps } from './AvatarGroup.types'
 import MOCK_AVATAR_LIST from './__mocks__/avatarList'
 
 const meta: Meta<typeof AvatarGroup> = {
   component: AvatarGroup,
   argTypes: {
-    ellipsisType: {
-      control: {
-        type: 'radio',
-      },
-      options: AvatarGroupEllipsisType,
-    },
     max: {
       control: {
         type: 'range',
@@ -64,7 +55,7 @@ export const Primary: StoryObj<AvatarGroupProps> = {
   args: {
     max: 5,
     size: '30',
-    ellipsisType: AvatarGroupEllipsisType.Icon,
+    ellipsisType: 'icon',
     spacing: 4,
   },
 }

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

@@ -8,10 +8,7 @@ import {
   AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID,
   AvatarGroup,
 } from './AvatarGroup'
-import {
-  AvatarGroupEllipsisType,
-  type AvatarGroupProps,
-} from './AvatarGroup.types'
+import { type AvatarGroupProps } from './AvatarGroup.types'
 import MOCK_AVATAR_LIST from './__mocks__/avatarList'
 
 describe('AvatarGroup', () => {
@@ -22,7 +19,7 @@ describe('AvatarGroup', () => {
     props = {
       max: MOCK_AVATAR_LIST.length - 1,
       spacing: 4,
-      ellipsisType: AvatarGroupEllipsisType.Icon,
+      ellipsisType: 'icon',
     }
   })
 
@@ -45,7 +42,7 @@ describe('AvatarGroup', () => {
 
   describe('Ellipsis type - Icon', () => {
     beforeEach(() => {
-      props.ellipsisType = AvatarGroupEllipsisType.Icon
+      props.ellipsisType = 'icon'
     })
 
     it('Snapshot', () => {
@@ -70,7 +67,7 @@ describe('AvatarGroup', () => {
 
   describe('Ellipsis type - Count', () => {
     beforeEach(() => {
-      props.ellipsisType = AvatarGroupEllipsisType.Count
+      props.ellipsisType = 'count'
     })
 
     it('Snapshot', () => {

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

@@ -16,16 +16,10 @@ import {
   type AvatarSize,
   useAvatarRadiusToken,
 } from '~/src/components/Avatar'
-import {
-  Icon,
-  IconSize,
-} from '~/src/components/Icon'
+import { Icon } from '~/src/components/Icon'
 import { Text } from '~/src/components/Text'
 
-import {
-  AvatarGroupEllipsisType,
-  type AvatarGroupProps,
-} from './AvatarGroup.types'
+import { type AvatarGroupProps } from './AvatarGroup.types'
 
 import styles from './AvatarGroup.module.scss'
 
@@ -41,14 +35,14 @@ function getRestAvatarListCountText(count: number, max: number) {
 // TODO: Not specified
 function getProperIconSize(avatarSize: AvatarSize) {
   return {
-    20: IconSize.XXS,
-    24: IconSize.XS,
-    30: IconSize.S,
-    36: IconSize.Normal,
-    42: IconSize.Normal,
-    48: IconSize.L,
-    90: IconSize.L,
-    120: IconSize.L,
+    20: 'xxs',
+    24: 'xs',
+    30: 's',
+    36: 'normal',
+    42: 'normal',
+    48: 'l',
+    90: 'l',
+    120: 'l',
   }[avatarSize]
 }
 
@@ -74,7 +68,7 @@ function getProperTypoSize(avatarSize: AvatarSize) {
  * <AvatarGroup
  *  max={2}
  *  spacing={4}
- *  ellipsisType={AvatarGroupEllipsisType.Icon}
+ *  ellipsisType="icon"
  * >
  *    <Avatar />
  *    <Avatar />
@@ -86,7 +80,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(function
   max,
   size = '24',
   spacing = AVATAR_GROUP_DEFAULT_SPACING,
-  ellipsisType = AvatarGroupEllipsisType.Icon,
+  ellipsisType = 'icon',
   onMouseEnterEllipsis,
   onMouseLeaveEllipsis,
   style,
@@ -132,7 +126,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(function
         return AvatarElement
       }
 
-      if (ellipsisType === AvatarGroupEllipsisType.Icon) {
+      if (ellipsisType === 'icon') {
         return (
           <div
             key="ellipsis"
@@ -157,7 +151,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(function
         )
       }
 
-      if (ellipsisType === AvatarGroupEllipsisType.Count) {
+      if (ellipsisType === 'count') {
         return (
           <React.Fragment key="ellipsis">
             { AvatarElement }

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

@@ -7,10 +7,9 @@ import type {
 
 import { type AvatarSize } from '~/src/components/Avatar'
 
-export enum AvatarGroupEllipsisType {
-  Icon = 'Icon',
-  Count = 'Count',
-}
+export type AvatarGroupEllipsisType =
+| 'icon'
+| 'count'
 
 type MouseEventHandler = React.MouseEventHandler<HTMLDivElement>
 
@@ -31,7 +30,7 @@ interface AvatarGroupOwnProps {
 
   /**
    * Controls how the ellipsis is displayed.
-   * @default AvatarGroupEllipsisType.Icon
+   * @default 'icon'
    */
   ellipsisType?: AvatarGroupEllipsisType
 

packages/bezier-react/src/components/AvatarGroup/index.ts

@@ -1,5 +1,5 @@
 export { AvatarGroup } from './AvatarGroup'
 export {
-  AvatarGroupEllipsisType,
+  type AvatarGroupEllipsisType,
   type AvatarGroupProps,
 } from './AvatarGroup.types'