Merge pull request #2 from chakra-ui/chore/use-babel

Chore/use babel

Author: codebender828

.eslintrc.yml

@@ -10,7 +10,7 @@ extends:
 parser: vue-eslint-parser
 parserOptions:
   parser: '@typescript-eslint/parser'
-  ecmaVersion: 12
+  ecmaVersion: 2020
   sourceType: module
 plugins:
   - '@typescript-eslint'

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,49 @@
+---
+name: Report a bug
+about: Create a bug report for the Chakra UI ecosystem
+---
+
+# Bug report
+
+## Describe the bug
+
+<!-- A clear and concise description of what the bug is. -->
+
+## To reproduce
+
+<!-- Clear and concise reproduction instructions are important for us to be
+able to triage your issue in a timely manner. -->
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+## Minimal reproduction
+
+<!-- Please provide a codesandbox link or GitHub repo with a minimal
+reproduction of the bug.
+
+Official Chakra CodeSandbox templates:
+- [JavaScript CodeSandbox template](https://codesandbox.io/s/github/chakra-ui/codesandbox-react-js-template/tree/master)
+- [TypeScript CodeSandbox template](https://codesandbox.io/s/github/chakra-ui/codesandbox-react-ts-template/tree/master)
+-->
+
+## Expected behavior
+
+<!-- A clear and concise description of what you expected to happen. -->
+
+## Screenshots
+
+<!-- If applicable, add screenshots to help explain your problem. -->
+
+## System information
+
+- OS: [e.g. macOS, Windows]
+- Browser (if applies): [e.g. Chrome, Safari]
+- Version of @chakra-ui/core: [e.g. 1.0.0-rc.3]
+- Version of Node.js: [e.g. 12.11.1]
+
+## Additional context
+
+<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,22 @@
+---
+name: Request a feature
+about: Create a feature request for the Chakra UI ecosystem
+---
+
+# Feature request
+
+## Is your feature request related to a problem? Please describe.
+
+<!-- A clear and concise description of what you want and what your use case is. -->
+
+## Describe the solution you'd like
+
+<!-- A clear and concise description of what you want to happen. -->
+
+## Describe alternatives you've considered
+
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
+
+## Additional context
+
+<!-- Add any other context or screenshots about the feature request here. -->

.github/pull_request_template.md

@@ -0,0 +1,48 @@
+<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://github.com/chakra-ui/chakra-ui/blob/develop/CONTRIBUTING.md -->
+
+## Pull request checklist
+
+Please check if your PR fulfills the following requirements:
+
+- [ ] Tests for the changes have been added (for bug fixes / features)
+- [ ] Docs have been reviewed and added / updated if needed (for bug fixes
+      /start features)
+
+## Pull request type
+
+<!-- Please do not submit updates to dependencies unless it fixes an issue. -->
+
+<!-- Please try to limit your pull request to one type, submit multiple pull requests if needed. -->
+
+Please check the type of change your PR introduces:
+
+- [ ] Bugfix
+- [ ] Feature
+- [ ] Code style update (formatting, renaming)
+- [ ] Refactoring (no functional changes, no api changes)
+- [ ] Build related changes
+- [ ] Documentation content changes
+- [ ] Other (please describe):
+
+## What is the current behavior?
+
+<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
+
+Fixes: [ISSUE NUMBER]
+
+## What is the new behavior?
+
+<!-- Please describe the behavior or changes that are being added by this PR. -->
+
+-
+-
+-
+
+## Does this introduce a breaking change?
+
+- [ ] Yes
+- [ ] No
+
+<!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. -->
+
+## Other information

README.md

@@ -0,0 +1,33 @@
+# `@chakra-ui/vue` for Vue 3 (WIP)
+
+The official working repository for V1 of Chakra UI Vue wit Vue 3 support.
+
+[See Roadmap](https://www.notion.so/4517ba273ef3409d8e0e9ec3d121f6c1?v=ce00244a41b74b79b4d01ee4c3aa61ec)
+
+### Install dependencies
+```bash
+yarn install
+```
+
+### Build components
+```bash
+yarn build
+```
+
+### Component playground (based on vite)
+```bash
+yarn dev
+```
+
+### Major todos:
+- [ ] Documentation (to be based on Nuxt 3)
+- [ ] Accessibility JS hooks (Documented in Roadmap)
+
+#### Contributors' note:
+Hi!
+
+I'm excited to finally get this project out in the open. I love working on Chakra! Of recent, between my startup(mid-pivot), school, ministry, and family, I have a limited amount of time every day, so I may not be very active online on Twitter/Discord/Github to respond to issues very actively. The reason for this is that I find that I'm most productive when I have less presence on social media(I need it to deliver my best work <3). Notwithstanding, I indeed am oft pleasantly surprised when I do see the help and support from the community and different contributors! Thank you!
+
+I have the entire Chakra UI core team members and Vue community to thank for their support, and for every contributor who does so by opening issues, writing tests and fixing bugs. I'm generally reachable by email at `[email protected]` or on `@codebender828` on Twitter and on the Chakra UI Discord.
+
+For now I'll be hacking away at these projects! Blessings!

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

@@ -18,8 +18,8 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
   "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: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"
   }
 }

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

@@ -5,14 +5,20 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
 {
   "name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
   "version": "1.0.0",
-  "main": "index.js",
+  "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) + ' module'%>",
   "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 swc src --out-dir dist/esm/",
-    "build:cjs": "cross-env swc -C module.type=commonjs src --out-dir dist/cjs/"
+    "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"
   }
 }

