Component enum property rule proposal

[sungik-choi]

Description

컴포넌트의 enum 속성 컨벤션 변경을 제안합니다. enum을 모두 union string literal로 통일합니다.

Reasons for suggestion

enum의 문제

beizer-react에선 size, variants등의 값에 ***Size, ***Variants 같은 enum을 사용하고 있습니다. string literal을 사용할 수도 있지만, 소스 코드 검색 시에 enum이 가지는 이점이 있어 사용하게 되었습니다. 반면 enum이 장점만을 가지는 것은 아닙니다.

단점

1. 컴포넌트와 별도로 export 되므로 사용처에서 size, variants 등의 값을 커스텀하자면 이를 모두 import 해야합니다
2. size, variants 같은 속성이 늘어날 때마다 enum도 속성 수에 비례하여 늘어나야합니다
3. IDE의 자동 완성으로 자동 import를 해준다고 해도, 소스 코드가 방대할 경우 자동 완성까지 지연 시간이 발생합니다. 팀 전체에서 이 지연 시간을 모은다면 꽤나 유의미한 수치가 될 거로 예상합니다
4. 현재 어떤 속성이 enum이여야하는지/아닌지에 대한 기준이 불명확합니다. 예컨대, Stack 의 justify 나 align 속성은 enum이 아닌 string literal로 되어있습니다. 명확한 기준을 정하기도 어렵습니다

기존 장점이었던 '소스 코드 검색의 용이성'은 특히 마이그레이션을 하는 경우 빛을 발하게 되는데, 이제는 codemod 스크립트를 통해 AST를 탐색하여 마이그레이션을 할 수 있습니다. 현 시점에서 이 장점을 유지하기 위한 비용보다 단점에서 오는 비용이 훨씬 더 크다고 생각합니다.

Proposed solution

enum을 모두 union (string or number) literal로 통일합니다.

// AS-IS
enum ButtonSize {
  XS = 'xs',
  S = 's',
}

enum ButtonVariants {
  Primary = 'primary',
  Secondary = 'secondary',
}

// TO-BE
type ButtonSize = 'xs' | 's'
type ButtonVariants = 'primary' | 'secondary'

마이그레이션 시 장점

• 별도의 import 없이, 해당 속성값에 커서를 위치시키는 것만으로 자동 완성이 바로 가능
• 별도의 캐스팅이 불필요함 (as ButtonSize 같은)
• 코드 컨벤션 통일
• enum과 달리 type은 코드를 생성하지 않으므로 번들 용량 감소

마이그레이션 시 단점

• variants 이름이 겹치는 경우 단순 소스 코드 검색이 enum보다 어려움
• enum은 특정값 deprecated 처리가 쉬움 (예: ButtonColorVariant.Monochrome)
• 마이그레이션 비용 (codemod)

References

• Enum vs String literal union: https://www.typescriptcourse.com/string-literal-unions-over-enums
• React Spectrum Button: https://react-spectrum.adobe.com/react-spectrum/Button.html#props
• Polaris Button: https://polaris.shopify.com/components/actions/button#props

Tasks

Preview Give feedback

1. Implement codemod transform which replaces enum usage with string literal #1639
   bezier-codemod feat +2
   
2. Add ProgressBarSize, ProgressBarVariant string literal type and deprecate enum #1595
   enhancement +1
   
3. Add TooltipPosition string literal type and deprecate enum

[sungik-choi]

마이그레이션 전략

• stable(1.y.z) 버전에서는 enum을 deprecated 처리하고, enum과 union literal type 둘 다 지원
• 채널 데스크 애플리케이션의 마이그레이션은 진행
• 다음 메이저 버전에서 enum 지원 중단

[sungik-choi]

@Dogdriip 이 이슈 + 마이그레이션 코드 구현 및 문서 작성해보시면 좋을 거 같아요!