npm package: @mozaic-ds/react
Description: React implementation of the Mozaic Design System
Author: ADEO - ADEO Design system
Latest version: 1.14.1

<h1 align="center">
  Mozaic-React (community)
</h1>

<p align="center">
  <a href="https://mozaic.adeo.cloud/">
    <img src=".storybook/assets/images/adeo-design-system.svg"/>
  </a>

  <a href="https://react.dev/">
    <img src=".storybook/assets/images/made-with-react.svg"/>
  </a>
</p>

<p align="center">
  <a href="https://github.com/adeo/mozaic-react/blob/master/CONTRIBUTING.md">
    <img src="https://img.shields.io/badge/PRs-welcome-blue.svg?logo=github" alt="PRs welcome" />
  </a>
  <a href="#-contributors">
    <img src="https://img.shields.io/badge/all_contributors-22-brightgreen.svg?style=" alt="contributors" />
  </a>
  <a href="https://app.slack.com/client/T4R6RCZFA/CTKEF69GV">
    <img src="https://img.shields.io/badge/Slack-mozaic_react-611f69.svg?logo=slack" alt="Slack mozaic-react" />
  </a>
</p>

<p align="center">
  This is a community project containing <a href="https://reactjs.org/">React</a> components that implements the <a href="https://mozaic.adeo.cloud/">ADEO Design system</a> guidelines.
</p>

## 🎨 Getting started

