[Dashboard] migrate external links form #7156
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes refactor two components to replace Chakra UI components with custom or alternative UI primitives and Tailwind CSS classes. The updates affect layout, styling, component imports, and button structure while maintaining the original functionality and exported interfaces. Changes
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ 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 (
|
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. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7156 +/- ##
=======================================
Coverage 55.66% 55.66%
=======================================
Files 904 904
Lines 58400 58400
Branches 4116 4116
=======================================
Hits 32510 32510
Misses 25784 25784
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: 0
🧹 Nitpick comments (1)
apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx (1)
70-79: Enhanced button accessibility with redundant screen reader textThe migration from
IconButtontoButtonwithvariant="ghost"andsize="icon"is correct. However, there's redundant accessibility text:<Button variant="ghost" size="icon" aria-label="Remove row" onClick={() => remove(index)} className="self-end" > <TrashIcon className="size-5" /> - <span className="sr-only">Remove row</span> </Button>The
aria-labelalready provides the accessible name, making thesr-onlyspan redundant.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx(3 hunks)apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx(3 hunks)
👮 Files not reviewed due to content moderation or server errors (2)
- apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx
- apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (30)
apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx (11)
1-1: Import path looks correct for shadcn/ui migration.The import change from "tw-components" to "@/components/ui/button" aligns with the shadcn/ui component structure and the PR's migration objectives.
32-35: Good semantic HTML usage with proper Tailwind styling.The migration from Chakra UI components to semantic HTML elements (
<h3>and<p>) with appropriate Tailwind classes maintains the visual hierarchy while improving semantic markup. The text styling classes are appropriate for the content hierarchy.
45-46: Button variant and styling updated correctly for shadcn/ui.The props have been properly updated:
- Removed Chakra-specific props (
colorScheme,borderRadius)- Added shadcn/ui variant prop (
variant="outline")- Applied Tailwind classes for gap spacing (
className="gap-2")This maintains the visual appearance while using the new component library.
54-54: Icon positioning correctly updated for shadcn/ui Button component.The
PlusIconhas been moved from theleftIconprop (Chakra UI pattern) to a child element with proper sizing classes (className="size-5"), which is the correct pattern for shadcn/ui Button components.
1-1: LGTM: Clean import migration to shadcn/uiThe import change from
"tw-components"to"@/components/ui/button"aligns with the PR objective of migrating to shadcn/ui components.
32-35: Excellent semantic HTML improvementsThe migration from Chakra UI components to semantic HTML elements (
<h3>and<p>) with Tailwind classes improves accessibility and follows web standards. The styling maintains visual consistency while providing better semantic structure.
45-46: Well-executed Button component migrationThe prop changes correctly adapt from Chakra UI to shadcn/ui:
colorScheme="primary"andborderRadius="md"→variant="outline"leftIconprop → child element with proper sizing- Added
className="gap-2"for consistent spacingThe icon is properly sized with
className="size-5"and maintains accessibility.Also applies to: 54-54
1-1: LGTM: Clean import migration to shadcn/ui.The import change from
"tw-components"to"@/components/ui/button"correctly aligns with the shadcn/ui migration pattern.
32-35: LGTM: Proper semantic HTML with appropriate styling.The replacement of Chakra UI components with semantic HTML elements (
<h3>and<p>) styled with Tailwind CSS is well-implemented. The heading hierarchy and text styling are appropriate for the content structure.
45-46: LGTM: Correct button prop migration.The props have been properly updated for the shadcn/ui Button component:
variant="outline"replaces the previous Chakra stylingclassName="gap-2"provides appropriate spacing for the icon and text
54-54: LGTM: Icon properly moved to child element.The PlusIcon is correctly moved from the
leftIconprop to a child element with proper sizing (size-5class), which is the expected pattern for shadcn/ui Button components.apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx (19)
1-4: Import statements correctly updated for shadcn/ui migration.All imports have been properly changed to use shadcn/ui components:
- Button, Input, Label, and Separator from the appropriate ui paths
- This aligns with the PR's migration objectives
20-25: Layout structure and form labeling improved.The migration to native div elements with Tailwind classes maintains the layout while:
- Using semantic HTML structure
- Proper accessibility with
htmlForattributes linking labels to inputs- Good responsive design with
md:flex-rowbreakpoint
27-27: Input accessibility properly implemented.The
idattribute correctly matches thehtmlForattribute in the corresponding Label component, ensuring proper accessibility for screen readers.
31-41: Error message rendering correctly preserved.The error handling logic has been maintained while updating the UI:
- Same form validation logic using
getFieldState- Error messages now use semantic
<p>elements with proper styling- Styling uses
text-destructive-textwhich should be consistent with the design system
43-46: Consistent form field structure maintained.The second form field (URL) follows the same pattern as the first field with proper labeling and accessibility attributes.
48-48: Input ID properly linked to label.The URL input field correctly implements the same accessibility pattern with matching
idandhtmlForattributes.
60-68: Error handling consistency maintained.The URL field error handling follows the same pattern as the name field, ensuring consistent user experience and proper error display.
70-79: Button component properly migrated with accessibility improvements.The remove button has been correctly updated:
- Uses shadcn/ui Button with appropriate variant ("ghost") and size ("icon")
- Icon properly positioned as child element
- Enhanced accessibility with both
aria-labelandsr-onlyspan for screen readers- Proper self-alignment with
self-endclass
81-81: Separator component correctly replaced.The Chakra UI
Dividerhas been properly replaced with the shadcn/uiSeparatorcomponent, maintaining the visual separation between form sections.
1-4: Clean migration to shadcn/ui importsAll imports have been correctly updated to use shadcn/ui components from the
@/components/ui/namespace, maintaining consistency with the overall migration strategy.
20-42: Excellent accessibility and semantic improvements for name fieldThe refactor includes several positive changes:
- Semantic HTML structure with proper
<div>layout- Accessibility enhancement with
htmlForandidattributes linking labels to inputs- Consistent error message styling with
text-destructive-text text-sm- Maintained form validation logic while improving structure
43-69: Consistent implementation for URL fieldThe URL field follows the same excellent pattern as the name field with proper accessibility attributes and error handling. The validation logic for URL format checking is preserved correctly.
81-82: LGTM: Separator component migrationThe replacement of
DividerwithSeparatorcomponent aligns with the shadcn/ui migration and maintains the visual separation between form entries.
1-4: LGTM: Complete import migration to shadcn/ui.The imports have been properly updated to use shadcn/ui components:
- Button, Input, Label, and Separator components from the correct paths
- Consistent with the migration pattern across the codebase
23-25: Excellent accessibility improvements.The addition of proper
htmlForattributes on labels linked to correspondingidattributes on inputs significantly improves accessibility. Thecapitalizeclass provides consistent styling for the labels.Also applies to: 44-46
27-27: LGTM: Proper input ID association.The
idattributes on inputs (externalLinks.${index}.nameandexternalLinks.${index}.url) correctly link to their respective labels, maintaining form accessibility standards.Also applies to: 48-48
31-41: LGTM: Error handling logic preserved.The error message display logic has been successfully migrated from Chakra UI's
FormErrorMessageto semantic<p>elements with appropriate styling (text-destructive-text text-sm). The form validation and error retrieval logic remains intact.Also applies to: 60-68
70-79: LGTM: Button migration with accessibility enhancement.The button has been properly updated for shadcn/ui:
variant="ghost"andsize="icon"for appropriate stylingclassName="self-end"for proper layout positioning- Added
<span className="sr-only">for enhanced screen reader support
81-81: LGTM: Separator component migration.The replacement of Chakra UI's
Dividerwith shadcn/ui'sSeparatorcomponent maintains the visual separation between form sections.
size-limit report 📦
|
Merge activity
|
## Summary
- refactor contract publish resources inputs
- use shadcn/ui Button, Input, and Separator
- apply tailwind classes
## Testing
- `pnpm biome check --apply apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsx`
- `pnpm test` *(fails: spawn anvil ENOENT)*
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on updating the UI components in the `ExternalLinksFieldset` and `ExternalLinksInput` files to improve the styling and structure using custom components instead of those from `tw-components` and `@chakra-ui/react`.
### Detailed summary
- Replaced `Heading` and `Text` with custom HTML elements in `ExternalLinksFieldset`.
- Updated button styles in `ExternalLinksFieldset` to use `variant="outline"` and added a `className`.
- Refactored `ExternalLinksInput` to use custom components (`Button`, `Input`, `Label`, `Separator`) instead of Chakra UI components.
- Changed layout structure in `ExternalLinksInput` to use `div` elements with flexbox for better styling.
- Added error message handling below input fields in `ExternalLinksInput`.
> ✨ 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
- **Style**
- Updated form and button components to use new UI primitives and Tailwind CSS classes for a refreshed appearance.
- Improved accessibility by linking input labels and error messages with appropriate HTML attributes.
- **Refactor**
- Replaced Chakra UI components with custom or alternative UI components, maintaining existing functionality and validation logic.
<!-- 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
9623ca1 to
97b8926
Compare
graphite-app
bot
deleted the
codex/migrate-dashboard-to-schadcn/ui-and-tailwindcss
branch
Summary
Testing
pnpm biome check --apply apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx apps/dashboard/src/components/contract-components/contract-publish-form/external-links-input.tsxpnpm test(fails: spawn anvil ENOENT)PR-Codex overview
This PR focuses on updating the
ExternalLinksFieldsetandExternalLinksInputcomponents to enhance their UI by replacing components fromtw-componentswith custom styled components, improving accessibility, and adjusting the layout for better responsiveness.Detailed summary
HeadingandTextwith custom HTML elements (h3andp) inExternalLinksFieldset.colorSchemetovariantand added aclassNamefor better layout.ExternalLinksInputto use custom components (Label,Input,Separator).pelements for displaying validation errors.divandflexfor responsive design instead ofFlexandFormControl.Summary by CodeRabbit
Style
Refactor