add TypeScript support (#214)

also update deps + add e2e test boilerplate + fix lint errors

.circleci/config.yml

@@ -33,7 +33,9 @@ jobs:
       - run: *install_dependencies
       - save_cache: *save_cache
       - run: yarn test:unit
+      - run: yarn test:e2e
       - run: yarn lint
+      - run: yarn lint:style
 
   deploy-demos:
     <<: *defaults

.eslintrc.js

@@ -2,22 +2,24 @@ module.exports = {
   root: true,
   env: {
     node: true,
-    jest: true,
+    jest: true, // Optimal way to do this is through overrides, but they didn't work for me.
   },
   extends: [
-    '@vue/standard',
     'plugin:vue/essential',
-    'plugin:vue/strongly-recommended',
+    '@vue/standard',
+    '@vue/typescript/recommended',
   ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'comma-dangle': ['error', 'always-multiline'],
     curly: 'error',
     'array-bracket-spacing': ['error', 'never'],
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/ban-ts-ignore': 0,
+    '@typescript-eslint/camelcase': 0,
   },
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
-
 }

.gitignore

@@ -2,6 +2,9 @@
 node_modules
 /dist
 
+/tests/e2e/videos/
+/tests/e2e/screenshots/
+
 # local env files
 .env.local
 .env.*.local

README.md

@@ -7,27 +7,27 @@ yarn install
 
 ### Compiles and hot-reloads for development
 ```
-yarn run serve
+yarn serve
 ```
 
 ### Compiles and minifies for production
 ```
-yarn run build
+yarn build
 ```
 
 ### Run your tests
 ```
-yarn run test
+yarn test
 ```
 
 ### Lints and fixes files
 ```
-yarn run lint
+yarn lint
 ```
 
 ### Run your unit tests
 ```
-yarn run test:unit
+yarn test:unit
 ```
 
 ### Customize configuration

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app',
+    '@vue/cli-plugin-babel/preset',
   ],
 }

cypress.json

@@ -0,0 +1,3 @@
+{
+  "pluginsFile": "tests/e2e/plugins/index.js"
+}

docs/conventions.md

@@ -24,14 +24,22 @@ In future we also plan to be :
 * `prop="string-value"` is used instead of `:prop="'string-value'"`.
 * Short syntax is used for boolean props where possible (`hide` instead of `:hide="true"`).
 * Self closing tags are used where possible (`<slot/>` instead of `<slot></slot>`).
