Merge pull request storybookjs#15501 from dexster/Allow_duplicate_sto…

…ries Addon-docs/Angular: Add unique id to Angular stories
abue9 · Jul 9, 2021 · c884f2e · c884f2e
2 parents a24616a + 9db2e2b
commit c884f2e
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 1 deletion.
diff --git a/addons/docs/package.json b/addons/docs/package.json
@@ -89,6 +89,7 @@
     "js-string-escape": "^1.0.1",
     "loader-utils": "^2.0.0",
     "lodash": "^4.17.20",
+    "nanoid": "^3.1.23",
     "p-limit": "^3.1.0",
     "prettier": "~2.2.1",
     "prop-types": "^15.7.2",

diff --git a/addons/docs/src/frameworks/angular/prepareForInline.ts b/addons/docs/src/frameworks/angular/prepareForInline.ts
@@ -1,5 +1,6 @@
 import React from 'react';
 import pLimit from 'p-limit';
+import { nanoid } from 'nanoid';
 
 import { IStory, StoryContext } from '@storybook/angular';
 import { rendererFactory } from '@storybook/angular/renderer';
@@ -18,7 +19,7 @@ export const prepareForInline = (storyFn: StoryFn<IStory>, { id, parameters }: S
       }
 
       return limit(async () => {
-        const renderer = await rendererFactory.getRendererInstance(id, node);
+        const renderer = await rendererFactory.getRendererInstance(`${id}-${nanoid(10)}`, node);
         await renderer.render({
           forced: false,
           parameters,

diff --git a/examples/angular-cli/src/stories/addons/docs/__snapshots__/duplicate.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/__snapshots__/duplicate.stories.storyshot
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons/Docs/DuplicateStories Basic 1`] = `
+<storybook-wrapper>
+  <my-button
+    ng-reflect-is-disabled="false"
+    ng-reflect-label="Args test"
+  >
+    <button
+      class="btn-secondary btn-medium"
+      ng-reflect-ng-class="btn-secondary,btn-medium"
+    >
+      <img
+        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
+        width="100"
+      />
+       Args test
+
+    </button>
+  </my-button>
+</storybook-wrapper>
+`;
diff --git a/examples/angular-cli/src/stories/addons/docs/duplicate.stories.mdx b/examples/angular-cli/src/stories/addons/docs/duplicate.stories.mdx
@@ -0,0 +1,21 @@
+import {Story, Meta, Canvas} from '@storybook/addon-docs';
+import {DocButtonComponent} from "./doc-button/doc-button.component";
+import * as stories from './doc-button/doc-button.stories';
+
+<Meta title="Addons/Docs/DuplicateStories" component={DocButtonComponent} />
+
+# Duplicate stories
+
+Using the same component more than once. Note the imported story can only be used once and thereafter the links have to be used
+
+<Canvas>
+  <Story story={stories.Basic}/>
+</Canvas>
+
+<Canvas>
+  <Story id="addons-docs-duplicatestories--basic" />
+</Canvas>
+
+<Canvas>
+  <Story id="addons-docs-duplicatestories--basic" />
+</Canvas>
diff --git a/yarn.lock b/yarn.lock
@@ -5707,6 +5707,7 @@ __metadata:
     lit-html: ^2.0.0-rc.3
     loader-utils: ^2.0.0
     lodash: ^4.17.20
+    nanoid: ^3.1.23
     p-limit: ^3.1.0
     prettier: ~2.2.1
     prop-types: ^15.7.2
@@ -30641,6 +30642,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.1.23":
+  version: 3.1.23
+  resolution: "nanoid@npm:3.1.23"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: a3207f946e2db59f8095118d5c57615f217e7f8a743bdb83212e222bd263516dbd83db226675d9b8634ed928ff2019db96ca06825a391af4256b02f7bec4b443
+  languageName: node
+  linkType: hard
+
 "nanomatch@npm:^1.2.9":
   version: 1.2.13
   resolution: "nanomatch@npm:1.2.13"