Feature/prop types

.changeset/orange-camels-doubt.md

@@ -0,0 +1,32 @@
+---
+'@chakra-ui/c-accordion': patch
+'@chakra-ui/c-alert': patch
+'@chakra-ui/c-button': patch
+'@chakra-ui/c-close-button': patch
+'@chakra-ui/c-code': patch
+'@chakra-ui/c-color-mode': patch
+'@chakra-ui/c-flex': patch
+'@chakra-ui/c-focus-lock': patch
+'@chakra-ui/c-icon': patch
+'@chakra-ui/c-modal': patch
+'@chakra-ui/c-motion': patch
+'@chakra-ui/c-popper': patch
+'@chakra-ui/c-portal': patch
+'@chakra-ui/c-reset': patch
+'@chakra-ui/c-scroll-lock': patch
+'@chakra-ui/c-spinner': patch
+'@chakra-ui/c-theme-provider': patch
+'@chakra-ui/c-visually-hidden': patch
+'@chakra-ui/vue-next': patch
+'@chakra-ui/vue-layout': patch
+'@chakra-ui/vue-system': patch
+'@chakra-ui/vue-theme': patch
+'@chakra-ui/vue-theme-tools': patch
+'@chakra-ui/vue-utils': patch
+'@chakra-ui/vue-a11y': patch
+'@chakra-ui/vue-composables': patch
+'@chakra-ui/vue-auto-import': patch
+'@chakra-ui/vue-docs': patch
+---
+
+Migrated layout packages to TSX \nMigrate test suite to esbuild-jest runner. \nAdded intellisense support for Chakra UI Vue components

babel.config.js

@@ -20,7 +20,7 @@ const baseConfig = function (api) {
     ],
     '@babel/preset-typescript',
   ]
