new extension vike-react-chakra

[phonzammi]

TODO :

• README

Add Custom Config/Setting :
ChakraCustomProvider ?
chakraCustomConfig ?
+system

chakra?: null | {
     system?: SystemContext
     locale?: LocaleProviderProps['locale']
}

[brillout]

💯

Hi Muhammad, yes good point I think a new setting +ChakraProvider would be great. But let me know if you think an alternative idea could be better.

Looking forward to merge 😍

[phonzammi]

Hi Rom, Thanks
I just added +system setting and an example.

I'll also try adding the +ChakraProvider setting, which would allow users to use a custom provider, like adding ThemeProvider from next-themes. However, I think users can also achieve this by using the +Wrapper setting.

[brillout]

Hello Muhammad, nice 👌

I suggest we minimize the code a bit. The rationale being that we'll eventually have a lot of integration packages like this. To make things more maintainable let's keep things as simple as possible.

• Let's remove the example.
• Let's trim the readme a bit: let's assume the user already knows the basics of Chakra (but I ain't familiar with Chakra so I ain't sure what this means exactly).

I just added +system setting

👍 Is system the only prop of ChakraProvider? In other words: would replacing +system with +ChakraProvider make sense?

[brillout]

I'll also try adding the +ChakraProvider setting, which would allow users to use a custom provider, like adding ThemeProvider from next-themes

Ah, I'm just reading that 😅. So, yea, I'm inclined to think that haivng a +ChakraProvider setting would be both simpler and more powerful than having a +system setting?

I think users can also achieve this by using the +Wrapper setting.

Yea, maybe this integration package is a bit counter productive 🤔 WDYT?

Maybe with eject it could make sense?

[phonzammi]

Is system the only prop of ChakraProvider?

Yes, it is, see ChakraProviderProps.

So, yea, I'm inclined to think that haivng a +ChakraProvider setting would be both simpler and more powerful than having a +system setting?

Yeah I think so. Users can configure the chakra theme system and add additional provider inside one +ChakraProvider.js file.

Yea, maybe this integration package is a bit counter productive 🤔 WDYT?

I'm not sure yet.

Maybe with eject it could make sense?

Indeed. Let's add +ChakraProvider setting first. And if we choose to keep the +system setting, maybe we can rename it to be +themeSystem or +chakraSystem.

[brillout]

I'm a bit confused: what would then be the added value of +ChakraProvider if system is the only setting?

I just looked at https://github.com/pacocoursey/next-themes; how is that related to (vike-react-)chakra?

[phonzammi]

I'm not great at explaining this, but as far as I know, ChakraProvider only needs the theme system to work. The next-theme package isn’t necessary for it to function. However, the @chakra-ui/cli tool can adds code snippets that also installs the next-theme and react-icons packages, which are used in some of the pre-built component files generated by the CLI

[brillout]

However, the @chakra-ui/cli tool can adds code snippets that also installs the next-theme and react-icons packages, which are used in some of the pre-built component files generated by the CLI

How is this relevant to our discussion and/or to vike-react-chakra?

[phonzammi]

So that users can follow the Setup Provider guide to use the generated Provider (which includes ThemeProvider) created by the CLI

[phonzammi]

I just pushed a new changes.
Please take a look and review it

[phonzammi]

I'll add @brillout/release-me package when we ready to merge it

[brillout]

So that users can follow the Setup Provider guide to use the generated Provider (which includes ThemeProvider) created by the CLI

Their docs say:

This provider composes the following:

• ChakraProvider from @chakra-ui/react for the styling system
• ThemeProvider from next-themes for color mode

But that isn't something the user can influence, right?

In other words: what would be the concrete added value of +ChakraProvider over +system?

Alternative idea:

// +chakra.js

export default {
  system: /* ... */
}

WDYT?

[phonzammi]

But that isn't something the user can influence, right?

It's what the CLI generates, (inside ./src/components/ui dir), users can modify it as they want, or even create their own.

In other words: what would be the concrete added value of +ChakraProvider over +system?

