search

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

PoC: Split bezier-react internal packages #787

Closed sungik-choi closed 2 years ago

sungik-choi commented 2 years ago

Summary

코드 duplicate, package-lock 변경이 대부분이라 변경사항은 많지 않습니다. 많은 의견 주시면 감사하겠습니다 🙏

Details

bezier-react/
└── packages/
    ├── bezier-react-components/bezier-react-text
    ├── bezier-react-foundation
    ├── bezier-react-system
    ├── eslint-config-bezier-react
    └── tsconfig

번들러 변경

번들러로 위 예제에서 사용한 tsup 라이브러리를 적용했습니다. rollup을 공통 설정으로 분리하는 작업을 진행해보았지만 잘 동작하지 않았고, 이전 설정에 대한 히스토리도 자세히 남아있지 않아 새로운 번들러를 적용해보는 방식으로 진행했습니다.

고민되는 점

Browser Compatibility

OS / Engine 호환성을 반드시 확인해주세요.

Windows

References

codecov[bot] commented 2 years ago

Codecov Report

Merging #787 (2515056) into next-v1 (de760e5) will not change coverage. The diff coverage is n/a.

:exclamation: Current head 2515056 differs from pull request most recent head 60324af. Consider uploading reports for the commit 60324af to get more accurate results

@@           Coverage Diff            @@
##           next-v1     #787   +/-   ##
========================================
  Coverage    66.51%   66.51%           
========================================
  Files          191      191           
  Lines         2804     2804           
  Branches       772      772           
========================================
  Hits          1865     1865           
  Misses         820      820           
  Partials       119      119

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 238e8ef...60324af. Read the comment docs.

carlos-channel-io commented 2 years ago

lint, test는 개별 패키지로 가져가면 좋을 것 같습니다. yarn 에서는 workspaces 의 foreach를 지원하는데 터보레포에서도 유사한게 있을 듯 하네요?

sungik-choi commented 2 years ago

lint, test는 개별 패키지로 가져가면 좋을 것 같습니다. yarn 에서는 workspaces 의 foreach를 지원하는데 터보레포에서도 유사한게 있을 듯 하네요?

네 그렇게 해야할 거 같아요. turbo run lint 같은 방식으로 스크립트를 실행하면 workspace를 순회하면서 같은 이름의 스크립트를 모두 실행할 수 있어요.

carlos-channel-io commented 2 years ago

터보 레포 칭찬해

sungik-choi commented 2 years ago

며칠간 고민해보니 bezier-react 패키지 내부를 다시 패키지로 분리하는 건 득보다 실이 많을 거 같아 이 PR은 Close하려고 합니다. 리뷰해주신 @carlos-channel-io @inhibitor1217 정말 감사드립니다 🙏

간단하게 느낀 점을 정리해보자면 아래와 같습니다.

(PR description of https://github.com/channel-io/bezier-react/pull/781) ~~1. packages/ 하위에 bezier-react 컴포넌트, 훅 등을 추가 : 컴포넌트, 훅 등을 개별 내부 패키지로 분리해서 관심사의 분리/순환 참조 방지/캐싱의 장점을 누릴 수 있을거라 기대하고 있습니다.~~

  1. 아이콘 컴포넌트 apps/ 하위의 별도의 패키지로 분리 (@channel.io/bezier-icons) : bezier-icons는 순수한 아이콘만 책임지는 라이브러리로 분리하고, as prop을 통해 아이콘을 그리는 Icon 컴포넌트를 bezier-react에서 구현하도록 변경할 예정입니다. (이전에 만들었던 Tree-shakable한 Icon은 deprecated)

이번 시도로 1번은 기각하고, 이어서 2번을 시도해보려고 합니다. https://github.com/Shopify/polaris 레포지토리 같은 구조로 만들어보려고 합니다.

carlos-channel-io commented 2 years ago

현재 규모의 디자인 시스템에서 mono-repo가 필요할까? 에 대한 고민이 있긴 했습니다. 현재 bezier는 프로젝트의 구조 말고 더 시급하고 중요한 과제들이 있다는 생각이었어요.

잘 정리 안돼서 아쉽긴 하지만, 필요한 경험이긴 했을거에요.

데스크에서 좀더 잘 정리해서 다음 번 시도엔 편하게 오실 수 있게 준비 해보겠습니다..

sungik-choi commented 2 years ago

현재 규모의 디자인 시스템에서 mono-repo가 필요할까? 에 대한 고민이 있긴 했습니다.

현재 bezier는 프로젝트의 구조 말고 더 시급하고 중요한 과제들이 있다는 생각이었어요.

잘 정리 안돼서 아쉽긴 하지만, 필요한 경험이긴 했을거에요.

데스크에서 좀더 잘 정리해서 다음 번 시도엔 편하게 오실 수 있게 준비 해보겠습니다..

감사합니다 😭 여기서 끝내진 않고, next-v1 브랜치 기준으로 아이콘 패키지는 분리해볼예정이에요.

중요한 과제들이 많지만 대부분이 디자이너의 많은 리소스도 함께 필요한 과제들이라고 생각해요. 디자인 리소스가 부족한 상황에서, 엔지니어의 리소스만 가지고 할 수 있는 일이 뭐가 있을지 고민하다가 추후에 생길 패키지들에 대비해서 모노레포 구조를 미리 적용해두면 좋겠다는 생각이었어요.