[Dashboard] migrate Box to shadcn #7125
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. |
WalkthroughThis set of changes refactors various UI components across the dashboard application, removing dependencies on Chakra UI's Box, Card, Flex, and Stat components. These are replaced with native HTML elements styled using Tailwind CSS utility classes. The Card component is reimplemented to use standard HTML and Tailwind, and related props/interfaces are updated accordingly. Accessibility improvements were added in some components. No changes are made to component logic or exported APIs except for CardProps. Changes
Sequence Diagram(s)sequenceDiagram
participant UI as UI Component
participant Card as Card (refactored)
Note right of Card: Card now uses div + Tailwind<br>for styling and outline effect
UI->>Card: Render Card with props (including outlineBorder)
alt outlineBorder enabled
Card->>Card: Wrap content with outer div for outline
Card->>Card: Render inner div with Tailwind classes
else outlineBorder disabled
Card->>Card: Render single div with Tailwind classes
end
Card-->>UI: Rendered content
Suggested reviewers
Suggested labels
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 30th. To opt out, configure ✨ 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 #7125 +/- ##
==========================================
- Coverage 55.62% 55.58% -0.04%
==========================================
Files 902 902
Lines 58135 58162 +27
Branches 4087 4086 -1
==========================================
- Hits 32337 32329 -8
- Misses 25693 25731 +38
+ Partials 105 102 -3
🚀 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: 2
🧹 Nitpick comments (8)
apps/dashboard/src/core-ui/batch-upload/batch-table.tsx (1)
4-8: Remove unused Chakra BoxProps import or refactor its usage
Since you’ve replaced the Chakra<Box as="video">wrapper with a native<video>element, theBoxPropstype and its import are no longer needed for styling. Either remove theBoxPropsimport and drop it from theFileVideosignature, or convert your styling props into appropriate HTML/video attributes or Tailwind CSS classes.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx (1)
70-71: Ensure Tailwindp-0overrides default padding
TheCardcomponent applies defaultpx-4 py-4classes. Addingp-0may not override those utilities due to Tailwind’s CSS ordering, so padding might persist. Consider using the!p-0modifier for a forced override or extendingCardwith a prop (e.g.,noPadding) to disable default padding.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx (1)
78-79: Ensure Tailwindp-0overrides default padding
As with the primary sale card, theCardcomponent’s defaultpx-4 py-4classes may override your addedp-0. To guarantee zero padding, use!p-0or introduce a boolean prop onCardto disable its built-in padding.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/ContractSplitPage.tsx (1)
147-151: Consider using Tailwind classes for max-width instead of inline styles.While the migration from Chakra's
as={Stat}andmaxWidth="2xs"works as intended, using inline styles for max-width can lead to inconsistency. Consider using Tailwind's max-width utility classes (e.g.,max-w-xs) instead.<Card className="[&>*]:m-0" key={balance.token_address} - style={{ maxWidth: "20rem" }} + className="[&>*]:m-0 max-w-xs" >apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/ContractProposalsPage.tsx (1)
64-68: Consider using Tailwind classes for max-width instead of inline styles.Similar to other components, using inline styles for max-width can lead to inconsistency. Consider using Tailwind's max-width utility classes instead for better maintainability and consistency with the design system.
<Card className="[&>*]:m-0" key={balance.address} - style={{ maxWidth: 240 }} + className="[&>*]:m-0 max-w-[240px]" >apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx (1)
541-546: Sort Tailwind classes for better maintainability.Sort the Tailwind classes alphabetically to improve code readability and maintainability.
<div className={cn( - "rounded-lg overflow-hidden cursor-pointer", + "cursor-pointer overflow-hidden rounded-lg", isSelected(nft) && "outline outline-3 outline-purple-500", )}🧰 Tools
🪛 Biome (1.9.4)
[error] 541-552: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 543-543: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx (1)
39-45: Box component successfully replaced with div and Tailwind classesThe Chakra UI
Boxcomponent has been properly replaced with a standard HTMLdivelement using appropriate Tailwind CSS utility classes.According to the static analysis hints, the CSS classes should be sorted. Consider reordering them:
-<div className="min-w-[70px] w-full md:w-1/2"> +<div className="w-full min-w-[70px] md:w-1/2">🧰 Tools
🪛 Biome (1.9.4)
[error] 39-39: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
apps/dashboard/src/tw-components/card.tsx (1)
22-37: Good implementation of outline border with pure CSSThe outline border implementation using nested divs and absolute positioning is a clean approach that replaces the Chakra UI styling method.
Note: The static analysis tool suggests sorting CSS classes on line 29.
- className="absolute inset-0 -z-10" + className="-z-10 absolute inset-0"🧰 Tools
🪛 Biome (1.9.4)
[error] 29-29: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (27)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx(7 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/ContractProposalsPage.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/ContractSplitPage.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx(3 hunks)apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx(2 hunks)apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx(6 hunks)apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx(2 hunks)apps/dashboard/src/components/contract-components/published-contract/index.tsx(2 hunks)apps/dashboard/src/components/contract-functions/contract-function.tsx(4 hunks)apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx(1 hunks)apps/dashboard/src/contract-ui/components/solidity-inputs/address-input.tsx(2 hunks)apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx(2 hunks)apps/dashboard/src/core-ui/batch-upload/batch-table.tsx(1 hunks)apps/dashboard/src/tw-components/card.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (13)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/ContractProposalsPage.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx (2)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)apps/playground-web/src/components/code/code.client.tsx (1)
CodeClient(27-54)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx (1)
apps/dashboard/src/tw-components/nft-media.tsx (1)
NFTMediaWithEmptyState(8-64)
🪛 Biome (1.9.4)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx
[error] 39-39: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
[error] 541-552: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 543-543: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
apps/dashboard/src/tw-components/card.tsx
[error] 29-29: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (43)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx (3)
42-42: Chakra UI props replaced with Tailwind className correctly.The
p={8}prop has been appropriately replaced withclassName="p-8"to align with the refactoredCardcomponent that now uses Tailwind CSS for styling.
68-68: Tailwind padding class matches semantic intent.The padding has been increased from p-8 to p-16 for the successful system metrics panel, which correctly provides more space for the detailed metrics content.
109-109: Consistent styling pattern applied correctly.The
p={8}prop has been properly replaced withclassName="p-8"for the queue metrics panel, maintaining visual consistency with the error state panel.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx (1)
647-650: Box component successfully replaced with native div element.The Chakra UI
<Box pb={5} />has been appropriately replaced with a standard<div className="pb-5" />, aligning with the PR objective of migrating away from Chakra UI components.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx (1)
145-145: Multiple Chakra UI props consolidated into a single Tailwind className.The multiple Chakra UI props (
p={0} position="relative" overflow="hidden") have been correctly replaced with equivalent Tailwind classes in a singleclassNameattribute. This approach is more maintainable and consistent with the project's migration to Tailwind CSS.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx (1)
37-37: Card styling successfully migrated to Tailwind classes.The Chakra UI props
position="relative" p={8}have been properly replaced with Tailwind CSS classes"relative p-8". This change aligns with theCardcomponent's refactoring to use Tailwind CSS instead of Chakra UI's prop-based styling.apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx (1)
95-113: Box to div transition looks goodThe conversion from Chakra UI's
Boxcomponent to a standard HTMLdivwith Tailwind CSS styling (w-[141px]) maintains the same functionality while aligning with the project's migration to shadcn.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx (3)
4-4: Import cleanup looks goodProperly removed the
Statimport from Chakra UI while keeping the necessary components.
24-27: Card styling transition looks goodSuccessfully replaced the Chakra UI
as={Stat}prop with Tailwind CSS styling. The[&>*]:m-0class effectively removes margins from all child elements, maintaining the same visual appearance as the original Stat component.
31-34: Card styling transition in map function looks goodConsistent application of the same pattern as above, replacing
as={Stat}with Tailwind's[&>*]:m-0class while correctly maintaining thekeyprop for mapped elements.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx (1)
91-91: Card styling conversion looks goodSuccessfully replaced Chakra UI prop-based styling (
p={0} position="relative" overflow="hidden") with equivalent Tailwind CSS classes (relative overflow-hidden p-0). This maintains the same visual appearance while moving toward the project's goal of using Tailwind CSS for styling.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx (1)
28-28: Flex container styling conversion looks goodSuccessfully replaced Chakra UI's
Flexcontainer properties with equivalent Tailwind CSS utility classes (flex flex-col gap-3). This maintains the same layout and spacing while aligning with the migration to Tailwind CSS styling.apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx (1)
711-719: Migration to native<div>is correct
Replacing the Chakra<Box alignSelf="flex-end">with<div className="self-end">accurately preserves thealignSelf="flex-end"behavior within the surroundingFlexcontainer. Layout and functionality remain unchanged.apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx (1)
79-102: Box-to-div migration is consistent
Converting the former<Box>wrappers to<div className="w-full md:w-[40%]">and<div className="w-full">faithfully replicates the Chakraw="full"and responsivemd:w="40%"props. The form layout andFlexstructure remain intact.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx (2)
2-2: Successfully removed the Box import from Chakra UIThe Box component import has been removed from the Chakra UI imports, keeping only the necessary Flex and Select components.
150-150: Excellent migration from Chakra's Box to native div with TailwindThe Chakra UI Box component has been successfully replaced with a standard HTML div element using equivalent Tailwind CSS classes. The responsive behavior is properly preserved:
hiddenreplacesdisplay={{ base: "none" }}md:blockreplacesmd: "block" }}w-fullreplacesw={{ base: "100%" }}md:w-1/2replacesmd: "50%" }}This change aligns with the PR's objective of migrating away from Chakra UI's Box component.
apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx (2)
5-5: Successfully removed the Box import from Chakra UIThe Box component import has been removed from the Chakra UI imports, keeping only the necessary components.
368-368: Successfully replaced empty Box components with standard divsAll empty Chakra UI Box components used as layout placeholders have been consistently replaced with standard HTML div elements. Since these are just spacer elements with no styling or content, this straightforward replacement maintains the same layout structure while reducing dependencies on Chakra UI.
Also applies to: 374-374, 387-387, 400-400, 414-414, 426-426
apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx (2)
3-3: Successfully removed the Box import from Chakra UIThe Box component import has been removed from the Chakra UI imports, keeping only the necessary InputGroup and InputRightElement components.
69-69: Excellent migration from Chakra's Box to native span with TailwindThe Chakra UI Box component has been successfully replaced with a more semantically appropriate HTML span element using equivalent Tailwind CSS classes:
hidden md:blockcorrectly replacesdisplay={{ base: "none", md: "block" }}mr-1correctly replacesmr={1}Using a span instead of Box is better for this inline text content within the button.
apps/dashboard/src/contract-ui/components/solidity-inputs/address-input.tsx (2)
4-4: Successfully removed the Box import from Chakra UIThe Box component import has been removed from the Chakra UI imports, keeping only the necessary Spinner component.
119-119: Clean replacement of Box with semantic span elementsThe Chakra UI Box components set to render as spans with monospace font have been replaced with native span elements using Tailwind's font-mono class. This improves HTML semantics while maintaining the same visual styling for displaying ENS addresses and names.
Also applies to: 121-121
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/ContractSplitPage.tsx (1)
123-123: Card styling migration looks good.The change from
as={Stat}to using a CSS class[&>*]:m-0correctly maintains the styling by zeroing out margins for all direct children of the Card component.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/ContractProposalsPage.tsx (1)
4-4: Import cleanup looks good.Properly removed the unused
Statimport while keeping the other necessary Chakra UI components.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx (5)
116-116: Clean migration to Tailwind classes.Good replacement of Chakra UI's prop-based styling with equivalent Tailwind CSS classes.
200-231: Proper Box to div conversion with appropriate Tailwind classes.The replacement of Chakra UI's Box components with standard div elements styled with Tailwind CSS classes preserves the layout and styling intentions well.
207-212: Good migration of Card props to Tailwind classes.Successfully replaced Chakra UI's bgColor, px, and py props with equivalent Tailwind CSS classes.
264-273: Clean Box to div migration with preserved layout.The replacement of Box with div elements maintains the original layout structure while transitioning to Tailwind's utility classes.
355-358: Consistent migration pattern for tooltips.The Card styling within the tooltip follows the same pattern as other Card components in this file, maintaining consistency in the migration approach.
apps/dashboard/src/components/contract-components/published-contract/index.tsx (3)
125-125: Good conversion from Chakra UI to Tailwind CSSThe Card component's styling has been successfully migrated from Chakra UI props to Tailwind CSS classes, maintaining the same visual appearance and layout structure while reducing dependencies.
131-131: Appropriate styling migration for Card componentThe Card styling has been correctly converted from Chakra UI's
as={Flex}withflexDir="column"andgapprops to equivalent Tailwind CSS utility classesflex flex-col gap-2 p-0.
144-144: Simplification of Card component stylingGood simplification by replacing Chakra UI styling props with the minimal necessary Tailwind CSS class
p-0.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx (2)
1-1: Successfully removed Box import from Chakra UIGood job removing the unnecessary
Boximport while maintaining the requiredFleximport.
46-58: Good implementation of conditional styling with cn utilityThe Box component has been properly replaced with a div element using the
cnutility for conditional class application, which is a good practice for dynamic styling.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx (2)
290-290: Successfully migrated from Chakra UI bgColor prop to Tailwind classThe Card component's background color styling has been correctly transitioned from Chakra UI's
bgColorprop to Tailwind'sbg-backgroundHighlightclass.
408-408: Comprehensive Flex styling migration to TailwindThe Card component's layout styling has been successfully migrated from multiple Chakra UI props (
as={Flex},flexDir="column",gap={4}) to a single Tailwind CSS class stringflex flex-col gap-4, which maintains the same visual appearance while simplifying the code.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx (2)
3-3: Cleaned up unnecessary Chakra UI importsGood job removing the unused
Statcomponent from imports while maintaining the necessary components.
17-17: Effectively replaced Chakra UI Stat with Tailwind stylingThe migration from
as={Stat}to using the Tailwind CSS class[&>*]:m-0effectively maintains the same styling for direct children without the Chakra UI dependency. This is an elegant solution for preserving the visual appearance while simplifying the component hierarchy.apps/dashboard/src/components/contract-functions/contract-function.tsx (2)
212-213: Chakra UI Box replaced with div + Tailwind: Good implementationThe replacement of Chakra UI's Box with a div styled using Tailwind CSS classes maintains the same functionality while aligning with the migration goal.
Also applies to: 260-260
475-476: Box to div migration looks goodThe Box component wrapper for the events list has been successfully replaced with a div using appropriate Tailwind classes for overflow control and padding.
Also applies to: 484-484
apps/dashboard/src/tw-components/card.tsx (3)
1-9: Clean migration of Card component dependenciesThe component imports and interface have been properly simplified by removing Chakra UI dependencies and extending from standard React HTML attributes.
17-20: Well-structured base classes with TailwindThe baseClasses definition using the cn utility properly combines the default Tailwind classes with any custom className passed as a prop.
38-42: Clean standard rendering pathThe standard rendering path (without outline border) has been properly simplified to use a div with Tailwind classes.
...app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx (1)
46-59:⚠️ Potential issueMissing cn import for className utility.
There's a reference to
cn()utility function, but the import statement is missing from the file.Add the following import at the top of the file:
+import { cn } from "@/lib/utils"; import { Flex } from "@chakra-ui/react"; import { CurrencySelector } from "components/shared/CurrencySelector";
🧹 Nitpick comments (1)
apps/dashboard/src/tw-components/card.tsx (1)
29-30: Fix the CSS class ordering in className propThe static analysis tool has flagged an issue with the CSS class ordering in this line.
- className="absolute inset-0 -z-10" + className="-z-10 absolute inset-0"🧰 Tools
🪛 Biome (1.9.4)
[error] 29-29: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (27)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx(7 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/ContractProposalsPage.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/ContractSplitPage.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx(3 hunks)apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx(2 hunks)apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx(6 hunks)apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx(2 hunks)apps/dashboard/src/components/contract-components/published-contract/index.tsx(2 hunks)apps/dashboard/src/components/contract-functions/contract-function.tsx(4 hunks)apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx(1 hunks)apps/dashboard/src/contract-ui/components/solidity-inputs/address-input.tsx(2 hunks)apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx(2 hunks)apps/dashboard/src/core-ui/batch-upload/batch-table.tsx(1 hunks)apps/dashboard/src/tw-components/card.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (12)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx (1)
apps/dashboard/src/tw-components/nft-media.tsx (1)
NFTMediaWithEmptyState(8-64)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/ContractProposalsPage.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx (4)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)apps/dashboard/src/@/components/ui/tooltip.tsx (1)
Tooltip(30-30)apps/playground-web/src/components/code/code.client.tsx (1)
CodeClient(27-54)packages/thirdweb/src/exports/utils.ts (1)
stringify(165-165)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx (1)
apps/dashboard/src/tw-components/card.tsx (1)
Card(11-43)
🪛 Biome (1.9.4)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
[error] 541-552: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 543-543: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx
[error] 39-39: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
apps/dashboard/src/tw-components/card.tsx
[error] 29-29: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (47)
apps/dashboard/src/tw-components/card.tsx (4)
1-9: Clean migration from Chakra UI props to standard React propsThe updated
CardPropsinterface correctly extends React's nativeHTMLAttributes<HTMLDivElement>instead of Chakra UI'sBoxProps, which aligns with the migration goal of removing Chakra UI dependencies. This allows for a more standardized component API.
11-21: Good implementation of Tailwind-based stylingThe component now uses the
cnutility function to combine base Tailwind classes with any custom classes passed through theclassNameprop. This approach maintains flexibility while providing sensible defaults for the card styling.
22-37: Well-implemented outline border featureThe outline border implementation using nested divs with absolute positioning is a good approach for creating the gradient border effect without Chakra UI. The structure with a relative container, absolute background layer, and content layer is clean and maintainable.
🧰 Tools
🪛 Biome (1.9.4)
[error] 29-29: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
38-43: Clean fallback renderingThe default rendering path (when no outline border is needed) is straightforward and passes all props correctly to the div element, maintaining component composability.
apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx (1)
711-719: Good replacement of Chakra Box with Tailwind-styled divThe replacement of
<Box alignSelf="flex-end">with<div className="self-end">is correctly implemented. The Tailwindself-endclass provides the same functionality asalignSelf="flex-end"in Chakra UI, maintaining the original layout while removing the Chakra dependency.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx (3)
42-42: Good migration from Chakra prop to Tailwind classThe change from the Chakra UI
pprop to using a Tailwindp-8class is correctly implemented and maintains the same padding size.
68-68: Good migration from Chakra prop to Tailwind classThe replacement of the Chakra UI
pprop with the Tailwindp-16class is correctly implemented and maintains the same padding size for the system metrics panel.
109-109: Good migration from Chakra prop to Tailwind classThe replacement of the Chakra UI
pprop with the Tailwindp-8class is correctly implemented and maintains the same padding size for the queue metrics panel.apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx (1)
95-114: Good replacement of Chakra Box with Tailwind-styled divThe replacement of the Chakra UI
Boxcomponent with adivusing the Tailwind classw-[141px]correctly maintains the width constraint for the image upload component. This change aligns with the project goal of migrating from Chakra UI to native HTML elements with Tailwind styling.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account-permissions/components/account-signer.tsx (1)
37-37: Styling update looks goodSuccessfully migrated from Chakra UI's prop-based styling to Tailwind CSS classes while maintaining the same visual styling.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/permissions/ContractPermissionsPage.tsx (1)
28-28: Flexbox styling migration looks goodSuccessfully converted from Chakra UI's
as={Flex}pattern to equivalent Tailwind CSS utility classes, maintaining the same layout structure.apps/dashboard/src/core-ui/batch-upload/batch-table.tsx (1)
52-52: Direct HTML element usage improves code clarityGood replacement of Chakra UI's
Box as="video"with a native HTML<video>element. This simplifies the component tree and improves readability.apps/dashboard/src/contract-ui/components/solidity-inputs/address-input.tsx (2)
4-4: Import cleanup looks goodCorrectly removed the unused Box import from Chakra UI.
119-119: Simplified DOM structure with native elementsGood conversion from Chakra UI's
Box as="span"pattern to standard HTML<span>elements with Tailwind classes. This maintains the same styling while simplifying the component structure.Also applies to: 121-121
apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx (2)
3-3: Removed unused Chakra UI Box import and streamlined imports: The removal ofBoxand retention of only the needed imports (InputGroupandInputRightElement) is correct and cleans up unused dependencies.
69-69: Use span with Tailwind classes for responsive visibility: The replacement of the Chakra<Box>with a<span>usingmr-1 hidden md:blockcorrectly replicates the responsive display and margin behavior.apps/dashboard/src/components/contract-components/published-contract/index.tsx (3)
125-128: Consistent migration to Tailwind-based Card for README section: Applyingrelative flex flex-col gap-2 p-6onCardaccurately mirrors the previous ChakraFlexprops (flexDir="column",gap={2},p={6},position: relative).
131-141: Tailwind replacement for changelog Card styling: Theflex flex-col gap-2 p-0classes correctly reflect the formeras={Flex},flexDir="column",gap={2}andp={0}usage on the changelog card.
144-152: Align Card padding for functions overview: Thep-0class on theCardremoves all padding as intended, matching the original Chakra padding props.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx (2)
290-293: Use Tailwind class for background highlight: TheclassName="bg-backgroundHighlight"onCardcorrectly replaces the ChakrabgColor="backgroundHighlight"prop and aligns with the newCardAPI.
408-414: Migrate Flex-based Card layout to Tailwind classes: ConvertingCardto useclassName="flex flex-col gap-4"preserves the originalFlexlayout (flexDir="column",gap={4}) inside the modal and removes the Chakraas={Flex}usage.apps/dashboard/src/components/contract-functions/contract-function.tsx (2)
212-213: Replace Chakra Box with div for inputs table container: Using<div className="relative overflow-x-auto rounded-t-lg p-0">aligns with the previousBoxlayout properties (overflowX,roundedTop,p={0}) and reduces dependency on Chakra.
475-485: Use div for events list container with Tailwind utility classes: The replacement ofBoxwith<div className="overflow-x-hidden px-4 pt-2">correctly preserves horizontal overflow behavior and padding for the events list.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx (5)
116-116: Migrate Card header to use Tailwind classes: TheCardwrapper withclassName="overflow-hidden p-0"cleanly replaces the previous Chakrap={0}andoverflow="hidden"props.
200-231: Convert grid columns to Tailwind divs: The<div className="col-span-3">and<div className="col-span-1" />replacements preserve the original Chakra grid layout for transaction hash cells.
264-273: Adjust block number cell with Tailwind grid classes: Changing to<div className="col-span-3">retains the grid column span and flex layout for the block number display.
314-322: Replace event data columns with Tailwind divs: Using<div className="col-span-3">and<div className="col-span-9">correctly matches the previous column spans for event name and JSON arguments.
355-358: Use Tailwind classes for tooltip Card content: TheCardwithclassName="bg-backgroundHighlight px-4 py-2"replicates the previous Chakra tooltip styling (background, padding).apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx (1)
647-650: Fallback UI updated to use native div with Tailwind classes
Replacing the Chakra UIBoxwith a<div className="pb-5" />preserves the padding-bottom styling while removing the dependency.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/platform-fees.tsx (1)
78-78: Card styling migrated to Tailwind CSS classes
Switching from Chakra UI props (p={0},position="relative",overflow="hidden") to a combinedclassNameleverages the refactoredCardcomponent’s Tailwind CSS support and ensures consistent styling.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/royalties.tsx (1)
91-91: Card styling migrated to Tailwind CSS classes
UsingclassName="relative overflow-hidden p-0"aligns with the updatedCardAPI, replacing Chakra props without altering the visual layout.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/primary-sale.tsx (1)
70-70: Card styling migrated to Tailwind CSS classes
TheCardnow receivesclassName="relative overflow-hidden p-0", removing Chakra UI style props and keeping the same styling via Tailwind.apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx (2)
5-5: Removed Chakra UI Box import
Boxis no longer used after migrating placeholders to<div />. This cleanup removes an unused import.
368-368: Replaced Chakra UIBoxplaceholders with native<div />elements
All empty placeholder components within the footer’sFlexhave been converted from<Box />to<div />, eliminating the Chakra dependency. Please verify in the browser that these<div />s maintain the intended flex-item spacing; if any layout shifts occur, consider adding appropriate flex utilities (e.g.,flex-autoorgrow).Also applies to: 374-374, 387-387, 400-400, 414-414, 426-426
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/components/metadata.tsx (1)
145-145: Chakra UI style props replaced with Tailwind CSS classes.The change from Chakra UI style props (
p={0} position="relative" overflow="hidden") to Tailwind CSS classes (className="relative overflow-hidden p-0") aligns with the PR objective of migrating away from Chakra UI's Box component.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/account-balance.tsx (3)
4-4: Removed Stat import from Chakra UI.The
Statcomponent is no longer needed as it's being replaced with a Tailwind CSS approach.
24-24: Replaced Chakra UI Stat with Tailwind CSS class.The
as={Stat}prop is replaced withclassName="[&>*]:m-0"which removes margins from all direct children, effectively mimicking the Stat component's styling behavior.
31-31: Replaced Chakra UI Stat with Tailwind CSS class in mapped components.Similar to the previous change, this replaces
as={Stat}withclassName="[&>*]:m-0"for consistent styling across all balance cards.apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx (2)
79-95: Replaced Chakra UI Box with styled div element.The Chakra UI
Boxcomponent with responsive width props has been replaced with a standarddivelement using Tailwind's responsive width classes (w-full md:w-[40%]).
96-102: Replaced Chakra UI Box with styled div element.The Chakra UI
Boxcomponent with width prop has been replaced with a standarddivelement using Tailwind's width class (w-full).apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/ContractSplitPage.tsx (2)
123-123: Replaced Chakra UI Stat with Tailwind CSS class.The
as={Stat}prop is replaced withclassName="[&>*]:m-0"which removes margins from all direct children, maintaining the same visual appearance.
147-151: Replaced Chakra UI styling with Tailwind CSS and inline style.The changes include:
- Replacing
as={Stat}withclassName="[&>*]:m-0"- Converting Chakra UI's
maxWidth="2xs"to an equivalent inline stylestyle={{ maxWidth: "20rem" }}This maintains the same visual appearance while reducing dependency on Chakra UI.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/ContractProposalsPage.tsx (1)
64-68: Properly migrated from Chakra to Tailwind styling.The Card component has been updated to use Tailwind CSS styling instead of Chakra UI's
as={Stat}prop. The added className[&>*]:m-0ensures all child elements have no margin, and the inline style sets the maximum width to maintain the original layout.apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimerSelection.tsx (1)
150-150: Successfully replaced Box with standard div element.The Chakra UI Box component has been properly replaced with a standard div element using equivalent Tailwind CSS classes for responsive behavior.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx (1)
39-46: Box components successfully replaced with divs.The Chakra UI Box components have been properly replaced with standard div elements using Tailwind CSS classes for responsive styling. The functionality is maintained with the responsive widths properly translated to Tailwind equivalents.
🧰 Tools
🪛 Biome (1.9.4)
[error] 39-39: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx (2)
3-3: Approved: Simplified Chakra UI importsThe import statement has been cleaned up by removing the explicit import of
Statcomponent, which is no longer needed after the refactoring.
17-17: Good implementation of Chakra UI to Tailwind migrationThe
as={Stat}prop has been removed and replaced with a Tailwind CSS utility class[&>*]:m-0that achieves the same styling effect by removing margins from all direct children. This change is consistent with the PR objective of migrating from Chakra UI components to standard HTML elements with Tailwind styling.
...app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
Outdated
Show resolved
Hide resolved
size-limit report 📦
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx (1)
542-546: CSS classes should be sorted.According to Biome linting rules, the CSS classes should be sorted alphabetically.
className={cn( - "rounded-lg overflow-hidden cursor-pointer", + "cursor-pointer overflow-hidden rounded-lg", isSelected(nft) && "outline outline-3 outline-purple-500", )}🧰 Tools
🪛 Biome (1.9.4)
[error] 543-543: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx (1)
apps/dashboard/src/tw-components/nft-media.tsx (1)
NFTMediaWithEmptyState(8-64)
🪛 Biome (1.9.4)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
[error] 543-543: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Build Packages
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx (2)
541-570: Great job migrating from Chakra UI Box to div with Tailwind CSS!The Box component has been successfully replaced with a standard div element using Tailwind CSS for styling. I appreciate the inclusion of keyboard accessibility features as suggested in previous reviews.
🧰 Tools
🪛 Biome (1.9.4)
[error] 543-543: These CSS classes should be sorted.
Unsafe fix: Sort the classes.
(lint/nursery/useSortedClasses)
552-562: Well-implemented accessibility features!The addition of keyboard navigation support with
onKeyDown,tabIndex,role="button", andaria-pressedmakes the component fully accessible to keyboard users, which is excellent for maintaining web accessibility standards.
jnsdls
force-pushed
the
codex/replace-chakra-box-with-shadcn-and-tailwindcss
branch
from
cf1a965 to
558155a
Compare
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. This stack of pull requests is managed by Graphite. Learn more about stacking. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/tw-components/card.tsx (1)
22-37: Effective implementation of the outline border feature.The nested div structure with minimal inline styles is a good approach for implementing the gradient border effect. Using absolute positioning with z-index ensures the border appears behind the content without affecting the layout.
One minor suggestion would be to consider extracting the outline border into a separate component if this pattern is used elsewhere in the codebase.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx(3 hunks)apps/dashboard/src/tw-components/card.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/dashboard/src/tw-components/card.tsx (5)
1-2: Solid import updates for the Tailwind migration.The addition of the
cnutility import and the switch to type-only React import are appropriate changes for this migration. Thecnutility is a common pattern when using Tailwind CSS to combine conditional class names.
4-4: Good simplification of the component props interface.The change from Chakra UI's
BoxPropsto standard ReactHTMLAttributes<HTMLDivElement>is a good choice that reduces framework dependencies and improves maintainability.
12-15: Props destructuring looks good.Explicit destructuring of
classNamemakes it easier to combine with default classes, and the spread operator captures remaining props properly.
17-20: Clean implementation of base styling with Tailwind.Using the
cnutility to combine Tailwind classes is the right approach. The classes chosen provide equivalent styling to the previous Chakra implementation while making the styling more explicit and maintainable.
39-41: Clean implementation of the base case.The direct rendering of a div with the baseClasses is straightforward and effective.
jnsdls
force-pushed
the
codex/replace-chakra-box-with-shadcn-and-tailwindcss
branch
from
558155a to
80026c6
Compare
jnsdls
force-pushed
the
codex/replace-chakra-box-with-shadcn-and-tailwindcss
branch
from
80026c6 to
7ad4fee
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx (1)
2-5: Consider extending Chakra UI migration to remaining components.While the Card component has been migrated to use Tailwind CSS, there are still several Chakra UI components in use (Flex, Radio, Tooltip). For a more complete migration and to maintain consistency, consider replacing these with their HTML/Tailwind equivalents in a future update.
For example, the Flex component could be replaced with:
- <Flex flexDirection="row" justifyContent="space-between"> + <div className="flex flex-row justify-between">And similarly for other Chakra components.
Also applies to: 53-63
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx(3 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/components/webhooks-table.tsx(1 hunks)apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx(1 hunks)apps/dashboard/src/core-ui/batch-upload/batch-table.tsx(3 hunks)apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx(3 hunks)apps/dashboard/src/tw-components/card.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (3)
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/account/components/deposit-native.tsx
- apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/Inputs/ClaimPriceInput.tsx
- apps/dashboard/src/tw-components/card.tsx
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-form.tsx
- apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Unit Tests
- GitHub Check: Size
- GitHub Check: Lint Packages
🔇 Additional comments (3)
apps/dashboard/src/core-ui/batch-upload/lazy-mint-form/select-option.tsx (3)
32-32: Good migration to Tailwind CSS for Card background.The change to use a Tailwind class for background styling is consistent with the PR objective of migrating away from Chakra UI props to Tailwind CSS.
43-50: Excellent implementation of Tailwind styling for the Card component.The migration from Chakra UI props to Tailwind CSS classes for the Card component is well done. The conditional styling for disabled and active states has been properly implemented using the
cnutility.
88-88: Good consistency in Tailwind styling for tooltip Card.The styling approach is consistent with the earlier Card component, maintaining a unified styling pattern throughout the component.
Summary
<Box>with divs across dashboardCardcomponent to TailwindTesting
pnpm biome check --apply(fails: The number of diagnostics exceeds the number allowed by Biome)pnpm test(fails: spawn anvil ENOENT)PR-Codex overview
This PR focuses on updating the styling of various
Cardcomponents across multiple files in the project by replacing inline styles with Tailwind CSS classes, enhancing consistency and maintainability.Detailed summary
bgColorandpprops with Tailwind CSS classes forCardcomponents.Boxcomponents todivwith appropriate Tailwind classes.Cardstyling to useclassNamefor layout and design consistency.Summary by CodeRabbit