create-storybook 8.4.0-alpha.3 → 8.4.0-alpha.5

package/dist/bin/index.cjs

@@ -57,7 +57,7 @@
           */ 
           function getAbsolutePath(value: string): any {
             return dirname(require.resolve(join(value, 'package.json')))
-          }`]:[];await configureMain({framework:{name:frameworkInclude,options:options.framework||{}},prefixes,storybookConfigFolder,addons:shouldApplyRequireWrapperOnPackageNames?addons.map(addon=>applyRequireWrapper(addon)):addons,extensions,language,...staticDir?{staticDirs:[(0,import_node_path2.join)("..",staticDir)]}:null,...extraMain,...type!=="framework"?{core:{builder:builderInclude}}:{}})}if(await configurePreview({frameworkPreviewParts,storybookConfigFolder,language,rendererId}),addScripts&&await packageManager.addStorybookCommandInScripts({port:6006}),addComponents){let templateLocation=hasFrameworkTemplates(framework)?framework:rendererId;if(!templateLocation)throw new Error(`Could not find template location for ${framework} or ${rendererId}`);await(0,import_cli3.copyTemplateFiles)({renderer:templateLocation,packageManager,language,destination:componentsDestinationPath,commonAssetsDir:(0,import_node_path2.join)(getCliDir(),"rendererAssets","common")})}}function getCliDir(){return(0,import_node_path2.dirname)(require.resolve("create-storybook/package.json"))}var generator=async(packageManager,npmOptions,options,commandOptions)=>{let angularJSON=new import_cli7.AngularJSON;if(!angularJSON.projects||angularJSON.projects&&Object.keys(angularJSON.projects).length===0)throw new Error("Storybook was not able to find any projects in your angular.json file. Are you sure this is an Angular CLI project?");if(angularJSON.projectsWithoutStorybook.length===0)throw new Error("Every project in your workspace is already set up with Storybook. There is nothing to do!");let angularProjectName=await angularJSON.getProjectName();(0,import_common2.commandLog)(`Adding Storybook support to your "${angularProjectName}" project`);let angularProject=angularJSON.getProjectSettingsByName(angularProjectName);if(!angularProject)throw new Error(`Somehow we were not able to retrieve the "${angularProjectName}" project in your angular.json file. This is likely a bug in Storybook, please file an issue.`);let{root,projectType}=angularProject,{projects}=angularJSON,useCompodoc=commandOptions?.yes?!0:await(0,import_cli7.promptForCompoDocs)(),storybookFolder=root?`${root}/.storybook`:".storybook";angularJSON.addStorybookEntries({angularProjectName,storybookFolder,useCompodoc,root}),angularJSON.write(),await baseGenerator(packageManager,npmOptions,{...options,builder:import_cli6.CoreBuilder.Webpack5,...useCompodoc&&{frameworkPreviewParts:{prefix:import_cli7.compoDocPreviewPrefix}}},"angular",{extraAddons:["@storybook/addon-onboarding"],...useCompodoc&&{extraPackages:["@compodoc/compodoc","@storybook/addon-docs"]},addScripts:!1,componentsDestinationPath:root?`${root}/src/stories`:void 0,storybookConfigFolder:storybookFolder,webpackCompiler:()=>{}},"angular"),Object.keys(projects).length===1&&packageManager.addScripts({storybook:`ng run ${angularProjectName}:storybook`,"build-storybook":`ng run ${angularProjectName}:build-storybook`});let projectTypeValue=projectType||"application";projectTypeValue!=="application"&&projectTypeValue!=="library"&&(projectTypeValue="application");let templateDir=(0,import_node_path3.join)(getCliDir(),"templates","angular",projectTypeValue);return templateDir&&(0,import_cli8.copyTemplate)(templateDir,root||void 0),{projectName:angularProjectName,configDir:storybookFolder}},ANGULAR_default=generator;var import_cli9=require("storybook/internal/cli");var generator2=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,{...options,builder:import_cli9.CoreBuilder.Webpack5},"ember",{staticDir:"dist"},"ember")},EMBER_default=generator2;var import_cli10=require("storybook/internal/cli");var generator3=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"html",{webpackCompiler:({builder})=>builder===import_cli10.CoreBuilder.Webpack5?"swc":void 0})},HTML_default=generator3;var import_node_fs=require("fs"),import_node_path4=require("path"),import_cli11=require("storybook/internal/cli");var generator4=async(packageManager,npmOptions,options)=>{let staticDir;(0,import_node_fs.existsSync)((0,import_node_path4.join)(process.cwd(),"public"))&&(staticDir="public"),await baseGenerator(packageManager,npmOptions,{...options,builder:import_cli11.CoreBuilder.Webpack5},"react",{staticDir,extraAddons:["@storybook/addon-onboarding"],webpackCompiler:({builder})=>{}},"nextjs")},NEXTJS_default=generator4;var import_cli12=require("storybook/internal/cli");var generator5=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"preact",{webpackCompiler:({builder})=>builder===import_cli12.CoreBuilder.Webpack5?"swc":void 0})},PREACT_default=generator5;var generator6=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"qwik",{},"qwik")},QWIK_default=generator6;var import_cli13=require("storybook/internal/cli"),import_cli14=require("storybook/internal/cli");var generator7=async(packageManager,npmOptions,options)=>{let extraPackages=await(0,import_cli13.detectLanguage)(packageManager)===import_cli14.SupportedLanguage.JAVASCRIPT?["prop-types"]:[];await baseGenerator(packageManager,npmOptions,options,"react",{extraPackages,webpackCompiler:({builder})=>builder===import_cli14.CoreBuilder.Webpack5?"swc":void 0,extraAddons:["@storybook/addon-onboarding"]})},REACT_default=generator7;var import_cli15=require("storybook/internal/cli"),import_cli16=require("storybook/internal/cli"),generator8=async(packageManager,npmOptions)=>{let packageJson=await packageManager.retrievePackageJson(),missingReactDom=!packageJson.dependencies["react-dom"]&&!packageJson.devDependencies["react-dom"],reactVersion=packageJson.dependencies.react,packagesToResolve=[...["react-native-safe-area-context","@react-native-async-storage/async-storage","@react-native-community/datetimepicker","@react-native-community/slider"].filter(dep=>!packageJson.dependencies[dep]&&!packageJson.devDependencies[dep]),"@storybook/addon-ondevice-controls","@storybook/addon-ondevice-actions","@storybook/react-native"],packagesWithFixedVersion=[],versionedPackages=await packageManager.getVersionedPackages(packagesToResolve),babelDependencies=await(0,import_cli15.getBabelDependencies)(packageManager,packageJson),packages=[];packages.push(...babelDependencies),packages.push(...packagesWithFixedVersion),packages.push(...versionedPackages),missingReactDom&&reactVersion&&packages.push(`react-dom@${reactVersion}`),await packageManager.addDependencies({...npmOptions,packageJson},packages),packageManager.addScripts({"storybook-generate":"sb-rn-get-stories"}),await(0,import_cli15.copyTemplateFiles)({packageManager,renderer:"react-native",language:import_cli16.SupportedLanguage.TYPESCRIPT_3_8,destination:".storybook"})},REACT_NATIVE_default=generator8;var import_node_fs2=require("fs"),import_node_path5=require("path"),import_cli17=require("storybook/internal/cli"),import_semver=__toESM(require("semver"),1),import_ts_dedent3=require("ts-dedent");var generator9=async(packageManager,npmOptions,options)=>{let monorepoRootPath=(0,import_node_path5.join)(__dirname,"..","..","..","..","..",".."),extraMain=options.linkable?{webpackFinal:`%%(config) => {
+          }`]:[];await configureMain({framework:{name:frameworkInclude,options:options.framework||{}},prefixes,storybookConfigFolder,addons:shouldApplyRequireWrapperOnPackageNames?addons.map(addon=>applyRequireWrapper(addon)):addons,extensions,language,...staticDir?{staticDirs:[(0,import_node_path2.join)("..",staticDir)]}:null,...extraMain,...type!=="framework"?{core:{builder:builderInclude}}:{}})}if(await configurePreview({frameworkPreviewParts,storybookConfigFolder,language,rendererId}),addScripts&&await packageManager.addStorybookCommandInScripts({port:6006}),addComponents){let templateLocation=hasFrameworkTemplates(framework)?framework:rendererId;if(!templateLocation)throw new Error(`Could not find template location for ${framework} or ${rendererId}`);await(0,import_cli3.copyTemplateFiles)({renderer:templateLocation,packageManager,language,destination:componentsDestinationPath,commonAssetsDir:(0,import_node_path2.join)(getCliDir(),"rendererAssets","common")})}}function getCliDir(){return(0,import_node_path2.dirname)(require.resolve("create-storybook/package.json"))}var generator=async(packageManager,npmOptions,options,commandOptions)=>{let angularJSON=new import_cli7.AngularJSON;if(!angularJSON.projects||angularJSON.projects&&Object.keys(angularJSON.projects).length===0)throw new Error("Storybook was not able to find any projects in your angular.json file. Are you sure this is an Angular CLI project?");if(angularJSON.projectsWithoutStorybook.length===0)throw new Error("Every project in your workspace is already set up with Storybook. There is nothing to do!");let angularProjectName=await angularJSON.getProjectName();(0,import_common2.commandLog)(`Adding Storybook support to your "${angularProjectName}" project`);let angularProject=angularJSON.getProjectSettingsByName(angularProjectName);if(!angularProject)throw new Error(`Somehow we were not able to retrieve the "${angularProjectName}" project in your angular.json file. This is likely a bug in Storybook, please file an issue.`);let{root,projectType}=angularProject,{projects}=angularJSON,useCompodoc=commandOptions?.yes?!0:await(0,import_cli7.promptForCompoDocs)(),storybookFolder=root?`${root}/.storybook`:".storybook";angularJSON.addStorybookEntries({angularProjectName,storybookFolder,useCompodoc,root}),angularJSON.write(),await baseGenerator(packageManager,npmOptions,{...options,builder:import_cli6.CoreBuilder.Webpack5,...useCompodoc&&{frameworkPreviewParts:{prefix:import_cli7.compoDocPreviewPrefix}}},"angular",{extraAddons:["@storybook/addon-onboarding"],...useCompodoc&&{extraPackages:["@compodoc/compodoc","@storybook/addon-docs"]},addScripts:!1,componentsDestinationPath:root?`${root}/src/stories`:void 0,storybookConfigFolder:storybookFolder,webpackCompiler:()=>{}},"angular"),Object.keys(projects).length===1&&packageManager.addScripts({storybook:`ng run ${angularProjectName}:storybook`,"build-storybook":`ng run ${angularProjectName}:build-storybook`});let projectTypeValue=projectType||"application";projectTypeValue!=="application"&&projectTypeValue!=="library"&&(projectTypeValue="application");let templateDir=(0,import_node_path3.join)(getCliDir(),"templates","angular",projectTypeValue);return templateDir&&(0,import_cli8.copyTemplate)(templateDir,root||void 0),{projectName:angularProjectName,configDir:storybookFolder}},ANGULAR_default=generator;var import_cli9=require("storybook/internal/cli");var generator2=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,{...options,builder:import_cli9.CoreBuilder.Webpack5},"ember",{staticDir:"dist"},"ember")},EMBER_default=generator2;var import_cli10=require("storybook/internal/cli");var generator3=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"html",{webpackCompiler:({builder})=>builder===import_cli10.CoreBuilder.Webpack5?"swc":void 0})},HTML_default=generator3;var import_node_fs=require("fs"),import_node_path4=require("path"),import_cli11=require("storybook/internal/cli");var generator4=async(packageManager,npmOptions,options)=>{let staticDir;(0,import_node_fs.existsSync)((0,import_node_path4.join)(process.cwd(),"public"))&&(staticDir="public"),await baseGenerator(packageManager,npmOptions,{...options,builder:import_cli11.CoreBuilder.Webpack5},"react",{staticDir,extraAddons:["@storybook/addon-onboarding"],webpackCompiler:({builder})=>{}},"nextjs")},NEXTJS_default=generator4;var import_cli12=require("storybook/internal/cli");var generator5=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"preact",{webpackCompiler:({builder})=>builder===import_cli12.CoreBuilder.Webpack5?"swc":void 0})},PREACT_default=generator5;var generator6=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"qwik",{},"qwik")},QWIK_default=generator6;var import_cli13=require("storybook/internal/cli"),import_cli14=require("storybook/internal/cli");var generator7=async(packageManager,npmOptions,options)=>{let extraPackages=await(0,import_cli13.detectLanguage)(packageManager)===import_cli14.SupportedLanguage.JAVASCRIPT?["prop-types"]:[];await baseGenerator(packageManager,npmOptions,options,"react",{extraPackages,webpackCompiler:({builder})=>builder===import_cli14.CoreBuilder.Webpack5?"swc":void 0,extraAddons:["@storybook/addon-onboarding"]})},REACT_default=generator7;var import_cli15=require("storybook/internal/cli"),import_cli16=require("storybook/internal/cli"),generator8=async(packageManager,npmOptions)=>{let packageJson=await packageManager.retrievePackageJson(),missingReactDom=!packageJson.dependencies["react-dom"]&&!packageJson.devDependencies["react-dom"],reactVersion=packageJson.dependencies.react,packagesToResolve=[...["react-native-safe-area-context","@react-native-async-storage/async-storage","@react-native-community/datetimepicker","@react-native-community/slider","react-native-reanimated","react-native-gesture-handler","@gorhom/bottom-sheet","react-native-svg"].filter(dep=>!packageJson.dependencies[dep]&&!packageJson.devDependencies[dep]),"@storybook/addon-ondevice-controls","@storybook/addon-ondevice-actions","@storybook/react-native"],packagesWithFixedVersion=[],versionedPackages=await packageManager.getVersionedPackages(packagesToResolve),babelDependencies=await(0,import_cli15.getBabelDependencies)(packageManager,packageJson),packages=[];packages.push(...babelDependencies),packages.push(...packagesWithFixedVersion),packages.push(...versionedPackages),missingReactDom&&reactVersion&&packages.push(`react-dom@${reactVersion}`),await packageManager.addDependencies({...npmOptions,packageJson},packages),packageManager.addScripts({"storybook-generate":"sb-rn-get-stories"}),await(0,import_cli15.copyTemplateFiles)({packageManager,renderer:"react-native",language:import_cli16.SupportedLanguage.TYPESCRIPT_4_9,destination:".storybook"})},REACT_NATIVE_default=generator8;var import_node_fs2=require("fs"),import_node_path5=require("path"),import_cli17=require("storybook/internal/cli"),import_semver=__toESM(require("semver"),1),import_ts_dedent3=require("ts-dedent");var generator9=async(packageManager,npmOptions,options)=>{let monorepoRootPath=(0,import_node_path5.join)(__dirname,"..","..","..","..","..",".."),extraMain=options.linkable?{webpackFinal:`%%(config) => {
       // add monorepo root as a valid directory to import modules from
       config.resolve.plugins.forEach((p) => {
         if (Array.isArray(p.appSrcs)) {
@@ -104,10 +104,13 @@ The project types currently supported by Storybook are:
       
       ${import_picocolors2.default.inverse(" export {default} from './.storybook'; ")}
       
-      2. Enable transformer.unstable_allowRequireContext in your metro config
+      2. Wrap your metro config with the withStorybook enhancer function like this: 
       
-      For a more detailed guide go to:
-      ${import_picocolors2.default.cyan("https://github.com/storybookjs/react-native#existing-project")}
+      ${import_picocolors2.default.inverse(" const withStorybook = require('@storybook/react-native/metro/withStorybook'); ")}
+      ${import_picocolors2.default.inverse(" module.exports = withStorybook(defaultConfig); ")}
+
+      For more details go to:
+      ${import_picocolors2.default.cyan("https://github.com/storybookjs/react-native#getting-started")}
       
       Then to run your Storybook, type:
 

package/dist/bin/index.js

@@ -1,4 +1,4 @@
-import { initiate } from '../chunk-FYJF6JWK.js';
+import { initiate } from '../chunk-KIUOXM7S.js';
 import { versions } from 'storybook/internal/common';
 import { addToGlobalContext } from 'storybook/internal/telemetry';
 import { program } from 'commander';

package/dist/{chunk-FYJF6JWK.js → chunk-KIUOXM7S.js}

@@ -77,7 +77,7 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
           */ 
           function getAbsolutePath(value: string): any {
             return dirname(require.resolve(join(value, 'package.json')))
-          }`]:[];await configureMain({framework:{name:frameworkInclude,options:options.framework||{}},prefixes,storybookConfigFolder,addons:shouldApplyRequireWrapperOnPackageNames?addons.map(addon=>applyRequireWrapper(addon)):addons,extensions,language,...staticDir?{staticDirs:[join("..",staticDir)]}:null,...extraMain,...type!=="framework"?{core:{builder:builderInclude}}:{}});}if(await configurePreview({frameworkPreviewParts,storybookConfigFolder,language,rendererId}),addScripts&&await packageManager.addStorybookCommandInScripts({port:6006}),addComponents){let templateLocation=hasFrameworkTemplates(framework)?framework:rendererId;if(!templateLocation)throw new Error(`Could not find template location for ${framework} or ${rendererId}`);await copyTemplateFiles({renderer:templateLocation,packageManager,language,destination:componentsDestinationPath,commonAssetsDir:join(getCliDir(),"rendererAssets","common")});}}function getCliDir(){return dirname(__require.resolve("create-storybook/package.json"))}var generator=async(packageManager,npmOptions,options,commandOptions)=>{let angularJSON=new AngularJSON;if(!angularJSON.projects||angularJSON.projects&&Object.keys(angularJSON.projects).length===0)throw new Error("Storybook was not able to find any projects in your angular.json file. Are you sure this is an Angular CLI project?");if(angularJSON.projectsWithoutStorybook.length===0)throw new Error("Every project in your workspace is already set up with Storybook. There is nothing to do!");let angularProjectName=await angularJSON.getProjectName();commandLog(`Adding Storybook support to your "${angularProjectName}" project`);let angularProject=angularJSON.getProjectSettingsByName(angularProjectName);if(!angularProject)throw new Error(`Somehow we were not able to retrieve the "${angularProjectName}" project in your angular.json file. This is likely a bug in Storybook, please file an issue.`);let{root,projectType}=angularProject,{projects}=angularJSON,useCompodoc=commandOptions?.yes?!0:await promptForCompoDocs(),storybookFolder=root?`${root}/.storybook`:".storybook";angularJSON.addStorybookEntries({angularProjectName,storybookFolder,useCompodoc,root}),angularJSON.write(),await baseGenerator(packageManager,npmOptions,{...options,builder:CoreBuilder.Webpack5,...useCompodoc&&{frameworkPreviewParts:{prefix:compoDocPreviewPrefix}}},"angular",{extraAddons:["@storybook/addon-onboarding"],...useCompodoc&&{extraPackages:["@compodoc/compodoc","@storybook/addon-docs"]},addScripts:!1,componentsDestinationPath:root?`${root}/src/stories`:void 0,storybookConfigFolder:storybookFolder,webpackCompiler:()=>{}},"angular"),Object.keys(projects).length===1&&packageManager.addScripts({storybook:`ng run ${angularProjectName}:storybook`,"build-storybook":`ng run ${angularProjectName}:build-storybook`});let projectTypeValue=projectType||"application";projectTypeValue!=="application"&&projectTypeValue!=="library"&&(projectTypeValue="application");let templateDir=join(getCliDir(),"templates","angular",projectTypeValue);return templateDir&&copyTemplate(templateDir,root||void 0),{projectName:angularProjectName,configDir:storybookFolder}},ANGULAR_default=generator;var generator2=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,{...options,builder:CoreBuilder.Webpack5},"ember",{staticDir:"dist"},"ember");},EMBER_default=generator2;var generator3=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"html",{webpackCompiler:({builder})=>builder===CoreBuilder.Webpack5?"swc":void 0});},HTML_default=generator3;var generator4=async(packageManager,npmOptions,options)=>{let staticDir;existsSync(join(process.cwd(),"public"))&&(staticDir="public"),await baseGenerator(packageManager,npmOptions,{...options,builder:CoreBuilder.Webpack5},"react",{staticDir,extraAddons:["@storybook/addon-onboarding"],webpackCompiler:({builder})=>{}},"nextjs");},NEXTJS_default=generator4;var generator5=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"preact",{webpackCompiler:({builder})=>builder===CoreBuilder.Webpack5?"swc":void 0});},PREACT_default=generator5;var generator6=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"qwik",{},"qwik");},QWIK_default=generator6;var generator7=async(packageManager,npmOptions,options)=>{let extraPackages=await detectLanguage(packageManager)===SupportedLanguage.JAVASCRIPT?["prop-types"]:[];await baseGenerator(packageManager,npmOptions,options,"react",{extraPackages,webpackCompiler:({builder})=>builder===CoreBuilder.Webpack5?"swc":void 0,extraAddons:["@storybook/addon-onboarding"]});},REACT_default=generator7;var generator8=async(packageManager,npmOptions)=>{let packageJson=await packageManager.retrievePackageJson(),missingReactDom=!packageJson.dependencies["react-dom"]&&!packageJson.devDependencies["react-dom"],reactVersion=packageJson.dependencies.react,packagesToResolve=[...["react-native-safe-area-context","@react-native-async-storage/async-storage","@react-native-community/datetimepicker","@react-native-community/slider"].filter(dep=>!packageJson.dependencies[dep]&&!packageJson.devDependencies[dep]),"@storybook/addon-ondevice-controls","@storybook/addon-ondevice-actions","@storybook/react-native"],packagesWithFixedVersion=[],versionedPackages=await packageManager.getVersionedPackages(packagesToResolve),babelDependencies=await getBabelDependencies(packageManager,packageJson),packages=[];packages.push(...babelDependencies),packages.push(...packagesWithFixedVersion),packages.push(...versionedPackages),missingReactDom&&reactVersion&&packages.push(`react-dom@${reactVersion}`),await packageManager.addDependencies({...npmOptions,packageJson},packages),packageManager.addScripts({"storybook-generate":"sb-rn-get-stories"}),await copyTemplateFiles({packageManager,renderer:"react-native",language:SupportedLanguage.TYPESCRIPT_3_8,destination:".storybook"});},REACT_NATIVE_default=generator8;var generator9=async(packageManager,npmOptions,options)=>{let monorepoRootPath=join(__dirname,"..","..","..","..","..",".."),extraMain=options.linkable?{webpackFinal:`%%(config) => {
+          }`]:[];await configureMain({framework:{name:frameworkInclude,options:options.framework||{}},prefixes,storybookConfigFolder,addons:shouldApplyRequireWrapperOnPackageNames?addons.map(addon=>applyRequireWrapper(addon)):addons,extensions,language,...staticDir?{staticDirs:[join("..",staticDir)]}:null,...extraMain,...type!=="framework"?{core:{builder:builderInclude}}:{}});}if(await configurePreview({frameworkPreviewParts,storybookConfigFolder,language,rendererId}),addScripts&&await packageManager.addStorybookCommandInScripts({port:6006}),addComponents){let templateLocation=hasFrameworkTemplates(framework)?framework:rendererId;if(!templateLocation)throw new Error(`Could not find template location for ${framework} or ${rendererId}`);await copyTemplateFiles({renderer:templateLocation,packageManager,language,destination:componentsDestinationPath,commonAssetsDir:join(getCliDir(),"rendererAssets","common")});}}function getCliDir(){return dirname(__require.resolve("create-storybook/package.json"))}var generator=async(packageManager,npmOptions,options,commandOptions)=>{let angularJSON=new AngularJSON;if(!angularJSON.projects||angularJSON.projects&&Object.keys(angularJSON.projects).length===0)throw new Error("Storybook was not able to find any projects in your angular.json file. Are you sure this is an Angular CLI project?");if(angularJSON.projectsWithoutStorybook.length===0)throw new Error("Every project in your workspace is already set up with Storybook. There is nothing to do!");let angularProjectName=await angularJSON.getProjectName();commandLog(`Adding Storybook support to your "${angularProjectName}" project`);let angularProject=angularJSON.getProjectSettingsByName(angularProjectName);if(!angularProject)throw new Error(`Somehow we were not able to retrieve the "${angularProjectName}" project in your angular.json file. This is likely a bug in Storybook, please file an issue.`);let{root,projectType}=angularProject,{projects}=angularJSON,useCompodoc=commandOptions?.yes?!0:await promptForCompoDocs(),storybookFolder=root?`${root}/.storybook`:".storybook";angularJSON.addStorybookEntries({angularProjectName,storybookFolder,useCompodoc,root}),angularJSON.write(),await baseGenerator(packageManager,npmOptions,{...options,builder:CoreBuilder.Webpack5,...useCompodoc&&{frameworkPreviewParts:{prefix:compoDocPreviewPrefix}}},"angular",{extraAddons:["@storybook/addon-onboarding"],...useCompodoc&&{extraPackages:["@compodoc/compodoc","@storybook/addon-docs"]},addScripts:!1,componentsDestinationPath:root?`${root}/src/stories`:void 0,storybookConfigFolder:storybookFolder,webpackCompiler:()=>{}},"angular"),Object.keys(projects).length===1&&packageManager.addScripts({storybook:`ng run ${angularProjectName}:storybook`,"build-storybook":`ng run ${angularProjectName}:build-storybook`});let projectTypeValue=projectType||"application";projectTypeValue!=="application"&&projectTypeValue!=="library"&&(projectTypeValue="application");let templateDir=join(getCliDir(),"templates","angular",projectTypeValue);return templateDir&&copyTemplate(templateDir,root||void 0),{projectName:angularProjectName,configDir:storybookFolder}},ANGULAR_default=generator;var generator2=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,{...options,builder:CoreBuilder.Webpack5},"ember",{staticDir:"dist"},"ember");},EMBER_default=generator2;var generator3=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"html",{webpackCompiler:({builder})=>builder===CoreBuilder.Webpack5?"swc":void 0});},HTML_default=generator3;var generator4=async(packageManager,npmOptions,options)=>{let staticDir;existsSync(join(process.cwd(),"public"))&&(staticDir="public"),await baseGenerator(packageManager,npmOptions,{...options,builder:CoreBuilder.Webpack5},"react",{staticDir,extraAddons:["@storybook/addon-onboarding"],webpackCompiler:({builder})=>{}},"nextjs");},NEXTJS_default=generator4;var generator5=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"preact",{webpackCompiler:({builder})=>builder===CoreBuilder.Webpack5?"swc":void 0});},PREACT_default=generator5;var generator6=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"qwik",{},"qwik");},QWIK_default=generator6;var generator7=async(packageManager,npmOptions,options)=>{let extraPackages=await detectLanguage(packageManager)===SupportedLanguage.JAVASCRIPT?["prop-types"]:[];await baseGenerator(packageManager,npmOptions,options,"react",{extraPackages,webpackCompiler:({builder})=>builder===CoreBuilder.Webpack5?"swc":void 0,extraAddons:["@storybook/addon-onboarding"]});},REACT_default=generator7;var generator8=async(packageManager,npmOptions)=>{let packageJson=await packageManager.retrievePackageJson(),missingReactDom=!packageJson.dependencies["react-dom"]&&!packageJson.devDependencies["react-dom"],reactVersion=packageJson.dependencies.react,packagesToResolve=[...["react-native-safe-area-context","@react-native-async-storage/async-storage","@react-native-community/datetimepicker","@react-native-community/slider","react-native-reanimated","react-native-gesture-handler","@gorhom/bottom-sheet","react-native-svg"].filter(dep=>!packageJson.dependencies[dep]&&!packageJson.devDependencies[dep]),"@storybook/addon-ondevice-controls","@storybook/addon-ondevice-actions","@storybook/react-native"],packagesWithFixedVersion=[],versionedPackages=await packageManager.getVersionedPackages(packagesToResolve),babelDependencies=await getBabelDependencies(packageManager,packageJson),packages=[];packages.push(...babelDependencies),packages.push(...packagesWithFixedVersion),packages.push(...versionedPackages),missingReactDom&&reactVersion&&packages.push(`react-dom@${reactVersion}`),await packageManager.addDependencies({...npmOptions,packageJson},packages),packageManager.addScripts({"storybook-generate":"sb-rn-get-stories"}),await copyTemplateFiles({packageManager,renderer:"react-native",language:SupportedLanguage.TYPESCRIPT_4_9,destination:".storybook"});},REACT_NATIVE_default=generator8;var generator9=async(packageManager,npmOptions,options)=>{let monorepoRootPath=join(__dirname,"..","..","..","..","..",".."),extraMain=options.linkable?{webpackFinal:`%%(config) => {
       // add monorepo root as a valid directory to import modules from
       config.resolve.plugins.forEach((p) => {
         if (Array.isArray(p.appSrcs)) {
@@ -124,10 +124,13 @@ The project types currently supported by Storybook are:
       
       ${import_picocolors2.default.inverse(" export {default} from './.storybook'; ")}
       
-      2. Enable transformer.unstable_allowRequireContext in your metro config
+      2. Wrap your metro config with the withStorybook enhancer function like this: 
       
-      For a more detailed guide go to:
-      ${import_picocolors2.default.cyan("https://github.com/storybookjs/react-native#existing-project")}
+      ${import_picocolors2.default.inverse(" const withStorybook = require('@storybook/react-native/metro/withStorybook'); ")}
+      ${import_picocolors2.default.inverse(" module.exports = withStorybook(defaultConfig); ")}
+
+      For more details go to:
+      ${import_picocolors2.default.cyan("https://github.com/storybookjs/react-native#getting-started")}
       
       Then to run your Storybook, type:
 

package/dist/index.cjs

@@ -57,7 +57,7 @@
           */ 
           function getAbsolutePath(value: string): any {
             return dirname(require.resolve(join(value, 'package.json')))
-          }`]:[];await configureMain({framework:{name:frameworkInclude,options:options.framework||{}},prefixes,storybookConfigFolder,addons:shouldApplyRequireWrapperOnPackageNames?addons.map(addon=>applyRequireWrapper(addon)):addons,extensions,language,...staticDir?{staticDirs:[(0,import_node_path2.join)("..",staticDir)]}:null,...extraMain,...type!=="framework"?{core:{builder:builderInclude}}:{}})}if(await configurePreview({frameworkPreviewParts,storybookConfigFolder,language,rendererId}),addScripts&&await packageManager.addStorybookCommandInScripts({port:6006}),addComponents){let templateLocation=hasFrameworkTemplates(framework)?framework:rendererId;if(!templateLocation)throw new Error(`Could not find template location for ${framework} or ${rendererId}`);await(0,import_cli3.copyTemplateFiles)({renderer:templateLocation,packageManager,language,destination:componentsDestinationPath,commonAssetsDir:(0,import_node_path2.join)(getCliDir(),"rendererAssets","common")})}}function getCliDir(){return(0,import_node_path2.dirname)(require.resolve("create-storybook/package.json"))}var generator=async(packageManager,npmOptions,options,commandOptions)=>{let angularJSON=new import_cli7.AngularJSON;if(!angularJSON.projects||angularJSON.projects&&Object.keys(angularJSON.projects).length===0)throw new Error("Storybook was not able to find any projects in your angular.json file. Are you sure this is an Angular CLI project?");if(angularJSON.projectsWithoutStorybook.length===0)throw new Error("Every project in your workspace is already set up with Storybook. There is nothing to do!");let angularProjectName=await angularJSON.getProjectName();(0,import_common2.commandLog)(`Adding Storybook support to your "${angularProjectName}" project`);let angularProject=angularJSON.getProjectSettingsByName(angularProjectName);if(!angularProject)throw new Error(`Somehow we were not able to retrieve the "${angularProjectName}" project in your angular.json file. This is likely a bug in Storybook, please file an issue.`);let{root,projectType}=angularProject,{projects}=angularJSON,useCompodoc=commandOptions?.yes?!0:await(0,import_cli7.promptForCompoDocs)(),storybookFolder=root?`${root}/.storybook`:".storybook";angularJSON.addStorybookEntries({angularProjectName,storybookFolder,useCompodoc,root}),angularJSON.write(),await baseGenerator(packageManager,npmOptions,{...options,builder:import_cli6.CoreBuilder.Webpack5,...useCompodoc&&{frameworkPreviewParts:{prefix:import_cli7.compoDocPreviewPrefix}}},"angular",{extraAddons:["@storybook/addon-onboarding"],...useCompodoc&&{extraPackages:["@compodoc/compodoc","@storybook/addon-docs"]},addScripts:!1,componentsDestinationPath:root?`${root}/src/stories`:void 0,storybookConfigFolder:storybookFolder,webpackCompiler:()=>{}},"angular"),Object.keys(projects).length===1&&packageManager.addScripts({storybook:`ng run ${angularProjectName}:storybook`,"build-storybook":`ng run ${angularProjectName}:build-storybook`});let projectTypeValue=projectType||"application";projectTypeValue!=="application"&&projectTypeValue!=="library"&&(projectTypeValue="application");let templateDir=(0,import_node_path3.join)(getCliDir(),"templates","angular",projectTypeValue);return templateDir&&(0,import_cli8.copyTemplate)(templateDir,root||void 0),{projectName:angularProjectName,configDir:storybookFolder}},ANGULAR_default=generator;var import_cli9=require("storybook/internal/cli");var generator2=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,{...options,builder:import_cli9.CoreBuilder.Webpack5},"ember",{staticDir:"dist"},"ember")},EMBER_default=generator2;var import_cli10=require("storybook/internal/cli");var generator3=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"html",{webpackCompiler:({builder})=>builder===import_cli10.CoreBuilder.Webpack5?"swc":void 0})},HTML_default=generator3;var import_node_fs=require("fs"),import_node_path4=require("path"),import_cli11=require("storybook/internal/cli");var generator4=async(packageManager,npmOptions,options)=>{let staticDir;(0,import_node_fs.existsSync)((0,import_node_path4.join)(process.cwd(),"public"))&&(staticDir="public"),await baseGenerator(packageManager,npmOptions,{...options,builder:import_cli11.CoreBuilder.Webpack5},"react",{staticDir,extraAddons:["@storybook/addon-onboarding"],webpackCompiler:({builder})=>{}},"nextjs")},NEXTJS_default=generator4;var import_cli12=require("storybook/internal/cli");var generator5=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"preact",{webpackCompiler:({builder})=>builder===import_cli12.CoreBuilder.Webpack5?"swc":void 0})},PREACT_default=generator5;var generator6=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"qwik",{},"qwik")},QWIK_default=generator6;var import_cli13=require("storybook/internal/cli"),import_cli14=require("storybook/internal/cli");var generator7=async(packageManager,npmOptions,options)=>{let extraPackages=await(0,import_cli13.detectLanguage)(packageManager)===import_cli14.SupportedLanguage.JAVASCRIPT?["prop-types"]:[];await baseGenerator(packageManager,npmOptions,options,"react",{extraPackages,webpackCompiler:({builder})=>builder===import_cli14.CoreBuilder.Webpack5?"swc":void 0,extraAddons:["@storybook/addon-onboarding"]})},REACT_default=generator7;var import_cli15=require("storybook/internal/cli"),import_cli16=require("storybook/internal/cli"),generator8=async(packageManager,npmOptions)=>{let packageJson=await packageManager.retrievePackageJson(),missingReactDom=!packageJson.dependencies["react-dom"]&&!packageJson.devDependencies["react-dom"],reactVersion=packageJson.dependencies.react,packagesToResolve=[...["react-native-safe-area-context","@react-native-async-storage/async-storage","@react-native-community/datetimepicker","@react-native-community/slider"].filter(dep=>!packageJson.dependencies[dep]&&!packageJson.devDependencies[dep]),"@storybook/addon-ondevice-controls","@storybook/addon-ondevice-actions","@storybook/react-native"],packagesWithFixedVersion=[],versionedPackages=await packageManager.getVersionedPackages(packagesToResolve),babelDependencies=await(0,import_cli15.getBabelDependencies)(packageManager,packageJson),packages=[];packages.push(...babelDependencies),packages.push(...packagesWithFixedVersion),packages.push(...versionedPackages),missingReactDom&&reactVersion&&packages.push(`react-dom@${reactVersion}`),await packageManager.addDependencies({...npmOptions,packageJson},packages),packageManager.addScripts({"storybook-generate":"sb-rn-get-stories"}),await(0,import_cli15.copyTemplateFiles)({packageManager,renderer:"react-native",language:import_cli16.SupportedLanguage.TYPESCRIPT_3_8,destination:".storybook"})},REACT_NATIVE_default=generator8;var import_node_fs2=require("fs"),import_node_path5=require("path"),import_cli17=require("storybook/internal/cli"),import_semver=__toESM(require("semver"),1),import_ts_dedent3=require("ts-dedent");var generator9=async(packageManager,npmOptions,options)=>{let monorepoRootPath=(0,import_node_path5.join)(__dirname,"..","..","..","..","..",".."),extraMain=options.linkable?{webpackFinal:`%%(config) => {
+          }`]:[];await configureMain({framework:{name:frameworkInclude,options:options.framework||{}},prefixes,storybookConfigFolder,addons:shouldApplyRequireWrapperOnPackageNames?addons.map(addon=>applyRequireWrapper(addon)):addons,extensions,language,...staticDir?{staticDirs:[(0,import_node_path2.join)("..",staticDir)]}:null,...extraMain,...type!=="framework"?{core:{builder:builderInclude}}:{}})}if(await configurePreview({frameworkPreviewParts,storybookConfigFolder,language,rendererId}),addScripts&&await packageManager.addStorybookCommandInScripts({port:6006}),addComponents){let templateLocation=hasFrameworkTemplates(framework)?framework:rendererId;if(!templateLocation)throw new Error(`Could not find template location for ${framework} or ${rendererId}`);await(0,import_cli3.copyTemplateFiles)({renderer:templateLocation,packageManager,language,destination:componentsDestinationPath,commonAssetsDir:(0,import_node_path2.join)(getCliDir(),"rendererAssets","common")})}}function getCliDir(){return(0,import_node_path2.dirname)(require.resolve("create-storybook/package.json"))}var generator=async(packageManager,npmOptions,options,commandOptions)=>{let angularJSON=new import_cli7.AngularJSON;if(!angularJSON.projects||angularJSON.projects&&Object.keys(angularJSON.projects).length===0)throw new Error("Storybook was not able to find any projects in your angular.json file. Are you sure this is an Angular CLI project?");if(angularJSON.projectsWithoutStorybook.length===0)throw new Error("Every project in your workspace is already set up with Storybook. There is nothing to do!");let angularProjectName=await angularJSON.getProjectName();(0,import_common2.commandLog)(`Adding Storybook support to your "${angularProjectName}" project`);let angularProject=angularJSON.getProjectSettingsByName(angularProjectName);if(!angularProject)throw new Error(`Somehow we were not able to retrieve the "${angularProjectName}" project in your angular.json file. This is likely a bug in Storybook, please file an issue.`);let{root,projectType}=angularProject,{projects}=angularJSON,useCompodoc=commandOptions?.yes?!0:await(0,import_cli7.promptForCompoDocs)(),storybookFolder=root?`${root}/.storybook`:".storybook";angularJSON.addStorybookEntries({angularProjectName,storybookFolder,useCompodoc,root}),angularJSON.write(),await baseGenerator(packageManager,npmOptions,{...options,builder:import_cli6.CoreBuilder.Webpack5,...useCompodoc&&{frameworkPreviewParts:{prefix:import_cli7.compoDocPreviewPrefix}}},"angular",{extraAddons:["@storybook/addon-onboarding"],...useCompodoc&&{extraPackages:["@compodoc/compodoc","@storybook/addon-docs"]},addScripts:!1,componentsDestinationPath:root?`${root}/src/stories`:void 0,storybookConfigFolder:storybookFolder,webpackCompiler:()=>{}},"angular"),Object.keys(projects).length===1&&packageManager.addScripts({storybook:`ng run ${angularProjectName}:storybook`,"build-storybook":`ng run ${angularProjectName}:build-storybook`});let projectTypeValue=projectType||"application";projectTypeValue!=="application"&&projectTypeValue!=="library"&&(projectTypeValue="application");let templateDir=(0,import_node_path3.join)(getCliDir(),"templates","angular",projectTypeValue);return templateDir&&(0,import_cli8.copyTemplate)(templateDir,root||void 0),{projectName:angularProjectName,configDir:storybookFolder}},ANGULAR_default=generator;var import_cli9=require("storybook/internal/cli");var generator2=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,{...options,builder:import_cli9.CoreBuilder.Webpack5},"ember",{staticDir:"dist"},"ember")},EMBER_default=generator2;var import_cli10=require("storybook/internal/cli");var generator3=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"html",{webpackCompiler:({builder})=>builder===import_cli10.CoreBuilder.Webpack5?"swc":void 0})},HTML_default=generator3;var import_node_fs=require("fs"),import_node_path4=require("path"),import_cli11=require("storybook/internal/cli");var generator4=async(packageManager,npmOptions,options)=>{let staticDir;(0,import_node_fs.existsSync)((0,import_node_path4.join)(process.cwd(),"public"))&&(staticDir="public"),await baseGenerator(packageManager,npmOptions,{...options,builder:import_cli11.CoreBuilder.Webpack5},"react",{staticDir,extraAddons:["@storybook/addon-onboarding"],webpackCompiler:({builder})=>{}},"nextjs")},NEXTJS_default=generator4;var import_cli12=require("storybook/internal/cli");var generator5=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"preact",{webpackCompiler:({builder})=>builder===import_cli12.CoreBuilder.Webpack5?"swc":void 0})},PREACT_default=generator5;var generator6=async(packageManager,npmOptions,options)=>{await baseGenerator(packageManager,npmOptions,options,"qwik",{},"qwik")},QWIK_default=generator6;var import_cli13=require("storybook/internal/cli"),import_cli14=require("storybook/internal/cli");var generator7=async(packageManager,npmOptions,options)=>{let extraPackages=await(0,import_cli13.detectLanguage)(packageManager)===import_cli14.SupportedLanguage.JAVASCRIPT?["prop-types"]:[];await baseGenerator(packageManager,npmOptions,options,"react",{extraPackages,webpackCompiler:({builder})=>builder===import_cli14.CoreBuilder.Webpack5?"swc":void 0,extraAddons:["@storybook/addon-onboarding"]})},REACT_default=generator7;var import_cli15=require("storybook/internal/cli"),import_cli16=require("storybook/internal/cli"),generator8=async(packageManager,npmOptions)=>{let packageJson=await packageManager.retrievePackageJson(),missingReactDom=!packageJson.dependencies["react-dom"]&&!packageJson.devDependencies["react-dom"],reactVersion=packageJson.dependencies.react,packagesToResolve=[...["react-native-safe-area-context","@react-native-async-storage/async-storage","@react-native-community/datetimepicker","@react-native-community/slider","react-native-reanimated","react-native-gesture-handler","@gorhom/bottom-sheet","react-native-svg"].filter(dep=>!packageJson.dependencies[dep]&&!packageJson.devDependencies[dep]),"@storybook/addon-ondevice-controls","@storybook/addon-ondevice-actions","@storybook/react-native"],packagesWithFixedVersion=[],versionedPackages=await packageManager.getVersionedPackages(packagesToResolve),babelDependencies=await(0,import_cli15.getBabelDependencies)(packageManager,packageJson),packages=[];packages.push(...babelDependencies),packages.push(...packagesWithFixedVersion),packages.push(...versionedPackages),missingReactDom&&reactVersion&&packages.push(`react-dom@${reactVersion}`),await packageManager.addDependencies({...npmOptions,packageJson},packages),packageManager.addScripts({"storybook-generate":"sb-rn-get-stories"}),await(0,import_cli15.copyTemplateFiles)({packageManager,renderer:"react-native",language:import_cli16.SupportedLanguage.TYPESCRIPT_4_9,destination:".storybook"})},REACT_NATIVE_default=generator8;var import_node_fs2=require("fs"),import_node_path5=require("path"),import_cli17=require("storybook/internal/cli"),import_semver=__toESM(require("semver"),1),import_ts_dedent3=require("ts-dedent");var generator9=async(packageManager,npmOptions,options)=>{let monorepoRootPath=(0,import_node_path5.join)(__dirname,"..","..","..","..","..",".."),extraMain=options.linkable?{webpackFinal:`%%(config) => {
       // add monorepo root as a valid directory to import modules from
       config.resolve.plugins.forEach((p) => {
         if (Array.isArray(p.appSrcs)) {
@@ -104,10 +104,13 @@ The project types currently supported by Storybook are:
       
       ${import_picocolors2.default.inverse(" export {default} from './.storybook'; ")}
       
-      2. Enable transformer.unstable_allowRequireContext in your metro config
+      2. Wrap your metro config with the withStorybook enhancer function like this: 
       
-      For a more detailed guide go to:
-      ${import_picocolors2.default.cyan("https://github.com/storybookjs/react-native#existing-project")}
+      ${import_picocolors2.default.inverse(" const withStorybook = require('@storybook/react-native/metro/withStorybook'); ")}
+      ${import_picocolors2.default.inverse(" module.exports = withStorybook(defaultConfig); ")}
+
+      For more details go to:
+      ${import_picocolors2.default.cyan("https://github.com/storybookjs/react-native#getting-started")}
       
       Then to run your Storybook, type:
 

package/dist/index.js

@@ -1 +1 @@
-export { doInitiate as initiate } from './chunk-FYJF6JWK.js';
+export { doInitiate as initiate } from './chunk-KIUOXM7S.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-storybook",
-  "version": "8.4.0-alpha.3",
+  "version": "8.4.0-alpha.5",
   "description": "Initialize Storybook into your project",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook",
   "bugs": {
@@ -64,7 +64,7 @@
     "prettier": "^3.1.1",
     "prompts": "^2.4.0",
     "semver": "^7.3.7",
-    "storybook": "8.4.0-alpha.3",
+    "storybook": "8.4.0-alpha.5",
     "tiny-invariant": "^1.3.1",
     "ts-dedent": "^2.0.0"
   },