storybook: Addons panel not showing - but knobs are still working(?)
Describe the bug I am using the knobs addon for my StencilJs project and it is technically working (if i set the component prob within the story it is changing it, for example: look at the story file and then the component, you will see that it is setting it - and it does). but I cannot see the addons panel. I think have done all the set up correctly (addons.js, package.json, etc).
I have tried selecting the show addons option inside of the running storybook but nothing is displayed.
How i am running it is with npm run storybook
To Reproduce Steps to reproduce the behavior:
- Launch storybook
- No addons panel is visible on the side or bottom
Expected behavior I expect to see the addons panel if I have an addon installed to be used
Screenshots
Code snippets Below is my .storybook/addons.js
import '@storybook/addon-a11y/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
Below is my package.json
"scripts": {
"build": "stencil build",
"start": "stencil build --dev --watch --serve",
"stencil.dev": "stencil build --dev --watch --docs",
"storybook.dev": "./node_modules/.bin/start-storybook -p 8008 -c .storybook -s ./dist",
"storybook": "npm run build && ./node_modules/.bin/concurrently \"npm run stencil.dev\" \"npm run storybook.dev\"",
"test": "stencil test --spec --e2e",
"test.watch": "stencil test --spec --e2e --watch",
"generate": "stencil generate"
},
"dependencies": {
"@ionic/core": "^4.9.1"
},
"devDependencies": {
"@stencil/core": "^1.7.0",
"@stencil/less": "^1.0.0",
"@stencil/utils": "0.0.5",
"@stencil/webpack": "0.0.6",
"@storybook/addon-a11y": "5.2.3",
"@storybook/addon-actions": "5.2.3",
"@storybook/addon-knobs": "5.2.3",
"@storybook/addon-storysource": "5.2.3",
"@storybook/addon-viewport": "5.2.3",
"@storybook/addons": "5.2.3",
"@storybook/cli": "5.2.3",
"@storybook/html": "5.2.3",
"@storybook/polymer": "5.2.3",
"babel-core": "6.26.3",
"babel-loader": "7.1.5",
"babel-preset-env": "1.7.0",
"lit-html": "1.1.1",
"polymer-webpack-loader": "2.0.3",
"ts-loader": "^5.4.5",
"concurrently": "^4.1.0"
}
Below is my .storybook/config.js
import { addDecorator, addParameters, configure } from '@storybook/polymer';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';
import 'sumai-frontend';
addParameters({
options: {
/**
* name to display in the top left corner
* @type {String}
*/
name: 'Sumai Components',
/**
* URL for name in top left corner to link to
* @type {String}
*/
url: '#',
/**
* show story component as full screen
* @type {Boolean}
*/
isFullscreen: false,
/**
* display panel that shows a list of stories
* @type {Boolean}
*/
showNav: true,
/**
* display panel that shows addon configurations
* @type {Boolean}
*/
showPanel: true,
/**
* display floating search box to search through stories
* @type {Boolean}
*/
showSearchBox: false,
/**
* show addon panel as a vertical panel on the right
* @type {string}
*/
addonPanelInRight: true,
/**
* sorts stories
* @type {Boolean}
*/
sortStoriesByKind: false,
/**
* regex for finding the hierarchy separator
* @example:
* null - turn off hierarchy
* /\// - split by `/`
* /\./ - split by `.`
* /\/|\./ - split by `/` or `.`
* @type {Regex}
*/
hierarchySeparator: null,
/**
* regex for finding the hierarchy root separator
* @example:
* null - turn off multiple hierarchy roots
* /\|/ - split by `|`
* @type {Regex}
*/
hierarchyRootSeparator: null,
/**
* sidebar tree animations
* @type {Boolean}
*/
sidebarAnimations: true,
/**
* id to select an addon panel
* @type {String}
*/
selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
/**
* enable/disable shortcuts
* @type {Boolean}
*/
enableShortcuts: true // true by default
}
});
const req = require.context('../src/components', true, /story.tsx$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
addDecorator(withA11y);
addDecorator(withKnobs);
// HMR interface
if (module.hot) {
// Capture hot update
module.hot.accept('sumai-frontend', () => {
document.location.reload();
});
}
below is my story.tsx
import { storiesOf } from "@storybook/polymer";
import { text } from "@storybook/addon-knobs";
storiesOf("Basic Components", module)
.add("Modal", () => {
const el = document.createElement("sumai-full-width-image");
el.name = text('Name', 'Namey');
return el;
});
System:
System:
OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
CPU: (4) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
Binaries:
Node: 10.15.3 - /usr/local/bin/node
Yarn: 1.16.0 - /bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 75.0.3770.80
Firefox: 69.0.2
npmPackages:
@storybook/addon-a11y: 5.2.3 => 5.2.3
@storybook/addon-actions: 5.2.3 => 5.2.3
@storybook/addon-knobs: 5.2.3 => 5.2.3
@storybook/addon-storysource: 5.2.3 => 5.2.3
@storybook/addon-viewport: 5.2.3 => 5.2.3
@storybook/addons: 5.2.3 => 5.2.3
@storybook/cli: 5.2.3 => 5.2.3
@storybook/html: 5.2.3 => 5.2.3
@storybook/polymer: 5.2.3 => 5.2.3
Additional context
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 12
- Comments: 32 (5 by maintainers)
Sometimes the UI gets into a funny state where the addon panel is hidden based on local storage. In that case, running
localStorage.clear()
in the browser console and hard-reloading the page should fix it.Re-opening. We should figure out how to fix this bug.
If it helps, I just ran into this bug immediately after adding the knobs package. All I did to get the panel to be visible was to go to the
...
menu and change the orientation of the (invisible) panel. It magically appeared in the vertical orientation, and I was able to rotate it back afterwards.Maybe that’ll help, maybe not!
+1 on localStorage.clear() as a quick fix (^6.0.18)
And also @milenaNeumann 🙌 🙌
When in this state the following will not resolve:
Quick and dirty fixes:
Long-term fix (this seems to resolve in all cases, props to @milenaNeumann):
.storybook/manager.js:
Not sure this should be closed - is this not fixable ? This happens quite often
I’m still getting this issue on the latest version of storybook. localStorage.clear() worked a treat, but I had spent quite a while trying to figure it out before coming across this bug issue! I feel it would be good to have something about this on the documentation until the bug is resolved. Many thanks for the solution!! 😉
This continues to happen in v5.1.11, clearing
localStorage
fixes the issuethis saved my day, tvm @shilman
Reproduced using SB 6.4.19. Using
localStorage.clear()
fix the issue.In version 6.3.0 none of the above options seems to work anymore … 😞
Two years old and bug is still present
For me none of the above worked, but I managed to fix it by adding the controls addon in the main.js:
I am also running into this issue, except that clearing local storage/opening an incognito window doesn’t work. I can find the panel in the Elements console and force it to be visible, and the knobs work just fine.
Update: it started working after I switched from
panelPosition: 'bottom'
toaddonPanelInRight: true
in the config. And then when I changed it back to
panelPosition: 'bottom'
, it continued to work but did not work in an incognito window. Not sure if this is helpful info@shilman this issue is still present in
7.0.12
. I had to workaround withlocalStorage.clear()
because the addons panel unexpectedly disappeared. Perhaps it is a hot key sequence putting it in a bad state?Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.50 containing PR #17714 that references this issue. Upgrade today to the
@next
NPM tag to try it out!Closing this issue. Please re-open if you think there’s still more to do.
This did the trick for me!!!
Just to be sure: this should happen only for users that saw the Storybook before it had Knobs, right? Completely new visitors should not be affected.
Same. Been following through the guide and i’m having the same issue, nothing here fixes it for me. I can go to the Docs tab and set my args there however.
Edit: Managed to make this work by updating all my packages with npm-check-updates.
Came across this in Storybook 6.x, the localStorage.clear() solution fixed it.
Hey, I just ran into this bug on Storybook 6.0.10, but I found a fix for it by changing the config: I had the
showPanel
andpanelPosition
configured in mypreview.js
like this:Moving these into the
manager.js
solved the issue for me:Maybe this helps you find the underlying issue or other people looking for a workaround 😉
Glad I came across this page. I encountered this frustrating bug today and
localStorage.clear()
fixes it. Looking forward to a permanent fix as well.Had the same issue on a desktop, chrome. Again, changing orientation helped but it keeps disappearing whenever I select another story.
Had the same issue, changing orientation helped but it keeps disappearing whenever I select another story. I believe it might be related to the 3:2 ratio screen (Surface Book) and maybe it’s not treating it as a desktop because of that?
thanks for for the hint on fixing it. Looking forward to a permanent fix
Sorry for the bug! Glad you got it working!
Yeah I did that and it worked, sorry for the redundant issue, thank you for your help!