Storybook: 插件面板未显示-旋钮仍在工作(?)

创建于 2019-10-11  ·  18评论  ·  资料来源: storybookjs/storybook

描述错误
我在StencilJs项目中使用了旋钮插件,并且在技术上是可行的(例如,如果我在故事中设置了组件概率,它将对其进行更改,例如:先查看故事文件,然后查看组件,您将看到它正在设置它-并且确实如此)。 但我看不到插件面板。 我认为已正确完成了所有设置(addons.js,package.json等)。

我尝试在正在运行的故事书中选择“显示插件”选项,但未显示任何内容。

我如何使用npm run storybook运行它

重现
重现行为的步骤:

  1. 发布故事书
  2. 在侧面或底部看不到插件面板

预期行为
如果安装了要使用的插件,我希望看到插件面板。

屏幕截图
storybook

代码段
以下是我的.storybook / addons.js

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

以下是我的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"
  }

下面是我的.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
     * <strong i="6">@type</strong> {String}
     */
    name: 'Sumai Components',
    /**
     * URL for name in top left corner to link to
     * <strong i="7">@type</strong> {String}
     */
    url: '#',
    /**
     * show story component as full screen
     * <strong i="8">@type</strong> {Boolean}
     */
    isFullscreen: false,
    /**
     * display panel that shows a list of stories
     * <strong i="9">@type</strong> {Boolean}
     */
    showNav: true,
    /**
     * display panel that shows addon configurations
     * <strong i="10">@type</strong> {Boolean}
     */
    showPanel: true,
    /**
     * display floating search box to search through stories
     * <strong i="11">@type</strong> {Boolean}
     */
    showSearchBox: false,
    /**
     * show addon panel as a vertical panel on the right
     * <strong i="12">@type</strong> {string}
     */
    addonPanelInRight: true,
    /**
     * sorts stories
     * <strong i="13">@type</strong> {Boolean}
     */
    sortStoriesByKind: false,
    /**
     * regex for finding the hierarchy separator
     * <strong i="14">@example</strong>:
     *   null - turn off hierarchy
     *   /\// - split by `/`
     *   /\./ - split by `.`
     *   /\/|\./ - split by `/` or `.`
     * <strong i="15">@type</strong> {Regex}
     */
    hierarchySeparator: null,
    /**
     * regex for finding the hierarchy root separator
     * <strong i="16">@example</strong>:
     *   null - turn off multiple hierarchy roots
     *   /\|/ - split by `|`
     * <strong i="17">@type</strong> {Regex}
     */
    hierarchyRootSeparator: null,
    /**
     * sidebar tree animations
     * <strong i="18">@type</strong> {Boolean}
     */
    sidebarAnimations: true,
    /**
     * id to select an addon panel
     * <strong i="19">@type</strong> {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
     * <strong i="20">@type</strong> {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();
  });
}

以下是我的故事

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:
    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

其他背景

bug todo ui

最有用的评论

有时,UI会进入一种有趣的状态,其中基于本地存储隐藏了附加面板。 在这种情况下,在浏览器控制台中运行localStorage.clear()并重新加载页面即可解决该问题。

所有18条评论

有时,UI会进入一种有趣的状态,其中基于本地存储隐藏了附加面板。 在这种情况下,在浏览器控制台中运行localStorage.clear()并重新加载页面即可解决该问题。

是的,我做到了,而且奏效了,对于冗长的问题,深表歉意,谢谢您的帮助!

对不起,错误! 真高兴你做到了!

有时,UI会进入一种有趣的状态,其中基于本地存储隐藏了附加面板。 在这种情况下,在浏览器控制台中运行localStorage.clear()并重新加载页面即可解决该问题。

这挽救了我的一天,tvm @shilman

不确定是否应该将其关闭-这是不可修复的吗? 这种情况经常发生

重新开放。 我们应该弄清楚如何解决此错误。

感谢您提供修复建议。 期待永久修复

如果有帮助,添加旋钮包后,我立即遇到了该错误。 为了使面板可见,我要做的就是转到...菜单并更改(不可见)面板的方向。 它神奇地出现在垂直方向上,之后我又可以旋转回去。

也许会有所帮助,也许不会!

我也遇到了这个问题,除了清除本地存储/打开隐身窗口不起作用。 我可以在Elements控制台中找到该面板并将其强制显示,并且旋钮可以正常工作。

更新:从我切换后它开始工作
panelPosition: 'bottom'

addonPanelInRight: true

在配置中。 然后,当我将其更改回panelPosition: 'bottom' ,它继续工作,但在隐身窗口中不起作用。 不确定这是否有帮助

遇到同样的问题,改变方向有助于解决问题,但是每当我选择另一个故事时,它就不断消失。 我相信它可能与3:2比例屏幕(《曲面书》)有关,也许因为这个原因它没有将其视为台式机?

在台式机chrome上也有同样的问题。 同样,改变方向有助于解决问题,但是每当我选择另一个故事时,它就不断消失。

很高兴我碰到了这个页面。 我今天遇到了这个令人沮丧的错误, localStorage.clear()修复。 期待永久修复。

嘿,我刚刚在Storybook 6.0.10上遇到了这个错误,但是我通过更改配置找到了解决方法:
我有showPanelpanelPosition在我的配置preview.js这样的:

// preview.js
addParameters({
  options: {
    showPanel: true,
    panelPosition: "bottom",
  },
});

将它们移至manager.js为我解决了这个问题:

// manager.js
addons.setConfig({
  showPanel: true,
  panelPosition: "bottom",
});

也许这可以帮助您找到根本的问题,或者其他人正在寻找解决方法;)

在Storybook 6.x中遇到了此问题,localStorage.clear()解决方案对其进行了修复。

快速修复localStorage.clear()上的+1(^ 6.0.18)

而且还@milenaNeumann🙌🙌

当处于这种状态下面就无法解决

  • 按“ a”(键盘快捷键)
  • 刷新,重新加载,杀死所有浏览器实例等

快速而肮脏的修复程序:

  • Localstorage.clear()
  • 跳入Firefox之类的其他浏览器

长期修复(似乎在所有情况下都可以解决,@ milenaNeumann的道具):

npm i @storybook/addons

.storybook / manager.js

import { addons } from "@storybook/addons";

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

相同。 一直按照指南操作,而我遇到了同样的问题,这里没有什么可以解决的。 我可以转到“文档”标签,然后在此处设置我的参数。

编辑:设法通过使用npm-check-updates更新我的所有软件包来使这项工作有效。

可以肯定的是:只有在看到Storybook之前有旋钮的用户才应该这样做,对吗? 完全不应该影响新访客。

对我来说,以上方法均无效,但我设法通过在main.js中添加控件插件来解决了这一问题:

module.exports = {
  addons: ['@storybook/addon-knobs', '@storybook/addon-controls'],
  stories: ['./src/stories/*.stories.js'],
};
此页面是否有帮助?
0 / 5 - 0 等级

相关问题

arunoda picture arunoda  ·  3评论

miljan-aleksic picture miljan-aleksic  ·  3评论

rpersaud picture rpersaud  ·  3评论

dnlsandiego picture dnlsandiego  ·  3评论

levithomason picture levithomason  ·  3评论