feat(Vue): add CONTRIBUTING.md

package.json

@@ -9,43 +9,48 @@
     "bootstrap": "lerna bootstrap && lerna link",
     "bootstrap:clean": "run-s clean bootstrap",
     "build": "yarn build:all",
-    "build:all": "run-s build:icons build:core build:react build:angular build:angularjs",
+    "build:all": "run-s build:icons build:core build:react build:angular build:angularjs build:vue",
     "build:angular": "cd ./angular && yarn build:lib",
     "build:angularjs": "cd ./angularjs && yarn build",
     "build:core": "cd ./core && yarn build:lib",
     "build:icons": "cd ./icons && yarn build",
     "build:react": "cd ./react && yarn build:lib",
     "build:sinks": "cd ./core && yarn build:app",
     "build:utils": "cd ./utils && yarn build",
+    "build:vue": "cd ./vue && yarn build",
     "build:data": "rimraf ./data && node ./tools/generateComponentsData.js",
     "serve:core": "cd ./core && yarn open:dist",
     "ci:publish": "yarn release",
-    "ci:test": "run-s ci:test:icons ci:test:core ci:test:react ci:test:angular",
+    "ci:test": "run-s ci:test:icons ci:test:core ci:test:react ci:test:angular ci:test:vue",
     "ci:test:core": "cd ./core && yarn test",
     "ci:test:core:percy": "cd ./core && yarn test:percy",
     "ci:test:icons": "cd ./icons && yarn test",
     "ci:test:react": "cd ./react && yarn test:CI",
     "ci:test:angular": "cd ./angular && yarn test:CI",
     "ci:test:percy": "run-s ci:test:icons ci:test:core:percy ci:test:react ci:test:angular",
+    "ci:test:vue": "cd ./vue && yarn test:CI",
     "cypress:verify": "cypress verify",
     "clean": "rimraf node_modules/ **/node_modules/",
     "commit": "npx git-cz",
     "data": "run-s build:data data:pushToDB",
     "data:pushToDB": "node ./tools/postComponentsToDB.js",
-    "lint:all": "run-p lint:icons lint:core lint:react lint:angular",
+    "lint:all": "run-p lint:icons lint:core lint:react lint:angular lint:vue",
     "lint:angular": "cd ./angular && yarn lint",
     "lint:icons": "cd ./icons && yarn lint",
     "lint:core": "cd ./core && yarn lint",
     "lint:react": "cd ./react && yarn lint",
+    "lint:vue": "cd ./vue && yarn lint",
     "release": "./tools/release.sh",
-    "start:all": "run-p start:core start:angular start:react",
+    "start:all": "run-p start:core start:angular start:react start:vue",
     "start:angular": "cd ./angular && yarn start",
     "start:core": "cd ./core && yarn start",
     "start:react": "cd ./react && yarn start",
-    "test:all": "run-p test:angular test:react",
+    "start:vue": "cd ./vue && yarn start",
+    "test:all": "run-p test:angular test:react test:vue",
     "test:react": "cd ./react && yarn test",
     "test:angular": "cd ./angular && yarn test",
     "test:angularjs": "cd ./angularjs && yarn test",
