feat(addon-controls): support query parameters

[yannbf]

Issue:

What I did

Add support for query parameters so that users can enter URLs which will directly change the props, like it works in knobs.

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[shilman]

Thanks for putting this together @yannbf! This def seems to be blocking a bunch of people from upgrading to args/controls. See #12291 for the original issue.

I was thinking that we add UI for this in the controls addon, but that we build the URL parsing/ejecting functionality into the args code itself.

WDYT @yannbf @tmeasday ?

[yannbf]

Thanks for putting this together @yannbf! This def seems to be blocking a bunch of people from upgrading to args/controls. See #12291 for the original issue.

I was thinking that we add UI for this in the controls addon, but that we build the URL parsing/ejecting functionality into the args code itself.

WDYT @yannbf @tmeasday ?

Could you elaborate a bit more?
Edit: no need to elaborate, I get it now 👌

[tmeasday]

Also another thing to note: we should ensure that the preview can read args from the URL also.

[yannbf]

Also another thing to note: we should ensure that the preview can read args from the URL also.

So.. to sum up:
1 - Make preview read args from URL so it works when ejecting
2 - Make controls update its ArgsTable with the data from URL
3 - Add "copy" functionality in controls so that it provides a url containing the args in parameters
4 - Make controls update the url that is used in the eject button, like knobs does

I see that knobs had a bunch of checks based on the knob type and also based on groups (like subsections of knobs). Would we have the same logic in controls?

[shilman]

2 - Make controls update its ArgsTable with the data from URL

This wouldn't be part of controls but just part of Storybook core. Args are a generic mechanism and controls are one of the apps that can use it (currently actions is the other addon that uses it, but we expect more in the future).

[gullerya]

Just to mention, that this 'deep-link' functionality enabler (for the controls addon) is much awaited!

[shilman]

closing in favor of #13803