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: [e-mail]

Product Owners

• Sébastien Martinage
• Adrien Stadler
• Narjisse Loulanti
• Ekaterina Kelekhsaeva
• Yann Delaporte: [e-mail]

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

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.