Move components package to packages/vue-components

.eslintignore

@@ -1,7 +1,7 @@
 *.min.*
-frontend
 node_modules
 packages/core/src/lib/markdown-it/*
 packages/core/src/lib/markdown-it-shared/*
+packages/vue-components
 
 !.eslintrc.js

.stylelintignore

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

docs/devGuide/design.md

@@ -20,7 +20,7 @@ The MarkBind project is developed in a monorepo ([MarkBind/markbind](https://git
 
 * The core library, which resolves the content include path and renders Markdown content, resides in the `packages/core/` directory.
 
-* The UI components library, which MarkBind authors can use to create content with complex and interactive structure, resides in the `frontend/components/` directory.
+* The UI components library, which MarkBind authors can use to create content with complex and interactive structure, resides in the `packages/vue-components/` directory.
 
   Stack used: *Node.js*, *Vue.js*
 

docs/devGuide/projectManagement.md

@@ -76,11 +76,11 @@ For general best practices, refer to the guide [_Working with PRs_ @SE-EDU](http
 ### Building the UI components library
 
 1. **Start with a "clean slate"** by running `npm run ci:all` or `npm run ciwin:all` in the root markbind directory, as this may affect the generated bundle.
-1. **Build the bundle** by executing `npm run build:components` in the root directory, after which you should see changes in `frontend/components/dist/components.min.js`.
+1. **Build the bundle** by executing `npm run build:components` in the root directory, after which you should see changes in `packages/vue-components/dist/components.min.js`.
 
    <box type="info" seamless>
 
-   Building the UI components bundle is optional if there are no changes to the files in `frontend/components/` since the last release of MarkBind.
+   Building the UI components bundle is optional if there are no changes to the files in `packages/vue-components/` since the last release of MarkBind.
    </box>
    <box type="info" seamless>
 
@@ -97,7 +97,7 @@ For general best practices, refer to the guide [_Working with PRs_ @SE-EDU](http
    * If there are significant changes (e.g. breaking changes, new release), a `minor` release is needed:
      1. Run `npm version minor` as per normal.
 
-     1. Update the version number inside the `frontend/components/` and `packages/core/` packages similarly using `npm version minor` (as `npm version` does not update the subpackage versions automatically).
+     1. Update the version number of `packages/core/` and `packages/vue-components/` similarly using `npm version minor` (as `npm version` does not update the subpackage versions automatically).
 
    * We rarely do `major` releases, but if necessary, the steps are the same as the `minor` release (just change `minor` to `major`).
 

docs/devGuide/workflow.md

@@ -97,7 +97,7 @@ To add a page to an existing test site, for this example, to `test_site`:
 
 ##### Adding snapshot tests for components
 
-When making changes to the Vue components in `frontend/components`, you should add new snapshot tests or adapt existing ones as appropriate.
+When making changes to the Vue components in `packages/vue-components`, you should add new snapshot tests or adapt existing ones as appropriate.
 
 Once you're done, be sure to run the `updatetest` script mentioned [above](#updating-and-writing-tests)!
 

jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   testPathIgnorePatterns: [
-    '/frontend/',
     '/node_modules/',
+    '/packages/vue-components/',
     '/test/functional/',
   ],
 };

package.json

@@ -22,34 +22,34 @@
   },
   "scripts": {
     "autolint": "npm run lintfix && npm run csslintfix",
-    "build:components": "cd frontend/components && npm run build",
-    "ci:all": "npm ci && cd frontend/components && npm ci",
+    "build:components": "cd packages/vue-components && npm run build",
+    "ci:all": "npm ci && cd packages/vue-components && npm ci",
     "ciwin:all": "npm ci && npm run install:components",
     "csslint": "stylelint **/*.css",
     "csslintfix": "stylelint **/*.css --fix",
     "install:all": "npm install && npm run install:core && npm run install:components",
-    "install:components": "cd frontend/components && npm install",
+    "install:components": "cd packages/vue-components && npm install",
     "install:core": "npm install packages/core",
     "jest": "jest",
     "lint": "npm run lint:cli && npm run lint:components",
     "lint:cli": "eslint .",
-    "lint:components": "cd frontend/components && npm run lint",
+    "lint:components": "cd packages/vue-components && npm run lint",
     "lintfix": "npm run lintfix:cli && npm run lintfix:components",
     "lintfix:cli": "eslint . --fix",
-    "lintfix:components": "cd frontend/components && npm run lintfix",
+    "lintfix:components": "cd packages/vue-components && npm run lintfix",
     "pretest": "npm run lint && npm run csslint",
     "pretestwin": "npm run lint && npm run csslint",
     "test": "npm run test:cli && npm run test:components",
     "test:cli": "jest && cd test/functional && ./test.sh",
-    "test:components": "cd frontend/components && npm run test",
+    "test:components": "cd packages/vue-components && npm run test",
     "testwin": "npm run testwin:cli && npm run test:components",
     "testwin:cli": "jest && cd test/functional && test.bat",
     "updatetest": "npm run updatetest:cli && npm run updatetest:components",
     "updatetest:cli": "cd test/functional && ./update.sh",
-    "updatetest:components": "cd frontend/components && npm run updatesnapshot",
+    "updatetest:components": "cd packages/vue-components && npm run updatesnapshot",
     "updatetestwin": "npm run updatetestwin:cli && npm run updatetest:components",
     "updatetestwin:cli": "cd test/functional && update.bat",
-    "watch:components": "cd frontend/components && npm run watch"
+    "watch:components": "cd packages/vue-components && npm run watch"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.7.2",

frontend/components/package.json → packages/vue-components/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vue-components",
+  "name": "@markbind/vue-components",
   "version": "2.14.1",
   "description": "Bootstrap components built with Vue.js",
   "keywords": [
@@ -19,7 +19,8 @@
   "main": "dist/components.min.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/MarkBind/markbind.git"
+    "url": "https://github.com/MarkBind/markbind.git",
+    "directory": "packages/vue-components"
   },
   "scripts": {
     "build": "webpack --progress --hide-modules --config  webpack.build.js",

src/Site.js

@@ -1137,7 +1137,7 @@ class Site {
    * Copies components.min.js bundle to the assets folder
    */
   copyComponentsAsset() {
-    const componentsSrcPath = path.join(__dirname, '..', 'frontend', 'components', 'dist',
+    const componentsSrcPath = path.join(__dirname, '..', 'packages', 'vue-components', 'dist',
                                         'components.min.js');
     const componentsDestPath = path.join(this.siteAssetsDestPath, 'js', 'components.min.js');
 

test/unit/Site.test.js

@@ -43,7 +43,7 @@ test('Site Generate builds the correct amount of assets', async () => {
     'asset/js/setup.js': '',
     'asset/js/vue.min.js': '',
 
-    'frontend/components/dist/components.min.js': '',
+    'packages/vue-components/dist/components.min.js': '',
 
     'node_modules/@fortawesome/fontawesome-free/css/all.min.css': '',
     'node_modules/@fortawesome/fontawesome-free/webfonts/font1.svg': '',