From 088020cd4945efe8b912107123ba738ed59ab976 Mon Sep 17 00:00:00 2001 From: camperbot Date: Wed, 23 Mar 2022 18:59:18 +0530 Subject: [PATCH] chore(i18n,docs): processed translations (#45513) --- docs/i18n/portuguese/_sidebar.md | 2 +- .../how-to-work-on-the-component-library.md | 90 +++++++++---------- 2 files changed, 46 insertions(+), 46 deletions(-) diff --git a/docs/i18n/portuguese/_sidebar.md b/docs/i18n/portuguese/_sidebar.md index 3b310f53c8..e029bfd3f8 100644 --- a/docs/i18n/portuguese/_sidebar.md +++ b/docs/i18n/portuguese/_sidebar.md @@ -16,7 +16,7 @@ - [Trabalhar em testes do Cypress](how-to-add-cypress-tests.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) - - [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** - [Testar traduções localmente](how-to-test-translations-locally.md) - [Compreender a estrutura do arquivo do currículo](curriculum-file-structure.md) diff --git a/docs/i18n/portuguese/how-to-work-on-the-component-library.md b/docs/i18n/portuguese/how-to-work-on-the-component-library.md index 46bf508247..6f3269126b 100644 --- a/docs/i18n/portuguese/how-to-work-on-the-component-library.md +++ b/docs/i18n/portuguese/how-to-work-on-the-component-library.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] > -> 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 -- Implement the component -- Display the use cases on Storybook -- Write unit tests +- Pesquisar e planejar +- Implementar o componente +- Exibir os casos de uso no Storybook +- 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 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: +O comando gerará uma nova pasta dentro do diretório `ui-components`, com os seguintes arquivos: -| 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 do arquivo | Finalidade | +| -------------------------- | ----------------------------------------------------------------- | +| `index.ts` | É utilizado para exportar os componentes e os seus tipos. | +| `my-component.stories.tsx` | É utilizado para fazer a demonstração do componente no Storybook. | +| `my-component.test.tsx` | É um arquivo de teste. | +| `my-component.tsx` | É onde implementamos o componente. | +| `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 -- Be styled for both light and dark themes -- Be styled internally based on their props (the consumers should not need to restyle the components with the `className` prop) -- Utilize the built-in styling system from Tailwind instead of having custom styles +- Dar suporte à ref de encaminhamento +- Ser estilizados para temas claros e escuros +- Ser estilizados internamente com base em suas propriedades (os consumidores não devem precisar reestilizar os componentes com a propriedade `className`) +- 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) -- [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) +- [Configuração do Tailwind CSS](https://tailwindcss.com/docs/configuration) +- [Documentação do React Bootstrap v0.33](https://react-bootstrap-v3.netlify.app) +- [Folha de estilos do Bootstrap 3.3.7](https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css) +- [Implementação atual do React Bootstrap](https://github.com/react-bootstrap/react-bootstrap/tree/master/src) +- [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 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 npm run test-ui-components ``` -### Useful links +### Links úteis -- [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) +- [Testes de acessibilidade](https://testing-library.com/docs/dom-testing-library/api-accessibility) +- [Ordem de prioridade das consultas da biblioteca de testes do React](https://testing-library.com/docs/queries/about/#priority) +- [Erros comuns com a biblioteca de testes do React](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)