# Developing

You're a maintainer of Pimp, and a member of CitizenPlane engineering team? **Here's how you can help**.

Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved.

There is 4 different ways you can contribute & improve Pimp components library. These mostly follow [Semantic Versioning](https://docs.npmjs.com/about-semantic-versioning) convention:

- 🌟 Major update: changes that break backward compatibility
- 💅 Minor update: backward compatible new features
- 🐛 Patch update: backward compatible bug fixes

These 4 different contributions have their own specific processes that will be described in the following sections.

> ℹ️ Components library and documentation updates are done independently. You can't include both updates in the same merge request. It should be done one after the other.

## Contribution types

### 🌟 Major update

Your update is a major one if your changes break the previous version.

See the [release](#release) section for instructions on how to release properly the new package version.

### 💅 Minor update

You're doing a minor update if you want to add a new component to the library or improve an existing one.

If you're adding a new component to the library, here is what you should do:

1. Create the new `.vue` component in corresponding `/src` folder
2. Add it to the `index.js` file, located in `~/src/components/index.js`
3. Create a new component that materializes a new section in the playground, put it in `~/src/components/core/playgorund-sections`
4. This new section can be added to `src/App.vue`
5. Build the new component. It's visible on http://localhost:8080 after you have run the project using `npm run dev`

See the [release](#release) section for instructions on how to release properly the new package version.

### 🐛 Patch update

Your update is a patch one if your changes concern a bug in the current version that needs to be fixed.

See the [release](#release) section for instructions on how to release properly the new package version.

## Release

### Components release

Once you've done your changes, you'll want to submit them via a new merge request. All the unit tests should pass and pipelines should be green.

When these are approved, you will merge your branch into `main`.

Then, you'll need to pay attention to the CI/CD Pipelines page. Find your last pipeline and wait until it has finished.

When it's done, you'll have to release a new tag version corresponding to the type of contribution you've done (`major`, `minor` or `patch`). Hit the corresponding button so the `ci-push` does its work.

<img width='220' alt='release type selection' src='https://i.imgur.com/EnMyx4C.png' />

Once it's finished, you'll get the last version of the package.

<img alt='release type selection' src='https://i.imgur.com/oajMAQu.png' />

You'll be able to use last components updates just by upgrading the package in corresponding projects.

## Visuals 🖼

Link to the visual documentation: https://pimp.stg.citizenplane.com/

## Resources 📖

- Vue.js style guide: [link](https://v3.vuejs.org/style-guide/#tightly-coupled-component-names-strongly-recommended)
- Vue.js documentation: [link](https://vuejs.org/v2/guide/)
- Notion epic ticket: [link](https://www.notion.so/citizenplane/Pimp-improvements-4b2b12e49aca466980066f7101db50ff)
- Figma project: [link](https://www.figma.com/file/GzZSPWxb0AOM0COc7IYHoXNn/%F0%9F%92%85-Pimp)
- Tech team Notion documentation page: [link](https://www.notion.so/citizenplane/TECH-74cb42d97c254b64a564932c4bf40faa#7ddbdc9962e9473b8f480ccec508da1d)

## Maintainers 👷

- Lead maintainer: @vincent
- Other maintainers: @benoit, @alexis