Como documentar códigos? Documentando Front End com Storybook!

Поделиться
HTML-код
  • Опубликовано: 2 фев 2025

Комментарии • 53

  • @obrenoborges
    @obrenoborges 2 года назад +13

    Seria interessante uma parte 2 voce demonstrando como colocar em produção, mas privado para que somente os funcionários da empresa tivessem acesso, com algum tipo de autenticação. Muito bom vídeo, obrigado!

  • @thiagovieira8376
    @thiagovieira8376 3 года назад +5

    Muito bom, Souto! Simplificou bastante a instalação e primeiras configurações do Storybook

    • @DevSoutinho
      @DevSoutinho  3 года назад +1

      já sofri mt ashusahusa a ideia foi bem essa #missaoCumprida

  • @marcelorafael23
    @marcelorafael23 3 года назад +3

    No meu primeira trampo Tive contato com storybook, achei fenomenal. To no meu Segundo trampo e lá recentemente foi colocado como requisito pra documentar o front. É muito bom. 👌

    • @DevSoutinho
      @DevSoutinho  3 года назад +1

      É um sonho de consumo hehe

  • @danielvinicius4906
    @danielvinicius4906 3 года назад +2

    Vídeo top não sabia que o Storybook era pra documentar front-ends

    • @DevSoutinho
      @DevSoutinho  3 года назад +1

      mano é a melhor tool eu acho!

  • @zeckinho_
    @zeckinho_ 3 года назад +7

    Editor sempre inovando nas aberturas haha

  • @emanoelinfinity
    @emanoelinfinity 3 года назад +2

    Acho que vou rever. A minha senioridade achou um tanto de dificuldade.

    • @DevSoutinho
      @DevSoutinho  3 года назад +1

      vai tranquilo! essas paradas normalmente tu chega na empresa e ta "pronto". qualquer dúvida só falar

  • @hugoleonardo3758
    @hugoleonardo3758 Год назад +1

    Dica, quando gravar, colocar som mais alto.

  • @gabrielsampaio1125
    @gabrielsampaio1125 3 года назад

    Souto, quando você lança o de publicação?

  • @wellingtonalves5214
    @wellingtonalves5214 2 года назад

    Show, muito obrigado, era o que eu procurava.

  • @lucasduarte2481
    @lucasduarte2481 2 года назад

    muito bom o vídeo mano! vou usar pra documentar o design system esse final de semana

  • @KevinMadalossoVeiga
    @KevinMadalossoVeiga Год назад

    ótimo vídeo, obrigado pelo conteúdo

  • @matheussoares1138
    @matheussoares1138 3 года назад +3

    OBRIGADOOO

  • @alexdonega
    @alexdonega 2 года назад

    top.... Atualmente eu uso Bubble, pq desenvolvemos nossa startup em nocode... essa ferramenta serve para nós, ou conhece algum específica para no code?

  • @davilima6995
    @davilima6995 2 года назад

    Eu consigo documentar qualquer coisa no storybook, por exemplo um hook?

  • @caramelo_BR_10
    @caramelo_BR_10 Год назад

    Isso funciona com código react native?

  •  2 года назад +1

    Ótimo vídeo cara! Mas eu fiquei com uma dúvida mais na parte do framework que tu utilizou, por que o Next e não outro, como o vite, ou até mesmo uma configuração manual do React mesmo? Qual a facilidade em criar uma lib ao utilizar o Next? Na empresa que eu trabalho não existe um design system, e estamos com uma iniciativa para desenvolver uma lib primeiramente para padronizar os componentes, daí estava na dúvida de qual opção para criar um projeto React eu iria utilizar.

    • @DevSoutinho
      @DevSoutinho  2 года назад +1

      O motivo de usar o next foi só pq ele já ia ter o pré setup que eu queria, mas funcionária com create React app, vi-te e talz :)

    •  2 года назад

      @@DevSoutinho Maneiro, obrigado pela resposta, vou usar seu projeto como base :)

  • @arozendojr
    @arozendojr 3 года назад +2

    Existe algum "Storybook" para fazer a documentação para uso do fluxo das telas, colocar uma tela, com setas, dependendo do botão do click, vai para uma tela explica o que o botão faz ? você não usava win ?

    • @DioneBatista
      @DioneBatista 3 года назад +3

      Figma não Ajuda ?

    • @arozendojr
      @arozendojr 3 года назад +2

      @@DioneBatista A ideia era deixar no repositório git, assim o fluxo/diagrama da aplicação em teoria, seria atualizado com o código, sendo parte integrante do desenvolvimento.

    • @leovedere
      @leovedere 3 года назад +2

      sua duvida ta com cara mais de wireframe, e como o amigo ai falou, o figma ajudaria, gerando protótipos interativos ou deixando como comentário cada ação. talvez até o figjam ou o miro pode fazer isso.
      com o storybook, talvez voce consiga criar uns templates de página (compondo com seus componentes) e criar a estrutura que voce quer, colocando uns console log ou ate uns alerts.
      o storybook tem o conceito de addon, onde voce adiciona uns plugins pra executar alguma tarefa e da pra desenvolver tambem, da uma olhada nisso, pode ser que ja exista algo.

    • @arozendojr
      @arozendojr 3 года назад +1

      @@leovedere vou procurar, valeu, meu objetivo é deixar dentro do git os fluxos das telas versionados, para não ter aquele problema no projeto que ninguém sabe como as telas funcionam

    • @DevSoutinho
      @DevSoutinho  3 года назад

      o que da pra fazer, é criar um componente com o fluxo de tela que vc tem e documentar ele, acha que ajuda?

  • @yuryregis942
    @yuryregis942 3 года назад +3

    Oooooláaaa Soutinho!
    O Storybook também pode ser usado e integrado com o ReactNative ou ele é usado apenas para front web mesmo ?

    • @DevSoutinho
      @DevSoutinho  3 года назад +3

      Pode sim! Mas tu vai usar a versão pra celular dele. Não lembro se tem sido mantida nos últimos tempos

    • @asdasdadasdasd1
      @asdasdadasdasd1 3 года назад +2

      Tem como sim usar para RN!
      Você pode rodar ele no app e também no navegador.

  • @yanmelnic613
    @yanmelnic613 3 года назад +2

    Ótimo vídeo! O que voce usa pra deixar a tela amarelada assim?

    • @DevSoutinho
      @DevSoutinho  3 года назад +1

      Cara foi um erro na placa de captura 🥺

    • @rocstar3000
      @rocstar3000 2 года назад +1

      @@DevSoutinho não é bug, é feature.

    • @lilialp_3822
      @lilialp_3822 2 года назад

      kkkkkkkk e eu pensando que era modo leitura

  • @rogeriopst450
    @rogeriopst450 3 года назад +2

    mto legal hein..vlw. parabens..o angular tem algo parecido? ja falei c algumas pessoas na empresa sobre react, mas la ainda eh e deve ser angular por mto tempo rs

    • @DevSoutinho
      @DevSoutinho  3 года назад +1

      o angular tem sim! mesma coisa do react só acho que a parte do MDX não vai ter, mas é só olhar lá na doc deles que tu cria o setup pra angular

  • @marcelohfonseca
    @marcelohfonseca 3 года назад +7

    Video top! O Audio ficou um pouco baixo Solto !

  • @naeliio
    @naeliio 3 года назад +4

    muito bom o video, parabéns haha mas esse som quando corta as cenas doí no ouvido :O

    • @DevSoutinho
      @DevSoutinho  3 года назад

      cara eu já conversei aqui e vamo reduzir \o

    • @DevSoutinho
      @DevSoutinho  3 года назад

      valeu o feedback!

  • @Mychel272
    @Mychel272 3 года назад +9

    só aqui o audio ficou um pouco baixo?

  • @silvoney
    @silvoney 3 года назад +1

    Excelente vídeo. Valeu pelo conteúdo, mas mano.... Essas transições estridentes doem no ouvido 😅

    • @DevSoutinho
      @DevSoutinho  3 года назад +2

      cara eu vou corrigir pros próximos, valeu o feedback!

    • @davilima6995
      @davilima6995 2 года назад

      demais kkkk

  • @alvaro.guedes
    @alvaro.guedes 3 года назад +3

    audio ta bem baixo

    • @DevSoutinho
      @DevSoutinho  3 года назад

      deu algum ruim nesse vídeo :(