update chakra to v3

[julianhille]

Prerequisites

• I have read the documentation

What theme are you using?

chakra-ui

Is your feature request related to a problem? Please describe.

Chakra ui has released its version 3

Here is the migration guide:
https://www.chakra-ui.com/docs/get-started/migration

First test shows that a lot of errors are thrown when combining chakra v3 and latest rjsf

Describe the solution you'd like

Be compatible to chakra v3

Describe alternatives you've considered

No response

[heath-freenome]

@julianhille Is this something you would be willing to do for us... Perhaps in our v6 beta (that way we have support for it in the new release)

[julianhille]

I could give it a try.

[MilanKrupa]

@julianhille any updates on this? If you haven't made any progress, I could try to do it

[Syynth]

@MilanKrupa I have started on a version of this here:
https://github.com/Syynth/react-jsonschema-form/tree/main

there is definitely more work to do, some tests are crashing for reasons I don't understand, and i'm getting a strange error in the playground on some of the examples (A validator is required for Form functionality to work), but if anyone wants to take it further or assist me, i'd love to collaborate/etc.

[MilanKrupa]

@Syynth So I guess I've unnecessarily started to migrate it here: https://github.com/MilanKrupa/react-jsonschema-form/tree/chakra-ui-v2-to-v3-migration. I wonder which one of us made more progress so that we can continue to work on this in a single repo. Based on your comment I assume you were able to get the playground up and running? I also did, and I was able to fix majority of the type errors. In my case some of the components are not yet working properly in the playground though. There are some styling adjustments to be made too (because of the CSS reset i guess).

About the validator - I wouldn't worry about it too much for now. When you get this error, just select the AJV8 and refresh the form using the button in error message. It seems like this is an issue with the playground itself. Same thing happens here: https://rjsf-team.github.io/react-jsonschema-form/.

I propably won't be able to do too much this week, so let me know if you'd like to continue. If you don't, then I'll try to get it done next week

[heath-freenome]

@julianhille @MilanKrupa @Syynth If one of you could push up the PR with the changes in them, our plan is to integrate that PR into the upcoming v6 release, so there is no need to worry about backwards compatibility with the earlier version. The chakra v3 upgrade is one of the last pieces we need to release v6. Thank you all so much for your willingness to contribute. If you have any questions in order to get this work over the line, please don't hesitate to ask.

[MilanKrupa]

@heath-freenome I've made some progress today, but I still need more time. Propably until the end of this week. This update really is a pain. There is just a lot of weird issues, but 2 main are broken styles and type errors in snippets provided by chakra. I've fixed types issue today so I just need to trace down what breaks the styles and adjust the logic of components that aren't working properly

[heath-freenome]

@MilanKrupa Do the type issues go away when upgrading to the latest Typescript? I know that the older version of chakra-ui prevented us from upgrading so I was hoping upgrading chakra-ui would allow the Typescript upgrade

[MilanKrupa]

@heath-freenome I've managed to get rid of them by bumping up ts to 5.2.2 and setting moduleResolution in tsconfig to "bundler". It doesn't work on 5.7 though and I think it's because of some dependency type mismatch but I didn't really look into it

[MilanKrupa]

A little update: most of the stuff is working, but I've ran into issues with checkboxes widget that I can't even begin to explain. With one checkbox in the form everything works fine, but with more checkboxes behavior is just random. It's nothing even close to chakra docs examples. I couldn't fix it for the past couple of hours. Sorry it's taking so long, but there are just so many weird issues... I've never seen anything like this

[heath-freenome]

Maybe the CheckboxesWidget isn't using chakra-ui properly?

[MilanKrupa]

@heath-freenome It's not that. I've even removed all of the logic and pasted the simple example from the docs and it still wouldn't work no matter what. It feels like something is messing up the internal state of the checkboxes. I'm starting to think it's either a chakra bug or maybe I have a corrupt installation or messed up dependencies

[macintushar]

Hey @MilanKrupa, happy to help out here. We are currently using RJSF and we need Chakra > v3 to migrate our app to v3 so if you need help in trying to debug the issues here, please reach out

[MilanKrupa]

@macintushar Sure, I would appreciate it if you could take a look at https://github.com/MilanKrupa/react-jsonschema-form/tree/chakra-ui-v2-to-v3-migration and try to get the CheckboxesWidget to work. I also need to bump it up for the same reason, but I simply didn't have enough time to fix it lately

[macintushar]

Hey @MilanKrupa, can you tell me what exactly is breaking? I am able to build the package just fine.

[MilanKrupa]

@macintushar Just start the playground and see if checkboxes widget works properly. You can find one in the enumerated objects example

[antpaw]

I've just opened a PR based on @MilanKrupa work #4566

Here is the commit list:

• fix chakra RadioWidget value change

• fix chakra CheckboxesWidget value assign
  I think this is the issue mentioned previously, it was bugged because there was a <Field> wrapper around the form that messes up the ids

• add chakra Fieldset to FieldTemplate
  Instead of removing the field i've added a fieldset

• fix chakra SelectWidget content position via portal

• add chakra NativeSelectWidget
  Users can opt out of the custom select by using this widget

• update playground chakra-ui version

• remove @chakra-ui/icon in favor of lucide-react
  @chakra-ui/icon is deprecated

Let me know what I can improve, Thank you

[cmandlbaur]

@heath-freenome @nickgros just a nudge, I've just started looking at rjsf for a project I am working on, but Chakra 3 is a requirement and it looks like there is some traction here.

[heath-freenome]

@cmandlbaur Hopefully we can get you something working in the v6 beta by the end of April

@heath-freenome @nickgros just a nudge, I've just started looking at rjsf for a project I am working on, but Chakra 3 is a requirement and it looks like there is some traction here.

@antpaw Can you rebase your PR?

[thesnups]

Hi all, I've begun migrating my project from https://jsonforms.io/ to RJSF because it looks better and has proper support for precompiled schemas, which I need. My project uses Chakra UI V3, so I am using the V3 support in the RSJF V6 beta release. Looks really awesome so far! My question is what's the best way to get help, provide feedback, and otherwise be of assistance in this work?

A specific issue I've run into is I'd like to be able to control form field spacing, but I can't customize the grid gap in the ObjectFieldTemplate without duplicating it and changing just that value.