feat: add helper function to provide types for plugin options

Author: codebender828

components.d.ts

@@ -1,12 +1,12 @@
 /**
- * Typescript support for @@chakra-ui/vue-next1.0.0-alpha.5 auto-imported
+ * Typescript support for @@chakra-ui/vue-next1.0.0-alpha.6 auto-imported
  * components using `vite-plugin-components`
  *
  * @see: https://github.com/antfu/vite-plugin-components#typescript
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2021-07-06T09:19:34.498Z
+ * This file was generated on 2021-07-16T08:32:18.292Z
  */
 
 import { ChakraProps } from '@chakra-ui/vue-system'

package.json

@@ -142,6 +142,7 @@
     "vite-plugin-components": "^0.8.3",
     "vite-plugin-mdx-vue": "^1.1.3",
     "vite-plugin-pages": "^0.9.2",
+    "vite-plugin-vue-layouts": "^0.3.1",
     "vite-ssg": "^0.11.4",
     "vitepress": "^0.12.0",
     "vue": "^3.1.4",

packages/c-button/src/button.ts

@@ -4,12 +4,14 @@ import {
   useStyleConfig,
   ThemingProps,
   SystemStyleObject,
+  ComponentWithProps,
+  DeepPartial,
 } from '@chakra-ui/vue-system'
 import { dataAttr, filterUndefined, mergeWith } from '@chakra-ui/utils'
 import { useButtonGroup } from './button-group'
 import { CIcon } from '@chakra-ui/c-icon'
 import { CSpinner } from '@chakra-ui/c-spinner'