**ADEO Design system** is a global and collaborative design system that facilitates the designer and developer experience, enabling them to create universal interfaces perfectly aligned with the business strategy of [Adeo](https://www.adeo.com/).

Learn more about the vision and guidelines by visiting the [main documentation website](https://mozaic.adeo.cloud/).

## 📦 Install

All the available components are showcased in our [Storybook](https://musical-happiness-538039b4.pages.github.io/?path=/docs/getting-started--docs).

To install `mozaic-react` in your project, you will need to run the following command using `npm`:

```shell
$ npm install @mozaic-ds/react --save
```

Or with **Yarn**:

```shell
$ yarn add @mozaic-ds/react
```

## 📰 Changelog

Releases are managed with **GitHub Releases**, including the changelog for each one.<br/>
Access to the [Changelog](/CHANGELOG.md) to find out about the detailed changes to each release.

## 📣 Stay in touch

- Join the [#mozaic-react](https://app.slack.com/client/T4R6RCZFA/CTKEF69GV) channel on **Slack**

## 🐞 Bugs and feature requests

Have a bug or a feature request?<br/>
Please [open an issue](https://github.com/adeo/mozaic-styles/issues/new/choose) and use the template associated with your request.

However, if you are able to contribute and fix bugs, build new features, or help to improve the project documentation, feel free to do it! _(more information below)_

## ✍️ Contributing

Setup the project to start contributing.

```
// Clone mozaic-react repo
$ git clone git@github.com:adeo/mozaic-react.git

// Go to the cloned directory
$ cd mozaic-react

// Checkout the branch you are working on
$ git checkout <branch name>

// Install dependencies
$ npm install

// Launch Storybook
npm run start
```

Congratulations, `Storybook` is running on [http://localhost:6006/](http://localhost:6006/). :rocket:

We're always looking for contributors to help us fix bugs, build features, or help us improve the documentation. If you're intersted check out our [Code of Conduct](https://github.com/adeo/mozaic-react/wiki/Code-of-conduct) and [Contribution Guide](https://github.com/adeo/mozaic-react/blob/master/CONTRIBUTING.md).

## 🧑‍💻 Contributors

**Maintainers**

- **[Patryk Mazur](https://github.com/sudo-at-night)**
- **[Michał Kowalik](https://github.com/mkowalik-lr)**
- **[Rafał Kulpa](https://github.com/rkulpaLM)**
- **[Adam Jacewicz](https://github.com/ajacewiczlm)**

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tbody>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sadcitizen"><img src="https://avatars.githubusercontent.com/u/5613376?v=4?s=100" width="100px;" alt="Eugene Abrosimov"/><br /><sub><b>Eugene Abrosimov</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/commits?author=sadcitizen" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/commits?author=sadcitizen" title="Documentation">📖</a> <a href="#example-sadcitizen" title="Examples">💡</a> <a href="#ideas-sadcitizen" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-sadcitizen" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-sadcitizen" title="Maintenance">🚧</a> <a href="#mentoring-sadcitizen" title="Mentoring">🧑‍🏫</a> <a href="#projectManagement-sadcitizen" title="Project Management">📆</a> <a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3Asadcitizen" title="Reviewed Pull Requests">👀</a> <a href="#userTesting-sadcitizen" title="User Testing">📓</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sstolbov"><img src="https://avatars.githubusercontent.com/u/17004194?v=4?s=100" width="100px;" alt="sstolbov"/><br /><sub><b>sstolbov</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/commits?author=sstolbov" title="Code">💻</a> <a href="#infra-sstolbov" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-sstolbov" title="Maintenance">🚧</a> <a href="https://github.com/adeo/mozaic-react/commits?author=sstolbov" title="Tests">⚠️</a> <a href="#userTesting-sstolbov" title="User Testing">📓</a> <a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3Asstolbov" title="Reviewed Pull Requests">👀</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/inantonov"><img src="https://avatars.githubusercontent.com/u/38957216?v=4?s=100" width="100px;" alt="Ilia Antonov"/><br /><sub><b>Ilia Antonov</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3Ainantonov" title="Reviewed Pull Requests">👀</a> <a href="#ideas-inantonov" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-inantonov" title="Maintenance">🚧</a> <a href="#mentoring-inantonov" title="Mentoring">🧑‍🏫</a> <a href="#projectManagement-inantonov" title="Project Management">📆</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/pixel-fixer"><img src="https://avatars.githubusercontent.com/u/9308005?v=4?s=100" width="100px;" alt="Nikolai Kuznetsov"/><br /><sub><b>Nikolai Kuznetsov</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3Apixel-fixer" title="Reviewed Pull Requests">👀</a> <a href="#ideas-pixel-fixer" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-pixel-fixer" title="Maintenance">🚧</a> <a href="#mentoring-pixel-fixer" title="Mentoring">🧑‍🏫</a> <a href="#projectManagement-pixel-fixer" title="Project Management">📆</a> <a href="https://github.com/adeo/mozaic-react/commits?author=pixel-fixer" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/commits?author=pixel-fixer" title="Tests">⚠️</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ancientbag"><img src="https://avatars.githubusercontent.com/u/28917261?v=4?s=100" width="100px;" alt="Denis Timashev"/><br /><sub><b>Denis Timashev</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3Aancientbag" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/adeo/mozaic-react/commits?author=ancientbag" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/commits?author=ancientbag" title="Documentation">📖</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/narapov"><img src="https://avatars.githubusercontent.com/u/18645197?v=4?s=100" width="100px;" alt="narapov"/><br /><sub><b>narapov</b></sub></a><br /><a href="#ideas-narapov" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3Anarapov" title="Reviewed Pull Requests">👀</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/koskh"><img src="https://avatars.githubusercontent.com/u/10600782?v=4?s=100" width="100px;" alt="K. Khabalkin"/><br /><sub><b>K. Khabalkin</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3Akoskh" title="Reviewed Pull Requests">👀</a></td>
    </tr>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://edele.ru/"><img src="https://avatars.githubusercontent.com/u/2607770?v=4?s=100" width="100px;" alt="Edele Gizatullin"/><br /><sub><b>Edele Gizatullin</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3Aedele" title="Reviewed Pull Requests">👀</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://t.me/Dada_siegt"><img src="https://avatars.githubusercontent.com/u/60327711?v=4?s=100" width="100px;" alt="Vasenina Nastya"/><br /><sub><b>Vasenina Nastya</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3AVaseninaNastya" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/adeo/mozaic-react/commits?author=VaseninaNastya" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/commits?author=VaseninaNastya" title="Documentation">📖</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Jupoulet"><img src="https://avatars.githubusercontent.com/u/53181261?v=4?s=100" width="100px;" alt="Jupoulet"/><br /><sub><b>Jupoulet</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/commits?author=Jupoulet" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/commits?author=Jupoulet" title="Documentation">📖</a> <a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3AJupoulet" title="Reviewed Pull Requests">👀</a> <a href="#ideas-Jupoulet" title="Ideas, Planning, & Feedback">🤔</a> <a href="#mentoring-Jupoulet" title="Mentoring">🧑‍🏫</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/samuelpoudroux"><img src="https://avatars.githubusercontent.com/u/43468769?v=4?s=100" width="100px;" alt="Samuel Poudroux"/><br /><sub><b>Samuel Poudroux</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/commits?author=samuelpoudroux" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/commits?author=samuelpoudroux" title="Documentation">📖</a> <a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3Asamuelpoudroux" title="Reviewed Pull Requests">👀</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/AlexFe96"><img src="https://avatars.githubusercontent.com/u/57062116?v=4?s=100" width="100px;" alt="AlexFe96"/><br /><sub><b>AlexFe96</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/commits?author=AlexFe96" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/commits?author=AlexFe96" title="Documentation">📖</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://gabbloquet.github.io/"><img src="https://avatars.githubusercontent.com/u/25029077?v=4?s=100" width="100px;" alt="Gabin Bloquet"/><br /><sub><b>Gabin Bloquet</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/commits?author=gabbloquet" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/commits?author=gabbloquet" title="Documentation">📖</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Julien-Hery"><img src="https://avatars.githubusercontent.com/u/24412934?v=4?s=100" width="100px;" alt="Julien Hery"/><br /><sub><b>Julien Hery</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/issues?q=author%3AJulien-Hery" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-react/commits?author=Julien-Hery" title="Code">💻</a> <a href="#example-Julien-Hery" title="Examples">💡</a> <a href="#ideas-Julien-Hery" title="Ideas, Planning, & Feedback">🤔</a></td>
    </tr>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/mltsk"><img src="https://avatars.githubusercontent.com/u/51035551?v=4?s=100" width="100px;" alt="Dmitrii Maletskii"/><br /><sub><b>Dmitrii Maletskii</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/commits?author=mltsk" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/commits?author=mltsk" title="Documentation">📖</a> <a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3Amltsk" title="Reviewed Pull Requests">👀</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/AMZhukov"><img src="https://avatars.githubusercontent.com/u/36910250?v=4?s=100" width="100px;" alt="Andrew Zhukov"/><br /><sub><b>Andrew Zhukov</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/commits?author=AMZhukov" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/commits?author=AMZhukov" title="Documentation">📖</a> <a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3AAMZhukov" title="Reviewed Pull Requests">👀</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/gabdarras"><img src="https://avatars.githubusercontent.com/u/90196673?v=4?s=100" width="100px;" alt="Gabin Darras"/><br /><sub><b>Gabin Darras</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3Agabdarras" title="Reviewed Pull Requests">👀</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/TimmyGOGO"><img src="https://avatars.githubusercontent.com/u/11355318?v=4?s=100" width="100px;" alt="Artyom"/><br /><sub><b>Artyom</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/commits?author=TimmyGOGO" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/commits?author=TimmyGOGO" title="Documentation">📖</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/jakubczarnowski"><img src="https://avatars.githubusercontent.com/u/58054635?v=4?s=100" width="100px;" alt="Jakub Czarnowski"/><br /><sub><b>Jakub Czarnowski</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/commits?author=jakubczarnowski" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/rafael-fachinelli-develcode"><img src="https://avatars.githubusercontent.com/u/79996365?v=4?s=100" width="100px;" alt="Rafael Fachinelli"/><br /><sub><b>Rafael Fachinelli</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/commits?author=rafael-fachinelli-develcode" title="Documentation">📖</a> <a href="https://github.com/adeo/mozaic-react/issues?q=author%3Arafael-fachinelli-develcode" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-react/commits?author=rafael-fachinelli-develcode" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/EwenSellitto"><img src="https://avatars.githubusercontent.com/u/91554552?v=4?s=100" width="100px;" alt="Ewen SELLITTO"/><br /><sub><b>Ewen SELLITTO</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/issues?q=author%3AEwenSellitto" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-react/commits?author=EwenSellitto" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/commits?author=EwenSellitto" title="Documentation">📖</a></td>
    </tr>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/C-Melvin"><img src="https://avatars.githubusercontent.com/u/104756842?v=4?s=100" width="100px;" alt="C-Melvin"/><br /><sub><b>C-Melvin</b></sub></a><br /><a href="https://github.com/adeo/mozaic-react/issues?q=author%3AC-Melvin" title="Bug reports">🐛</a> <a href="https://github.com/adeo/mozaic-react/commits?author=C-Melvin" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="http://sudo-at-night.com"><img src="https://avatars.githubusercontent.com/u/23720398?v=4?s=100" width="100px;" alt="Patryk Mazur"/><br /><sub><b>Patryk Mazur</b></sub></a><br /><a href="#maintenance-sudo-at-night" title="Maintenance">🚧</a> <a href="https://github.com/adeo/mozaic-react/commits?author=sudo-at-night" title="Code">💻</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/mkowalik-lr"><img src="https://avatars.githubusercontent.com/u/159759012?v=4?s=100" width="100px;" alt="Michał Kowalik"/><br /><sub><b>Michał Kowalik</b></sub></a><br /><a href="#maintenance-mkowalik-lr" title="Maintenance">🚧</a> <a href="https://github.com/adeo/mozaic-react/commits?author=mkowalik-lr" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3Amkowalik-lr" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/adeo/mozaic-react/issues?q=author%3Amkowalik-lr" title="Bug reports">🐛</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/rkulpaLM"><img src="https://avatars.githubusercontent.com/u/141396044?v=4?s=100" width="100px;" alt="rkulpaLM"/><br /><sub><b>rkulpaLM</b></sub></a><br /><a href="#maintenance-rkulpaLM" title="Maintenance">🚧</a> <a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3ArkulpaLM" title="Reviewed Pull Requests">👀</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ajacewiczlm"><img src="https://avatars.githubusercontent.com/u/169245697?v=4?s=100" width="100px;" alt="ajacewiczlm"/><br /><sub><b>ajacewiczlm</b></sub></a><br /><a href="#maintenance-ajacewiczlm" title="Maintenance">🚧</a> <a href="https://github.com/adeo/mozaic-react/pulls?q=is%3Apr+reviewed-by%3Aajacewiczlm" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/adeo/mozaic-react/commits?author=ajacewiczlm" title="Code">💻</a> <a href="https://github.com/adeo/mozaic-react/issues?q=author%3Aajacewiczlm" title="Bug reports">🐛</a></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td align="center" size="13px" colspan="7">
        <img src="https://raw.githubusercontent.com/all-contributors/all-contributors-cli/1b8533af435da9854653492b1327a23a4dbd0a10/assets/logo-small.svg">
          <a href="https://all-contributors.js.org/docs/en/bot/usage">Add your contributions</a>
        </img>
      </td>
    </tr>
  </tfoot>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

## 📄 Licensing

This project is licensed under the Apache V2 License. See [LICENSE](LICENSE) for more information.