Gerador Storybook main.js
Gere o .storybook/main.js para Storybook 7+ com React e Vite, pronto para usar. Copie a configuração e comece a documentar seus componentes em minutos.
main.js do Storybook com React e Vite
Você já tem um projeto React com Vite rodando e quer só encaixar o Storybook nele. Rodar o init às vezes reescreve mais coisa do que você gostaria, ou falha porque a estrutura de pastas foge do padrão. Na prática, o que falta é um arquivo: o .storybook/main.js apontando para as stories e dizendo qual framework usar.
A ferramenta imprime esse arquivo pronto, sem nenhum campo para preencher, já visível ao abrir a página. Ele exporta via module.exports um glob de stories em ../src com as extensões js, jsx, ts, tsx e mdx, a lista de addons essentials, interactions e links, o framework @storybook/react-vite e docs com autodocs no modo tag. O caminho é relativo à pasta .storybook, não à raiz do projeto.
Dois ajustes comuns. Como o arquivo usa module.exports, ele quebra se o package.json tiver type: module; renomeie para main.cjs ou troque por export default. E este é um config no formato do Storybook 7: em versões mais novas, boa parte dos addons essentials foi absorvida pelo core, então confira o que ainda precisa estar no array antes de instalar tudo. O texto é gerado no navegador.
Perguntas frequentes
Funciona com Next.js ou Vue?
Minhas stories não aparecem no Storybook. Por quê?
Cadê o preview.js?
Ferramentas Relacionadas
Gerador netlify.toml
Gere um netlify.toml com comando de build, redirects e cabeçalhos de segurança prontos para o deploy na Netlify. Configure tudo pelo navegador e copie o arquivo.
Gerador Rollup Config
Gera um rollup.config.js para empacotar bibliotecas em ESM e CommonJS, com os plugins node-resolve, commonjs e terser já configurados. Bloco fixo, pronto para ajustar.
Gerador Webpack Config
Gera um webpack.config.js mínimo para bundling de aplicações JS modernas.
Gerador Prettier Config
Gera um .prettierrc pronto com as escolhas mais comuns: aspas simples, sem ponto e vírgula, vírgula final e linha de 100 colunas.
Gerador Prisma Init
Gera um schema.prisma inicial com datasource PostgreSQL e um modelo de exemplo.
Gerador Sequelize Init
Gera o config/config.js do Sequelize ORM com os ambientes de desenvolvimento, teste e produção, todos no dialeto postgres. Copie e ajuste as credenciais.