chore(theme): setup system providers

Author: codebender828

packages/c-theme-provider/src/index.ts

@@ -26,3 +26,4 @@ const CThemeProvider = defineComponent({
 })
 
 export default CThemeProvider
+export * from './theme.hooks'

packages/c-theme-provider/src/theme.hooks.ts

@@ -0,0 +1,8 @@
+import { ThemeProviderProps } from '@chakra-ui/vue-next'
+import { computed, inject } from 'vue'
+
+/** Provides theme object in component context */
+export const useTheme = () => {
+  const theme = inject('$chakraTheme') as ThemeProviderProps
+  return theme
+}

packages/system/src/chakra.ts

@@ -0,0 +1,54 @@
+import { defineComponent, h } from 'vue'
+import { css } from '@chakra-ui/styled-system'
+import theme from '@chakra-ui/vue-theme'
+import { css as _css, cx } from '@emotion/css'
+import { extractStyleAttrs } from './system.attrs'
+import { domElements, DOMElements } from './system.utils'
+
+/**
+ * Creates a Chakra UI Vue component
+ * @param tag Tag
+ * @param componentName Component name
+ */
+// @ts-expect-error
+export const chakra: IChakraFactory = (
+  tag: DOMElements,
+  componentName?: string
+): any => {
+  return defineComponent({
+    inheritAttrs: false,
+    setup(props, { slots, attrs }) {
+      // Separate component style attributes from raw HTML attributes
+      const { class: inheritedClass, ...rest } = attrs
+      const { styles, attrs: _attrs } = extractStyleAttrs(rest)
+      const className = _css(css(styles)({ theme }))
+
+      const _componentName = componentName
+        ? `chakra-${componentName}`
+        : `chakra-component-${tag}`
+
+      return () =>
+        h(
+          tag,
+          {
+            class: cx(inheritedClass as string, _componentName, className),
+            ...props,
+            ..._attrs,
+          },
+          slots
+        )
+    },
+  })
+}
+
+type IChakraFactory = {
+  [key in DOMElements]: any
+} & {
+  (tag: DOMElements, componentName?: string): any
+}
+
+domElements.forEach((tag) => {
+  chakra[tag] = chakra(tag)
+})
+
+export { domElements }

packages/system/src/index.ts

@@ -1,59 +1,4 @@
-import { defineComponent, h } from 'vue'
-import { css } from '@chakra-ui/styled-system'
-import theme from '@chakra-ui/vue-theme'
-import { css as _css, cx } from '@emotion/css'
-import { extractStyleAttrs } from './system.attrs'
-import { domElements, DOMElements } from './system.utils'
-
-let id = 0
-
-/**
- * Creates a Chakra UI Vue component
- * @param tag Tag
- * @param componentName Component name
- */
-// @ts-expect-error
-export const chakra: IChakraFactory = (
-  tag: DOMElements,
-  componentName?: string
-): any => {
-  // Increment ids
-  ++id
-
-  return defineComponent({
-    inheritAttrs: false,
-    setup(props, { slots, attrs }) {
-      // Separate component style attributes from raw HTML attributes
-      const { class: inheritedClass, ...rest } = attrs
-      const { styles, attrs: _attrs } = extractStyleAttrs(rest)
-      const className = _css(css(styles)({ theme }))
-
-      const _componentName = componentName
-        ? `chakra-${componentName}`
-        : `chakra-component-${id}`
-
-      return () =>
-        h(
-          tag,
-          {
-            class: cx(inheritedClass as string, _componentName, className),
-            ...props,
-            ..._attrs,
-          },
-          slots
-        )
-    },
-  })
-}
-
-type IChakraFactory = {
-  [key in DOMElements]: any
-} & {
-  (tag: DOMElements, componentName?: string): any
-}
-
-domElements.forEach((tag) => {
-  chakra[tag] = chakra(tag)
-})
-
-export { domElements }
+export * from './chakra'
+export * from './system.attrs'
+export * from './system.types'
+export * from './system.utils'

playground/src/App.vue

@@ -3,27 +3,23 @@
     <sidebar :stories="routes" />
     <chakra.main w="full" border-left="1px solid" border-color="gray.400" padding="4">
       <router-view />
-
-      <chakra.button :bg="['teal.500']" color="white" px="4" py="3">
-        Button
-      </chakra.button>
-
     </chakra.main>
   </chakra.section>
 </template>
 
 <script lang="ts">
-import { defineComponent, inject } from 'vue'
+import { defineComponent } from 'vue'
+import { useTheme } from '@chakra-ui/c-theme-provider'
 import Sidebar from './components/Sidebar.vue'
 import { routes } from './router'
 
 export default defineComponent({
   components: { Sidebar },
   setup() {
-    const chakraTheme = inject('$chakraTheme')
+    const theme = useTheme()
     return {
       routes,
-      chakraTheme
+      theme
     }
   },
 })