fix: add react-dom into peerDependencies

[noahluftyang]

Changes

• react-dom을 peerDependencies로 명시하지 않는 경우, 패키지를 사용하는 쪽에서 서로 다른 react-dom 버전을 설치했을 때 문제가 발생합니다. 이를 수정했어요.

Visuals

Checklist

• Have you written the functional specifications?
• Have you written the test code?

Additional Discussion Points

Summary by CodeRabbit

• Chores
  • 최신 React 환경과의 원활한 연동을 위해 모든 UI 컴포넌트가 React와 React-DOM(버전 18 이상) 요구사항을 준수하도록 업데이트되었습니다.
  • 일부 컴포넌트에 추가 보조 라이브러리가 도입되어 전반적인 성능과 안정성이 향상되었습니다.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4cbcf3a

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

This PR includes changesets to release 17 packages

Name	Type
@sipe-team/radio-group	Patch
@sipe-team/typography	Patch
@sipe-team/checkbox	Patch
@sipe-team/skeleton	Patch
@sipe-team/divider	Patch
@sipe-team/tooltip	Patch
@sipe-team/avatar	Patch
@sipe-team/button	Patch
@sipe-team/switch	Patch
@sipe-team/input	Patch
@sipe-team/badge	Patch
@sipe-team/reset	Patch
@sipe-team/card	Patch
@sipe-team/flex	Patch
@sipe-team/grid	Patch
@sipe-team/icon	Patch
@sipe-team/side	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

[coderabbitai]

Walkthrough

이 PR은 @sipe-team 네임스페이스 내 여러 컴포넌트에 대해 peerDependencies에 "react-dom": ">= 18"을 추가하는 패치를 포함합니다. 또한 일부 패키지에서는 @radix-ui/react-slot, clsx, nanoid, classnames, @sipe-team/tokens 등의 추가 의존성이 도입되었으며, 의존성 섹션의 정리 및 소폭의 형식 변경이 이루어졌습니다.

Changes

파일	변경 요약
.changeset/red-numbers-compete.md	@sipe-team 컴포넌트 전반에 대한 패치 적용 및 peerDependencies에 "react-dom" 추가
.templates/component/package.json	peerDependencies에 "react-dom": ">= 18" 추가
packages/{Input, avatar, badge, button, card, radio-group, side, typography, tooltip, flex}/package.json	기존 항목에 peerDependencies로 "react-dom": ">= 18" 추가 (형식/배치 소폭 변경 포함)
packages/{checkbox, divider, grid, reset, skeleton, switch}/package.json	"react-dom": ">= 18" 추가와 함께 추가 의존성 반영 • checkbox: @radix-ui/react-slot, clsx, nanoid • divider: clsx "^2.1.1" • grid: @radix-ui/react-slot, clsx • reset: @radix-ui/react-slot, classnames • skeleton: @radix-ui/react-slot • switch: @sipe-team/tokens, clsx

Poem

토실토실한 내 발자국, 새 의존성이 솟아나요,
한걸음씩 쌓인 코드길 위에, 변화가 반짝이네.
react와 react-dom의 환상 콜라보,
나의 귀여운 코드는 오늘도 춤추며
깜찍한 토끼 미소처럼, 모두에게 기쁨을 주어요 🐰🎶

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7abd2b5 and 4cbcf3a.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (19)

• .changeset/red-numbers-compete.md (1 hunks)
• .templates/component/package.json (1 hunks)
• packages/Input/package.json (1 hunks)
• packages/avatar/package.json (1 hunks)
• packages/badge/package.json (1 hunks)
• packages/button/package.json (1 hunks)
• packages/card/package.json (1 hunks)
• packages/checkbox/package.json (3 hunks)
• packages/divider/package.json (3 hunks)
• packages/flex/package.json (1 hunks)
• packages/grid/package.json (4 hunks)
• packages/icon/package.json (1 hunks)
• packages/radio-group/package.json (1 hunks)
• packages/reset/package.json (3 hunks)
• packages/side/package.json (1 hunks)
• packages/skeleton/package.json (3 hunks)
• packages/switch/package.json (3 hunks)
• packages/tooltip/package.json (1 hunks)
• packages/typography/package.json (1 hunks)

