chore(i18n,docs): processed translations (#45597)
This commit is contained in:
camperbot
GitHub
@ -16,13 +16,13 @@
|
||||
- [Lavora sui test Cypress ](how-to-add-cypress-tests.md)
|
||||
- [Lavorare sulle sfide video](how-to-help-with-video-challenges.md)
|
||||
- [Lavorare sul tema della documentazione](how-to-work-on-the-docs-theme.md)
|
||||
- [Work on the component library](how-to-work-on-the-component-library.md)
|
||||
- [Lavorare sulla libreria dei componenti](how-to-work-on-the-component-library.md)
|
||||
- **Guide aggiuntive**
|
||||
- [Testare traduzioni in locale](how-to-test-translations-locally.md)
|
||||
- [Capire la struttura dei file del curriculum](curriculum-file-structure.md)
|
||||
- [Fai il debug delle email in uscita localmente](how-to-catch-outgoing-emails-locally.md)
|
||||
- [Settare freeCodeCamp su Windows (WSL)](how-to-setup-wsl.md)
|
||||
- [User Token Workflow](user-token-workflow.md)
|
||||
- [Workflow con il Token Utente](user-token-workflow.md)
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
Welcome to freeCodeCamp's `ui-components` library. The components are built mostly from scratch with basic HTML elements and [Tailwind CSS](https://tailwindcss.com/).
|
||||
Benvenuti nella libreria `ui-components` di freeCodeCamp. I componenti sono principalmente creati da zero con elementi HTML base e [Tailwind CSS](https://tailwindcss.com/).
|
||||
|
||||
# How to Work on the Component Library
|
||||
# Come lavorare sulla libreria dei componenti
|
||||
|
||||
> [!NOTE]
|
||||
>
|
||||
> freeCodeCamp has been using Bootstrap components in the UI. However, we are moving away from it and building our own component library, which helps standardize our UX/UI patterns and improve accessibility. The project is tracked in [this GitHub issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/44668).
|
||||
> 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](https://github.com/freeCodeCamp/freeCodeCamp/issues/44668).
|
||||
|
||||
The following steps are recommended when working on a new component:
|
||||
I seguenti step sono raccomandati quando lavori su un nuovo componente:
|
||||
|
||||
- Research and planning
|
||||
- Implement the component
|
||||
- Display the use cases on Storybook
|
||||
- Write unit tests
|
||||
- Ricerca e pianificazione
|
||||
- Implementazione del componente
|
||||
- Visualizzazione degli use case in Storybook
|
||||
- Scrittura dei test unitari
|
||||
|
||||
## Researching and planning
|
||||
## Ricerca e pianificazione
|
||||
|
||||
Before building a component, you need to research and document on how the existing version behaves and looks, to ensure that the new one has matching styles and supports all the current usages. In order to meet the web accessibility requirements, you should also pay attention to the accessibility aspect of the component, see which HTML elements and ARIA attributes are used under the hood.
|
||||
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.
|
||||
|
||||
Once you have gathered enough information about the component, you can start thinking about the props interface. Ideally, the interface should be as similar to the current version as possible, to ease the adoption later on. Since we are using Bootstrap components, the simplest approach is to mimic [their implementation](https://github.com/react-bootstrap/react-bootstrap/tree/master/src).
|
||||
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](https://github.com/react-bootstrap/react-bootstrap/tree/master/src).
|
||||
|
||||
We prefer smaller pull requests rather than a large one, because they speed up the review time and reduce cognitive overload for the reviewers. For that reason, you should think about how you would break down the implementation and come up with a delivery plan.
|
||||
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.
|
||||
|
||||
We recommend opening a separate GitHub issue for each component and include all the notes in the issue description. It can be used as a place to host all of your working notes, as well as a way to communicate the approach with the reviewers. We will use the issue thread for further discussion if needed. [The issue for Button component](https://github.com/freeCodeCamp/freeCodeCamp/issues/45357) can be used as a reference.
|
||||
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](https://github.com/freeCodeCamp/freeCodeCamp/issues/45357) può essere usata come referenza.
|
||||
|
||||
## Implementing the component
|
||||
## Implementare il componente
|
||||
|
||||
A new component can be created using the following command from the root directory:
|
||||
Un nuovo componente può essere creato usando i seguenti comandi dalla root directory:
|
||||
|
||||
```bash
|
||||
cd tools/ui-components
|
||||
@ -33,55 +33,55 @@ cd tools/ui-components
|
||||
npm run gen-component MyComponent
|
||||
```
|
||||
|
||||
The command will generate a new folder inside the `ui-components` directory, with the following files:
|
||||
Il comando genererà una nuova cartella dentro la directory `ui-components`, con i seguenti file:
|
||||
|
||||
| File name | Purpose |
|
||||
| -------------------------- | ------------------------------------------------------ |
|
||||
| `index.ts` | It is used for exporting the component and its types. |
|
||||
| `my-component.stories.tsx` | It is used for demoing the component on Storybook. |
|
||||
| `my-component.test.tsx` | It is a test file. |
|
||||
| `my-component.tsx` | It is where we implement the component. |
|
||||
| `types.ts` | Is is where we locate component's interface and types. |
|
||||
| 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. |
|
||||
|
||||
Each component is different, but in general a component should:
|
||||
Ogni componente è diverso, ma in genere un componente dovrebbe:
|
||||
|
||||
- Support forwarding ref
|
||||
- Be styled for both light and dark themes
|
||||
- Be styled internally based on their props (the consumers should not need to restyle the component with the `className` prop)
|
||||
- Utilize the built-in styling system from Tailwind instead of having custom styles
|
||||
- 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
|
||||
|
||||
### Useful links
|
||||
### Link utili
|
||||
|
||||
- [Tailwind CSS Configuration](https://tailwindcss.com/docs/configuration)
|
||||
- [React Bootstrap v0.33 Docs](https://react-bootstrap-v3.netlify.app)
|
||||
- [Bootstrap 3.3.7 stylesheet](https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css)
|
||||
- [React Bootstrap current implementation](https://github.com/react-bootstrap/react-bootstrap/tree/master/src)
|
||||
- [React Bootstrap current tests](https://github.com/react-bootstrap/react-bootstrap/tree/master/test)
|
||||
- [Implementazione corrente di React Bootstrap](https://github.com/react-bootstrap/react-bootstrap/tree/master/src)
|
||||
- [Test attuali di React Bootstrap](https://github.com/react-bootstrap/react-bootstrap/tree/master/test)
|
||||
|
||||
## Displaying the use cases on Storybook
|
||||
## Visualizzazione degli use case con Storybook
|
||||
|
||||
Use cases of the component should be added to the Storybook file (`.stories.tsx`).
|
||||
Gli use case di un componente dovrebbero essere aggiunti al file Storybook (`.stories.tsx`).
|
||||
|
||||
To start Storybook, run the following command from the root directory:
|
||||
Per far partire Storybook, esegui i seguenti comandi dalla directory root:
|
||||
|
||||
```bash
|
||||
npm run storybook
|
||||
```
|
||||
|
||||
The Storybook page is available on [http://localhost:6006](http://localhost:6006).
|
||||
La pagina Storybook è disponibile a [http://localhost:6006](http://localhost:6006).
|
||||
|
||||
## Writing unit tests
|
||||
## Scrivere test unitari
|
||||
|
||||
We use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) to write unit tests. The tests should assert that the components behave as expected and are accessible.
|
||||
Usiamo [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) per scrivere i test dell'unità. I test dovrebbero verificare che i componenti si comportano come previsto e sono accessibili.
|
||||
|
||||
To run tests against the component library, run the following command from the root directory:
|
||||
Per eseguire i test sulla libreria componenti, esegui il seguente comando dalla directory root:
|
||||
|
||||
```bash
|
||||
npm run test-ui-components
|
||||
```
|
||||
|
||||
### Useful links
|
||||
### Link utili
|
||||
|
||||
- [Testing for Accessibility](https://testing-library.com/docs/dom-testing-library/api-accessibility)
|
||||
- [Order of priority of React Testing Library's queries](https://testing-library.com/docs/queries/about/#priority)
|
||||
- [Common mistakes with React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)
|
||||
- [Testare per accessibilità](https://testing-library.com/docs/dom-testing-library/api-accessibility)
|
||||
- [Ordine di priorità delle query di React Testing Library](https://testing-library.com/docs/queries/about/#priority)
|
||||
- [Errori comuni con React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
# How the User Token Workflow Works
|
||||
# Come funziona il flusso di lavoro con i token utente
|
||||
|
||||
User tokens are used to identify users to third parties so challenges completed using those services can be saved to a user's account.
|
||||
I token utente sono utilizzati per identificare gli utenti con terze parti in modo tale che le sfide completate usando tali servizi possano essere salvate nell'account dell'utente.
|
||||
|
||||
## How they are created
|
||||
## Come vengono creati
|
||||
|
||||
At the moment, the tokens are only used to submit the Relational Database challenges. A token gets created when a signed in user clicks the "Click here to start the course" or "Click here to start the project" buttons to start one of the Relational Database courses or projects.
|
||||
Al momento, i token sono utilizzati solo per completare le sfide della certificazione Database Relazionale. Un token viene creato quando un utente loggato clicca sui pulsanti "Clicca qui per iniziare il corso" o "Clicca qui per iniziare il progetto" per iniziare uno dei corsi o progetti della certificazione Database Relazionali.
|
||||
|
||||
## When they get deleted
|
||||
## Quando vengono cancellati
|
||||
|
||||
A user token will be deleted when a user signs out of freeCodeCamp, resets their progress, deletes their account, or manually deletes the token using the widget on the settings page.
|
||||
Un token utente viene cancellato quando un utente fa log out da freeCodeCamp, resetta i propri progressi, cancella il proprio account, o cancella manualmente il token usando il widget nella pagina delle impostazioni.
|
||||
|
||||
## How they work
|
||||
## Come funzionano
|
||||
|
||||
Tokens are stored in a `UserToken` collection in the database. Each record has a unique `_id`, which is the token, and a `user_id` that links to the user's account from the `user` collection. The token is encoded using JWT and sent to the client when it's created. That encoded token is then given to third party services that need it and sent to our API by them when a challenge is completed. When our API gets it, it is decoded so we can identify the user submitting a challenge and save the completed challenge to their `completedChallenges`.
|
||||
I token sono memorizzati in una raccolta `UserToken` nel database. Ogni record ha un `_id` unico, che è il token, e un `user_id` che collega all'account dell'utente dalla collezione `user`. Il token è codificato usando JWT e inviato al client quando viene creato. Questo token codificato viene quindi dato a servizi di terze parti che ne hanno bisogno e inviato alla nostra API da loro quando una sfida è completata. Quando la nostra API lo riceve, è decodificato in modo da poter identificare l'utente che presenta una sfida e salvare la sfida completata nella lista delle sfide completate `completedChallenges` dell'utente.
|
||||
|
||||
Reference in New Issue
Block a user