-  const plugins = ['@vue/babel-plugin-jsx']
+  const plugins = ['@vue/babel-plugin-jsx', '@babel/plugin-transform-runtime']
 
   return {
     presets,

components.d.ts

@@ -0,0 +1,154 @@
+/**
+ * Typescript support for @@chakra-ui/vue-next1.0.0-alpha.4 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-06-30T14:10:23.013Z
+ */
+
+import { ChakraProps } from '@chakra-ui/vue-system'
+import { VNodeChild, HTMLAttributes } from 'vue'
+
+export type JsxNode = VNodeChild | JSX.Element
+
+export interface SlotDirective {
+  [name: string]: () => JsxNode
+}
+
+type JsxComponentCustomProps = {
+  vModel?: unknown
+  vModels?: unknown[]
+  vCustom?: unknown[]
+  vShow?: boolean
+  vHtml?: JsxNode
+  vSlots?: SlotDirective
+} & Omit<HTMLAttributes, 'innerHTML'> & {
+    innerHTML?: JsxNode
+  }
+
+declare module 'vue' {
+  /* Global component types for Volar auto-complete */
+  export interface GlobalComponents {
+    CAlert: typeof import('@chakra-ui/vue-next')['CAlert']
+    CAlertTitle: typeof import('@chakra-ui/vue-next')['CAlertTitle']
+    CAlertDescription: typeof import('@chakra-ui/vue-next')['CAlertDescription']
+    CAlertIcon: typeof import('@chakra-ui/vue-next')['CAlertIcon']
+    CButton: typeof import('@chakra-ui/vue-next')['CButton']
+    CButtonGroup: typeof import('@chakra-ui/vue-next')['CButtonGroup']
+    CIconButton: typeof import('@chakra-ui/vue-next')['CIconButton']
+    CFocusLock: typeof import('@chakra-ui/vue-next')['CFocusLock']
+    CAspectRatio: typeof import('@chakra-ui/vue-next')['CAspectRatio']
+    CBadge: typeof import('@chakra-ui/vue-next')['CBadge']
+    CBox: typeof import('@chakra-ui/vue-next')['CBox']
+    CSquare: typeof import('@chakra-ui/vue-next')['CSquare']
+    CCircle: typeof import('@chakra-ui/vue-next')['CCircle']
+    CCenter: typeof import('@chakra-ui/vue-next')['CCenter']
+    CContainer: typeof import('@chakra-ui/vue-next')['CContainer']
+    CDivider: typeof import('@chakra-ui/vue-next')['CDivider']
+    CGrid: typeof import('@chakra-ui/vue-next')['CGrid']
+    CGridItem: typeof import('@chakra-ui/vue-next')['CGridItem']
+    CHeading: typeof import('@chakra-ui/vue-next')['CHeading']
+    CLink: typeof import('@chakra-ui/vue-next')['CLink']
+    CLinkOverlay: typeof import('@chakra-ui/vue-next')['CLinkOverlay']
+    CLinkBox: typeof import('@chakra-ui/vue-next')['CLinkBox']
+    CList: typeof import('@chakra-ui/vue-next')['CList']
+    COrderedList: typeof import('@chakra-ui/vue-next')['COrderedList']
+    CUnorderedList: typeof import('@chakra-ui/vue-next')['CUnorderedList']
+    CListItem: typeof import('@chakra-ui/vue-next')['CListItem']
+    CListIcon: typeof import('@chakra-ui/vue-next')['CListIcon']
+    CKbd: typeof import('@chakra-ui/vue-next')['CKbd']
+    CSimpleGrid: typeof import('@chakra-ui/vue-next')['CSimpleGrid']
+    CSpacer: typeof import('@chakra-ui/vue-next')['CSpacer']
+    CStackDivider: typeof import('@chakra-ui/vue-next')['CStackDivider']
+    CStackItem: typeof import('@chakra-ui/vue-next')['CStackItem']
+    CStack: typeof import('@chakra-ui/vue-next')['CStack']
+    CHStack: typeof import('@chakra-ui/vue-next')['CHStack']
+    CVStack: typeof import('@chakra-ui/vue-next')['CVStack']
+    CText: typeof import('@chakra-ui/vue-next')['CText']
+    CModal: typeof import('@chakra-ui/vue-next')['CModal']
+    CModalContent: typeof import('@chakra-ui/vue-next')['CModalContent']
+    CModalOverlay: typeof import('@chakra-ui/vue-next')['CModalOverlay']
+    CModalHeader: typeof import('@chakra-ui/vue-next')['CModalHeader']
+    CModalBody: typeof import('@chakra-ui/vue-next')['CModalBody']
+    CModalFooter: typeof import('@chakra-ui/vue-next')['CModalFooter']
+    CModalCloseButton: typeof import('@chakra-ui/vue-next')['CModalCloseButton']
+    CMotion: typeof import('@chakra-ui/vue-next')['CMotion']
+    CPortal: typeof import('@chakra-ui/vue-next')['CPortal']
+    CScrollLock: typeof import('@chakra-ui/vue-next')['CScrollLock']
+    CVisuallyHidden: typeof import('@chakra-ui/vue-next')['CVisuallyHidden']
+    CVisuallyHiddenInput: typeof import('@chakra-ui/vue-next')['CVisuallyHiddenInput']
+    'chakra.a': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.b': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.article': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.aside': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.blockquote': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.button': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.caption': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.cite': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.circle': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.code': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.dd': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.div': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.dl': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.dt': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.fieldset': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.figcaption': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.figure': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.footer': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.form': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.h1': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.h2': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.h3': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.h4': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.h5': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.h6': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.header': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.hr': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.iframe': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.img': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.input': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.kbd': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.label': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.li': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.mark': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.main': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.nav': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.ol': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.p': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.path': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.pre': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.q': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.rect': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.s': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.svg': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.section': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.select': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.strong': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.small': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.span': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.sub': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.sup': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.table': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.tbody': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.td': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.textarea': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.tfoot': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.th': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.thead': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.tr': typeof import('@chakra-ui/vue-next')['CBox']
+    'chakra.ul': typeof import('@chakra-ui/vue-next')['CBox']
+  }
+
+  /* Component custom props types for JSX and TSX auto complete */
+  export interface ComponentCustomProps
+    extends JsxComponentCustomProps,
+      ChakraProps {
+    onClick?: () => any
+    vSlots?: {
+      [eleName: string]: JSX.Element
+    }
+  }
+}

jest.config.js

@@ -1,19 +1,23 @@
 module.exports = {
   transform: {
-    '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest/dist',
+    '^.+\\.(ts|tsx)$': [
+      'esbuild-jest',
+      {
+        jsxFactory: 'h',
+        jsxFragment: 'Fragment',
+        sourcemap: true,
+        target: 'es2020',
+      },
+    ],
   },
   transformIgnorePatterns: ['/node_modules/(?!@popperjs/.*|lodash.)'],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/$1',
     '@chakra-ui/vue-test-utils': '<rootDir>/packages/test-utils/src/index.ts',
   },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   snapshotSerializers: [
     '@chakra-ui/vue-test-utils/dist/cjs/snapshot-serializer.js',
   ],
   testMatch: ['**/**/*.test.(js|jsx|ts|tsx)'],
-  globals: {
-    'ts-jest': {
-      tsconfig: 'tsconfig.json',
-    },
-  },
 }