-import { BUTTON_PROPS } from './button.utils'
+import { ButtonProps, BUTTON_PROPS } from './button.utils'
 
 const CButtonSpinner = defineComponent({
   name: 'CButtonSpinner',
@@ -76,7 +78,7 @@ const CButtonIcon = defineComponent({
  * such as submitting a form, opening a dialog, canceling
  * an action, or performing a delete operation.
  */
-const CButton = defineComponent({
+const CButton: ComponentWithProps<DeepPartial<ButtonProps>> = defineComponent({
   name: 'CButton',
   props: BUTTON_PROPS,
   setup(props, { attrs, slots }) {

packages/c-button/src/button.utils.ts

@@ -1,30 +1,40 @@
 import { SystemCSSProperties } from '@chakra-ui/styled-system'
 import { DOMElements } from '@chakra-ui/vue-system'
-import { vueThemingProps } from '@chakra-ui/vue-utils'
+import { vueThemingProps, BaseThemedComponentProps } from '@chakra-ui/vue-utils'
 import { PropType } from 'vue'
 
 type ButtonTypes = 'button' | 'reset' | 'submit'
 
+export interface ButtonProps extends BaseThemedComponentProps {
+  isLoading?: boolean
+  isDisabled?: boolean
+  isActive?: boolean
+  loadingText?: string
+  isFullWidth?: boolean
+  type?: ButtonTypes
+  leftIcon?: string
+  rightIcon?: string
+  iconSpacing?: SystemCSSProperties['marginRight']
+}
+
 export const BUTTON_PROPS = {
   as: {
-    type: String as PropType<DOMElements>,
+    type: String as PropType<ButtonProps['as']>,
     default: 'button',
   },
-  isLoading: Boolean as PropType<boolean>,
-  isActive: Boolean as PropType<boolean>,
-  isDisabled: Boolean as PropType<boolean>,
-  loadingText: String as PropType<string>,
-  isFullWidth: Boolean as PropType<boolean>,
-  type: String as PropType<ButtonTypes>,
-  leftIcon: String as PropType<string>,
-  rightIcon: String as PropType<string>,
+  isLoading: Boolean as PropType<ButtonProps['isLoading']>,
+  isActive: Boolean as PropType<ButtonProps['isActive']>,
+  isDisabled: Boolean as PropType<ButtonProps['isDisabled']>,
+  loadingText: String as PropType<ButtonProps['loadingText']>,
+  isFullWidth: Boolean as PropType<ButtonProps['isFullWidth']>,
+  type: String as PropType<ButtonProps['type']>,
+  leftIcon: String as PropType<ButtonProps['leftIcon']>,
+  rightIcon: String as PropType<ButtonProps['rightIcon']>,
   ...vueThemingProps,
 
   /** Not sure if the SystemCSSProperties is the right prop type for this */
   iconSpacing: {
-    type: [String, Number, Array] as PropType<
-      SystemCSSProperties['marginRight']
-    >,
+    type: [String, Number, Array] as PropType<ButtonProps['iconSpacing']>,
     default: '0.5rem',
   },
 }

packages/c-button/src/icon-button.ts

@@ -1,7 +1,8 @@
 import { h, ComponentObjectPropsOptions, defineComponent, PropType } from 'vue'
 import CButton from './button'
-import { BUTTON_PROPS } from './button.utils'
+import { BUTTON_PROPS, ButtonProps } from './button.utils'
 import { CIcon } from '@chakra-ui/c-icon'
+import { ComponentWithProps, DeepPartial } from '@chakra-ui/vue-system'
 
 const IconButtonProps: ComponentObjectPropsOptions = {
   ...BUTTON_PROPS,
@@ -13,12 +14,20 @@ const IconButtonProps: ComponentObjectPropsOptions = {
   },
 }
 
+export interface CIconButtonProps extends ButtonProps {
+  icon: string
+  isRound?: boolean
+  ariaLabel: string
+}
+
 /**
  * CIconButton
  *
  * IconButton composes the Button component except that it renders only an icon.
  */
-const CIconButton = defineComponent({
+const CIconButton: ComponentWithProps<
+  DeepPartial<CIconButtonProps>
+> = defineComponent({
   name: 'CIconButton',
   props: IconButtonProps,
   setup(props, { attrs }) {

packages/core/src/helpers/plugin.types.ts

@@ -0,0 +1,19 @@
+import { ColorMode } from '@chakra-ui/c-color-mode'
+import { ThemeOverride } from '../extend-theme'
+
+interface ExtendIconsPath {
+  path: string
+  viewBox?: string
+}
+
+interface IconsOptions {
+  pack?: 'fa' | 'fe'
+  library?: {}
+  extend?: Record<string, ExtendIconsPath>
+}
+export interface ChakraPluginOptions {
+  cssReset?: boolean
+  extendTheme?: ThemeOverride
+  icons?: IconsOptions
+  defaultColorMode?: ColorMode
+}

packages/core/src/index.ts

@@ -6,26 +6,20 @@ import internalIcons from './icon.internals'
 import { extendTheme, ThemeOverride } from './extend-theme'
 import { MergedIcons, parseIcons } from './parse-icons'
 import { mode } from '@chakra-ui/vue-theme-tools'
+import { ChakraPluginOptions } from './helpers/plugin.types'
 
-interface ExtendIconsPath {
-  path: string
-  viewBox?: string
-}
-
-interface IconsOptions {
-  pack?: 'fa' | 'fe'
-  library?: {}
-  extend?: Record<string, ExtendIconsPath>
-}
-export interface ChakraUIVuePluginOptions {
-  cssReset?: boolean
-  extendTheme?: ThemeOverride
-  icons?: IconsOptions
-  defaultColorMode?: ColorMode
+/**
+ * Helper function to extend Chakra plugin with options
+ * It just returns its arguments
+ */
+export function extendChakra(
+  options: ChakraPluginOptions = { cssReset: true }
+) {
+  return options
 }
 
 const ChakraUIVuePlugin: Plugin = {
-  install(app, options: ChakraUIVuePluginOptions = { cssReset: true }) {
+  install(app, options: ChakraPluginOptions = { cssReset: true }) {
     // 1. Get theme value
     // 2. Parse theme tokens to CSS variables
     // 3. Inject all CSS variables as theme object
@@ -68,6 +62,7 @@ const ChakraUIVuePlugin: Plugin = {
   },
 }
 
+export type { ChakraPluginOptions }
 export interface ThemeProviderProps extends ThemeOverride {}
 export default ChakraUIVuePlugin
 export { extendTheme }

packages/utils/src/props.ts

@@ -1,4 +1,4 @@
-import { ThemingProps } from '@chakra-ui/vue-system'
+import { DOMElements, ThemingProps } from '@chakra-ui/vue-system'
 import { PropType } from 'vue'
 
 export const vueThemingProps = {
@@ -11,3 +11,11 @@ export const vueThemingProps = {
 export const SNA = [Number, String, Array]
 export const SAO = [String, Array, Object]
 export const SNAO = [Number, String, Array, Object]
+
+export interface BaseThemedComponentProps
+  extends Pick<
+    ThemingProps,
+    'colorScheme' | 'variant' | 'size' | 'styleConfig'
+  > {
+  as: DOMElements | 'router-link' | 'nuxt-link'
+}

website/src/docs-theme/components/MdxComponents.ts

@@ -16,8 +16,14 @@ import { trim } from 'lodash'
 const LinkedHeading = (as: string, apply: string) => (
   props: any,
   context: SetupContext
-) =>
-  h('MdxHeading', { ...props, as, apply }, renderSlot(context.slots, 'default'))
+) => {
+  console.log(' RENDERING HEADING', props, context)
+  return h(
+    'MdxHeading',
+    { ...props, as, apply },
+    renderSlot(context.slots, 'default')
+  )
+}
 
 const MdxChakra = (
   {
@@ -37,12 +43,14 @@ const MdxChakra = (
   )
 
 export const MdxComponents = {
-  h1: (props: any, context: SetupContext) =>
-    h(
+  h1: (props: any, context: SetupContext) => {
+    console.log(' RENDERING HEADER', props, context)
+    return h(
       'chakra.h1',
       { apply: 'mdx.h1', ...props },
       renderSlot(context.slots, 'default')
-    ),
+    )
+  },
   h2: LinkedHeading('h2', 'mdx.h2'),
   h3: LinkedHeading('h3', 'mdx.h3'),
   h4: LinkedHeading('h4', 'mdx.h4'),

website/src/docs-theme/layout/LayoutMdx.vue

@@ -3,8 +3,8 @@
     <template #sidebar>
       <app-sidebar :routes="routes" />
     </template>
-    <template #default>
-      <slot />
+    <template>
+      <slot name="default" />
     </template>
     <template #pagination>
       <app-pagination
@@ -46,6 +46,9 @@ export default defineComponent({
       removeFromLast(props.frontmatter.slug, '#'),
       routes
     )
+
+    console.log(slots?.default?.())
+
     const routeContext = getRouteContext(route, routes)
 
     return {