feat(c-alert): add alert component base styling

Author: codebender828

package.json

@@ -22,6 +22,7 @@
     "c-box": "yarn workspace @chakra-ui/c-box",
     "c-button": "yarn workspace @chakra-ui/c-button",
     "system": "yarn workspace @chakra-ui/system-vue",
+    "theme": "yarn workspace @chakra-ui/vue-theme",
     "nuxt": "yarn workspace @chakra-ui/nuxt-next"
   },
   "license": "MIT",

packages/c-alert/examples/base-alert.vue

@@ -1,15 +1,5 @@
 <template>
-  <c-alert
-    font-weight="bold"
-    px="4"
-    py="3"
-    :bg="['yellow.300', 'blue.200']"
-    aria-role="alert"
-    rounded="md"
-  >
-    HELLO ALERT
-  </c-alert>
-  <p>Alert paragraph</p>
+  <c-alert> HELLO ALERT </c-alert>
 </template>
 
 <script lang="ts">

packages/c-alert/examples/with-status.vue

@@ -0,0 +1,16 @@
+<template>
+  <c-alert status="info" mb="3"> Info alert </c-alert>
+  <c-alert status="success" mb="3"> Success alert </c-alert>
+  <c-alert status="warning" mb="3"> Warning alert </c-alert>
+  <c-alert status="error" mb="3"> Error alert </c-alert>
+</template>
+
+<script lang="ts">
+import CAlert from '@chakra-ui/c-alert/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseAlertExample',
+  components: { CAlert },
+})
+</script>

packages/c-alert/src/alert.ts

@@ -0,0 +1,91 @@
+import { h, defineComponent, PropType, provide } from 'vue'
+import {
+  chakra,
+  ColorScheme,
+  DeepComponentThemeConfig,
+  ThemingProps,
+  useMultiStyleConfig,
+  provideComponentStyles,
+} from '@chakra-ui/system-vue'
+import { DOMElements } from '@chakra-ui/system-vue'
+import { SystemStyleObject } from '@chakra-ui/styled-system'
+
+const STATUSES = {
+  info: {
+    colorScheme: 'blue' as ColorScheme,
+  },
+  success: {
+    colorScheme: 'green' as ColorScheme,
+  },
+  warning: {
+    colorScheme: 'orange' as ColorScheme,
+  },
+  error: {
+    colorScheme: 'red' as ColorScheme,
+  },
+}
+
+type AlertStatus = keyof typeof STATUSES
+export type AlertVariant = 'solid' | 'subtle' | 'left-accent' | 'top-accent'
+
+interface AlertState {
+  status: AlertStatus
+}
+
+const CAlert = defineComponent({
+  name: 'CAlert',
+  props: {
+    as: {
+      type: [String, Object] as PropType<DOMElements>,
+      default: 'div',
+    },
+    status: {
+      type: [String] as PropType<AlertStatus>,
+      default: 'info',
+    },
+    colorScheme: {
+      type: [String] as PropType<ColorScheme>,
+    },
+    styleConfig: {
+      type: [Object] as PropType<DeepComponentThemeConfig>,
+    },
+    variant: {
+      type: [String] as PropType<AlertVariant>,
+      default: 'solid',
+    },
+  },
+  setup(props, { slots, attrs }) {
+    const colorScheme: ColorScheme =
+      props.colorScheme || STATUSES[props.status].colorScheme
+
+    const themingProps: ThemingProps = {
+      colorScheme,
+      variant: props.variant,
+    }
+    const styles = useMultiStyleConfig('Alert', themingProps)
+    const alertStyles: SystemStyleObject = {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      position: 'relative',
+      overflow: 'hidden',
+      ...styles.value.container,
+    }
+
+    provideComponentStyles('Alert', alertStyles)
+    provide('$AlertState', { status: props.status } as AlertState)
+
+    return () =>
+      h(
+        chakra(props.as, 'alert'),
+        {
+          role: 'alert',
+          ...alertStyles,
+          ...attrs,
+        },
+        slots
+      )
+  },
+})
+
+export default CAlert

packages/c-alert/src/index.ts

@@ -1,26 +1,2 @@
-import { h, defineComponent, PropType } from 'vue'
-import { chakra } from '@chakra-ui/system-vue'
-import { DOMElements } from '@chakra-ui/system-vue/dist/types/system.utils'
-
-const CAlert = defineComponent({
-  name: 'CAlert',
-  props: {
-    as: {
-      type: [String, Object] as PropType<DOMElements>,
-      default: 'div',
-    },
-  },
-  setup(props, { slots, attrs }) {
-    return () =>
-      h(
-        chakra(props.as, 'alert'),
-        {
-          ...attrs,
-          role: 'alert',
-        },
-        slots
-      )
-  },
-})
-
-export default CAlert
+import Alert from './alert'
+export default Alert

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

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

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

@@ -1,5 +1,5 @@
 import { Plugin } from 'vue'
