Merge pull request #264 from chakra-ui/fix/theme-types

fix/theme types

Author: codebender828

.changeset/stale-kiwis-shave.md

@@ -0,0 +1,44 @@
+---
+"@chakra-ui/c-visually-hidden": minor
+"@chakra-ui/c-theme-provider": minor
+"@chakra-ui/vue-composables": minor
+"@chakra-ui/c-close-button": minor
+"@chakra-ui/c-form-control": minor
+"@chakra-ui/c-media-query": minor
+"@chakra-ui/c-scroll-lock": minor
+"@chakra-ui/c-breadcrumb": minor
+"@chakra-ui/c-color-mode": minor
+"@chakra-ui/c-focus-lock": minor
+"@chakra-ui/c-accordion": minor
+"@chakra-ui/c-pin-input": minor
+"@chakra-ui/c-checkbox": minor
+"@chakra-ui/c-skip-nav": minor
+"@chakra-ui/vue-test-utils": minor
+"@chakra-ui/vue-auto-import": minor
+"@chakra-ui/c-spinner": minor
+"@chakra-ui/c-avatar": minor
+"@chakra-ui/c-button": minor
+"@chakra-ui/c-motion": minor
+"@chakra-ui/c-popper": minor
+"@chakra-ui/c-portal": minor
+"@chakra-ui/vue-accessibilty": minor
+"@chakra-ui/c-alert": minor
+"@chakra-ui/c-image": minor
+"@chakra-ui/c-input": minor
+"@chakra-ui/c-modal": minor
+"@chakra-ui/c-reset": minor
+"@chakra-ui/c-toast": minor
+"@chakra-ui/c-code": minor
+"@chakra-ui/c-icon": minor
+"@chakra-ui/c-menu": minor
+"@chakra-ui/vue-layout": minor
+"@chakra-ui/vue-styled": minor
+"@chakra-ui/vue-system": minor
+"@chakra-ui/c-tag": minor
+"@chakra-ui/vue-utils": minor
+"@chakra-ui/nuxt-next": minor
+"@chakra-ui/vue-next": minor
+---
+
+Provide auto-import for components in Nuxt and expose theme type for `useTheme`
+hook"

@types/components.d.ts

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-02-17T13:41:24.872Z
+ * This file was generated on 2023-02-17T16:34:58.713Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"

components.d.ts

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-02-17T13:41:24.872Z
+ * This file was generated on 2023-02-17T16:34:58.713Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"

modules/nuxt/build.config.ts

@@ -25,7 +25,6 @@ export default defineBuildConfig({
     "nuxt3",
     "vue",
     "vue-demi",
-    "@chakra-ui/utils",
     "css-box-model",
     "framesync",
     "lodash.mergewith",

modules/nuxt/playground/app.vue

@@ -2,7 +2,7 @@
   <c-container>
     <c-heading>Chakra UI Vue Next</c-heading>
     <c-grid template-columns="1fr 1fr" gap="5">
-      <!-- <c-grid-item>
+      <c-grid-item>
         <c-stack>
           <c-h-stack>
             <chakra.p>Toggle Color Mode</chakra.p>
@@ -27,7 +27,7 @@
             >
           </c-stack>
         </c-stack>
-      </c-grid-item> -->
+      </c-grid-item>
       <c-grid-item>
         <c-heading>Toast</c-heading>
         <c-button @click="handleClick">Hello Chakra UI</c-button>
@@ -37,19 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  chakra,
-  CButton,
-  CContainer,
-  CGrid,
-  CStack,
-  CHStack,
-  CGridItem,
-  CHeading,
-  useToast,
-  useColorMode,
-  CIconButton,
-} from "@chakra-ui/vue-next"
+import { chakra, useToast, useColorMode } from "@chakra-ui/vue-next"
 const toast = useToast()
 
 const { colorMode, toggleColorMode } = useColorMode()

modules/nuxt/src/module.ts

@@ -3,7 +3,7 @@ import {
   addPlugin,
   createResolver,
   addServerPlugin,
-  installModule,
+  addComponent,
 } from "@nuxt/kit"
 import type * as NuxtSchema from "@nuxt/schema"
 import type * as Theme from "@chakra-ui/theme"
@@ -74,7 +74,32 @@ export default defineNuxtModule<ChakraModuleOptions>({
       }
     })
 
-    nuxt.options.build.transpile.push("@chakra-ui")
+    // Transpile
+    nuxt.options.build.transpile.push("@chakra-ui/vue-next")
+
+    // Auto-import components
+    for (const component in Chakra) {
+      /**
+       * Group of strict checks to make sure that
+       * we only generate types for components.
+       */
+      if (
+        component.startsWith("C") &&
+        // @ts-ignore
+        Chakra[component]?.name &&
+        // @ts-ignore
+        Chakra[component]?.setup &&
+        // @ts-ignore
+        typeof Chakra[component]?.setup === "function"
+      ) {
+        addComponent({
+          name: component,
+          // @ts-ignore
+          export: Chakra[component]?.name,
+          filePath: "@chakra-ui/vue-next",
+        })
+      }
+    }
 
     nuxt.options.appConfig.$chakraConfig = {
       extendTheme,

packages/system/src/composables/use-chakra.ts

@@ -1,9 +1,9 @@
 import { inject } from "vue"
 import { useColorMode } from "@chakra-ui/c-color-mode"
-import { Dict } from "@chakra-ui/utils"
+import { ChakraTheme } from "@chakra-ui/theme"
 
 /** Provides theme object in component context */
-export const useTheme = <T extends object = Dict>(): T => {
+export const useTheme = <T extends ChakraTheme = ChakraTheme>(): T => {
   const theme = inject("$chakraTheme") as T
   return theme
 }

packages/system/src/system.utils.ts

@@ -1,4 +1,4 @@
-import { UnionStringArray, omit } from "@chakra-ui/utils"
+import { UnionStringArray } from "@chakra-ui/utils"
 import { keyframes, injectGlobal } from "@emotion/css"
 import { PropType } from "vue"
 

packages/vue-composables/src/use-counter.ts

@@ -1,5 +1,5 @@
 import { clampValue, countDecimalPlaces, toPrecision } from "@chakra-ui/utils"
-import { computed, ref, watchEffect } from "vue"
+import { ref, watchEffect } from "vue"
 
 export interface UseCounterProps {
   /**

packages/vue/src/helpers/css-reset.ts

@@ -30,10 +30,12 @@ export function injectThemeGlobalStyles(
   )
   if (!globalStyles.value) return undefined
 
-  const cache = createCache({
-    key: "chakra-global",
-    nonce: "__chakra__",
-  })
+  const cache =
+    _cache ||
+    createCache({
+      key: "chakra-global",
+      nonce: "__chakra__",
+    })
 
   const _globalStyles = computed(() => css(globalStyles.value)(theme))
 
@@ -52,6 +54,7 @@ export function injectThemeGlobalStyles(
         key: `${key} ${serializedStyles.value.name}`,
         nonce: cache.sheet.nonce,
         container: cache.sheet.container,
+        // @ts-ignore
         speedy: cache.sheet.isSpeedy,
       })
 
@@ -104,6 +107,7 @@ export function injectThemeGlobalStyles(
       sheet.flush()
     }
 
+    // @ts-ignore
     cache.insert(``, serializedStyles.value, sheet, false)
   })
 }