Storybook: Панель надстроек не отображается, но ручки все еще работают (?)

Созданный на 11 окт. 2019  ·  18Комментарии  ·  Источник: storybookjs/storybook

Опишите ошибку
Я использую надстройку knobs для своего проекта StencilJs, и технически он работает (если я установил компонент prob в истории, она меняет ее, например: посмотрите файл истории, а затем компонент, вы увидите, что он устанавливает это - и это так). но я не вижу панель надстроек. Я думаю, что все настроено правильно (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();
  });
}

ниже моя история.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

Самый полезный комментарий

Иногда пользовательский интерфейс попадает в забавное состояние, когда панель надстройки скрыта на основе локального хранилища. В этом случае запуск localStorage.clear() в консоли браузера и жесткая перезагрузка страницы должны исправить это.

Все 18 Комментарий

Иногда пользовательский интерфейс попадает в забавное состояние, когда панель надстройки скрыта на основе локального хранилища. В этом случае запуск localStorage.clear() в консоли браузера и жесткая перезагрузка страницы должны исправить это.

Да, я сделал это, и это сработало, извините за повторяющуюся проблему, спасибо за вашу помощь!

Извините за ошибку! Рад, что у вас все получилось!

Иногда пользовательский интерфейс попадает в забавное состояние, когда панель надстройки скрыта на основе локального хранилища. В этом случае запуск localStorage.clear() в консоли браузера и жесткая перезагрузка страницы должны исправить это.

это спасло мне день, tvm @shilman

Не уверен, что это нужно закрыть - это не поправимо? Такое случается довольно часто

Повторное открытие. Мы должны выяснить, как исправить эту ошибку.

спасибо за подсказку, как это исправить. С нетерпением жду постоянного исправления

Если это поможет, я столкнулся с этой ошибкой сразу после добавления пакета knobs. Все, что я сделал, чтобы панель стала видимой, - это перейти в меню ... и изменить ориентацию (невидимой) панели. Он волшебным образом появился в вертикальной ориентации, и после этого я смог повернуть его обратно.

Может, это поможет, а может, и нет!

Я также сталкиваюсь с этой проблемой, за исключением того, что очистка локального хранилища / открытие окна в режиме инкогнито не работает. Я могу найти панель в консоли Elements и заставить ее быть видимой, и ручки работают нормально.

Обновление: он начал работать после того, как я переключился с
panelPosition: 'bottom'
к
addonPanelInRight: true

в конфиге. А потом, когда я снова изменил его на panelPosition: 'bottom' , он продолжал работать, но не работал в окне инкогнито. Не уверен, что это полезная информация

Была та же проблема, помогла смена ориентации, но она исчезает всякий раз, когда я выбираю другую историю. Я считаю, что это может быть связано с экраном с соотношением сторон 3: 2 (Surface Book) и, возможно, из-за этого он не рассматривает его как рабочий стол?

Была такая же проблема на рабочем столе, хром. Опять же, смена ориентации помогла, но она продолжает исчезать, когда я выбираю другую историю.

Рад, что наткнулся на эту страницу. Сегодня я столкнулся с этой неприятной ошибкой, и localStorage.clear() исправляет ее. Также с нетерпением жду окончательного исправления.

Привет, я только что столкнулся с этой ошибкой в ​​Storybook 6.0.10, но нашел исправление, изменив конфигурацию:
У меня были showPanel и panelPosition настроенные в моем 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 () исправило это.

+1 в localStorage.clear () в качестве быстрого исправления (^ 6.0.18)

А также @milenaNeumann 🙌 🙌

В этом состоянии не разрешится следующее:

  • Нажатие «а» (сочетание клавиш)
  • Обновите, перезагрузите, убейте все экземпляры браузера и т. Д.

Быстрые и грязные исправления:

  • 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 рейтинги