8 pontos por guseod24 2025-03-12 | 1 comentários | Compartilhar no WhatsApp

Contexto

Nossa equipe estava enfrentando problemas de velocidade ao executar o Storybook.
Conforme o projeto crescia, o tempo de build completo do Storybook foi ficando cada vez maior,
e havia o incômodo de, sempre que quiséssemos abrir apenas algumas histórias para testar, precisar executar o Storybook inteiro ou editar os caminhos em .storybook/main.ts.

Para resolver isso, criamos a extensão de VSCode "Open Storybook".
Assim como o Jest Runner, ela permite que o Storybook também seja executado "selecionando apenas uma pasta específica no explorador de arquivos" ou "selecionando o arquivo de Storybook desejado para executar".

Funcionalidades

  • Pasta - clique com o botão direito - comando Open Stories: é possível abrir adicionalmente todos os Storybooks dentro da pasta correspondente.
  • Paleta de comandos: comando Open Storybook: se já houver Storybooks abertos pelo comando, você pode visualizá-los combinando os existentes com os novos. (O mesmo vale ao abrir com Open Stories.)
  • Gerenciamento de monorepo: os terminais de Storybook são gerenciados separadamente por pacote.
  • Procura e executa o comando storybook nos scripts; se não houver, executa com npx storybook.

Instalação

  • Na área de extensões, pesquise por roseline-song.open-storybook ou open storybook
  • No Cursor: se ocorrer um erro de compatibilidade de versão do vscode, clique no botão de engrenagem ao lado de install - install specific version - instale a versão mais recente

1 comentários

 
guseod24 2025-03-13

Versão 0.0.5

Exibe um toast de erro ao tentar abrir com o Open Storybook um arquivo que não é do Storybook
Corrige o problema em que o caminho do Storybook de cada package continuava se acumulando
Restaura o main.ts ao encerrar o terminal do Storybook