Storybook: reset knobs after switching to non-knob story

[shilman]

Issue by vidaaudrey
_Monday Sep 12, 2016 at 04:57 GMT_
_Originally opened as https://github.com/storybooks/storybook-addon-knobs/issues/23_

---

Just tried this addon, it's awesome. I've been looking for something like this for long time. Thanks for the great work!

A tiny problem is that when I switch to non-knob stories, the knob settings pane doesn't go away.

[shilman]

Comment by arunoda
_Monday Sep 12, 2016 at 05:07 GMT_

---

Yep. That's true.
I assume we can do a fix for that.

CC @roonyh

[shilman]

Comment by roonyh
_Monday Sep 12, 2016 at 05:28 GMT_

---

@vidaaudrey This will not happen when even the non-knob stories are also decorated with the withKnobs decorator.

Easiest way to decorate all the stories with the withKnobs decorator is adding it globally inside the .storybook/config.js file.

import { configure, addDecorator } from '@kadira/storybook';
import { withKnobs } from '@kadira/storybook-addon-knobs';

addDecorator(withKnobs);

function loadStories() {
  ...
}

configure(loadStories, module);

[shilman]

Comment by vidaaudrey
_Tuesday Sep 13, 2016 at 03:59 GMT_

---

@roonyh thanks very much for the quick answer. Will do that for now, but hope this could be fix as not all components need the decorator.

[shilman]

Comment by arunoda
_Tuesday Sep 13, 2016 at 05:34 GMT_

---

@vidaaudrey Actually, that decorator does nothing and that's the way we detect knobs.

[shilman]

Comment by arunoda
_Tuesday Sep 13, 2016 at 05:35 GMT_

---

@roonyh additionally can't we try using api.onStory on the panel and clear knobs?

[shilman]

Comment by roonyh
_Tuesday Sep 13, 2016 at 05:39 GMT_

---

@arunoda I tried that. Then "NO KNOBS" will be displayed for a moment when switching between stories before new knobs load. Looks a little ugly. I guess we can wait a bit with setTimeout to see if a new story with knobs will load before clearing current ones, but that feels messy.

[shilman]

Comment by arunoda
_Tuesday Sep 13, 2016 at 05:42 GMT_

---

@roonyh hmmm.
Could you start a branch on that. Let's give it a try.
setTimeout is definitely ugly.

[shilman]

Comment by roonyh
_Tuesday Sep 13, 2016 at 05:42 GMT_

---

@arunoda Sure.

[shilman]

Comment by roonyh
_Tuesday Sep 13, 2016 at 05:57 GMT_

---

@arunoda Pushed a new branch: clear-knobs-on-story

[shilman]

Comment by arunoda
_Tuesday Sep 13, 2016 at 05:58 GMT_

---

I'll try to see what we can do about this.

[shilman]

Comment by bholloway
_Thursday Oct 20, 2016 at 06:51 GMT_

---

Thanks for the workaround, it worked out well for me. I anticipate most of my stories will use knobs so no harm making it global.

However it prompts me to ask about story lifecycle...

I am in the unfortunate position where I have to monkey-patch certain dependencies for my component. And I need to do this based on the knobs values. Ideally I want to patch when I enter the story and un-patch when I leave the story.

Seems I can only access knobs values inside the add()ed render function. Right now I am idempotently patching in the render function, and not un-patching. Works for now but I can see problems long-term.

It seems like knobs is perhaps suffering similar lifecycle issues. Would this warrant some lifecycle hooks? setup() / teardown() sort of thing.

One would not want to encourage this sort of thing - the rest of the API is nicely functional. However some of us have a mutable legacy to deal with.

[shilman]

Comment by roonyh
_Thursday Oct 20, 2016 at 10:08 GMT_

---

@bholloway This is something I have given some thought while trying to cope with this problem.

Thanks for the suggestion of a story lifecycle. It does make sense. Storybook powered setup / teardown steps indeed would help knobs to get rid of the wrapper completely. Probably some other addons will benefit as well.

This will require some large changes in storybook. We are planing to start a discussion for storybook version 3 soon. We can develop on this suggestion there.

[ndelangen]

Anyone interested in contributing here? This is a valid bug, A PR would be super welcome! @roonyh @bholloway @vidaaudrey

I feel like https://github.com/storybooks/storybook/issues/791#issuecomment-294299589 is a perfectly fine solution!

[bholloway]

Sorry @ndelangen but sadly I am no longer using storybooks.

We became so deeply coupled with redux connect() that components were no longer pure and their APIs increasingly unstable. 😞 I think it is a certain pathology with redux that the team does not see.

Anyhow they voted to discontinue storybook. I am so shocked I feel the need to share my bad news.

[ndelangen]

@bholloway Does your team not separate smart/connected and dumb/presentational components?
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

Author of redux thinks it's a good idea. 😏

[ndelangen]

This will get fixed eventually, but it would be truly awesome if someone could help us with this 🙇 ?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[malykhinvi]

@ndelangen is that still valid bug in v5? If so, I would love to help with this one.

[malykhinvi]

@shilman, If I understand issue correctly, earlier knobs panel did not reset when switch from story that uses knobs to the one that doesn't use knobs. I tried to reproduce this issue, but failed (see attached gif)

I used current next branch with few adjustments https://github.com/storybooks/storybook/compare/next...malykhinvi:sb-791?expand=1

Can it be closed as "can not reproduce"?

[shilman]

i think it got fixed somewhere along the way