import { Meta, Source } from '@storybook/addon-docs/blocks';
import { Mermaid } from 'mdx-mermaid/Mermaid';

<Meta title="Contributing" />

# 🤝 Be Part of Something Bigger!

**Mozaic-Web-Components** exists thanks to the continuous support and involvement of an incredible community of developers and designers.<br/>
Each issue reported, bug fixed, or new feature proposed helps us improve and deliver better tools for everyone.

If you spot something that could be improved, encounter a bug, or have an idea for new functionality — you're more than welcome to contribute!

To get started, simply clone the [Mozaic-WebComponents repository](https://github.com/adeo/mozaic-web-components) and set up the development environment.  
This guide will walk you through the process step by step.

Need help? Don’t hesitate to reach out to us via our [Slack channel](https://app.slack.com/client/T4R6RCZFA/C021A2J25C4).

---

## 📄 Contribution Workflow Overview

Here’s a visual summary of how contributing to Mozaic works:

<Mermaid
  chart={`flowchart TD;
  A((You need something <br/>fix or new feature));
  A --> B{Does an issue already exist?};
  B --> |YES| I;
  I([The issue fits my need <br/>or I complete it]);
  I --> D;
  B --> |NO| C;
  C([Create a new issue]);
  C --> D;
  D{Can I contribute myself?};
  D --> |YES| E;
  D --> |NO| J;
  E([Clone the repo <br/>& create a PR linked to the issue]);
  E --> F;
  F([Assign reviewers to your PR]);
  F --> G;
  G{Proofreading OK <br/>and PR validated?};
  G --> |YES| H;
  G --> |NO| K;
  H([PR is merged & will be released]);
  H;
  J([Wait for issue to be handled <br/>by the core team]);
  K([Make the requested changes]);
  K --> F;
  click B "https://github.com/adeo/mozaic-web-components/issues" _blank;
  click C "https://github.com/adeo/mozaic-web-components/issues/new/choose" _blank;
`}
/>

Let’s dive into each step in more detail 👇

---

## 🐞 Reporting Issues

### 🔎 Check Existing Issues First

We track all bugs and improvements in [GitHub Issues](https://github.com/adeo/mozaic-web-components/issues).  
Before opening a new one, please make sure the problem hasn’t already been reported.

Look through the list and see if there's an ongoing fix or discussion.

### 📝 Creating a New Issue

If your issue isn’t listed, go ahead and open a new one:  
➡️ [Report a New Issue](https://github.com/adeo/mozaic-web-components/issues/new/choose)

To help us resolve it efficiently:

- Provide a **clear description**.
- Include a **minimal reproducible example** if applicable.
- Mention any relevant versions, context, or logs.

---

## 💡 Proposing Changes or New Features

For **new components**, **major improvements**, or **non-trivial changes**, we strongly recommend first opening an issue to discuss your idea with the core team.

This ensures:

- Alignment with Mozaic’s vision.
- Avoiding duplicate work.
- Faster and smoother review once you submit your PR.

For simple bug fixes, feel free to directly open a Pull Request, but linking an issue is always appreciated!

---

## 🛠️ Setting Up Your Dev Environment

Follow these steps to get started contributing:

<Source
  language='bash'
  dark
  code={`
# Clone Mozaic-WebComponents repository
git clone git@github.com:adeo/mozaic-web-components.git

# Navigate to project directory

cd mozaic-web-components

# Checkout the branch you're working on (feature/fix/...)

git checkout <branch-name>

# Install dependencies

npm install
`} />
