React-jsonschema-form: Add a Chakra UI theme

[sambigelow]

Description

At our company, we are building out a Chakra UI for React JSONSchema Form and we're trying to figure out the best way to contribute this. I've read through https://github.com/rjsf-team/react-jsonschema-form/issues/1222. Should we be trying to contribute this as a subpackage of react-jsonschema-form or as our own package at first?

[epicfaace]

I think a subpackage of rjsf would be great! We'll be ready to accept more themes as subpackages only once #1642 is merged, which fixes the multi-package setup, though.

[OFranke]

@sambigelow sounds pretty cool! How is it going? I'd be happy to test it. I might catch some edge cases as I am generating kind of complex schemas for one of my projects.

[Frando]

While googling for this issue to see if there's news I also just found https://github.com/vndly-oss/react-jsonschema-form/pull/1

[timkindberg]

I'm sorry to say development stalled on that. We still kind of need it though, it's just a LOT of work to theme RJSF :(

[koolamusic]

What's the progress on this, Wouldn't mind picking it up?

[timkindberg]

You can see the link above for the PR and where it stopped. We did end up making a custom theme but it lives in our projects codebase and it makes no effort to be usable by the general community. I can see about pasting it somewhere and then you’d basically have the PR and our home rolled code to start from 🤷🏻‍♂️

[koolamusic]

Yes, please share the link to the code you have, and I can see where I'd start from

[timkindberg]

Ok I uploaded the work: https://github.com/vndly-oss/react-jsonschema-form/tree/chakra-theme/packages

You'll see two folders:

1. chakra-ui - attempt 1, uses TypeScript, got decently far
2. chakra-ui-2 - attempt 2, started from attempt 1, from our project codebase, uses JavaScript, got us to a point where we could do the following in our own codebase. I'm not sure there are huuuuge differences between the two, but 2 is probably more finished (minus not being TypeScript)

How we use 2 in our codebase.

function withTheme(themeProps) {
  return React.forwardRef(({ fields, widgets, ...directProps }, ref) => {
    // eslint-disable-next-line no-param-reassign
    fields = { ...themeProps.fields, ...fields }
    // eslint-disable-next-line no-param-reassign
    widgets = { ...themeProps.widgets, ...widgets }
    return <VndlyForm {...themeProps} {...directProps} fields={fields} widgets={widgets} ref={ref} />
  })
}

export const ChakraForm = withTheme(Theme)

// Elsewhere

<ChakraForm />

[koolamusic]

@timkindberg I used this and it still worked

import { UiSchema, withTheme } from '@rjsf/core';
import { Theme as ChakraTheme } from 'packages/chakra-ui'

const Form = withTheme(ChakraTheme);

Any specific reasons for using the HOC?
What does VndlyForm extend?
with wrapping withTheme(Theme) where is this coming from too

[timkindberg]

Oh sorry VndlyForm is just extending react-json-schema-form's Form. But we added a whole bunch of features to it.

The reason for the HOC is that we were mimicking what react-json-schema-form exposes, they have that withTheme HOC, which doesn't do much... but we just copied it and tweaked it.

[NurdinDev]

How can I use the Chakra theme in my project it seems @rjsf/chakra-ui not in npm yet?

[epicfaace]

@NurdinDev it hasn't been released yet, it's still under development in this PR: #2075

[ryansquadle]

Is there any update on this issue since December? It looks like the pull request has the chakra ui integration completed except for some failing tests or issues with the CI build. Are the broken tests or CI issues very time consuming which is why this hasn't been approved and merge into the library yet?