Skip to content

Commit

Permalink
Merge pull request #1 from pablolucas890/translate-doc-pt-br
Browse files Browse the repository at this point in the history
Fixing issues wrotes by jonniebigodes
  • Loading branch information
Wanderson77 committed Feb 5, 2024
2 parents c5d6010 + 6396397 commit 4578637
Show file tree
Hide file tree
Showing 6 changed files with 35 additions and 44 deletions.
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
---
title: 'Montar um componente composto'
title: 'Construção de um componente composto'
tocTitle: 'Componente Composto'
description: 'Montar um componente composto a partir de componentes mais simples'
description: 'Construção de um componente composto a partir de componentes mais simples'
---

No capítulo anterior, construímos nosso primeiro componente; este capítulo extende o que aprendemos para construir ListaTarefas, uma lista de tarefas. Vamos combinar componentes e ver o que acontece quando mais complexidade é introduzida.
No capitulo anterior, construímos o nosso primeiro componente, neste capitulo iremos estender o que foi dito até agora, para que possamos construir a nossa TaskList, ou seja uma lista de Tasks. Vamos combinar componentes e ver o que irá acontecer quando é adicionada alguma complexidade.

## Lista de tarefas

Expand All @@ -16,11 +16,11 @@ Como os dados da `Task` podem ser enviados de forma assíncrona, **também** pre

![Tarefas vazias e carregando](/intro-to-storybook/tasklist-states-2.png)

## Prepare-se
## Preparação

Um componente composto não é muito diferente do que contém os componentes básicos. Crie um componente `TaskList` e um arquivo de história em conjunto: `components/TaskList.jsx` e `components/TaskList.stories.jsx`.

Comece com uma implementação aproximada da `TaskList`. Você precisará importar o componente `Task` anterior e passar os atributos e ações como entradas.
Comece com uma implementação aproximada da `TaskList`. Você precisará importar o componente `Task` anterior e passar os atributos e ações como `inputs`.

```jsx:title=components/TaskList.jsx
import { Task } from "./Task";
Expand Down Expand Up @@ -130,12 +130,13 @@ export const Empty = {
```

<div class="aside">
Os <a href="https://storybook.js.org/docs/react/writing-stories/decorators"><b>Decoradores</b></a> são uma maneira de fornecer wrappers arbitrários para as histórias. Neste caso, estamos usando um decorador para adicionar preenchimento ao redor da lista para facilitar a verificação visual. Eles também podem ser usados ​​para agrupar histórias em “provedores” – ou seja, componentes da biblioteca que definem o contexto do React.
Os <a href="https://storybook.js.org/docs/react/writing-stories/decorators"><b>Decoradores</b></a> permitem que você envolva histórias com funcionalidades adicionais. Neste caso, estamos a usar um decorador para adicionar preenchimento ao redor da lista para facilitar a verificação visual. Mas podem ser usados para envolver as histórias definidas em "providers", nomeadamente, bibliotecas ou componentes que usam o contexto React.
</div>


`TaskStory.args.task` fornece a forma de uma `Task` que criamos e exportamos do arquivo `Task.stories.js`. Da mesma forma, os `argTypes` que adicionamos para `onPinTask` e `onArchiveTask` dizem ao Storybook para fornecer ações (callbacks simulados) que o componente `TaskList` precisa.

Como adicionamos um novo arquivo Story, precisamos executar `yarn storybook-generate` novamente para gerar novamente o arquivo `storybook.require.js`.
Visto que adicionámos um novo arquivo de história, precisamos executar `yarn storybook-generate` novamente para gerar novamente o arquivo `storybook.require.js`.

Agora verifique o Storybook para as novas histórias da `TaskList`.

Expand Down
14 changes: 5 additions & 9 deletions content/intro-to-storybook/react-native/pt/conclusion.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,13 @@ Storybook é uma ferramenta poderosa para React Native, React, Vue, Angular, Sve

## Aprenda mais

Quer se aprofundar mais? Aqui estão recursos úteis.

