npm package: @pernod-ricard/archipelago-vue
Description: Vue components library of Pernod Ricard's Archipelago Design System
Author: Pernod Ricard
Latest version: 1.1.1

# Archipelago Vue

This project based on `Archipelago Core` CSS library is a Vue 3 components library.

It uses Vue 3 and Vite.

## Technologies

Les outils suivants sont nécessaires pour ce projet :

| Techno  | Version        |
| ------- | -------------- |
| Node.js | 20.0.0 minimum |

> **Note :** Si vous avez des projets qui dépendent de différentes versions de Node.js, vous pouvez utiliser [nvm](https://github.com/creationix/nvm) ou [nvm-windows](https://github.com/coreybutler/nvm-windows) pour installer plusieurs versions côte à côte.

## Recommended IDE Setup

-   [VSCode](https://code.visualstudio.com/)
-   [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
-   [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-   [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-   [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
-   [Vitest](https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer)

All this extensions are registered in `extensions.json` file so your IDE should ask you to install them.

This project ships [ESLint](https://eslint.org/) and [Stylelint](https://stylelint.io/) linters.

You must follow pre-configured rules and verify there are no problems before creating a pull request.

You could check with this following command :

```sh
npm run lint
```

And if you want to automatically fix certain problems, you could run

```sh
npm run lint:fix
```

## How to install the project

You need to use NodeJS with a minimum version at 20.x.

Then, you juste have to do this following command :

```sh
npm install
```

## How to create a component

This library contains code snippets that make it easier to create component and its documentation. In Visual Studio Code, snippets appear in IntelliSense mixed with other suggestions, as well as in a dedicated snippet picker (Insert Snippet in the Command Palette).

Snippets are scoped to file type. You have to create a new file with `.vue` or `md` extension and the name of your component, before using the `archipelago component` snippet.

**Be careful !** If your component has custom types, you need to document them in `docs/types` directory.

## How to document a component

Documentation is based on [Vitepress](https://vitepress.dev/).

It uses Markdown format but with some plugins, which are helpful to run Vue code in Markdown files.

To run documentation, you just have to run this following command :

```sh
npm run docs:dev
```

> ⚠️ **You need to build the project before running documentation**

```sh
npm run build
```

## How to test a component

In this library, we use [Cypress](https://www.cypress.io/).

Cypress is a powerful testing tool and integrates component testing method by default.

It has better ways to do E2E testing than [Vitest](https://vitest.dev/).

You have two methods to run tests :

1 - This command runs all tests in your console and shows results steps by steps

```sh
npm run test:run
```

2 - This command runs graphical Cypress UI and allows you to debug your tests in local

```sh
npm run test:watch
```

To create a test for you component, you first need to create a file `pr-[component].cy.ts` in your component folder.

Then, you need to create a `mountComponent` method to mount your component (you can see examples in other components).

After that, you need to create a first test named `should has default props` and test your component's default props.
(Be careful, **don't use** await `mountComponent` because it's depreciated, instead use `mountComponent().then()`)

Finally, test all your interactions with you component.
(Be careful, you **should not** await `mountComponent` otherwise it mights not work)

## How to commit and push

This library is based on [Husky](https://typicode.github.io/husky/#/) Git hooks.

It contains two types of hooks

1 - Pre-commit

Pre-commit hook verify if your commit respects [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) convention.

If not, your commit will be rejected.

2 - Pre-push

Pre-push hook verify if your branch respects [Git flow](https://danielkummer.github.io/git-flow-cheatsheet/index.fr_FR.html) naming convention.

If not, your push will be rejected