Hi!

href={text('href', undefined)}

works perfectly until I enter some text and delete it again. instead of removing my href prop it fills in an empty string. Which I don't really understand because, normally, react will remove the prop if its empty (right?).

So initially my component looks like

<Button .. />

and after editing href and deleting again it looks like

<Button href="" />

Is this a bug or do I use it the wrong way?

My component passes the href prop immediately to the attribute like this here:

href={href}

Cheers!

Literally copying and pasting from the docs:

Latest version of everything as of today.

Aha.
Had to add this line to get it to work, which is odd.
import '@kadira/storybook/addons';

Is that intention? I would expect that inside component I will receive Date object and not timestamp.

Right now when you are typing all updates are instantly sent. It doesn't work well when we deployed the react-native storybook to server (since it uses websockets). Actually sometimes it fails to catch up even when running locally. It would be cool to have an option to enable update throttling/batching.

If nobody can work on this, maybe we will have some time to do it next week, but that is a very slim chance.

I switched my storybook to using preact under the hood:

module.exports = {
  resolve: {
    alias: {
      'react': 'preact-compat',
      'react-dom': 'preact-compat'
    }
  }
};

.storybook/webpack.config

Storybook on it's own works great, but Knobs is throwing an exception:

Uncaught TypeError: Cannot read property 'removeListener' of null
    at WrapStory.componentWillUnmount (WrapStory.js:70)
    at unmountComponent (preact.js:388)
    at buildComponentFromVNode (preact.js:367)
    at idiff (preact.js:180)
    at diff (preact.js:159)
    at Object.render (preact.js:411)
    at Object.render$1 [as render] (preact-compat.js:156)
    at renderException (render.js:62)
    at renderPreview (render.js:137)
    at Array.renderUI (index.js:89)

Any ideas?

Every time I use the select knob object syntax I write it incorrectly, but it also is more limiting. IMO it makes more sense that the dropdown would show the keys and on selection pass the value.

Additionally, the current setup restricts what can be passed as the prop value to strings or numbers because object keys are more restricted. i.e. you can't have a function or an object in the key position, but you could in the value.

I realize this would be a breaking change.

When I add an empty array knob to a component, aka:

array('Label', []) it shows correctly in the knob panel that its empty, and the component receives the prop [], but when I add an error (say, hello, world, which converts to ['hello', 'world'] correctly) and then delete the string from the knob panel (back to "") my component receives [""], when it should receive [].

My solution for this is to create a patched component, but I believe this to be a bug.

Example workaround:

//patched-array.js
import {array} from '@storybook/addon-knobs';

const removeEmptyEntries = arr => {
	return arr.filter(e => Boolean(e));
};

const patchedArray = (name, value) => {
	return removeEmptyEntries(array(name, value));
};

export default patchedArray;

I understand stylistically the reason to put that transform on the property label, BUT with camelCase there is information contained with the name (the word-parts) that you are stomping out by applying this style. It's valid and helpful information for the developer working with the knobs:

It would be great if you reset this to display as the actual name of the property! Digging knobs, nice work!

Hi there - I'm trying to structure my stories as follows:

const defaultProps = {
  onChecked: action('onChecked'),
  checked: knobs.boolean('checked', false),
};

storiesOf('primitives.Switch')
  .addDecorator(knobs.withKnobs)
  .add('dark', () => {
    return (
      <CenteredView>
        <Switch
          {...defaultProps}
          />
      </CenteredView>
    );
  })
  .add('light', () => {
    return (
      <CenteredView>
        <Switch
          theme='light'
          {...defaultProps}
          />
      </CenteredView>
    );
  });

But I receive the following error: null is not an object (evaluating 'knobStore.get')

Is this a pattern you endorse, is there an alternative you'd propose to share props between components?

Thanks! 🙌

When a story decorated with withKnobs is mounted using enzyme following warning is logged.

VM13145:36 Warning: _renderNewRootComponent(): Render methods should be a pure function of
props and state; triggering nested component updates from render is not allowed. If
necessary, trigger nested updates in componentDidUpdate. Check the render method of 
WrapStory.

It's very strange. I can click on any date in the calendar, it gets highlighted shortly, even date in the input updates, but then it gets reverted back to today date. Not even time can be changed.

"@kadira/storybook": "^2.35.2",
"@kadira/storybook-addon-knobs": "^1.7.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",

