Chakra UIの廃止とTailwind CSSへの移行 #1040
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Updated FileUploadField, FormField, and FundInformationForm components to use common form elements from '@/components/common'. - Replaced Chakra UI components with standard HTML elements where appropriate for consistency. - Enhanced styling for various components to improve UI consistency and responsiveness. - Introduced a new Toast context and hook for better toast notification management. - Updated various pages to utilize the new toast notifications and improved layout structure. - Refactored radio button implementations in AddModal and EditModal components for better readability and maintainability.
- Consolidated import statements for better readability in AddBudgetManagementModal, BudgetManagement, DeleteBudgetManagementModal, EditBudgetManagementModal, and other components. - Enhanced error handling to provide clearer messages in case of failures in AddBudgetManagementModal, DeleteBudgetManagementModal, and EditBudgetManagementModal. - Updated RadioGroup and SearchSelect components to improve type safety and ensure proper prop handling. - Replaced <img> tags with <Image> from 'next/image' for better performance and optimization in DetailPage2 and other components. - Added missing dependencies to useEffect hooks to prevent potential stale closures in various components. - Removed unnecessary variables and improved function signatures for clarity in multiple files. - Updated API handler in receipts.tsx for better error handling and code organization.
This comment was marked as resolved.
This comment was marked as resolved.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
TkymHrt
changed the base branch from
develop
to
refactor/yama/upgrade-tailwind-v4
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
There was a problem hiding this comment.
Pull request overview
This PR migrates the application from Chakra UI to Tailwind CSS and addresses ESLint warnings by fixing dependency arrays, removing unused variables, and improving type definitions.
Changes:
- Removed Chakra UI dependencies and replaced with custom Tailwind CSS components
- Implemented custom Toast provider to replace Chakra's useToast
- Fixed ESLint warnings including useEffect dependencies, unused variables, and type definitions
- Created new common components (FormControl, FormLabel, FormErrorMessage, RadioGroup, Spinner, etc.)
- Updated layout system with improved responsive design
Reviewed changes
Copilot reviewed 75 out of 76 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json, pnpm-lock.yaml | Removed Chakra UI and related dependencies |
| .eslintrc.json | Removed tailwindcss plugin configuration |
| src/hooks/useToast.tsx | New custom toast implementation replacing Chakra's useToast |
| src/components/common/* | New form components, RadioGroup, Spinner migrated from Chakra |
| src/pages/_app.tsx | Replaced ChakraProvider with ToastProvider |
| src/components/layout/MainLayout/* | Refactored layout with Tailwind CSS |
| Various component files | Updated to use Tailwind CSS utilities instead of Chakra components |
| Various page files | Added eslint-disable comments for intentionally empty dependency arrays |
Files not reviewed (1)
- view/next-project/pnpm-lock.yaml: Language not supported
view/next-project/src/components/fund_information/FundInformationTable.tsx
Show resolved
Hide resolved
Comment on lines
47
to
50
| useEffect(() => { | ||
| setCurrentUser(user); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); |
There was a problem hiding this comment.
The eslint-disable comment for react-hooks/exhaustive-deps is suppressing a valid warning. The user state should be included in the dependency array. If you want to run this effect only once on mount, consider using a ref to track whether the effect has run, or restructure the code to properly handle the dependency.
Comment on lines
+298
to
+310
| <Radio | ||
| key={designer.value} | ||
| name='design' | ||
| value={String(designer.value)} | ||
| checked={data.design === designer.value} | ||
| onChange={(val) => { | ||
| setDesign({ | ||
| target: { value: val }, | ||
| } as React.ChangeEvent<HTMLInputElement>); | ||
| }} | ||
| > | ||
| {designer.label} | ||
| </Radio> |
There was a problem hiding this comment.
The Radio component's value prop is typed as string, but the onChange handler in the parent component expects a numeric value. The conversion String(designer.value) and the subsequent parsing back via target.value could lead to type mismatches. Consider ensuring consistent typing between the Radio component and its usage.
Deploying finansu with
|
| Latest commit: |
073b032
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://055cc406.finansu.pages.dev |
| Branch Preview URL: | https://refactor-yama-remove-chakra.finansu.pages.dev |
…names in PurchaseReportPage
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
対応Issue
https://nut-m-e-g.slack.com/archives/C020WQ3GY07/p1768051810911529
概要
画面スクリーンショット等
テスト項目
備考
変更ファイル数が多いです・・・