CODEWITHSUNDEEP
storybook
darKnight
darKnight

Reputation: 6481

Panels not visible in React Storybook

I am using Storybook version 3.3.15 on Windows 7 running node version 6.3.1 and npm version 3.10.6.

On running storybook, I see 'No panels Available' message in the bottom of the page where actions panels are rendered. I have imported addon-actions in addons.js: import @storybook/addon-actions/register and the module is also present in node_modules folder. I am not getting any errors regarding this during webpack compliation or in browser console.

How do I make the Action Panel appear?

Note: I cannot update the Node and NPM versions because I am working on a professional level app wherein lots of people are involved and its a very big codebase.

Upvotes: 46

Views: 29502

Answers (12)

Sameera Peiris
Sameera Peiris

Reputation: 189

add controls to your Storybook

npm i -D @storybook/addon-controls

Then, add following content to .storybook/main.js:

export default {
  addons: ['@storybook/addon-controls'],
};

Upvotes: 0

Margarida Paixao
Margarida Paixao

Reputation: 13

I had a similar problem in storybook with Preact.

By inspecting the source code on a story page, I realized the controls panel was there, just hidden.

You could either click on the settings to change the add-ons orientation each time (which triggers it to appear apparently), or you can do the following for it to appear by default:

Add a file: .storybook/manager.js, with the following contents:

import { addons } from '@storybook/manager-api';

addons.setConfig({
  showPanel: true,
});

Here is the documentation for the different settings you can configure: https://storybook.js.org/docs/react/addons/addons-api#addonssetconfigconfig

Upvotes: 0

Jose Browne
Jose Browne

Reputation: 4622

For me the issue was that I had to switch over to the Canvas tab from Docs. Apparently controls don't render on docs.

Upvotes: 2

Aaron
Aaron

Reputation: 2227

I was having this problem; hitting S would shift my components without showing the sidebar, and even after clearing my localStorage and sessionStorage I could barely see the edge of my sidebar.

Then, I realized that I had zoomed in to see my components more closely, and that the sidebar was hiding/showing, but just off-screen.. I just needed to zoom out. 🤦‍♂️

Sharing here in case anyone makes the same mistake.

Upvotes: 1

FRITZ F
FRITZ F

Reputation: 101

I Just found out it by trying different keys on my keyboard:

If you press "S" - it switches Sidebar in StoryBook Of and On! Try it!

My Browser: Chrome, Operating system: Mac OS

Upvotes: 7

Ev Haus
Ev Haus

Reputation: 1655

For me the whole main menu disappeared at one point. The only thing that helped was running sessionStorage.clear() in the console and then refreshing the page.

Upvotes: 8

Manuel Barbo
Manuel Barbo

Reputation: 139

In Mac I solved it by pressing fn + s.

Upvotes: 2

D V Yogesh
D V Yogesh

Reputation: 3700

in my case just hitting d worked

Upvotes: 67

Jonny
Jonny

Reputation: 1283

First of all, check if you have the addon panel set to show/hide in the dropdown menu at the top left of the Stoybook UI screen, also check the dropdown item called 'change addons orientation' (mine was changed and was bumped off screen because of screen width).

If that doesn't work, try setting the options in the storybook config.js file:

In the Storybook config.js file you can add an options parameter for some default settings, this includes setting the visibility and position of the addons panel.

import { addParameters } from '@storybook/react';

// settings for storybook - show and position addon panel
addParameters({
  options: {
    // display panel that shows addon configurations
    showPanel: true,
    // where to show the addon panel --- @type {('bottom'|'right')}
    panelPosition: 'bottom',
  }
});

Upvotes: 6

Nelu
Nelu

Reputation: 18770

In my case I was missing the .storybook/addons.js file. It looks like this became a requirement in a recent version because the actions add-on used to work fine for me initially.

To clarify potential confusion:

As the documentation specifies, you need to have a addons.js file in your hidden .storybook/ directory (most likely at the root of your project) even if all it contains is just this 1 line.

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

Upvotes: 5

charlax
charlax

Reputation: 26059

In my case they were simply hidden and in the wrong orientation. Had to use the D and A keyboard shortcuts to make them appear again.

Upvotes: 125

AlexJeffcott
AlexJeffcott

Reputation: 136

I had a similar problem and installing @storybook/addons (in addition to the steps you mentioned) fixed it.

Run:

npm i -D @storybook/addons

Upvotes: 0

Related Questions