5.1 KiB
Benvenuti nella libreria ui-components di freeCodeCamp. I componenti sono principalmente creati da zero con elementi HTML base e Tailwind CSS.
Come lavorare sulla libreria dei componenti
[!NOTE]
freeCodeCamp stava utilizzando componeti Bootstrap nell'UI. Ma, ci stiamo pian piano allontanando da ciò e creando la nostra libreria componenti, il che aiuta a standardizzare i pattern UI/UX e a migliorare l'accessibilità. Teniamo traccia del progetto in questa issue su GitHub.
I seguenti step sono raccomandati quando lavori su un nuovo componente:
- Ricerca e pianificazione
- Implementazione del componente
- Visualizzazione degli use case in Storybook
- Scrittura dei test unitari
Ricerca e pianificazione
Prima di creare un componente, devi ricercare e documentare il comportamento e l'aspetto della versione esistente, per assicurarti che il nuovo componente combaci in stile e supporti tutti gli usi correnti. In modo da soddisfare tutti i requisiti di accessibilità web, dovresti prestare attenzione all'aspetto di accessibilità del componente, vedere quali elementi HTML e attributi ARIA sono usati.
Una volta che hai raccolto abbastanza informazioni sul componente, puoi iniziare a pensare alle proprietà dell'interfaccia. Idealmente, l'interfaccia dovrebbe essere quanto più simile possibile alla versione corrente, per renderne più semplice l'adozione in futuro. Visto che stiamo usando componenti Bootstrap, l'approccio più semplice è mimare la loro implementazione.
Preferiamo pull request piccole piuttosto che grandi, perché riducono la velocità di revisione e il carico cognitivo per i revisori. Per questa ragione dovresti pensare a come dividere l'implementazione in pezzi più piccoli e creare un piano di delivery.
Raccomandiamo di aprire una issue su GitHub separata per ogni componente e includere tutte le note nella descrizione della issue. Può essere usato come posto per ospitare tutte le tue note di lavoro, come pure un modo per comunicare l'approccio con i revisori. Useremo i commenti dell'issue per discussioni ulteriori se necessario. La issue per il componente Button può essere usata come referenza.
Implementare il componente
Un nuovo componente può essere creato usando i seguenti comandi dalla root directory:
cd tools/ui-components
npm run gen-component MyComponent
Il comando genererà una nuova cartella dentro la directory ui-components, con i seguenti file:
| Nome file | Scopo |
|---|---|
index.ts |
Usato per esportare il componente e i suoi tipi. |
my-component.stories.tsx |
Usato per fare la demo del componente con Storybook. |
my-component.test.tsx |
file di test. |
my-component.tsx |
Dove implementiamo il componente. |
types.ts |
Dove mettiamo l'interfaccia e i tipi del componente. |
Ogni componente è diverso, ma in genere un componente dovrebbe:
- Supportare l'invio a ref
- Essere stilizzato sia per il tema chiaro che scuro
- Essere stilizzato internamente basato sulle proprietà (Il consumatore non dovrebbe avere bisogno di stilizzare il componente con la proprietà
className) - Utilizzare il sistema integrato di stilizzazione di Tailwind invece di usare stili personalizzati
Link utili
- Tailwind CSS Configuration
- React Bootstrap v0.33 Docs
- Bootstrap 3.3.7 stylesheet
- Implementazione corrente di React Bootstrap
- Test attuali di React Bootstrap
Visualizzazione degli use case con Storybook
Gli use case di un componente dovrebbero essere aggiunti al file Storybook (.stories.tsx).
Per far partire Storybook, esegui i seguenti comandi dalla directory root:
npm run storybook
La pagina Storybook è disponibile a http://localhost:6006.
Scrivere test unitari
Usiamo React Testing Library per scrivere i test dell'unità. I test dovrebbero verificare che i componenti si comportano come previsto e sono accessibili.
Per eseguire i test sulla libreria componenti, esegui il seguente comando dalla directory root:
npm run test-ui-components