From abfc03cfc04507ed0ca74ca825fffe41a56fff89 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Fri, 5 Nov 2021 16:04:33 +0100 Subject: [PATCH 1/2] fix: use `originalStoryFn.name` instead of `story` for import This is a temporary workaround fo # Previously the addon used `context.story` as the name of the export for codoesandbox. However the below example shows how this value can be incorrect ```ts export const MyStory = () => {/* story */} MyStory.storyName = 'My custom story name' ``` This will break the export as the `index.ts` will include the following ```ts import * as ReactDOM from 'react-dom'; import { FluentProvider, webLightTheme } from '@fluentui/react-components'; import { My custom story as Example } from './example'; // // You can edit this example in "example.tsx". // ReactDOM.render( , document.getElementById('root'), ); ``` --- .../src/withCodeSandboxButton.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/storybook-addon-export-to-codesandbox/src/withCodeSandboxButton.ts b/storybook-addon-export-to-codesandbox/src/withCodeSandboxButton.ts index 6b76cba..0e82eef 100644 --- a/storybook-addon-export-to-codesandbox/src/withCodeSandboxButton.ts +++ b/storybook-addon-export-to-codesandbox/src/withCodeSandboxButton.ts @@ -32,7 +32,7 @@ const getDependencies = (fileContent: string, requiredDependencies: PackageDepen return dependencies; }; -const displayToolState = (selector: string, context: any) => { +const displayToolState = (selector: string, context: StoryContext) => { let exportLink = document.createElement('a'); exportLink.style.setProperty('position', 'absolute'); exportLink.style.setProperty('bottom', '0'); @@ -85,6 +85,7 @@ const displayToolState = (selector: string, context: any) => { ); return false; } + console.log(context); const defaultFileToPreview = encodeURIComponent('/example.tsx'); const codeSandboxParameters = getParameters({ @@ -99,7 +100,9 @@ const displayToolState = (selector: string, context: any) => { }, 'index.tsx': { isBinary: false, - content: indexTsx.replace('STORY_NAME', context.story.replaceAll(' ', '')), + // use originalStoryFn because users can override the `storyName` property. + // We need the name of the exported function, not the actual story + content: indexTsx.replace('STORY_NAME', context.originalStoryFn.name.replaceAll(' ', '')), }, 'package.json': { isBinary: false, From c1e1b9d03dcfe64e3ac7cc675fc5d559de9f5ec0 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Fri, 5 Nov 2021 16:11:10 +0100 Subject: [PATCH 2/2] add issue link --- .../src/withCodeSandboxButton.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/storybook-addon-export-to-codesandbox/src/withCodeSandboxButton.ts b/storybook-addon-export-to-codesandbox/src/withCodeSandboxButton.ts index 0e82eef..affc358 100644 --- a/storybook-addon-export-to-codesandbox/src/withCodeSandboxButton.ts +++ b/storybook-addon-export-to-codesandbox/src/withCodeSandboxButton.ts @@ -102,6 +102,7 @@ const displayToolState = (selector: string, context: StoryContext) => { isBinary: false, // use originalStoryFn because users can override the `storyName` property. // We need the name of the exported function, not the actual story + // https://github.com/microsoft/fluentui-storybook-addons/issues/12 content: indexTsx.replace('STORY_NAME', context.originalStoryFn.name.replaceAll(' ', '')), }, 'package.json': {