Storybook: Knobs not updating and sometimes not showing

[brett-east]

Describe the bug
I am using the knobs addon and only occasionally do the knobs appear in the 'Knobs' panel. When they do appear, changing them seems to have no affect on the component.

I know that they much be linked to the component as the default values are what show in the component that renders on the screen

To Reproduce
Steps to reproduce the behavior:
I have installed storybook and the knobs addon.
Add the decorator in the global config.
Import the addon in addons.js
Add the knobs within the story
Run yarn run storybook
View the storybook page

Expected behavior
I expect to see the knobs for each story in the knobs panel. I expect the content in the component to update in real time. The example sites that I've played around with do this.

Screenshots
This story has knobs

The knobs here are showing, but have not updated the component

Code snippets
// config.js

```import { configure, addDecorator, setAddon } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs/react';
...
addDecorator(
withKnobs({
escapeHTML: false
})
);
...
configure(loadStories, module);

// addons.js

import '@storybook/addon-knobs/register';

// story

import React from 'react';
import { storiesOf } from '@storybook/react';
import { CenterDecorator } from 'Storybook/decorators';
import {
object, text, select
} from '@storybook/addon-knobs/react';
import ContestCard from '..';

const group = 'ContestCard ownership';

const ownershipShape = {
id: 'bbe9b07c-4b75-4eb4-82b6-b330aa4a895d',
name: '3 Person Fast Best Ball',
entry: 5,
type: 'bestBall'
};

const sport = text('sport', 'NBA', group);
const id = text('id', ownershipShape.id, group);
const money = object('money', { cost: 5 }, group);
const type = text('type', ownershipShape.type, group);
const title = text('title', '3 Person Fast Best Ball', group);
const cardType = select('cardType', ['live', 'upcoming', 'results'], 'live', group);

storiesOf('Molecules/ContestCard', module)
.addDecorator(CenterDecorator)
.addWithJSX('props for Ownership', () => (
sport={sport}
id={id}
money={money}
type={type}
title={title}
cardType={cardType}
/>
));
```

System:

• OS: MacOS Mojave 10.14.2
• Device: Macbook Pro 2017
• Browser: Chrome 71.0.3578.98
• Framework: React
• Addons: Knobs
• Version: 4.1.11

Additional context
I have a custom webpack file, I'm not sure if that would matter, I need it for styles

[brett-east]

I believe I found my problem, I was declaring the knobs outside of the .add() in the upperscope of the story file.

WRONG:

const display = text('display', 'text here'); // outside of returned function
storiesOf('Button', module)
  .addDecorator(withKnobs)
  .add('with text', () => (
      <Button
        display={display}
        size="medium"
        layout="roundedSquareGreen"
        onClick={() => {}}
      />
    ));

CORRECT:

storiesOf('Button', module)
  .addDecorator(withKnobs)
  .add('with text', () => {
    const display = text('display', 'text here'); // inside of returned function
    return (
      <Button
        display={display}
        size="medium"
        layout="roundedSquareGreen"
        onClick={() => {}}
      />
    );
  });

Closing this issue.

[vsubbotskyy]

Thanks for following it up, I was making the same mistake

[jonwilliams-bluescape]

For those who would like to keep their knob configurations outside the add() function,
you can apply scope FTW:

import getStory from './story/foobar.js';
// ...
.add('foobar', () => {
    return getStory.apply(this);
}

// === foobar.js === 
export default function() { 
  const bg_color = color('Background', '#000033');
  return <MyComponent bg_color={ bg_color } />
}

[Andrey-Mayanov]

@brett-east , thank you for your an answer, you very helped me!

[jonwilliams-bluescape]

Update: Not sure if something changed, but I don't even need to use apply. Stick your knob setup inside a function, import it (if it's an external file), and call it:
return storyDom()

[viniarruda]

Thanks @brett-east