反应故事书插件旋钮未显示

Question

I cant seem to be getting the @storybook addon knobs working? It doesnt seem to be decorating the actual story. Pretty much followed this

My code below.. Im using getstorybook with create-react-app

Using below packages:

@storybook/addon-actions": "^3.1.2,
@storybook/addon-info": "^3.1.4,
@storybook/addon-knobs": "^3.1.2,
@storybook/react": "^3.1.3

my setup

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

//.config
import { configure, setAddon, addDecorator } from '@storybook/react';
import infoAddon from '@storybook/addon-info';

setAddon(infoAddon);

function loadStories() {
  require('../stories');
}

configure(loadStories, module);

//stories/index.js
import React from 'react';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';

const stories = storiesOf('Storybook Knobs', module);

  // Add the `withKnobs` decorator to add knobs support to your stories.
  // You can also configure `withKnobs` as a global decorator.
  stories.addDecorator(withKnobs);

  // Knobs for React props
  stories.add('with a button', () => (
    <button disabled={boolean('Disabled', false)} >
      {text('Label', 'Hello Button')}
    </button>
  ))

This should be a no brainer, but no suck luck.

Answer 1

Hope this helps someone, but for some reason my addons panel suddenly disappeared from view and I couldn't figure out how to get it back. I could see the addons markup being rendered in the "elements" pane in my dev tools - so I knew things were working. Somehow storybook stored a bad value in my localStorage['storybook-layout'] so that the addons were positioned waaaaayyy off screen. Running the following fixed it.

localStorage.removeItem('storybook-layout')

Answer 2

You probably need to create the addons.js file on the storybook config folder. (By default .storybook).

Check the Docs for knobs you need to add the following:

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

Answer 3

Try removing all the query string on the url

eg. http://localhost:6006/?knob-is_block=false&knob-Disabled=false&knob-disabled=false&knob-Style%20lite=false&knob-show=true&knob-Size=md&knob-readOnly=false&knob-Style=default&knob-icon%20name=vertical&knob-Label=Hello%20Button&knob-Active=false&knob-is_loading=false&selectedKind=Button&selectedStory=default%20style&full=0&addons=0&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

to http://localhost:6006

This worked for me.

Answer 4

• Hitting D on your keyboard toggles the layout // Ray Brown

or

• You should also be able to expand the sidebar by clicking and dragging on the right side.

Answer 5

In Storybook 6.5 I was facing the same issue after manually adding the addon:

npm i @storybook/addon-knobs --dev

All I needed to do is to go to the main.js file inside the .storybook folder and add the following:

"addons": ["@storybook/addon-knobs"] 

Then I stopped the already running storybook in the terminal using ctrl/cmd + c and then re-run the storybook:

npm run storybook

Hope it helps. Thank you.