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

• [x] Decide which UI lib to use
  • We are going to use Chakra (see a summary of our research)
• [x] Finish TS migration of the codebase (#6392)
• [x] #7054
• [x] #7196
• [x] #7374
• [x] #7369
• [x] Bump Chakra to v2 #7617
• [ ] Migrate each one of our UI components
  • [ ] (in progress) First wave
  • [ ] Second wave
• [ ] Migrate pages & templates

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!

---

• [ ] src/components
  • [ ] Accordion.tsx @SNikhill
  • [ ] ActionCard.tsx @SNikhill
  • [ ] AdoptionChart.tsx @SNikhill
  • [ ] AssetDownload.tsx @SNikhill
  • [x] BannerNotification.tsx @Mousticke
  • [ ] BoxGrid.tsx @Mousticke
  • [ ] Breadcrumbs.tsx @Mousticke
  • [ ] BugBountyCards.tsx @Mousticke
  • [ ] CallToContribute.tsx @vdusart
  • [x] Callout.tsx @vdusart
  • [ ] CalloutBanner.tsx @vdusart
  • [x] Card.tsx @vdusart
  • [ ] CardList.tsx @pettinarip
  • [ ] Checkbox.tsx @marcellamalune
  • [ ] CodeModal.tsx
  • [ ] CopyToClipboard.tsx @frankiefab100
  • [ ] DataProductCard.tsx
  • [ ] DismissibleCard.tsx @MahendraBishnoi29
  • [x] DocLink.tsx @Master7130 #7780
  • [x] DocsNav.tsx @wackerow
  • [x] EnergyConsumptionChart.tsx @EatCrypto
  • [ ] EthVideo.tsx @MahendraBishnoi29
  • [ ] EventCard.tsx
  • [ ] ExpandableCard.tsx
  • [ ] ExpandableInfo.tsx
  • [ ] FeedbackCard.tsx @wackerow
  • [ ] FeedbackWidget.tsx @wackerow
  • [ ] Footer.tsx @derajohnson
  • [ ] GhostCard.tsx
  • [ ] GitStars.tsx
  • [ ] HorizontalCard.tsx @ameeetgaikwad
  • [ ] ImageCard.tsx @ImMiguelP
  • [ ] InfoBanner.tsx @ImMiguelP
  • [ ] Layer2ProductCard.tsx
  • [ ] Leaderboard.tsx
  • [x] Link.tsx @pettinarip (did you already do this?)
  • [x] Logo.tsx @laurentlucian #7872
  • [ ] MarkdownTable.tsx
  • [ ] MatomoOptOut.tsx
  • [ ] MeetupList.tsx
  • [ ] MergeInfographic.tsx
  • [ ] Morpher.tsx @laurentlucian
  • [ ] NakedButton.tsx @wackerow
  • [ ] OrderedList.tsx
  • [ ] PageMetadata.tsx
  • [ ] Pill.tsx @AntonioSalazar
  • [x] ~PreMergeBanner.tsx (deprecated as of The Merge)~
  • [ ] ProductList.tsx
  • [ ] RandomAppList.tsx
  • [ ] ReleaseBanner.tsx
  • [ ] RollupProductDevDoc.tsx
  • [ ] SectionNav.tsx @Master7130
  • [ ] SkipLink.tsx @MahendraBishnoi29
  • [ ] Slider.tsx
  • [ ] SocialListItem.tsx @Gift-Stack
  • [ ] StablecoinBoxGrid.tsx
  • [ ] StatErrorMessage.tsx
  • [ ] StatLoadingMessage.tsx
  • [x] Tag.tsx @hannsu
  • [ ] TitleCardList.tsx
  • [ ] TranslationBanner.tsx
  • [ ] TutorialTags.tsx
  • [ ] UpgradeBannerNotification.tsx
  • [ ] UpgradeStatus.tsx
  • [ ] UpgradeTableOfContents.tsx @minimalsm PR: #7725
  • [ ] VisuallyHidden.tsx @minimalsm PR: #7724
  • [x] YouTube.tsx @minimalsm PR: #7723

---

💡 In case you have any questions, you can ask here or on our #ui-library-migration Discord channel

[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?

[swainson-f-holness]

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 ✌🏼

[swainson-f-holness]

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 ✌🏼

Sounds good. Thanks.

[pettinarip]

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.

Hey @ameeetgaikwad awesome! I've assigned you the HorizontalCard.tsx file, which is not a difficult one.

LMK if you need any help or if you have any questions in the process.

[malunem]

Hi! Can I contribute? The checkbox or anything else would be fine 😊

[minimalsm]

Hey @marcellamalune, thanks for the help 💪 I've assigned Checkbox.tsx to you.

Any questions feel free to ask 👍

[minimalsm]

can i contribute?

Hey @MahendraBishnoi29, just calling out this has opened up, if you're still interested 💪

[ecrecover]

Hi! I can help with the Tag and TitleCardList component. Due to that I'm not an old contributor, I can get start with the Tag component first.

[minimalsm]

Thanks @hannsu ❤️❤️❤️ The limit is kinda arbitrary, we just don't want first time contributors biting off too much and getting discouraged. I'll add you to the tag component. Feel free to pick up the other after if it's available.

[MahendraBishnoi29]

hey guyss i'm confused, like all i have to do is refactor the site with Chakra UI?

[pettinarip]

hey guyss i'm confused, like all i have to do is refactor the site with Chakra UI?

Basically, yes. The scope of this epic is replacing the @emotion styled-components with Chakra UI components.

Once we have all the UI components with Chakra we will start adopting the Design System #6284 that our designers are currently working on.

[LuisUrrutia]

Is it on the scope to maintain the current design? If a chakra component looks way different from the current style, should we stick to the chakra design, or do we have to do all the modifications to match the current style?

[beamandala]

Hi, can I work on refactoring DocLink.tsx?

[pettinarip]

Is it on the scope to maintain the current design? If a chakra component looks way different from the current style, should we stick to the chakra design, or do we have to do all the modifications to match the current style?

The scope is to migrate to Chakra + keep the current styles of the component. All the current styles live inside the style components. Those same styles should be applied to the new Chakra components using style props.

[pettinarip]

Hi, can I work on refactoring DocLink.tsx?

Assigned @Master7130, thanks!

[MahendraBishnoi29]

I want to work on EthVideo.tsx 🚀

[pettinarip]

Assigned @MahendraBishnoi29 👍🏼 ty

[MahendraBishnoi29]

Assigned @MahendraBishnoi29 👍🏼 ty

hey @pettinarip where's this video?

[pettinarip]

Assigned @MahendraBishnoi29 👍🏼 ty

hey @pettinarip where's this video?

You can find it in src/pages-conditional/eth.tsx which is the following page: https://ethereum.org/en/eth/

[MahendraBishnoi29]

@pettinarip i cloned ethereum org site locally but it get stucked here

[MahendraBishnoi29]

@pettinarip i cloned ethereum org site locally but it get stucked here

and then it gave me a infinite error list in terminal