Merge branch 'develop' of https://github.com/chakra-ui/chakra-ui-vue-next into feat/css-reset

Author: codebender828

.gitignore

@@ -1,6 +1,99 @@
-node_modules
 dist
 # playground/src/.generated/*
 .vercel
 yarn-error.log
-test-vite-project
+test-vite-project
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+.cache/
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# vscode history extension
+.history

packages/c-alert/src/alert.ts

@@ -1,15 +1,16 @@
-import { h, defineComponent, PropType, provide, inject, computed } from 'vue'
+import { h, defineComponent, PropType, computed } from 'vue'
 import {
   chakra,
   ColorScheme,
   DeepComponentThemeConfig,
   ThemingProps,
   useMultiStyleConfig,
-  provideComponentStyles,
-  useComponentStyles,
+  useStyles,
+  StylesProvider,
   DOMElements,
 } from '@chakra-ui/vue-system'
 import { SystemStyleObject } from '@chakra-ui/styled-system'
+import { createContext } from '@chakra-ui/vue-utils'
 import { CIcon } from '@chakra-ui/c-icon'
 
 const STATUSES = {
@@ -34,10 +35,16 @@ const STATUSES = {
 type AlertStatus = keyof typeof STATUSES
 export type AlertVariant = 'solid' | 'subtle' | 'left-accent' | 'top-accent'
 
-interface AlertState {
+interface AlertContext {
   status: AlertStatus
 }
 
+const [AlertProvider, useAlertContext] = createContext<AlertContext>({
+  name: 'AlertContext',
+  errorMessage:
+    'useAlertContext: `context` is undefined. Seems you forgot to wrap alert components in `<c-alert />`',
+})
+
 /**
  * CAlert component
  *
@@ -84,8 +91,8 @@ export const CAlert = defineComponent({
       ...styles.value.container,
     }
 
-    provideComponentStyles('Alert', styles.value)
-    provide('$AlertState', { status: props.status } as AlertState)
+    StylesProvider(styles.value)
+    AlertProvider({ status: props.status })
 
     return () =>
       h(
@@ -108,7 +115,7 @@ export const CAlert = defineComponent({
 export const CAlertTitle = defineComponent({
   name: 'CAlertTitle',
   setup(_, { attrs, slots }) {
-    const styles = useComponentStyles('Alert')
+    const styles = useStyles()
 
     return () =>
       h(
@@ -130,7 +137,7 @@ export const CAlertTitle = defineComponent({
 export const CAlertDescription = defineComponent({
   name: 'CAlertDescription',
   setup(_, { attrs, slots }) {
-    const styles = useComponentStyles('Alert')
+    const styles = useStyles()
 
     return () =>
       h(
@@ -157,9 +164,9 @@ export const CAlertIcon = defineComponent({
     },
   },
   setup(props, { attrs }) {
-    const alertState = inject<AlertState>('$AlertState')
-    const { icon } = STATUSES[alertState?.status as AlertStatus]
-    const styles = useComponentStyles('Alert')
+    const { status } = useAlertContext()
+    const { icon } = STATUSES[status]
+    const styles = useStyles()
 
     const alertIcon = computed(() => props.icon || icon)
 

packages/system/src/composables/use-style-config.ts

@@ -1,4 +1,4 @@
-import { computed, ComputedRef, inject, provide, ref } from 'vue'
+import { computed, ComputedRef } from 'vue'
 
 import { SystemStyleObject } from '@chakra-ui/styled-system'
 import { ChakraComponentName, ComponentThemeConfig } from '@chakra-ui/vue-theme'
@@ -83,18 +83,3 @@ export function useMultiStyleConfig(
 ) {
   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<Record<string, SystemStyleObject> & SystemStyleObject & any>(
-    `$chakra${component}Styles`
-  )
-}

packages/system/src/index.ts

@@ -1,4 +1,5 @@
 export * from './chakra'
+export * from './providers'
 export * from './system.attrs'
 export * from './system.types'
 export * from './system.utils'

packages/system/src/providers.ts

@@ -0,0 +1,10 @@
+import { createContext, Dict } from '@chakra-ui/vue-utils'
+import { SystemStyleObject } from '@chakra-ui/styled-system'
+
+const [StylesProvider, useStyles] = createContext<Dict<SystemStyleObject>>({
+  name: 'StylesContext',
+  errorMessage:
+    'useStyles: `styles` is undefined. Seems you forgot to provide `StylesProvider(...)` ',
+})
+
+export { StylesProvider, useStyles }

packages/utils/src/index.ts

@@ -9,6 +9,7 @@ export * from './tabbable'
 export * from './assertion'
 export * from 'css-box-model'
 export * from './responsive'
+export * from './vue-helpers'
 
 export function orient(options: {
   orientation?: 'vertical' | 'horizontal'

packages/utils/src/vue-helpers.ts

@@ -0,0 +1,50 @@
+import { inject, InjectionKey, provide } from 'vue'
+
+export interface CreateContextOptions {
+  /**
+   * If `true`, Vue will throw if context is `null` or `undefined`
+   * In some cases, you might want to support nested context, so you can set it to `false`
+   */
+  strict?: boolean
+  /**
+   * Error message to throw if the context is `undefined`
+   */
+  errorMessage?: string
+  /**
+   * The display name of the context
+   */
+  name?: string
+}
+
+type CreateContextReturn<T> = [(opts: T) => void, () => T]
+
+/**
+ * Creates a named context, provider, and hook.
+ *
+ * @param options create context options
+ */
+export function createContext<ContextType>(options: CreateContextOptions = {}) {
+  const {
+    strict = true,
+    errorMessage = 'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider',
+    name,
+  } = options
+
+  let contextSymbol = Symbol(`${name}Symbol`) as InjectionKey<ContextType>
+
+  function Provider(payload: ContextType) {
+    provide<ContextType>(contextSymbol, payload)
+  }
+
+  function useContext() {
+    const context = inject(contextSymbol, null)
+
+    if (!context && strict) {
+      throw new Error(errorMessage)
+    }
+
+    return context
+  }
+
+  return [Provider, useContext] as CreateContextReturn<ContextType>
+}

packages/utils/tests/vue-helpers.test.ts

@@ -0,0 +1,52 @@
+import { createContext } from '@chakra-ui/vue-utils/src'
+import { defineComponent, h } from 'vue'
+import { render } from '@chakra-ui/vue-test-utils/src'
+
+interface ExampleContext {
+  example: string
+}
+
+const [ExampleProvider, useExampleContext] = createContext<ExampleContext>({
+  name: 'ExampleContext',
+  errorMessage:
+    'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider',
+})
+
+const ExampleComponent = defineComponent({
+  setup() {
+    const { example } = useExampleContext()
+    return () => h('div', `injected: ${example}`)
+  },
+})
+
+beforeEach(() => {
+  // disable console.warn
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+it('should provide and inject a context', () => {
+  const { getByText } = render({
+    components: { ExampleComponent },
+    template: `
+      <div>
+        <ExampleComponent />
+      </div>
+    `,
+    setup() {
+      ExampleProvider({ example: 'works' })
+    },
+  })
+  getByText(/works/)
+})
+
+it('should throw an error when there is no provider', () => {
+  expect(() => {
+    render({
+      components: { ExampleComponent },
+      template: `<ExampleComponent />`,
+      setup() {},
+    })
+  }).toThrowError(
+    'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider'
+  )
+})