[New Component] Contributor List

[fanny]

A brief introduction

As many of us know, hacktoberfest is coming, this event is of paramount importance to us, it's one of the times when communities feel the need to know metrics about their contributors.

Thus, our participation would be essential, given our time, we could make a component that would display the list of contributors, but could display some kind of metric, differentiating us from what most already propose.

What we should show?

Communities are very interested in knowing which repositories contributors contributed most, as well as some information about the amount of commits / contributions.

So the idea would be to create a card list that expresses this, my design suggestion can be seen below.

Edit: It is important to have the maintaner distinction for contributor, so the maintaner tag is only displayed for maintaners.

How to get the info?

Unfortunately the metrics that github provides about organizations are very sparse, we only have the list of contributors per repository, so what I thought to do is save each contributor list in one set, and to know which repositories the guy contributed would be through intersection of the sets. 🤔

But wait, we still have a complication, for organizations with many contributors, we will have performance issues, how to fix it? I thought about implementing a pagination.

Initially, we would limit the list of contributors to a maximum of 10 org repositories, for each repo at query time, implement a pagination, that is, instead of picking all contributors from each repo, and apply our set operations, we would get the First 40 individuals from each repository, and on the front-end we would have a option, something like "see more", when he wanted to consult more, we would get the next 40 until the list was finalized.

Edit: please let me know if you have any better ideas.

Minimum Suggested Design

https://codepen.io/fannyvieiira/pen/dybgPzQ
Colors and fonts can be enhanced.

The discussion about component architechure is in #2