{"id":37145,"date":"2021-03-26T14:02:00","date_gmt":"2021-03-26T14:02:00","guid":{"rendered":"https:\/\/sinchcomdev.local\/blog\/calando-a-entrega-de-ui-com-o-storybook\/"},"modified":"2025-12-18T16:13:26","modified_gmt":"2025-12-18T16:13:26","slug":"escalando-a-entrega-de-ui-com-o-storybook","status":"publish","type":"blog","link":"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/","title":{"rendered":"Escalando A Entrega De Ui Com O Storybook"},"content":{"rendered":"\n<p>Felipe Norato, Desenvolvedor na Sinch, dividiu conosco nesse texto um pouco mais sobre a sua experi\u00eancia com o storybook. Confira! Cada vez mais temos aplica\u00e7\u00f5es web mais complexas com v\u00e1rios fluxos e com o layout mais apurado. As telas v\u00eam sendo projetadas para servir ao usu\u00e1rio uma explos\u00e3o de cores, intera\u00e7\u00f5es, anima\u00e7\u00f5es, texturas, sensa\u00e7\u00f5es, ufa! Voc\u00eas devem imaginar o trabalho que d\u00e1 para fazer e dar manuten\u00e7\u00e3o isso tudo, ainda mais com equipes que est\u00e3o crescendo e ficando multiespecializada, possuindo v\u00e1rias roles como Frontend, Backend, Devops, Designers, entre outras roles. Uma coisa \u00e9 fato, manter todo esse c\u00f3digo \u00e9 complicado, mesmo quando temos testes unit\u00e1rios, mas, e o visual? Como fazemos o desenvolvimento da parte visual da aplica\u00e7\u00e3o escalar? N\u00e3o importa a arquitetura usada, temos que criar um Hall de Componentes Gen\u00e9ricos! Estes dar\u00e3o a cara da aplica\u00e7\u00e3o servindo de pe\u00e7as de Lego para construir cada tela e nos far\u00e1 economizar de forma exponencial o tempo de desenvolvimento, e, assim reduzindo o tempo de entrega. Defini\u00e7\u00e3o de felicidade!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>O processo de Desenvolvimento<\/strong><\/h2>\n\n\n\n<p>Se imagine um lugar onde nada existe, somente uma tela em branco e voc\u00ea tem que come\u00e7ar a desenvolver sua aplica\u00e7\u00e3o. Voc\u00ea, sabiamente, j\u00e1 verificou o layout das telas que tem que desenvolver e mapeou os componentes que ir\u00e1 precisar para criar sua primeira tela. Todo animado, criou os componente, colocou na linda telinha, est\u00e1 tranquilo, est\u00e1 tudo ali. Agora, feche os olhos e se imagine no caos! Cheio de fluxos e condi\u00e7\u00f5es para voc\u00ea visualizar aquele bendito componente que tem que atualizar o layout. Ent\u00e3o, dolorosamente, voc\u00ea vai fazer todo esse fluxo para ver aquela mudan\u00e7a necess\u00e1ria, ou, ir\u00e1 fazer algumas gambiarras para poder visualizar mais f\u00e1cil. Gambiarras como comentar todo o c\u00f3digo de uma p\u00e1gina e colocar somente o componente, tirar uma valida\u00e7\u00e3o para chegar no componente, criar uma pagina nova s\u00f3 para ter acesso ao componente\u2026 J\u00e1 vi muitas dessas gambiarras por ai, e eu mesmo j\u00e1 fiz. Concordamos que seria bem mais f\u00e1cil, menos doloroso e mais produtivo se n\u00e3o precis\u00e1ssemos correr toda essa maratona. O ideal \u00e9 que haver uma forma direta de acessar esse componente, e melhor, isolado da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>O Storybook pode nos ajudar<\/strong><\/h2>\n\n\n\n<p>Em poucas palavras, o Storybook \u00e9 uma biblioteca de visualiza\u00e7\u00e3o templates. Nela voc\u00ea pode plugar qualquer projeto de Frontend usando qualquer framework e visualizar os componentes e tudo que tem nele. Assim voc\u00ea pode montar o que quiser, por\u00e9m, sem<\/p>\n\n\n\r\n\t                    <div class=\"iframe-responsive-container lazy-video rounded-lg overflow-hidden  \">\r\n                <a href=\"https:\/\/www.youtube.com\/watch?v=p-LFh5Y89eM\" class=\"lazy-video-link\" data-lazy-video=\"p-LFh5Y89eM\" target=\"_blank\" rel=\"nofollow\" role=\"button\" data-source=\"youtube\" data-language=\"pt\" data-thumb=\"https:\/\/img.youtube.com\/vi\/p-LFh5Y89eM\/maxresdefault.jpg\" title=\"Sinch Video\">\r\n                    <div class=\"btn btn-light btn-light-social btn-play btn-play-circle\">\r\n                                                    <svg aria-hidden=\"true\" data-url=\"https:\/\/sinch.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/play.svg\"><\/svg>\r\n                                            <\/div>\r\n                    <img decoding=\"async\"  src=\"https:\/\/img.youtube.com\/vi\/p-LFh5Y89eM\/maxresdefault.jpg\" alt=\"What&#039;s Storybook?\">\r\n                <\/a>\r\n            <\/div>\r\n\r\n            \r\n                        <script type=\"application\/ld+json\">\r\n            {\n    \"@context\": \"http:\/\/schema.org\",\n    \"@type\": \"VideoObject\",\n    \"@id\": \"https:\/\/www.youtube.com\/watch?v=p-LFh5Y89eM#VideoObject\",\n    \"thumbnailUrl\": \"https:\/\/img.youtube.com\/vi\/p-LFh5Y89eM\/maxresdefault.jpg\",\n    \"embedUrl\": \"https:\/\/www.youtube.com\/embed\/p-LFh5Y89eM\",\n    \"contentUrl\": \"https:\/\/www.youtube.com\/watch?v=p-LFh5Y89eM\",\n    \"name\": \"What's Storybook?\",\n    \"description\": \"Storybook is the most popular UI component explorer for React, Vue, and Angular. Learn why thousands of teams use Storybook to build durable user interfaces faster. http:\/\/storybook.js.org\\n\\nDirected by: Dominic Nguyen https:\/\/twitter.com\/domyen\\nAnimation: Daniel Egerev https:\/\/twitter.com\/idanb0\\nMusic: Stupead - Alright https:\/\/youtu.be\/ve56hK35d3E\",\n    \"uploadDate\": \"2019-03-08T19:21:44+00:00\",\n    \"duration\": \"PT1M51S\"\n}        <\/script>\r\n        \r\n\t\r\n\n\n\n<p> a necessidade de inicializar a aplica\u00e7\u00e3o. Sua UI lembra muito aquelas p\u00e1ginas de demonstra\u00e7\u00e3o dos Frameworks de CSS, com um menu lateral contendo as features e um container com a demonstra\u00e7\u00e3o dessas features. E \u00e9 exatamente para isso que ele serve, para demonstrar os componentes da aplica\u00e7\u00e3o servindo de <strong>documenta\u00e7\u00e3o visual <\/strong>dos componentes, e, por que n\u00e3o, de outras coisas (fica da criatividade da equipe).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Plugando o Storybook<\/strong><\/h2>\n\n\n\n<p>O Storybook possui um vasto suporte para os mais conhecidos Frameworks de Frontend, conforme tabela abaixo:<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/storybookjs\/storybook#projects\">https:\/\/github.com\/storybookjs\/storybook#projects<\/a><\/p>\n\n\n\n<p>O processo instala\u00e7\u00e3o do storybook \u00e9 bem simples, irei demonstrar com Angular, porque \u00e9 o que eu mais uso. O primeiro passo \u00e9 instalar o storybook e informar o type de aplica\u00e7\u00e3o voc\u00ea est\u00e1 usando, qual framework. <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>\n<p>1<\/p>\n<\/td><td>\n<p><code>npx -p @storybook\/cli sb init --type angular<\/code><\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p> O Storybook\/cli vai fazer toda a configura\u00e7\u00e3o para voc\u00ea come\u00e7ar a usar com tranquilidade. No final das contas o que ele faz?<\/p>\n\n\n\n<p>Instala\u00e7\u00e3o do Storybook para Angular<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Instala as <strong>depend\u00eancias<\/strong> do Storybook;<\/li>\n\n\n\n<li>Cria os arquivos de configura\u00e7\u00e3o de <strong>inicializa\u00e7\u00e3o<\/strong>, do registro dos <strong>addons<\/strong> e a configura\u00e7\u00e3o do typescript(<strong>tsconfig<\/strong>) e os <strong>typings<\/strong><\/li>\n\n\n\n<li><strong>Cria umas <strong>stories<\/strong> de demonstra\u00e7\u00e3o na pasta <strong>src\/stories<\/strong><\/strong><\/li>\n\n\n\n<li><strong><strong>Adiciona os scripts de iniciar o <strong>server<\/strong> e <strong>build<\/strong> o storybook no package.json;<\/strong><\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong><strong>Arquivos modificados com a instala\u00e7\u00e3o do Storybook<\/strong><\/strong><\/p>\n\n\n\n<p><strong><strong>Ent\u00e3o para rodar esse camarada \u00e9 s\u00f3 utilizar script que o cli adicionou no package.json; 1 <code>yarn storybook<\/code> O server ser\u00e1 iniciado e pronto para ser acessado no endere\u00e7o 1 <code>localhost:<\/code><code>6006<\/code> e voc\u00ea poder\u00e1 ver as stories de demonstra\u00e7\u00e3o do storybook. Por default o storybook ir\u00e1 ler todos os arquivos terminados com *.stories.ts, mas pode ser configurado, pelo arquivo<em> .storybook\/config.js.<\/em> Stories de demonstra\u00e7\u00e3o Criando nossas pr\u00f3prias stories Supondo que vamos, por exemplo, definir nossa tipografia, ent\u00e3o, podemos criar nossa primeira story. Como se trata do Design System vamos criar o arquivo na pasta src\/stories\/design-system. 1 2 <code>mkdir<\/code><code>.<\/code><code>\/src\/stories\/design-system<\/code> <code>touch<\/code><code>.<\/code><code>\/src\/stories\/design-system\/typograpy<\/code><code>.stories.ts<\/code><\/strong><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-14427\" width=\"300\" height=\"209\" src=\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/Imagem-1-Norato-300x209-1.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>E vamos adicionar o estilo mais simples poss\u00edvel aqui para nossa tipografia. Editando o <em>src\/assets\/syles.scss<\/em> da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-14428\" width=\"300\" height=\"134\" src=\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/Imagem2-Norato-2-300x134-1.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Vamos destrinchar essa story. O m\u00e9todo <strong><em>storiesOf<\/em><\/strong> vai receber o <em>nome da feature<\/em> que iremos demonstrar e para cada demonstra\u00e7\u00e3o precisamos definir uma story com o m\u00e9todo <strong><em>add<\/em><\/strong>, que tamb\u00e9m recebe um <em>nome<\/em> para essa story. Al\u00e9m do <em>nome,<\/em> o m\u00e9todo <strong>add<\/strong> recebe uma <strong>fun\u00e7\u00e3o<\/strong> que ir\u00e1 retornar nossa story. Esta story \u00e9 um objeto que possui as propriedades template e styles. O <strong>template<\/strong> que cont\u00e9m o html que ser\u00e1 renderizado no pelo server do Storybook. Nele, voc\u00ea pode escrever estuturas para demonstrar os componentes ou mesmo as classes de css do Design System da aplica\u00e7\u00e3o, neste caso est\u00e1 usando as classes <em>h1, h2 e h3 <\/em>vindas do <em>styles.scss<\/em> da aplica\u00e7\u00e3o. Voc\u00ea pode tamb\u00e9m usar as classes de css definidas na propriedade <strong>styles<\/strong>,se for necess\u00e1rio criar alguma. <em>Habemus, primeira story<\/em> Resumindo, definimos um <strong>template<\/strong><strong>html<\/strong> que est\u00e1 usando o <strong>css da aplica\u00e7\u00e3o<\/strong> e o da <strong>story<\/strong>. Para usar os componentes da aplica\u00e7\u00e3o \u00e9 o mesmo princ\u00edpio, por\u00e9m temos duas maneiras de criar stories para os componentes: via declara\u00e7\u00e3o de <strong>template<\/strong> ou declara\u00e7\u00e3o de <strong><em>componente<\/em><\/strong>. A declara\u00e7\u00e3o de template n\u00f3s j\u00e1 vimos faz, para componentes \u00e9 um pouco diferente, mas nada complicado. Basta importar o component e declarar na propriedade <em>component<\/em>. Como sempre, temos que passar algum <strong>Input<\/strong> para o component, por isso j\u00e1 estou incluindo inputs para essa story. A story possui uma propriedade <strong><em>props<\/em><\/strong> que ela far\u00e1 a comunica\u00e7\u00e3o da story com o component, passando todas as propriedades necess\u00e1rias para o funcionamento do componente.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-14429\" width=\"300\" height=\"105\" src=\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/Imagem-3-Norato-1-300x105-1.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Nosso componente \u00e9 bem simples, ele recebe dois Inputs e faz o bind no template.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-14430\" width=\"300\" height=\"191\" src=\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/Imagem-4-Norato-1-300x191-1.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Agora se for necess\u00e1rio usar o template para demonstrar um componente, ao inv\u00e9z de utilizar a propriedade <em>component,<\/em> a coisa fica um pouco diferente. \u00c9 necess\u00e1rio definir m\u00f3dulo e injetar no story, isso por que o Storybook cria um m\u00f3dulo din\u00e2mico por contexto de stories. Ent\u00e3o para utilizar um componente em um m\u00f3dulo \u00e9 necess\u00e1rio declar\u00e1-lo. Quem \u00e9 respons\u00e1vel por criar este m\u00f3dulo \u00e9 o <strong><em>moduleMetadata <\/em><\/strong>que herda, n\u00e3o diretamente, da interface <em>NgModule<\/em> do Angular. Depois de criado basta injetar na story pelo m\u00e9todo <strong><em>addDecorator<\/em><\/strong><em>. <\/em>Esta inje\u00e7\u00e3o de depend\u00eancia ser\u00e1 usada em todas as stories deste contexto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-14431\" width=\"300\" height=\"173\" src=\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/Imagem-5-Norato-1-300x173-1.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Inje\u00e7\u00f5es de depend\u00eancias<\/strong><\/h2>\n\n\n\n<p>O <strong><em>moduleMetadata<\/em><\/strong> \u00e9 uma grande sacada do Storybook, que nele podemos fazer nossas inje\u00e7\u00f5es de depend\u00eancias de componentes, servi\u00e7os e m\u00f3dulos auxiliares. Lembrando que a inten\u00e7\u00e3o \u00e9 fazer nossas pe\u00e7as de Lego o mais independente poss\u00edvel da aplica\u00e7\u00e3o, n\u00e3o conseguimos fugir de termos servi\u00e7os e outros componentes utilizados no componente demonstrado, para montar <em>pe\u00e7as<\/em> maiores e mais reutiliz\u00e1veis. Da mesma maneira que fazemos as inje\u00e7\u00f5es de depend\u00eancias no TestBed quando vamos testar o componente podemos fazer praticamente a mesma coisa. \u00c9 poss\u00edvel injetar os servi\u00e7os reais ou fake, somente para n\u00e3o termos problemas de excu\u00e7\u00e3o ou para n\u00e3o precisarmos passar por alguma integra\u00e7\u00e3o da aplica\u00e7\u00e3o (isso \u00e9 muito util!).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-14432\" width=\"300\" height=\"256\" src=\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/Imagem-6-Norato-1-300x256-1.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Aqui temos bastante coisa interessante:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>O componente <em>app-foobar, <\/em>que \u00e9 da aplica\u00e7\u00e3o;<\/li>\n\n\n\n<li>O componente <em>mat-icon,<\/em> do material;<\/li>\n\n\n\n<li>Injetamos o servi\u00e7o <em>FoobarService,<\/em> que \u00e9 bem simples;<\/li>\n\n\n\n<li>Injetamos o servi\u00e7o ComplexService, que o nome ja diz, \u00e9 complexo e vamos <em>mockar<\/em> esse cara;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-14433\" width=\"267\" height=\"300\" src=\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/Imagem-7-Norato-1-267x300-1.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Temos aqui as inje\u00e7\u00f5es de depend\u00eancias necess\u00e1rias para que nosso componente possa ser apresentado. Como comentei anteriormente \u00e9 bem parecido com o que fazemos para testar um componente. Por ordem atribui\u00e7\u00f5es:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Imports -&gt; do m\u00f3dulo do MatIconModule para satisfazer a depend\u00eancia do mat-icon;<\/li>\n\n\n\n<li>Declarations -&gt; do componente a ser demonstrado, SomeComponent, e o componente FoobarComponent reusado no template do app-some;<\/li>\n\n\n\n<li>Provides -&gt; do FoobarService e o mock do ComplexService;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Capturando os eventos de Output do Componente<\/strong><\/h2>\n\n\n\n<p>Agora a \u00fanica coisa que falta para terminarmos de fazer uma story de um componente real \u00e9 conseguir capturar os eventos emitidos pelos componentes. Sim, temos como fazer isso. Da mesma maneira que enviamos os propriedades de Input para o componente, conseguimos capturar os eventos de Output deles. Isso \u00e9 mais uma sacada sensacional do Storybook. Quando se pensa em desenvolver um componente temos que validar o comportamento do mesmo. Fazemos isso com teste \u2014 nem todos fazem \u2014 mas \u00e9 possivel ter essa verifica\u00e7\u00e3o no Storybook. Por default temos instalados alguns <em>addons<\/em>, como \u00e9 poss\u00edvel ver nas stories iniciais. L\u00e1 temos demostra\u00e7\u00e3o de <em>Notes, Links, <\/em>e a super \u00fatil <strong><em>Action!<\/em><\/strong> O Addon <strong>Action<\/strong> nos permite, justamente, fazer a captura de eventos de um espec\u00edfico Output do componente e printar o resultado na tab <em>Action Logger<\/em>do Storybook. Voltando \u00e0 stories default que ganhamos ao instalar o Storybook. L\u00e1 temos uma story demonstrando o uso da action, e do Notes tamb\u00e9m.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-14434\" width=\"300\" height=\"106\" src=\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/Imagem-8-Norato-1-300x106-1.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>O componente Button possui um Output <em>onClick, <\/em>que emite um evento, ao clicar. Esse evento ser\u00e1 capturado e o valor emitido ser\u00e1 logado na tab<em>Action Logger<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-14435\" width=\"300\" height=\"287\" src=\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/1_p2ITTTKI__-2QZj4_4qFQQ-300x287-1.gif\" alt=\"\"\/><\/figure>\n\n\n<p>Voc\u00ea pode ter achado estranho essa tela do Storybook. \u00c9 que ela j\u00e1 est\u00e1 turbinada com v\u00e1rios Addons que nos ajudam na produtividade e organiza\u00e7\u00e3o do nosso show room de componentes. O gif da demonsta\u00e7\u00e3o do action \u00e9 de um projeto que eu fiz para demonstrar algumas features do Storybook. L\u00e1 voc\u00ea poder\u00e1 consultar a forma de configura\u00e7\u00e3o deles al\u00e9m da demonstra\u00e7\u00e3o do funcionamento. Voc\u00ea pode ver no meu <a href=\"https:\/\/github.com\/norato\/angular-storybok-example\">Github<\/a>!<\/p>\n<h2><strong>Addons \u2014 Turbinando suas Stories<\/strong><\/h2>\n<p>O Storybook possue v\u00e1rios addons para salvar nossa pele na hora de demonstrar nossos componentes. Uns s\u00e3o para organiza\u00e7\u00e3o de demonstra\u00e7\u00e3o de c\u00f3digo, mas eles podem realmente salvar o dia. Voc\u00ea pode conferir no reposit\u00f3rio do Storybook mais detalhadamente. Vou destacar alguns que uso muito e outros que eu sempre configuro em qualquer projeto e voc\u00ea pode ver o funcionamento deles no <a href=\"https:\/\/github.com\/norato\/angular-storybok-example\">meu projeto<\/a>:<\/p>\n<ul>\n<li><a href=\"https:\/\/norato.github.io\/angular-storybok-example\/?selectedKind=Addons%20%7C%20Backgrounds&amp;selectedStory=default&amp;full=0&amp;addons=1&amp;stories=1&amp;panelRight=0&amp;addonPanel=storybook%2Factions%2Factions-panel&amp;background=%2300aced\">Backgrounds<\/a> -&gt; Troca a cor do background da story, \u00e9 excelente para aquele componente que fica num background zebrado;<\/li>\n<li><a href=\"https:\/\/norato.github.io\/angular-storybok-example\/?selectedKind=Addons%20%7C%20Console&amp;selectedStory=story%20name&amp;full=0&amp;addons=1&amp;stories=1&amp;panelRight=0&amp;addonPanel=storybook%2Factions%2Factions-panel&amp;background=%2300aced\">Console<\/a> -&gt; Redireciona todo console.log para a story;<\/li>\n<li><a href=\"https:\/\/norato.github.io\/angular-storybok-example\/?selectedKind=Addons%20%7C%20Knobs&amp;selectedStory=story%20name&amp;full=0&amp;addons=1&amp;stories=1&amp;panelRight=0&amp;addonPanel=storybooks%2Fstorybook-addon-knobs&amp;background=%2300aced\">Knob<\/a> -&gt; Habilita a modifica\u00e7\u00e3o das props da story em tempo real;<\/li>\n<li><a href=\"https:\/\/norato.github.io\/angular-storybok-example\/?selectedKind=Addons%20%7C%20ViewPort&amp;selectedStory=default&amp;full=0&amp;addons=1&amp;stories=1&amp;panelRight=0&amp;addonPanel=storybooks%2Fstorybook-addon-knobs&amp;background=%2300aced\">ViewPort<\/a> -&gt; Possibilita trocar o viewport da story, assim checamos a responsividade do componente;<\/li>\n<li>StorySource -&gt; Adiciona a tab <em>Story<\/em> para mostrar o source code da story;<\/li>\n<\/ul>\n<h2><strong>Instalando um Addon<\/strong><\/h2>\n<p>A instala\u00e7\u00e3o do addon \u00e9 bem simples e em 2 a 3 etapas, em cada add-existe as instru\u00e7\u00f5es, mas resumindo s\u00e3o: A primeira etapa \u00e9 a instala\u00e7\u00e3o do pacote: <\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p>1<\/p>\n<\/td>\n<td>\n<p><code>yarn add -D <\/code><code>@storybook<\/code><code>\/addon-nome-<\/code><code>do<\/code><code>-pacote<\/code><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p> O registro do addon no arquivo<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p>1<\/p>\n<\/td>\n<td>\n<p><code>.storybook\/addons.js<\/code><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<pre><\/pre>\n<table>\n<tbody>\n<tr>\n<td>\n<p>1<\/p>\n<p>2<\/p>\n<\/td>\n<td>\n<p><code>import<\/code><code>'@storybook\/addon-nome-do-pacore\/register'<\/code><code&gt;;<\/code><\/p>\n<p><code>\/\/E se necess\u00e1rio a configura\u00e7\u00e3o no arquivo .storybook\/config.js <\/code><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<pre><\/pre>\n<h2><strong>Como eu posso te ajudar<\/strong><\/h2>\n<p>Eu desenvolvi um extens\u00e3o para o <a href=\"https:\/\/github.com\/norato\/storybook-snippets\">vscode<\/a> contendo alguns snippets para facilitar a minha vida e da minha equipe na implanta\u00e7\u00e3o do Storybook, talvez possa lhe ajudar tamb\u00e9m! E s\u00f3 procurar por Storybook Snippetsno menu de extens\u00f5es do vscode que j\u00e1 est\u00e1 no topo da pesquisa. Posso te ajudar tamb\u00e9m tirando d\u00favidas no uso!<\/p>\n<h2><strong>Conclus\u00e3o<\/strong><\/h2>\n<p>O Storybook \u00e9 uma ferramenta que eu venho usando h\u00e1 quase 2 anos tanto para React, por onde eu conheci, quando para Angular, e vem me ajudado muito nas entregas da minha equipe. Podemos, sem medo, parelelizar tarefas para entregar uma feature que, a princ\u00edpio, demoraria pela interdepend\u00eancia de cria\u00e7\u00e3o de componentes. Al\u00e9m disso reduziu exponencialmente o retrabalho de cria\u00e7\u00e3o de componentes, pois todos os componentes compartilhados est\u00e3o documentados pelo Storybook. Ficou muito mais f\u00e1cil debuggar e atualizar o funcionamento de um componente sem a necessidade de fazer integra\u00e7\u00f5es com a aplica\u00e7\u00e3o para conferir o comportamento. A comunidade vem mantendo uma p\u00e1gina de <a href=\"https:\/\/www.learnstorybook.com\/\">tutorial<\/a> bem interessante tamb\u00e9m de se conferir. <\/p>\n<h4 id=\"sobre-o-autor\">Sobre o autor<\/h4>\n<p>Felipe Norato Uma pessoa que gosta de escrever c\u00f3digo para resolver a vida das pessoas e tocar guitara de vez em quando. Apreciador de s\u00e9ries e filmes, assim com um c\u00f3digo bem feito e perform\u00e1tico. Twitter: @fnoratol Github: norato Medium: @felipenoratolacerda<\/p>","protected":false},"author":39,"featured_media":37147,"menu_order":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"blog_category":[],"class_list":["post-37145","blog","type-blog","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Escalando a Entrega de UI com Storybook | Sinch<\/title>\n<meta name=\"description\" content=\"Confira dicas exclusivas do Felipe Norato, Desenvolvedor na Wavy, sobre como escalar as demandas de UI com ajuda do Storybook!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Escalando a Entrega de UI com Storybook | Sinch\" \/>\n<meta property=\"og:description\" content=\"Confira dicas exclusivas do Felipe Norato, Desenvolvedor na Wavy, sobre como escalar as demandas de UI com ajuda do Storybook!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/\" \/>\n<meta property=\"og:site_name\" content=\"Sinch\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wearesinch\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-18T16:13:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/alvaro-reyes-qWwpHwip31M-unsplash-780x450-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"780\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@WeAreSinch\" \/>\n<meta name=\"twitter:label1\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/\",\"url\":\"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/\",\"name\":\"Escalando a Entrega de UI com Storybook | Sinch\",\"isPartOf\":{\"@id\":\"https:\/\/sinch.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/alvaro-reyes-qWwpHwip31M-unsplash-780x450-1.jpg\",\"datePublished\":\"2021-03-26T14:02:00+00:00\",\"dateModified\":\"2025-12-18T16:13:26+00:00\",\"description\":\"Confira dicas exclusivas do Felipe Norato, Desenvolvedor na Wavy, sobre como escalar as demandas de UI com ajuda do Storybook!\",\"breadcrumb\":{\"@id\":\"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/#primaryimage\",\"url\":\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/alvaro-reyes-qWwpHwip31M-unsplash-780x450-1.jpg\",\"contentUrl\":\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/alvaro-reyes-qWwpHwip31M-unsplash-780x450-1.jpg\",\"width\":780,\"height\":450},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sinch.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\/\/sinch.com\/pt\/blog\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Escalando A Entrega De Ui Com O Storybook\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sinch.com\/pt\/#website\",\"url\":\"https:\/\/sinch.com\/pt\/\",\"name\":\"Sinch\",\"description\":\"SMS Messaging, Voice, Email, Video &amp; Verification APIs | Sinch\",\"publisher\":{\"@id\":\"https:\/\/sinch.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sinch.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sinch.com\/pt\/#organization\",\"name\":\"Sinch\",\"url\":\"https:\/\/sinch.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/sinch.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/09\/Thumbnail-Logo-Honey.png\",\"contentUrl\":\"https:\/\/sinch.com\/wp-content\/uploads\/2024\/09\/Thumbnail-Logo-Honey.png\",\"width\":800,\"height\":496,\"caption\":\"Sinch\"},\"image\":{\"@id\":\"https:\/\/sinch.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/wearesinch\/\",\"https:\/\/x.com\/WeAreSinch\",\"https:\/\/www.linkedin.com\/company\/sinch\",\"https:\/\/www.youtube.com\/channel\/UCZZ2u_B2afTxA0v-xcgfsaw\",\"https:\/\/www.instagram.com\/wearesinch\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Escalando a Entrega de UI com Storybook | Sinch","description":"Confira dicas exclusivas do Felipe Norato, Desenvolvedor na Wavy, sobre como escalar as demandas de UI com ajuda do Storybook!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/","og_locale":"pt_BR","og_type":"article","og_title":"Escalando a Entrega de UI com Storybook | Sinch","og_description":"Confira dicas exclusivas do Felipe Norato, Desenvolvedor na Wavy, sobre como escalar as demandas de UI com ajuda do Storybook!","og_url":"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/","og_site_name":"Sinch","article_publisher":"https:\/\/www.facebook.com\/wearesinch\/","article_modified_time":"2025-12-18T16:13:26+00:00","og_image":[{"width":780,"height":450,"url":"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/alvaro-reyes-qWwpHwip31M-unsplash-780x450-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@WeAreSinch","twitter_misc":{"Est. tempo de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/","url":"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/","name":"Escalando a Entrega de UI com Storybook | Sinch","isPartOf":{"@id":"https:\/\/sinch.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/#primaryimage"},"image":{"@id":"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/#primaryimage"},"thumbnailUrl":"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/alvaro-reyes-qWwpHwip31M-unsplash-780x450-1.jpg","datePublished":"2021-03-26T14:02:00+00:00","dateModified":"2025-12-18T16:13:26+00:00","description":"Confira dicas exclusivas do Felipe Norato, Desenvolvedor na Wavy, sobre como escalar as demandas de UI com ajuda do Storybook!","breadcrumb":{"@id":"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/#primaryimage","url":"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/alvaro-reyes-qWwpHwip31M-unsplash-780x450-1.jpg","contentUrl":"https:\/\/sinch.com\/wp-content\/uploads\/2024\/08\/alvaro-reyes-qWwpHwip31M-unsplash-780x450-1.jpg","width":780,"height":450},{"@type":"BreadcrumbList","@id":"https:\/\/sinch.com\/pt\/blog\/escalando-a-entrega-de-ui-com-o-storybook\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sinch.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/sinch.com\/pt\/blog\/"},{"@type":"ListItem","position":3,"name":"Escalando A Entrega De Ui Com O Storybook"}]},{"@type":"WebSite","@id":"https:\/\/sinch.com\/pt\/#website","url":"https:\/\/sinch.com\/pt\/","name":"Sinch","description":"SMS Messaging, Voice, Email, Video &amp; Verification APIs | Sinch","publisher":{"@id":"https:\/\/sinch.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sinch.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/sinch.com\/pt\/#organization","name":"Sinch","url":"https:\/\/sinch.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/sinch.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/sinch.com\/wp-content\/uploads\/2024\/09\/Thumbnail-Logo-Honey.png","contentUrl":"https:\/\/sinch.com\/wp-content\/uploads\/2024\/09\/Thumbnail-Logo-Honey.png","width":800,"height":496,"caption":"Sinch"},"image":{"@id":"https:\/\/sinch.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/wearesinch\/","https:\/\/x.com\/WeAreSinch","https:\/\/www.linkedin.com\/company\/sinch","https:\/\/www.youtube.com\/channel\/UCZZ2u_B2afTxA0v-xcgfsaw","https:\/\/www.instagram.com\/wearesinch\/"]}]}},"_links":{"self":[{"href":"https:\/\/sinch.com\/pt\/wp-json\/wp\/v2\/blog\/37145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sinch.com\/pt\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/sinch.com\/pt\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/sinch.com\/pt\/wp-json\/wp\/v2\/users\/39"}],"version-history":[{"count":0,"href":"https:\/\/sinch.com\/pt\/wp-json\/wp\/v2\/blog\/37145\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sinch.com\/pt\/wp-json\/wp\/v2\/media\/37147"}],"wp:attachment":[{"href":"https:\/\/sinch.com\/pt\/wp-json\/wp\/v2\/media?parent=37145"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sinch.com\/pt\/wp-json\/wp\/v2\/tags?post=37145"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/sinch.com\/pt\/wp-json\/wp\/v2\/blog_category?post=37145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}