Merge pull request #28649 from storybookjs/fix-new-story-snippet

Onboarding: Fix code snippet when story name differs from export name
storybookjs · Jul 19, 2024 · 2f38895 · 2f38895
2 parents 0c91f47 + e33dc8d
commit 2f38895
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/code/addons/onboarding/src/Onboarding.tsx b/code/addons/onboarding/src/Onboarding.tsx
@@ -75,6 +75,7 @@ export default function Onboarding({ api }: { api: API }) {
   const [createNewStoryForm, setCreateNewStoryForm] = useState<HTMLElement | null>();
   const [createdStory, setCreatedStory] = useState<{
     newStoryName: string;
+    newStoryExportName: string;
     sourceFileContent: string;
     sourceFileName: string;
   } | null>();
@@ -158,8 +159,8 @@ export default function Onboarding({ api }: { api: API }) {
   }
 
   const source = createdStory?.sourceFileContent;
-  const startIndex = source?.lastIndexOf(`export const ${createdStory?.newStoryName}`);
-  const snippet = source?.slice(startIndex);
+  const startIndex = source?.lastIndexOf(`export const ${createdStory?.newStoryExportName}`);
+  const snippet = source?.slice(startIndex).trim();
   const startingLineNumber = source?.slice(0, startIndex).split('\n').length;
 
   const steps: StepDefinition[] = [

diff --git a/code/core/src/core-events/data/save-story.ts b/code/core/src/core-events/data/save-story.ts
@@ -9,7 +9,9 @@ export interface SaveStoryResponsePayload {
   csfId: string;
   newStoryId?: string;
   newStoryName?: string;
+  newStoryExportName?: string;
   sourceFileContent?: string;
   sourceFileName?: string;
   sourceStoryName?: string;
+  sourceStoryExportName?: string;
 }
diff --git a/code/core/src/core-server/utils/save-story/save-story.ts b/code/core/src/core-server/utils/save-story/save-story.ts
@@ -111,9 +111,11 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf
           csfId,
           newStoryId,
           newStoryName,
+          newStoryExportName: name,
           sourceFileContent: code,
           sourceFileName,
           sourceStoryName,
+          sourceStoryExportName: storyName,
         },
         error: null,
       } satisfies ResponseData<SaveStoryResponsePayload>);