Merge pull request #1 from chakra-ui/release/playground

Release/playground

Author: codebender828

.DS_Store

@@ -1,2 +1,7 @@
 node_modules
-dist
+dist
+
+# At the time of writing this, I could not find any helpful
+# documentation for adding ESLint for Vue 3 projects running on Vite.
+# For this reason, we ignore the playground directory.
+playground

.eslintignore

@@ -3,11 +3,22 @@ env:
   es2021: true
   node: true
 extends:
-  - standard
+  - prettier/@typescript-eslint
+  - plugin:prettier/recommended
+  - plugin:vue/essential
+  - '@vue/typescript/recommended'
 parser: '@typescript-eslint/parser'
 parserOptions:
   ecmaVersion: 12
   sourceType: module
 plugins:
   - '@typescript-eslint'
-rules: {}
+rules: 
+  '@typescript-eslint/member-delimiter-style':
+    - error
+    - multiline:
+        delimiter: none
+        requireLast: false
+      singleline:
+        delimiter: comma
+        requireLast: false

.eslintrc.yml

@@ -1,3 +1,4 @@
 node_modules
 dist
-_templates
+playground/src/.generated/imports.js
+playground/src/.generated/routes.json

.gitignore

@@ -0,0 +1,5 @@
+# .prettierrc or .prettierrc.yaml
+trailingComma: "es5"
+tabWidth: 2
+semi: false
+singleQuote: true

.prettierrc.yml

@@ -0,0 +1,19 @@
+---
+to: packages/<%=h.changeCase.paramCase(name)%>/src/index.ts
+---
+
+import { h, defineComponent, PropType } from 'vue'
+
+const <%= h.changeCase.pascalCase(name) %> = defineComponent({
+  props: {
+    as: {
+      type: Object as PropType<string>,
+      default: 'div',
+    },
+  },
+  setup(props, { slots, attrs }) {
+    return h(props?.as, { ...attrs }, slots.default?.())
+  },
+})
+
+export default <%= h.changeCase.pascalCase(name) %>

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

@@ -0,0 +1,25 @@
+---
+to: packages/<%=h.changeCase.paramCase(name)%>/package.json
+---
+
+{
+  "name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
+  "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 | ' + h.changeCase.pascalCase(name) + ' component'%>",
+  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
+  "author": "codebender828 [email protected]",
+  "license": "MIT",
+  "scripts": {
+    "build": "concurrently yarn:build:*",
+    "build:esm": "cross-env swc src --out-dir dist/esm/",
+    "build:cjs": "cross-env swc -C module.type=commonjs src --out-dir dist/cjs/",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+  }
+}

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

@@ -0,0 +1,11 @@
+---
+to: packages/<%=h.changeCase.paramCase(name)%>/tests/<%=h.changeCase.paramCase(name)%>.test.ts
+---
+import { render } from '@chakra-ui/vue-test-utils'
+import <%= h.changeCase.pascalCase(name) %> from '../'
+
+
+it('should render properly', () => {
+  const { html } = render(<%= h.changeCase.pascalCase(name) %>)
+  expect(html()).toMatchSnapshot()
+})

_templates/generator/component/test-file.test.ts.ejs.t

@@ -0,0 +1,8 @@
+---
+to: packages/<%=h.changeCase.paramCase(name)%>/tsconfig.json
+---
+
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}

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

@@ -0,0 +1,19 @@
+---
+to: packages/<%=h.changeCase.paramCase(name)%>/src/<%=h.changeCase.paramCase(name)%>.ts
+---
+
+import { h, defineComponent } from 'vue'
+
+const <%= h.changeCase.pascalCase(name) %> = defineComponent({
+  props: {
+    as: {
+      type: Object as PropType<string>,
+      default: 'div',
+    },
+  },
+  setup(props, { slots, attrs }) {
+    return h(props?.as, { ...attrs }, slots.default?.())
+  },
+})
+
+export default <%= h.changeCase.pascalCase(name) %>