Vitest addon: sb add postinstall hook (auto configuring the Vitest plugin)

[yannbf]

Command:

storybook add @storybook/experimental-addon-vitest

Behavior of the command:

1: Install dependency and register the addon to main.js

2.1: User does not have any vite dependency/config and is not using Nextjs

• Bail and tell users that this use case is not supported. Point them to the docs

2.2: User does not have any vite dependency/config and is using Nextjs

• Install vite
• Install vite-plugin-storybook-nextjs plugin and point to its docs: https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite
• Proceed with steps 2.4

2.3: User does have Vitest and not workspaces

• Create a workspace file referring the vite/vitest.config file
• Set up everything from steps 2.4

2.4: User does have Vite but not Vitest

• Install vite if not present
• Install vitest, @vitest/browser and playwright
• run npx playwright install (chromium)
• write storybook.setup.ts and vitest.config.ts
• write vitest.config.ts
  • if the user has a viteFinal in main.js, warn them about using that config in the vite file
  • detect a vite config in .storybook directory first if possible
  • merge with vite.config.ts if that file exists (nextjs probably won't have it)
  • configure vite-plugin-storybook-nextjs if applicable
  • configure vue3 alias if applicable resolve: { alias: { vue: 'vue/dist/vue.esm-bundler.js', }, },

2.5: User does have Vite and Vitest

• The CLI will provide a message telling users to read a recipe for manual installation in the docs website