project-booster-vue

project-booster-vue

project-booster-vue is the typescript / vue3 implementation of the Project Booster components library.

It is based on the mozaic design system.

Visit the project-booster-vue storybook to discover available components.

Maintainers

Team: project-booster@adeo.com

Product Owners

• Sébastien Martinage
• Adrien Stadler
• Narjisse Loulanti
• Ekaterina Kelekhsaeva
• Yann Delaporte: yann.delaporte@ext.adeo.com

Developers

• Ndongo Wade
• Rémi Even
• Fabien Saulier
• Nicolas Inchauspé
• Tony Proum
• Nicolas Beaussart
• Faten Ghandour
• Clément Buchart
• Mickaël Margollé
• Jean-Baptiste Renault
• Maxime Drecourt
• Yassine Bourakba
• Anthony Pillot: anthony.pillot@ext.adeo.com
• Adrien Déprez: adrien.deprez@ext.adeo.com

Get started

Install

yarn add project-booster-vue --exact

You can now directly import project-booster-vue component in yours. For example:

import MFlex from 'project-booster-vue/src/components/mozaic/flex/MFlex';

Add it in the components property of your component and use it in your template:

<m-flex justify-content="space-between" align-items="center" full-width>
...
</m-flex>

Project setup

Requirements

• Node.js 16 (see .nvmrc)
• Python 3.11 — required by node-gyp to build native modules (e.g. deasync). Python 3.12+ removed distutils from the stdlib, which breaks the install. The version is pinned in mise.toml.
• Yarn 1.x - install with npm install -g yarn.

Otherwise, make sure node, python3.11 and yarn are available on your PATH before running yarn install.

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Publish

Publish to npm:

npm login
npm publish --access public

Lints JS and Vue files

yarn lint:js

Prettier check only

yarn prettier:check

Prettier write

yarn prettier:write

Lints and fixes JS and Vue files

yarn lint:js:fix

Lints style files

yarn lint:style

Lints and fixes style files

yarn lint:style:fix

Compiles and hot-reloads storybook

yarn storybook

Compiles and hot-reloads storybook with kozikaza theme

yarn storybook-kozikaza

Note about linting

Integration with IDE

To improve your development experience, integrate linting features to your IDE:

• IntelliJ code quality tool configuration for eslint, prettier and stylelint;
• VSCode extension for eslint, prettier and stylelint;

Automating linting during dev limitations

JS/Vue and style linting for serve and storybook uses a webpack loader (eslint-loader) and a webpack plugin (stylelint-webpack-plugin) so it displays only informations concerning files loaded during build (non imported files wont be linted), for a full lint, use yarn run lint:js.

Lint dedicated scripts

It is sometimes mandatory to run the yarn lint:*:fixcommand multiple times to solve all linting issues because some fixes introduces new violations.