• If users use +ChakraProvider.js it's like overriding the vike-react-chakra's +Wrapper.js
• +system.js only change/overriding the default chakra theme system configuration
• If users choose to create a new +Wrapper.js to add ThemeProvider and also want to be able to change the chakra theme system, we need to keep +system setting.

[brillout]

It's what the CLI generates, (inside ./src/components/ui dir), users can modify it as they want, or even create their own.

I don't see how it's related to our discussion?

• If users use +ChakraProvider.js it's like overriding the vike-react-chakra's +Wrapper.js

Sure, but again, what's the concrete advantage?

• +system.js only change/overriding the default chakra theme system configuration

Of course.

• If users choose to create a new +Wrapper.js to add ThemeProvider

Does their docs document that? 👀

I'm still not sure I see any concrete benefit of +ChakraProvider over +system.

[phonzammi]

I don't see how it's related to our discussion?

Maybe I misunderstood your question. What do you mean by something the user can influence ?

[phonzammi]

Anyways, what about we don't use +ChakraProvider for now and use +system setting with your alternative idea.

// +chakra.js
 
export default {
   system: /* ... */
   locale: /* ... */
}

And we also can add optinal locale?: string too. Chakra UI has LocaleProvider component. So the final +Wrapper.ts file will look like this:

export { Wrapper }

import React, { ReactNode } from 'react'
import { ChakraProvider, LocaleProvider, defaultSystem } from '@chakra-ui/react'
import { usePageContext } from 'vike-react/usePageContext'

function Wrapper({ children }: { children: ReactNode }) {
  const pageContext = usePageContext()
  const { chakra } = pageContext.config

  return (
    <ChakraProvider value={chakra?.system ?? defaultSystem}>
      <ChakraLocaleProvider locale={chakra?.locale}>
        {children}
      </ChakraLocaleProvider>
    </ChakraProvider>
  )
}

function ChakraLocaleProvider(props: { locale?: string; children: ReactNode }) {
  if (props.locale) {
    return <LocaleProvider locale={props.locale}>{props.children}</LocaleProvider>
  }
  return <>{props.children}</>
}

[brillout]

Sounds good!

Also, how about:

• A default system? I don't know Chakra so I don't know if that can make sense.
• When +chakra is set to null then no wrapper is added. Enabling the user to remove Chakra from certain pages and/or fully customize the Chakra integration.

[phonzammi]

• A default system? I don't know Chakra so I don't know if that can make sense.

I'm not sure either, though I think the defaultSystem from Chakra UI is good enough to start with.

Okay, I'm happy with this PR. Please take a look and let me know if I missed anything.

[brillout]

Looks good! I made some polishing comments. As you can see I made a lot of them. The rationale here being that things will be ejectable so everything is part of the "shop window". Looking forward to it 💫

[brillout]

It now works with [email protected].

[phonzammi]

Well done, awesome 🚀 , thank you

[brillout]

Alright, let's merge? Let me know if you disagree with anything.

[phonzammi]

LGTM, even better we don't need to use + for config.js.

FYI, I had issues with vike-solid-query+tsup because of that, sorry I didn't ask you before

[brillout]

Made one last change: dbd7160.

[brillout]

Merged ✨

Let's:

• Release it
• Add it to vike.dev/extensions
• Create vike.dev/chakra

[brillout]

Also we forgot to update the main readme: https://github.com/vikejs/vike-react

[brillout]

Also we forgot to update the main readme: https://github.com/vikejs/vike-react

Or better yet let's remove that readme and just add link to vike.dev/extensions#react

Monorepo of [Vike React extensions](...)

[phonzammi]

Or better yet let's remove that readme and just add link to vike.dev/extensions#react

I agree

[brillout]

Let's:

• Release it
• Add it to vike.dev/extensions
• Create vike.dev/chakra

Also we forgot to update the main readme: https://github.com/vikejs/vike-react

Or better yet let's remove that readme and just add link to vike.dev/extensions#react

Monorepo of [Vike React extensions](...)

@phonzammi Up for it?

[phonzammi]

Sure, I want to, ETA later tonight

[brillout]

Ok ok, wasn't sure whether there was some ambiguity :)