# Documentation on development

## Using `yarn`

[`yarn`](https://yarnpkg.com) is a package manager running on [`nodejs`](https://nodejs.org). It is veru useful to manage `javascript` or `css` projects.

### Adding a new package

1. find the name of the wanted package on the website <https://www.npmjs.com>
2. on command line interface, on the root folder of this project, type `yarn add --dev name-of-the-package`
3. Identify the needed files into folder `node_modules/name-of-the-package` ; most of time, files are into folder `node_modules/name-of-the-package/dist`
4. modifify the file `js/extract-files-from-node-modules` to a new line for each file to import in the theme :
  - `copySync('node_modules/name-of-the-package/dist/js/file.min.js','js/vendor/name-of-the-package/file.min.js',{ overwrite: true })` for `javascript` file
  - `copySync('node_modules/name-of-the-package/dist/css/file.min.css','css/vendor/name-of-the-package/file.min.css',{ overwrite: true })` for `css` file
  - do not forget `LICENCE` file of the package, `copySync('node_modules/name-of-the-package/dist/LICENCE','css/vendor/name-of-the-package/LICENCE',{ overwrite: true })` for `css` (and for `javascript`)
5. type `yarn install` in commpand line interface to start this script
6. add a new line in concerned `twig` file (example : `includes/_head.twig`) to use the new file (example : `<link href="{{ theme_url }}/css/vendor/name-of-the-package/file.min.css" rel="stylesheet" type="text/css" />`)

### Removing a new package

1. find the name of the wanted package into file `package.json`
2. on command line interface, on the root folder of this project, type `yarn remove name-of-the-package`
3. Identify the associated files into folders `js/vendor` and `css/vendor` and delete them
4. modifify the file `js/extract-files-from-node-modules` to remove lines related to this package
5. remove line in concerned `twig` file (example : `includes/_head.twig`) that uses the new file (example : `<link href="{{ theme_url }}/css/vendor/name-of-the-package/file.min.css" rel="stylesheet" type="text/css" />`)