Question: Could routePath and routeParams be changed via Storybook controls?

[szymonnowak-st]

First of all, huge thanks for this add-on!

I was wondering if it's technically possible to update this add-on to be able to control route params via Storybook controls, or in any other way?

[JesusTheHun]

Hi, thanks for opening an issue !

It is technically possible to either add controls to the existing controls addon or to create an entire new panel. But due to react router limitation it won't be very advanced.

For example we could offer controls for declared routeParams, but only with free string. Ideally I would like to offer a select with all declared routes and text inputs if it contains dynamic segments.

Sadly this is not possible (or at least I don't know how it could be) and react router maintainers already have a lot in their plate to be able to accept PR for dev tools.

[szymonnowak-st]

Thanks for your reply!

I think that even providing a "simple" free text controls for routeParams would already be a huge improvement.

If you don't have time or don't want to work on it (totally understandable), could you give me some suggestions what/where/how should be modified, as I'm not familiar with Storybook internals.

[JesusTheHun]

May I ask what is your use case, specifically ?

I've already started the exploration for a solution. It's actually a bit challenging to do, because you need to hackaround about everything, so I can't tell you "what to do" or "how to do it" without solving the problem in the first place, which is 95% of the time spent.

[szymonnowak-st]

Sure! We're doing a large refactoring and some components were "promoted" to page components. E.g., we had a User component that had id prop, but now it's rendered by Route component and uses useParams to get this id.

In the previous version of react-router I could do something like:

<Route render={
  ({ match }) => <User id={match.params.id} />}
}/>

but it's not possible in v6. I could create a wrapper component like this:

const UserWrapper = () => {
  const { id } = useParams()

  return <User id={id} />
}

<Route element={<UserWrapper />} />

but it feels wrong to create such wrapper components for every page component just so that it's easier to create Storybook stories. Though maybe it's not 🤷

[JesusTheHun]

Your problem seems related to #5.

What I don't understand is how controls will help you with that ? I mean what's wrong with configuring the story directly with the params you want ?

export default {
  title: 'User',
  component: User,
  decorators: [withRouter],
  parameters: {
    reactRouter: {
      routePath: '/users/:userId',
      routeParams: { userId: '42' },
    }
  }
};

Doesn't this do exactly what you want to do ? Without manual intervention. The point of controls is to be able to poke around or to showcase, it doesn't feel right for your need.

[szymonnowak-st]

Well it does help enormously already as it is. Previously, we had a select control to select specific options that would set all the params used by this component. Now these components gets these params from the route instead.

Anyway, I can always convert a single story with a control to change the data used to visualize different cases, to multiple stories and set different route params for each.

[JesusTheHun]

Anyway, I can always convert a single story with a control to change the data used to visualize different cases, to multiple stories and set different route params for each.

That's what people usually do. Each story presents a use case for the component, hence the name. Tweaking around is more for dev purposes or showcasing, like I mentioned before. That's just my opinion btw.

[szymonnowak-st]

I'll do the same then. Thanks!