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:

pnpm install

Development Server

Start the development server

pnpm dev

Production

Build the library for production:

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.:

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

Import the global styles in App.vue

@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 +BREAKING CHANGE: description | Major (Breaking release) | perf(button): remove button componentBREAKING 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:

pnpm build

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

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

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

Now run the following commands

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