search

ethereum / ethereum-org-website

Ethereum.org is a primary online resource for the Ethereum community.
https://ethereum.org/
MIT License
5.09k stars 4.83k forks source link

Epic: Implement UI library #6374

Closed pettinarip closed 1 year ago

pettinarip commented 2 years ago

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

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
beamandala commented 2 years ago

Can I work on SectionNav.tsx?

pettinarip commented 2 years ago

Can I work on SectionNav.tsx?

Sure, I've assigned that one to you @Master7130 ty

beamandala commented 2 years ago
image

Anybody know how to fix this error? It's happening when I try to go to "http://localhost:8000/en/developers/docs/intro-to-ethereum/"

MahendraBishnoi29 commented 2 years ago
image

Anybody know how to fix this error? It's happening when I try to go to "http://localhost:8000/en/developers/docs/intro-to-ethereum/"

umm i just hard refresh the page and it works 🙂 and also you can pull latest commits and merge them.

beamandala commented 2 years ago

umm i just hard refresh the page and it works 🙂 and also you can pull latest commits and merge them.

Didn't work so I just cloned the repo again and it worked fine. Thanks for trying to help though.

LuisUrrutia commented 2 years ago

Hi there, I would like to take CodeModal.tsx

pettinarip commented 2 years ago

Hi there, I would like to take CodeModal.tsx

Assigned @LuisUrrutia 💪🏼

LuisUrrutia commented 2 years ago

Hi there, I would like to take CodeModal.tsx

Assigned @LuisUrrutia 💪🏼

Already done, so I'm going to take DataProductCard.tsx

ssk165 commented 2 years ago

Hi there, I'd like to contribute to this task as well, can I take: TitleCardList.tsx TranslationBanner.tsx TutorialTags.tsx Thanks

pettinarip commented 2 years ago

Assigned @LuisUrrutia

pettinarip commented 2 years ago

Hi there, I'd like to contribute to this task as well, can I take: TitleCardList.tsx TranslationBanner.tsx TutorialTags.tsx Thanks

Hi @shubham16598 I'm assigning just TitleCardList for now. Once we finish with that one I can assign the others 💪🏼 thanks!

LuisUrrutia commented 2 years ago

My PR are in review. Meanwhile, I'm going to ask for another component: EventCard.tsx

pettinarip commented 2 years ago

My PR are in review. Meanwhile, I'm going to ask for another component: EventCard.tsx

Awesome, assigned!

beamandala commented 2 years ago

Can I work on ProductList.tsx?

LuisUrrutia commented 2 years ago

@pettinarip EventCard.tsx is also done. I will ask for ExpandableCard.tsx now, and a friend (@douglasmakey) wants to take GhostCard.tsx. For some weird reason, he can't comment on this issue, and we are already in touch with the GitHub Support team, but it would be great if you could assign that component to him.

pettinarip commented 2 years ago

@Master7130 @LuisUrrutia assigned! thanks

nikolovlazar commented 2 years ago

Hi @pettinarip! I'm Lazar, a Chakra UI core member. I noticed the Notion page with the research summary is available only to EF org members. Would love to have a chance to check out that page, if that's possible. Also, would you or anyone else from the foundation be interested in creating a case study for our website?

segunadebayo commented 2 years ago

Creator of Chakra UI here. Excited to see this migration effort!

Happy to help or provide more guidance here if needed. As @nikolovlazar mentioned, we're curious to learn about the decision points that led to choosing Chakra UI.

Khadeeejah commented 2 years ago

HI are there any components left to contribute to, i would love to contribute

samajammin commented 2 years ago

Hey @nikolovlazar @segunadebayo - glad & flattered to see your interest! Also thank you for creating/contributing to Chakra 😄

Not sure how our research doc became private. I've made it public again: https://www.notion.so/efdn/Research-options-and-select-UI-library-babae0a343e24c92be0d6bd486e35c1c

Please let us know if you have any thoughts or questions!

samajammin commented 2 years ago

@nikolovlazar regarding your question:

would you or anyone else from the foundation be interested in creating a case study for our website?

I think so! Would be curious to learn more about what that involves but perhaps it's something @pettinarip & @minimalsm could help out with. What would you recommend as next step? Could you send us info or would you like to set up a call? Feel free to reach us at website@ethereum.org.

TylerAPfledderer commented 2 years ago

@pettinarip I'd like to start with the OrderedList and ExpandableInfo please. This is exciting stuff! 😄

Edit: I'm already near the end to submit a PR for OrderedList 😅

jb-0 commented 2 years ago

I'd be happy to help out, I could start with TutorialTags.tsx. I will wait to hear back before making a start.

Thanks

pettinarip commented 2 years ago

@nikolovlazar @segunadebayo thanks for the amazing work on ChakraUI and for reaching out!

Just saw also that you've added eth.org to the Chakra showcase. Thats amazing! 💪🏼

Same as @samajammin, curious to know how we could help out with the case study.

pettinarip commented 2 years ago

@pettinarip I'd like to start with the OrderedList and ExpandableInfo please. This is exciting stuff! smile

Edit: I'm already near the end to submit a PR for OrderedList sweat_smile

