Skip to content

[Dashboard] migrate external links form #7156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

jnsdls
Copy link
Member

@jnsdls jnsdls commented May 24, 2025

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)

PR-Codex overview

This PR focuses on updating the ExternalLinksFieldset and ExternalLinksInput components to enhance their UI by replacing components from tw-components with custom styled components, improving accessibility, and adjusting the layout for better responsiveness.

Detailed summary

  • Replaced Heading and Text with custom HTML elements (h3 and p) in ExternalLinksFieldset.
  • Changed button styling from colorScheme to variant and added a className for better layout.
  • Updated the structure of ExternalLinksInput to use custom components (Label, Input, Separator).
  • Improved error message handling with p elements for displaying validation errors.
  • Adjusted layout to use div and flex for responsive design instead of Flex and FormControl.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

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.
    • Refined button styling and layout for consistency and clarity.
  • Refactor

    • Replaced Chakra UI components with custom or alternative UI components, maintaining existing functionality and validation logic.

@jnsdls jnsdls requested review from a team as code owners May 24, 2025 22:03
@jnsdls jnsdls added the codex label May 24, 2025 — with ChatGPT Connector
Copy link

changeset-bot bot commented May 24, 2025

⚠️ No Changeset found

Latest commit: 97b8926

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

vercel bot commented May 24, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
thirdweb-www ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 28, 2025 3:55pm
4 Skipped Deployments
Name Status Preview Comments Updated (UTC)
docs-v2 ⬜️ Skipped (Inspect) May 28, 2025 3:55pm
login ⬜️ Skipped (Inspect) May 28, 2025 3:55pm
thirdweb_playground ⬜️ Skipped (Inspect) May 28, 2025 3:55pm
wallet-ui ⬜️ Skipped (Inspect) May 28, 2025 3:55pm

@vercel vercel bot temporarily deployed to Preview – docs-v2 May 24, 2025 22:04 Inactive
@vercel vercel bot temporarily deployed to Preview – wallet-ui May 24, 2025 22:04 Inactive
@vercel vercel bot temporarily deployed to Preview – thirdweb_playground May 24, 2025 22:04 Inactive
@vercel vercel bot temporarily deployed to Preview – login May 24, 2025 22:04 Inactive
Copy link
Contributor

coderabbitai bot commented May 24, 2025

Walkthrough

The 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

File(s) Change Summary
.../contract-components/contract-publish-form/external-links-fieldset.tsx Replaced Chakra UI components (Button, Heading, Text) with custom/UI components and native HTML elements; updated styling, button props, and icon placement.
.../contract-components/contract-publish-form/external-links-input.tsx Refactored to use custom/UI components and Tailwind CSS for layout and styling; replaced Chakra UI form controls, labels, buttons, and error messages.

Suggested labels

Dashboard

Suggested reviewers

  • joaquim-verges
  • MananTank

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9623ca1 and 97b8926.

📒 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 skipped from review as they are similar to previous changes (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
✨ Finishing Touches
  • 📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

graphite-app bot commented May 24, 2025

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • merge-queue - adds this PR to the back of the merge queue
  • hotfix - for urgent hot fixes, skip the queue and merge this PR next

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.

@github-actions github-actions bot added the Dashboard Involves changes to the Dashboard. label May 24, 2025
Copy link

codecov bot commented May 24, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 55.66%. Comparing base (655df03) to head (97b8926).
Report is 1 commits behind head on main.

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           
Flag Coverage Δ
packages 55.66% <ø> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 text

The migration from IconButton to Button with variant="ghost" and size="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-label already provides the accessible name, making the sr-only span redundant.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5139857 and 9623ca1.

📒 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 PlusIcon has been moved from the leftIcon prop (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/ui

The 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 improvements

The 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 migration

The prop changes correctly adapt from Chakra UI to shadcn/ui:

  • colorScheme="primary" and borderRadius="md"variant="outline"
  • leftIcon prop → child element with proper sizing
  • Added className="gap-2" for consistent spacing

The 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 styling
  • className="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 leftIcon prop to a child element with proper sizing (size-5 class), 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 htmlFor attributes linking labels to inputs
  • Good responsive design with md:flex-row breakpoint

27-27: Input accessibility properly implemented.

The id attribute correctly matches the htmlFor attribute 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-text which 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 id and htmlFor attributes.


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-label and sr-only span for screen readers
  • Proper self-alignment with self-end class

81-81: Separator component correctly replaced.

The Chakra UI Divider has been properly replaced with the shadcn/ui Separator component, maintaining the visual separation between form sections.


1-4: Clean migration to shadcn/ui imports

All 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 field

The refactor includes several positive changes:

  • Semantic HTML structure with proper <div> layout
  • Accessibility enhancement with htmlFor and id attributes 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 field

The 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 migration

The replacement of Divider with Separator component 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 htmlFor attributes on labels linked to corresponding id attributes on inputs significantly improves accessibility. The capitalize class provides consistent styling for the labels.

Also applies to: 44-46


27-27: LGTM: Proper input ID association.

The id attributes on inputs (externalLinks.${index}.name and externalLinks.${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 FormErrorMessage to 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" and size="icon" for appropriate styling
  • className="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 Divider with shadcn/ui's Separator component maintains the visual separation between form sections.

Copy link
Contributor

github-actions bot commented May 24, 2025

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
thirdweb (esm) 61.75 KB (0%) 1.3 s (0%) 179 ms (+107.93% 🔺) 1.5 s
thirdweb (cjs) 344.4 KB (0%) 6.9 s (0%) 611 ms (-0.57% 🔽) 7.5 s
thirdweb (minimal + tree-shaking) 5.69 KB (0%) 114 ms (0%) 57 ms (+1178.95% 🔺) 171 ms
thirdweb/chains (tree-shaking) 531 B (0%) 11 ms (0%) 19 ms (+1047.57% 🔺) 30 ms
thirdweb/react (minimal + tree-shaking) 19.54 KB (0%) 391 ms (0%) 103 ms (+861.5% 🔺) 493 ms

Copy link
Contributor

graphite-app bot commented May 28, 2025

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 graphite-app bot force-pushed the codex/migrate-dashboard-to-schadcn/ui-and-tailwindcss branch from 9623ca1 to 97b8926 Compare May 28, 2025 15:47
@vercel vercel bot temporarily deployed to Preview – wallet-ui May 28, 2025 15:47 Inactive
@vercel vercel bot temporarily deployed to Preview – login May 28, 2025 15:47 Inactive
@vercel vercel bot temporarily deployed to Preview – docs-v2 May 28, 2025 15:47 Inactive
@vercel vercel bot temporarily deployed to Preview – thirdweb_playground May 28, 2025 15:47 Inactive
@graphite-app graphite-app bot merged commit 97b8926 into main May 28, 2025
24 checks passed
@graphite-app graphite-app bot deleted the codex/migrate-dashboard-to-schadcn/ui-and-tailwindcss branch May 28, 2025 15:56
@vercel vercel bot temporarily deployed to Production – wallet-ui May 28, 2025 15:56 Inactive
@vercel vercel bot temporarily deployed to Production – thirdweb_playground May 28, 2025 15:56 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
codex Dashboard Involves changes to the Dashboard.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants