Introdução

Storybook funciona em paralelo á aplicação em modo de desenvolvimento. Ajuda na construção de componentes de interface de utilizador isolados de qualquer lógica 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

Configuração de Storybook com React

Irão ser necessárias algumas etapas adicionais de forma a ser possível 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 configurar o nosso ambiente local e ativar o modo de testes com Storybook e Jest na nossa aplicação.

Para tal vamos executar os seguintes comandos:

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

# Add Storybook:
npx -p @storybook/cli sb init

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

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

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

# Run the frontend app proper on port 3000:
yarn start
Nota: Se yarn test emitir um erro, será necessário instalar o pacote watchman, tal como recomendado neste problema

Sendo estes os seguintes: testes automáticos (Jest), desenvolvimento de componentes (Storybook) e a aplicação em si.

3 modalidades

Dependendo de qual parte da aplicação que estamos a trabalhar, podemos querer executar um ou mais simultâneamente. Visto que neste caso, o foco é a criação de um componente de interface de utilizador simples, iremos cingir-nos somente á execução de Storybook.

Reutilização CSS

A Taskbox reutiliza elementos de design do tutorial de React e GraphQL Tutorial React e GraphQL, como tal não será necessária a criação de CSS neste tutorial.

Com isto o conteúdo do ficheiro LESS será compilado num único ficheiro CSS e incluido na aplicação.

O CSS compilado encontra-se disponível aqui e pela convenção CRA(Create React App) será necessário copiar seu conteúdo para o seguinte ficheiro 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

Irá ser necessário adicionar também as pastas com o tipo de letra e ícones que se encontram disponíveis aqui á pasta public. Ao adicionar estes elementos, a aplicação irá renderizar de forma algo estranha. Mas isto é de esperar, visto que não iremos trabalhar na aplicação agora. Iremos então iniciar o desenvolvimento do nosso primeiro componente!

Keep your code in sync with this chapter. View ebe2ae2 on GitHub.
Tweet "I’m learning Storybook! It’s a great dev tool for UI components."
Componente simples
Construção de um componente simples isolado