Documentando seu front-end com Storybook (projeto real)

Ignite Lab: do Figma ao React - inscreva-se gratuitamente: rseat.in/ignite-lab-DS
Storybook é uma super ferramenta feita para construir páginas e componentes UI de maneira isolada, facilitando o desenvolvimento de states difíceis de acessar sem que precise executar todo o app.
Para ver na prática como essa ferramenta funciona, nós vamos aprender a documentar componentes front-end utilizando Storybook dentro de um projeto React completinho.
Bora codar?
Repositório do projeto React: github.com/rocketseat-content...
-----
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com.br/
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial

[@jennifermagpantay7933]

Estou usando Storybook + React no meu primeiro projeto do trabalho e está sendo ótimo! Mal posso esperar pelo Lab para aprimorar ainda mais meu conhecimento na ferramenta : )

[@zer0k1line68]

a cada dia uma nova ferramenta, eu imagino que daqui um tempo a rocketseat vá gravar um vídeo sobre desenvolver sites por comandos de voz e inteligência artificial

[@guh0493]

É uma ideia interessante

[@supermanbrz]

@@guh0493 Kkkkk não viaja, AI até vai, mas vai demorar ainda pra uma revolução fudidona dessa, até lá já aposentei e fiz mt dindin

[@henriquedelben]

@@supermanbrz chatgpt kkkk

[@weslleyfillipe1532]

@@supermanbrz 11 meses depois, e vc nao podia estar mais enganado kk

[@viniciusalves4785]

​@@weslleyfillipe1532 5 meses depois e estamos fodidos KKKKK (Devin AI foi lançada)

[@lmourabraga]

Eu já venho usando storybook, mas sempre aprendo algo novo quando vejo os vídeos da rocketseat. Excelente vídeo Diegão! 🚀

[@MrChernicharo]

Muito bom! Diegão sempre no 2x explicação completa em tempo recorde!

[@sergioaugusto8374]

O vídeo que estava esperando

[@raimundojunior8547]

Muito bom Diego, além do Ignite, também tem no youtube pra reforçar o aprendizado, eu ainda não entendi muito bem o porque do storybook, mas acho que se eu for fazendo, com o tempo, vou entender, muito obrigado pelo conteudo

[@JACKIECHANFILMES]

muito toopp 🚀, nunca usei o storybook, mas agora não tem por que não usar 💯

[@JanaTannus]

❤❤❤❤ tiro o chapéu pra vcs 1000 vezes! ❤❤❤❤

[@KevinMadalossoVeiga]

excelente vídeo, estou achando muito bom o Storybook

[@adeonirkohl]

Curti esse addon do msw, não conhecia... muito bom

[@clerivaldojunior4465]

Tome 1 dose de cana a cada vez que ouve widguet

[@vitordiamantino7717]

Estava procurando algo sobre Stors para rede social e sem querer achei essa belezinha kakakkakakaka

[@vitorgabriel8832]

vai ter vídeo do SB pra React Native, Diegão? Achei bem difícil configurar, comecei a tentar recentemente, esse vídeo veio em boa hora!

[@ronalddurand2680]

Show Diego

[@luizservelo7674]

Rocketseat ta espionando meu google né hahaha

[@elvispalace]

COMO NN AMAR ESSE CANAL?

[@dieegosf]

[@christianbarata655]

now i am in a good mood

[@kenjiutaka]

Vídeo sensacional como sempre! Uma dúvida, é possível utilizar o Storybook junto com o Expo??

[@franklysguimaraes]

Diegão uma aula de sitemap seria interessante ..

[@rodrigojose6444]

Vcs conseguiram baixar o cod do nlw-return-impulse?

[@feldevmoura]

Se eu soubesse ó quão difícil era de conseguir um emprego na área, nem tina feito um curso na DigitalHouse

[@Matheus_1582]

Ei no lugar da vsrsao adsciona um Latest

[@enriquesantosdeoliveira5798]

Show

[@BrasilEmFatos]

Muito top! Só uma dica com relação à pronuncia da palavra Widget. Se fala "widjet" ao invés de "wid-get" :D

[@dieegosf]

Thaaaaanks!

[@rafaelpavanelli5312]

