Storybook: Das Addons-Panel wird nicht angezeigt - aber die Regler funktionieren noch (?)

Erstellt am 11. Okt. 2019  ·  18Kommentare  ·  Quelle: storybookjs/storybook

Beschreibe den Fehler
Ich verwende das Knopf-Addon für mein StencilJs-Projekt und es funktioniert technisch (wenn ich das Komponenten-Prob in der Story einstelle, ändert es es, zum Beispiel: Schauen Sie sich die Story-Datei und dann die Komponente an, Sie werden sehen, dass es eingestellt wird es - und es tut). aber ich kann das Addons-Panel nicht sehen. Ich denke, alle Einstellungen wurden korrekt vorgenommen (addons.js, package.json usw.).

Ich habe versucht, die Option show addons im laufenden Storybook auszuwählen, aber es wird nichts angezeigt.

Wie ich es laufe, ist mit npm run storybook

Reproduzieren
Schritte zum Reproduzieren des Verhaltens:

  1. Starten Sie das Storybook
  2. An der Seite oder unten ist kein Addons-Panel sichtbar

Erwartetes Verhalten
Ich erwarte das Addons-Panel, wenn ich ein Addon installiert habe, das verwendet werden soll

Screenshots
storybook

Code Ausschnitte
Unten ist mein .storybook / addons.js

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

Unten ist meine 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"
  }

Unten ist mein .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();
  });
}

unten ist meine 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

Zusätzlicher Kontext

bug todo ui

Hilfreichster Kommentar

Manchmal gerät die Benutzeroberfläche in einen lustigen Zustand, in dem das Addon-Bedienfeld aufgrund des lokalen Speichers ausgeblendet ist. In diesem Fall sollte das localStorage.clear() werden, indem

Alle 18 Kommentare

Manchmal gerät die Benutzeroberfläche in einen lustigen Zustand, in dem das Addon-Bedienfeld aufgrund des lokalen Speichers ausgeblendet ist. In diesem Fall sollte das localStorage.clear() werden, indem

Ja, das habe ich getan und es hat funktioniert. Entschuldigung für das überflüssige Problem. Vielen Dank für Ihre Hilfe!

Entschuldigung für den Fehler! Ich bin froh, dass du es zum Laufen gebracht hast!

Manchmal gerät die Benutzeroberfläche in einen lustigen Zustand, in dem das Addon-Bedienfeld aufgrund des lokalen Speichers ausgeblendet ist. In diesem Fall sollte das localStorage.clear() werden, indem

das hat mir den tag gerettet, tvm @shilman

Sie sind sich nicht sicher, ob dies geschlossen werden soll - kann dies nicht behoben werden? Das passiert ziemlich oft

Wiedereröffnung. Wir sollten herausfinden, wie dieser Fehler behoben werden kann.

Vielen Dank für den Hinweis zur Behebung. Ich freue mich auf eine dauerhafte Lösung

Wenn es hilft, bin ich sofort nach dem Hinzufügen des Knobs-Pakets auf diesen Fehler gestoßen. Alles, was ich getan habe, um das Panel sichtbar zu machen, war, zum Menü ... zu gehen und die Ausrichtung des (unsichtbaren) Panels zu ändern. Es erschien magisch in der vertikalen Ausrichtung und ich konnte es danach zurückdrehen.

Vielleicht hilft das, vielleicht auch nicht!

Ich stoße auch auf dieses Problem, außer dass das Löschen des lokalen Speichers / das Öffnen eines Inkognito-Fensters nicht funktioniert. Ich kann das Bedienfeld in der Elements-Konsole finden und erzwingen, dass es sichtbar ist, und die Knöpfe funktionieren einwandfrei.

Update: Es hat funktioniert, nachdem ich von gewechselt habe
panelPosition: 'bottom'
zu
addonPanelInRight: true

in der Konfiguration. Und als ich es dann wieder in panelPosition: 'bottom' änderte, funktionierte es weiter, funktionierte aber nicht in einem Inkognito-Fenster. Ich bin mir nicht sicher, ob dies hilfreiche Informationen sind

Hatte das gleiche Problem, das Ändern der Ausrichtung hat geholfen, aber es verschwindet immer wieder, wenn ich eine andere Geschichte auswähle. Ich glaube, es könnte mit dem Bildschirm im Verhältnis 3: 2 (Surface Book) zusammenhängen, und vielleicht wird es deshalb nicht als Desktop behandelt?

Hatte das gleiche Problem auf einem Desktop, Chrome. Auch hier hat das Ändern der Ausrichtung geholfen, aber es verschwindet immer wieder, wenn ich eine andere Geschichte auswähle.

Ich bin froh, dass ich auf diese Seite gestoßen bin. Ich bin heute auf diesen frustrierenden Fehler gestoßen und localStorage.clear() behebt ihn. Ich freue mich auch auf eine dauerhafte Lösung.

Hey, ich bin gerade auf diesen Fehler in Storybook 6.0.10 gestoßen, aber ich habe eine Lösung dafür gefunden, indem ich die Konfiguration geändert habe:
Ich hatte die showPanel und panelPosition in meinem preview.js wie panelPosition konfiguriert:

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

Das Verschieben dieser in die manager.js löste das Problem für mich:

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

Vielleicht hilft dir das, das zugrunde liegende Problem zu finden oder andere Leute, die nach einer Problemumgehung suchen;)

Dies wurde in Storybook 6.x festgestellt und durch die localStorage.clear () -Lösung behoben.

+1 auf localStorage.clear () als schnelle Lösung (^ 6.0.18)

Und auch @milenaNeumann 🙌 🙌

In diesem Zustand wird Folgendes nicht behoben:

  • Drücken Sie "a" (Tastenkombination)
  • Aktualisieren, neu laden, alle Browserinstanzen beenden usw.

Schnelle und schmutzige Lösungen:

  • Localstorage.clear ()
  • Wechseln Sie in einen anderen Browser wie Firefox

Langzeitkorrektur (dies scheint sich in allen Fällen zu beheben, Requisiten an @milenaNeumann):

npm i @storybook/addons

.storybook / manager.js :

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

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

Gleich. Ich habe den Leitfaden durchgearbeitet und habe das gleiche Problem. Nichts hier behebt es für mich. Ich kann jedoch zur Registerkarte "Dokumente" gehen und dort meine Argumente festlegen.

Bearbeiten: Hat es geschafft, dass dies funktioniert, indem alle meine Pakete mit npm-check-updates aktualisiert wurden.

Nur um sicher zu gehen: Dies sollte nur für Benutzer geschehen, die das Storybook gesehen haben, bevor es Knobs hatte, oder? Völlig neue Besucher sollten nicht betroffen sein.

Für mich hat keines der oben genannten Verfahren funktioniert, aber ich habe es geschafft, es durch Hinzufügen des Steuerelement-Addons in der Datei main.js zu beheben:

module.exports = {
  addons: ['@storybook/addon-knobs', '@storybook/addon-controls'],
  stories: ['./src/stories/*.stories.js'],
};
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen