In-browser editable dynamic preview parameters

[allmarkedup]

ViewComponent previews allow setting dynamic values that be changed by editing query string parameters.

Lookbook could parse the parameters and generate fields in the UI so that these values could be edited live and the changes instantly reflected in the rendered component preview, much like the way StorybookJS controls work.

[kirillplatonov]

That would be awesome!

[allmarkedup]

Work on this is underway - there is a some cleaning up and testing still to do but it should be useable.

If anyone is interested in trying it out before a proper pre-release is ready then that would be great! Any feedback or bug reports at this point would be much appreciated. There is some documentation here which is hopefully enough to get up and running.

You can reference the branch in your Gemfile like so:

gem 'lookbook', git: 'git://github.com/allmarkedup/lookbook.git', branch: 'preview-params'

Update: This has now been included as an opt-in, feature-flagged experimental feature in the v0.4.5 release. See the docs on opting-in to experimental features for more info.

[nicolas-brousse]

👋 @allmarkedup happy to see this feature testable!

I did a quick test on one of our app. Output tab is updated, but the preview seems to not change. Maybe I missed something.
Params tab appear correctly with what I configured.

I'll try to take more time and check if I see somehting.

[allmarkedup]

Hey @nicolas-brousse - many thanks for giving this a spin.

I can't seem to replicate the issue you describe on my (very simple!) test app right now, so anything else you notice that could help me debug would be great. Is it possible to paste in the code for the preview example method you are trying?

Although it's odd that the output is updated but the preview is not. So doesn't sound like a problem with your example if I'm honest. I'll do some more digging myself and see if I can figure out what could potentially be causing it.

One thing which would be good to know - if you do a hard-refresh of the page after making changes to the field, does the preview render correctly on first load?

Thanks as always for your time on this :-)

[allmarkedup]

Hey again @nicolas-brousse - just to let you know, I want to try a different way of getting in-progress/experimental features into peoples hands to play with a little easier. So I've just released v0.4.5 that includes this @param functionality behind an 'experimental' feature flag.

If/when you do any further testing on it, you will just need to update the regular Gem as normal (i.e. don't use the preview-params branch any more) and then enable access to this feature in your config:

config.lookbook.experimental_features = ["params"]

If anything is unclear or you have any problems please just shout! :-)

[nicolas-brousse]

Hi @allmarkedup. I did a try in a new fresh app and it works perfectly 🤩.

Last week I did test on an Rails engine app. Maybe I missed something that broke your gem. I'll have a look later and let you know.
But if I did hard-refresh I still had the issue too.

Thanks for your work and responses :)

[allmarkedup]

@nicolas-brousse ok that is good to know, thank you! If you figure out what might be causing the issue in your app then let me know and I'll look into it if it is something that could be addressed at my end.

[nicolas-brousse]

Hi @allmarkedup I just tested with latest version on my custom admin gem and it works 🙂

I only tested text and select for now. But it looks good.

[allmarkedup]

@nicolas-brousse that's great, thank for letting me know. I'm just working on a v0.5.0 release that has some fixes and updates to the params stuff (and quite a bit of UI improvements too) which should be out before too long :-)

[nicolas-brousse]

@allmarkedup I did some try to 0.5.0 beta version on my gem and I had the same issue with param back. I discover that I previously set config.lookbook.preview_srcdoc = false, but don't remember why.

After removing this line, params works back.

Just asking, do you thing it is possible to use constants values for select param, instead re-write every values manually?
I may try to help for this if you think it is possible.

I often use constants in my components, and think it could be nice to don't have to write their values twice 😅

[allmarkedup]

Ok that is very helpful, thanks @nicolas-brousse - I've just released v0.5.0-beta.2 which should fix the issue you are seeing. If you are still having any problems just let me know.

Constants for the select params is not possible right now, but you can use the YARD reference tag (see OBJECT) syntax to refer to param definitions on other methods, so that you only need to define them once and can then reference them from other example methods. Does that help at all?

[allmarkedup]

@param support is now implemented without the feature flag in the latest v.0.5 release. If any bugs are found it would be great to get them opened in new issues 👍