babel.config.js

@@ -0,0 +1,25 @@
+const BABEL_ENV = process.env.BABEL_ENV
+const isCommonJS = BABEL_ENV !== undefined && BABEL_ENV === 'cjs'
+const isESM = BABEL_ENV !== undefined && BABEL_ENV === 'esm'
+
+module.exports = function (api) {
+  api.cache(true)
+
+  const presets = [
+    [
+      '@babel/env',
+      {
+        loose: true,
+        modules: isCommonJS ? 'commonjs' : false,
+        targets: {
+          esmodules: isESM ? true : undefined,
+        },
+      },
+    ],
+    '@babel/preset-typescript',
+  ]
+
+  return {
+    presets,
+  }
+}

package.json

@@ -13,8 +13,8 @@
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "scaffold": "hygen",
     "playground:routes": "ts-node ./scripts/parse-routes.ts",
-    "playground": "yarn playground:routes && NODE_ENV=development vite serve playground",
-    "playground:build": "yarn playground:routes && NODE_ENV=production vite build playground",
+    "dev": "yarn playground:routes && NODE_ENV=development vite serve playground",
+    "playground:build": "yarn build && yarn playground:routes && NODE_ENV=production vite build playground",
     "c-alert": "yarn workspace @chakra-ui/c-alert",
     "c-box": "yarn workspace @chakra-ui/c-box",
     "c-button": "yarn workspace @chakra-ui/c-button",
@@ -23,12 +23,14 @@
   "license": "MIT",
   "private": true,
   "devDependencies": {
-    "@swc/cli": "^0.1.26",
-    "@swc/core": "^1.2.28",
+    "@babel/cli": "^7.12.8",
+    "@babel/core": "^7.12.9",
+    "@babel/preset-env": "^7.12.7",
+    "@babel/preset-typescript": "^7.12.7",
     "@types/jest": "^26.0.14",
     "@types/recursive-readdir": "^2.2.0",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
+    "@typescript-eslint/parser": "4.0.1",
     "@vue/eslint-config-typescript": "^5.1.0",
     "concurrently": "^5.3.0",
     "consola": "^2.15.0",
@@ -48,12 +50,20 @@
     "prettier": "^2.1.2",
     "recursive-readdir": "^2.2.2",
     "ts-node": "^9.0.0",
-    "typescript": "^4.0.3",
-    "vite": "^1.0.0-rc.4",
-    "vue": "^3.0.0",
+    "typescript": "^4.1.2",
+    "vite": "^1.0.0-rc.13",
+    "vue": "^3",
     "vue-router": "4.0.0-beta.10"
   },
   "dependencies": {
-    "change-case": "^4.1.1"
+    "@chakra-ui/theme-vue": "^0.2.6",
+    "@types/lodash.mergewith": "^4.6.6",
+    "@types/tinycolor2": "^1.4.2",
+    "change-case": "^4.1.1",
+    "css-get-unit": "^1.0.1",
+    "csstype": "^3.0.5",
+    "lodash.mergewith": "^4.6.2",
+    "object-assign": "^4.1.1",
+    "tinycolor2": "^1.4.2"
   }
 }

packages/c-accordion/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@chakra-ui/c-accordion",
+  "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 | CAccordion 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"
+  }
+}