addon-smart-knobs

addon-smart-knobs copied to clipboard

Heya, I'm trying to get to the bottom of why I can't get smart knobs to display, and I think it might have to do with the alpha version of Storybook I'm using. Here are some details:

Using 4.1.0-alpha.8

Here's my package.json using the alpha:

       "dependencies": {
		"prop-types": "^15.6.2",
		"react": "^16.6.3",
		"react-dom": "^16.6.3",
		"react-scripts": "2.1.1"
	},
        "devDependencies": {
		"@babel/core": "^7.1.6",
		"@storybook/addon-actions": "^4.1.0-alpha.8",
		"@storybook/addon-knobs": "^4.0.7",
		"@storybook/addon-links": "^4.1.0-alpha.8",
		"@storybook/addons": "^4.1.0-alpha.8",
		"@storybook/react": "^4.1.0-alpha.8",
		"babel-loader": "^8.0.4",
		"node-sass": "^4.10.0",
		"onchange": "^5.1.0",
		"prettier": "^1.15.2",
		"storybook-addon-smart-knobs": "^3.3.1"
	}

And my Button.js file:

import React, { Component } from "react";
import classnames from "classnames";
import PropTypes from "prop-types";

export class Button extends Component {
	render() {
		const btnClass = classnames("c-btn", this.props.className, {
			"c-btn--secondary": this.props.issecondary
		});

		return (
			<button
				className={btnClass}
				disabled={this.props.disabled}
				{...this.props}
			>
				{this.props.text}
			</button>
		);
	}
}

Button.propTypes = {
	btnClass: PropTypes.string,
	issecondary: PropTypes.bool,
	disabled: PropTypes.bool,
	text: PropTypes.string
};

Button.defaultProps = {
	disabled: false,
	text: "Button"
};

And my Button.stories.js file:

import React, { PropTypes } from "react";
import { storiesOf } from "@storybook/react";

import { withKnobs } from "@storybook/addon-knobs";
import { withSmartKnobs } from "storybook-addon-smart-knobs";
import { Button } from "./Button";

let stories = storiesOf("Molecules/Buttons/Button", module);

stories.addDecorator(withSmartKnobs).addDecorator(withKnobs);

stories.add("Default", () => (
	<Button onClick={() => console.log("clicked!!")} />
));

stories.add("Secondary", () => <Button issecondary text="Secondary Button" />);

And here's the result, which doesn't generate the knobs:

Using 4.0.9

And here's the setup using 4.0.9:

         "dependencies": {
		"prop-types": "^15.6.2",
		"react": "^16.6.3",
		"react-dom": "^16.6.3",
		"react-scripts": "2.1.1"
	},
	"devDependencies": {
		"@babel/core": "^7.1.6",
		"@storybook/addon-actions": "4.0.9",
		"@storybook/addon-knobs": "4.0.9",
		"@storybook/addon-links": "4.0.9",
		"@storybook/addon-options": "^4.0.8",
		"@storybook/addons": "4.0.9",
		"@storybook/react": "4.0.9",
		"babel-loader": "^8.0.4",
		"storybook-addon-smart-knobs": "^3.3.1"
	}

This results in the smart knobs displaying correctly (but not handling icons well as mentioned over here):

I'm not sure what is causing this, but any help would be appreciated. Thanks!

Hi brad, I just upgraded everything, locally it works, can you help verify?

It's on npm as 4.x.x.

Sorry for the super late feedback.

Hey @ndelangen thanks for the update! And apologies for the delayed response; I've been dealing with a family medical emergency these past few weeks.

I've updated things on my end, but alas I'm still not seeing the knobs show up on my project:

Here's the relevant bits in my package.json file:

      "dependencies": {
		"prop-types": "^15.6.2",
                 "react-scripts": "2.1.1"
	},
	"devDependencies": {
		"@babel/core": "^7.2.2",
		"@storybook/addon-actions": "^4.1.4",
		"@storybook/addon-knobs": "^4.1.4",
		"@storybook/addon-links": "^4.1.4",
		"@storybook/addon-options": "^4.1.4",
		"@storybook/addons": "^4.1.4",
		"@storybook/react": "^4.1.4",
		"babel-loader": "^8.0.0",
		"storybook-addon-smart-knobs": "^4.1.0"
	}

Do you see anything in there that might be causing an issue?

I'll also find some time to spin up a brand new project and see if I can get it working there. If you happen to have a link to a working project lying around, that would be helpful too. Thanks so much!

I too am having issues with smart knobs not working as expected but am using custom decorators and I'm not sure if that's having a side-effect, based on this recent issue: https://github.com/storybooks/addon-smart-knobs/issues/47

I removed some custom decorators and still had no luck. Here's my setup:

dependencies:
    "prop-types": "^15.5.10",
    ...
and dev:
    "@babel/core": "^7.0.0",
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-info": "^5.0.11",
    "@storybook/addon-knobs": "^5.0.11",
    "@storybook/addon-options": "^5.0.11",
    "@storybook/react": "^5.0.11",
    "storybook-addon-smart-knobs": "^4.1.2",

Addons.js (do I need smart knobs in here too? I wasn't sure what to register there.)

import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-options/register';
import '@storybook/addon-a11y/register';

Storybook .config:

storybook.configure(loadStories, module);
storybook.addDecorator(withA11y);
storybook.addParameters(options);
storybook.addParameters(a11y);

Basic story:

const stories = storiesOf('Button', module);
stories
  .addDecorator(withKnobs)
  .addDecorator(withInfo)
  .addDecorator(story => (
    <div id="root-preview">
      {story()}
    </div>
  ));

stories
  .add('customize me!', (() => {
    return (
      <Button
        style={ 'highlight' }
        Click Me
      </Button>);
  }))