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();
  });
}

以下は私の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:
    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の比率の画面(Surface Book)に関連している可能性があり、そのためにデスクトップとして扱われていないのではないでしょうか。

デスクトップ、クロームでも同じ問題がありました。 繰り返しになりますが、向きを変えることは役に立ちましたが、別のストーリーを選択するたびに消え続けます。

このページに出くわしてよかったです。 今日、この苛立たしいバグに遭遇し、 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ですべてのパッケージを更新することで、これを機能させることができました。

念のために言っておきますが、これは、ストーリーブックがノブを持っている前に見たユーザーに対してのみ発生するはずです。 完全に新しい訪問者は影響を受けないはずです。

私にとっては上記のどれも機能しませんでしたが、main.jsにcontrolsアドオンを追加することで修正できました:

module.exports = {
  addons: ['@storybook/addon-knobs', '@storybook/addon-controls'],
  stories: ['./src/stories/*.stories.js'],
};
このページは役に立ちましたか?
0 / 5 - 0 評価