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: [email protected]

Product Owners

• ~~Sébastien Martinage~~
• ~~Adrien Stadler~~
• ~~Narjisse Loulanti~~
• ~~Ekaterina Kelekhsaeva~~
• Yann Delaporte: [email protected]

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: [email protected]
• Adrien Déprez: [email protected]

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

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

Deploys storybook to github pages

yarn storybook:deploy

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.