- [**A documentação oficial do Storybook**](https://storybook.js.org/docs/react/get-started/introduction) contém documentação da API, links da comunidade e galeria de complementos.
Pretende saber mais? Aqui ficam alguns recursos que irão ajudar.

- [**Documentação Oficial Storybook**](https://storybook.js.org/docs/react/get-started/introduction) contém a documentação da API, links da comunidade e a galeria de complementos.
- [**React Native Storybook Github**](https://github.com/storybookjs/react-native) possui documentação e todo o código fonte do React Native Storybook e seus complementos.

- [**Visual Testing Handbook**](https://storybook.js.org/tutorials/visual-testing-handbook/) se aprofunda no uso do Storybook para componentes de teste visual. E-book gratuito de 31 páginas.

- [**Bate-papo do Storybook Discord**](https://discord.gg/UUt2PJb) coloca você em contato com a comunidade do Storybook. Obtenha e dê ajuda a outros usuários do Storybook.

- [**Blog Storybook**](https://storybook.js.org/blog/) apresenta os lançamentos e recursos mais recentes para agilizar seu fluxo de trabalho de desenvolvimento de UI.
- [**Visual Testing Handbook**](https://storybook.js.org/tutorials/visual-testing-handbook/) aprofunda o uso de Storybook para testes visuais. Livro eletrónico livre de 31 páginas.
- [**Discord do Storybook**](https://discord.gg/UUt2PJb) põe-te em contacto direto com a comunidade Storybook. Onde podes oferecer e receber ajuda de outros utilizadores do Storybook.
- [**Blog Storybook**](https://storybook.js.org/blog/) demonstra tanto as novidades acerca das versões mais recentes, como as últimas funcionalidades existentes, de forma a otimizar o teu fluxo de trabalho no desenvolvimento de interface de utilizador.

## Quem fez o tutorial de introdução ao Storybook?

Expand Down
2 changes: 1 addition & 1 deletion content/intro-to-storybook/react-native/pt/contribute.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: 'Contribuir'
description: 'Ajude a compartilhar o Storybook com o mundo'
---

Contribuições para os tutoriais do Storybook são bem-vindas! Se for algo pequeno, como gramática ou pontuação, abra uma solicitação pull. Se for uma mudança maior, adicione uma [issue](https://github.com/chromaui/learnstorybook.com/issues) para discussão.
Contribuições para os tutoriais do Storybook são bem-vindas! Se for algo pequeno, tal como falhas na pontuação ou erros gramaticais, criem um pull request. Se for uma alteração maior, [crie um issue](https://github.com/chromaui/learnstorybook.com/issues) para que seja possível a discussão.

Os tutoriais do Storybook foram criados e mantidos principalmente pela comunidade, por isso precisamos da ajuda de todos para mantê-lo atualizado e garantir que quaisquer arestas sejam eliminadas ao longo do tempo. Toda ajuda é apreciada!

Expand Down
11 changes: 5 additions & 6 deletions content/intro-to-storybook/react-native/pt/data.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,9 @@ tocTitle: 'Dados'
description: 'Aprenda como conectar dados ao seu componente de UI'
---

Até agora, criamos componentes sem estado isolados – ótimos para o Storybook, mas, em última análise, não são úteis até fornecermos a eles alguns dados em nosso aplicativo.

Este tutorial não tem foco nos detalhes da criação de um aplicativo, então não vamos nos aprofundar nesses detalhes aqui. Mas vamos dedicar um momento para examinar um padrão comum de possibilitar dados em componentes conectados.
Até agora foram criados componentes sem estado e isolados, o que é fantástico para Storybook, mas em última análise não são úteis até que for fornecido algum tipo de dados da aplicação

Este tutorial não foca particularmente na construção de uma aplicação, como tal não vamos aprofundar muito este aspeto. Mas será feito um aparte para olhar para um padrão comum para ligação de dados com componentes conectados.
## Componentes conectados

Atualmente o nosso componente `TaskList`, conforme escrito, é “apresentativo” no sentido de que não fala com nada externo à sua própria implementação. Precisamos conectá-lo a um provedor de dados para obter dados nele.
Expand Down Expand Up @@ -163,15 +162,15 @@ export const TaskList = () => {

```

Agora que temos alguns dados reais preenchendo nosso componente, obtidos na store Redux, poderíamos ter conectado nosso aplicativo `App.jsx` e renderizado o componente lá. Mas, por enquanto, vamos adiar isso e continuar nossa jornada orientada a componentes.
"Agora que temos dados reais,obtidos da store Redux, para visualizar no nosso componente, poderíamos tê-lo conectado ao arquivo `App.jsx`. Mas, por enquanto, vamos adiar e continuar nossa jornada orientada a componentes.

## Fornecendo contexto com decoradores

Nossas histórias do Storybook pararam de funcionar com essa mudança porque nossa `Tasklist` agora é um componente conectado, pois depende de uma store Redux para recuperar e atualizar nossas tarefas.
Com esta alteração as nossas histórias do Storybook pararam de funcionar, visto que a nossa `Tasklist` é um componente conectado, dependendo de uma store Redux para obter e atualizar o estado das tarefas.

<img src="/intro-to-storybook/react-native-broken-tasklist.png" alt="error screen" height="600">

Podemos usar várias abordagens para resolver esse problema. Ainda assim, como nosso aplicativo é bastante simples, podemos contar com um decorador, semelhante ao que fizemos no [capítulo anterior](/intro-to-storybook/react-native/en/composite-component), e fornecer uma store mocada – em nossas histórias do Storybook:
Poderíamos usar várias abordagens para resolver este problema. Mas, visto que a nossa aplicação é bastante simples, podemos usar um decorador, tal como fizemos no [capítulo anterior](/intro-to-storybook/react-native/en/composite-component), e fornecer uma store simulada – em nossas histórias do Storybook:

```js:title=src/components/TaskList.stories.jsx
import { TaskList } from "./TaskList";
Expand Down
15 changes: 7 additions & 8 deletions content/intro-to-storybook/react-native/pt/get-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,12 @@ O Storybook ajuda você a criar componentes de interface do usuário isolados da

Precisamos seguir alguns passos para começar. Neste tutorial, usaremos este [template](https://github.com/chromaui/intro-storybook-react-native-template) onde já configuramos um aplicativo React Native usando o [Expo](https://expo.io/tools) e adicionamos o [Storybook](https://storybook.js.org/) ao projeto.

Antes de começarmos, há algumas coisas que precisamos considerar:

- Para ajudá-lo ao longo do tutorial, você precisará de um telefone ou simulador já configurado para permitir a execução do aplicativo. Para obter mais informações, consulte a documentação da Expo sobre execução em [rodando no IOS](https://docs.expo.dev/workflow/ios-simulator/) e [Android](https://docs.expo.dev/workflow/android-studio-emulator/).
Antes de prosseguir-mos, alguns tópicos importantes que temos que ter em mente:
- Para ajudá-lo ao longo do tutorial, você precisará de um telefone ou simulador previamente configurado para permitir a execução do aplicativo. Para obter mais informações, consulte a documentação da Expo sobre execução em [rodando no IOS](https://docs.expo.dev/workflow/ios-simulator/) e [Android](https://docs.expo.dev/workflow/android-studio-emulator/).
- Este tutorial será focado em IOS/Android. O React Native pode ter como alvo outras plataformas que este tutorial não cobrirá.
- Você também precisará do [nodejs](https://nodejs.org/en/download/) configurado em sua máquina.
- Você precisará do [nodejs](https://nodejs.org/en/download/) configurado no seu ambiente de desenvolvimento.

Primeiro baixe o template que criamos para este tutorial.
Comece por fazer o download do template que criámos para este tutorial:

```shell
npx degit chromaui/intro-storybook-react-native-template#main taskbox
Expand Down Expand Up @@ -51,7 +50,7 @@ yarn storybook:android
```

<div class="aside">
💡 Ao longo deste tutorial, o Yarn será usado. Se você está seguindo este tutorial, mas não o configurou, você pode facilmente trocar os comandos para corresponder ao gerenciador de pacotes de sua escolha (por exemplo, npm, pnpm) (adicione links para ambos os gerenciadores de pacotes)
💡 Ao longo desta versão do tutorial, vai ser usado o Yarn para executar a maioria dos comandos. Se estiveres a seguir este tutorial e não tiveres o Yarn configurado, podes substituir os comandos para o teu gestor de pacotes preferido (por exemplo, [npm](https://www.npmjs.com/), [pnpm](https://pnpm.io/)).
</div>

Ao executar o aplicativo com `yarn ios`, você deve ver isso renderizado no dispositivo:
Expand All @@ -64,9 +63,9 @@ Ao executar o Storybook com `yarn storybook:ios`, você deve ver isto:

## Como funciona

Quando inicializado, o modelo já fornece a configuração necessária para nos ajudar a começar a desenvolver nosso aplicativo com o React Native. Antes de começarmos a construir nossa IU do zero, vamos dar uma olhada e ver como o Storybook funciona dentro de um aplicativo React Native e o que há de diferente.
Á partida, quando inicializado, o template fornece toda a configuração necessária para que possamos começar a desenvolver a nossa aplicação com React Native. No entanto, antes de começarmos a desenvolver o nosso IU do zero, vamos ver como funciona o Storybook dentro de um aplicativo React Native e o que há de diferente.

O Storybook no React Native é um componente que você pode renderizar em seu aplicativo, ao contrário de outras versões de estrutura em que o Storybook é executado por conta própria.
Com o React Native, o Storybook é um componente que você pode renderizar no seu aplicativo, ao contrário de outras versoões do Storybook, onde você pode executar o Storybook como um aplicativo separado de forma independente.

Por causa dessa distinção, precisamos de uma maneira de alternar entre o aplicativo e o Storybook. Para fazer isso, usamos variáveis ​​de ambiente e veremos isso rapidamente agora.

Expand Down
Loading

0 comments on commit 4578637

Please sign in to comment.