✅ Files skipped from review due to trivial changes (1)

• .changeset/red-numbers-compete.md

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: CI

🔇 Additional comments (28)

.templates/component/package.json (1)

42-45: react-dom Peer Dependency 추가 확인
peerDependencies 섹션에 "react-dom": ">= 18"이 추가되어 사용자들이 올바른 버전의 react-dom을 사용하도록 강제할 수 있게 되었습니다. 이는 react와 함께 호환성을 보장하는 데 중요한 변경 사항이며, 다른 @sipe-team 패키지들과의 일관성도 유지됩니다.

packages/side/package.json (1)

35-38: peerDependencies에 react-dom 추가됨
추가된 "react-dom": ">= 18" 항목은 기존 "react": ">= 18"과 함께 명시되어, 패키지가 React 18 이상의 환경에서 올바르게 동작하도록 보장합니다. 다른 @sipe-team 패키지와 일관성이 있어 적절해 보입니다.

packages/reset/package.json (2)

23-26: dependencies에 새 라이브러리 추가됨
새로운 의존성 "@radix-ui/react-slot": "^1.1.0" 및 "classnames": "^2.5.1"이 추가되었습니다. 해당 라이브러리들은 디자인 시스템에서 필요한 기능을 제공하는 데 적절해 보이며, 버전 관리도 올바르게 지정되었습니다.

---

45-48: peerDependencies 업데이트
"react-dom": ">= 18" 항목이 peerDependencies에 추가되어, 패키지 이용 시 React 환경의 버전 충돌을 방지할 수 있습니다. 기존의 "react": ">= 18"과 함께 사용되어 일관성이 유지됩니다.

packages/radio-group/package.json (1)

44-47: peerDependencies에 react-dom 추가됨
peerDependencies 섹션에 "react-dom": ">= 18" 항목이 추가되었습니다. 이는 기존 "react"와 함께 동일한 버전 제약 조건을 적용함으로써, 해당 컴포넌트가 React 18 이상 환경에서 안정적으로 동작하도록 합니다.

packages/icon/package.json (1)

44-47: peerDependencies 업데이트 완료
새롭게 추가된 "react-dom": ">= 18"은 이 패키지가 React 18 이상을 필요로 함을 명확히 하여, 관련 충돌 가능성을 줄여줍니다. 다른 @sipe-team 패키지들과의 일관성이 유지되어 적절한 변경입니다.

packages/divider/package.json (3)

23-25: dependencies 섹션에 clsx 추가됨
"clsx": "^2.1.1" 라이브러리가 dependencies에 추가되었습니다. 해당 라이브러리는 클래스 이름 처리를 간소화하여 스타일 관리에 유용하므로, 적절한 의존성 추가입니다.

---

47-49: peerDependencies에 react-dom 추가 및 업데이트
peerDependencies 섹션에 "react": ">= 18"과 "react-dom": ">= 18"가 모두 명시되어, 최신 React 환경과의 호환성을 보장합니다. 다른 패키지들과 동일한 기준으로 설정되어 일관성이 있습니다.

---

66-67: sideEffects 설정 확인됨
"sideEffects": false 설정은 번들 최적화에 도움이 되며, 다른 패키지들과 일관된 구성입니다.

packages/grid/package.json (4)

12-12: 깔끔한 파일 포함자 배열 정리
"files" 속성을 단일 배열로 정리한 점은 빌드 결과물 목록을 명확하게 보여주어 가독성을 높입니다.

---

23-26: 필수 의존성 추가 확인
새롭게 추가된 "@radix-ui/react-slot"와 "clsx" 의존성은 다른 @sipe-team 패키지들과 일관된 버전 관리 및 사용을 보장합니다.

---

47-49: peerDependencies 개선: react-dom 추가
peerDependencies에 "react-dom": ">= 18"을 명시한 것은 React 버전 불일치를 예방하는 중요한 개선입니다.

---

67-67: sideEffects 설정 유지
"sideEffects": false 설정이 그대로 유지되어 번들링 시 불필요한 부작용을 예방하는 데 기여합니다.

packages/skeleton/package.json (2)

