jeudi 25 mars 2021

React Storybook - Button pointing to story

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

enter image description here

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