feat: Implement Contributor Card Component #245

chadstewart · 2022-08-21T16:22:06Z

What type of PR is this? (check all applicable)

Description

This PR adds the feature of the Contributor Card

Details:

The component has a contributor prop that has all the things necessary to build the contributor card. While every prop is necessary, the props that are arrays can be empty and the component will render accordingly.
To get the types for each prop, I've exported them from the components they exist in. This will need be updated in refactor: correct typescript types usage across the application #212 for proper type structure.
There is a hook called useContributorCard that has all the mock data for the component that is not being used currently but will be ideal to be used in [Front-End] Implement Contribution Page #217.

Related Tickets & Documents

Fixes #218

Mobile & Desktop Screenshots/Recordings

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify · 2022-08-21T16:22:13Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`e315ecc`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/630646c808880800081c5568
😎 Deploy Preview	https://deploy-preview-245--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify · 2022-08-21T16:22:13Z

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	`e315ecc`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/630646c821e951000918604b
😎 Deploy Preview	https://deploy-preview-245--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

…ll give component all the data it needs.

…or where other components would need to be added.

…tor card rather than use hook to build the contributor card.

bdougie

This has all the elements, just made a comment on the naming of somethings and making the dates span 30 days. We might want to go back and forth on the design, but my suggestion is polishing this design on a new PR since this is blocking #217

lib/hooks/useContributorCard.ts

… feedback.

eryc-cc

Can we see them in a grid with 3 cards side by side?

Some things might need to be adjusted:

min-width (I still don't know what it should be)
Internal Spacings

Let me get a full-review in a minute

bdougie · 2022-08-24T16:42:57Z

This has all the elements, just made a comment on the naming of somethings and making the dates span 30 days.

on second thought, If the 30 days is inferred, we could remove that from the legend all together.

eryc-cc

This has all the elements, just made a comment on the naming of somethings and making the dates span 30 days. We might want to go back and forth on the design, but my suggestion is polishing this design on a new PR since this is blocking #217

Nevermind, just saw @bdougie's message.

I'll open a new issue for the polishing!

chadstewart · 2022-08-24T17:44:46Z

This has all the elements, just made a comment on the naming of somethings and making the dates span 30 days.

on second thought, If the 30 days is inferred, we could remove that from the legend all together.

Already did it. 😂

0-vortex

LGTM! 👍

## [1.3.0-beta.10](v1.3.0-beta.9...v1.3.0-beta.10) (2022-08-24) ### 🍕 Features * Implement Contributor Card Component ([#245](#245)) ([3bd55ea](3bd55ea))

github-actions · 2022-08-24T19:14:09Z

🎉 This PR is included in version 1.3.0-beta.10 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.3.0](v1.2.3...v1.3.0) (2022-08-29) ### 🧑‍💻 Code Refactoring * Improve the `<ComponentCard>` CSS ([#266](#266)) ([9da4d62](9da4d62)) * Make the avatar component accept custom sizes ([#255](#255)) ([9076e91](9076e91)), closes [#235](#235) ### 🍕 Features * Add Images to Scatter Chart ([#257](#257)) ([20df419](20df419)) * Add item count meta data to Highlight Card ([#254](#254)) ([693479e](693479e)) * Added Reports History component to Reports Page ([#272](#272)) ([c6a56f6](c6a56f6)) * Implement Card Horizontal Bar component ([#237](#237)) ([7bbbe40](7bbbe40)) * Implement Card Table Component ([#243](#243)) ([0cbc6ea](0cbc6ea)) * Implement contribution page ([#263](#263)) ([f41d7f9](f41d7f9)) * Implement Contributor Card Component ([#245](#245)) ([3bd55ea](3bd55ea)) * Implement Reports History Component ([#209](#209)) ([bb531e4](bb531e4)) * Implement the hacktoberfest reports page ([#229](#229)) ([0cfa5e5](0cfa5e5)), closes [#168](#168) * Implement waitlist page ([#210](#210)) ([0826d07](0826d07)), closes [#152](#152) ### 🐛 Bug Fixes * adjusted opinion filter on mobile screens ([#264](#264)) ([2d9785c](2d9785c)) * correct login redirect issues in supabase implemetation ([#274](#274)) ([8fcd81e](8fcd81e)) * correct login redirect issues in supabase implemetation x2 ([#275](#275)) ([0239abd](0239abd)) * correct supabase-ui default style for hover ([#267](#267)) ([a23fe4b](a23fe4b)), closes [#226](#226) * increase truncate string number of words ([#268](#268)) ([ab47a96](ab47a96)), closes [#247](#247) * max width removed from card ([#250](#250)) ([523969a](523969a)), closes [#249](#249) * removes unused function ([b37de35](b37de35)) * Repo count ([#244](#244)) ([d59eef8](d59eef8)) * Update GitSense API route for repos ([#270](#270)) ([8f7e1c5](8f7e1c5))

