Merge branch 'next' into docs-fix

code/lib/core-common/package.json

@@ -48,10 +48,6 @@
     "@storybook/csf-tools": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/types": "workspace:*",
-    "@types/find-cache-dir": "^3.2.1",
-    "@types/node": "^18.0.0",
-    "@types/node-fetch": "^2.6.4",
-    "@types/pretty-hrtime": "^1.0.0",
     "@yarnpkg/fslib": "2.10.3",
     "@yarnpkg/libzip": "2.3.0",
     "chalk": "^4.1.0",
@@ -78,9 +74,13 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
+    "@types/find-cache-dir": "^3.2.1",
     "@types/fs-extra": "^11.0.1",
     "@types/mock-fs": "^4.13.1",
+    "@types/node": "^18.0.0",
+    "@types/node-fetch": "^2.6.4",
     "@types/picomatch": "^2.3.0",
+    "@types/pretty-hrtime": "^1.0.0",
     "mock-fs": "^5.2.0",
     "slash": "^5.0.0",
     "type-fest": "~2.19",

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

@@ -7,4 +7,4 @@ export * from './normalizeProjectAnnotations';
 export * from './getValuesFromArgTypes';
 export * from './composeConfigs';
 export * from './stepRunners';
-export * from './testing-utils';
+export * from './portable-stories';

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

@@ -0,0 +1,146 @@
+import { describe, expect, vi, it } from 'vitest';
+import { composeStory, composeStories } from './portable-stories';
+
+// Most integration tests for this functionality are located under renderers/react
+describe('composeStory', () => {
+  const meta = {
+    title: 'Button',
+    parameters: {
+      firstAddon: true,
+    },
+    args: {
+      label: 'Hello World',
+      primary: true,
+    },
+  };
+
+  it('should return story with composed args and parameters', () => {
+    const Story = () => {};
+    Story.args = { primary: true };
+    Story.parameters = {
+      parameters: {
+        secondAddon: true,
+      },
+    };
+
+    const composedStory = composeStory(Story, meta);
+    expect(composedStory.args).toEqual({ ...Story.args, ...meta.args });
+    expect(composedStory.parameters).toEqual(
+      expect.objectContaining({ ...Story.parameters, ...meta.parameters })
+    );
+  });
+
+  it('should throw an error if Story is undefined', () => {
+    expect(() => {
+      // @ts-expect-error (invalid input)
+      composeStory(undefined, meta);
+    }).toThrow();
+  });
+
+  describe('Id of the story', () => {
+    it('is exposed correctly when composeStories is used', () => {
+      const module = {
+        default: {
+          title: 'Example/Button',
+        },
+        CSF3Primary: () => {},
+      };
+      const Primary = composeStory(module.CSF3Primary, module.default, {});
+      expect(Primary.id).toBe('example-button--csf-3-primary');
+    });
+    it('is exposed correctly when composeStory is used and exportsName is passed', () => {
+      const module = {
+        default: {
+          title: 'Example/Button',
+        },
+        CSF3Primary: () => {},
+      };
+      const Primary = composeStory(module.CSF3Primary, module.default, {}, {}, 'overwritten');
+      expect(Primary.id).toBe('example-button--overwritten');
+    });
+    it("is not unique when composeStory is used and exportsName isn't passed", () => {
+      const Primary = composeStory({ render: () => {} }, {});
+      expect(Primary.id).toContain('unknown');
+    });
+  });
+});
+
+describe('composeStories', () => {
+  const composeStoryFn = vi.fn((v) => v);
+  const defaultAnnotations = { render: () => '' };
+  it('should call composeStoryFn with stories', () => {
+    const composeStorySpy = vi.fn((v) => v);
+    const module = {
+      default: {
+        title: 'Button',
+      },
+      StoryOne: () => {},
+      StoryTwo: () => {},
+    };
+    const globalConfig = {};
+    composeStories(module, globalConfig, composeStorySpy);
+    expect(composeStorySpy).toHaveBeenCalledWith(
+      module.StoryOne,
+      module.default,
+      globalConfig,
+      'StoryOne'
+    );
+    expect(composeStorySpy).toHaveBeenCalledWith(
+      module.StoryTwo,
+      module.default,
+      globalConfig,
+      'StoryTwo'
+    );
+  });
+
+  it('should not call composeStoryFn for non-story exports', () => {
+    const composeStorySpy = vi.fn((v) => v);
+    const module = {
+      default: {
+        title: 'Button',
+        excludeStories: /Data/,
+      },
+      mockData: {},
+    };
+    composeStories(module, defaultAnnotations, composeStoryFn);
+    expect(composeStorySpy).not.toHaveBeenCalled();
+  });
+
+  describe('non-story exports', () => {
+    it('should filter non-story exports with excludeStories', () => {
+      const StoryModuleWithNonStoryExports = {
+        default: {
+          title: 'Some/Component',
+          excludeStories: /.*Data/,
+        },
+        LegitimateStory: () => 'hello world',
+        mockData: {},
+      };
+
+      const result = composeStories(
+        StoryModuleWithNonStoryExports,
+        defaultAnnotations,
+        composeStoryFn
+      );
+      expect(Object.keys(result)).not.toContain('mockData');
+    });
+
+    it('should filter non-story exports with includeStories', () => {
+      const StoryModuleWithNonStoryExports = {
+        default: {
+          title: 'Some/Component',
+          includeStories: /.*Story/,
+        },
+        LegitimateStory: () => 'hello world',
+        mockData: {},
+      };
+
+      const result = composeStories(
+        StoryModuleWithNonStoryExports,
+        defaultAnnotations,
+        composeStoryFn
+      );
+      expect(Object.keys(result)).not.toContain('mockData');
+    });
+  });
+});

code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts → code/lib/preview-api/src/modules/store/csf/portable-stories.ts

@@ -15,12 +15,12 @@ import type {
 } from '@storybook/types';
 
 import { HooksContext } from '../../../addons';
-import { composeConfigs } from '../composeConfigs';
-import { prepareContext, prepareStory } from '../prepareStory';
-import { normalizeStory } from '../normalizeStory';
-import { normalizeComponentAnnotations } from '../normalizeComponentAnnotations';
-import { getValuesFromArgTypes } from '../getValuesFromArgTypes';
-import { normalizeProjectAnnotations } from '../normalizeProjectAnnotations';
+import { composeConfigs } from './composeConfigs';
+import { prepareContext, prepareStory } from './prepareStory';
+import { normalizeStory } from './normalizeStory';
+import { normalizeComponentAnnotations } from './normalizeComponentAnnotations';
+import { getValuesFromArgTypes } from './getValuesFromArgTypes';
+import { normalizeProjectAnnotations } from './normalizeProjectAnnotations';
 
 let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = composeConfigs([]);