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
• [x] Migrate each one of our UI components
  • [x] First wave
  • [x] #8632
• [x] #9353
• [x] #10562
• [x] cleanup tasks: clean SharedStyledComponents, update docs, and remove deprecated components #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)

- [x] `src/components` - [x] ~Accordion.tsx @SNikhill~ - [x] ActionCard.tsx @SNikhill #8009 - [x] AdoptionChart.tsx @soheil555 #9088 - [x] AssetDownload.tsx @benlazzero #9103 - [x] BannerNotification.tsx @Mousticke #7778 - [x] BoxGrid.tsx @soheil555 #9094 - [x] Breadcrumbs.tsx @Master7130 #8641 - [x] BugBountyCards.tsx @Marcelixoo #8739 - [x] CallToContribute.tsx @vdusart #7975 - [x] Callout.tsx @vdusart #7750 - [x] CalloutBanner.tsx @vdusart #7869 - [x] Card.tsx @vdusart #7755 - [x] CardList.tsx @pettinarip #7721 - [x] Checkbox.tsx @marcellamalune #8204 - [x] CodeModal.tsx @LuisUrrutia #8006 - [x] CopyToClipboard.tsx @frankiefab100 #8318 - [x] DataProductCard.tsx @LuisUrrutia #8015 - [x] ~~DismissibleCard.tsx @MahendraBishnoi29~~ - [x] DocLink.tsx @Master7130 #7780 - [x] DocsNav.tsx @wackerow #7821 - [x] EnergyConsumptionChart.tsx @wackerow #7825 - [x] EthVideo.tsx @MahendraBishnoi29 #7785 - [x] EventCard.tsx @LuisUrrutia #8152 - [x] ExpandableCard.tsx @jb-0 #8572 - [x] ExpandableInfo.tsx @TylerAPfledderer #8224 - [x] FeedbackCard.tsx @wackerow #7906 - [x] FeedbackWidget.tsx @wackerow #7906 - [x] Footer.tsx @TylerAPfledderer #8506 - [x] GhostCard.tsx @douglasmakey #8413 - [x] #8049 hacktoberfest - [x] HorizontalCard.tsx @ameeetgaikwad #7893 - [x] ImageCard.tsx @ImMiguelP #7959 - [x] InfoBanner.tsx @ImMiguelP #7929 - [x] Layer2ProductCard.tsx @ImMiguelP #8007 - [x] Leaderboard.tsx @ImMiguelP #8041 - [x] Link.tsx @pettinarip #7438 - [x] Logo.tsx @laurentlucian #7872 - [x] MarkdownTable.tsx @ImMiguelP #8061 - [x] MatomoOptOut.tsx @ImMiguelP #8042 - [x] MeetupList.tsx @ImMiguelP #8043 - [x] MergeInfographic.tsx @victorpatru #8246 - [x] Morpher.tsx @laurentlucian #7887 - [x] NakedButton.tsx @wackerow #9519 - [x] OrderedList.tsx @TylerAPfledderer #8175 - [x] Pill.tsx @vdusart #8501 - [x] ~PreMergeBanner.tsx (deprecated as of The Merge)~ - [x] ProductList.tsx @Master7130 #8414 - [x] ~~RandomAppList.tsx @AliTechGeek52~~ - [x] #8050 hacktoberfest #8081 - [x] RollupProductDevDoc.tsx @TylerAPfledderer #8248 - [x] SectionNav.tsx @Master7130 #7978 - [x] SkipLink.tsx @MahendraBishnoi29 #8602 - [x] #8051 hacktoberfest - [x] SocialListItem.tsx @Gift-Stack #7990 - [x] StablecoinBoxGrid.tsx @shariqanwar20 #8201 - [x] StatErrorMessage.tsx @therealharpaljadeja #8199 - [x] StatLoadingMessage.tsx @therealharpaljadeja #8199 - [x] Tag.tsx @hannsu #7735 - [x] TitleCardList.tsx @shubham16598 #8067 - [x] #8052 hacktoberfest - [x] TutorialTags.tsx @TylerAPfledderer #8774 - [x] UpgradeBannerNotification.tsx @Mahmadabid #8189 - [x] UpgradeStatus.tsx @jb-0 #8195 - [x] UpgradeTableOfContents.tsx @minimalsm PR: #7725 - [x] VisuallyHidden.tsx @minimalsm PR: #7724 - [x] YouTube.tsx @minimalsm PR: #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 ✌🏼

[CodeNebulaX]

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

[pettinarip]

Hey @MahendraBishnoi29 by default the app is building all the languages the site has (which is a lot) and it can take a while to generate all those nodes that the log is describing.

Do the following:

• Duplicate the .env.example file and rename it as .env, at the root of the app
• Update GATSBY_BUILD_LANGS=en to only build one lang (english only in this case)

With that, you should have a faster build. If you face more issues, ping me on Discord and I could take a closer look at those errors you have.

[MahendraBishnoi29]

Hey @MahendraBishnoi29 by default the app is building all the languages the site has (which is a lot) and it can take a while to generate all those nodes that the log is describing.

Do the following:

• Duplicate the .env.example file and rename it as .env, at the root of the app
• Update GATSBY_BUILD_LANGS=en to only build one lang (english only in this case)

With that, you should have a faster build. If you face more issues, ping me on Discord and I could take a closer look at those errors you are have.

discord id?

[pettinarip]

discord id?

pablop#2353

[ameeetgaikwad]

@pettinarip check out my pull request on HorizontalCard. #7784

[AntonioSalazar]

Hey! I would like to help which file I can work on?

[minimalsm]

Hey @AntonioSalazar :-) thanks for offering to help. You can pick up any of the components listed above that aren't already assigned.

Any suggestions on a good first one @pettinarip?

[derajohnson]

Hi. I would like to work on the footer.

[MahendraBishnoi29]

@minimalsm can you please review my PR?

[pettinarip]

Hey @AntonioSalazar I'm assigning Pill.tsx to you 💪🏼 should be pretty straight forward. Thanks for the help!

[pettinarip]

Hi. I would like to work on the footer.

Assigned @derajohnson! 🙏🏼 ty

[frankiefab100]

Hello, I will like to work on CopyToClipboard

[pettinarip]

Hello, I will like to work on CopyToClipboard

Awesome @frankiefab100 I've assigned it to you, thanks for the help ❤️

[pettinarip]

@EatCrypto I hope you haven't done too much work on the EnergyConsumptionChart component yet.

I wanted to apologize for the logistics around the migration of this component but we had to migrate it earlier because we needed it for a different PR and to fix a bug it had on small resolutions where it was not shrinking enough.

Since that component has already been migrated, do you want to pick a different one from the list? or I could assign a new one for you if you prefer.

[Gift-Stack]

I’d like to work on these components;

SocialListItem.tsx StablecoinBoxGrid.tsx StatErrorMessage.tsx StatLoadingMessage.tsx

[pettinarip]

Hey @Gift-Stack thanks for the help! I'm just assigning SocialListItem.tsx for now. Once we finish with that one we can assign the other ones.

[MahendraBishnoi29]

hey @pettinarip my previous PR is merged now i want to work on DismissibleCard.tsx & SkipLink.tsx 🛠

[laurentlucian]

hey @pettinarip, I picked Logo component as my first contribution and I'd like to migrate Morpher next

[ImMiguelP]

i will like to contribute with ImageCard.tsx and InfoBanner.tsx @pettinarip

[pettinarip]

Files assigned guys @MahendraBishnoi29 @laurentlucian @ImMiguelP ✌🏼 thanks!

[ameeetgaikwad]

Check out my pr #7893