feat(themeprovider): add theme provider components and provide theme from plugin)

Author: codebender828

_templates/generator/component/package.json.ejs.t

@@ -20,6 +20,10 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
     "build": "concurrently yarn:build:*",
     "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
-    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps --watch",
+    "watch:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
   }
 }

package.json

@@ -16,7 +16,9 @@
     "playground:routes": "ts-node ./scripts/parse-routes.ts",
     "dev": "yarn playground:routes && NODE_ENV=development vite serve playground --config ./vite.config.ts",
     "playground:build": "yarn install && yarn build && yarn playground:routes && NODE_ENV=production vite build playground",
+    "core": "yarn workspace @chakra-ui/vue-next",
     "c-alert": "yarn workspace @chakra-ui/c-alert",
+    "c-theme-provider": "yarn workspace @chakra-ui/c-theme-provider",
     "c-box": "yarn workspace @chakra-ui/c-box",
     "c-button": "yarn workspace @chakra-ui/c-button",
     "system": "yarn workspace @chakra-ui/system-vue",

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

@@ -3,7 +3,7 @@
     font-weight="bold"
     px="4"
     py="3"
-    bg="yellow.300"
+    :bg="['yellow.300', 'blue.200']"
     aria-role="alert"
     rounded="md"
   >

packages/c-alert/src/index.ts

@@ -13,10 +13,9 @@ const CAlert = defineComponent({
   setup(props, { slots, attrs }) {
     return () =>
       h(
-        chakra[props.as],
+        chakra(props.as, 'alert'),
         {
           ...attrs,
-          class: 'chakra-alert',
           role: 'alert',
         },
         slots

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

@@ -13,7 +13,6 @@ export default defineComponent({
   components: { CBox },
   setup() {
     const val = ref('Hello box')
-    console.log('Base box setup ')
 
     return { val }
   },

packages/c-theme-provider/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@chakra-ui/c-theme-provider",
+  "version": "1.0.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "description": "Chakra UI Vue | CThemeProvider component",
+  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
+  "author": "Jonathan Bakebwa [email protected]",
+  "license": "MIT",
+  "scripts": {
+    "build": "concurrently yarn:build:*",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps --watch",
+    "watch:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
+  }
+}

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

@@ -0,0 +1,28 @@
+import {
+  h,
+  defineComponent,
+  Fragment,
+  PropType,
+  provide,
+  inject,
+  computed,
+} from 'vue'
+import { ThemeProviderProps } from '@chakra-ui/vue-next'
+
+const CThemeProvider = defineComponent({
+  name: 'CAlert',
+  props: {
+    value: {
+      type: [Object] as PropType<ThemeProviderProps>,
+      default: () => undefined,
+    },
+  },
+  setup(props, { slots }) {
+    const pluginTheme = inject('$chakraTheme')
+    const applicationTheme = computed(() => props.value || pluginTheme)
+    provide('$chakraTheme', applicationTheme.value)
+    return () => h(Fragment, slots.default?.({ $chakraTheme: props.value }))
+  },
+})
+
+export default CThemeProvider

packages/c-theme-provider/tests/c-theme-provider.test.ts

@@ -0,0 +1,7 @@
+import { render } from '@chakra-ui/vue-test-utils'
+import CThemeProvider from '../'
+
+it('should render properly', () => {
+  const { html } = render(CThemeProvider)
+  expect(html()).toMatchSnapshot()
+})

packages/c-theme-provider/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}

packages/core/package.json

@@ -16,6 +16,10 @@
     "build": "concurrently yarn:build:*",
     "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
-    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps --watch",
+    "watch:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
   }
 }