I want to create a button to put inside my components where I can link the related story in Storybook. This is not a hard task, but it's very time-consuming linking each story for each component.
Now my solution is this
export default function StorybookBadge({path, story = "plain"} : IShowInStorybookProps){
const openStorybook = () =>{
const storybookUrl = process.env.REACT_APP_STORYBOOK_URL || "http://localhost:6006"
window.open(`${storybookUrl}?path=/story/${path.replaceAll("/", "-").toLowerCase()}--${story}`)
}
return <div className='show-in-storybook' onClick={openStorybook}>
<img src={SVGLogo} />
</div>
}
and my folder structure is this
So in ActivateAccount
I would write
export default function ActivateAccount(props){
return <div>
<StorybookBadge path='Components/ActivateAccount' />
</div>
}
My question is: is there a way to catch the index.stories.tsx and grab the path with some reflection?
Aucun commentaire:
Enregistrer un commentaire