How would I use the object knob to allow the user to enter dynamic props?

example:

import React from 'react';
import { storiesOf } from '@kadira/storybook';
import { object } from '@kadira/storybook-addon-knobs'
import MyComponent from 'path/to/MyComponent'

export default storiesOf(MyComponent.displayName)
    .add('additional props are passed through', () => (
        // the ...object is a syntax error - is there another way to do this?
        <MyComponent
            ...object({ "aria-hidden": true, "data-example": "foo" })
        />
    ))

because if props used in constructor so it didn't update during and after editing. But it will change if you refresh a page or select another story and come back. It turns out it looks like a bug

Error text:

ExceptionsManager.js:61 Expected a component class, got [object Object].

WHY

Because of this wrapper:
https://github.com/kadirahq/storybook-addon-knobs/blob/7757f1ef03880f3682cc836f5e88f52078f4be51/src/components/WrapStory.js#L54
WrapStory.js:

  render() {
    const { storyFn, context } = this.props;
    return <div>{storyFn(context)}</div>;
  }

react-native have no <div> component. It's only defined in WEB environment.

SOLUTION

remove wrapper and return storyFn result:

  render() {
    const { storyFn, context } = this.props;
-    return <div>{storyFn(context)}</div>;
+    return storyFn(context);
  }

problem statment

discussion

it looks like knobStore doesn't get instantiated before it's accessed. i looked through the docs, and i think that i'm registering then decorating the stories per the books! any tips would be great

Specifically: Controlled vs Uncontrolled

Seems to be the typical one-way, top-down props via knobs down into components.

Repro:

<textArea
          placeholder={text('placeholder', "Don't use placeholder text in place of labels")}
          value={text('value', '')}
          onChange={action('TextArea changed')}
          onFocus={action('TextArea focused')}
          onBlur={action('TextArea un-focused')}
          disabled={boolean('disabled', false)}
        />

Typing in a value won't change the knobs, because this isn't how React works (no two-way binding).

Just wondering if there is a better UX for this.
We tend to use Storybook and knobs to allow our designers to stress test UI components.
This behavior (while not the primary concern of Kadira 😄 ) can be a bit confusing.

Thanks all. Love the work you're doing.

It would be awesome if this addon could automatically create knobs based on propTypes. Atellier does this kind of work already, but the project's development looks frozen.

Here goes a work in progress project based on Atellier: https://github.com/lucasconstantino/storybook-addon-smart-knobs

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.

I am trying to implement a story book for a react component with a number of optional props that PropTypes.oneOf(['option1', 'option2', 'option3'])

I would like to be able to configure this knob so by default it doesn't pass in the prop. Is this possible and I'm missing an explanation?

Thanks!

It might be intended functionality, I haven't looked at the code yet.
But it would be nice if the knob values/settings would apply to story if story opened in Fullscreen mode.

It looks like others have had success getting knobs to work with react-native storybook, but when I include import '@kadira/storybook-addon-knobs/register'; in my addons.js file I get the error document is not defined -- due to a dependency on insert-css, which requires document.

Is there another way to register the addon that works with react native?

Mine is always on the bottom.

I know you can use the &panelRight=1&downPanel=kadirahq%2Fstorybook-addon-knobs URL params, but that gets pretty tedious copy and pasting.

since the color picker has an option to use RGBA, it should be supported as an output value for a knob

Hi,

Just encountered this issue. I use the knob like this:
sampleArray = array('Sample array', [2, 3]);
It works fine with that default value of [2, 3], but once you do a change it gets converted to e.g. this: ["2","3","4"] (if I added the 4), and my component doesn't work anymore cause it expects those to be numbers. I really really don't want to check and parseInt those strings inside my component.

Thanks!

Update: I just saw that the array knob does this:

...
value={knob.value.join(knob.separator)}
onChange={(e) => onChange(e.target.value.split(knob.separator))}
...

so, this would be a problem with any type other than string in the array.

Update 2: I can still do my own mapping after the knob of course, something like:

sampleArray = array('Sample array', [2, 3]).map(Number).filter(item => item);

Also, using

sampleArray = object('Sample array', [2, 3]);

seems to work just fine for my use case.

I've ben using a select knob and although it's working well there's a console warning saying Warning: Use thedefaultValueorvalueprops on <select> instead of settingselectedon <option>.

please see attached gif

not sure if this is a storybook or knobs bug.

