[Dashboard] replace Chakra fieldset with shadcn #7143
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 component refactors the network selection UI by replacing Chakra UI and native HTML elements with custom select components from a local UI library and Tailwind CSS for styling. The event handling is updated to use the custom select's API, but the form logic and component signature remain unchanged. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NetworksFieldset
participant CustomSelect
participant FormContext
User->>NetworksFieldset: Interacts with network select field
NetworksFieldset->>CustomSelect: Renders select options
User->>CustomSelect: Selects network option
CustomSelect-->>NetworksFieldset: onValueChange(selectedNetwork)
NetworksFieldset->>FormContext: setValue("network", selectedNetwork)
FormContext-->>NetworksFieldset: Updates form state
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 #7143 +/- ##
=======================================
Coverage 55.62% 55.62%
=======================================
Files 902 902
Lines 58190 58190
Branches 4098 4098
=======================================
Hits 32369 32369
Misses 25716 25716
Partials 105 105
🚀 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
🧹 Nitpick comments (1)
apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx (1)
26-64: Consider adding ARIA attributes for improved accessibilityWhile migrating from Chakra UI to shadcn/ui, consider enhancing accessibility by adding appropriate ARIA attributes, especially for the select component.
- <div className="flex flex-col gap-2" data-required> + <div className="flex flex-col gap-2" data-required aria-required="true">And for the select component:
- <SelectTrigger className="w-full"> + <SelectTrigger className="w-full" aria-label="Select deployment networks">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx (5)
2-9: Imports aligned with shadcn/ui migrationThe additions of shadcn UI select components and the
cnutility function properly support the migration from Chakra UI to shadcn/ui with Tailwind CSS.
26-27: Container replacement follows Tailwind best practicesThe Chakra
Flexcomponents have been properly replaced with semantic HTML elements using Tailwind classes. Thecnutility appropriately handles conditional spacing based on thefromStandardprop.
33-48: Select implementation follows shadcn/ui patternThe shadcn/ui Select component is properly implemented with all necessary sub-components (Trigger, Value, Content, Items). The event handler has been correctly updated from the native
onChangeto shadcn'sonValueChange, maintaining the same form update logic.
49-51: Container structure properly maintainedThe div structure properly maintains separation between the select control and the conditional network selector.
62-64: Proper closing tags for container structureThe closing tags are properly placed to maintain the same component structure hierarchy.
| </div> | ||
| <div className="flex flex-col gap-2" data-required> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify form validation behavior
The replacement of Chakra's FormControl with a div that has a data-required attribute may affect form validation behavior.
🏁 Script executed:
#!/bin/bash
# Check if there are custom styles or handlers for data-required attribute
rg "data-required" --type css
rg "data-required" --type ts --type tsx -A 5 -B 5Length of output: 107
🏁 Script executed:
#!/bin/bash
# Search for CSS targeting [data-required] in CSS/SCSS/SASS files
rg "\[data-required\]" -g '*.{css,scss,sass}' -A5 -B5
# Search for any occurrences of data-required in TypeScript/TSX files
rg "data-required" -g '*.{ts,tsx}' -A5 -B5Length of output: 1550
Fix required: restore form validation semantics
Replacing Chakra’s FormControl with a plain <div data-required> removes built-in handling of required fields (ARIA attributes, label/error associations, styling). Please update networks-fieldset.tsx to re-introduce proper form control semantics:
• Wrap the select in Chakra’s FormControl isRequired instead of a <div data-required>
• Ensure you import FormControl from @chakra-ui/react
• Alternatively, at minimum add aria-required to the actual input/select component
Suggested diff:
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx
@@
- </div>
- <div className="flex flex-col gap-2" data-required>
+ </div>
+ <FormControl isRequired className="flex flex-col gap-2">And at the top of the file:
+ import { FormControl } from "@chakra-ui/react";This will preserve ARIA semantics and Chakra’s error/required styling.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In
apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx
around lines 31 to 32, replace the plain div with data-required attribute by
wrapping the select element inside Chakra UI's FormControl component with the
isRequired prop. Import FormControl from @chakra-ui/react at the top of the
file. This will restore proper form validation semantics, including ARIA
attributes and styling. Alternatively, if not using FormControl, add
aria-required to the select element to maintain accessibility.
size-limit report 📦
|
Merge activity
|
Migrates the NetworksFieldset component from Chakra UI to shadcn/ui and Tailwind.
- Drop Chakra Flex, FormControl and Select
- Use shadcn Select primitives with tailwind classes
- Adjust layout with Tailwind via `cn`
Fixes #0
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on refactoring the `NetworksFieldset` component in `networks-fieldset.tsx` to use a new `Select` component from the UI library, improving styling and functionality while maintaining the same overall behavior.
### Detailed summary
- Replaced `Flex` and `FormControl` components with a new `div` structure and `Select` component.
- Updated the `Select` component to use `SelectTrigger`, `SelectContent`, and `SelectItem`.
- Changed event handlers from `onChange` to `onValueChange` for better state management.
- Maintained layout and functionality with updated class names for styling.
> ✨ 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 network selection field to use a custom select component and Tailwind-based layout for a more consistent user interface.
- **Style**
- Improved the visual appearance and spacing of the network selection field.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
deleted the
codex/migrate-dashboard-component-to-schadcn/ui-and-tailwindcss
branch
graphite-app
bot
force-pushed
the
codex/migrate-dashboard-component-to-schadcn/ui-and-tailwindcss
branch
from
d996087 to
f9b609e
Compare
Migrates the NetworksFieldset component from Chakra UI to shadcn/ui and Tailwind.
cnFixes #0
PR-Codex overview
This PR focuses on refactoring the
NetworksFieldsetcomponent in thecontract-publish-formto use a newSelectcomponent from a UI library, enhancing the styling and structure of the form.Detailed summary
FlexandFormControlcomponents withdivelements and a newSelectcomponent.onChangetoonValueChangefor theSelect.SelectItemwithinSelectContent.Summary by CodeRabbit