23-25: 종속성 정리 및 일관성 유지
"dependencies" 섹션에 "@radix-ui/react-slot": "^1.1.0" 추가는 다른 패키지와의 일관성을 유지하며 필요 패키지를 명확하게 지정합니다.

---

47-49: peerDependencies 개선 적용
peerDependencies에 "react-dom": ">= 18"가 추가되어 React 18 이상의 환경을 명시적으로 요구하므로 버전 충돌을 예방할 수 있습니다.

packages/avatar/package.json (1)

48-50: peerDependencies 형식 및 내용 개선
"peerDependencies" 섹션에 "react-dom": ">= 18"를 추가하고, 형식상의 소폭 변경(콤마 추가 등)을 통해 명확성을 높인 점이 좋습니다.

packages/flex/package.json (2)

48-49: React 환경 요구사항 명시
peerDependencies에 "react-dom": ">= 18"가 추가되어, 해당 패키지가 최신 React 환경과 호환되도록 보장합니다.

---

51-67: publishConfig 구조 재정리
"publishConfig" 내 exports 구조를 재정리하여, 패키지 배포 시 모듈 타입과 관련된 설정이 보다 명확해졌습니다. 이 재구성은 유지보수에 도움이 됩니다.

packages/checkbox/package.json (2)

23-27: 새로운 의존성 추가: 스타일 및 유틸리티 지원
"dependencies" 섹션에 "@radix-ui/react-slot", "clsx", "nanoid"를 추가한 것은 컴포넌트의 UI 구성과 고유 ID 생성을 개선하는 데 도움이 될 것으로 보입니다.

---

48-50: 강화된 peerDependencies 선언
peerDependencies에 "react-dom": ">= 18"를 명시함으로써, 이 패키지가 React 18 이상의 환경에서 올바르게 동작할 것을 보장합니다.

packages/badge/package.json (1)

48-49: peerDependencies에 react-dom 추가 확인
"react-dom": ">= 18"이 peerDependencies에 올바르게 추가되어 있습니다. 다른 @sipe-team 패키지들과의 버전 요구 사항 일관성도 유지되고 있어 승인합니다.

packages/switch/package.json (2)

23-26: 새로운 dependencies 추가 확인
새로운 dependencies 섹션에 "@sipe-team/tokens"와 "clsx"가 추가되었습니다. 이 변경은 의도한 대로 해당 패키지의 기능에 필요한 의존성을 제공하므로 승인합니다.

---

49-50: peerDependencies 업데이트 확인
peerDependencies 영역에 "react-dom"이 ">= 18" 버전으로 추가되어, 기존 "react" 요구사항과 함께 일관성을 유지하고 있습니다.

packages/Input/package.json (1)

48-49: peerDependencies에 react-dom 추가 확인
"react-dom"이 peerDependencies에 추가되어 있으며, 버전 요구사항 ">= 18"이 명시되어 있습니다. 전체 패키지 네임스페이스와의 일관성을 확인하였으므로 승인합니다.

packages/card/package.json (1)

49-50: peerDependencies 업데이트 확인
"react-dom": ">= 18"이 peerDependencies에 올바르게 추가되어 있습니다. 이 변경은 다른 관련 패키지들과의 호환성을 강화하는 점에서 적절합니다.

packages/typography/package.json (1)

49-50: peerDependencies에 react-dom 추가 확인
"react-dom": ">= 18" 을 peerDependencies에 추가한 점이 다른 @sipe-team 패키지들과의 일관성을 잘 유지하고 있습니다.

packages/button/package.json (1)

50-51: peerDependencies 업데이트 적절함 확인
peerDependencies 섹션에 "react-dom": ">= 18" 항목이 추가된 것은 올바른 결정입니다. 이 변경은 사용자들이 react-dom의 최소 요구 버전을 충족하도록 하여 잠재적인 버전 충돌 문제를 예방하는 데 기여합니다.

packages/tooltip/package.json (1)

50-51: 일관성 있는 peerDependencies 수정 검토
peerDependencies에 "react-dom": ">= 18"을 추가한 것은 react와 함께 사용하는 환경에서 올바른 최소 버전 조건을 강제하여 패키지 간 호환성을 보장하는 데 도움이 됩니다.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.