chore(i18n,docs): processed translations (#45513)
This commit is contained in:
camperbot
GitHub
@ -16,7 +16,7 @@
|
|||||||
- [Trabalhar em testes do Cypress](how-to-add-cypress-tests.md)
|
- [Trabalhar em testes do Cypress](how-to-add-cypress-tests.md)
|
||||||
- [Trabalhar nos desafios em vídeo](how-to-help-with-video-challenges.md)
|
- [Trabalhar nos desafios em vídeo](how-to-help-with-video-challenges.md)
|
||||||
- [Trabalhe no tema de documentação](how-to-work-on-the-docs-theme.md)
|
- [Trabalhe no tema de documentação](how-to-work-on-the-docs-theme.md)
|
||||||
- [Work on the component library](how-to-work-on-the-component-library.md)
|
- [Trabalhar na biblioteca de componentes](how-to-work-on-the-component-library.md)
|
||||||
- **Guias adicionais**
|
- **Guias adicionais**
|
||||||
- [Testar traduções localmente](how-to-test-translations-locally.md)
|
- [Testar traduções localmente](how-to-test-translations-locally.md)
|
||||||
- [Compreender a estrutura do arquivo do currículo](curriculum-file-structure.md)
|
- [Compreender a estrutura do arquivo do currículo](curriculum-file-structure.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/).
|
Bem-vindo à biblioteca `ui-components` do freeCodeCamp. Os componentes são construídos, em grande parte, do zero, com elementos HTML básicos e [Tailwind CSS](https://tailwindcss.com/).
|
||||||
|
|
||||||
# How to Work on the Component Library
|
# Como trabalhar na biblioteca de componentes
|
||||||
|
|
||||||
> [!NOTE]
|
> [!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).
|
> O freeCodeCamp tem usado componentes do Bootstrap na interface do usuário. No entanto, estamos nos afastando disso e construindo nossa própria biblioteca de componentes, o que ajuda a padronizar nossos padrões de UX/UI e melhorar a acessibilidade. O projeto é acompanhado [nesta issue do GitHub](https://github.com/freeCodeCamp/freeCodeCamp/issues/44668).
|
||||||
|
|
||||||
The following steps are recommended when working on a new component:
|
São recomendados os seguintes passos ao trabalhar em um novo componente:
|
||||||
|
|
||||||
- Research and planning
|
- Pesquisar e planejar
|
||||||
- Implement the component
|
- Implementar o componente
|
||||||
- Display the use cases on Storybook
|
- Exibir os casos de uso no Storybook
|
||||||
- Write unit tests
|
- Escrever testes unitários
|
||||||
|
|
||||||
## Researching and planning
|
## Pesquisar e planejar
|
||||||
|
|
||||||
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 accesibility requirements, you should also pay attention to the accessibility aspect of the components, see which HTML elements and ARIA attributes are used under the hood.
|
Antes de construir um componente, você precisa pesquisar e documentar como a versão existente se comporta e qual é sua aparência, para garantir que o novo tenha estilos correspondentes e suporte todos os usos atuais. Para atender aos requisitos de acessibilidade da web, você também deve prestar atenção ao aspecto de acessibilidade dos componentes, ver quais elementos HTML e atributos ARIA são usados por baixo dos panos.
|
||||||
|
|
||||||
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).
|
Depois de coletar informações suficientes sobre o componente, você pode começar a pensar na interface de propriedades. Idealmente, a interface deveria ser o mais semelhante possível à versão atual, a fim de facilitar a adoção mais tarde. Como estamos usando componentes do Bootstrap, a abordagem mais simples é imitar a [implementação deles](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.
|
Preferimos pull requests menores do que grandes, porque eles aceleram o tempo de revisão e reduzem a sobrecarga cognitiva para os revisores. Por essa razão, pense em como dividiria a implementação e apresentaria um plano de entrega.
|
||||||
|
|
||||||
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.
|
Recomendamos abrir uma issue separada no GitHub para cada componente e incluir todas as observações na descrição da issue. Ela pode ser usada como um lugar para hospedar todas as suas notas de trabalho, assim como uma maneira de comunicar a abordagem aos revisores. Utilizaremos o tópico da issue para continuar a discussão, se necessário. [A issue sobre o componente Button](https://github.com/freeCodeCamp/freeCodeCamp/issues/45357) pode ser usada como uma referência.
|
||||||
|
|
||||||
## Implementing the component
|
## Implementar o componente
|
||||||
|
|
||||||
A new component can be created using the following command from the root directory:
|
Um novo componente pode ser criado usando o seguinte comando a partir do diretório raiz:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
cd tools/ui-components
|
cd tools/ui-components
|
||||||
@ -33,55 +33,55 @@ cd tools/ui-components
|
|||||||
npm run gen-component MyComponent
|
npm run gen-component MyComponent
|
||||||
```
|
```
|
||||||
|
|
||||||
The command will generate a new folder inside the `ui-components` directory, with the following files:
|
O comando gerará uma nova pasta dentro do diretório `ui-components`, com os seguintes arquivos:
|
||||||
|
|
||||||
| File name | Purpose |
|
| Nome do arquivo | Finalidade |
|
||||||
| -------------------------- | ------------------------------------------------------ |
|
| -------------------------- | ----------------------------------------------------------------- |
|
||||||
| `index.ts` | It is used for exporting the component and its types. |
|
| `index.ts` | É utilizado para exportar os componentes e os seus tipos. |
|
||||||
| `my-component.stories.tsx` | It is used for demoing the component on Storybook. |
|
| `my-component.stories.tsx` | É utilizado para fazer a demonstração do componente no Storybook. |
|
||||||
| `my-component.test.tsx` | It is a test file. |
|
| `my-component.test.tsx` | É um arquivo de teste. |
|
||||||
| `my-component.tsx` | It is where we implement the component. |
|
| `my-component.tsx` | É onde implementamos o componente. |
|
||||||
| `types.ts` | Is is where we locate component's interface and types. |
|
| `types.ts` | É onde localizamos a interface e os tipos do componente. |
|
||||||
|
|
||||||
Each component is different, but in general the components should:
|
Cada componente é diferente, mas, em geral, os componentes deveriam:
|
||||||
|
|
||||||
- Support forwarding ref
|
- Dar suporte à ref de encaminhamento
|
||||||
- Be styled for both light and dark themes
|
- Ser estilizados para temas claros e escuros
|
||||||
- Be styled internally based on their props (the consumers should not need to restyle the components with the `className` prop)
|
- Ser estilizados internamente com base em suas propriedades (os consumidores não devem precisar reestilizar os componentes com a propriedade `className`)
|
||||||
- Utilize the built-in styling system from Tailwind instead of having custom styles
|
- Usar o sistema de estilo integrado do Tailwind ao invés de ter estilos personalizados
|
||||||
|
|
||||||
### Useful links
|
### Links úteis
|
||||||
|
|
||||||
- [Tailwind CSS Configuration](https://tailwindcss.com/docs/configuration)
|
- [Configuração do Tailwind CSS](https://tailwindcss.com/docs/configuration)
|
||||||
- [React Bootstrap v0.33 Docs](https://react-bootstrap-v3.netlify.app)
|
- [Documentação do React Bootstrap v0.33](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)
|
- [Folha de estilos do Bootstrap 3.3.7](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)
|
- [Implementação atual do React Bootstrap](https://github.com/react-bootstrap/react-bootstrap/tree/master/src)
|
||||||
- [React Bootstrap current tests](https://github.com/react-bootstrap/react-bootstrap/tree/master/test)
|
- [Testes atuais do React Bootstrap](https://github.com/react-bootstrap/react-bootstrap/tree/master/test)
|
||||||
|
|
||||||
## Displaying the use cases on Storybook
|
## Exibir os casos de uso no Storybook
|
||||||
|
|
||||||
Use cases of the component should be added to the Storybook file (`.stories.tsx`).
|
Os casos de uso do componente devem ser adicionados ao arquivo Storybook (`.stories.tsx`).
|
||||||
|
|
||||||
To start Storybook, run the following command from the root directory:
|
Para iniciar o Storybook, execute o seguinte comando a partir do diretório raiz:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run storybook
|
npm run storybook
|
||||||
```
|
```
|
||||||
|
|
||||||
The Storybook page is available on [http://localhost:6006](http://localhost:6006).
|
A página do Storybook está disponível em [http://localhost:6006](http://localhost:6006).
|
||||||
|
|
||||||
## Writing unit tests
|
## Escrever testes unitários
|
||||||
|
|
||||||
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.
|
Usamos a [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) (biblioteca de testes do React) para escrever testes unitários. Os testes devem investigar se os componentes se comportam como esperados e se estão acessíveis.
|
||||||
|
|
||||||
To run tests against the component library, run the following command from the root directory:
|
Para executar testes contra a biblioteca de componentes, execute o seguinte comando a partir do diretório raiz:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run test-ui-components
|
npm run test-ui-components
|
||||||
```
|
```
|
||||||
|
|
||||||
### Useful links
|
### Links úteis
|
||||||
|
|
||||||
- [Testing for Accessibility](https://testing-library.com/docs/dom-testing-library/api-accessibility)
|
- [Testes de acessibilidade](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)
|
- [Ordem de prioridade das consultas da biblioteca de testes do React](https://testing-library.com/docs/queries/about/#priority)
|
||||||
- [Common mistakes with React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)
|
- [Erros comuns com a biblioteca de testes do React](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)
|
||||||
|
|||||||
Reference in New Issue
Block a user