[Dashboard] migrate SelectOption to shadcn #7194
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
WalkthroughThe Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SelectOption
participant ToolTipLabel
User->>SelectOption: Render with props (active, disabled, etc.)
SelectOption->>ToolTipLabel: Show tooltip if disabled or info present
SelectOption-->>User: Render card with selection state, title, description
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (8)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7194 +/- ##
==========================================
- Coverage 55.63% 55.62% -0.01%
==========================================
Files 908 908
Lines 58531 58531
Branches 4130 4128 -2
==========================================
- Hits 32561 32556 -5
- Misses 25864 25869 +5
Partials 106 106
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
🔇 Additional comments (6)
apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx (6)
1-2: LGTM: Clean import migration to shadcn/ui componentsThe imports have been properly updated to use shadcn/ui components (
CardandToolTipLabel) instead of Chakra UI equivalents.
7-7: LGTM: Interface extension provides proper HTML attributesExtending
React.HTMLAttributes<HTMLDivElement>is the correct approach for allowing standard HTML div attributes to be passed through to the component.
27-27: LGTM: Props parameter rename aligns with HTML div semanticsThe rename from
stackPropstodivPropsbetter reflects that these props are now spread onto a div element rather than a Chakra Stack component.
30-38: LGTM: Conditional tooltip implementation is well-structuredThe ToolTipLabel wrapper with conditional disabled tooltip content maintains the original functionality while using the new component architecture.
69-80: LGTM: Info tooltip implementation maintains functionalityThe info icon tooltip has been properly migrated to use ToolTipLabel with consistent styling using the muted card design.
41-46: LGTM: Tailwind classes provide equivalent stylingThe responsive width (
md:w-[350px]) and conditional styling for disabled and active states properly replicate the original Chakra UI behavior with Tailwind CSS.
apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx
Show resolved
Hide resolved
size-limit report 📦
|
Merge activity
|
Migrated the `SelectOption` component in the dashboard batch upload flow to use shadcn/ui primitives and Tailwind classes.
- Replaced Chakra `Tooltip`, `Flex`, and `Radio` usage with `ToolTipLabel` and Tailwind markup
- Switched to shadcn/ui `Card`
- Removed dependency on Chakra typography components
- Updated component props to extend HTML attributes
Fixes migration step towards removing Chakra.
<!-- start pr-codex -->
---
## PR-Codex overview
This PR updates the `SelectOption` component to improve its structure and styling. It replaces the `Tooltip` from `@chakra-ui/react` with a custom `ToolTipLabel`, modifies the layout and styling, and enhances the handling of props.
### Detailed summary
- Changed `SelectOptionProps` to extend `React.HTMLAttributes<HTMLDivElement>`.
- Replaced `Tooltip` with `ToolTipLabel`.
- Updated the card styling and structure.
- Modified the layout for `Radio` to a custom implementation.
- Adjusted class names for better styling consistency.
- Changed the rendering of `name` and `description` to use HTML elements directly.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Updated the selection option component with custom UI elements and Tailwind CSS styling, removing dependencies on Chakra UI and previous component libraries.
- Improved accessibility and styling for tooltips, cards, and selection indicators.
- Maintained original functionality and interactions with a refreshed look and feel.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
codex/migrate-dashboard-to-schadcn/ui-and-tailwindcss
branch
from
df35d0c to
1f42ad2
Compare
graphite-app
bot
deleted the
codex/migrate-dashboard-to-schadcn/ui-and-tailwindcss
branch
Migrated the
SelectOptioncomponent in the dashboard batch upload flow to use shadcn/ui primitives and Tailwind classes.Tooltip,Flex, andRadiousage withToolTipLabeland Tailwind markupCardFixes migration step towards removing Chakra.
PR-Codex overview
This PR focuses on refactoring the
SelectOptioncomponent in theselect-option.tsxfile. It improves the component's structure by updating props, changing tooltip implementations, and modifying the layout for better styling and accessibility.Detailed summary
SelectOptionPropsto extendReact.HTMLAttributes<HTMLDivElement>.TooltipwithToolTipLabelfor better tooltip handling.divand updated class names for styling.disabledandinfoTextstates for improved clarity and user experience.Summary by CodeRabbit