Implement Box layout component

[sungik-choi]

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.
• [x] I added the changeset 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 #1792
• Fixes #1818

Summary

Implement Box layout component

Details

자세한 내용은 이슈를 참고해주세요. 구현하며 아래와 같은 점들을 신경썼습니다.

• radix Theme를 참고하여 공통 margin props/style, 레이아웃 컴포넌트를 위한 layout props/style 을 구현했습니다. 각 인터페이스를 지원하고자하는 컴포넌트에서는 인터페이스를 상속하고, 구현에 classname과 style을 추가하도록 했습니다.
  • Box 컴포넌트를 상속받는 형태(e.g. Chakra UI)가 되지 않도록 신경썼습니다. 이렇게 될 경우 Box 컴포넌트가 말그대로 CSS superset의 형태가 되어버릴 수 있어 이런 케이스는 피하고자 했습니다(e.g. Text 의 내부 구현은 Box 이며, Box 는 Text 를 구현할 수 있도록 typo 속성을 가지고 있다). 가능한한 컴포넌트의 책임을 명확히 하고자 의도했습니다.
• 같은 맥락으로 color prop은 제외했습니다. 글자색을 변경하는 속성인데, 이 속성은 왠만하면 Text 를 통해서만 컨트롤하도록 강제하고 싶었습니다.
• color를 제외한 border, overflow, box-shadow 속성은 Box 컴포넌트가 가지고 있어도 레이아웃을 담당한다는 책임을 크게 흐트리진 않는 거 같다고 판단하여 사용성을 위해 추가했습니다.
• as 속성을 통해 변경할 수 있는 컴포넌트는 Shopify polaris의 케이스를 참고했습니다.
• 기존 컴포넌트들과 다르게 width, height 등 dimension property에 number를 넣으면 px를 붙여주는 로직(e.g. ModalContent)을 제외했습니다. primitive layout 컴포넌트라는 특성상, 애플리케이션에서 굉장히 많이 호출될 수 있습니다. 꼭 필요한 것이 아니라면 number 체크 로직을 제거하고자 했습니다.

Breaking change? (Yes/No)

No

References

• 1792

• 1818

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 99f517f60dea923e8ec5ccd6252ae6b484ebc483

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-react | Minor | | bezier-figma-plugin | Patch |

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[bot]]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[sungik-choi]

https://github.com/radix-ui/themes/blob/main/packages/radix-ui-themes/src/helpers/props/margin.props.ts 과 같은 식으로 helper function을 가까이에 위치시키자. Form related prop도 함께 적용해볼 수 있을듯.

[codecov[bot]]

Codecov Report

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

Comparison is base (3e1ecae) 87.12% compared to head (99f517f) 86.64%. Report is 1 commits behind head on alpha.

Files	Patch %	Lines
packages/bezier-react/src/components/Box/Box.tsx	0.00%	8 Missing :warning:
packages/bezier-react/src/utils/props.ts	53.33%	7 Missing :warning:
packages/bezier-react/src/utils/style.ts	50.00%	2 Missing and 1 partial :warning:
...r-react/src/components/ListItem/ListItem.styled.ts	0.00%	0 Missing and 1 partial :warning:

Additional details and impacted files

```diff @@ Coverage Diff @@ ## alpha #1785 +/- ## ========================================== - Coverage 87.12% 86.64% -0.48% ========================================== Files 277 278 +1 Lines 3798 3790 -8 Branches 794 796 +2 ========================================== - Hits 3309 3284 -25 - Misses 416 433 +17 Partials 73 73 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[sungik-choi]

기존 컴포넌트들과 다르게 width, height 등 dimension property에 number를 넣으면 px를 붙여주는 로직(e.g. ModalContent)을 제외했습니다. primitive layout 컴포넌트라는 특성상, 애플리케이션에서 굉장히 많이 호출될 수 있습니다. 꼭 필요한 것이 아니라면 number 체크 로직을 제거하고자 했습니다.

https://github.com/facebook/react/blob/8b8d265bd9a4cab7bbd04a9a13950fdc946ea51c/packages/react-dom-bindings/src/client/CSSPropertyOperations.js#L67-L101

React에서도 value === number type && !== 0 && !== unitless number property 일 경우에 암시적으로 px 을 붙여주고 있으므로, React와 동작을 통일하는 편이 React에 익숙한 사용자가 라이브러리를 별도의 학습 비용 없이 쉽게 사용할 수 있을 거 같습니다. 약간의 오버헤드를 고려하더라도 추가하는 게 나을 거 같네요.

[yangwooseong]

기존 컴포넌트들과 다르게 width, height 등 dimension property에 number를 넣으면 px를 붙여주는 로직(e.g. ModalContent)을 제외했습니다. primitive layout 컴포넌트라는 특성상, 애플리케이션에서 굉장히 많이 호출될 수 있습니다. 꼭 필요한 것이 아니라면 number 체크 로직을 제거하고자 했습니다.

https://github.com/facebook/react/blob/8b8d265bd9a4cab7bbd04a9a13950fdc946ea51c/packages/react-dom-bindings/src/client/CSSPropertyOperations.js#L67-L101

React에서도 value === number type && !== 0 && !== unitless number property 일 경우에 암시적으로 px 을 붙여주고 있으므로, React와 동작을 통일하는 편이 React에 익숙한 사용자가 라이브러리를 별도의 학습 비용 없이 쉽게 사용할 수 있을 거 같습니다. 약간의 오버헤드를 고려하더라도 추가하는 게 나을 거 같네요.

저도 오버헤드가 그리 크지는 않을 것 같아서 추가해도 될 것 같아요