+    "test:vue": "cd ./vue && yarn test",
     "postinstall": "rimraf angular/src/lib/node_modules/rxjs && yarn build:utils"
   },
   "devDependencies": {

vue/CONTRIBUTING.md

@@ -0,0 +1,65 @@
+
+# Contributing
+
+##### We'd love for you to contribute to our source code and to make Momentum UI Vue even better than it is today! Below are the guidelines to follow.
+
+## Table of Contents
+
+- [Questions, Issues or Ideas](../CONTRIBUTING.md#question)
+  - [Issues](../CONTRIBUTING.md#issue)
+  - [Features](../CONTRIBUTING.md#feature)
+- [Requirements](../CONTRIBUTING.md#requirements)
+- [Development Environment](../CONTRIBUTING.md#environment)
+- [Running the project locally](#running)
+- [Adding a new component](#component)
+- [Testing](#testing)
+- [Code Guidelines](#rules)
+- [Commit Guidelines](../CONTRIBUTING.md#commit)
+- [Submitting a Code Review](../CONTRIBUTING.md#code-review)
+
+## <a name="running"></a> Running the project locally
+
+* Run the play script which will build and watch the library, then serve it at localhost:5000
+  * `yarn start` from the vue (momentum-ui/vue) directory
+  * `yarn start:vue` from the root (momentum-ui) directory
+* You can access the playground `localhost:5000`
+
+## <a name="component"></a> Adding a new component
+1.  cd into the vue directory: `cd vue/`
+2.  Use yarn scripts to create yourComponent. Replace `<component-name>` with the kebab-cased name of the new component.
+    * Create Component: `yarn new <component-name>`
+3.  Start the app and the new component will now be availble in the Playground.
+
+### Your components directory should look like this:
+``` bash
+└── lib
+    └── sample                                    # component directory
+        ├── sample.vue                            # component file
+        ├── index.js                              # barrel file
+        ├── examples                              # examples directory
+        |   ├── example-sample-default.vue        # default example component
+        |   └── index.json                        # examples barrel file
+        └── tests                                 # tests directory
+            ├── sample.spec.js                    # component unit test
+            └── __snapshots__                     # snapshots directory (will be generated Jest)
+                └── sample.spec.js.snap           # snapshots file (will be generated by Jest)
+```
+**You can also reference the sample component at `src/lib/sample/`
+
+## <a name="testing"></a> Testing
+* In the `<component-name>/tests/` directory, ensure that you add tests to cover all of the component code.
+* Run the test and ensure that all tests are passing by running:
+  * `yarn test` from the vue (momentum-ui/vue) directory
+  * `yarn test:vue` from the root (momentum-ui) directory
+
+
+## <a name="rules"></a> Coding Guidelines
+
+### Vue TypeScript
+
+We follow the vue [Style Guide](https://vue.io/guide/styleguide)
+
+
+## License
+
+By contributing your code to the `@momentum-ui/vue` GitHub repository, you agree to license your contribution under the MIT license.

vue/package.json

@@ -10,14 +10,18 @@
   ],
   "typings": "types/index.d.ts",
   "scripts": {
+    "build": "yarn build:lib",
     "build:lib": "node tools/bin/build-lib.js",
     "build:example": "node tools/bin/build-example.js",
     "clean": "rimraf lib",
     "deploy:build": "yarn run build:lib",
     "dist": "yarn run clean && yarn run build:lib && yarn run lint && webpack --config tools/webpack.conf.js && webpack --config tools/webpack.common.js && webpack --config tools/webpack.component.js",
     "lint": "eslint src/**/* --quiet",
-    "play": "yarn run build:lib && yarn run build:example && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config tools/webpack.demo.js",
-    "test": "jest"
+    "new": "node tools/bin/new.js",
+    "start": "yarn run build:lib && yarn run build:example && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config tools/webpack.demo.js",
+    "test": "jest",
+    "test:aot": "yarn build --prod",
+    "test:CI": "yarn test:aot && jest --maxWorkers=2 --bail"
   },
   "homepage": "http://momentum.design",
   "repository": {

vue/src/lib/sample/examples/example-sample-default.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <md-sample>Default</md-sample>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ExampleSampleDefault',
+};
+</script>

vue/src/lib/sample/examples/index.json

@@ -0,0 +1,3 @@
+[
+  "example-sample-default"
+]

vue/src/lib/sample/tests/__snapshots__/sample.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sample should match snapshot 1`] = `<main class="md-sample"></main>`;

vue/src/lib/sample/tests/sample.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import Sample from '../sample.vue';
+
+describe('Sample', () => {
+  it('should match snapshot', () => {
+    const wrapper = shallowMount(Sample);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

vue/tools/bin/new.js

@@ -42,24 +42,41 @@ export default {
   },
   {
     filename: path.join('./tests', `${componentname}.spec.js`),
-    content: `import { createTest, destroyVM } from '../util';
-import ${ComponentName} from 'src/lib/${componentname}';
+    content: `import { shallowMount } from '@vue/test-utils';
+import ${ComponentName} from '../${componentname}';
 
 describe('${ComponentName}', () => {
-  let vm;
-  afterEach(() => {
-    destroyVM(vm);
-  });
-
-  it('create', () => {
-    vm = createTest(${ComponentName}, true);
-    expect(vm.$el).to.exist;
+  it('should match snapshot', () => {
+    const wrapper = shallowMount(${ComponentName});
+    expect(wrapper.html()).toMatchSnapshot();
   });
 });
 `
   },
   {
-    filename: path.join('./../types', `${componentname}.d.ts`),
+    filename: path.join('./examples', `example-${componentname}-default.vue`),
+    content: `<template>
+  <div>
+    <md-${componentname}></md-${componentname}>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Example${ComponentName}Default',
+};
+</script>
+`
+  },
+  {
+    filename: './examples/index.json',
+    content: `[
+  "example-${componentname}-default"
+]
+`
+  },
+  {
+    filename: path.join('../../../types', `${componentname}.d.ts`),
     content: `import { MomentumUIComponent } from './component'
 
 /** ${ComponentName} Component */

vue/types/momentum-ui.d.ts

@@ -14,4 +14,3 @@ export function install (vue: typeof Vue, options: InstallationOptions): void
 
 /** Bagde Component */
 export class Badge extends Badge {}
-