Merge pull request #11 from ling1726/fix/story-name

fix: use `originalStoryFn.name` instead of `story` for import

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,10 @@ 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
+        // https://github.com/microsoft/fluentui-storybook-addons/issues/12
+        content: indexTsx.replace('STORY_NAME', context.originalStoryFn.name.replaceAll(' ', '')),
       },
       'package.json': {
         isBinary: false,