feat(accordion): create accordion component

Author: codebender828

_templates/generator/component/index.ts.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: packages/<%=h.changeCase.paramCase(name)%>/src/index.ts
+to: packages/<%=h.changeCase.paramCase(name)%>/src/index.tsx
 ---
 
 export * from './<%=h.changeCase.paramCase(name)%>'

_templates/generator/component/src-index.tsx.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: packages/<%=h.changeCase.paramCase(name)%>/index.ts
+to: packages/<%=h.changeCase.paramCase(name)%>/index.tsx
 ---
 
 export * from './src'

_templates/generator/module/src.ts.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: packages/<%=h.changeCase.paramCase(name)%>/src/index.ts
+to: packages/<%=h.changeCase.paramCase(name)%>/src/index.tsx
 ---
 const <%= h.changeCase.pascalCase(name) %> = () => {
   return {}

_templates/generator/tooling/src.ts.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: tooling/<%=h.changeCase.paramCase(name)%>/src/index.ts
+to: tooling/<%=h.changeCase.paramCase(name)%>/src/index.tsx
 ---
 const <%= h.changeCase.pascalCase(name) %> = () => {
   return {}

docs/guides/component-guide.md

@@ -51,7 +51,7 @@ start building, here's what you need to do:
 
 - Before you can play around with your new component in the playground you will have to export your component from the `@chakra-ui/vue-next` package in the  `core` directory under `packages`.
 
-  * Inside the `index.ts` file, you will have to add `export * from '@chakra-ui/COMPONENT_NAME'`. 
+  * Inside the `index.tsx` file, you will have to add `export * from '@chakra-ui/COMPONENT_NAME'`. 
 
   * Your component also needs to be added as a dependency inside the `package.json` of the `@chakra-ui/vue-next` package as following: 
     ```jsx

jest.config.js

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

package.json

@@ -54,12 +54,14 @@
     "@babel/core": "^7.12.9",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-typescript": "^7.12.7",
+    "@chakra-ui/anatomy": "^2.0.1",
     "@chakra-ui/styled-system": "^1.18.1",
     "@chakra-ui/utils": "^2.0.3",
     "@changesets/changelog-github": "^0.3.0",
     "@changesets/cli": "^2.14.1",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@ctrl/tinycolor": "^3.4.1",
     "@cypress/snapshot": "^2.1.7",
     "@cypress/vite-dev-server": "^1.2.6",
     "@cypress/vue": "^3.0.3",
@@ -102,6 +104,8 @@
     "@vueuse/head": "^0.7.4",
     "@vueuse/integrations": "^4.8.1",
     "@vueuse/motion": "^1.5.4",
+    "@zag-js/accordion": "^0.1.9",
+    "@zag-js/vue": "^0.1.9",
     "aria-hidden": "^1.1.2",
     "axe-core": "^4.1.2",
     "babel-jest": "^26.6.3",
@@ -154,7 +158,7 @@
     "tinycolor2": "^1.4.2",
     "ts-jest": "^26.5.0",
     "ts-node": "^9.0.0",
-    "typescript": "4.5.4",
+    "typescript": "4.6.4",
     "unplugin-vue-components": "^0.14.0",
     "vite": "^2.8.6",
     "vite-plugin-mdx-vue": "^1.6.0",

packages/anatomy/README.md

@@ -0,0 +1,11 @@
+# @chakra-ui/vue-anatomy
+
+The anatomy of all chakra components
+
+## Installation
+
+```sh
+yarn add @chakra-ui/vue-anatomy
+# or
+npm i @chakra-ui/vue-anatomy
+```

packages/anatomy/examples/base-vue-anatomy.vue

@@ -0,0 +1,3 @@
+<template>
+  <vue-anatomy> HELLO Anatomy </vue-anatomy>
+</template>

packages/anatomy/index.tsx

@@ -0,0 +1 @@
+export * from './src'