feat: Merge `CThemeProvider`, `CReset` and `CColorModeProvider` into `CChakraProvider` component

[codebender828]

Is your feature request related to a problem? Please describe. Currently, When creating a new Chakra UI Vue application, the user needs to import 3 components to get started. These components are purely setup components:

import Vue from 'vue'

// Here we import 3 components
import Chakra, { CThemeProvider, CColorModeProvider, CReset } from '@chakra-iu/vue'
import App from './App.vue'

Vue.use(Chakra)

new Vue({
  render: h => h(CThemeProvider, [
    h(CColorModeProvider, [
      h(CReset)
      h(App)
    ])
  ])
})

Describe the solution you'd like A new component called CChakraProvider that composes all three components into one and accepts a resetCss prop that determines whether to render CReset component. The CChakraProvider will provide the theme object to it's descendants. With this new component, the main.js file is simplified to:

import Vue from 'vue'

// Here we import 3 components
import Chakra, { CChakraProvider } from '@chakra-iu/vue'
import App from './App.vue'

Vue.use(Chakra)

// with CSS reset
new Vue({
  render: h => h(CChakraProvider, [h(App)])
})

// with no CSS reset
new Vue({
  render: h => h(CChakraProvider, {
    props: {
      resetCSS: false
    }
  }, [h(App)])
})

Describe alternatives you've considered Explicit import and composition of Chakra components.

Additional context _

[koca]

It seems better and what about config prop on CReset component? How are we gonna pass?

[codebender828]

Good point. I think we can:

1. Use the same resetCss prop such that it accepts [Boolean, Function] types.

• default value is Boolean(true)
• if it's false, we do not render the CReset component.
• if the type is Function then we render the CReset and provide the resetCss function value to the CReset component.

2. Provide another prop to the CChakraProvider called resetConfig.

I prefer option 1. What do you think?

[koca]

Both fine but yeah lets go with 1 👍