Cool! thanks for that @TylerAPfledderer! Was going to tell you that OrderedList should probably be completely replaced by the native Chakra OrderedList.

We can discuss this in more detail on your PR. I'm assigning those two files to you.

pettinarip commented 2 years ago

I'd be happy to help out, I could start with TutorialTags.tsx. I will wait to hear back before making a start.

Thanks

Hey @jb-0 thanks for helping us here. Just realized that TutorialTags.tsx depends on Pill.tsx (which is already assigned).

Would you like to work on a different file? or I could assign one to you

jb-0 commented 2 years ago

I'd be happy to help out, I could start with TutorialTags.tsx. I will wait to hear back before making a start.

Thanks

Hey @jb-0 thanks for helping us here. Just realized that TutorialTags.tsx depends on Pill.tsx (which is already assigned).

Would you like to work on a different file? or I could assign one to you

Sure, feel free to assign anything to me.

pettinarip commented 2 years ago

Cool, I've assigned UpgradeStatus.tsx to you @jb-0 ty!

Mahmadabid commented 2 years ago

I want to contribute

shariqanwar20 commented 2 years ago

Can I please have these Screenshot_20221005-090843_Chrome

Mahmadabid commented 2 years ago

Can I contribute? RandomAppList.tsx UpgradeBannerNotification.tsx

AliTechGeek52 commented 2 years ago

@pettinarip Can I take RandomAppList.tsx ?

pettinarip commented 2 years ago

@shariqanwar20 Thanks! I'm assigning StablecoinBoxGrid.tsx for now. Once we are done with that one I can assign the others.

pettinarip commented 2 years ago

@Mahmadabid Thanks! I'm assigning UpgradeBannerNotification.tsx to you and RandomAppList.tsx to @AliTechGeek52

TylerAPfledderer commented 2 years ago

@pettinarip I checked out PageMetaData. I don't believe it needs the conversion because it is using logic from Gatsby and reach router with no visual components.

Is there anything from Chakra you would like to see in addition to what's there?

victorpatru commented 2 years ago

Hey @pettinarip. I would love to assigned to the MergeInfographic.tsx component!

ssk165 commented 2 years ago

Hey, @pettinarip Can I get another component assigned? I have raised a PR for TitleCardList.tsx https://github.com/ethereum/ethereum-org-website/pull/8067

therealharpaljadeja commented 2 years ago

hey, @pettinarip please assign me a file.

pettinarip commented 2 years ago

Thanks for noting that @TylerAPfledderer. Yea, make sense to leave it as it is. You could work on RollupProductDevDoc.tsx, I'm assigning that one to you.

RollupProductDevDoc.tsx => @TylerAPfledderer MergeInfographic.tsx => @victorpatru StatErrorMessage.tsx => @shubham16598 StatLoadingMessage.tsx => @therealharpaljadeja

Thanks all of you guys!

psparacino commented 2 years ago

I'll take PageMetadata.tsx as that looks like the only one still open.

Thanks!

TylerAPfledderer commented 2 years ago

I'll take PageMetadata.tsx as that looks like the only one still open.

Thanks!

Hey @psparacino ! 😄

I had commented previously that this component probably does not need migration, and @pettinarip responded above. :)

pettinarip commented 2 years ago

Yes, sorry about that. I've removed it from the list. Thanks @TylerAPfledderer and @psparacino

Soon we will open the second wave of migration with new files. Will let you all know when we do that here and on Discord 🚀

ameeetgaikwad commented 2 years ago

hello, can you assign me some beginner level task? @pettinarip

Khadeeejah commented 2 years ago

Hello @pettinarip kindly assign a task to me thanks

Marcelixoo commented 2 years ago

It seems that everything was already taken, so I'm happy to support any peer with work in progress or maybe take on further work on unlisted components.

AliTechGeek52 commented 2 years ago

Hi @Marcelixoo you can help me in work ( I am working on this component RandomAppList yet ).

Marcelixoo commented 2 years ago

Hi @Marcelixoo you can help me in work ( I am working on this component RandomAppList yet ).

Hey @AliTechGeek52, how do you want to collaborate on that? Do you already have a fork that I can start working on? Or do you prefer to work on it together, i.e. via Discord?

wackerow commented 2 years ago

Hey @pettinarip, noting that there seems to be a known bug with Chakra-UI when hovering over a disabled button

Existing issue with potential workaround patch: https://github.com/chakra-ui/chakra-ui/discussions/5211

We came across this while working on the Learning Quiz widget.

image

I did not want to mess with this in that PR to avoid scope creep, but I wanted to make note of this as we should try to patch this for our disabled buttons.

pettinarip commented 2 years ago

Thanks @wackerow will keep this in mind. I've created an issue to keep track of it #8295.

TylerAPfledderer commented 2 years ago

Hey @pettinarip and @wackerow ! Regarding the comment above about the disabled button styling issue...

I'm a collaborator for Chakra and I had some discussion with other collaborators on this, and can provide some input on this topic if that's alright! 😄 Unless it's a non-issue for you going forward, then no problem. 👍🏼

(I did see amit-ksh's new PR to correct the issue for the site which is great!)