package.json

@@ -39,6 +39,7 @@
   "dependencies": {
     "@babel/cli": "^7.12.8",
     "@babel/core": "^7.12.9",
+    "@babel/plugin-transform-runtime": "^7.13.15",
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-typescript": "^7.12.7",
     "@chakra-ui/styled-system": "^1.10.0",
@@ -47,6 +48,9 @@
     "@changesets/cli": "^2.14.1",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@cypress/snapshot": "^2.1.7",
+    "@cypress/vite-dev-server": "^1.2.6",
+    "@cypress/vue": "^3.0.1",
     "@emotion/css": "^11.1.3",
     "@emotion/server": "^11.0.0",
     "@manypkg/cli": "^0.17.0",
@@ -55,6 +59,7 @@
     "@testing-library/user-event": "^12.6.2",
     "@testing-library/vue": "^6.3.4",
     "@types/body-scroll-lock": "^2.6.1",
+    "@types/eslint": "^7.2.13",
     "@types/jest": "^26.0.20",
     "@types/jest-axe": "^3.5.1",
     "@types/lodash.camelcase": "^4.3.6",
@@ -68,6 +73,7 @@
     "@vue/babel-plugin-jsx": "^1.0.3",
     "@vue/compiler-sfc": "^3.0.11",
     "@vue/eslint-config-typescript": "^5.1.0",
+    "@vue/test-utils": "^2.0.0-rc.6",
     "@vuedx/typecheck": "^0.4.1",
     "@vuedx/typescript-plugin-vue": "^0.4.1",
     "@vueuse/core": "4.9.1",
@@ -84,9 +90,14 @@
     "cross-env": "^7.0.2",
     "css-get-unit": "^1.0.1",
     "csstype": "^3.0.5",
+    "cypress": "^7.2.0",
+    "cypress-commands": "^1.1.0",
+    "cypress-plugin-tab": "^1.0.5",
     "dequal": "^2.0.2",
     "dom-focus-lock": "^1.0.4",
-    "esbuild-jest": "^0.4.0",
+    "esbuild": "^0.12.12",
+    "esbuild-jest": "0.4.0",
+    "esbuild-plugin-babel": "^0.2.3",
     "eslint": "^7.0.0",
     "eslint-config-prettier": "^6.12.0",
     "eslint-config-standard": "^14.1.1",
@@ -106,6 +117,7 @@
     "jest-transform-stub": "^2.0.0",
     "lerna": "^3.22.1",
     "lint-staged": "^10.5.3",
+    "local-cypress": "^1.2.1",
     "lodash.camelcase": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.mergewith": "^4.6.2",
@@ -118,7 +130,7 @@
     "ts-jest": "^26.5.0",
     "ts-node": "^9.0.0",
     "typescript": "^4.1.3",
-    "vite": "2.2.4",
+    "vite": "^2.3.8",
     "vite-plugin-components": "^0.8.3",
     "vite-plugin-pages": "^0.9.2",
     "vitepress": "^0.12.0",
@@ -127,16 +139,5 @@
     "vue-prism-editor": "^2.0.0-alpha.2",
     "vue-router": "^4.0.6",
     "vue3-perfect-scrollbar": "^1.5.5"
-  },
-  "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.13.15",
-    "@cypress/snapshot": "^2.1.7",
-    "@cypress/vite-dev-server": "^1.2.6",
-    "@cypress/vue": "^3",
-    "@vue/test-utils": "^2.0.0-rc.6",
-    "cypress": "^7.2.0",
-    "cypress-commands": "^1.1.0",
-    "cypress-plugin-tab": "^1.0.5",
-    "local-cypress": "^1.2.1"
   }
 }

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

