Back to Intro to Storybook

Tutorial do Storybook para o React

Configuração do React Storybook no ambiente de desenvolvimento React
Esta tradução feita pela comunidade ainda não foi atualizada para a versão mais recente do Storybook. Ajude-nos a atualizá-la aplicando as alterações no guia em português para esta tradução. Pull requests são bem-vindos.

O Storybook executa paralelamente à aplicação em desenvolvimento. Ajuda-o a construir componentes de interface de utilizador (UI na forma original) isolados da lógica de negócio e contexto da aplicação. Esta edição de Aprendizagem de Storybook é destinada para React. Encontram-se disponíveis outras edições quer para Vue, quer para Angular.

Storybook e a aplicação

Configurar o Storybook com React

Precisamos de alguns passos extra para configurar o processo de compilação no nosso ambiente de desenvolvimento. Para começar queremos usar o pacote Create React App ou como é vulgarmente conhecido (CRA), para compilação e permitir ao Storybook e Jest fazerem testes na nossa aplicação. Vamos executar os seguintes comandos:

# Create our application:
npx create-react-app taskbox

cd taskbox

# Add Storybook:
npx storybook init
Ao longo desta versão do tutorial, vai ser usado o yarn para executar a maioria dos comandos. Se tiver o Yarn instalado, mas preferir usar npm, não há qualquer problema, pode continuar a seguir o tutorial sem problemas. Somente terá que adicionar a seguinte opção: --use-npm ao primeiro comando mencionado acima e tanto o CRA como o Storybook irão inicializar com base nesta opção. À medida que progride no tutorial, não esqueça de ajustar os comandos mencionados para os equivalentes npm.

Podemos rapidamente verificar que os vários ecossistemas da nossa aplicação estão a funcionar corretamente:

# Run the test runner (Jest) in a terminal:
yarn test

# Start the component explorer on port 6006:
yarn run storybook

# Run the frontend app proper on port 3000:
yarn start
Pode ter reparado que foi adicionada a opção --watchAll no comando de testes, não se preocupe, é intencional. Esta pequena alteração irá garantir que todos os testes sejam executados e que a nossa aplicação está a funcionar corretamente. À medida que progride no tutorial, irão ser apresentados diversos cenários de testes, talvez queira considerar e adicionar esta opção ao script de testes no ficheiro (ou arquivo) package.json para garantir que todos os testes sejam executados.

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

3 modalidades

Dependendo de qual parte da aplicação em que está a trabalhar, pode querer executar uma ou mais simultaneamente. Mas, visto que o nosso foco é a criação de um único componente de interface de utilizador (UI na forma original), vamos ficar somente pela execução do Storybook.

Reutilizar CSS

A Taskbox reutiliza elementos de design deste tutorial React e GraphQL, logo não precisamos escrever CSS neste tutorial. Copie e cole o CSS compilado no ficheiro (ou arquivo) src/index.css.

Interface Utilizador Taskbox

Se for necessária alguma alteração aos elementos de estilo, os ficheiros LESS originais encontram-se disponíveis no repositório Github.

Adicionar recursos

De forma a igualar o design pretendido do tutorial, terá que transferir as pastas (ou diretórios) dos ícones e fontes para dentro da pasta src/assets.

Copy
npx degit chromaui/learnstorybook-code/src/assets/font src/assets/font
npx degit chromaui/learnstorybook-code/src/assets/icon src/assets/icon
Foi usado o degit para transferir pastas do GitHub. Se quiser transferir manualmente, pode obtê las aqui.

Após adicionar os estilos e assets, a aplicação irá renderizar de forma estranha. Tudo bem. Não vamos trabalhar nela agora. Vamos antes começar por construir o nosso primeiro componente.

Next Chapter
Componente simples
Construção de um componente simples isolado