man, tava me dando uma baita afliçã(n sei exatamente o porque) dele estar falando widget kkkkkkkkkkkk

[@SottaniProductions]

Reparei que nos projetos atuais vocês têm utilizado mais o NPM, sendo que antigamente utilizavam mais o Yarn. Algum motivo específico?

[@TheJunioGG]

o hype passou

[@eduardosalles9212]

Vite.. significa Veloz/Rápido em Frances

[@paulofidelis5311]

Dúvida: Não seria melhor investir o tempo de programar o storybook na programação de teste de interface?

[@rafaelomodei3058]

Acredito que ambos os casos são importantes, vai depender de qual tem mais prioridade no momento

[@gustavogavagiuriato2833]

Fala, Paulo Na minha opinião, os dois se complementam. O Storybook traz uma interface amigável e dinâmica para você conseguir ver componentes isoladamente e em estados específicos, e verificar se estão visualmente agradáveis e com as variações que deseja. Já os testes de interface testam a funcionalidade do código em si (embora também podemos implementar testes de estilização, verificando css, etc.), nos dando que o código está funcionando. Resumidamente, o Storybook nos ajuda a visualizar e interagir com os componentes, e os testes asseguram que o código está funcionando.

[@paulofidelis5311]

@@gustavogavagiuriato2833 Entendi. São propósitos diferentes. Vlww

[@henriquedelben]

De maneira resumida, o storybook foi feito para ajudar na criação de um Design System, que por sua vez, dentre outras coisas, ajuda na consistência da UI e até na produtividade e escalabilidade na criação de novas telas/ componentes de interface

[@AmodeusR]

Eu deveria criar o storybook numa pasta separada ou dentro da pasta do código frontend?

[@dieegosf]

Geralmente pode ir junto na mesma pasta :)

[@morizera]

Por que usar o npm sendo que o yarn é mais performático? Não seria a mesma lógica de usar o Vite ao invés dos outros?

[@dieegosf]

Hoje em quesito performance, tanto NPM quanto Yarn tem praticamente o mesmo desempenho. Se tu busca performance mesmo, da uma olhada no PNPM.

[@erikmatos7599]

Faz com webpack tbm

[@dieegosf]

Por que?

[@AllanGhaok]

É possível utilizar o Storybook com ReactJS? Ou é só com TS?

[@FWCODING]

Com JS tbm

[@icaroteles5301]

Como utilizar o storybook com Next.js e Styled-Components? Alguém sabe? Tentei aqui mas não funciona corretamente.

[@eliriamirnadias4212]

Também não consegui usar o storybook e Next.js. Dá erro na hora de rodar o storybook

[@cristianomaro]

O repositório git somente tem o widget.tsx dentro da pasta component nada além disso 😧

[@jeffxd9380]

muito bom, muito instrutivo, como sempre... Mas Diego, me doeu o ouvido ouvir a pronúncia de Widget - "widguit", várias vezes... rsrs... O certo seria "Wijit". Mas isso é mais chatice de quem tem TOC mesmo. Parabéns aí e obrigado por compartilhar, cara... Ajuda muito.

[@dennyboechat3871]

Haha doeu o ouvido aqui tb. Mas o conteúdo do vídeo tá show. Parabéns!

[@CarlosDaniel-yh3yr]

npm fico melhor que yarn?

[@dieegosf]

Ficou "igual", pode escolher o que curtir mais :)

[@IamTheRulez1]

Na dúvida, use pnpm. É bem moderno, muitas grandes empresas e projetos já usam (Microsoft, Vercel(nextjs), vite, etc) e é 3x mais rápido do que o yarn (que já é mais rápido do que o npm).

[@DVSK1]

você disse widget 79 vezes

[@caiocesar9731]

Essa é a pior biblioteca q eu já trabalhei na minha vida. horrível, horrível. Me impressiona vcs ensinando algo tao ruim e q atrapalha no andamento de projetos no lugar de ajudar

[@1luannunes]

Eu tbm não gostei, apliquei em um projeto angular, acho que atrapalha mais do que ajuda, minha opinião.

[@willianramos4153]

o video nem é ruim, mas dá um nervoso o jeito q ele fala coisas como vite e react