Merge pull request #32142 from storybookjs/valentin/init-storybook-without-mdx-stories

Init: Exclude mdx stories when docs feature isn't selected during init

Author: yannbf

code/lib/create-storybook/src/generators/NUXT/index.ts

@@ -2,6 +2,10 @@ import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
+  const extraStories = options.features.includes('docs') ? ['../components/**/*.mdx'] : [];
+
+  extraStories.push('../components/**/*.stories.@(js|jsx|ts|tsx|mdx)');
+
   await baseGenerator(
     packageManager,
     {
@@ -16,7 +20,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
       installFrameworkPackages: false,
       componentsDestinationPath: './components',
       extraMain: {
-        stories: ['../components/**/*.mdx', '../components/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+        stories: extraStories,
       },
     },
     'nuxt'

code/lib/create-storybook/src/generators/baseGenerator.ts

@@ -419,6 +419,7 @@ export async function baseGenerator(
         name: frameworkPackagePath,
         options: options.framework || {},
       },
+      features,
       frameworkPackage,
       prefixes,
       storybookConfigFolder,

code/lib/create-storybook/src/generators/configure.test.ts

@@ -26,6 +26,7 @@ describe('configureMain', () => {
         name: '@storybook/react-vite',
       },
       frameworkPackage: '@storybook/react-vite',
+      features: [],
     });
 
     const { calls } = vi.mocked(fsp.writeFile).mock;
@@ -38,7 +39,6 @@ describe('configureMain', () => {
       /** @type { import('@storybook/react-vite').StorybookConfig } */
       const config = {
         "stories": [
-          "../stories/**/*.mdx",
           "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
         ],
         "addons": [],
@@ -50,7 +50,7 @@ describe('configureMain', () => {
     `);
   });
 
-  it('should generate main.ts', async () => {
+  it('should generate main.ts with docs feature', async () => {
     await configureMain({
       language: SupportedLanguage.TYPESCRIPT,
       addons: [],
@@ -60,6 +60,7 @@ describe('configureMain', () => {
         name: '@storybook/react-vite',
       },
       frameworkPackage: '@storybook/react-vite',
+      features: ['docs'],
     });
 
     const { calls } = vi.mocked(fsp.writeFile).mock;
@@ -83,6 +84,39 @@ describe('configureMain', () => {
     `);
   });
 
+  it('should generate main.ts without docs feature', async () => {
+    await configureMain({
+      language: SupportedLanguage.TYPESCRIPT,
+      addons: [],
+      prefixes: [],
+      storybookConfigFolder: '.storybook',
+      framework: {
+        name: '@storybook/react-vite',
+      },
+      frameworkPackage: '@storybook/react-vite',
+      features: [],
+    });
+
+    const { calls } = vi.mocked(fsp.writeFile).mock;
+    const [mainConfigPath, mainConfigContent] = calls[0];
+
+    expect(mainConfigPath).toEqual('./.storybook/main.ts');
+    expect(mainConfigContent).toMatchInlineSnapshot(`
+      "import type { StorybookConfig } from '@storybook/react-vite';
+
+      const config: StorybookConfig = {
+        "stories": [
+          "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+        ],
+        "addons": [],
+        "framework": {
+          "name": "@storybook/react-vite"
+        }
+      };
+      export default config;"
+    `);
+  });
+
   it('should handle resolved paths in pnp', async () => {
     await configureMain({
       language: SupportedLanguage.JAVASCRIPT,
@@ -96,6 +130,7 @@ describe('configureMain', () => {
         name: "%%path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))%%",
       },
       frameworkPackage: '@storybook/react-webpack5',
+      features: ['docs'],
     });
 
     const { calls } = vi.mocked(fsp.writeFile).mock;

code/lib/create-storybook/src/generators/configure.ts

@@ -5,6 +5,7 @@ import { dedent } from 'ts-dedent';
 
 import { SupportedLanguage } from '../../../../core/src/cli/project_types';
 import { logger } from '../../../../core/src/node-logger';
+import type { GeneratorFeature } from './types';
 
 interface ConfigureMainOptions {
   addons: string[];
@@ -14,6 +15,7 @@ interface ConfigureMainOptions {
   language: SupportedLanguage;
   prefixes: string[];
   frameworkPackage: string;
+  features: GeneratorFeature[];
   /**
    * Extra values for main.js
    *
@@ -42,34 +44,24 @@ const pathExists = async (path: string) => {
     .catch(() => false);
 };
 
-/**
- * We need to clean up the paths in case of pnp input:
- * `path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))` output:
- * `@storybook/react-webpack5`
- */
-const sanitizeFramework = (framework: string) => {
-  // extract either @storybook/<framework> or storybook-<framework>
-  const matches = framework.match(/(@storybook\/\w+(?:-\w+)*)|(storybook-(\w+(?:-\w+)*))/g);
-  if (!matches) {
-    return undefined;
-  }
-
-  return matches[0];
-};
-
 export async function configureMain({
   addons,
   extensions = ['js', 'jsx', 'mjs', 'ts', 'tsx'],
   storybookConfigFolder,
   language,
   frameworkPackage,
   prefixes = [],
+  features = [],
   ...custom
 }: ConfigureMainOptions) {
   const srcPath = resolve(storybookConfigFolder, '../src');
   const prefix = (await pathExists(srcPath)) ? '../src' : '../stories';
+  const stories = features.includes('docs') ? [`${prefix}/**/*.mdx`] : [];
+
+  stories.push(`${prefix}/**/*.stories.@(${extensions.join('|')})`);
+
   const config = {
-    stories: [`${prefix}/**/*.mdx`, `${prefix}/**/*.stories.@(${extensions.join('|')})`],
+    stories,
     addons,
     ...custom,
   };

code/lib/create-storybook/src/generators/types.ts

@@ -19,7 +19,7 @@ export type GeneratorOptions = {
   frameworkPreviewParts?: FrameworkPreviewParts;
   // skip prompting the user
   yes: boolean;
-  features: string[];
+  features: Array<GeneratorFeature>;
 };
 
 export interface FrameworkOptions {