github-actions · 2022-08-29T19:53:11Z

🎉 This PR is included in version 1.3.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.3.0-beta.10](open-sauced/app@v1.3.0-beta.9...v1.3.0-beta.10) (2022-08-24) ### 🍕 Features * Implement Contributor Card Component ([#245](open-sauced/app#245)) ([3bd55ea](open-sauced/app@3bd55ea))

## [1.3.0](open-sauced/app@v1.2.3...v1.3.0) (2022-08-29) ### 🧑‍💻 Code Refactoring * Improve the `<ComponentCard>` CSS ([#266](open-sauced/app#266)) ([9da4d62](open-sauced/app@9da4d62)) * Make the avatar component accept custom sizes ([#255](open-sauced/app#255)) ([9076e91](open-sauced/app@9076e91)), closes [#235](open-sauced/app#235) ### 🍕 Features * Add Images to Scatter Chart ([#257](open-sauced/app#257)) ([20df419](open-sauced/app@20df419)) * Add item count meta data to Highlight Card ([#254](open-sauced/app#254)) ([693479e](open-sauced/app@693479e)) * Added Reports History component to Reports Page ([#272](open-sauced/app#272)) ([c6a56f6](open-sauced/app@c6a56f6)) * Implement Card Horizontal Bar component ([#237](open-sauced/app#237)) ([7bbbe40](open-sauced/app@7bbbe40)) * Implement Card Table Component ([#243](open-sauced/app#243)) ([0cbc6ea](open-sauced/app@0cbc6ea)) * Implement contribution page ([#263](open-sauced/app#263)) ([f41d7f9](open-sauced/app@f41d7f9)) * Implement Contributor Card Component ([#245](open-sauced/app#245)) ([3bd55ea](open-sauced/app@3bd55ea)) * Implement Reports History Component ([#209](open-sauced/app#209)) ([bb531e4](open-sauced/app@bb531e4)) * Implement the hacktoberfest reports page ([#229](open-sauced/app#229)) ([0cfa5e5](open-sauced/app@0cfa5e5)), closes [#168](open-sauced/app#168) * Implement waitlist page ([#210](open-sauced/app#210)) ([0826d07](open-sauced/app@0826d07)), closes [#152](open-sauced/app#152) ### 🐛 Bug Fixes * adjusted opinion filter on mobile screens ([#264](open-sauced/app#264)) ([2d9785c](open-sauced/app@2d9785c)) * correct login redirect issues in supabase implemetation ([#274](open-sauced/app#274)) ([8fcd81e](open-sauced/app@8fcd81e)) * correct login redirect issues in supabase implemetation x2 ([#275](open-sauced/app#275)) ([0239abd](open-sauced/app@0239abd)) * correct supabase-ui default style for hover ([#267](open-sauced/app#267)) ([a23fe4b](open-sauced/app@a23fe4b)), closes [#226](open-sauced/app#226) * increase truncate string number of words ([#268](open-sauced/app#268)) ([ab47a96](open-sauced/app@ab47a96)), closes [#247](open-sauced/app#247) * max width removed from card ([#250](open-sauced/app#250)) ([523969a](open-sauced/app@523969a)), closes [#249](open-sauced/app#249) * removes unused function ([b37de35](open-sauced/app@b37de35)) * Repo count ([#244](open-sauced/app#244)) ([d59eef8](open-sauced/app@d59eef8)) * Update GitSense API route for repos ([#270](open-sauced/app#270)) ([8f7e1c5](open-sauced/app@8f7e1c5))

