channel-io / bezier-react

React components library that implements Bezier design system.
https://main--62bead1508281287d3c94d25.chromatic.com
Apache License 2.0
184 stars 46 forks source link

split @channel.io/bezier-react-icons package #813

Closed sungik-choi closed 2 years ago

sungik-choi commented 2 years ago

BREAKING_CHANGE

729 에서 구현했던 아이콘이 deprecate 됩니다. bezier-react와 bezier-react-icons 패키지의 책임을 분리하기 위해, 아이콘 소스와 Icon 컴포넌트를 조합하여 사용하는 방식으로 변경했습니다.

레거시 아이콘은 사용처가 아직 많아 아직 deprecate 하지 않았습니다. 후속 작업으로 bezier-react 내부, 사용처에서 새로운 아이콘 컴포넌트로 마이그레이션이 이루어져야합니다. 작업이 모두 완료된 이후, 트리 쉐이킹이 완벽하게 동작하게 됩니다.

/* deprecated! AS-IS */
import { AllIcon } from '@channel.io/bezier-react'
return (<AllIcon color="bg-blue-light"/>)

/* TO-BE */
/* Icon(LegacyIcon)은 사용처가 너무 많아, 우선 BaseIcon 이라는 이름으로 export 했습니다 */
import { BaseIcon, AllIcon } from '@channel.io/bezier-react'
return (<Icon as={AllIcon} color="bg-blue-light />)
changeset-bot[bot] commented 2 years ago

⚠️ No Changeset found

Latest commit: 669e1c4dbb02e022f112b5f6fc7e931678741def

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

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

sungik-choi commented 2 years ago

changeset-bot : 테스트중인 봇입니다.

sungik-choi commented 2 years ago

workspace들이 symlink로 연결되어 있는데, 내부 @channel.io/bezier-react-icons 를 참조하고 있음. 패키지에 명시된 타입과 빌드 결과물이 없어서 테스트가 실패하는 문제. (로컬에서도 build하지 않으면 실패함)

Circle CI 설정을 변경한 후 monorepo 브랜치를 베이스로 PR을 만들 예정입니다. -> #814

sungik-choi commented 2 years ago

@channel.io/bezier-react-icons 패키지가 트리 쉐이킹이 잘 되지 않는 문제가 있네요. 여러 시도들을 해보는 중입니다.

codecov[bot] commented 2 years ago

Codecov Report

Merging #813 (6c47ddd) into next-v1 (cf8a976) will decrease coverage by 0.03%. The diff coverage is n/a.

@@             Coverage Diff             @@
##           next-v1     #813      +/-   ##
===========================================
- Coverage    67.81%   67.78%   -0.04%     
===========================================
  Files          204      202       -2     
  Lines         2862     2859       -3     
  Branches       784      784              
===========================================
- Hits          1941     1938       -3     
  Misses         804      804              
  Partials       117      117              
Impacted Files Coverage Δ
...ages/bezier-react/src/components/Button/Button.tsx 92.06% <0.00%> (ø)
.../bezier-react/src/components/ListItem/ListItem.tsx 80.35% <0.00%> (ø)
...ezier-react/src/components/Status/Status.styled.ts 91.66% <0.00%> (ø)
...er-react/src/components/Icon/legacy/LegacyIcon.tsx 75.00% <0.00%> (ø)
...r-react/src/components/OutlineItem/OutlineItem.tsx 72.85% <0.00%> (ø)
...react/src/components/Navigator/NavItem/NavItem.tsx 83.33% <0.00%> (ø)
...eact/src/components/Forms/Inputs/Select/Select.tsx 92.72% <0.00%> (ø)
...act/src/components/Navigator/NavGroup/NavGroup.tsx 70.58% <0.00%> (ø)
...onents/KeyValueListItem/common/KeyItem/KeyItem.tsx 100.00% <0.00%> (ø)
...ages/bezier-react/src/components/Icon/BaseIcon.tsx
... and 3 more

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 844e77c...6c47ddd. Read the comment docs.

sungik-choi commented 2 years ago

패키지 추가 이전 아이콘 패키지의 효용에 대해 각 클라이언트별 논의가 필요하다고 생각하여 잠정 폐기합니다. 트리 쉐이킹이 제대로 동작하지 않는 문제도 있어서, 제대로 적용하기 위해선

작업이 이루어져야 합니다.