Implement and export Primitive components (via radix-ui)

[sungik-choi]

Description

Implement and export Primitive components (via radix-ui)

Reasons for suggestion

https://github.com/channel-io/bezier-react/discussions/1805 에도 적었듯, 다음 버전의 디자인 시스템에서는 Standard component(bezier-react)와 App component(applicatin-specific component)를 모두 디자인 시스템의 바운더리 안에 포함합니다.

App component의 구현체가 bezier-react에 존재하지는 않으나, 대부분의 컴포넌트의 동작은 두 레이어가 공유하게 됩니다. 대표적으로 bezier-react Modal의 UI를 따르진 않지만 Modal처럼 동작하는(floating & focus trap) 컴포넌트를 애플리케이션에서 구현해야하는 케이스가 있습니다. 이런 케이스들을 중복 로직 없이 애플리케이션 개발자가 쉽게 구현할 수 있도록 하기 위해, UI를 제외한 동작만을 포함한 컴포넌트 - Primtive(Headless) 컴포넌트를 bezier-react에서 제공하고자 합니다.

Proposed solution

• bezier-react에서 사용하고 있는 radix-ui를 Wrapping한 형태가 될 거 같습니다.
• radix-ui의 컴포넌트만을 사용합니다. radix-ui의 컴포넌트 간 컨텍스트를 통한 동작을 사용하기 위해서입니다. 또한 라이브러리를 섞어서 사용하게 되다보면 라이브러리의 충돌이 발생할 수 있습니다.

References

• https://paste.twilio.design/primitives
• https://ui.shadcn.com/docs/components/context-menu 같은 예시에서 스타일을 제외한 형태가 되지 않을까?

[sungik-choi]

• FormControl, FormLabel, FormHelperText도 Primitive 레이어로 나눌 수 있지 않을까? + BaseButton
• Compound 컴포넌트 패턴으로 하나로 모아 export할지? 아니면 현재 export 방식과 동일하게 개별 모듈로 export할지?
• radix-ui 컴포넌트를 제공한다면 어디까지 제공할지? 처음부터 모든 컴포넌트를 제공할 필요는 없지 않을까? 보수적으로 접근해도 좋을 거 같다.

[sungik-choi]

2049