Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Replace @radix-ui/react-tabs with the Tabs component from Headless UI

Aperta
#511 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
30/100
Tipo di issue
Refactoring
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia da src/tabs/tabs.tsx all’import di Radix indicato, quindi leggi l’issue #232 sull’aggiornamento di React e Headless UI v2. Definisci l’interfaccia delle prop del componente indipendentemente dalla libreria sottostante e, dopo l’aggiornamento, migra Tabs a Headless UI. Il lavoro è completato quando la dipendenza aggiuntiva tabs non è più necessaria e la modifica incompatibile dell’interfaccia è stata gestita.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

release: major status: blocked

Description

We are using @radix-ui/react-tabs as the base of the Tabs component:

https://github.com/freeCodeCamp/ui/blob/5b612c4b17e9d0aba5b8ddb611ad284ac67d53b5/src/tabs/tabs.tsx#L2

Since we build other components with Headless UI and this library also provides Tabs, I think we should update our Tabs to use Headless UI, too, to remove an extra dependency.

The Tabs component is using radix-ui/react-tabs props interface, so switching to Headless UI and use its props interface would be a breaking change. We might want to take this opportunity to define a prop interface for the component, so that the interface doesn't depend on the external library.

[!NOTE]
This change should be made after we have upgraded Headless UI to v2, which requires a React upgrade (#232).

Lingua principale
TypeScript
Stelle
75
Fork
37
Nessuna PR unita negli ultimi 30g

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di freeCodeCamp/ui

Tutte le issue di freeCodeCamp/ui

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.