browser: Safari 10, OSX 10.12
expected: reasonable not to push state before mouse is released?
actual: pushes on slider input, hitting browser limit

I am running a storybook instance and have the component displayed there, but knobs panel is not displayed. The source is very simple:

import React from 'react';
import {addDecorator, storiesOf} from '@storybook/react';
import HotelList from './HotelList';
import {withKnobs, text} from '@storybook/addon-knobs';

const stories = storiesOf('HotelList', module);
stories.addDecorator(withKnobs);
stories.add('No params', () =>
        <HotelList buttonTitle={text('Button title', 'Ok')}
                   loadResults={action('loadResults')}/>
);

No error is shown, console is clear of any messages, it displays the component with the default button text ('Ok'), but knobs panel is not visible anywhere to enable changing the button title.

What's strange, I use storybook at work, and the knobs panel is displayed there, but here on my computer at home, there is no knobs panel.

I tried something like this but I got an error

error:
TypeError: Cannot read property 'get' of null

my reducer:

Hi there,

This library fails to start for me.

ERROR in ./~/react-onclickoutside/index.js
Module not found: Error: Cannot resolve module 'create-react-class' in /projects/Pulls/redux-starter/node_modules/react-onclickoutside
 @ ./~/react-onclickoutside/index.js 290:6-293:8

This worked a few days ago. Looks like react-onclickoutside removed the use of the library?

https://github.com/Pomax/react-onclickoutside/releases/tag/v5.11.0

Pomax/react-onclickoutside#164

I have two stories that load two different components that both have a size property.
If I have a knob for setting that size like so:

// For component-1
size={knobs.number('size', 60)}

// For component-2
size={knobs.number('size', 12)}

When I load component-2, I'm seeing the component-1 value of 60.

This is on ReactNative, not sure if that makes a difference. Also, possibly related to this, there is a little bit of weirdness when jumping between stories with the knobs panel not re-rendering to represent the currently loaded stories knobs settings.

Thanks guys!

I've just included this addon in my storybook.

When I change stories using the navigation bar on the left, the "Knobs" interface is only updated if the story that is clicked on also contains knobs. If the story that I click on has no knobs defined, rather than the "No Knobs" interface appearing, the previous knobs panel remains on screen.

E.G.

Story 1 (with knobs)
Story 2 (without knobs)

How to reproduce the bug:

• click on Story 2 and the "Knobs" panel shows "No Knobs", as expected.
• click on Story 1 and the "Knobs" panel shows the knobs for Story 1, as expected.
• click on Story 2 again and the "Knobs" panel still shows the knobs for Story 1, when it should display "No Knobs".

I have noticed that my "Knobs" panel is at the bottom, next to "Action Logger", as opposed to in it's own separate panel (as appears in the documentation). Maybe this has something to do with it? I am not sure.

I should mention that I am using stories.addDecorator(withKnobs) to bind the knobs to my stories, and not the global method.

I'd like to dynamicly change some props after some actions, e.g. after click:

<MyComponent 
   opened={boolean("Opened", true)}
   onClick={() => boolean("Opened", false)}}
 />

As i see knobs value changed but, willReciveProps was not triggered.

Actually now i see only one way, create additional component-container for story book, but i hope should be more friendly way :)

TypeScript compilation error is thrown when using this addon.

node_modules/@kadira/storybook-addon-knobs/storybook-addon-knobs.d.ts:26:16 
'date', which lacks return-type annotation, implicitly has an 'any' return type.

Adding return type "Date" or "any" resolves this issue.

The date knob cannot be edited by editing the accompanying text field. The moment it becomes an invalid date string the string turns to 'Invalid Date'.

See also:
2f12de4

storybook-eol/react-storybook-addon-info#35

Seems a bit error-prone to write them out each time.

Example:

theme={select('Theme', ['Light', 'Dark'], 'Light')}

when this is defined as:

theme: React.PropTypes.oneOf(['Light, Dark'])
...

Button.defaultProps = {
  theme: "Light"
}

I can't seem to get a local copy of storybook-addon-knobs to build correctly, so I'm just putting my suggestion here as an "issue." I was going to just try to PR this, but yeah, problems with building it sadly.

Would it be possible to modify some minor styling of the knobs container so that it flexes better in a panel and doesn't break panel layouts?

Specifically...

