pon-shared-pon.universe.frontend.shared.componentlibrary/README.md

shared components for Pon Universe

## Prerequisites

_! **It is expected that you open the Bash terminal in the root of the project. e.g. In Visual Studio Code the terminal is opened with shortcut `ctrl + ~`**_

e.g. `D:\web\Pon.Universe\Frontend.Shared.ComponentLibrary`

1.  Install NVM and restart your computer.

    - Windows: https://github.com/coreybutler/nvm-windows/releases. Download 'nvm-setup.zip'.
    - Linux: See 'Installation' section of [Node Version Manager](https://github.com/creationix/nvm#installation).

2.  Use NVM to install and set the correct version of Node.js. This should be the [LTS](https://en.wikipedia.org/wiki/Long-term_support) version.

    Windows:

    - Get `[version]` by checking the content of the `.nvmrc` file for the correct Node.js version.
    - Install that Node.js version by executing `$ nvm install [version]`
    - Set the correct NVM version by executing `$ nvm use [version]`

    _! Nvm for windows it is [not possible](https://github.com/coreybutler/nvm-windows/issues/169) to automatically read the `.nvmrc` file to set the correct version. So manually use the version of the `.nvmrc`._

    Linux:

    - Run `nvm use` to set the correct version of Node.js.

# Installation

_! **It is expected that you open the Bash terminal in the root of the project. e.g. In Visual Studio Code the terminal is opened with shortcut `ctrl + ~`**_

e.g. `D:\web\Pon.Universe\Frontend.Shared.ComponentLibrary`
node -v

1. Install the NPM packages by running the following command:

```
npm install
```

2. Link local packages together and install remaining package dependencies

```
lerna bootstrap
```

## Commands

### Publishes the components to the valtech nexus server: https://nexus.valtech.nl/repository/Pon.Universe.Frontend.Shared/

```
npm run publish
```

This command will first check the current git branch and state.
Publishing is only allowed from the develop branch and the branch must be up-to-date with no uncommited changes.
If those criteria are not met, the command will throw an exception and the publication will not continue.

### Lints and fixes files

```
npm run lint
```

### Run your unit tests

```
npm run test:unit
```

### More information on creating / deleting packages and adding dependencies to packages:

https://efocus.atlassian.net/wiki/spaces/PONUNI/pages/1237975718/Front-end+Shared+Component+Library

# Troubleshooting

Windows:

```
'npm' is not recognized as an internal or external command
```

Fix: Update to the latest `nvm` version and reinstall the used node version.
Version 1.1.6 of NVM is incompatible with the later downloads of node and causes an error when installing NPM.

---

```
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x
```

Fix: npm rebuild node-sass

# Tools

### For real-time code analysis & formatting in `Visual Studio Code`:

1.  Install a [EditorConfig](http://editorconfig.org/) plugin for your prefered IDE.
    - Visual Studio Code: e.g. `EditorConfig for VS Code`
2.  Install a [PrettierEditor](https://prettier.io/docs/en/editors.html) plugin for your prefered IDE.

    - Visual Studio Code: e.g. `Prettier - Code formatter`

    _! Make sure that you point your Editor to the .prettierignore in the root of the project._

    _! e.g. Visual Studio Code: If you open the editor in the root of the project `Pon.Universe/Automotive.Cluster.Common.CarSalesTool` you don't need to change anything._

3.  Install a [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) plugin for your prefered IDE.
    - Visual Studio Code: e.g. `ESLint`
4.  Install a [Vue](https://marketplace.visualstudio.com/items?itemName=octref.vetur) plugin for your prefered IDE.
    - Visual Studio Code: e.g. `Vetur`

### For real-time code analysis & formatting in `the browser`:

1. Install `Vue devtools` for the browser
   - Chrome: [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
   - Firefox: [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)

**Visual Studio Code Settings**

How to open the `settings.json` see [here](https://code.visualstudio.com/docs/getstarted/userinterface#_settings)

```json
    "editor.formatOnSave": true,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
```