Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Shadcn/Tailwind migration #13946

Open
44 of 65 tasks
pettinarip opened this issue Sep 24, 2024 · 60 comments · May be fixed by #14495 or #14508
Open
44 of 65 tasks

Shadcn/Tailwind migration #13946

pettinarip opened this issue Sep 24, 2024 · 60 comments · May be fixed by #14495 or #14508
Assignees
@pettinarip
Labels
epic 💪 This issue is an epic on our product roadmap good first issue Good item to try if you're new to contributing hacktoberfest Track hacktoberfest activity hacktoberfest-beginner GFI for hacktoberfest participants help wanted Extra attention is needed or someone is needed to help needs triage 📥 This issue needs triaged before being worked on

Comments

@pettinarip
Copy link
Member

pettinarip commented Sep 24, 2024 •
edited
Loading

Description

As part of our Q3 roadmap, this issue tracks the progress of the Shadcn/Tailwind migration.

How to contribute

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

  1. Read the following “Tips & Guidance” section for basic things to keep in mind while doing the migration.
  2. Leave a comment here asking which component you would like to work out.
  3. We assign you to the file by adding your handle next to the file name in the list.
    • If you were assigned to multiple files then create a separate PR for each component. It will make the testing and review process much simpler and more organized.
  4. Once you finish it (PR merged), we’ll mark it as done.
  5. Repeat!

Tips & Guidance

  • Migrate only the components defined in the component file.
  • Replace all Chakra imports (unless there is an exception mentioned in this file) with native tags or shadcn components installed in components/ui
    • @chakra-ui/react/Icon ⇒ just use the exported svg component from react-icons instead <MdMenu className="text-2xl" />
  • Replace other imports
    • OldText ⇒ use the native <p> tag
    • OldHeading ⇒ use native <h1>, <h2>, etc. tags
    • Link ⇒ use the Link component defined in components/ui/Link
    • Buttons ⇒ use the buttons defined in components/ui/buttons/Button
    • images ⇒ use TwImage from components/Image
  • For layout and general component structure
    • Use the components in components/ui/flex as much as possible
  • Colors
    • Define missing colors in the tailwind.config.ts file. At the review stage, we will analyze & try to replace old theme colors with new colors from the Design System.

Done

In review

Pending

src/components

src/components/Staking
@pettinarip pettinarip self-assigned this Sep 24, 2024
@github-actions github-actions bot added the needs triage 📥 This issue needs triaged before being worked on label Sep 24, 2024
@pettinarip pettinarip added epic 💪 This issue is an epic on our product roadmap and removed needs triage 📥 This issue needs triaged before being worked on labels Sep 24, 2024
@TylerAPfledderer
Copy link
Contributor

@pettinarip I'm currently handling all of the Quiz components

@pettinarip
Copy link
Member Author

@TylerAPfledderer gotcha! added your name next to them, ty.

@saurabhburade
Copy link
Contributor

@pettinarip Please assign me the Banners/ContributorsQuizBanner.tsx component.

@pettinarip
Copy link
Member Author

Assigned @saurabhburade 👍🏼

@minimalsm minimalsm added help wanted Extra attention is needed or someone is needed to help good first issue Good item to try if you're new to contributing labels Sep 25, 2024
This was referenced Sep 25, 2024
Merged
Merged
Merged
Merged
Merged
Merged
@Baystef
Copy link
Contributor

Baystef commented Sep 27, 2024

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

@pettinarip
Copy link
Member Author

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

Yey! awesome, assigned! let me know if you need any clarification or help 💪🏼

@Baystef
Copy link
Contributor

Baystef commented Sep 27, 2024 •
edited
Loading

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

Yey! awesome, assigned! let me know if you need any clarification or help 💪🏼

