Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translating storybook svelte to portuguese #728

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
76 changes: 76 additions & 0 deletions content/intro-to-storybook/svelte/pt/get-started.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
---
title: 'Tutorial Storybook para o Svelte'
tocTitle: 'Get started'
yamgomes marked this conversation as resolved.
Show resolved Hide resolved
description: 'Configure o Storybook em seu ambiente de desenvolvimento'
---

Storybook executa paralelamente à aplicação em modo de desenvolvimento. Ajuda a construir componentes de interface de usuário (UI) isolados à lógica de negócio e contexto da aplicação. Esta edição do tutorial Introdução ao Storybook é para Svelte; outras edições existem para [Vue](/intro-to-storybook/vue/pt/get-started), [Angular](/intro-to-storybook/angular/pt/get-started), [React](/intro-to-storybook/react/pt/get-started), [React Native](/intro-to-storybook/react-native/pt/get-started) e [Ember](/intro-to-storybook/ember/pt/get-started).

![Storybook e sua aplicação](/intro-to-storybook/storybook-relationship.jpg)

## Set up Svelte Storybook

Precisaremos seguir alguns passos para configurar o processo de compilação em nosso ambiente de desenvolvimento. Para começar, queremos utilizar [degit](https://github.com/Rich-Harris/degit) para configurar nosso sistema de compilação. Utilizando este pacote, é possível obter "modelos" (aplicações parcialmente construídas com configurações padrão) para ajudar a acelerar o fluxo de desenvolvimento da aplicação.

Execute os seguintes comandos:

```shell:clipboard=false
# Criar nossa aplicação:
npx degit chromaui/intro-storybook-svelte-template taskbox

cd taskbox

# Instalar dependências
yarn
```

<div class="aside">
💡 Este modelo contém estilos, recursos e configurações essenciais, todos necessários para esta versão do tutorial.
</div>

Agora é possível verificar que os diversos ambientes de nossa aplicação estão funcionando corretamente:

```shell:clipboard=false
# Executar o testador (Jest) em linha de comando:
yamgomes marked this conversation as resolved.
Show resolved Hide resolved
yarn test

# Iniciar o explorador de componentes na porta 6006:
yarn storybook

# Executar a aplicação frontend em si na porta 5000:
yarn dev
```

As três modalidades de aplicação frontend: testes automatizados (Jest), desenvolvimento de componentes (Storybook), e a aplicação em si.

![3 modalidades](/intro-to-storybook/app-three-modalities-svelte.png)

Dependendo de qual parte da aplicação está sendo modificada, pode ser desejável executar um ou mais destes simultaneamente. Como o foco atual é criar um único componente de interface de usuário, será executado apenas Storybook

## Submeter suas mudanças

Nesse estágio já é seguro adicionar os arquivos a um repositório local. Execute os seguintes comandos para inicializar um repositório local, adicione e submeta (commit) as mudanças feitas até o momento.

```shell
git init
```

Seguido por:

```shell
git add .
```

Então:

```shell
git commit -m "first commit"
```

Finalmente:

```shell
git branch -M main
```

Vamos começar a construção de nosso primeiro componente!