Merge pull request #19627 from storybookjs/tom/sb-831-only-generate-d…

…ocs-page-for-tagged Don't show docspage unless the user opts in
storybookjs · Oct 27, 2022 · 7ead98b · 7ead98b
2 parents 8009143 + 06907e1
commit 7ead98b
Show file tree

Hide file tree

Showing 30 changed files with 271 additions and 108 deletions.
diff --git a/code/addons/docs/template/stories/docspage/basic.stories.ts b/code/addons/docs/template/stories/docspage/basic.stories.ts
@@ -2,6 +2,7 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Button,
+  tags: ['docsPage'],
   args: { label: 'Click Me!' },
   parameters: { chromatic: { disable: true } },
 };

diff --git a/code/addons/docs/template/stories/docspage/description.stories.ts b/code/addons/docs/template/stories/docspage/description.stories.ts
@@ -6,6 +6,7 @@ export default {
   subcomponents: {
     Pre: globalThis.Components.Pre,
   },
+  tags: ['docsPage'],
   args: { label: 'Click Me!' },
   parameters: {
     docs: {

diff --git a/code/addons/docs/template/stories/docspage/extract-description.stories.ts b/code/addons/docs/template/stories/docspage/extract-description.stories.ts
@@ -2,6 +2,7 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Button,
+  tags: ['docsPage'],
   args: { label: 'Click Me!' },
   parameters: {
     docs: {

diff --git a/code/addons/docs/template/stories/docspage/iframe.stories.ts b/code/addons/docs/template/stories/docspage/iframe.stories.ts
@@ -2,6 +2,7 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Button,
+  tags: ['docsPage'],
   args: { label: 'Rendered in iframe' },
   parameters: {
     chromatic: { disable: true },

diff --git a/code/addons/docs/template/stories/docspage/overflow.stories.ts b/code/addons/docs/template/stories/docspage/overflow.stories.ts
@@ -2,6 +2,7 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Pre,
+  tags: ['docsPage'],
   args: {
     text: 'Demonstrates overflow',
     style: { width: 2000, height: 500, background: 'hotpink' },

diff --git a/code/addons/docs/template/stories/docspage/override.stories.ts b/code/addons/docs/template/stories/docspage/override.stories.ts
@@ -15,6 +15,7 @@ const Override = () => 'overridden';
 
 export default {
   component: globalThis.Components.Button,
+  tags: ['docsPage'],
   args: { label: 'Click Me!' },
   parameters: {
     chromatic: { disable: true },

diff --git a/code/addons/docs/template/stories/docspage/source.stories.ts b/code/addons/docs/template/stories/docspage/source.stories.ts
@@ -2,6 +2,7 @@ import globalThis from 'global';
 
 export default {
   component: globalThis.Components.Button,
+  tags: ['docsPage'],
   args: { label: 'Click Me!' },
   parameters: { chromatic: { disable: true } },
 };

diff --git a/code/e2e-tests/addon-actions.spec.ts b/code/e2e-tests/addon-actions.spec.ts
@@ -13,7 +13,7 @@ test.describe('addon-actions', () => {
   test('should trigger an action', async ({ page }) => {
     const sbPage = new SbPage(page);
 
-    await sbPage.navigateToStory('example-button', 'primary');
+    await sbPage.navigateToStory('example/button', 'primary');
     const root = sbPage.previewRoot();
     const button = root.locator('button', { hasText: 'Button' });
     await button.click();

diff --git a/code/e2e-tests/addon-backgrounds.spec.ts b/code/e2e-tests/addon-backgrounds.spec.ts
@@ -13,7 +13,7 @@ test.describe('addon-backgrounds', () => {
   test('should have a dark background', async ({ page }) => {
     const sbPage = new SbPage(page);
 
-    await sbPage.navigateToStory('example-button', 'primary');
+    await sbPage.navigateToStory('example/button', 'primary');
     await sbPage.selectToolbar('[title="Change the background of the preview"]', '#dark');
 
     await expect(sbPage.getCanvasBodyElement()).toHaveCSS('background-color', 'rgb(51, 51, 51)');
@@ -22,7 +22,7 @@ test.describe('addon-backgrounds', () => {
   test('should apply a grid', async ({ page }) => {
     const sbPage = new SbPage(page);
 
-    await sbPage.navigateToStory('example-button', 'primary');
+    await sbPage.navigateToStory('example/button', 'primary');
     await sbPage.selectToolbar('[title="Apply a grid to the preview"]');
 
     await expect(sbPage.getCanvasBodyElement()).toHaveCSS('background-image', /linear-gradient/);

diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts
@@ -10,7 +10,7 @@ test.describe('addon-controls', () => {
     const sbPage = new SbPage(page);
     await sbPage.waitUntilLoaded();
 
-    await sbPage.navigateToStory('example-button', 'primary');
+    await sbPage.navigateToStory('example/button', 'primary');
     await sbPage.viewAddonPanel('Controls');
 
     // Text input: Label

diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts
@@ -22,7 +22,7 @@ test.describe('addon-docs', () => {
     );
 
     const sbPage = new SbPage(page);
-    await sbPage.navigateToStory('example-button', 'docs');
+    await sbPage.navigateToStory('addons/docs/docspage/basic', 'docs');
     const root = sbPage.previewRoot();
     const toggles = root.locator('.docblock-code-toggle');
 

diff --git a/code/e2e-tests/addon-interactions.spec.ts b/code/e2e-tests/addon-interactions.spec.ts
@@ -23,7 +23,7 @@ test.describe('addon-interactions', () => {
 
     const sbPage = new SbPage(page);
 
-    await sbPage.navigateToStory('example-page', 'logged-in');
+    await sbPage.navigateToStory('example/page', 'logged-in');
     await sbPage.viewAddonPanel('Interactions');
 
     const welcome = await sbPage.previewRoot().locator('.welcome');

diff --git a/code/e2e-tests/addon-viewport.spec.ts b/code/e2e-tests/addon-viewport.spec.ts
@@ -14,7 +14,7 @@ test.describe('addon-viewport', () => {
     const sbPage = new SbPage(page);
 
     // Click on viewport button and select small mobile
-    await sbPage.navigateToStory('example-button', 'primary');
+    await sbPage.navigateToStory('example/button', 'primary');
     await sbPage.selectToolbar('[title="Change the size of the preview"]', '#mobile1');
 
     // Check that Button story is still displayed

diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts
@@ -1,5 +1,6 @@
-/* eslint-disable jest/no-standalone-expect */
+/* eslint-disable jest/no-standalone-expect, no-await-in-loop */
 import { expect, Page } from '@playwright/test';
+import { toId } from '@storybook/csf';
 
 export class SbPage {
   readonly page: Page;
@@ -8,15 +9,25 @@ export class SbPage {
     this.page = page;
   }
 
-  async navigateToStory(title: string, name: string) {
-    const titleId = title.replace(/ /g, '-').toLowerCase();
-    const storyId = name.replace(/ /g, '-').toLowerCase();
+  async openComponent(title: string, hasRoot = true) {
+    const parts = title.split('/');
+    for (let i = hasRoot ? 1 : 0; i < parts.length; i += 1) {
+      const parentId = toId(parts.slice(0, i + 1).join('/'));
+
+      const parentLink = this.page.locator(`#${parentId}`);
 
-    const titleLink = this.page.locator(`#${titleId}`);
-    if ((await titleLink.getAttribute('aria-expanded')) === 'false') {
-      await titleLink.click();
+      await expect(parentLink).toBeVisible();
+      if ((await parentLink.getAttribute('aria-expanded')) === 'false') {
+        await parentLink.click();
+      }
     }
+  }
+
+  async navigateToStory(title: string, name: string) {
+    await this.openComponent(title);
 
+    const titleId = toId(title);
+    const storyId = toId(name);
     const storyLinkId = `#${titleId}--${storyId}`;
     await this.page.waitForSelector(storyLinkId);
     const storyLink = this.page.locator(storyLinkId);

diff --git a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -135,7 +135,7 @@ export default async (
       // of the `previewAnnotationFilename` in the template works.
       const entryFilename = previewAnnotationFilename.startsWith('.')
         ? `${previewAnnotationFilename.replace(/(\w)(\/|\\)/g, '$1-')}-generated-config-entry.js`
-        : previewAnnotationFilename;
+        : `${previewAnnotationFilename}-generated-config-entry.js`;
       // NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM
       // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173
       virtualModuleMapping[entryFilename] = interpolate(entryTemplate, {

diff --git a/code/lib/client-api/src/ClientApi.ts b/code/lib/client-api/src/ClientApi.ts
@@ -360,7 +360,7 @@ Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.m
       return api;
     };
 
-    api.addParameters = ({ component, args, argTypes, ...parameters }: Parameters) => {
+    api.addParameters = ({ component, args, argTypes, tags, ...parameters }: Parameters) => {
       if (hasAdded)
         throw new Error(`You cannot add parameters after the first story for a kind.
 Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#can-no-longer-add-decoratorsparameters-after-stories`);
@@ -369,6 +369,7 @@ Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.m
       if (component) meta.component = component;
       if (args) meta.args = { ...meta.args, ...args };
       if (argTypes) meta.argTypes = { ...meta.argTypes, ...argTypes };
+      if (tags) meta.tags = tags;
       return api;
     };
 

diff --git a/code/lib/client-api/src/StoryStoreFacade.ts b/code/lib/client-api/src/StoryStoreFacade.ts
@@ -146,7 +146,7 @@ export class StoryStoreFacade<TFramework extends AnyFramework> {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const { default: defaultExport, __namedExportsOrder, ...namedExports } = fileExports;
     // eslint-disable-next-line prefer-const
-    let { id: componentId, title } = defaultExport || {};
+    let { id: componentId, title, tags: componentTags = [] } = defaultExport || {};
 
     const specifiers = (global.STORIES || []).map(
       (specifier: Store_NormalizedStoriesSpecifier & { importPathMatcher: string }) => ({
@@ -188,6 +188,30 @@ export class StoryStoreFacade<TFramework extends AnyFramework> {
       isExportStory(key, defaultExport)
     );
 
+    // NOTE: this logic is equivalent to the `extractStories` function of `StoryIndexGenerator`
+    const docsOptions = (global.DOCS_OPTIONS || {}) as DocsOptions;
+    if (docsOptions.enabled && storyExports.length) {
+      // We will use tags soon and this crappy filename test will go away
+      if (
+        fileName.match(/\.mdx$/) ||
+        (docsOptions.docsPage && componentTags.includes('docsPage'))
+      ) {
+        const name = docsOptions.defaultName;
+        const docsId = toId(componentId || title, name);
+        this.entries[docsId] = {
+          type: 'docs',
+          standalone: false,
+          id: docsId,
+          title,
+          name,
+          importPath: fileName,
+          ...(componentId && { componentId }),
+          tags: [...componentTags, 'docs'],
+          storiesImports: [],
+        };
+      }
+    }
+
     storyExports.forEach(([key, storyExport]: [string, any]) => {
       const exportName = storyNameFromExport(key);
       const id = storyExport.parameters?.__id || toId(componentId || title, exportName);
@@ -204,31 +228,10 @@ export class StoryStoreFacade<TFramework extends AnyFramework> {
           name,
           title,
           importPath: fileName,
-          componentId,
-          tags: [...(storyExport.tags || defaultExport.tags || []), 'story'],
+          ...(componentId && { componentId }),
+          tags: [...(storyExport.tags || componentTags), 'story'],
         };
       }
     });
-
-    // NOTE: this logic is equivalent to the `extractStories` function of `StoryIndexGenerator`
-    const docsOptions = (global.DOCS_OPTIONS || {}) as DocsOptions;
-    if (docsOptions.enabled && storyExports.length) {
-      // We will use tags soon and this crappy filename test will go away
-      if (fileName.match(/\.mdx$/) || docsOptions.docsPage) {
-        const name = docsOptions.defaultName;
-        const docsId = toId(componentId || title, name);
-        this.entries[docsId] = {
-          type: 'docs',
-          standalone: false,
-          id: docsId,
-          title,
-          name,
-          importPath: fileName,
-          componentId,
-          tags: [...(defaultExport.tags || []), 'docs'],
-          storiesImports: [],
-        };
-      }
-    }
   }
 }