Storybook: Le panneau Addons ne s'affiche pas - mais les boutons fonctionnent toujours (?)

Créé le 11 oct. 2019  ·  18Commentaires  ·  Source: storybookjs/storybook

Décrivez le bogue
J'utilise l'addon de boutons pour mon projet StencilJs et cela fonctionne techniquement (si je configure le composant prob dans l'histoire, il le change, par exemple: regardez le fichier d'histoire, puis le composant, vous verrez qu'il est en train de définir il - et il le fait). mais je ne peux pas voir le panneau des addons. Je pense avoir fait toute la configuration correctement (addons.js, package.json, etc.).

J'ai essayé de sélectionner l'option Afficher les addons à l'intérieur du livre de contes en cours d'exécution mais rien ne s'affiche.

Comment je l'exécute avec npm run storybook

Reproduire
Étapes pour reproduire le comportement:

  1. Lancer le livre d'histoires
  2. Aucun panneau d'extension n'est visible sur le côté ou en bas

Comportement prévisible
Je m'attends à voir le panneau des addons si j'ai un addon installé pour être utilisé

Captures d'écran
storybook

Extraits de code
Ci-dessous, mon .storybook / addons.js

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

Voici mon 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"
  }

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

ci-dessous est mon histoire.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;
  });

Système:

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

Contexte supplémentaire

bug todo ui

Commentaire le plus utile

Parfois, l'interface utilisateur entre dans un état amusant où le panneau complémentaire est masqué en fonction du stockage local. Dans ce cas, exécuter localStorage.clear() dans la console du navigateur et recharger la page en dur devrait résoudre le problème.

Tous les 18 commentaires

Parfois, l'interface utilisateur entre dans un état amusant où le panneau complémentaire est masqué en fonction du stockage local. Dans ce cas, exécuter localStorage.clear() dans la console du navigateur et recharger la page en dur devrait résoudre le problème.

Ouais je l'ai fait et cela a fonctionné, désolé pour le problème redondant, merci pour votre aide!

Désolé pour le bug! Heureux que tu es parvenu à le faire fonctionner!

Parfois, l'interface utilisateur entre dans un état amusant où le panneau complémentaire est masqué en fonction du stockage local. Dans ce cas, exécuter localStorage.clear() dans la console du navigateur et recharger la page en dur devrait résoudre le problème.

cela a sauvé ma journée, tvm @shilman

Vous n'êtes pas sûr que cela devrait être fermé - n'est-ce pas réparable? Cela arrive assez souvent

Réouverture. Nous devrions trouver comment corriger ce bogue.

merci pour le conseil pour le réparer. Dans l'attente d'une solution permanente

Si cela aide, je viens de rencontrer ce bogue immédiatement après avoir ajouté le paquet de boutons. Tout ce que j'ai fait pour que le panneau soit visible était d'aller dans le menu ... et de changer l'orientation du panneau (invisible). Il est apparu comme par magie dans l'orientation verticale, et j'ai pu le faire pivoter par la suite.

Peut-être que cela aidera, peut-être pas!

Je rencontre également ce problème, sauf que la suppression du stockage local / l'ouverture d'une fenêtre de navigation privée ne fonctionne pas. Je peux trouver le panneau dans la console Elements et le forcer à être visible, et les boutons fonctionnent très bien.

Mise à jour: il a commencé à fonctionner après que je suis passé de
panelPosition: 'bottom'
à
addonPanelInRight: true

dans la config. Et puis quand je l'ai changé en panelPosition: 'bottom' , il a continué à fonctionner mais ne fonctionnait pas dans une fenêtre de navigation privée. Je ne sais pas si ces informations sont utiles

J'ai eu le même problème, changer d'orientation a aidé, mais il continue de disparaître chaque fois que je sélectionne une autre histoire. Je pense que cela pourrait être lié à l'écran de rapport 3: 2 (Surface Book) et peut-être ne le traite-t-il pas comme un bureau à cause de cela?

Eu le même problème sur un ordinateur de bureau, chrome. Encore une fois, le changement d'orientation a aidé, mais il continue de disparaître chaque fois que je sélectionne une autre histoire.

Heureux d'être tombé sur cette page. J'ai rencontré ce bug frustrant aujourd'hui et localStorage.clear() corrige. Dans l'attente d'une solution permanente également.

Hé, je viens de rencontrer ce bogue sur Storybook 6.0.10, mais j'ai trouvé un correctif en modifiant la configuration:
J'ai configuré les showPanel et panelPosition dans mon preview.js comme ceci:

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

Les déplacer dans le manager.js résolu le problème pour moi:

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

Peut-être que cela vous aide à trouver le problème sous-jacent ou d'autres personnes à la recherche d'une solution de contournement;)

Je suis tombé sur ce problème dans Storybook 6.x, la solution localStorage.clear () l'a corrigé.

+1 sur localStorage.clear () comme solution rapide (^ 6.0.18)

Et aussi @milenaNeumann 🙌 🙌

Dans cet état, les problèmes suivants ne résoudront

  • Appuyer sur "a" (raccourci clavier)
  • Actualiser, recharger, tuer toutes les instances de navigateur, etc.

Corrections rapides et sales:

  • Localstorage.clear ()
  • Aller dans un autre navigateur comme Firefox

Correction à long terme (cela semble se résoudre dans tous les cas, accessoires à @milenaNeumann):

npm i @storybook/addons

.storybook / manager.js :

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

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

Même. J'ai suivi le guide et j'ai le même problème, rien ici ne le résout pour moi. Je peux toutefois accéder à l'onglet Docs et y définir mes arguments.

Edit: J'ai réussi à faire ce travail en mettant à jour tous mes packages avec npm-check-updates.

Juste pour être sûr: cela ne devrait arriver que pour les utilisateurs qui ont vu le Storybook _avant_ il avait des boutons, non? Les visiteurs entièrement nouveaux ne devraient pas être affectés.

Pour moi, rien de ce qui précède n'a fonctionné, mais j'ai réussi à résoudre ce problème en ajoutant le module complémentaire de contrôle dans le fichier main.js:

module.exports = {
  addons: ['@storybook/addon-knobs', '@storybook/addon-controls'],
  stories: ['./src/stories/*.stories.js'],
};
Cette page vous a été utile?
0 / 5 - 0 notes