Merge pull request #27708 from storybookjs/yann/add-tags-to-portable-stories

Portable Stories: Add tags to composed story

Author: shilman

code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts

@@ -23,6 +23,7 @@ describe('composeStory', () => {
       label: 'Hello World',
       primary: true,
     },
+    tags: ['metaTag'],
   };
 
   it('should compose project annotations in all module formats', () => {
@@ -40,15 +41,16 @@ describe('composeStory', () => {
   it('should return story with composed annotations from story, meta and project', () => {
     const decoratorFromProjectAnnotations = vi.fn((StoryFn) => StoryFn());
     const decoratorFromStoryAnnotations = vi.fn((StoryFn) => StoryFn());
-    setProjectAnnotations([
-      {
-        parameters: { injected: true },
-        globalTypes: {
-          locale: { defaultValue: 'en' },
-        },
-        decorators: [decoratorFromProjectAnnotations],
+    const projectAnnotations = {
+      parameters: { injected: true },
+      globalTypes: {
+        locale: { defaultValue: 'en' },
       },
-    ]);
+      decorators: [decoratorFromProjectAnnotations],
+      tags: ['projectTag'],
+    };
+
+    setProjectAnnotations(projectAnnotations);
 
     const Story: Story = {
       render: () => {},
@@ -57,13 +59,15 @@ describe('composeStory', () => {
         secondAddon: true,
       },
       decorators: [decoratorFromStoryAnnotations],
+      tags: ['storyTag'],
     };
 
     const composedStory = composeStory(Story, meta);
     expect(composedStory.args).toEqual({ ...Story.args, ...meta.args });
     expect(composedStory.parameters).toEqual(
       expect.objectContaining({ ...Story.parameters, ...meta.parameters })
     );
+    expect(composedStory.tags).toEqual(['dev', 'test', 'projectTag', 'metaTag', 'storyTag']);
 
     composedStory();
 

code/lib/preview-api/src/modules/store/csf/portable-stories.ts

@@ -172,6 +172,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
       parameters: story.parameters as Parameters,
       argTypes: story.argTypes as StrictArgTypes<TArgs>,
       play: playFunction as ComposedStoryPlayFn<TRenderer, TArgs> | undefined,
+      tags: story.tags,
     }
   );
 

code/lib/types/src/modules/composedStory.ts

@@ -6,6 +6,7 @@ import type {
   Renderer,
   StoryId,
   StrictArgTypes,
+  Tag,
 } from '@storybook/csf';
 
 import type {
@@ -56,6 +57,7 @@ export type ComposedStoryFn<
   storyName: string;
   parameters: Parameters;
   argTypes: StrictArgTypes<TArgs>;
+  tags: Tag[];
 };
 /**
  * Based on a module of stories, it returns all stories within it, filtering non-stories