Merge /vue-strap into /markbind

.eslintignore

@@ -1,4 +1,5 @@
 *.min.*
+frontend
 src/lib/markbind/src/lib/markdown-it/*
 src/lib/markbind/src/lib/markdown-it-shared/*
 

.gitignore

@@ -21,6 +21,9 @@ coverage
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
+# Vue-strap coverage reports
+coverage
+
 # node-waf configuration
 .lock-wscript
 

.stylelintignore

@@ -1,3 +1,4 @@
 **/*.min.css
 **/_site/**/*.css
+frontend/components/**/*.css
 test/functional/**/expected/**/*.css

docs/devGuide/design.md

@@ -14,21 +14,15 @@ This page gives you an overview of the MarkBind's internal design.
 
 ## Project structure
 
-MarkBind project consists of two repos:
+The MarkBind project is developed in a monorepo ([MarkBind/markbind](https://github.com/MarkBind/markbind)) of 3 packages:
 
-* [MarkBind](https://github.com/MarkBind/markbind)
+* The command-line interface (CLI) application, which accepts commands from users and then uses the core library to parse and generate web pages, resides in the root.
 
-  * The command-line interface (CLI) application that accepts commands from users, and uses the core library to parse and generate web pages resides in the root.
+* The core library, which resolves the content include path and renders Markdown content, resides in the `src/lib/markbind/` directory.
 
-  * The core library that resolves the content include path, and the rendering of Markdown contents resides in the `lib/markbind/` directory.
+* The UI components library, which MarkBind authors can use to create content with complex and interactive structure, resides in the `frontend/components/` directory.
 
-  Stack used: *Node.js*
-
-* [VueStrap library (forked version modified for MarkBind)](https://github.com/MarkBind/vue-strap)
-
-  * The UI components library used in MarkBind project. Users could use it in their contents to create complex and interactive structure.
-
-  Stack used: *Vue.js*
+  Stack used: *Node.js*, *Vue.js*
 
 ### MarkBind core library
 
@@ -62,8 +56,8 @@ The CLI program is built using [commander.js](https://github.com/tj/commander.js
 
 The auto deployment library used is [gh-pages](https://github.com/tschaub/gh-pages).
 
-### VueStrap
+### UI components library
 
-The VueStrap library is [Bootstrap](getbootstrap.com/components/) components rewritten in [Vue.js](vuejs.org). We forked it from the original repo, and changed it based on our needs for educational websites.
+This package consists of a mix of [Bootstrap](getbootstrap.com/components/) and proprietary components rewritten in [Vue.js](vuejs.org) based on our needs for educational websites.
 
-You can find more information at the [VueStrap repo](https://github.com/MarkBind/vue-strap).
+We forked it from the original [yuche/vue-strap](https://github.com/yuche/vue-strap) repo into the [MarkBind/vue-strap](https://github.com/MarkBind/vue-strap) repo, and then later merged it into the main [MarkBind/markbind](https://github.com/MarkBind/markbind) repo.

docs/devGuide/projectManagement.md

@@ -73,15 +73,15 @@ For general best practices, refer to the guide [_Working with PRs_ @SE-EDU](http
   You need to login to npm on your terminal with `npm adduser` first, before you can publish packages to npm.
 </box>
 
-### Building Vue-Strap
+### Building the UI components library
 
-1. **Navigate to the root** directory for vue-strap
+1. **Navigate to the components** directory by running `cd frontend/components` in the root directory of MarkBind.
 1. **Update dependencies** by running `npm install`
-1. **Build the assets** by executing `npm run build` after which you should see changes in `vue-strap.min.js`.
+1. **Build the assets** by executing `npm run build`, after which you should see changes in `frontend/components/dist/vue-strap.min.js`.
 
    <box type="info" seamless>
 
-   Building vue-strap is optional if there's no changes since the last release of MarkBind. If there are no changes to the three files mentioned above, skip to the "Building MarkBind" section.
+   Building vue-strap is optional if there's no changes to the components since the last release of MarkBind. If there are no changes to the three files mentioned above, skip to the "Building MarkBind" section.
    </box>
    <box type="info" seamless>
 
@@ -109,18 +109,18 @@ For general best practices, refer to the guide [_Working with PRs_ @SE-EDU](http
 
 1. **Navigate to the root** directory for MarkBind
 1. **Update dependencies** by running `npm install`
-1. **If we did a new vue-strap release**:
+1. **If we did a new release for the Vue components**:
 
    Copy `vue-strap.min.js` from the vue-strap repository to the main asset folder, and to each of the test site's `expected/` folder.
 
    ```sh
    # copy to main asset folder
-   $ cp <VUE_STRAP_REPO>/dist/vue-strap.min.js <MARKBIND_REPO>/asset/js/vue-strap.mins.js
-   # for each test site's expected folder:
-   $ cp <VUE_STRAP_REPO>/dist/vue-strap.min.js <MARKBIND_REPO>/test/functional/<TEST_SITE_NAME>/expected/markbind/js/vue-strap.min.js
+   $ cp frontend/components/dist/vue-strap.min.js asset/js/vue-strap.min.js
    ```
+
+   Run `npm updatetest` and ensure only the minified bundle is copied to each of the expected test site's folders. If there are other changes, discard them for now - refer to **Rebuild the test files**.
 
-   Commit the new vue-strap assets (replace `XYZ` with version number).
+   Commit only the new vue-strap assets (replace `XYZ` with version number).
 
    ```sh
    $ git commit -m 'Update vue-strap version to v2.0.1-markbind.XYZ'

frontend/components/.eslintignore

@@ -0,0 +1,31 @@
+*.min.*
+dist
+src/directives/Closeable.js
+src/directives/Float.js
+src/utils/NodeList.js
+src/utils/utils.js
+
+!.eslintrc.js
+
+# yuche/vue-strap
+src/Affix.vue
+src/Dropdown.vue
+src/index.js
+src/main.js
+src/Navbar.vue
+src/Panel.vue
+src/Tab.vue
+src/TabGroup.vue
+src/Tabset.vue
+src/Typeahead.vue
+
+# MarkBind/vue-strap
+src/panels/MinimalPanel.vue
+src/panels/NestedPanel.vue
+src/panels/PanelBase.js
+src/panels/PanelSwitch.vue
+src/Pic.vue
+src/Question.vue
+src/Retriever.vue
+src/Thumbnail.vue
+src/TipBox.vue

frontend/components/.eslintrc.js

@@ -0,0 +1,37 @@
+module.exports = {
+  'env': {
+    'node': true,
+    'es6': true,
+    'jest': true,
+  },
+  'extends': ['airbnb-base', 'plugin:vue/recommended'],
+  'root': true,
+  'rules': {
+    'array-bracket-newline': ['error', { 'multiline': true }],
+    'func-names': 'off',
+    'function-paren-newline': 'off',
+    'indent': [
+      'error',
+      2,
+      {
+        'CallExpression': { 'arguments': 'first' },
+        'FunctionDeclaration': { 'parameters': 'first' },
+        'FunctionExpression': { 'parameters': 'first' },
+      },
+    ],
+    'max-len': ['error', { 'code': 110 }],
+    'operator-linebreak': ['error', 'before'],
+    'quote-props': 'off',
+    'vue/html-self-closing': [
+      'error',
+      {
+        'html': {
+          'void': 'always',
+          'normal': 'never',
+        },
+      },
+    ],
+    'vue/max-attributes-per-line': ['error', { 'singleline': 2 }],
+    'vue/order-in-components': 'off',
+  },
+};

frontend/components/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 yuche
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

frontend/components/README.md

@@ -0,0 +1,78 @@
+# MarkBind Vue components
+
+This folder contains MarkBind's [Vue.js](https://vuejs.org/) UI components.
+
+Most of the styles are based on Bootstrap's markup and CSS, but no dependency on Bootstrap's JavaScript is required. The only required dependencies are:
+
+* [Vue.js](http://vuejs.org/) (required ^v2.x.x, test with v2.5.16).
+* [Bootstrap CSS](http://getbootstrap.com/) (required 4.x.x, test with 4.1.1). VueStrap doesn't depend on a very precise version of Bootstrap.
+
+## Components / directives
+
+Many of the components under this folder were originally from [MarkBind/vue-strap](https://github.com/MarkBind/vue-strap), forked from [yuche/vue-strap](https://github.com/yuche/vue-strap), and modified to suit MarkBind's needs for educational and documentation websites.
+
+Some custom directives were also added for MarkBind's use.
+
+### MarkBind components ported from [Markbind/vue-strap](https://github.com/MarkBind/vue-strap):
+
+- Pic.vue
+- Question.vue
+- Retriever.vue
+- Searchbar.vue
+- SearchbarPageItem.vue
+- Thumbnail.vue
+- TipBox.vue
+
+### Custom directives ported from [Markbind/vue-strap](https://github.com/MarkBind/vue-strap)
+
+- Closeable.js
+- Float.js
+
+### VueStrap components modified for use in MarkBind
+
+- Affix.vue
+- Dropdown.vue
+- Navbar.vue
+- NestedPanel.vue
+- MinimalPanel.vue
+- Tab.vue
+- TabGroup.vue
+- Tabset.vue
+- Typeahead.vue
+
+## Installation
+
+### Browser globals
+
+The `dist` folder contains `vue-strap.js` and `vue-strap.min.js` with all components exported in the `window.VueStrap` object.
+
+```html
+<script src="path/to/vue.js"></script>
+<script src="path/to/vue-strap.js"></script>
+<script>
+    var vm = new Vue({
+        components: {
+            alert: VueStrap.alert
+        },
+        el: "#app",
+        data: {
+            showRight: false,
+            showTop: false
+        }
+    })
+</script>
+```
+
+## Docs
+See the [documentation](https://markbind.org/userGuide/usingComponents.html) with live editable examples.
+
+## Local Setup
+* Install with `npm install`.
+* Build with `npm run build`.
+
+## Lint the code for any code and style errors using ESLint
+* For Unix: `npm run lint`
+* For Windows: `npm run lintwin`
+
+## License
+Both vue-strap and the modifications made are licensed under [The MIT License](LICENSE).

frontend/components/babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: 'umd',
+      },
+    ],
+  ],
+  plugins: ['@babel/plugin-transform-runtime'],
+};