[Bug]: import statements in Source block not available as input to transform function
#25962 opened on Feb 8, 2024
Description
Describe the bug
My team manages a Lerna monorepo of React component packages. We use the Source block component in our MDX documentation. Due to the location of the stories.tsx files relative to the component itself, they are often imported like this:
import {Tabs} from '../tabs.react-component';
In our Source block, the "Show code" section shows something like this:
import { Tabs } from '../tabs.react-component';
<Tabs title="foo" content="bar" />
^ We have feedback from developers that the relative path import in the code block is not as helpful as if they were listed by the actual npm package they are shipped with, for example:
import { Tabs } from '@foo/react-tabs-component';
We have tested out using imports like this in storybook, and they DO work, but it breaks hot re-loading of the page (without having Lerna rebuild packages), so it diminishes my teams ability to maintain these components.
I attempted to use the transform option as part of the Source component, but quickly realized that the import statements in the code block are not provided as part of the actual string passed in as the first parameter (the second is StoryContext type).
Searching through the source code I couldn't easily determine where these import statements were being applied or if there was a way I could tie into some existing functionality to just modify the imports for our developers. I'm open to any suggestions as well. Thanks!
To Reproduce
No response
System
storybook@7.6.13
Additional context
No response