Allow to control params from inside storybook

[dbartholomae]

At the moment, it seems that parameters and query need to be hardcoded in the story. It would be great if this could be done from the panel.

If there is interest, I'm happy to provide a PR.

[JesusTheHun]

Hi 👋 thanks for opening an issue. This has been requested a number of times, I would be happy to merge such a PR 🤘

[dbartholomae]

Thanks! I'll most likely be able to get it done over the next days. My current approach would be:

In the add-on panel, above the event log, display the routePath and text fields for all routeParams and searchParams that are set in the story. Below them, have a text field with the actual current location, and with the stringified router state. Add buttons to:

1. Populate the location text field based on the routePath and the text fields for routeParams and searchParams
2. push or replace the location

The panel than would communicate via the event channel with the preview to push or replace accordingly.

Here's a sketch:

What do you think?

[JesusTheHun]

Having free text fields is nice while working on a component. I would also consider the possibility to add or remove a search param. If you can do it, you could also offer the possibility to add route params for sub routes or descendant routes (inside a nested router).

Can you tell me why route & search params section don't have push/replace buttons?

Another point would be to allow presets, so one can, with one click, switch from one path to another. The idea would be to be able to test transitions and animations, with ease.

For the UX we can consider different options :

1. Panel vertically splitted, logs on the left, controls of the right.
2. Tabs, logs and controls
3. Panel horizontally splitted, controls on the top, logs at the bottom
4. Any suggestion?

We can decide the UX later, build something that makes you proud and have fun doing it!

Le jeu. 15 déc. 2022 à 22:35, Daniel Bartholomae @.***> a écrit :

Thanks! I'll most likely be able to get it done over the next days. My current approach would be:

In the add-on panel, above the event log, display the routePath and text fields for all routeParams and searchParams that are set in the story. Below them, have a text field with the actual current location, and with the stringified router state. Add buttons to:

1. Populate the location text field based on the routePath and the text fields for routeParams and searchParams
2. push or replace the location

The panel than would communicate via the event channel with the preview to push or replace accordingly.

Here's a sketch: [image: sketch] https://user-images.githubusercontent.com/3396992/207971866-1fe074ed-b428-491d-98fa-af00a6b42c98.png

What do you think?

— Reply to this email directly, view it on GitHub https://github.com/JesusTheHun/storybook-addon-react-router-v6/issues/14#issuecomment-1353737356, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAXCDWNWESH6D75BXCHQJTWNOFLJANCNFSM6AAAAAAS6TKHOA . You are receiving this because you commented.Message ID: @.*** com>

[dbartholomae]

If you can do it, you could also offer the possibility to add route params for sub routes or descendant routes (inside a nested router).

I might not get to nested routers in this first iteration :)

Can you tell me why route & search params section don't have push/replace buttons?

Seems the UI isn't self-explanatory yet: When you change the route or search param text fields, nothing happens yet. When you then click "populate location", it overwrites the content of the "Current location" text input. And only when you then press replace or push, does it actually change the location and rerender. This way, you can freely edit the "Current location" text box to achieve any kind of location you want, and the buttons and fields above it are just helpers to make that process easier.

Another point would be to allow presets, so one can, with one click, switch from one path to another.

Good idea! I think these would need to be configured in the params, so I would also leave that out for a first version, but it should be easy enough to add later.

For the UX we can consider different options : 1. Panel vertically splitted, logs on the left, controls of the right. 2. Tabs, logs and controls 3. Panel horizontally splitted, controls on the top, logs at the bottom 4. Any suggestion? We can decide the UX later, build something that makes you proud and have fun doing it!

Vertical split sounds appealing. I'll check @storybook/components to see what is easily achievable.

[dbartholomae]

I've experimented a bit this weekend, but am not that happy yet. I couldn't figure out why, but navigating to a new location leads to 3 navigation events being logged. Maybe it has to do with what happens in RouterLogger - I haven't fully understood the hook structure in there yet. If you want to take a look, I would love some feedback around this bug. I would work on the functionality of how to create the new locations after these are solved.

[JesusTheHun]

To prevent various race conditions, RouterLogger make sure the storybook event have been receive and check the location key before logger anything, so the order is preserved. To understand the reason you have 3 events logged, I suggest you track the re-renders.

Storybook can mount & unmount story components, leading to weird behavior sometimes.

[JesusTheHun]

Hi @dbartholomae , have you found some time to make progress on this ?

[dbartholomae]

Hi! Unfortunately, I don't think that I will be able to work on this in the forseeable future. I ran into trouble to untangle the way that the router was wrapped around the component and couldn't solve that after trying for a while. And now, the topic isn't top-of-mind for me and my team anymore.