npm package: @mirweb/mir-web-components
Description: This is Mobile Industrial Robots component library for MiR Main, Support Portal and Academy built in Vue 3 + TypeScript + Vite.
Latest version: 2.15.0

# MiRs Vue Component library

This is Mobile Industrial Robots component library for MiR Main, Support Portal and Academy built in Vue 3 + TypeScript + Vite.

## Setup

Make sure to install the dependencies:

```bash
pnpm install
```

## Development Server

Start the development server

```bash
pnpm dev
```

## Production

Build the library for production:

```bash
pnpm build
```

## How to create a new component

Create a new folder and file under _/components_

Import the component in **App.vue** for development, e.g.:

```bash
import frontpageHero from "@/components/blocks/frontpage-hero/frontpage-hero.vue";
```

Import the global styles in **App.vue**

```bash
@import "@/assets/main.scss";
```

When the component is developed, remember to export it in both **index.ts** and **main.ts** under _/components_ - and clean up **App.vue** before committing. 



## NPM Release workflow

When changes are pushed to the main branch, a new version of the npm package will automatically be released via GitHub Actions. This is possible by using semantic-release, which analyzes the newly added commits and updates the npm package version number accordingly. For this to work as intended, commit messages must follow the Angular Commit Message convention.


See table below for examples -

| **Commit Message Pattern** | **Release Type** | **Example Commit Message** | **Example Version Change** | **Notes** |
|-----------------------------|------------------|-----------------------------|-----------------------------|------------|
| `fix(scope): summary` | **Patch (Fix release)** | `fix(button): fix styling on button` | `v0.1.0 → v0.1.1` | Used for bug fixes and small patches. |
| `feat(scope): summary` | **Minor (Feature release)** | `feat(button): add button component` | `v0.1.0 → v0.2.0` | Used when adding new features that don’t break existing functionality. |
| `perf(scope): summary` +<br>`BREAKING CHANGE: description` | **Major (Breaking release)** | `perf(button): remove button component`<br>`BREAKING CHANGE: The button component has been removed for performance reasons.` | `v0.1.0 → v1.0.0` | “BREAKING CHANGE:” must appear in the footer of the commit message. Indicates incompatible API changes. |


_*Defining the scope is optional. Commit messages can also be written as, e.g. “feat: add new feature”_

_**If the scope is set to “no-release”, then the commit won’t trigger a release_

_***Additional commit types can be configured with the commit-analyzer plugin_

### Local testing environment using the latest changes to componentlibrary

To test your latest changes to the componentlibrary without having to merge and deploy trough Git you should first delete the dist folder in your component library and then run the following command:

```bash
pnpm build
```

Now you should change the following line in your package.json on the portal you are working on eg. mirwebfrontend:

```bash
"dependencies": {
    "@mirweb/mir-web-components": "file:<PATH TO COMPONENTLIBRARY>",
```

For instance: "@mirweb/mir-web-components": "file:C:/github/componentlibrary",

Now run the following commands

```bash
pnpm i
pnpm build
node .output/server/index.mjs
```

#### Tools to enforce valid commit messages

Check out the following tools:

https://github.com/commitizen/cz-cli 

https://github.com/conventional-changelog/commitlint