feat(system): improve overide api and write tests

Author: codebender828

packages/c-accordion/src/index.ts

@@ -9,7 +9,8 @@ const CAccordion = defineComponent({
     },
   },
   setup(props, { slots, attrs }) {
-    return () => h(chakra(props.as), { ...attrs }, slots)
+    return () =>
+      h(chakra(props.as, { label: 'accordion' }), { ...attrs }, slots)
   },
 })
 

packages/c-alert/src/alert.ts

@@ -96,7 +96,7 @@ export const CAlert = defineComponent({
 
     return () =>
       h(
-        chakra(props.as, 'alert'),
+        chakra(props.as, { label: 'alert' }),
         {
           role: 'alert',
           ...alertStyles,
@@ -119,7 +119,7 @@ export const CAlertTitle = defineComponent({
 
     return () =>
       h(
-        chakra('div', 'alert__title'),
+        chakra('div', { label: 'alert__title' }),
         {
           ...styles.title,
           ...attrs,
@@ -141,7 +141,7 @@ export const CAlertDescription = defineComponent({
 
     return () =>
       h(
-        chakra('div', 'alert__description'),
+        chakra('div', { label: 'alert__description' }),
         {
           ...styles.description,
           ...attrs,

packages/c-button/src/button.ts

@@ -79,7 +79,7 @@ const CButton = defineComponent({
 
     return () =>
       h(
-        chakra(props.as, 'button'),
+        chakra(props.as, { label: 'button' }),
         {
           disabled: props.isDisabled || props.isLoading,
           type: props.as === 'button' ? undefined : props.type,

packages/c-icon/src/icon.ts

@@ -51,7 +51,7 @@ export const CIcon = defineComponent({
 
     return () =>
       h(
-        chakra(props.as, 'icon'),
+        chakra(props.as, { label: 'icon' }),
         { ...vnodeProps.value, ...(icon.value.attrs || {}), ...attrs },
         slots
       )

packages/system/src/chakra.ts

@@ -1,15 +1,30 @@
-import { computed, DefineComponent, defineComponent, h, PropType } from 'vue'
+import {
+  Component,
+  computed,
+  DefineComponent,
+  defineComponent,
+  h,
+  HTMLAttributes,
+  PropType,
+} from 'vue'
 import {
   css,
   ResponsiveValue,
+  SystemCSSProperties,
   SystemProps,
   SystemStyleObject,
 } from '@chakra-ui/styled-system'
-import { cx, memoizedGet as get, objectAssign } from '@chakra-ui/vue-utils'
+import {
+  cx,
+  isFunction,
+  memoizedGet as get,
+  objectAssign,
+} from '@chakra-ui/vue-utils'
 import { css as _css, CSSObject } from '@emotion/css'
 import { extractStyleAttrs } from './system.attrs'
 import { domElements, DOMElements } from './system.utils'
 import { useTheme } from './composables/use-chakra'
+import { Theme } from '@chakra-ui/vue-theme'
 
 interface StyleResolverProps extends SystemProps {
   __css?: SystemStyleObject
@@ -21,19 +36,27 @@ interface StyleResolverProps extends SystemProps {
   textStyle?: string
   apply?: ResponsiveValue<string>
   componentName?: String
-}
-
-interface ChakraFactoryOptions extends StyleResolverProps {
   label?: string
   baseStyle?: SystemStyleObject
+  /**
+   * User provided styles from component/chakra API
+   */
+  styles?: SystemStyleObject
+}
+
+interface StyleResolverOptions extends StyleResolverProps {
+  truncateStyle?: CSSObject
+  theme: Theme
 }
 
+interface ChakraFactoryOptions extends StyleResolverProps {}
+
 const chakraProps = {
   __css: Object as PropType<StyleResolverProps['__css']>,
   sx: Object as PropType<StyleResolverProps['sx']>,
   css: Object as PropType<StyleResolverProps['css']>,
   noOfLines: Number as PropType<StyleResolverProps['noOfLines']>,
-  baseStyle: Object as PropType<ChakraFactoryOptions['baseStyle']>,
+  baseStyle: Object as PropType<StyleResolverProps['baseStyle']>,
   isTruncated: Boolean as PropType<StyleResolverProps['isTruncated']>,
   layerStyle: String as PropType<StyleResolverProps['layerStyle']>,
   textStyle: String as PropType<StyleResolverProps['textStyle']>,
@@ -43,76 +66,124 @@ const chakraProps = {
 export type ChakraBaseComponentProps = typeof chakraProps
 
 /**
- * Creates a Chakra UI Vue component
- * @param tag Tag
- * @param componentName Component name
+ * Chakra factory serves as an object of chakra enabled HTML elements,
+ * and also a function that can be used to enable custom component receive chakra's style props.
+ * @param tag Tag or Component
+ * @param options resolver options
+ * 
+ * How does it work?
+ *
+ * 1. Components returned from the chakra factory can be styled after consuming them
+ *    @example
+ *    ```js
+ *    const Form = chakra('form') // returns a VNode you can use in the template directly
+ *    ```
+ * 
+ * 2. Chakra components can directly be styled upon creation using the options object of type `StyleResolverProps`
+ *    This resolves style object for component styles defined in the theme.
+ * 
+ *    Styling components using the chakra factory function can be done using the following keys from the theme:
+ *    - `baseStyle`
+ *    - `layerStyle`
+ *    - `textStyle`
+ * 
+ *    @example
+ *    ```js
+ *    const MyCustomButton = chakra('button', {
+ *     baseStyle: {
+         bg: 'papayawhip,
+         color: 'red.500,
+         px: 4,
+         py: 3
+       }
+ *    })
+ *    ```
+ *    ```html
+ *    <my-custom-button>Hello Papaya Button</my-custom-button>
+ *    ```
+ * 
+ *    See more about the style resolution in the `resolveStyles` function.
+ * 
+ * 3. Chakra components created and styled using the `chakra` factory can be overriden in the template by applying
+ *    style properties directly
+ * 
+ *    @example
+ *    ```html
+ *    <my-custom-button bg="blue.400">
+ *      Papaya button goes blue
+ *    </my-custom-button>
+ *    ```
  */
 // @ts-expect-error
 export const chakra: IChakraFactory = (
-  tag: DOMElements,
-  options?: ChakraFactoryOptions
+  tag: DOMElements & Component,
+  options: StyleResolverProps
 ): DefineComponent => {
   return defineComponent({
     inheritAttrs: false,
     props: chakraProps,
     setup(props, { slots, attrs }) {
-      const theme = useTheme()
+      const { class: inheritedClass, ...rest } = attrs
+      const {
+        layerStyle,
+        baseStyle,
+        textStyle,
+        noOfLines,
+        isTruncated,
+        __css,
+        css,
+        sx,
+        apply,
+        ...otherStyles
+      } = options
+
       // Separate component style attributes from raw HTML attributes
+      const { styles, attrs: elementAttributes } = extractStyleAttrs<
+        any,
+        HTMLAttributes
+      >({
+        ...rest,
+        ...otherStyles,
+      })
+
+      const theme = useTheme() as Theme
 
-      const layerStyle = computed(() => props.layerStyle || options?.layerStyle)
-      const textStyle = computed(() => props.textStyle || options?.textStyle)
-      const baseStyle = computed(() => props.baseStyle || options?.baseStyle)
-      const noOfLines = computed(() => props.noOfLines || options?.noOfLines)
-      const isTruncated = computed(
+      const layerStyle$ = computed(
+        () => props.layerStyle || options?.layerStyle
+      )
+      const textStyle$ = computed(() => props.textStyle || options?.textStyle)
+      const baseStyle$ = computed(() => props.baseStyle || options?.baseStyle)
+      const noOfLines$ = computed(() => props.noOfLines || options?.noOfLines)
+      const isTruncated$ = computed(
         () => props.isTruncated || options?.isTruncated
       )
-      const __css = computed(() => props.__css || options?.__css)
-      const sx = computed(() => props.sx || options?.sx)
-      const apply = computed(() => props.apply || options?.apply)
+      const __css$ = computed(() => props.__css || options?.__css)
+      const css$ = computed(() => props.css || options?.css)
+      const sx$ = computed(() => props.sx || options?.sx)
+      const apply$ = computed(() => props.apply || options?.apply)
 
-      const { class: inheritedClass, ...rest } = attrs
-      const _layerStyle = get(theme, `layerStyles.${layerStyle.value}`, {})
-      const _textStyle = get(theme, `textStyles.${textStyle.value}`, {})
-      const { styles, attrs: elementAttributes } = extractStyleAttrs(rest)
-
-      let truncateStyle: any = {}
-      if (noOfLines.value != null) {
-        truncateStyle = {
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical',
-          WebkitLineClamp: noOfLines.value,
-        }
-      } else if (isTruncated.value) {
-        truncateStyle = {
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }
-      }
-
-      const finalStyles = objectAssign(
-        {},
-        __css.value,
-        baseStyle.value,
-        { apply: apply.value },
-        _layerStyle,
-        _textStyle,
-        truncateStyle,
-        styles,
-        sx.value
-      )
+      const resolvedComponentStyles = resolveStyles({
+        __css: __css$.value,
+        baseStyle: baseStyle$.value,
+        apply: apply$.value,
+        layerStyle: layerStyle$.value,
+        noOfLines: noOfLines$.value,
+        isTruncated: isTruncated$.value,
+        textStyle: textStyle$.value,
+        sx: sx$.value,
+        css: css$.value,
+        ...(styles as SystemProps),
+        theme,
+      })
 
-      const className = _css(css(finalStyles)({ theme }))
+      const className = _css(resolvedComponentStyles)
       const _componentName = options?.label ? `chakra-${options?.label}` : ''
 
       return () =>
         h(
           tag,
           {
             class: cx(inheritedClass, _componentName, className),
-            ...props,
             ...elementAttributes,
           },
           slots
@@ -121,14 +192,73 @@ export const chakra: IChakraFactory = (
   })
 }
 
+export const resolveStyles = (
+  resolvers = {} as StyleResolverOptions
+): CSSObject => {
+  const {
+    layerStyle,
+    baseStyle,
+    textStyle,
+    noOfLines,
+    isTruncated,
+    __css,
+    css: cssProp,
+    sx,
+    apply,
+    theme,
+    ...otherStyles
+  } = resolvers
+
+  const _layerStyle = get(theme, `layerStyles.${layerStyle}`, {})
+  const _textStyle = get(theme, `textStyles.${textStyle}`, {})
+
+  let truncateStyle: any = {}
+  if (noOfLines != null) {
+    truncateStyle = {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      display: '-webkit-box',
+      WebkitBoxOrient: 'vertical',
+      WebkitLineClamp: noOfLines,
+    }
+  } else if (isTruncated) {
+    truncateStyle = {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    }
+  }
+
+  const finalStyles = css(
+    objectAssign(
+      {},
+      __css,
+      baseStyle,
+      { apply: apply },
+      _layerStyle,
+      _textStyle,
+      truncateStyle,
+      otherStyles,
+      sx
+    )
+  )(theme)
+
+  const cssObject: CSSObject = objectAssign(
+    finalStyles,
+    isFunction(cssProp) ? cssProp(theme) : cssProp
+  )
+
+  return cssObject
+}
+
 type IChakraFactory = {
   [key in DOMElements]: DefineComponent
 } & {
-  (tag: DOMElements, componentName?: string): DefineComponent
+  (tag: DOMElements, options: StyleResolverProps): DefineComponent
 }
 
 domElements.forEach((tag) => {
-  chakra[tag] = chakra(tag)
+  chakra[tag] = chakra(tag, {})
 })
 
 export { domElements }