CLI: Support community builders in sb init

lib/cli/src/generate.ts

@@ -24,7 +24,7 @@ program
   .option('-t --type <type>', 'Add Storybook for a specific project type')
   .option('--story-format <csf | csf-ts | mdx >', 'Generate stories in a specified format')
   .option('-y --yes', 'Answer yes to all prompts')
-  .option('-b --builder <webpack4 | webpack5>', 'Builder library')
+  .option('-b --builder <builder>', 'Builder library')
   .action((options) => initiate(options, pkg));
 
 program

lib/cli/src/generators/baseGenerator.ts

@@ -1,5 +1,11 @@
 import { NpmOptions } from '../NpmOptions';
-import { StoryFormat, SupportedLanguage, SupportedFrameworks, Builder } from '../project_types';
+import {
+  StoryFormat,
+  SupportedLanguage,
+  SupportedFrameworks,
+  Builder,
+  CoreBuilder,
+} from '../project_types';
 import { getBabelDependencies, copyComponents } from '../helpers';
 import { configure } from './configure';
 import { getPackageDetails, JsPackageManager } from '../js-package-manager';
@@ -42,6 +48,17 @@ const defaultOptions: FrameworkOptions = {
   commonJs: false,
 };
 
+const builderDependencies = (builder: Builder) => {
+  switch (builder) {
+    case CoreBuilder.Webpack4:
+      return [];
+    case CoreBuilder.Webpack5:
+      return ['@storybook/builder-webpack5'];
+    default:
+      return [builder];
+  }
+};
+
 export async function baseGenerator(
   packageManager: JsPackageManager,
   npmOptions: NpmOptions,
@@ -73,10 +90,6 @@ export async function baseGenerator(
   const yarn2Dependencies =
     packageManager.type === 'yarn2' ? ['@storybook/addon-docs', '@mdx-js/react'] : [];
 
-  const builderDependencies: Partial<Record<Builder, string>> = {
-    [Builder.Webpack5]: '@storybook/builder-webpack5',
-  };
-
   const packageJson = packageManager.retrievePackageJson();
   const installedDependencies = new Set(Object.keys(packageJson.dependencies));
 
@@ -86,7 +99,7 @@ export async function baseGenerator(
     ...extraPackages,
     ...extraAddons,
     ...yarn2Dependencies,
-    builderDependencies[builder],
+    ...builderDependencies(builder),
   ]
     .filter(Boolean)
     .filter(
@@ -96,7 +109,7 @@ export async function baseGenerator(
   const versionedPackages = await packageManager.getVersionedPackages(...packages);
 
   const mainOptions =
-    builder !== Builder.Webpack4
+    builder !== CoreBuilder.Webpack4
       ? {
           core: {
             builder,

lib/cli/src/initiate.ts

@@ -8,6 +8,7 @@ import {
   StoryFormat,
   SupportedLanguage,
   Builder,
+  CoreBuilder,
 } from './project_types';
 import { commandLog, codeLog, paddedLog } from './helpers';
 import angularGenerator from './generators/ANGULAR';
@@ -67,7 +68,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
   const generatorOptions = {
     storyFormat: options.storyFormat || defaultStoryFormat,
     language,
-    builder: options.builder || Builder.Webpack4,
+    builder: options.builder || CoreBuilder.Webpack4,
   };
 
   const end = () => {

lib/cli/src/project_types.ts

@@ -84,11 +84,13 @@ export enum StoryFormat {
   MDX = 'mdx',
 }
 
-export enum Builder {
+export enum CoreBuilder {
   Webpack4 = 'webpack4',
   Webpack5 = 'webpack5',
 }
 
+export type Builder = CoreBuilder | string;
+
 export enum SupportedLanguage {
   JAVASCRIPT = 'javascript',
   TYPESCRIPT = 'typescript',