Epic: Implement UI library

[pettinarip]

This is an epic that makes up part of the ethereum.org Q3 roadmap

Description

A major insight from our research into accessibility and our website audits last quarter was that many of the issues we face, like lack of keyboard navigation, support for assistive technology and consistent W3C design patterns can be solved out-of-the-box by adopting an open source UI library.

Ultimately we’ve come to believe that rolling our own robust components is not what we should focus our time on. Leveraging an existing UI library will save our development and design team time to focus more energy on what matters - shipping products for our Ethereum users. This effort also ties in well with our work on the open design system and will serve as the foundation to our component library.

Todo

• Decide which UI lib to use
  • We are going to use Chakra (see a summary of our research)
• Finish TS migration of the codebase (Epic: TypeScript rollout #6392)
• Migrate from styled-components to emotion to prepare the ground for Chakra #7054
• Install Chakra UI #7196
• Define base theme colors #7374
• Create migration guide #7369
• Bump Chakra to v2 React 18 #7617
• Migrate each one of our UI components
  • First wave
  • Implement UI library - 2nd migration wave #8632
• Implement UI library - Migrate pages & templates #9353
• remove gatsby emotion plugin #10562
• cleanup tasks: clean SharedStyledComponents, update docs, and remove deprecated components Cleanup UI migration #10575

How to contribute

If you’d like to help with this migration, please follow these steps:

1. Leave a comment here asking which file you would want to work on.
2. We assign you to the file (by adding your handle next to the file name in the list).
   • Read and follow our UI migration guide for some tips & guidance.
   • If you were assigned to multiple files then create a separate PR for each component. It will make the testing process much simpler and more organized.
3. Once you finish it (PR merged), we’ll mark it as done.
4. Repeat!

---

First wave (completed)

• src/components
  • Accordion.tsx @SNikhill
  • ActionCard.tsx @SNikhill Chakra UI: Migrate Action card #8009
  • AdoptionChart.tsx @soheil555 Migrate the AdoptionChart component to Chakra #9088
  • AssetDownload.tsx @benlazzero Migrate AssetDownload.tsx component to Chakra #9103
  • BannerNotification.tsx @Mousticke [UI] Banner Notification: migrate component to chakra ui #7778
  • BoxGrid.tsx @soheil555 Migrate the BoxGrid component to Chakra #9094
  • Breadcrumbs.tsx @master7130 Breadcrumbs.tsx Refactor #8641
  • BugBountyCards.tsx @Marcelixoo Migrate BugBountyCards component to chakra UI [Relates to #6374] #8739
  • CallToContribute.tsx @vdusart Feat/convert call to contribute chakra #7975
  • Callout.tsx @vdusart Feat/convert callout chakra #7750
  • CalloutBanner.tsx @vdusart Feat/convert callout banner chakra #7869
  • Card.tsx @vdusart Feat/convert card chakra #7755
  • CardList.tsx @pettinarip UI migrate CardList #7721
  • Checkbox.tsx @marcellamalune Migrate Checkbox to Chakra Native Component #8204
  • CodeModal.tsx @LuisUrrutia refactor(code-modal): use chakra modal with custom variant #8006
  • CopyToClipboard.tsx @frankiefab100 refactor(copyToClipboard): add chakra ui Box component #8318
  • DataProductCard.tsx @LuisUrrutia Refactor of DataProductCard to Chakra #8015
  • DismissibleCard.tsx @MahendraBishnoi29
  • DocLink.tsx @master7130 Refactor DocLink component to use ChakraUI #7780
  • DocsNav.tsx @wackerow Migrate DocsNav to Chakra #7821
  • EnergyConsumptionChart.tsx @wackerow Energy consumption chart update #7825
  • EthVideo.tsx @MahendraBishnoi29 refactor EthVideo.tsx component with chakra UI #7785
  • EventCard.tsx @LuisUrrutia refactor(event-card): emotion to chakra #8152
  • ExpandableCard.tsx @jb-0 refactor: migrate expandable card to chakra #8572
  • ExpandableInfo.tsx @TylerAPfledderer Migrate ExpandableInfo to Chakra #8224
  • FeedbackCard.tsx @wackerow Update feedback components for Chakra #7906
  • FeedbackWidget.tsx @wackerow Update feedback components for Chakra #7906
  • Footer.tsx @TylerAPfledderer refactor(footer): migrate component to Chakra #8506
  • GhostCard.tsx @douglasmakey refactor: Migrate GhostCard from emotion to chakra-ui. #8413
  • Migrate GitStars component to Chakra UI #8049 hacktoberfest
  • HorizontalCard.tsx @ameeetgaikwad Refactor HorizontalCard for Chakra UI #7893
  • ImageCard.tsx @ImMiguelP Migrate ImageCard to Chakra #7959
  • InfoBanner.tsx @ImMiguelP Migrate InfoBanner to Chakra #7929
  • Layer2ProductCard.tsx @ImMiguelP Migrate Layer2ProductCard to Chakra  #8007
  • Leaderboard.tsx @ImMiguelP Migrate Leaderboard to Chakra  #8041
  • Link.tsx @pettinarip [UI lib] Button, Link & ButtonLink components #7438
  • Logo.tsx @laurentlucian Migrate Logo to Chakra #7872
  • MarkdownTable.tsx @ImMiguelP Migrate MarkdownTable to Chakra #8061
  • MatomoOptOut.tsx @ImMiguelP Migrate MatomoOptOut to Chakra #8042
  • MeetupList.tsx @ImMiguelP Migrate MeetupList to Chakra #8043
  • MergeInfographic.tsx @victorpatru refactor: migrate the merge infographic component from emotion to chakraui #6374 #8246
  • Morpher.tsx @laurentlucian Migrate Morpher to Chakra #7887
  • NakedButton.tsx @wackerow Deprecate NakedButton component #9519
  • OrderedList.tsx @TylerAPfledderer Migrate OrderedList to Chakra #8175
  • Pill.tsx @vdusart convert the Pill component to Chakra #8501
  • PreMergeBanner.tsx (deprecated as of The Merge)
  • ProductList.tsx @master7130 ProductList.tsx refactor to ChakraUI #8414
  • RandomAppList.tsx @AliTechGeek52
  • Migrate ReleaseBanner component to Chakra UI #8050 hacktoberfest Migrate release banner component to chakra UI #8081
  • RollupProductDevDoc.tsx @TylerAPfledderer Migrate RollupProductDevDoc to Chakra #8248
  • SectionNav.tsx @master7130 SectionNav refactor to ChakraUI #7978
  • SkipLink.tsx @MahendraBishnoi29 Refactor SkipLink.tsx component to use ChakraUI #8602
  • Migrate Slider component to Chakra UI #8051 hacktoberfest
  • SocialListItem.tsx @Gift-Stack Update: Migrate SocialListItem to Chakra #7990
  • StablecoinBoxGrid.tsx @shariqanwar20 [UI] Stablecoin Box Grid: migrate component to chakra UI #8201
  • StatErrorMessage.tsx @therealharpaljadeja chore: convert statLoadingMessage #8199
  • StatLoadingMessage.tsx @therealharpaljadeja chore: convert statLoadingMessage #8199
  • Tag.tsx @Hannsu Refactor Tag component to use Chakra #7735
  • TitleCardList.tsx @shubham16598 refactor: TitleCardList to chakra #8067
  • Migrate TranslationBanner component to Chakra UI #8052 hacktoberfest
  • TutorialTags.tsx @TylerAPfledderer Refactor: Migrate TutorialTags to Chakra UI #8774
  • UpgradeBannerNotification.tsx @Mahmadabid Migrate UpgradeBannerNotification.tsx to chakra #8189
  • UpgradeStatus.tsx @jb-0 Migrate UpgradeStatus.tsx to Chakra UI #8195
  • UpgradeTableOfContents.tsx @minimalsm PR: Refactor UpgradeTableOfContents component to use ChakraUI #7725
  • VisuallyHidden.tsx @minimalsm PR: Refactor VisuallyHidden component to use ChakraUI #7724
  • YouTube.tsx @minimalsm PR: Refactor YouTube component to use ChakraUI #7723

[MahendraBishnoi29]

can i contribute?

[nikkhielseath]

Is there going to be a list of the components that are to be ported over?

[pettinarip]

Is there going to be a list of the components that are to be ported over?

Yes! we are preparing the ground for that. I'll update this same issue with the list of files soon (~this week) & will let you know.

[nikkhielseath]

@pettinarip
May I please have the 4 A's?

[Mousticke]

@pettinarip
Let's go for the B's

• BannerNotification.tsx
• BoxGrid.tsx
• Breadcrumbs.tsx
• BugBountyCards.tsx
• ButtonLink.tsx

[pettinarip]

wohooo! @SNikhill assigned! @Mousticke assigned as well (ButtonLink was already migrated, I've removed it from the list).

@vdusart assigned as well the C's

Thanks all! 🚀

[ameeetgaikwad]

Can I contribute?

[minimalsm]

Hey @ameeetgaikwad, thanks for offering to help. We'd love your help on this :-) Is there a specific component you'd be interested in starting with?

[CodeNebulaX]

Can I contribute on these E-components?

• EnergyConsumptionChart.tsx
• EthVideo.tsx
• EventCard.tsx
• ExpandableCard.tsx
• ExpandableInfo.tsx

[ameeetgaikwad]

Hey @ameeetgaikwad, thanks for offering to help. We'd love your help on this :-) Is there a specific component you'd be interested in starting with?

Hey @minimalsm I recently learnt the basic of react. Please refer me a component which you see fit.

[pettinarip]

Hey @EatCrypto thanks for reaching out and trying to help us with this migration. We are only assigning multiple files to old contributors for now.

I've assigned EnergyConsumptionChart.tsx to you. Once you finish with that one, we can assign you another one ✌🏼

[rishisundar]

Hey, can I work on something? Don't have any preference. Would love to contribute!

[nikkhielseath]

@pettinarip

I have made the suggested changes to the ActionCard in #8009.
Sorry for the delay.

[pettinarip]

Thanks @SNikhill!

Hey @rishisundar we've just created a new GH issue to start migrating our pages and templates, check it out! #9353

[TylerAPfledderer]

@MahendraBishnoi29 @AliTechGeek52 Hey there! 👋

I'm helping out with the migrations here. I see that there are components still assigned to you that do not appear to have PRs up.

Dismissable and RandomAppList, respectively.

Are you still able to complete these components, or need some assistance? 😀

[MahendraBishnoi29]

@MahendraBishnoi29 @AliTechGeek52 Hey there! 👋

I'm helping out with the migrations here. I see that there are components still assigned to you that do not appear to have PRs up.

Dismissable and RandomAppList, respectively.

Are you still able to complete these components, or need some assistance? 😀

hey, @TylerAPfledderer thanks for helping here. so I've discussed with @pettinarip that DismissableCard is not in use currently so I haven't made a PR yet but if you still want me to make a PR I'll do it 😀

[TylerAPfledderer]

@MahendraBishnoi29 No need! That is Pablo's call to roll with 🤘

Thank you for your response! I'm seeing what I can do to help get these migrations to the finish line. 😄

[MahendraBishnoi29]

appreciate your help @TylerAPfledderer ♥

[pettinarip]

🚀 🚀 🚀

Thanks everyone!! closing now. Amazing community work :) 🕺🏼

🚀 🚀 🚀