project-booster-vue
v10.32.0
Published
**project-booster-vue** is the [typescript / vue3](https://vuejs.org) implementation of the Project Booster components library.
Downloads
4,380
Readme
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 --exactYou 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 installCompiles and hot-reloads for development
yarn serveCompiles and minifies for production
yarn buildPublish
Publish to npm:
npm login
npm publish --access publicLints JS and Vue files
yarn lint:jsPrettier check only
yarn prettier:checkPrettier write
yarn prettier:writeLints and fixes JS and Vue files
yarn lint:js:fixLints style files
yarn lint:styleLints and fixes style files
yarn lint:style:fixCompiles and hot-reloads storybook
yarn storybookCompiles and hot-reloads storybook with kozikaza theme
yarn storybook-kozikazaDeploys storybook to github pages
yarn storybook:deployNote 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.
