sourcery-ai[bot]
commented
2 weeks ago 리뷰어 가이드 by Sourcery
이 PR은 새로운 공유 컴포넌트를 도입하고 중복된 컴포넌트를 제거하여 UI 컴포넌트를 리팩토링하고 표준화하는 데 중점을 두고 있습니다. 변경 사항에는 더 나은 접근성과 일관성을 위해 Radix UI 프리미티브로의 마이그레이션, 컴포넌트 스타일 업데이트, textarea 컴포넌트를 사용한 텍스트 입력 처리 개선이 포함됩니다.
변경 사항이 간단해 보이고 시각적 표현이 필요하지 않으므로 다이어그램이 생성되지 않았습니다.
파일 수준 변경 사항
| 변경 사항 | 세부 사항 | 파일 |
|---|---|---|
| 새로운 변형과 함께 class-variance-authority를 사용하도록 배지 컴포넌트 리팩토링 |
|
src/components/ui/badge.tsxsrc/components/workspace/HistoryTable.tsx |
| 더 나은 텍스트 처리를 위해 TextInput을 Textarea 컴포넌트로 교체 |
|
src/components/tts/table/TTSTableList.tsxsrc/components/tts/table/TTSTableGrid.tsxsrc/components/ui/textarea.tsx |
| 새로운 Radix UI 기반 컴포넌트 추가 |
|
src/components/ui/toast.tsxsrc/components/ui/dialog.tsxsrc/components/ui/tooltip.tsxsrc/components/ui/avatar.tsxsrc/components/ui/switch.tsxsrc/components/ui/accordion.tsx |
| Storybook 문서 및 스토리 추가 |
|
src/stories/button.stories.tsxsrc/stories/tooltip.stories.tsx.github/workflows/chromatic.yml |
| 중복된 컴포넌트 및 경로 정리 |
|
src/components/common/TextInput.tsxsrc/components/common/Tooltip.tsxsrc/components/login/LoginInput.tsxsrc/pages/ExamplePage.tsxsrc/routes/router.tsx |
관련 있을 수 있는 이슈
- #1: 이 PR은 공통 컴포넌트 선택을 다루며, 컴포넌트 통합이라는 이슈의 목표와 일치합니다.
팁 및 명령어
#### Sourcery와 상호작용하기 - **새로운 리뷰 트리거:** 풀 리퀘스트에 `@sourcery-ai review`라고 댓글을 남깁니다. - **토론 계속하기:** Sourcery의 리뷰 댓글에 직접 답장합니다. - **리뷰 댓글에서 GitHub 이슈 생성:** 리뷰 댓글에 답장하여 Sourcery에게 이슈 생성을 요청합니다. - **풀 리퀘스트 제목 생성:** 풀 리퀘스트 제목 어디에나 `@sourcery-ai`를 작성하여 언제든지 제목을 생성합니다. - **풀 리퀘스트 요약 생성:** 풀 리퀘스트 본문 어디에나 `@sourcery-ai summary`를 작성하여 언제든지 PR 요약을 생성합니다. 이 명령어를 사용하여 요약이 삽입될 위치를 지정할 수도 있습니다. #### 경험 맞춤화하기 [대시보드](https://app.sourcery.ai)에 접속하여: - Sourcery가 생성한 풀 리퀘스트 요약, 리뷰어 가이드 등과 같은 리뷰 기능을 활성화하거나 비활성화합니다. - 리뷰 언어를 변경합니다. - 사용자 정의 리뷰 지침을 추가, 제거 또는 편집합니다. - 기타 리뷰 설정을 조정합니다. #### 도움 받기 - 질문이나 피드백이 있을 경우 [지원팀에 문의](mailto:support@sourcery.ai)하세요. - 자세한 가이드와 정보를 보려면 [문서](https://docs.sourcery.ai)를 방문하세요. - [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/), [GitHub](https://github.com/sourcery-ai)에서 Sourcery 팀을 팔로우하여 소식을 받아보세요.Original review guide in English
## Reviewer's Guide by Sourcery This PR focuses on refactoring and standardizing UI components by introducing new shared components and removing redundant ones. The changes include migrating to Radix UI primitives for better accessibility and consistency, updating component styling, and improving the text input handling with textarea components. _No diagrams generated as the changes look simple and do not need a visual representation._ ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Refactored badge component to use class-variance-authority with new variants |- Added default variant with hover state
- Standardized padding and text size
- Removed AudioBadge component and moved its logic to HistoryTable
`src/components/workspace/HistoryTable.tsx` | | Replaced TextInput with Textarea component for better text handling |
- Implemented auto-resizing functionality
- Added overflow handling
- Updated styling for better integration
`src/components/tts/table/TTSTableGrid.tsx`
`src/components/ui/textarea.tsx` | | Added new Radix UI-based components |
- Implemented Toast component for notifications
- Added Dialog component for modal windows
- Created Tooltip component with customizable delay
- Added Avatar component for user images
- Implemented Switch component for toggles
- Added Accordion component for collapsible content
`src/components/ui/dialog.tsx`
`src/components/ui/tooltip.tsx`
`src/components/ui/avatar.tsx`
`src/components/ui/switch.tsx`
`src/components/ui/accordion.tsx` | | Added Storybook documentation and stories |
- Created button component stories with variants
- Added tooltip component stories with examples
- Set up Chromatic workflow for visual testing
`src/stories/tooltip.stories.tsx`
`.github/workflows/chromatic.yml` | | Cleaned up redundant components and routes |
- Removed LoginInput in favor of new Input component
- Removed custom Tooltip implementation
- Removed example page and related routes
`src/components/common/Tooltip.tsx`
`src/components/login/LoginInput.tsx`
`src/pages/ExamplePage.tsx`
`src/routes/router.tsx` | ### Possibly linked issues - **#1**: The PR addresses selecting common components, aligning with the issue's goal of component integration. ---
github-actions[bot]
공통 컴포넌트 선별했는데 아직 수정사항 있을 것 같아서 다시 체크할께요
스토리북 파일도 같이 작성해서 올리겠습니다.
Sourcery에 의한 요약
여러 새로운 UI 컴포넌트와 해당하는 Storybook 스토리를 도입합니다. 기존 컴포넌트를 리팩토링하여 기능성과 스타일링을 개선합니다. 새로운 컴포넌트와 스토리를 수용하기 위해 빌드 종속성과 CI 워크플로를 업데이트합니다.
새로운 기능:
개선 사항:
빌드:
CI:
Original summary in English
## Summary by Sourcery Introduce several new UI components and their corresponding Storybook stories. Refactor existing components to improve functionality and styling. Update build dependencies and CI workflow to accommodate new components and stories. New Features: - Introduce new UI components including Toast, Dialog, Tooltip, Accordion, Avatar, Input, Switch, Slider, and Textarea. - Add Storybook stories for TooltipWrapper and Button components to demonstrate their usage. Enhancements: - Refactor Badge component to include a default variant and update styling. - Replace TextInput with Textarea in TTSTableList and TTSTableGrid for better text handling. Build: - Add new dependencies for Radix UI components in package.json. CI: - Update Chromatic CI workflow to trigger on changes in the src/stories directory.