WIP: covert to chakra 3.x #490
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hello @rm-hull, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
Summary of Changes
Hello! gemini-code-assist here, providing a summary of this pull request. This PR is a work in progress aimed at upgrading the project's UI library from Chakra UI v2.x to v3.x. This is a significant undertaking as it involves breaking changes in the library's API and internal structure, requiring updates across various components and the application's main entry point. The changes reflect the adoption of Chakra UI v3's new component composition model and utility hooks.
Highlights
- Chakra UI v3 Upgrade: The core of this PR is the upgrade of
@chakra-ui/reactfrom version 2.10.9 to 3.19.1. This major version bump introduces breaking changes and a new approach to building UI components, moving towards a more primitive-based system. - Dependency Updates and Removals: Several dependencies related to the previous Chakra UI version and its underlying libraries (
@emotion/styled,framer-motion) have been removed or updated. New dependencies likenext-themesand@chakra-ui/clihave been added to support the new v3 architecture and development workflow. - Refactored UI Component Structure: New files (
color-mode.tsx,provider.tsx,toaster.tsx,tooltip.tsx) have been introduced under a newuidirectory. These files implement core UI functionalities (color mode, global provider setup, toaster, tooltip) using the new Chakra UI v3 component patterns, indicating a shift in how these features are integrated. - Component API Adjustments: Existing components, specifically the
Toolbar, have been updated to align with Chakra UI v3 API changes, such as renaming props (isOpentoopen,isDisabledtodisabled) and adjusting layout props (spacingtogap). - Application Initialization Changes: The main application entry point (
main.tsx) has been modified to use the new Chakra UI v3createSystemandChakraProvidersetup, replacing the olderextendThemeandColorModeScriptmethods.
Changelog
Click here to see the changelog
- package.json
- Updated
@chakra-ui/reactfrom ^2.10.9 to ^3.19.1 (line 17) - Removed
@emotion/styled(line 20) - Removed
framer-motion(line 28) - Added
next-themes(line 32) - Added
@chakra-ui/clito devDependencies (line 49)
- Updated
- src/components/Toolbar.tsx
- Changed
useDisclosurepropertyisOpentoopen(line 37) - Changed
HStackspacing propspacingtogap(lines 55, 62) - Changed
IconButtondisabled propisDisabledtodisabled(lines 93, 104)
- Changed
- src/components/ui/color-mode.tsx
- Added new file for color mode implementation using
next-themesand Chakra UI v3 components.
- Added new file for color mode implementation using
- src/components/ui/provider.tsx
- Added new file for the main Chakra UI v3 provider setup.
- src/components/ui/toaster.tsx
- Added new file for the Chakra UI v3 toaster component.
- src/components/ui/tooltip.tsx
- Added new file for the Chakra UI v3 Tooltip component.
- src/main.tsx
- Removed old Chakra UI imports (
ColorModeScript,createLocalStorageManager,extendTheme) (line 1) - Added new Chakra UI imports (
createSystem,defaultConfig) (line 1) - Imported
ColorModeProviderfrom new ui component (line 12) - Commented out old color mode manager initialization (line 23)
- Replaced
extendThemewithcreateSystemfor theme configuration (lines 26-35) - Replaced old
ChakraProvidersetup with newChakraProviderandColorModeProvider(lines 40-41) - Commented out old
ColorModeScript(line 39)
- Removed old Chakra UI imports (
- tsconfig.json
- Added
@/*path alias to compilerOptions (lines 22-24)
- Added
- yarn.lock
- Added
@ark-ui/reactand its dependencies (lines 18-84) - Updated
@babel/runtimereference (line 1544) - Added
@chakra-ui/cliand its dependencies (lines 1651-1680) - Updated
@chakra-ui/reactversion and dependencies (lines 1682-1700) - Removed
@chakra-ui/anatomy,@chakra-ui/hooks,@chakra-ui/theme-tools,@chakra-ui/themeentries (lines 1583-1663) - Updated
@emotion/is-prop-validreference (line 1784) - Updated
@emotion/serializereference (line 1821) - Removed
@emotion/styledentry (lines 1772-1791) - Updated
@emotion/use-insertion-effect-with-fallbacksreference (line 1848) - Updated
@emotion/utilsreference (line 1857) - Added various
@esbuildplatform-specific dependencies (lines 1885-2395) - Added
@floating-uidependencies (core,dom,utils) (lines 2516-2541) - Added
@internationalizeddependencies (date,number) (lines 2580-2597) - Updated
@jridgewell/gen-mappingreference (line 2628) - Added
@pandacss/is-valid-prop(lines 2728-2734) - Removed
@popperjs/coreentry (lines 2474-2480) - Added
@sindresorhus/merge-streams(lines 3053-3059) - Added
@swc/helpers(lines 3088-3095) - Added
@types/cli-tableand@types/debug(lines 3190-3204) - Added
@types/ms(lines 3264-3270) - Added
@visulima/boxen(lines 3721-3728) - Added various
@zag-jsdependencies (lines 3859-4681) - Added
binary-extensions(lines 5090-5096) - Updated
bracesreference (line 5116) - Added
bundle-n-require(lines 5139-5148) - Added
chokidar(lines 5279-5297) - Added
cli-table(lines 5305-5313) - Added
colors(lines 5337-5343) - Added
commanderversions (lines 5353-5365) - Updated
copy-to-clipboardreference (line 5409) - Updated
csstypereference (line 5470) - Added
data-uri-to-buffer(lines 5484-5490) - Removed
detect-node-esentry (lines 4412-4417) - Added
esbuildversion 0.25.4 and its platform dependencies (lines 6034-6119) - Updated
fast-globreference (line 6730) - Added
fast-safe-stringify(lines 6757-6763) - Added
fetch-blob(lines 6800-6807) - Removed
focus-lockentry (lines 5584-5591) - Added
formdata-polyfill(lines 6910-6917) - Removed
framer-motionentry (lines 5640-5660) - Removed
framesyncentry (lines 5662-5669) - Removed
get-nonceentry (lines 5770-5775) - Updated
glob-parentreference (line 7055) - Added
globbyversion 14.1.0 and its dependencies (lines 7127-7140) - Updated
https-proxy-agentreference (line 7298) - Updated
ignorereference (line 7331) - Added
is-binary-path(lines 7425-7432) - Updated
is-globreference (line 7516) - Added
look-it-up(lines 7938-7944) - Removed
motion-domandmotion-utilsentries (lines 6944-6958) - Added
mz(lines 8229-8238) - Added
next-themes(lines 8289-8297) - Added
node-domexception(lines 8299-8305) - Added
node-eval(lines 8306-8313) - Added
node-fetch(lines 8315-8324) - Added
normalize-pathreference (lines 8364-8370) - Updated
object-assignreference (line 8371) - Added
package-manager-detector(lines 8521-8527) - Added
path-is-absolute(lines 8556-8562) - Added
path-type(lines 8594-8600) - Added
perfect-freehand(lines 8615-8621) - Updated
picomatchreference (line 8629) - Added
pirates(lines 8643-8649) - Updated
prettierreference (line 8702) - Updated
prop-typesreference (line 8746) - Added
proxy-compare(lines 8757-8763) - Added
proxy-memoize(lines 8771-8778) - Added
readdirp(lines 8953-8960) - Removed
react-clientside-effectentry (lines 7433-7442) - Removed
react-fast-compareentry (lines 7479-7484) - Removed
react-focus-lockentry (lines 7486-7504) - Removed
react-remove-scroll-barentry (lines 7543-7557) - Removed
react-remove-scrollentry (lines 7559-7576) - Removed
react-style-singletonentry (lines 7616-7630) - Added
scule(lines 9465-9471) - Added
sisteransi(lines 9626-9632) - Added
slashversion 5.1.0 (lines 9640-9646) - Added
sucrase(lines 9925-9941) - Added
thenify-allandthenify(lines 10001-10018) - Added
ts-interface-checker(lines 10128-10134) - Updated
tslibreference (line 10175) - Added
unicorn-magic(lines 10348-10354) - Added
uqr(lines 10387-10393) - Removed
use-callback-refanduse-sidecarentries (lines 9044-9073) - Added
web-streams-polyfill(lines 10595-10601) - Added
zod(lines 10800-10805)
- Added
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
UI components shift,
From old ways to the new,
Code adapts and grows.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
Pull Request Test Coverage Report for Build 18289602444Details
💛 - Coveralls |
There was a problem hiding this comment.
Code Review
This pull request makes progress on upgrading to Chakra UI 3.x. Many of the API changes and dependency updates, such as the move from isOpen to open in useDisclosure, spacing to gap in HStack, and isDisabled to disabled in IconButton, are correctly implemented. The new Toaster and Tooltip components also leverage Chakra UI v3's composition effectively.
The primary area for discussion is the new color mode management strategy using next-themes. While this is a valid approach, it's worth ensuring it's a deliberate choice with clear benefits over Chakra UI's native v3 color mode capabilities, and that it's configured to match previous behavior if intended.
Additionally, the use of "use client" directives and ClientOnly in a Vite-based project warrants clarification. The tsconfig.json update for path aliases is a nice improvement for maintainability.
Summary of Findings
- Color Mode Management Strategy: The PR introduces
next-themesfor color mode management, replacing Chakra UI's native system. This is a significant architectural decision. It's important to clarify the rationale and ensure that configurations like initial theme and storage key are correctly migrated or intentionally changed. There's a potential for added complexity or conflicts if not carefully managed. - Removal of
framer-motion:framer-motionwas a dependency, likely for animations with Chakra UI v2. Its removal might impact existing animations. Verification of animation functionality is recommended. - Usage of
"use client"andClientOnly: The"use client"directive and<ClientOnly>component are used in new UI files. In a standard Vite CSR setup, these are often unnecessary. Clarification on their purpose (e.g., for a Vite SSR build) would be beneficial. - Potential Configuration Gaps in
next-themes: The customColorModeProviderwrappingnext-themesis used without explicit props fordefaultThemeorstorageKeyinmain.tsx, which were previously configured with Chakra's native system. This might lead to different behavior or loss of user preferences if not addressed. isDisabledtodisabled: For consistency with standard HTML attributes, it is recommended to usedisabledinstead ofisDisabledfor button components.
Merge Readiness
This PR is marked as WIP, and the changes reflect a good start to the Chakra UI v3 upgrade. However, before this can be considered ready for merge, the questions raised, particularly around the color mode management strategy with next-themes and the removal of framer-motion, should be addressed. Ensuring the new color mode system is robust, correctly configured, and justified is key. I am unable to approve pull requests, but I recommend addressing these points and conducting thorough testing before considering this for merge. Given the medium severity issues, changes are requested.
package.json
Outdated
| "axios": "^1.9.0", | ||
| "chakra-ui-contextmenu": "^1.0.5", | ||
| "clsx": "^2.1.1", | ||
| "framer-motion": "^12.14.0", |
There was a problem hiding this comment.
I see framer-motion has been removed from the dependencies. Chakra UI v2 relied on it for animations. Could you clarify if animations previously dependent on framer-motion are still functional or if they've been re-implemented using Chakra UI v3's capabilities or an alternative? If animations are critical, this change might have an impact.
| "jotai": "^2.12.4", | ||
| "js-base64": "^3.7.7", | ||
| "mathjs": "^14.5.0", | ||
| "next-themes": "^0.4.6", |
There was a problem hiding this comment.
The addition of next-themes is an interesting choice for color mode management. Chakra UI v3 provides its own robust color mode system. Could you elaborate on the rationale for integrating next-themes here? Understanding the benefits or specific requirements this addresses would be helpful.
| <Tooltip label="Format"> | ||
| <IconButton | ||
| isDisabled={!canFormat || locked} | ||
| disabled={!canFormat || locked} |
There was a problem hiding this comment.
Consider using disabled instead of isDisabled for consistency with standard HTML attributes. This change aligns with the Chakra UI v3 migration.
disabled={!canFormat || locked}| <Tooltip label="Delete"> | ||
| <IconButton | ||
| isDisabled={locked} | ||
| disabled={locked} |
There was a problem hiding this comment.
Consider using disabled instead of isDisabled for consistency with standard HTML attributes. This change aligns with the Chakra UI v3 migration.
disabled={locked}| @@ -0,0 +1,108 @@ | |||
| "use client" | |||
There was a problem hiding this comment.
The "use client" directive is present at the top of this new file. In a Vite-based Client-Side Rendered (CSR) application, this directive is often associated with frameworks like Next.js (App Router) for distinguishing Server and Client Components. Is there a specific reason for its use here, such as a Vite SSR setup or a particular build configuration that necessitates it?
| export function ColorModeProvider(props: ColorModeProviderProps) { | ||
| return ( | ||
| <ThemeProvider attribute="class" disableTransitionOnChange {...props} /> | ||
| ) |
There was a problem hiding this comment.
This ColorModeProvider wraps the ThemeProvider from next-themes. This seems to be the core of the new color mode strategy. It would be good to ensure this custom provider seamlessly integrates with Chakra UI's theming and doesn't introduce conflicts with how Chakra components expect color mode to be managed. Have you considered using Chakra UI v3's built-in ChakraProvider capabilities for color mode (e.g., with colorModeManager and potentially ColorModeScript) and what led to choosing next-themes instead?
| >(function ColorModeButton(props, ref) { | ||
| const { toggleColorMode } = useColorMode() | ||
| return ( | ||
| <ClientOnly fallback={<Skeleton boxSize="8" />}> |
There was a problem hiding this comment.
The ColorModeButton uses <ClientOnly /> from @chakra-ui/react. Similar to the "use client" directive, could you clarify the necessity of ClientOnly here? Is it to prevent SSR mismatches or address a specific hydration issue? In a typical Vite CSR setup, this might not be required.
| <Span | ||
| color="fg" | ||
| display="contents" | ||
| className="chakra-theme light" | ||
| colorPalette="gray" | ||
| colorScheme="light" | ||
| ref={ref} | ||
| {...props} | ||
| /> | ||
| ) | ||
| }, |
There was a problem hiding this comment.
The LightMode (and similarly DarkMode) component sets className="chakra-theme light" and colorScheme="light". What is the intended use case for these components? If they are meant for local theme overrides, that's one thing. If they are part of the global theme switching, it might be redundant or conflict with what next-themes and the main ChakraProvider are already managing. Could you provide some context on how these will be used?
| @@ -0,0 +1,15 @@ | |||
| "use client" | |||
There was a problem hiding this comment.
Similar to color-mode.tsx, this new Provider component also starts with the "use client" directive. Could you clarify if this is necessary for the project's build setup (e.g., Vite SSR)?
src/main.tsx
Outdated
| <ChakraProvider value={system}> | ||
| <ColorModeProvider /> |
There was a problem hiding this comment.
The custom ColorModeProvider (which wraps next-themes) is invoked here without any props: <ColorModeProvider />. The previous setup used <ColorModeScript initialColorMode="dark" storageKey="scratchpad.color-mode" /> and a localStorageManager with the same storage key.
How are these configurations (initial color mode, storage key) being handled with next-themes? If these specific settings are still desired, they might need to be passed as props to your ColorModeProvider to configure the underlying next-themes ThemeProvider (e.g., defaultTheme, storageKey).
…de-chakra * 'main' of github.com:rm-hull/scratchpad: Update dependencies Bump eslint-plugin-testing-library from 7.2.2 to 7.5.3 (#509) Bump @eslint/js from 9.27.0 to 9.28.0 (#505) Bump vitest from 3.1.4 to 3.2.3 (#504) Bump brace-expansion from 1.1.11 to 1.1.12 in the npm_and_yarn group (#507) Bump mathjs from 14.5.0 to 14.5.2 (#503) Bump framer-motion from 12.16.0 to 12.18.1 (#510) Bump jotai from 2.12.4 to 2.12.5 (#491) Bump framer-motion from 12.14.0 to 12.16.0 (#498) Bump @babel/parser from 7.27.2 to 7.27.5 (#499) Bump @types/react from 19.1.5 to 19.1.7 (#501) Bump @typescript-eslint/eslint-plugin from 8.32.1 to 8.34.0 (#500)
…de-chakra * 'main' of github.com:rm-hull/scratchpad: (28 commits) Update dependencies Bump eslint-plugin-prettier from 5.5.3 to 5.5.4 (#576) Bump @eslint/js from 9.31.0 to 9.35.0 (#577) Bump @types/ramda from 0.30.2 to 0.31.1 (#578) Bump react-router-dom from 7.7.0 to 7.9.0 (#579) Bump axios from 1.10.0 to 1.12.1 (#580) Bump eslint-plugin-testing-library from 7.6.0 to 7.6.8 (#573) Bump @testing-library/dom from 10.4.0 to 10.4.1 (#572) Bump react-dom and @types/react-dom (#569) Bump js-base64 from 3.7.7 to 3.7.8 (#570) Bump @typescript-eslint/parser from 8.37.0 to 8.43.0 (#574) Bump chalk from 5.4.1 to 5.6.2 (#571) Bump @typescript-eslint/eslint-plugin from 8.37.0 to 8.43.0 (#567) Bump @stylistic/eslint-plugin from 5.2.0 to 5.3.1 (#560) Bump @babel/parser from 7.28.0 to 7.28.4 (#565) Bump react and @types/react (#564) Bump babel-plugin-react-compiler from 19.1.0-rc.2 to 19.1.0-rc.3 (#566) Bump vite from 7.0.5 to 7.0.7 in the npm_and_yarn group across 1 directory (#568) Bump @types/node from 24.0.15 to 24.3.1 (#562) Bump form-data from 4.0.1 to 4.0.4 in the npm_and_yarn group (#539) ...
…de-chakra * 'main' of github.com:rm-hull/scratchpad: Support XML
…de-chakra * 'main' of github.com:rm-hull/scratchpad: Improved layout for formatting errors Add Golang & JSON5 syntax colouring
2 participants
No description provided.