diff --git a/addons/docs/package.json b/addons/docs/package.json index 8ea493ca5e23..1c12145fd388 100644 --- 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 index ae9de532bdb2..fc9e4f0ab26c 100644 --- 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, { 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 new file mode 100644 index 000000000000..a763f20505b3 --- /dev/null +++ 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`] = ` + + + + + +`; diff --git a/examples/angular-cli/src/stories/addons/docs/duplicate.stories.mdx b/examples/angular-cli/src/stories/addons/docs/duplicate.stories.mdx new file mode 100644 index 000000000000..e5c457c04083 --- /dev/null +++ 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'; + + + +# 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 + + + + + + + + + + + + diff --git a/yarn.lock b/yarn.lock index 1f45696f6f98..8bfbeec887e7 100644 --- 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 @@ -30639,6 +30640,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"