Smartknobs is not showing up, what am I missing?

[mahmoud-zakria-sociomantic]

Currently

I'm taking the example provided in the README.md adding on it import '@storybook/addon-actions' or gonna fail asking for it.

import React, { PropTypes } from 'react'
import { storiesOf } from '@storybook/react'
import { withKnobs } from '@storybook/addon-knobs'
import '@storybook/addon-actions';
import { withSmartKnobs } from 'storybook-addon-smart-knobs'

const Button = ({ children, onClick }) => (
  <button onClick={ onClick }>{ children }</button>
)

Button.propTypes = {
  children: PropTypes.node,
  onClick: PropTypes.func
}

storiesOf('Button')
  .addDecorator(withSmartKnobs)
  .addDecorator(withKnobs)
  .add('simple', () => <Button>Smart knobed button</Button>)

Here's my package.json dep and devDep

  "dependencies": {
    "prop-types": "^15.6.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  },
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@storybook/addon-actions": "^4.0.12",
    "@storybook/addon-knobs": "^4.0.12",
    "@storybook/react": "^4.0.12",
    "babel-loader": "^8.0.4",
    "storybook-addon-smart-knobs": "^3.3.1"
  }

Issue

[mahmoud-zakria-sociomantic]

Used import PropTypes from prop-types instead of react solved it, but no addon/propValues controllers show up.

import React from 'react';
import PropTypes from 'prop-types';

Also you need to add module as a second argument of storiesOf or you will lose HMR functionality.

[ndelangen]

You didn't register the addon(s).
In order to use smart knobs, you have to be using knobs, which needs to be registered:

https://github.com/storybooks/storybook/tree/next/addons/knobs#getting-started

[mahmoud-zakria-sociomantic]

I've already registered it in .storybook/addons.js, but nothing.
Here are my screenshots

And here's my code

Note: I'm using Babel7.

[ndelangen]

I published 4.0.0

I upgraded all dependencies to the latest

This package is now storybook 4.x.x compatible.
I'm assuming the problem you were facing was a mismatch of versions, since you code you posted is fine.

Please let me know if this resolves the issue 👌

[mahmoud-zakria-sociomantic]

Thanks man, but no :( :(.

[ndelangen]

@mahmoud-zakria-sociomantic if you run the storybook in this repo, does it show up then?

What differences are there between the example in this repo and your setup?

[mahmoud-zakria-sociomantic]

@ndelangen
No, I'm taking the whole example without putting any code of mine.
Does it work for you?

[mahmoud-zakria-sociomantic]

Renamed to Smartknobs is not showing up

[ndelangen]

Yeah the example in the codebase is working on my machine.. 😕

[ndelangen]

@mahmoud-zakria-sociomantic Can you share a repo that has this problem so I can debug?

[mahmoud-zakria-sociomantic]

@ndelangen Sure, here it's
https://github.com/mahmoud-zakria-sociomantic/nessiestorybook

[mahmoud-zakria-sociomantic]

Node version: 8.11.4
Yarn version: 1.7
OS: macOS High Sierra v10

[mahmoud-zakria-sociomantic]

@ndelangen Is it working with you?

[mahmoud-zakria-sociomantic]

@ndelangen , I've tried the below updates and still no knobs

"@storybook/addon-actions": "^4.1.2",
"@storybook/addon-knobs": "^4.1.2",
"@storybook/react": "^4.1.2",
"babel-loader": "^8.0.4",
"storybook-addon-smart-knobs": "^4.1.0"

[ndelangen]

I looked at it for an hour or so, I can confirm something is wrong, but I wasn't able to find a solution.

The difference that I could find was:
__docgenInfo should be present but it wasn't.

It has something to do with https://github.com/storybooks/babel-plugin-react-docgen not being applied. But I couldn't figure out why.

[melMass]

You didn't register the addon(s).
In order to use smart knobs, you have to be using knobs, which needs to be registered:

storybooks/storybook:addons/knobs@next#getting-started

This should be in the readme

[melMass]

I'm getting:

Cannot find module 'storybook-addon-smart-knobs/register'

[mahmoud-zakria-sociomantic]

@melMass it has to be import '@storybook/addon-knobs/register';

[azz0r]

Also getting this issue but no errors that allude to a problem

[mahmoud-zakria-sociomantic]

@azz0r I'm following them on Slack they are going to handle it after releasing v5.
https://storybooks.slack.com/archives/C1ZN32SKW/p1547805319034200

[anand-neema]

@mahmoud-zakria-sociomantic Is there any estimation on resolving this issue ? And when they are planning for V5

[shilman]

We're scheduled to release v5 in a week or so but there will be a lot of v5 support after the release and we've pushed a lot to post-v5 so frankly I wouldn't wait on this. AFAIK plain knobs are working great

[ndelangen]

PLain knobs IS working, this code in the addon is working, it's the generation of the needed data from propTypes/ types that is not working and causing the knobs to not show up.

[anand-neema]

@shilman is there any estimation to resolve this issue ? So that all nobs will work on the basis of proptypes/flowTypes

can you please update the planning to fix this , so that we can proceed accordingly .

[shilman]

like i said above, addon-knobs is working great. until somebody picks this up, i wouldn't hold my breath. you're welcome to contribute and then you'll know exactly the schedule!

[hugomassing]

Any update on this?

[EscoCreeks]

Hello, I have deep dived on the issue, and I think we have to upgrade this library to check props from propTypes instead of genDoc, which is (even when having the plugin at the right place) not working.

I've found that addon-info is working like a charm with the PropTable, correctly displaying each props with their type. In its code it can either fetch this data from genDoc or directly from the propTypes.

I'll try to push a PR this week-end to fix this if people are still interested.