Convert enum type of component props to string literal type - Button, Banner, etc #1984

yangwooseong · 2024-02-07T09:49:50Z

Self Checklist

I wrote a PR title in English and added an appropriate label to the PR.
I wrote the commit message in English and to follow the Conventional Commits specification.
I added the changeset about the changes that needed to be released. (or didn't have to)
I wrote or updated documentation related to the changes. (or didn't have to)
I wrote or updated tests related to the changes. (or didn't have to)
I tested the changes in various browsers. (or didn't have to)
- Windows: Chrome, Edge, (Optional) Firefox
- macOS: Chrome, Edge, Safari, (Optional) Firefox

Related Issue

Summary

컴포넌트의 enum 타입을 string literal 타입으로 변경하고 codemod 에 변경되는 속성을 추가합니다.
한 pr 에 하기에는 변경사항이 많아서 2~3개로 분리해서 작업하려고 합니다.

Details

v2-enum-member-to-string-literal codemod 를 사용해서 하나씩 변환했습니다.
스토리북에서 enum 으로부터 control option 을 얻어오는 부분은 string literal 타입이 되면 스토리북이 알아서 radio 버튼으로 바꿔주기 때문에 제거했습니다. 개발 모드에서는 input type으로 되어 직접 입력해야하지만, 크게 불편하지는 않다고 생각됩니다.
StatusType 만 'OnlineCrescent' 처럼 PascalCase 로 되어있고 다른 부분은 kebab-case 라서 변환하면서 모두 kebab-case 로 통일해야 하나 고민입니다. 일관성 측면에서 통일하는게 좋아보입니다.

Breaking change? (Yes/No)

Yes

References

None

changeset-bot · 2024-02-07T09:49:54Z

🦋 Changeset detected

Latest commit: 38c5495

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@channel.io/bezier-codemod	Minor
@channel.io/bezier-react	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-02-07T09:52:15Z

Chromatic Report

🚀 Congratulations! Your build was successful!

codecov · 2024-02-07T09:56:13Z

Codecov Report

Attention: 4 lines in your changes are missing coverage. Please review.

Comparison is base (1e7de8a) 84.23% compared to head (be341d6) 84.04%.

Files	Patch %	Lines
...ages/bezier-react/src/components/Status/Status.tsx	0.00%	3 Missing ⚠️
.../bezier-react/src/components/ListItem/ListItem.tsx	66.66%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##            alpha    #1984      +/-   ##
==========================================
- Coverage   84.23%   84.04%   -0.19%     
==========================================
  Files         142      134       -8     
  Lines        2277     2250      -27     
  Branches      606      606              
==========================================
- Hits         1918     1891      -27     
  Misses        282      282              
  Partials       77       77

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

sungik-choi · 2024-02-08T05:26:47Z

스토리북에서 enum 으로부터 control option 을 얻어오는 부분은 string literal 타입이 되면 스토리북이 알아서 radio 버튼으로 바꿔주기 때문에 제거했습니다. 개발 모드에서는 input type으로 되어 직접 입력해야하지만, 크게 불편하지는 않다고 생각됩니다.

👍

StatusType 만 'OnlineCrescent' 처럼 PascalCase 로 되어있고 다른 부분은 kebab-case 라서 변환하면서 모두 kebab-case 로 통일해야 하나 고민입니다. 일관성 측면에서 통일하는게 좋아보입니다.

저도 케밥 케이스로 통일하는 편이 좋을 거 같아요.

sungik-choi · 2024-02-08T05:27:12Z

.changeset/sharp-donuts-dance.md

+"@channel.io/bezier-react": major
+---
+
+## "@channel.io/bezier-react": major


Suggested change

## "@channel.io/bezier-react": major

sungik-choi · 2024-02-08T05:31:59Z

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

@@ -75,7 +71,7 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar({
      return null
    }

-    const statusSize = size >= AvatarSize.Size90 ? StatusSize.L : StatusSize.M
+    const statusSize = Number(size) >= 90 ? 'l' : 'm'


형변환 하지 않고 명시적으로 맵핑해주는 게 좋을 거 같아요. 이렇게 변경할 경우, 100 as AvatarSize 같은 식으로 사용한 곳에서 제대로 동작하지 않게 될텐데 그건 사용처 잘못이라고 봅니다

sungik-choi · 2024-02-08T05:33:48Z

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

@@ -209,7 +212,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(function
      )}
      style={{
        '--b-avatar-group-spacing': px(spacing),
-        '--b-avatar-group-size': px(size),
+        '--b-avatar-group-size': cssDimension(size),


Suggested change

'--b-avatar-group-size': cssDimension(size),

'--b-avatar-group-size': `${size}px`

스냅샷 변경사항을 참고해주세요!

size 를 css variable 로 받을 이유는 없어 보여서 classname 으로 바꿨습니다!

yangwooseong · 2024-02-08T06:43:24Z

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

@@ -72,7 +72,7 @@ interface ButtonOwnProps {

  /**
   * The style variant.
-   * @default ButtonStyleVariant.Primary
+   * @default "primary"


아쉽게도 string literal type 은 enum 과 달리 이런 jsdoc을 미리보기로 보여줄 수 없네요

네, enum이 jsdoc이나 코드 검색 시에는 확실한 장점이 있어요 (#1568)

yangwooseong · 2024-02-08T06:45:52Z

스토리북에서 enum 으로부터 control option 을 얻어오는 부분은 string literal 타입이 되면 스토리북이 알아서 radio 버튼으로 바꿔주기 때문에 제거했습니다. 개발 모드에서는 input type으로 되어 직접 입력해야하지만, 크게 불편하지는 않다고 생각됩니다.

👍

StatusType 만 'OnlineCrescent' 처럼 PascalCase 로 되어있고 다른 부분은 kebab-case 라서 변환하면서 모두 kebab-case 로 통일해야 하나 고민입니다. 일관성 측면에서 통일하는게 좋아보입니다.

저도 케밥 케이스로 통일하는 편이 좋을 거 같아요.

이번 pr 에 포함했습니다!

sungik-choi · 2024-02-08T06:54:45Z

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

+  @each $size in $avatar-sizes {
+    @if $size > 24 {
+      &:where(.size-#{$size}) {
+        --b-avatar-group-ellipsis-pr: 6px;
+      }
+    }


지금 보니 &:where(.size-30, .size-36...) 한 줄로 할 수 있을 거 같네요

sungik-choi · 2024-02-08T06:55:19Z

.changeset/sharp-donuts-dance.md

@@ -15,4 +15,4 @@ The properties that change are:
 - `ListItemVariant`, `ListItemSize`
 - `StatusType`, `StatusSize`

-When changed to string literal type, it is changed to the value of enum. e.g. `ButtonStyleVariant.MonoChrome` -> `monochrome`
+When changed to string literal type, it is changed to the kebab-cased value of enum. e.g. `ButtonStyleVariant.MonoChromeDark` -> `monochrome-dark`, `StatusType.OnlineCrescent` -> `online-crescent`


…ize enum to string literal

…literal

…ring literal

…use" This reverts commit 31d757b.

…r as classname

…Tooltip, etc (#1990)  ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue   - Fixes #1815 - Fixes #1568 ## Summary  - #1984 의 후속 작업입니다. - 컴포넌트의 enum 타입을 string literal 타입으로 변경하고, codemod 에 변경사항을 추가하여 마이그레이션을 지원합니다. ## Details  - 대부분의 경우는 이전 pr과 동일하게 PascalCase 의 enum 을 kebab-case 의 string literal 타입으로 변환하는 작업입니다. 여기서 2가지 경우만 약간의 예외적인 상황이 있었습니다. - `IconSize`의 경우 `IconSize.Normal = 24`와 같이 size value 를 그대로 사용하던 것을 `'normal'` 을 받고 컴포넌트 내부에서 size 로 맵핑하는 형식으로 변경했습니다. number literal 을 그대로 받는 것보다 이렇게 하는 게 다른 컴포넌트와의 일관성이 유지된다고 생각하였습니다. - 한편 `TextAreaHeight` enum 은 `TextAreaHeight.Row16` 처럼 쓰이고 있어서 이를 `'row16'` 으로 바꾸는 것보다는 `16`으로 받는게 깔끔한 것 같아서 예외적으로 number literal 을 받도록 했습니다. ### Breaking change? (Yes/No)  - Yes (changeset 참고) ## References  - None

… Button, Banner, etc" (#1995) Reverts #1984

yangwooseong self-assigned this Feb 7, 2024

yangwooseong added enhancement Issues or PR related to making existing features better bezier-codemod Issue or PR related to bezier-codemod labels Feb 7, 2024

yangwooseong marked this pull request as ready for review February 7, 2024 09:55

yangwooseong requested a review from sungik-choi as a code owner February 7, 2024 09:55

sungik-choi reviewed Feb 8, 2024

View reviewed changes

yangwooseong force-pushed the feat/enum-to-string-literal-1 branch from 2b41e5d to 7da63f9 Compare February 8, 2024 06:42

yangwooseong commented Feb 8, 2024

View reviewed changes

yangwooseong force-pushed the feat/enum-to-string-literal-1 branch from 7da63f9 to 1124241 Compare February 8, 2024 06:44

yangwooseong force-pushed the feat/enum-to-string-literal-1 branch from 1124241 to be341d6 Compare February 8, 2024 06:45

yangwooseong requested a review from sungik-choi February 8, 2024 06:46

sungik-choi approved these changes Feb 8, 2024

View reviewed changes

yangwooseong added 13 commits February 8, 2024 16:02

feat: add v2- prefix to enum-member-to-string-literal codemod

f01c759

feat(codemod): comment import declaration check for internal use

24ea4c2

feat(avatar): convert AvatarSize enum to string literal

37da4c0

feat(banner): convert BannerVariant enum to string literal

bcd1cf4

feat(button): convert ButtonColorVariant, ButtonStyleVariant, ButtonS…

748cf55

…ize enum to string literal

feat(emoji): convert EmojiSize enum to string literal

75bd059

feat(segmented-control): convert SegmentedControlSize enum to string …

eb6bb78

…literal

feat(tab): convert TabSize enum to string literal

fa1abdf

feat(list-item): convert ListItemVariant, ListItemSize enum to st…

5134109

…ring literal

feat(status): convert StatusType, StatusSize enum to string literal

8e7208f

feat(codemod): add enum to string mapper

4c26db8

Revert "feat(codemod): comment import declaration check for internal …

f1284d7

…use" This reverts commit 31d757b.

feat(codemod): modify readme

bbf5607

yangwooseong added 10 commits February 8, 2024 16:02

chore(changeset): add

bc30a02

chore: resolve typecheck, update snapshot

db4ab05

chore(changeset): fix typo

f5f378c

feat(avatar): rm type conversion

e4b28c1

feat(button): convert enum to string literal in doc

b7ea016

feat(avatar-group): rm improper use of cssDimension function, refacto…

145e4ad

…r as classname

chore(avatar-group): update snapshot

307c878

feat(status): change StatusType from PascalCase to kebab-case

6e0da47

chore(changeset): update

6858731

chore(avatar): rm for loop

38c5495

yangwooseong force-pushed the feat/enum-to-string-literal-1 branch from be341d6 to 38c5495 Compare February 8, 2024 07:02

yangwooseong merged commit 09e466a into channel-io:alpha Feb 8, 2024
9 checks passed

yangwooseong deleted the feat/enum-to-string-literal-1 branch February 8, 2024 07:07

github-actions bot mentioned this pull request Feb 8, 2024

ci(changesets): version packages (alpha) #1989

Merged

yangwooseong mentioned this pull request Feb 13, 2024

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

Merged

6 tasks

yangwooseong mentioned this pull request Feb 15, 2024

Revert "Convert enum type of component props to string literal type - Toast, Tooltip, etc" #1993

Merged

sungik-choi mentioned this pull request Feb 15, 2024

Revert "Convert enum type of component props to string literal type - Button, Banner, etc" #1995

Merged

sungik-choi added a commit that referenced this pull request Feb 15, 2024

Revert "Convert enum type of component props to string literal type -…

fbf60d9

… Button, Banner, etc" (#1995) Reverts #1984

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert enum type of component props to string literal type - Button, Banner, etc #1984

Convert enum type of component props to string literal type - Button, Banner, etc #1984

yangwooseong commented Feb 7, 2024 •

edited

Loading

changeset-bot bot commented Feb 7, 2024 •

edited

Loading

github-actions bot commented Feb 7, 2024 •

edited

Loading

codecov bot commented Feb 7, 2024 •

edited

Loading

sungik-choi commented Feb 8, 2024

sungik-choi Feb 8, 2024

sungik-choi Feb 8, 2024

sungik-choi Feb 8, 2024

yangwooseong Feb 8, 2024

yangwooseong Feb 8, 2024

sungik-choi Feb 8, 2024

yangwooseong commented Feb 8, 2024

sungik-choi Feb 8, 2024

sungik-choi Feb 8, 2024

	'--b-avatar-group-size': cssDimension(size),
	'--b-avatar-group-size': `${size}px`

Convert enum type of component props to string literal type - Button, Banner, etc #1984

Convert enum type of component props to string literal type - Button, Banner, etc #1984

Conversation

yangwooseong commented Feb 7, 2024 • edited Loading

Self Checklist

Related Issue

Summary

Details

Breaking change? (Yes/No)

References

changeset-bot bot commented Feb 7, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Feb 7, 2024 • edited Loading

Chromatic Report

codecov bot commented Feb 7, 2024 • edited Loading

Codecov Report

sungik-choi commented Feb 8, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yangwooseong commented Feb 8, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yangwooseong commented Feb 7, 2024 •

edited

Loading

changeset-bot bot commented Feb 7, 2024 •

edited

Loading

github-actions bot commented Feb 7, 2024 •

edited

Loading

codecov bot commented Feb 7, 2024 •

edited

Loading