Histoire é uma ferramenta para gerar aplicativos de histórias (ou "livros").

Conheça o Histoire

Uma história é um cenário em que você exibe em seu navegador um ou mais componentes para casos de uso específicos.

As histórias são úteis por vários motivos:

Organize e documente componentes para outros desenvolvedores
Apresente diferentes casos de uso cobertos por seus componentes
Desenvolva componentes isoladamente
Teste regressões visuais fazendo capturas de tela
Geralmente é usado ao construir o sistema de design de uma empresa ou uma biblioteca de componentes.

Na História, as Histórias contêm uma ou mais Variantes, que são casos de uso diferentes em torno do mesmo tópico ou dos mesmos componentes. Histórias em Histoire são construídas assim:

• Crie um arquivo de história(.story)
• Importe seus componentes
• Crie uma variante
• Inicialize algum estado (opcional)
• Componentes de montagem
• Adicione controles para permitir a interação com o estado (opcional)
• Adicione mais variantes (opcional)

Você terá:

Basicamente te dá:

• Uma prévia interativa da história (ou até mesmo uma grade de todas as variantes!)
• Código copiável para reproduzir o mesmo resultado em seu próprio código
• Controles para interagir com a visualização
• Documentação renderizada do Markdown
• Muitos outros recursos!

Por que devo usar o Histoire?

Histoire é construído desde o início para ser um construtor de histórias nativo de Vite. Nossos valores fundamentais ao projetar Histoire são:

Projetos nativos do Vite: Ao reutilizar sua configuração do Vite, leva menos tempo para configurar e mais tempo para escrever histórias. O mesmo pipeline de construção significa que não há esforço e configuração duplicados! Suporte pronto para uso de TypeScript, JSX, Styles...

Idiomático : Nenhuma sintaxe obrigatória de template/args orientada a JSX e funky! Escreva sua história naturalmente em .vuearquivos, .sveltearquivos, JSX ou o que mais se sentir em casa com a estrutura que você está usando no restante do seu projeto. Também queremos ter a menor quantidade de API Histoire vazando em seu código de história.

Rápido e leve : Divirta-se escrevendo histórias usando a inicialização instantânea do servidor Vite e o HMR instantâneo! Os livros criados com o Histoire também serão rápidos na produção, graças à divisão de código e aos tamanhos de pacotes enxutos.

Personalizável : Você pode facilmente alterar a aparência para combinar com sua marca ou instalar plugins para estender os recursos do Histoire.

Ótima experiência do usuário : nos preocupamos com a experiência do usuário e nos esforçamos para tornar a interface do usuário do Histoire o mais bonita e intuitiva possível. Ele também suporta telefones!

Demonstração online:

Confira algumas demonstrações de documentações Vue e Svelte:

https://histoire.dev/guide/

Tutorial: criando documentação de projetos Vue

Preparei um conteúdo no youtube ensinando como usar e configurar o Histoire em seus projetos Vue.js, confira:

Espero que você tenha curtido esse conteúdo!
Até breve