Initial commit for contributor card.

9c239d0

chadstewart added 2 commits August 21, 2022 11:34

Starting to work on contributor card component. Made quick hook that'…

321b44b

…ll give component all the data it needs.

Completed as much as possible with current components. Left markers f…

ad53e35

…or where other components would need to be added.

chadstewart changed the base branch from main to beta August 21, 2022 16:52

chadstewart added 4 commits August 24, 2022 07:52

Merge branch 'beta' into 218-contributor-card

a024c89

Added horizontal bar to contributor card.

ad8feee

Added contributor table and completed contributor card.

fcd9c89

Updated contributor card component to take in props to build contribu…

5b5eefc

…tor card rather than use hook to build the contributor card.

chadstewart requested review from eryc-cc, 0-vortex and bdougie August 24, 2022 13:54

chadstewart added the needs review PRs that need review from core engineering team label Aug 24, 2022

chadstewart marked this pull request as ready for review August 24, 2022 13:54

bdougie approved these changes Aug 24, 2022

View reviewed changes

lib/hooks/useContributorCard.ts Outdated Show resolved Hide resolved

lib/hooks/useContributorCard.ts Outdated Show resolved Hide resolved

Updating contributor hook and line chart options based on code review…

e315ecc

… feedback.

eryc-cc suggested changes Aug 24, 2022

View reviewed changes

eryc-cc approved these changes Aug 24, 2022

View reviewed changes

0-vortex approved these changes Aug 24, 2022

View reviewed changes

chadstewart merged commit 3bd55ea into beta Aug 24, 2022

chadstewart deleted the 218-contributor-card branch August 24, 2022 19:11

github-actions bot added the released on @beta label Aug 24, 2022

github-actions bot added the released label Aug 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Implement Contributor Card Component #245

feat: Implement Contributor Card Component #245

chadstewart commented Aug 21, 2022 •

edited

Loading

netlify bot commented Aug 21, 2022 •

edited

Loading

netlify bot commented Aug 21, 2022 •

edited

Loading

bdougie left a comment

eryc-cc left a comment

bdougie commented Aug 24, 2022

eryc-cc left a comment

chadstewart commented Aug 24, 2022

0-vortex left a comment

github-actions bot commented Aug 24, 2022

github-actions bot commented Aug 29, 2022

feat: Implement Contributor Card Component #245

feat: Implement Contributor Card Component #245

Conversation

chadstewart commented Aug 21, 2022 • edited Loading

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented Aug 21, 2022 • edited Loading

✅ Deploy Preview for design-insights ready!

netlify bot commented Aug 21, 2022 • edited Loading

✅ Deploy Preview for oss-insights ready!

bdougie left a comment

Choose a reason for hiding this comment

eryc-cc left a comment

Choose a reason for hiding this comment

bdougie commented Aug 24, 2022

eryc-cc left a comment

Choose a reason for hiding this comment

chadstewart commented Aug 24, 2022

0-vortex left a comment

Choose a reason for hiding this comment

github-actions bot commented Aug 24, 2022

github-actions bot commented Aug 29, 2022

chadstewart commented Aug 21, 2022 •

edited

Loading

netlify bot commented Aug 21, 2022 •

edited

Loading

netlify bot commented Aug 21, 2022 •

edited

Loading