-import defaultTheme from '@chakra-ui/vue-theme'
+import defaultTheme, { ColorMode } from '@chakra-ui/vue-theme'
 import { extendTheme, ThemeOverride } from './extend-theme'
 
 interface ExtendIconsPath {
@@ -14,13 +14,16 @@ interface IconsOptions {
 interface ChakraUIVuePluginOptions {
   extendTheme?: ThemeOverride
   icons?: IconsOptions
+  defaultColorMode?: ColorMode
 }
 
 const ChakraUIVuePlugin: Plugin = {
   install(app, options: ChakraUIVuePluginOptions = {}) {
     const theme = options.extendTheme || defaultTheme
+    const colorMode = options.defaultColorMode || 'light'
     app.config.globalProperties.$chakraTheme = theme
-    app.provide('$chakraTheme', theme)
+    app.provide('$chakraTheme', theme as ThemeOverride)
+    app.provide('$chakraColorMode', colorMode as ColorMode)
   },
 }
 

packages/core/src/index.ts

@@ -0,0 +1,36 @@
+import { ThemeProviderProps } from '@chakra-ui/vue-next'
+import { ColorMode } from '@chakra-ui/vue-theme'
+import { inject, ref } from 'vue'
+
+/** Provides theme object in component context */
+export const useTheme = (): ThemeProviderProps => {
+  const theme = inject('$chakraTheme') as ThemeProviderProps
+  return theme
+}
+
+/** Injects color mode into component instance */
+export const useColorMode = () => {
+  const _colorMode = inject('$chakraColorMode') as ColorMode
+  const colorMode = ref(_colorMode)
+
+  const toggleColorMode = () => {
+    colorMode.value = 'light'
+      ? (colorMode.value = 'dark')
+      : (colorMode.value = 'light')
+  }
+
+  return {
+    colorMode,
+    toggleColorMode,
+  }
+}
+
+/** Single hook to provide theme and color mode values */
+export const useChakra = () => {
+  const theme = useTheme()
+  const { colorMode } = useColorMode()
+  return {
+    theme,
+    colorMode,
+  }
+}

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

@@ -0,0 +1,98 @@
+import { computed, ComputedRef, inject, provide, ref } from 'vue'
+
+import { SystemStyleObject } from '@chakra-ui/styled-system'
+import { ChakraComponentName, ComponentThemeConfig } from '@chakra-ui/vue-theme'
+import { ThemingProps } from '../system.types'
+import { DeepPartial } from '../system.utils'
+import { filterUndefined, get, mergeWith, runIfFn } from '@chakra-ui/vue-utils'
+import { useChakra } from './use-chakra'
+
+export type AllThemedComponents = ChakraComponentName &
+  keyof Record<string, any>
+
+/**
+ * This type allows us to loosely type values for consumer provided
+ * components in the theme config.
+ *
+ * @note At the time of writing this, I'm not sure whether this should
+ * be loosely typed with a {DeepComponentThemeConfig} or should be strictly
+ * typed with as the {ComponentThemeConfig}
+ */
+export type DeepComponentThemeConfig = DeepPartial<ComponentThemeConfig>
+
+export function useStyleConfig(
+  themeKey: AllThemedComponents,
+  themingProps: ThemingProps,
+  options: { isMultiPart: true },
+  userStyleConfig?: DeepComponentThemeConfig
+): ComputedRef<Record<string, SystemStyleObject>>
+
+export function useStyleConfig(
+  themeKey: AllThemedComponents,
+  themingProps?: ThemingProps,
+  options?: { isMultiPart?: boolean },
+  userStyleConfig?: DeepComponentThemeConfig
+): ComputedRef<SystemStyleObject>
+
+export function useStyleConfig(
+  themeKey: any,
+  themingProps: any,
+  options: any = {},
+  userStyleConfig?: any
+) {
+  const { theme, colorMode } = useChakra()
+  const themeStyleConfig = get(theme, `components.${themeKey}`)
+
+  const styleConfig = userStyleConfig || themeStyleConfig
+
+  const mergedProps = mergeWith(
+    { theme, colorMode },
+    styleConfig?.defaultProps ?? {},
+    filterUndefined(themingProps)
+  )
+
+  return computed(() => {
+    const baseStyles = runIfFn(styleConfig.baseStyle ?? {}, mergedProps)
+    const variants = runIfFn(
+      styleConfig.variants?.[mergedProps.variant] ?? {},
+      mergedProps
+    )
+
+    const sizes = runIfFn(
+      styleConfig.sizes?.[mergedProps.size] ?? {},
+      mergedProps
+    )
+
+    type ComponentStyles = SystemStyleObject | Record<string, SystemStyleObject>
+    const styles = mergeWith({}, baseStyles, sizes, variants) as ComponentStyles
+
+    if (options.isMultiPart && styleConfig.parts) {
+      styleConfig.parts.forEach((part: keyof ComponentStyles) => {
+        // @ts-expect-error
+        styles[part] = styles[part] ?? {}
+      })
+    }
+
+    return styles
+  })
+}
+
+export function useMultiStyleConfig(
+  themeKey: AllThemedComponents,
+  themingProps: any
+) {
+  return useStyleConfig(themeKey, themingProps, { isMultiPart: true })
+}
+
+/** Provides Chakra Multi-parted component styles to descendants */
+export const provideComponentStyles = (
+  component: AllThemedComponents,
+  styles: SystemStyleObject
+) => {
+  provide<SystemStyleObject>(`$chakra${component}Styles`, styles)
+}
+
+/** Injects Chakra Multi-parted component styles from ancestor */
+export const useComponentStyles = (component: AllThemedComponents) => {
+  return inject<SystemStyleObject>(`$chakra${component}Styles`)
+}