refactor: swap out radix with reka #1271
Conversation
WalkthroughThis pull request refactors multiple UI components within the unraid-ui repository. It updates property types (e.g., BadgeProps, ButtonProps, SheetContentProps) to use centralized variant types and standardizes import sources by replacing references to radix-vue with reka-ui. Several components also receive consistent formatting changes (e.g., using single quotes) and minor adjustments in prop definitions. Additionally, unused bindings (such as teleportTarget in Sidebar) are removed, package dependencies are updated, and TypeScript configuration is expanded to include Vue files. Changes
Sequence Diagram(s)sequenceDiagram
participant SC as SheetContent.vue
participant UT as useTeleport
participant DP as DialogPortal
SC->>UT: Call useTeleport()
UT-->>SC: Return teleportTarget
SC->>DP: Pass teleportTarget as "to" prop
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms (4)
🔇 Additional comments (2)
🪧 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 (1)
unraid-ui/src/components/common/tabs/Tabs.vue (1)
2-3: Refactor imports to use 'reka-ui'.
The updated import statements correctly replace the old dependency ('radix-vue') with 'reka-ui'. Please verify thatTabsRoot,useForwardPropsEmits, and their associated types (TabsRootEmitsandTabsRootProps) meet the expected interface and behavior to ensure seamless integration across the tabs components.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
📒 Files selected for processing (24)
unraid-ui/src/components/common/badge/Badge.vue(1 hunks)unraid-ui/src/components/common/badge/badge.variants.ts(1 hunks)unraid-ui/src/components/common/scroll-area/ScrollArea.vue(2 hunks)unraid-ui/src/components/common/scroll-area/ScrollBar.vue(2 hunks)unraid-ui/src/components/common/sheet/SheetContent.vue(3 hunks)unraid-ui/src/components/common/sheet/sheet.variants.ts(1 hunks)unraid-ui/src/components/common/stepper/Stepper.vue(1 hunks)unraid-ui/src/components/common/stepper/StepperDescription.vue(1 hunks)unraid-ui/src/components/common/stepper/StepperIndicator.vue(1 hunks)unraid-ui/src/components/common/stepper/StepperItem.vue(1 hunks)unraid-ui/src/components/common/stepper/StepperSeparator.vue(1 hunks)unraid-ui/src/components/common/stepper/StepperTitle.vue(1 hunks)unraid-ui/src/components/common/stepper/StepperTrigger.vue(1 hunks)unraid-ui/src/components/common/tabs/Tabs.vue(1 hunks)unraid-ui/src/components/common/tabs/TabsContent.vue(1 hunks)unraid-ui/src/components/common/tabs/TabsList.vue(1 hunks)unraid-ui/src/components/common/tabs/TabsTrigger.vue(1 hunks)unraid-ui/src/components/common/tooltip/Tooltip.vue(1 hunks)unraid-ui/src/components/common/tooltip/TooltipContent.vue(1 hunks)unraid-ui/src/components/common/tooltip/TooltipProvider.vue(1 hunks)unraid-ui/src/components/common/tooltip/TooltipTrigger.vue(1 hunks)unraid-ui/src/components/form/label/Label.vue(1 hunks)unraid-ui/src/components/form/switch/Switch.vue(1 hunks)web/components/Notifications/Sidebar.vue(1 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
unraid-ui/src/components/common/badge/badge.variants.ts (1)
unraid-ui/src/components/common/badge/index.ts (1)
badgeVariants(2-2)
unraid-ui/src/components/common/sheet/sheet.variants.ts (1)
unraid-ui/src/components/common/sheet/index.ts (1)
sheetVariants(9-9)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (41)
unraid-ui/src/components/form/switch/Switch.vue (4)
2-2: Import reordering looks goodThe import of
cnfrom the utils library has been properly moved to the top.
7-9: Library dependency updated correctlyThe import types are now coming from 'reka-ui' instead of 'radix-vue' as per the refactoring objective. The component maintains its functionality while using the new library.
10-10: Import grouping and ordering adjustmentThe
vueimports have been moved after the component-specific imports, maintaining a consistent import organization pattern.
12-12: Quote style standardizationUpdated the quote style from double quotes to single quotes for the
HTMLAttributes['class']type annotation, improving consistency with the rest of the codebase.unraid-ui/src/components/common/tabs/TabsList.vue (2)
2-4: Import source changed from radix-vue to reka-uiThe component's import source has been updated from "radix-vue" to "reka-ui" as part of the broader refactoring effort mentioned in the PR objective. The imports have also been reordered following a pattern of local utilities first, then third-party components, followed by Vue utilities.
6-6: Quote style consistency update in props definitionThe quote style in the type definition has been changed from double quotes to single quotes (
HTMLAttributes["class"]→HTMLAttributes['class']). This appears to be a style consistency update that aligns with the project's coding standards.unraid-ui/src/components/common/tabs/TabsContent.vue (2)
3-3: Package dependency updated from radix-vue to reka-ui.The import source for TabsContent and TabsContentProps has been changed from radix-vue to reka-ui, which aligns with the PR objective to swap out radix with reka.
6-6: Style formatting update.The props definition has been updated to use single quotes instead of double quotes for the class attribute type, maintaining consistency with the project's code style.
unraid-ui/src/components/common/tabs/TabsTrigger.vue (2)
2-4: Import source changed from radix-vue to reka-ui.The component now imports from 'reka-ui' instead of 'radix-vue', aligned with the PR objective to swap out radix with reka. Import statements have also been standardized with single quotes and slightly reordered.
6-6: Updated props definition style.The props definition now uses single quotes for the HTMLAttributes['class'] type annotation, maintaining consistency with the import statement formatting.
unraid-ui/src/components/common/tooltip/Tooltip.vue (1)
7-7: Import source updated from radix-vue to reka-ui.The change follows the PR objective of switching from radix-vue to reka-ui while maintaining the same component functionality.
unraid-ui/src/components/common/tooltip/TooltipTrigger.vue (2)
2-2: Import source updated from radix-vue to reka-ui.The import source has been successfully updated to use reka-ui instead of radix-vue.
4-4: Added semicolon for consistency.A semicolon was added to the end of the defineProps statement, improving code style consistency.
unraid-ui/src/components/common/tooltip/TooltipProvider.vue (2)
2-2: Import source updated from radix-vue to reka-ui.The import source has been successfully updated to use reka-ui instead of radix-vue.
4-4: Added semicolon for consistency.A semicolon was added to the end of the defineProps statement, improving code style consistency.
unraid-ui/src/components/common/tooltip/TooltipContent.vue (4)
2-3: Reordered imports for better organization.Local imports (useTeleport and cn) have been moved to the top, which is a common practice for import organization.
4-10: Updated import source from radix-vue to reka-ui.The import source has been successfully updated to use reka-ui instead of radix-vue, consistent with the other tooltip components.
11-11: Reorganized Vue imports.Vue-specific imports have been moved after the component imports, improving code organization.
17-20: Reformatted props definition for better readability.The withDefaults call has been reformatted into a more concise style while maintaining the same functionality.
unraid-ui/src/components/form/label/Label.vue (2)
2-4: Import Adjustments: Transition toreka-uiis correctly applied.The updated import statement for
LabelandLabelPropsnow coming from'reka-ui'(instead of"radix-vue") meets the PR objectives and maintains consistency across the project. The reordering forcn,computed, andHTMLAttributesis clear and follows project style guidelines.
6-6: Props Definition Syntax Update.Switching to single quotes in the type declaration (
HTMLAttributes['class']) improves consistency and aligns with the project's coding style.unraid-ui/src/components/common/sheet/SheetContent.vue (1)
2-2: Improved type safety and teleport handlingThe changes to this component improve both type safety and teleport handling:
- Imported
useTeleportcomposable to manage teleport targets dynamically- Updated prop types to use the
SheetVariantsinterface instead of string literals- The
DialogPortalnow uses the dynamically determinedteleportTargetinstead of a static propThis refactoring centralizes teleport target management and enforces better type checking through the sheet variants.
Also applies to: 14-14, 17-18, 25-26, 47-47
unraid-ui/src/components/common/sheet/sheet.variants.ts (1)
1-1: Added type exports and standardized string formattingThis change adds a proper type export for sheet variants and standardizes string formatting to single quotes. The exported
SheetVariantstype enables better type inference when using sheet variants throughout the application.Also applies to: 4-25, 27-27
unraid-ui/src/components/common/badge/badge.variants.ts (1)
1-1: Added type exports and standardized string formattingSimilar to the sheet variants, this change exports a
BadgeVariantstype and standardizes string formatting to single quotes. The exported type will improve type checking and code completion when using badge variants in components.Also applies to: 4-35, 39-39
web/components/Notifications/Sidebar.vue (1)
42-42: Simplified teleport handlingThe component no longer explicitly uses
teleportTarget, aligning with the changes inSheetContent.vuewhich now handles teleport targets internally. The component still callsdetermineTeleportTarget()duringprepareToViewNotifications(), ensuring proper teleport functionality.unraid-ui/src/components/common/scroll-area/ScrollArea.vue (3)
3-3: Library dependency updated from radix-vue to reka-uiThe import source has been changed from 'radix-vue' to 'reka-ui', aligning with the PR objective to swap out radix with reka.
7-7: Quote style standardized to single quotesThe type declaration for HTMLAttributes["class"] has been updated to use single quotes for consistency.
17-17: Template formatting improvedThe ScrollAreaRoot component line has been condensed for better readability.
unraid-ui/src/components/common/scroll-area/ScrollBar.vue (4)
3-3: Library dependency updated from radix-vue to reka-uiThe import source has been changed from 'radix-vue' to 'reka-ui', aligning with the PR objective to swap out radix with reka.
7-7: Quote style standardized to single quotesThe type declaration for HTMLAttributes["class"] has been updated to use single quotes for consistency.
9-9: Quote style standardized to single quotesThe default value for orientation has been updated to use single quotes.
27-28: Template conditional expressions simplifiedThe orientation class conditional expressions have been reformatted for better readability.
unraid-ui/src/components/common/badge/Badge.vue (2)
4-4: Added import for centralized badge variantsImported badgeVariants and BadgeVariants type from a dedicated variants file, improving type organization.
7-8: Improved type references for variant and sizeReplaced inline string literal unions with references to the centralized BadgeVariants type. This improves maintainability by centralizing variant definitions and ensures consistency across the application.
unraid-ui/src/components/common/stepper/StepperIndicator.vue (1)
3-4: Successfully transitioned from radix-vue to reka-uiThe imports have been updated to use reka-ui instead of radix-vue. The change is clean and the fact that no other modifications were needed suggests good API compatibility between the libraries.
unraid-ui/src/components/common/stepper/StepperTitle.vue (1)
3-4: Successfully transitioned from radix-vue to reka-uiThe import statements have been updated from radix-vue to reka-ui. The change is consistent with the other components and maintains the same functionality.
unraid-ui/src/components/common/stepper/StepperItem.vue (1)
3-4: Successfully transitioned from radix-vue to reka-uiThe import statements have been cleanly updated. The component continues to use the same API, suggesting that reka-ui maintains compatible interfaces with radix-vue.
unraid-ui/src/components/common/stepper/StepperDescription.vue (1)
3-4: Successfully transitioned from radix-vue to reka-uiThe import statements have been updated correctly. The consistent pattern across all stepper components indicates a well-executed library transition.
unraid-ui/src/components/common/stepper/StepperTrigger.vue (1)
3-4:Details
❓ Verification inconclusive
Imports updated from radix-vue to reka-ui correctly.
The change from radix-vue to reka-ui is consistent with the PR objectives. Please ensure that reka-ui provides the same interface for StepperTrigger and useForwardProps to maintain compatibility.
🏁 Script executed:
#!/bin/bash # Check if the reka-ui package exports the same components and types rg -p "export.*StepperTrigger|export.*useForwardProps" --type js --type ts node_modules/reka-uiLength of output: 158
Action Required: Confirm ‘reka-ui’ Package Availability and Interface Compatibility
The updated imports from radix-vue to reka-ui look correct. However, the initial verification script did not locate a "node_modules/reka-ui" directory. Please manually verify that the "reka-ui" package is correctly installed (or otherwise available) and that it exports both StepperTrigger and useForwardProps with the expected interface to maintain compatibility.
unraid-ui/src/components/common/stepper/StepperSeparator.vue (1)
3-4: Imports updated from radix-vue to reka-ui correctly.The import changes are consistent with the PR objectives of swapping radix-vue with reka-ui. The component functionality remains unchanged.
unraid-ui/src/components/common/stepper/Stepper.vue (1)
3-4:Details
✅ Verification successful
Imports updated from radix-vue to reka-ui correctly.
The import changes for the Stepper root component match the PR objectives and are consistent with the changes in the other stepper components.
🌐 Web query:
What is reka-ui and how does it compare to radix-vue?💡 Result:
Reka UI is an open-source UI component library for Vue.js that prioritizes accessibility, customization, and developer experience. Originally rebranded from Radix Vue in its v2 evolution, it serves as a modern successor while maintaining core principles from both Radix UI and its Vue implementation[1][8].
Key Features of Reka UI
- Accessibility-focused: Implements WAI-ARIA patterns with built-in keyboard navigation and screen reader support[1][18]
- Unstyled components: Provides fully customizable base components without imposed styling[1][5]
- Vue 3 optimized: Built for Composition API with TypeScript support and tree-shaking[5][12]
- Enhanced component library: Offers 55+ primitives compared to Radix Vue's original set[2][5]
- Modern tooling: Integrates with Tailwind CSS v4 and introduces Tailwind Variants for dynamic styling[2][5]
Comparison with Radix Vue
Feature Radix Vue Reka UI Branding Community-led Vue port Official rebranded version Component Count ~30 primitives 55+ primitives[2][5] Styling System Basic Tailwind Tailwind Variants[5] Form Component APIs v-model:checkedsyntaxSimplified v-model[4]Nuxt Integration Separate module Built-in Nuxt support[4][12] Filter Controls Basic implementation Redesigned Combobox API[4] CSS Variables --radix-*prefix--reka-*prefix[4]Performance Standard bundle Improved tree-shaking[1] Key Improvements in Reka UI
- Expanded component library: Adds new patterns like TagsInput and enhanced Combobox functionality[6][11]
- Modernized APIs:
- Simplified form component bindings (e.g.,
v-modelinstead ofv-model:checked)[4]- Improved SSR support and state management[6]
- TypeScript integration: Full type safety with auto-completion for props and themes[5]
- Active development: Regular updates addressing component-specific issues and feature requests[6][17]
Migration Path
Developers can transition from Radix Vue through:
- Package replacement:
npm add reka-ui[4]- Global search/replace for imports and CSS variables[4]
- API adjustments for form controls and Combobox components[4][6]
Reka UI maintains Radix Vue's commitment to accessibility while offering expanded capabilities through its Vue 3-first design and modern tooling integrations[1][5][8]. For new Vue projects, it represents the recommended evolution of the Radix Vue concept with improved developer ergonomics and component depth.
Citations:
- 1: https://reka-ui.com/docs/overview/introduction
- 2: https://masterdaweb.com/en/blog/nuxt-ui-3-whats-new-in-this-new-version/
- 3: https://www.radix-vue.com/overview/introduction
- 4: https://reka-ui.com/docs/guides/migration
- 5: https://ui.nuxt.com/getting-started
- 6: https://github.com/unovue/reka-ui/releases
- 7: https://www.radix-vue.com/components/dropdown-menu
- 8: https://app.daily.dev/posts/the-new-identity-of-radix-vue-reka-ui-1o2bmi41s
- 9: https://reka.js.org/docs/introduction
- 10: https://www.youtube.com/watch?v=6d8z0P7jXuA
- 11: https://www.shadcn-vue.com/docs/changelog
- 12: https://nuxt.com/modules/reka-ui
- 13: https://www.radix-vue.com/components/select
- 14: https://www.shadcn-vue.com
- 15: https://publications.reka.ai/reka-core-tech-report.pdf
- 16: https://www.radix-vue.com/components/toast
- 17: nuxt/ui#2259
- 18: https://reka-ui.com
- 19: https://www.radix-vue.com
- 20: https://bsky.app/profile/haoqun.dev/post/3lio4vixur22z
Reka UI migration confirmed:
The update inunraid-ui/src/components/common/stepper/Stepper.vuenow correctly imports both types and components from the rebranded Reka UI library. This change aligns with the PR objectives, reflects the modernized API and improved feature set of Reka UI compared to the legacy Radix Vue, and is consistent with the updates seen across other stepper components.
elibosley
left a comment
elibosley
left a comment
There was a problem hiding this comment.
Let's chat about that type change if you'd like. This looks great otherwise!
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
unraid-ui/package.json(1 hunks)unraid-ui/src/components/common/button/Button.vue(1 hunks)unraid-ui/src/components/common/button/button.variants.ts(1 hunks)web/components/Notifications/Sidebar.vue(1 hunks)web/package.json(0 hunks)
💤 Files with no reviewable changes (1)
- web/package.json
🧰 Additional context used
🧬 Code Definitions (1)
unraid-ui/src/components/common/button/button.variants.ts (2)
unraid-ui/src/index.ts (1)
buttonVariants(92-92)unraid-ui/src/components/common/button/index.ts (1)
buttonVariants(2-2)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Build Web App
- GitHub Check: Build API
- GitHub Check: Cloudflare Pages
🔇 Additional comments (9)
web/components/Notifications/Sidebar.vue (2)
42-42: Simplified teleport handlingThe removal of
teleportTargetfrom the destructuring assignment simplifies the component by eliminating explicit teleportation handling. This is consistent with the PR's objective of migrating from radix-vue to reka-ui, which appears to handle teleportation internally.
129-132: Improved SheetContent implementationThe
:toprop has been removed from SheetContent, which is consistent with the teleport handling changes. The new reka-ui implementation appears to manage teleportation internally, making the component usage cleaner.unraid-ui/src/components/common/button/button.variants.ts (3)
1-1: Appropriate import addition.Adding the
VariantPropsimport is necessary for the new type export at the end of the file.
4-4: Consistent string formatting.Changed double quotes to single quotes for string literals throughout the file, maintaining consistency with the project's style.
Also applies to: 8-13, 16-19, 23-24
29-29: Good type export addition.Adding the
ButtonVariantstype export improves type safety by providing a centralized type definition for button variants and sizes that can be used throughout the application.unraid-ui/src/components/common/button/Button.vue (4)
2-4: Well-organized imports.Imports are now logically ordered (internal utilities, Vue core, local modules) and include the new
ButtonVariantstype.
7-8: Improved type safety.Replacing string literal types with
ButtonVariantsreferences creates a single source of truth for button variants and sizes, making the component more maintainable.
13-14: Consistent string formatting.Changed double quotes to single quotes in default values, maintaining consistency with the rest of the codebase.
18-18: Simplified return statement.The computed property's return statement is now more concise without sacrificing readability.
mdatelle
force-pushed
the
refactor/switch-to-reka-ui
branch
from
1b5f53a to
4063583
Compare
…rror with devtools
|
This plugin has been deployed to Cloudflare R2 and is available for testing. |
Summary by CodeRabbit
Refactor
Chores
Style
Tests