Add Radio Group #973
Add Radio Group #973
Conversation
🦋 Changeset detectedLatest commit: a5ad235 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
apps/docs/src/components/demos/radio-group/radio-group.tsxOops! Something went wrong! :( ESLint: 9.17.0 Error: Cannot find package '/node_modules/@tszhong0411/eslint-config/dist/index.js' imported from /eslint.config.mjs WalkthroughA new Radio Group component has been introduced to the Changes
Sequence DiagramsequenceDiagram
participant User
participant RadioGroup
participant RadioGroupItem
User->>RadioGroup: Select Radio Group
RadioGroup->>RadioGroupItem: Manage Selection
RadioGroupItem-->>RadioGroup: Update Selected Item
RadioGroup-->>User: Display Selected Option
Poem
Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/ui/src/radio-group.tsx (1)
20-34: Consider enhancing keyboard focus styles.While the focus styles are implemented, consider adding a darker ring color for better contrast in dark mode.
- 'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2', + 'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-gray-400',apps/docs/src/components/demos/radio-group/radio-group.tsx (1)
5-18: Add accessibility improvements and event handling demo.Consider these enhancements to make the demo more comprehensive:
- Add aria-label to the RadioGroup for better accessibility
- Include an onChange handler to demonstrate state management
- <RadioGroup defaultValue='comfortable'> + <RadioGroup + defaultValue='comfortable' + aria-label='View density' + onValueChange={(value) => console.log('Selected:', value)} + >.changeset/twenty-baboons-protect.md (1)
1-5: Enhance the changeset description for better changelog clarity.While the patch version bump is appropriate, consider expanding the description to include:
- Brief overview of the component's purpose
- Key features (e.g., accessibility, customization)
- Dependencies added (Radix UI integration)
--- '@tszhong0411/ui': patch --- -Add Radio Group +Add Radio Group component + +- Introduces a new accessible Radio Group component using Radix UI primitives +- Enables single selection from predefined choices +- Includes customization options and keyboard navigation support
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
.changeset/twenty-baboons-protect.md(1 hunks)apps/docs/src/app/ui/components/radio-group.mdx(1 hunks)apps/docs/src/components/demos/radio-group/radio-group.tsx(1 hunks)apps/docs/src/config/links.ts(1 hunks)packages/ui/package.json(1 hunks)packages/ui/src/index.ts(1 hunks)packages/ui/src/radio-group.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/docs/src/app/ui/components/radio-group.mdx
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: TypeScript
- GitHub Check: Knip
- GitHub Check: Spelling
- GitHub Check: ESLint
🔇 Additional comments (5)
packages/ui/src/radio-group.tsx (1)
7-13: LGTM! Well-structured RadioGroup component.The implementation properly extends Radix UI's RadioGroup primitive while maintaining type safety and allowing for customization through className props.
packages/ui/src/index.ts (1)
34-34: LGTM! Proper export configuration.The radio-group export is correctly added and maintains alphabetical ordering.
apps/docs/src/config/links.ts (1)
145-148: LGTM! Proper navigation configuration.The Radio Group component link is correctly added with consistent formatting and proper alphabetical placement.
packages/ui/package.json (2)
48-48: LGTM! Radix UI dependency addition looks good.The
@radix-ui/react-radio-groupdependency follows the same versioning pattern as other Radix UI components in the package.
Line range hint
71-74: Verify React and Next.js version compatibility.The peer dependencies specify unreleased versions:
react: "^19"(current stable is 18.x)next: "^15"(current stable is 14.x)Please verify if these are intentional or need to be adjusted to current stable versions.
✅ Verification successful
These version requirements are intentional and documented
The changelog shows these are deliberate upgrades made through multiple PRs:
- Next.js 15 upgrade was implemented in PR Upgrade dependencies #878 and later updated to 15.1.3
- React 19 and its type definitions were upgraded as part of the same coordinated update
- Changes are actively maintained with recent updates (e.g., PR chore(deps-dev): bump @types/react-dom from 19.0.2 to 19.0.3 #956 for @types/react-dom)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if these versions are mentioned in other workspace packages echo "Checking React version usage across workspace:" fd -e json package.json -x jq -r 'select(.peerDependencies != null) | select(.peerDependencies.react != null) | .name + ": " + .peerDependencies.react' echo -e "\nChecking Next.js version usage across workspace:" fd -e json package.json -x jq -r 'select(.peerDependencies != null) | select(.peerDependencies.next != null) | .name + ": " + .peerDependencies.next'Length of output: 586
Script:
#!/bin/bash # Check root package.json dependencies echo "Root package.json dependencies:" jq -r '.dependencies // {} | with_entries(select(.key | test("react|next")))' package.json echo -e "\nRoot package.json devDependencies:" jq -r '.devDependencies // {} | with_entries(select(.key | test("react|next")))' package.json # Check actual dependencies in ui package echo -e "\nUI package dependencies:" jq -r '.dependencies // {} | with_entries(select(.key | test("react|next")))' packages/ui/package.json echo -e "\nUI package devDependencies:" jq -r '.devDependencies // {} | with_entries(select(.key | test("react|next")))' packages/ui/package.json # Look for documentation about versions echo -e "\nChecking for version-related documentation:" fd -e md -x grep -l -i "react.*19\|next.*15" {} \;Length of output: 2381
Script:
#!/bin/bash # Check changelog entries for version updates echo "UI Package Changelog entries:" grep -A 5 -B 5 "react.*19\|next.*15" packages/ui/CHANGELOG.md echo -e "\nREADME mentions:" grep -A 5 -B 5 "react.*19\|next.*15" README.md echo -e "\nPackage versions in workspace:" fd -e json package.json -x jq -r 'select(.version != null) | .name + ": v" + .version'Length of output: 3979
Summary by CodeRabbit
Release Notes
New Features
Documentation
Dependencies
@radix-ui/react-radio-grouplibrary to support the new componentThe Radio Group component enhances the user interface by providing a clean, accessible way to make single selections.