+* No shortcuts: always `button` and not `btn`. Your naming should be well understood by all developers.
+
+## TypeScript usage
+* You can use `@ts-nocheck` | `@ts-ignore` | `any` where it's appropriate. We want strict typing not to get in way of development. Also some mixins or plugins, such as context are fairly challenging to implement in a way to keep typing intact, and there is no much point given we will transition to Composition API sometime in the future.
+
+## Style
 * BEM is used for styles.
 * Rems are used for sizes (except for cases where it doesn't make sense).
-* No shortcuts: always `button` and not `btn`.
-* Use shortened function declaration:`buttonClass () {` instead of `buttonClass: function () {`.
 
-## CSS
-* We have both mixins (where that's possible) and global helpers. Mixins are prefixed with `va-`. Global classes are not prefixed.
-* Html tags are unstyled. For example, `table`, `li`, `h1` etc won't give you any styling. Styles are applied either via classes or `.content` wrapper.
+### Global classes
+* Global helpers should be considered a separate library/plugin. Components should not rely on global classes!
+* All vuestic global classes should be prefixed with `va-`.
+* Html tags are unstyled. For example, `table`, `li`, `h1` etc won't give you any styling. Apply styles either via classes or `.content` wrapper.
+
+### Components
+* Mixins should be used for style logic reuse inside components.
 
 ### Fonts
 

jest.config.js

@@ -1,30 +1,6 @@
 module.exports = {
-  moduleFileExtensions: [
-    'js',
-    'jsx',
-    'json',
-    'vue',
-  ],
-  transform: {
-    '^.+\\.vue$': 'vue-jest',
-    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-    '^.+\\.jsx?$': 'babel-jest',
-  },
-  transformIgnorePatterns: [
-    '/node_modules/',
-  ],
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1',
-  },
-  snapshotSerializers: [
-    'jest-serializer-vue',
-  ],
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
   testMatch: [
     '**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
   ],
-  testURL: 'http://localhost/',
-  watchPlugins: [
-    'jest-watch-typeahead/filename',
-    'jest-watch-typeahead/testname',
-  ],
 }

package.json

@@ -12,17 +12,21 @@
     "test:unit": "vue-cli-service test:unit",
     "serve:docs": "vuepress dev docs",
     "build:docs": "vuepress build docs",
+    "test:e2e": "vue-cli-service test:e2e",
     "push": "npm publish --tag=next",
     "push-production": "npm publish --tag=latest"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.12.0",
+    "@fortawesome/fontawesome-free": "^5.13.0",
     "@popperjs/core": "^2.1.1",
     "approximate-number": "^2.0.0",
     "asva-executors": "^0.1.22",
-    "chart.js": "^2.6.0",
-    "colortranslator": "^1.1.1",
-    "core-js": "^3.4.1",
+    "babel-loader": "^8.1.0",
+    "chart.js": "^2.9.3",
+    "colortranslator": "^1.3.1",
+    "core-js": "^3.6.4",
+    "detect-browser": "^5.0.0",
+    "element-resize-detector": "^1.2.1",
     "flatpickr": "4.5.1",
     "font-awesome": "^4.7.0",
     "ionicons": "^3.0.0",
@@ -31,43 +35,49 @@
     "normalize.css": "^8.0.1",
     "stylelint": "^13.2.1",
     "stylelint-config-standard": "^20.0.0",
-    "v-tooltip": "^2.0.0-rc.30",
+    "v-tooltip": "^2.0.3",
     "vue": "^2.6.11",
+    "vue-class-component": "^7.2.2",
     "vue-clipboard2": "^0.3.0",
     "vue-color": "^2.7.1",
     "vue-epic-bus": "^0.1.5",
     "vue-flatpickr-component": "^8.0.0",
+    "vue-property-decorator": "^8.3.0",
     "vue-router": "^3.1.6",
-    "vue-toasted": "^1.1.25",
-    "vue-yandex-maps": "^0.8.14",
-    "vuelidate": "^0.7.4",
+    "vue-toasted": "^1.1.28",
+    "vue-yandex-maps": "^0.10.6",
+    "vuelidate": "^0.7.5",
     "vuetable-2": "1.7.5",
-    "webpack": "^4.42.0"
+    "webpack": "^4.42.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.2.3",
-    "@vue/cli-plugin-eslint": "^4.2.3",
-    "@vue/cli-plugin-unit-jest": "^4.2.3",
-    "@vue/cli-service": "^4.2.3",
-    "@vue/eslint-config-standard": "^5.1.2",
+    "@types/jest": "^25.1.4",
+    "@typescript-eslint/eslint-plugin": "^2.18.0",
+    "@typescript-eslint/parser": "^2.18.0",
+    "@vue/cli-plugin-babel": "~4.2.0",
+    "@vue/cli-plugin-e2e-cypress": "~4.2.0",
+    "@vue/cli-plugin-eslint": "~4.2.0",
+    "@vue/cli-plugin-router": "~4.2.0",
+    "@vue/cli-plugin-typescript": "~4.2.0",
+    "@vue/cli-plugin-unit-jest": "~4.2.0",
+    "@vue/cli-service": "~4.2.0",
+    "@vue/eslint-config-standard": "^5.1.0",
+    "@vue/eslint-config-typescript": "^5.0.1",
     "@vue/test-utils": "1.0.0-beta.32",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^25.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-node": "^11.0.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "lint-staged": "^10.0.8",
-    "node-sass": "^4.13.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.1.2",
+    "lint-staged": "^10.1.1",
+    "sass": "^1.25.0",
     "sass-loader": "^8.0.2",
+    "typescript": "~3.8.3",
     "vue-book": "0.1.0-alpha.31",
-    "vue-bulma-expanding": "0.0.1",
     "vue-template-compiler": "^2.6.11",
-    "vuepress": "^1.3.1"
+    "vue-bulma-expanding": "0.0.1",
+    "vuepress": "^1.4.0"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

src/components/context-test/ContextTest.demo.vue

@@ -113,7 +113,7 @@ import VaTest from './ContextTest'
 import VaContext from './context-provide/VaContext'
 import VaButton from '../vuestic-components/va-button/VaButton'
 import VaBadge from '../vuestic-components/va-badge/VaBadge'
-import { overrideContextConfig } from '../context-test/context-provide/ContextPlugin'
+import { overrideContextConfig } from './context-provide/ContextPlugin'
 import { getContext } from '../context-test/context-provide/context'
 
 export default {