Smartknobs is not showing up, what am I missing?

Question

Smartknobs is not showing up, what am I missing?

mahmoud-zakria-sociomantic opened this issue 6 years ago · 27 comments

mahmoud-zakria-sociomantic commented 6 years ago

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

Answer 1 · 2018-12-11T16:12:01.000Z

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.

Answer 2 · 2018-12-12T19:26:08.000Z

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

Answer 3 · 2018-12-13T10:17:50.000Z

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.

Answer 4 · 2018-12-13T13:16:06.000Z

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 👌

Answer 5 · 2018-12-13T13:25:54.000Z

Thanks man, but no :( :(.

Answer 6 · 2018-12-13T13:45:16.000Z

@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?

Answer 7 · 2018-12-13T13:46:38.000Z

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

Answer 8 · 2018-12-13T13:57:01.000Z

Renamed to Smartknobs is not showing up

Answer 9 · 2018-12-13T17:59:15.000Z

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

Answer 10 · 2018-12-14T09:20:54.000Z

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

Answer 11 · 2018-12-14T10:23:15.000Z

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

Answer 12 · 2018-12-14T11:43:55.000Z

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

Answer 13 · 2018-12-17T10:02:38.000Z

@ndelangen Is it working with you?

Answer 14 · 2018-12-19T11:53:08.000Z

@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"

Answer 15 · 2018-12-19T17:08:51.000Z

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.

Answer 16 · 2019-01-10T00:27:34.000Z

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

Answer 17 · 2019-01-10T00:28:55.000Z

I'm getting:

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

Answer 18 · 2019-01-14T15:13:42.000Z

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

Answer 19 · 2019-02-01T13:38:21.000Z

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

Answer 20 · 2019-02-01T13:39:59.000Z

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

Answer 21 · 2019-02-24T09:25:53.000Z

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

Answer 22 · 2019-02-24T09:42:31.000Z

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

Answer 23 · 2019-02-24T14:21:17.000Z

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.

Answer 24 · 2019-04-18T03:05:45.000Z

@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 .

Answer 25 · 2019-04-18T03:29:23.000Z

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!

Answer 26 · 2019-09-05T09:22:00.000Z

Any update on this?

Answer 27 · 2020-01-10T18:24:28.000Z

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.