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 ou nvm-windows pour installer plusieurs versions côte à côte.

Recommended IDE Setup

• VSCode
• Volar (and disable Vetur).
• ESLint
• Prettier
• Stylelint
• Vitest

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

This project ships ESLint and Stylelint 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 :

npm run lint

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

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 :

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.

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 :

npm run docs:dev

⚠️ You need to build the project before running documentation

npm run build

How to test a component

In this library, we use Cypress.

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

It has better ways to do E2E testing than Vitest.

You have two methods to run tests :

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

npm run test:run

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

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 Git hooks.

It contains two types of hooks

1 - Pre-commit

Pre-commit hook verify if your commit respects Conventional Commits convention.

If not, your commit will be rejected.

2 - Pre-push

Pre-push hook verify if your branch respects Git flow naming convention.

If not, your push will be rejected