Merge pull request #19750 from storybookjs/tom/sb-754-hmr-does-not-detect-addedremoved-stories

Sandboxes: Fix up stories entry to allow HMR

code/addons/docs/template/stories/docs2/Title.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="addons/docs/docs2/Yabbadabbadooo" />
+<Meta title="Yabbadabbadooo" />
 
 # Docs with title
 

code/addons/docs/template/stories/stories-mdx/basic.stories.mdx

@@ -1,24 +1,18 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import globalThis from 'global';
 
-<Meta title="addons/docs/stories-mdx/basic" component={globalThis.Components.Button} />
+<Meta component={globalThis.Components.Button} />
 
 # MDX Stories
 
 This file demonstrates defining stories inside MDX.
 
 <Canvas>
-  <Story
-    name="Primary"
-    args={{ label: 'Primary' }}
-  />
+  <Story name="Primary" args={{ label: 'Primary' }} />
 </Canvas>
 
 <ArgsTable story="^" />
 
 <Canvas>
-  <Story
-    name="Secondary"
-    args={{ label: 'Secondary' }}
-  />
+  <Story name="Secondary" args={{ label: 'Secondary' }} />
 </Canvas>

code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import globalThis from 'global';
 import * as Csf from './csf-in-mdx.stories.js';
 
-<Meta title="addons/docs/stories-mdx/csf-in-mdx" component={globalThis.Components.Button} />
+<Meta component={globalThis.Components.Button} />
 
 # Legacy CSF in MDX Stories
 

code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx

@@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import globalThis from 'global';
 
-<Meta title="addons/docs/stories-mdx/iframe" component={globalThis.Components.Button} />
+<Meta component={globalThis.Components.Button} />
 
 # MDX Stories
 

code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx

@@ -1,11 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import globalThis from 'global';
 
-<Meta
-  title="addons/docs/stories-mdx/play functions"
-  component={globalThis.Components.Button}
-  play={() => console.log('component play')}
-/>
+<Meta component={globalThis.Components.Button} play={() => console.log('component play')} />
 
 # MDX Play function Stories
 

code/lib/store/template/stories/title.stories.ts

@@ -4,7 +4,7 @@ import type { PlayFunctionContext } from '@storybook/types';
 
 export default {
   component: globalThis.Components.Pre,
-  title: 'lib/store/manual title',
+  title: 'manual title',
   args: { text: 'No content' },
 };
 

scripts/tasks/sandbox-parts.ts

@@ -230,6 +230,36 @@ function setSandboxViteFinal(mainConfig: ConfigFile) {
   );
 }
 
+
+
+// Update the stories field to ensure that no TS files
+// that are linked from the renderer are picked up in non-TS projects
+function updateStoriesField(mainConfig: ConfigFile, isJs: boolean) {
+  const stories = mainConfig.getFieldValue(['stories']) as string[];
+
+  // If the project is a JS project, let's make sure any linked in TS stories from the
+  // renderer inside src|stories are simply ignored.
+  const updatedStories = isJs
+    ? stories.map((specifier) => specifier.replace('js|jsx|ts|tsx', 'js|jsx'))
+    : stories;
+
+
+  mainConfig.setFieldValue(['stories'], [...updatedStories]);
+}
+
+// Add a stories field entry for the passed symlink
+function addStoriesEntry(mainConfig: ConfigFile, path: string) {
+  const stories = mainConfig.getFieldValue(['stories']) as string[];
+
+  const entry = {
+    directory: join('../template-stories', path),
+    titlePrefix: path,
+    files: '**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
+  };
+  
+  mainConfig.setFieldValue(['stories'], [...stories, entry]);
+}
+
 // packageDir is eg 'renderers/react', 'addons/actions'
 async function linkPackageStories(
   packageDir: string,
@@ -247,6 +277,8 @@ async function linkPackageStories(
     : resolve(cwd, 'template-stories', packageDir);
   await ensureSymlink(source, target);
 
+  if (!linkInDir) addStoriesEntry(mainConfig, packageDir)
+
   // Add `previewAnnotation` entries of the form
   //   './template-stories/lib/store/preview.[tj]s'
   // if the file <code>/lib/store/template/stories/preview.[jt]s exists
@@ -265,25 +297,6 @@ async function linkPackageStories(
   );
 }
 
-// Update the stories field to ensure that:
-//  a) no TS files that are linked from the renderer are picked up in non-TS projects
-//  b) files in ./template-stories are not matched by the default glob
-async function updateStoriesField(mainConfig: ConfigFile, isJs: boolean) {
-  const stories = mainConfig.getFieldValue(['stories']) as string[];
-
-  // If the project is a JS project, let's make sure any linked in TS stories from the
-  // renderer inside src|stories are simply ignored.
-  const updatedStories = isJs
-    ? stories.map((specifier) => specifier.replace('js|jsx|ts|tsx', 'js|jsx'))
-    : stories;
-
-  // FIXME: '*.@(mdx|stories.mdx|stories.tsx|stories.ts|stories.jsx|stories.js'
-  const linkedStories = join('..', 'template-stories', '**', '*.stories.@(js|jsx|ts|tsx|mdx)');
-  const linkedMdx = join('..', 'template-stories/addons/docs/docs2', '**', '*.@(mdx)');
-
-  mainConfig.setFieldValue(['stories'], [...updatedStories, linkedStories, linkedMdx]);
-}
-
 function addExtraDependencies({
   cwd,
   dryRun,
@@ -306,6 +319,7 @@ function addExtraDependencies({
   }
 }
 
+
 export const addStories: Task['run'] = async (
   { sandboxDir, template },
   { addon: extraAddons, dryRun, debug }
@@ -315,6 +329,14 @@ export const addStories: Task['run'] = async (
 
   const mainConfig = await readMainConfig({ cwd });
 
+  // Ensure that we match the right stories in the stories directory
+  const packageJson = await import(join(cwd, 'package.json'));
+  updateStoriesField(
+    mainConfig,
+    detectLanguage(packageJson) === SupportedLanguage.JAVASCRIPT
+  );
+
+
   // Link in the template/components/index.js from store, the renderer and the addons
   const rendererPath = await workspacePath('renderer', template.expected.renderer);
   await ensureSymlink(
@@ -322,7 +344,7 @@ export const addStories: Task['run'] = async (
     resolve(cwd, storiesPath, 'components')
   );
   addPreviewAnnotations(mainConfig, [`.${sep}${join(storiesPath, 'components')}`]);
-
+  
   // Add stories for the renderer. NOTE: these *do* need to be processed by the framework build system
   await linkPackageStories(rendererPath, {
     mainConfig,
@@ -369,13 +391,6 @@ export const addStories: Task['run'] = async (
     existingStories.map(async (packageDir) => linkPackageStories(packageDir, { mainConfig, cwd }))
   );
 
-  // Ensure that we match stories from the template-stories dir
-  const packageJson = await import(join(cwd, 'package.json'));
-  await updateStoriesField(
-    mainConfig,
-    detectLanguage(packageJson) === SupportedLanguage.JAVASCRIPT
-  );
-
   // Add some extra settings (see above for what these do)
   if (template.expected.builder === '@storybook/builder-webpack5')
     addEsbuildLoaderToStories(mainConfig);