[Dashboard] migrate CurrencySelector to shadcn #7137
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
WalkthroughThe Changes
Suggested labels
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
✨ 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 #7137 +/- ##
=======================================
Coverage 55.63% 55.63%
=======================================
Files 902 902
Lines 58190 58190
Branches 4098 4098
=======================================
Hits 32373 32373
Misses 25712 25712
Partials 105 105
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/components/shared/CurrencySelector.tsx (1)
94-95: Type assertion can be improved.The current type assertion uses a biome-ignore comment to suppress the lint warning, but the code can be improved to be more type-safe.
- onChange({ - target: { value: editCustomCurrency }, - // biome-ignore lint/suspicious/noExplicitAny: FIXME - } as any); + onChange({ + target: { value: editCustomCurrency }, + currentTarget: { value: editCustomCurrency }, + preventDefault: () => {}, + stopPropagation: () => {}, + } as React.ChangeEvent<HTMLSelectElement>);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/src/components/shared/CurrencySelector.tsx(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (9)
apps/dashboard/src/components/shared/CurrencySelector.tsx (9)
1-10: Imports aligned with shadcn/ui migration.The imports have been appropriately updated to use shadcn/ui components and utilities, replacing the previous Chakra UI imports. The use of the
cnutility from@/lib/utilswill help with conditional class name merging.
16-27: Props interface simplified and made more explicit.The
CurrencySelectorPropsinterface has been properly updated to no longer extendSelectPropsfrom Chakra UI, instead explicitly defining the required props. TheonChangecallback type maintains compatibility with the previous implementation by mimicking a native select event.
29-40: Component declaration updated with new props.The component has been changed from a React.FC to a named function export, which is better for debugging. The new props (
classNameandisDisabled) are properly destructured and will be used for styling and disabling the component.
107-128: Custom currency UI migrated to Tailwind CSS.The "add custom currency" UI has been successfully migrated from Chakra UI to use Tailwind CSS classes and shadcn/ui components. The styling maintains the original layout with a left-to-right arrangement of a back button, input field, and save button.
133-139: Container styling updated with Tailwind and conditional classes.The container has been changed from a Chakra
Flexto adivwith Tailwind classes. Thecnutility is correctly used to conditionally apply margins and merge with the optionalclassNameprop.
140-158: Select component implementation updated to shadcn/ui pattern.The Select component has been properly updated to use the shadcn/ui pattern. The event handling has been migrated from
onChangetoonValueChange, with a synthetic event created to maintain compatibility with the existing interface.
149-156: Event handling migration preserves backward compatibility.The event handling has been properly migrated to use shadcn/ui's
onValueChangewhile maintaining backward compatibility by creating a synthetic event that mimics the structure of a native select event.
159-196: Select component UI structure updated to compound pattern.The Select component has been properly updated to use shadcn/ui's compound component pattern with
SelectTrigger,SelectValue,SelectContent, andSelectItemsubcomponents. The value normalization logic and conditional rendering of options remain intact.
1-199: Overall migration to shadcn/ui accomplished successfully.The CurrencySelector component has been successfully migrated from Chakra UI to shadcn/ui while preserving the core functionality. The component still handles custom currencies, default currencies, and payment selector modes as before, with the UI updated to use Tailwind CSS classes and shadcn/ui components.
size-limit report 📦
|
Merge activity
|
## Summary
- migrate shared CurrencySelector from Chakra UI to shadcn/ui
- use tailwindcss classes and Radix-based Select
## Checklist
- [x] `pnpm biome check apps/dashboard/src/components/shared/CurrencySelector.tsx --apply`
- [ ] `pnpm test` *(fails: spawn anvil ENOENT)*
<!-- start pr-codex -->
---
## PR-Codex overview
This PR refactors the `CurrencySelector` component to improve its structure and styling. It replaces certain UI elements with a new `Select` component, enhances props for better functionality, and updates the layout for a more modern appearance.
### Detailed summary
- Changed `CurrencySelectorProps` to include new props: `onChange`, `className`, `isDisabled`.
- Refactored the component to use a `Select` from the UI library instead of native HTML elements.
- Updated event handling to utilize `onValueChange` for the `Select`.
- Improved styling and layout for better user experience.
- Replaced `Flex` components with `div` and applied conditional class names for styling.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Updated the CurrencySelector component to use custom UI components and Tailwind CSS for styling, replacing Chakra UI elements.
- Simplified the component's props and adjusted event handling for the new select interface.
- Maintained existing functionality and behavior while improving consistency with the app's design system.
<!-- 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
4e5af56 to
317211a
Compare
graphite-app
bot
deleted the
codex/migrate-dashboard-to-schadcn/ui-and-tailwindcss
branch
Summary
Checklist
pnpm biome check apps/dashboard/src/components/shared/CurrencySelector.tsx --applypnpm test(fails: spawn anvil ENOENT)PR-Codex overview
This PR focuses on refactoring the
CurrencySelectorcomponent for better usability and styling by integrating new UI components and improving structure.Detailed summary
CurrencySelectorPropsinterface to include new props:onChange,className,isDisabled.CurrencySelectorfrom a functional component to a standard function.Flexcomponents withdivand added Tailwind CSS classes for better styling.onValueChangefor theSelectcomponent.Selectcomponents.Summary by CodeRabbit