• Changing width: 380, to just width: auto, at https://github.com/storybooks/storybook-addon-knobs/blob/master/src/components/Panel.js#L8
• Changing <div> to <div style={{width: '100%'}}> at https://github.com/storybooks/storybook-addon-knobs/blob/master/src/components/Panel.js#L113
• Removing maxWidth: '500px', at https://github.com/storybooks/storybook-addon-knobs/blob/master/src/components/PropForm.js#L14

Without the change, here is some of the funky things happening:

• http://bluetide.pro/RbGL/4QlTXxDv

You can see it gets caught off and doesn't scale when you adjust the panel.

With those changes, mentioned above, it makes the layout flex properly:

• http://bluetide.pro/wHS5/5UHnR8TV

You can see it fixes that flexing issue and works better with the layout, and doesn't cut anything off.

First of all thank you for one more great tool for React development! 👏

I tried to imlement this plug-in and got the following issues:

1. I see new KNOBS panel but nothing inside there
2. the ACTIONS panel was dissapead after that

finaly i deployed my storybook to GP and there i found my property list in KNOP panel. That's why i suppose problem in my os, meaning this warning during plug-in installation:

λ npm i -D @kadira/storybook-addon-knobs
[email protected] E:\DevelopWeb\_CompFactory\react-material-color-picker
`-- @kadira/[email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

the same thing during installation react-storybook-addon-info but everything works fine

But is it expected behavior with ACTIONS panel? May be need to register it like this?

// .storybook/addons.js import '@kadira/storybook-addon-knobs/register'

Could you help me to solve this?

few details

here my deployed storybook and this is my code of this page

windows: Microsoft Windows [Version 6.3.9600]
package:

npm list --depth 0

[email protected] 
+-- @kadira/[email protected]
+-- @kadira/[email protected]
+-- @kadira/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

As [email protected] skip /src folder into his build, it breaks npm run storybookcommand.
fallback react-datime to 2.6.0 fix it.

Simon Egersand (react-datetime) will create a fix asap o//

I'm defining date knob with default value:
const _freeFrom = date('Free from', moment().add(20, 'days').toDate()); console.log(_freeFrom); //prints "Tue Oct 18 2016 17:35:07 GMT+0500 (YEKT)" for today
When I'm trying to set up another date, it's just changes back to default, prints same result, widget dosen't update.

help, please!

It would be nice to enable adding a null for the knobs, especially for the dates.

for example, i have a calendar with a start date set to null or an actual date.

<MyCalendar
    startDate={date('startDate', null)}
/>

TypeError: Cannot read property 'getTime' of null

This is more like a question but I have a use case in which I would like to use knobs at the global decorator level, so I added the following code to my config.js like this:

addDecorator((story) => (
  <ThemeProvider theme={select('Theme', themes, 'Light')}>
    {story()}
  </ThemeProvider>
));

The above code fails on this error becuase I think because the knob store is not been created yet:

Cannot read property 'get' of null
TypeError: Cannot read property 'get' of null
    at KnobManager.knob (webpack:///~/@kadira/storybook-addon-knobs/dist/KnobManager.js:50:35)
    at select (webpack:///~/@kadira/storybook-addon-knobs/dist/index.js:47:18)
    at eval (webpack:///:21:46)
    at eval (webpack:///~/@kadira/storybook/dist/client/preview/client_api.js:95:20)
    at renderMain (webpack:///~/@kadira/storybook/dist/client/preview/render.js:85:31)
    at renderPreview (webpack:///~/@kadira/storybook/dist/client/preview/render.js:101:10)
    at Array.renderUI (webpack:///~/@kadira/storybook/dist/client/preview/index.js:89:26)
    at Object.dispatch (webpack:///~/redux/lib/createStore.js:186:19)
    at ConfigApi._renderMain (webpack:///~/@kadira/storybook/dist/client/preview/config_api.js:48:24)
    at render (webpack:///~/@kadira/storybook/dist/client/preview/config_api.js:66:17)

There doesn't appear to be a way to enable the actions addon (https://github.com/kadirahq/storybook-addon-actions#getting-started) and the knobs addon at the same time.

Would be great to have typescript definitions for this add-on, like the main StoryBook module has:

https://github.com/kadirahq/react-storybook/blob/master/config/storybook.d.ts

Is there any way to get a <select multiple> instead of just <select>?

Could in theory just be an option on the select() method

Can make a PR if there is interest?