Merge pull request #22235 from storybookjs/valentin/move-vue3-ts-stor…

…ies-to-separate-folder

Moved Vue3 TS Stories into a separate folder

code/e2e-tests/framework-nextjs.spec.ts

@@ -41,7 +41,7 @@ test.describe('Next.js', () => {
     test.beforeEach(async ({ page }) => {
       sbPage = new SbPage(page);
 
-      await sbPage.navigateToStory('frameworks/nextjs_default-js/Navigation', 'default');
+      await sbPage.navigateToStory('frameworks/nextjs-nextjs-default-js/Navigation', 'default');
       root = sbPage.previewRoot();
     });
 
@@ -73,7 +73,7 @@ test.describe('Next.js', () => {
     test.beforeEach(async ({ page }) => {
       sbPage = new SbPage(page);
 
-      await sbPage.navigateToStory('frameworks/nextjs_default-js/Router', 'default');
+      await sbPage.navigateToStory('frameworks/nextjs-nextjs-default-js/Router', 'default');
       root = sbPage.previewRoot();
     });
 

code/renderers/vue3/template/stories/OverrideArgs.stories.js → code/renderers/vue3/template/stories_vue3-vite-default-ts/OverrideArgs.stories.js

@@ -10,7 +10,7 @@ const icons = {
   },
 };
 
-export default {
+const meta = {
   component: OverrideArgs,
   argTypes: {
     // To show that other props are passed through
@@ -39,4 +39,6 @@ export default {
   },
 };
 
+export default meta;
+
 export const TestOne = {};

scripts/tasks/sandbox-parts.ts

@@ -278,17 +278,17 @@ function addStoriesEntry(mainConfig: ConfigFile, path: string) {
   mainConfig.setFieldValue(['stories'], [...stories, entry]);
 }
 
-function addVariantToFolder(variant?: string, folder = 'stories') {
+function getStoriesFolderWithVariant(variant?: string, folder = 'stories') {
   return variant ? `${folder}_${variant}` : folder;
 }
 
 // packageDir is eg 'renderers/react', 'addons/actions'
 async function linkPackageStories(
   packageDir: string,
   { mainConfig, cwd, linkInDir }: { mainConfig: ConfigFile; cwd: string; linkInDir?: string },
-  frameworkVariant?: string
+  variant?: string
 ) {
-  const storiesFolderName = frameworkVariant ? addVariantToFolder(frameworkVariant) : 'stories';
+  const storiesFolderName = variant ? getStoriesFolderWithVariant(variant) : 'stories';
   const source = join(CODE_DIRECTORY, packageDir, 'template', storiesFolderName);
   // By default we link `stories` directories
   //   e.g '../../../code/lib/store/template/stories' to 'template-stories/lib/store'
@@ -297,10 +297,7 @@ async function linkPackageStories(
   // The files must be linked in the cwd, in order to ensure that any dependencies they
   // reference are resolved in the cwd. In particular 'react' resolved by MDX files.
   const target = linkInDir
-    ? resolve(
-        linkInDir,
-        frameworkVariant ? addVariantToFolder(frameworkVariant, packageDir) : packageDir
-      )
+    ? resolve(linkInDir, variant ? getStoriesFolderWithVariant(variant, packageDir) : packageDir)
     : resolve(cwd, 'template-stories', packageDir);
 
   await ensureSymlink(source, target);
@@ -372,6 +369,10 @@ export const addStories: Task['run'] = async (
   updateStoriesField(mainConfig, detectLanguage(packageJson) === SupportedLanguage.JAVASCRIPT);
 
   const isCoreRenderer = template.expected.renderer.startsWith('@storybook/');
+
+  const sandboxSpecificStoriesFolder = key.replaceAll('/', '-');
+  const storiesVariantFolder = getStoriesFolderWithVariant(sandboxSpecificStoriesFolder);
+
   if (isCoreRenderer) {
     // Link in the template/components/index.js from store, the renderer and the addons
     const rendererPath = await workspacePath('renderer', template.expected.renderer);
@@ -387,6 +388,22 @@ export const addStories: Task['run'] = async (
       cwd,
       linkInDir: resolve(cwd, storiesPath),
     });
+
+    if (
+      await pathExists(
+        resolve(CODE_DIRECTORY, rendererPath, join('template', storiesVariantFolder))
+      )
+    ) {
+      await linkPackageStories(
+        rendererPath,
+        {
+          mainConfig,
+          cwd,
+          linkInDir: resolve(cwd, storiesPath),
+        },
+        sandboxSpecificStoriesFolder
+      );
+    }
   }
 
   const isCoreFramework = template.expected.framework.startsWith('@storybook/');
@@ -403,8 +420,7 @@ export const addStories: Task['run'] = async (
       });
     }
 
-    const frameworkVariant = key.split('/')[1];
-    const storiesVariantFolder = addVariantToFolder(frameworkVariant);
+    console.log({ sandboxSpecificStoriesFolder, storiesVariantFolder });
 
     if (
       await pathExists(
@@ -418,7 +434,7 @@ export const addStories: Task['run'] = async (
           cwd,
           linkInDir: resolve(cwd, storiesPath),
         },
-        frameworkVariant
+        sandboxSpecificStoriesFolder
       );
     }
   }