[Bug]: Onboarding fails when PascalCase story is created

[shilman]

Describe the bug

In the new onboarding when you save a story with a pascal-case export like FooBarBaz, the source code display fails

Reproduction link

N/A

Reproduction steps

1. Create an empty directory
2. npx storybook@latest init
3. Do the onboarding and save a new story as FooBarBaz

System

Any

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
To fix the issue with PascalCase story names in the onboarding process, follow these steps:

1. Update Onboarding.tsx:

   • Locate the startIndex calculation in the Onboarding component.
   • Modify the regex to handle PascalCase names correctly.

   const startIndex = source?.search(new RegExp(`export const ${createdStory?.newStoryName}`, 'i'));

2. Update HighlightElement.tsx:

   • Ensure the targetSelector correctly identifies PascalCase elements.

   const element = document.querySelector<HTMLElement>(targetSelector);

These changes should address the issue with PascalCase story names.

References

/code/addons/onboarding/src/Onboarding.tsx
/code/addons/onboarding/src/components/HighlightElement/HighlightElement.tsx
/code/addons/onboarding

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings