hoje eu quero conversar com você aqui sobre o storybook tá vocês pediram bastante aí sobre conteúdo sobre Story book né então eu quero trazer alguns pontos aqui e também a gente vai instalar o Story book aqui dentro de um projeto com next por exemplo para a gente ver como é que funciona essa questão da instalação e tal mas o foco do vídeo não vai ser a instalação em si Tá eu vou deixar lá mais para o final se você quiser acompanhar a instalação você fica comigo até o final desse vídeo aqui eu quero descobrir com
você esses pontos aqui alguns conceitos algumas ideias aqui a gente trocando ideia ao longo do vídeo Beleza então Fica comigo até o final desse vídeo aqui que vai ser bem interessante [Música] Fala galera beleza vira um óculos aqui Bom basicamente né o Story book vamos gravar vamos começar aqui já direto o que que é o Story book né para você que já ouviu falar mas não sabe exatamente o que que ele é Bom basicamente o Story book ele é um ali ópenso que fornece para a gente ali um playground né entre aspas com os componentes
da nossa aplicação tá ao longo do vídeo aqui acho que vai ficar mais claro essa definição porque de início assim ela parece bastante vaga Mas você vai entender então mas guarda isso ele é um playground pra gente vamos dizer assim brincar com os componentes ali da nossa aplicação tá mas aí a gente entra no próximo ponto tá que era para ter aí para que que ele serve né os principais pontos aqui que eu citaria de vantagem e de objetivo de vocês utilizar um storybook são basicamente quatro tá Lógico que pode ter mais mas assim pessoalmente
eu considero esses quatro pontos aqui bem importantes que é primeiro a gente criar uma documentação viva dos componentes tá então uma dúvida aí que a galera me pergunta bastante é como é que a gente pode documentar por exemplo Swag da vida e já tem ali uma documentação bastante interessante né mas no Fronte O que que a gente poderia utilizar para documentar o front-end o Story book seria um alternativa muito interessante tá então esse é o primeiro ponto criar uma documentação livre dos nossos componentes segundo ponto foco no desenvolvimento individual dos componentes tá imagina o seguinte
imagina que você tá criando componente você pegou uma pesca aí você tem um componente para criar é acompanhante de bom por exemplo né peguei um componente bem simples aqui e daí você precisa né Se for do jeito tradicional você precisa adicionar esse componente em alguma página ali e aí você né roda o projeto e aí você fica né Cada alteração que você tem ali salva né da hot load você vê ali já direto no Browser a diferença né do componente mas você precisa estar rodando um projeto inteiro e você não consegue ver o componente de
forma isolada ele vai ter que estar dentro de uma página por exemplo certo com história ebook não precisa ser assim tá primeiro que você nem precisa estar rodando um projeto como um todo você precisa rodar apenas o storybook certo E aí você já consegue loading então Toda vez que você fazer uma alteração ali no seu componente salvar ele já vai refletir ali no Browser também tá E é muito muito rápido o hot Road do story book Beleza então esse seria o segundo ponto que eu acho muito massa isso ajuda demais a produtividade quando você tá
desenvolvendo suas técnicas aí no final de e terceiro ponto colaboração entre designers e deves tá então a galera de Willy wex ajuda bastante eles conseguirem acompanhar a evolução né do projeto ali front-end da aplicação né que vocês estão criando porque fica muito simples a gente já pode ir para documentação aqui que eu acho que fica mais claro tá a documentação do vou deixar aí na descrição Tá mas é basicamente história book de s.org você já acessa aqui a documentação deles tá é bem bem completa a documentação dele então recomendo muito você vem aqui então tem
tutoriais tem skydes aqui guias né então tem muita muita coisa massa aqui tem a parte de show case que a gente vai falar daqui a pouco tem um porquê então tem toda uma parte de motivação aqui do porque utilizar o storybook então Recomendo muito vocês gastar um tempinho aqui entendendo né a ferramenta porque a documentação deles é muito boa mesmo [Música] Mas como eu tava falando a questão de colaboração entre deve front aqui ó quando a gente cria um histórico se você nunca utilizou o storybook eu nunca viu é basicamente isso daqui a gente vai
ter vai tá rodando storybook ele vai ficar rodando ali uma porta e aí a gente tem essas vamos dizer aqui separações essas pastinhas então eu posso dar uma pasta de charts aqui é totalmente customizado tá a gente vai ver daqui a pouco mas a gente tem essa parte essa parte de charts aqui spinners modais E por aí vai e aí aqui embaixo tem essas próprias aqui ó Então as próprias que aquele componente ele recebe fica aqui de fácil acesso tá então tipo pode ser select pode ser um radion Button pode ser uma ponte de texto
mesmo aqui para ir digitando aqui alterando e vai alterando em tempo real tá Não precisa de você atualizar de novo ali ou rodar de novo projeto não você qualquer alteração que você fizer aqui embaixo nessa parte de controls aqui ó controls você já vai ver refletindo ali aqui já na parte visual tá então isso aqui ajuda demais deixar mais próximo ali o time a colaboração entre os times e designers e os times de deve certo e por último mais ou menos importante ajuda muito na parte de testar os componentes inclusive acessibilidade tá então se você
já tá mais tempo aqui no canal Você sabe que eu bato bastante na tecla de acessibilidade aqui inclusive vou deixar um vídeo interessante para você dar uma olhada depois para você não sair utilizando dívida em todo lugar e o porquê né de você não fazer isso e o que que você deveria fazer no ao invés de ficar utilizando gifs então recomendo bastante você dá uma olhada nesse vídeo é bem importante mas e tem isso também tá então Story book Ele nasceu basicamente com as features ali de documentação né então você tinha essa parte aqui então
mas hoje ele é uma ferramenta bem mais robusta então tem essa parte de testes também então cada fazer muita coisa fora outros detalhes que a gente vai comentar daqui a pouco tá beleza falei falei aqui para que que serve o que que ele é e tal mas assim as empresas utilizam Story book que de nada adianta a gente ter esse tanto de ferramenta aqui tanto de coisa fitw e tal mas beleza então aqui Já tem alguns exemplos aqui de algumas empresas aí que talvez você conheça né que utilize o Story book mas se você vier
na parte de show case deles aqui ó tem bastante coisa tá então tem alguns Story bugs aqui que são populares né e tal inclusive da Natura então bem interessante aqui você dá uma olhadinha depois sem os fortes também então cara tem muita coisa aqui tá tem para você ter uma ideia né de algumas empresas ali que utilizam o histórico seriam algumas aqui para citar algumas né Shopping Fly IBM airbnb Slack Twitter então tem várias empresas aí grandes que utilizam algumas tá então fora outras menores né e etc de pequeno e médio porte aí então eu
até queria saber de você né se no projeto que você tá na empresa que você trabalha vocês utilizam deixa aqui nos comentários Tá mas existem outras opções né então vamos voltar aqui ó as empresas as empresas utilizam citei ele algumas existem outras opções que a gente pode substituir o storybook ou sei lá por algum motivo você quer né Tem uma noção aí se existem outras opções do mercado com a Gama de ferramentas que o Story book nos provei hoje eu creio que a gente não tenha alternativas que entregue todas elas tá existem lógico ferramentas que
entregam algumas features do story book mas um concorrente de peso que tenha ferramentas equivalentes todas as ferramentas que o storybou aqui nos provei hoje eu acredito que não tá se você conhece outra ferramenta então completo deixa aqui nos comentários tá por favor para eu dar uma olhada depois porque Até onde eu sei até onde eu pesquisei eu não conheço outra ferramenta tão completa existem para a parte de documentação por exemplo o dox é dox que fala Exatamente esse carinha aqui ó ele também é bem interessante tá só que aí a gente utiliza o mdx tá
para fazer a parte de documentação Então você vai criar arquivos para fazer a parte de documentação e dos seus componentes Ele é bem simples também tá então é bem fácil aqui de instalar e configurar etc fala aqui que não tem é 0 fácil de customizar e tal Eu recomendo dar uma olhada nele aqui mas Igual eu falei ele é só apenas ali para a parte de Doc mesmo sabe não traz Nada Além disso então se for algo mais simples talvez faça sentido aqui você utilizar ele é um dos bem conhecidos aí e tal e o
pincel também né importante destacar e para parte de testes né existem vários né então pô tem que como eu comentei o Story book também provei para a gente parte de testes tá você pode ter por exemplo existem outros né como Claro o Justin é para ele que o Andy tem o playhout playlist e só que além disso né o Story book ele também tem deixa eu ver que a gente pode dar uma olhada aqui aqui ó essa parte de edons aqui então Fora isso tudo que ele já provei para a gente a gente ainda consegue
adicionar e expandir várias funcionalidades com o uso dos edans tá então esses edredons aqui não precisa corretamente mas dá para fazer muita muita coisa com esse cara aqui com esses caras né então tem uma lista Você pode vir aqui tem um catálogo aqui tem uma porrada acessibilidade isso aqui é bem interessante parte de interações cara tem muita coisa massa aqui que dá para a gente fazer teste Runner que dá para a gente fazer aqui com o essa parte aqui né para a gente adicionar funcionalidades aqui dentro do storybook tá beleza mas você deveria utilizar aí
nos seus projetos aí vem a pergunta complicada né Vamos lá vamos tentar responder eu indicaria você testar em projetos pessoais né seus ali primeiro tá e uma coisa que eu sempre venho falando aqui no canal é que leve as ideias que você tem ali as coisas que você testa para o seu time tá disputa isso com o seu time porque um exemplo aqui Imagino que você já tem um projeto grande ali que vocês utilizam Já tem um tempo e você utiliza um up para fazer parte de validação tá você não conhece o YouTube que eu
falo bastante no canal que você consegue fazer várias se você fazer validações ali basicamente por exemplo com formulários mas não só para isso mas um uso bem claro bem clássico seria validações ali de inputs do formulário você consegue utilizar o yup E aí só que né a gente tem também azode que é bem interessante e tem uma integração muito muito forte ali como tá escrito sobre projeto tem tá escrito né Se vocês utilizam tá escrito é interessante você dar uma olhadinha nos olhos enfim tem vários vídeos aqui no canal sobre os olhos sabia parte de
validação de formulários etc tá uma olhadinha aí no canal Mas voltando aqui por exemplo Imagine que você já tem esse projeto grande e você vocês aí no seu time né você já utilizam o Up E aí né você começou a testar os olhos ali e curtir para caramba os olhos e falar caramba Vamos colocar os olhos aqui no nosso projeto só que faz sentido talvez não tá mas né Cada caso é um caso você pode e fazer uma migração aos poucos Né desde que faça sentido para o seu time você leva para o seu time
ver se a galera concorda né com essa alteração com essa adição e dessa Lib nova E aí se todo mundo tiver de acordo todo mundo porque imagina que vá que alguns não conheçam Zod né E aí tem é que tem uma uma curva de aprendizado ali e aí o time vai perder um pouquinho de produtividade nos primeiros dias vamos dizer assim por conta dessa Lib nova dessa forma nova de trabalhar etc mas aí você tem que avaliar né se faz sentido fazer essa migração e etc Então tudo isso é questão de conversa beleza então leva
sempre leva para o seu time tá E então faz sentido você utilizar o Story book nos seus projetos mesmo esquema tá eu recomendaria sim você utilizar o storybook mas você precisa validar isso com seu time e para ver se essa adição aí né Faz Sentido se todos estão cientes das vantagens que a gente vai ter aí no time utilizando o Story book certo então é bem importante ter esse diálogo com o seu time Beleza agora vamos para a parte de instalação Então cara Story book eu vou precisar bastante aqui da sua a sua atenção tá
porque agora a gente vai entrar numa parte interessante aqui vamos lá como eu falei eu preciso muito da sua atenção aqui agora tá porque são muitos passos e acho que é isso é um dos maiores problemas do story book a instalação e configuração dele aqui são bem complexas né Deixa eu te mostrar você não vai acreditar cara então a gente vai vir aqui na doc tá é a parte distal aqui vou copiar aqui do pnpm Beleza se você utilizar o outro comando vou vir aqui no nosso projeto vou abrir o terminal e vou colar aqui
então a gente vai esperar aqui não costumo demorar muito tá aí também vai variar da sua internet aqui ele vai pedir para instalar também uma extensão aqui do aqui ó um plugin aqui do s20 então você pode dar sim deixa ele instalar E aí ele vai instalar aqui ele já vai estar para a gente já o nosso storybook ele já vai passar para você aqui alguns modelos tá E vai criar uma pastinha que Stories então ele aqui alguns modelos aqui já vai rodar o nosso projeto Então olha aqui interessante e é isso tá funcionando é
isso beleza é isso restauração do Starbucks [Música] é bem complicado né então é basicamente isso então aqui a gente já tem já o nosso projeto já funcionando com storybook tá então ele já te dá alguns modelos fechar aqui aqui ó por exemplo Vamos abrir esse arquivo aqui então ele já te dá alguns modelos aqui certo então aqui onde você define né o seu meta vamos dizer assim não era e aqui você importa o seu componente tal que você passa qualquer O componente que você quer renderiza ali pra gente né Na parte da doc tem esses
aqui tudo tem muita coisa que dá para fazer com ele então recomendo bastante senão ele na doc é a parte de teste aqui também que eu comentei e aqui você consegue definir algumas variantes né vamos dizer assim então tem a Premiere small então você pode vir aqui ó primer E aí você tem aqui também os controles tá então o que que o botão aceita abrir aqui o componente de botão tá que o componente botão ele tem essas essas propriedades background color Label e etc tem vários aqui e aí aqui você consegue mexer nessas provas consegue
mudar o Label consegue setar aqui se ele é o Primer ou não certo consegue escolher a cor aqui também o do background cara olha que massa isso tudo aqui então tá vendo a facilidade que você tem de criar seus componentes de forma bem isolada então você não precisa estar rodando o seu projeto inteiro não precisa de pegar o seu componente importar numa página no microfone importando uma página para você ver ele né ali tela e conseguir visualizando como que ele tá ficando não você roda apenas ele isoladamente então ele tá aqui ó um botão isolado
certo sem mais nada tem a parte de header aqui então tem ó a parte de Docs certo igual do botão aqui ó então tem a parte de documentação mesmo do botão e aí tem os defaults né os as variações vamos dizer assim né então quando o usuário tá logado quando ele tá desligado certo parte da doc componente você consegue criar também para páginas tá então o histórico aqui para a página Beleza então cara é muito muito vantajoso você utilizar o Story nos seus projetos então se você não conhecer o Story book deixa aí nos comentários
O que que você tá achando aí da ferramenta tá e se você quer mais conteúdo sobre história ebook aqui no canal não compartilha esse vídeo Vamos bater a marca aí de 500 likes aqui nesse vídeo beleza e muito obrigado você assistir até o final desse vídeo grande abraço e até a próxima [Música]