@@ -1,3 +1,7 @@
 <template>
   <c-alert> HELLO ALERT </c-alert>
 </template>
+
+<script lang="ts" setup>
+import { CDivider } from '../../layout/src'
+</script>

packages/c-alert/package.json

@@ -34,10 +34,6 @@
     "@chakra-ui/vue-utils": "0.1.0-alpha.2"
   },
   "devDependencies": {
-    "vue": ">=3.0.5"
-  },
-  "peerDependencies": {
-    "@chakra-ui/vue-system": "0.1.0-alpha.2",
-    "vue": "^3.0.5"
+    "vue": "^3.0.11"
   }
 }

packages/c-button/package.json

@@ -36,10 +36,6 @@
     "@chakra-ui/vue-utils": "0.1.0-alpha.2"
   },
   "devDependencies": {
-    "vue": ">=3.0.5"
-  },
-  "peerDependencies": {
-    "@chakra-ui/vue-system": "0.1.0-alpha.2",
-    "vue": "^3.0.5"
+    "vue": "^3.0.11"
   }
 }

packages/c-close-button/package.json

@@ -42,10 +42,7 @@
     "@chakra-ui/vue-system": "0.1.0-alpha.2",
     "@chakra-ui/vue-utils": "0.1.0-alpha.2"
   },
-  "peerDependencies": {
-    "vue": ">=3.0.5"
-  },
   "devDependencies": {
-    "vue": ">=3.0.5"
+    "vue": "^3.0.11"
   }
 }

packages/c-code/package.json

@@ -41,11 +41,7 @@
     "@chakra-ui/vue-system": "0.1.0-alpha.2"
   },
   "devDependencies": {
-    "vue": ">=3.0.5"
-  },
-  "peerDependencies": {
-    "@chakra-ui/vue-system": "0.1.0-alpha.2",
-    "vue": "^3.0.5"
+    "vue": "^3.0.11"
   },
   "contributors": [
     "Vivek Wadhwani <[email protected]>"

packages/c-color-mode/package.json

@@ -38,10 +38,7 @@
   "dependencies": {
     "@chakra-ui/utils": "^1.5.0"
   },
-  "peerDependencies": {
-    "vue": ">=3.0.5"
-  },
   "devDependencies": {
-    "vue": ">=3.0.5"
+    "vue": "^3.0.11"
   }
 }

packages/c-flex/package.json

@@ -37,16 +37,11 @@
     "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
   },
   "dependencies": {
-    "@chakra-ui/vue-utils": "0.1.0-alpha.2",
-    "csstype": "^3.0.5"
-  },
-  "devDependencies": {
     "@chakra-ui/vue-system": "0.1.0-alpha.2",
-    "vue": ">=3.0.5"
+    "@chakra-ui/vue-utils": "0.1.0-alpha.2"
   },
-  "peerDependencies": {
-    "@chakra-ui/vue-system": "0.1.0-alpha.2",
+  "devDependencies": {
     "csstype": "^3.0.5",
-    "vue": "^3.0.5"
+    "vue": "^3.0.11"
   }
 }