TwImage is not working with remote URLs , getting this error cos its using next/image under the hood Error: Invalid src prop (https://avatars2.githubusercontent.com/u/364566?v=4) on next/image, hostname "avatars2.githubusercontent.com" is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

should I add avatars2.githubusercontent.com to next.config.js or use the bare img element, this also shows a warning Using could result in slower LCP and higher bandwidth. Consider usingfromnext/image to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element but it works
@pettinarip

@pettinarip
Copy link
Member Author

Right @Baystef lets use the img tag for now. You can leave the warning.

Baystef added a commit to Baystef/ethereum-org-website that referenced this issue Sep 27, 2024
@Baystef
refactor(shadcn migration): migrate contributors component to shadcn/…
14dd4c9 
…tailwind [ethereum#13946]
@Baystef Baystef mentioned this issue Sep 27, 2024
Merged
This was referenced Sep 27, 2024
Merged
Merged
@corwintines corwintines added the hacktoberfest Track hacktoberfest activity label Sep 30, 2024
@isabelladebrito isabelladebrito pinned this issue Sep 30, 2024
@saurabhburade saurabhburade mentioned this issue Oct 1, 2024
Merged
@yashtotla
Copy link
Contributor

Hi @pettinarip can you assign the ProductCard.tsx migration to me? Thanks!

@kushagrasarathe
Copy link
Contributor

hey @pettinarip could you please assign ExpandableCard.tsx's migration to me. Thanks

@pettinarip
Copy link
Member Author

@yashtotla @kushagrasarathe thanks for helping! assigned, thanks

@pettinarip
Copy link
Member Author

Hey @pettinarip can you assign me stat/index.tsx

Done @bhushanpardeshii 🙌🏼 ty

@kushagrasarathe kushagrasarathe mentioned this issue Oct 25, 2024
Merged
@kushagrasarathe
Copy link
Contributor

hey @pettinarip i've pushed 2 pr's, #14226 and #14233 for HorizontalCard and Layer2ProductCard components

This was referenced Oct 25, 2024
Closed
Open
@bhushanpardeshii
Copy link
Contributor

would like to work on this TutorialMetadata.tsx.Please assign me.

@pettinarip
Copy link
Member Author

would like to work on this TutorialMetadata.tsx.Please assign me.

Done @bhushanpardeshii!

@cqw-acq cqw-acq mentioned this issue Oct 31, 2024
Merged
@cqw-acq
Copy link
Contributor

cqw-acq commented Oct 31, 2024 •
edited
Loading

@pettinarip done! migration RollupProductDevDoc.tsx to tailwind #14268

@yashtotla yashtotla mentioned this issue Nov 1, 2024
Merged
@plvzfq-rit
Copy link

Hi! I would like to work on FileContributors.tsx. Please assign me. Thanks!

@yashtotla
Copy link
Contributor

Hi @pettinarip I have opened a PR for migrating ProductList.
Can you assign Leaderboard.tsx to me next?

bhushanpardeshii added a commit to bhushanpardeshii/ethereum-org-website that referenced this issue Nov 6, 2024
@bhushanpardeshii
migration stat component to shadcn/tailwind [Fixes ethereum#13946]
251a007
@bhushanpardeshii bhushanpardeshii mentioned this issue Nov 6, 2024
Merged
@pettinarip
Copy link
Member Author

@plvzfq-rit done! and @yashtotla done! I'll review that PR soon. Assigned the other one 👍🏼

@bhushanpardeshii bhushanpardeshii mentioned this issue Nov 8, 2024
Merged
This was referenced Nov 21, 2024
Open
Open
Open
@Sambit03
Copy link
Contributor

Review request @pettinarip
Translatathon/TranslationHubCallout.tsx #14412
Translatathon/StepByStepInstructions.tsx #14411
Translatathon/TranslatathonBanner.tsx #14410

@Nityam573
Copy link

Hi @pettinarip I am new to open source contribution please help me out and assign me a task

@ameeetgaikwad ameeetgaikwad mentioned this issue Dec 15, 2024
Merged
This was referenced Dec 24, 2024
Open
Open
@pettinarip pettinarip reopened this Dec 24, 2024
@github-actions github-actions bot added the needs triage 📥 This issue needs triaged before being worked on label Dec 24, 2024
This was referenced Dec 24, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@pettinarip pettinarip

Labels
epic 💪 This issue is an epic on our product roadmap good first issue Good item to try if you're new to contributing hacktoberfest Track hacktoberfest activity hacktoberfest-beginner GFI for hacktoberfest participants help wanted Extra attention is needed or someone is needed to help needs triage 📥 This issue needs triaged before being worked on
Projects
None yet
Milestone
No milestone