Storybook: El panel de complementos no se muestra, pero las perillas aún funcionan (?)

Creado en 11 oct. 2019  ·  18Comentarios  ·  Fuente: storybookjs/storybook

Describe el error
Estoy usando el complemento de perillas para mi proyecto StencilJs y técnicamente está funcionando (si configuro el problema del componente dentro de la historia, lo está cambiando, por ejemplo: mire el archivo de la historia y luego el componente, verá que está configurando eso - y lo hace). pero no puedo ver el panel de complementos. Creo que he hecho toda la configuración correctamente (addons.js, package.json, etc.).

Intenté seleccionar la opción de mostrar complementos dentro del libro de cuentos en ejecución, pero no se muestra nada.

Cómo lo estoy ejecutando es con npm run storybook

Reproducir
Pasos para reproducir el comportamiento:

  1. Lanzar libro de cuentos
  2. Ningún panel de complementos es visible en el lateral o en la parte inferior

Comportamiento esperado
Espero ver el panel de complementos si tengo un complemento instalado para ser utilizado

Capturas de pantalla
storybook

Fragmentos de código
A continuación se muestra mi .storybook / addons.js

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

A continuación se muestra mi 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"
  }

A continuación se muestra mi .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();
  });
}

a continuación está mi historia.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;
  });

Sistema:

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

Contexto adicional

bug todo ui

Comentario más útil

A veces, la interfaz de usuario entra en un estado divertido en el que el panel de complementos está oculto en función del almacenamiento local. En ese caso, ejecutar localStorage.clear() en la consola del navegador y volver a cargar la página debería solucionarlo.

Todos 18 comentarios

A veces, la interfaz de usuario entra en un estado divertido en el que el panel de complementos está oculto en función del almacenamiento local. En ese caso, ejecutar localStorage.clear() en la consola del navegador y volver a cargar la página debería solucionarlo.

Sí, lo hice y funcionó, lo siento por el problema redundante, ¡gracias por tu ayuda!

¡Perdón por el error! ¡Me alegro de que lo hayas hecho funcionar!

A veces, la interfaz de usuario entra en un estado divertido en el que el panel de complementos está oculto en función del almacenamiento local. En ese caso, ejecutar localStorage.clear() en la consola del navegador y volver a cargar la página debería solucionarlo.

esto me salvó el día, tvm @shilman

No estoy seguro de que deba cerrarse, ¿no se puede solucionar? Esto sucede con bastante frecuencia

Reapertura. Deberíamos averiguar cómo solucionar este error.

gracias por la sugerencia para solucionarlo. Esperando una solución permanente

Si ayuda, me encontré con este error inmediatamente después de agregar el paquete de perillas. Todo lo que hice para que el panel fuera visible fue ir al menú ... y cambiar la orientación del panel (invisible). Apareció mágicamente en la orientación vertical, y pude girarlo hacia atrás después.

¡Quizás eso ayude, quizás no!

También me encuentro con este problema, excepto que borrar el almacenamiento local / abrir una ventana de incógnito no funciona. Puedo encontrar el panel en la consola Elements y forzarlo para que sea visible, y las perillas funcionan bien.

Actualización: comenzó a funcionar después de que cambié de
panelPosition: 'bottom'
a
addonPanelInRight: true

en la configuración. Y luego, cuando lo cambié de nuevo a panelPosition: 'bottom' , continuó funcionando pero no funcionó en una ventana de incógnito. No estoy seguro si esta información es útil

Tuve el mismo problema, cambiar de orientación ayudó, pero sigue desapareciendo cada vez que selecciono otra historia. Creo que podría estar relacionado con la pantalla de relación 3: 2 (Surface Book) y tal vez no lo esté tratando como un escritorio por eso.

Tuve el mismo problema en una computadora de escritorio, Chrome. Nuevamente, cambiar de orientación ayudó, pero sigue desapareciendo cada vez que selecciono otra historia.

Me alegro de haber encontrado esta página. Encontré este error frustrante hoy y localStorage.clear() corrige. Espero una solución permanente también.

Oye, acabo de encontrar este error en Storybook 6.0.10, pero encontré una solución cambiando la configuración:
Tenía los showPanel y panelPosition configurados en mi preview.js así:

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

Moverlos a manager.js resolvió el problema para mí:

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

Quizás esto le ayude a encontrar el problema subyacente u otras personas que buscan una solución alternativa;)

Encontré esto en Storybook 6.x, la solución localStorage.clear () lo solucionó.

+1 en localStorage.clear () como solución rápida (^ 6.0.18)

Y también @milenaNeumann 🙌 🙌

Cuando se encuentre en este estado, lo siguiente no se resolverá:

  • Presionando "a" (atajo de teclado)
  • Actualizar, recargar, eliminar todas las instancias del navegador, etc.

Arreglos rápidos y sucios:

  • Localstorage.clear ()
  • Salta a un navegador diferente como Firefox

Solución a largo plazo (esto parece resolverse en todos los casos, apoyos a @milenaNeumann):

npm i @storybook/addons

.storybook / manager.js :

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

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

Mismo. He estado siguiendo la guía y tengo el mismo problema, nada aquí lo soluciona. Sin embargo, puedo ir a la pestaña Documentos y establecer mis argumentos allí.

Editar: Me las arreglé para que esto funcione actualizando todos mis paquetes con npm-check-updates.

Solo para estar seguro: esto debería suceder solo para los usuarios que vieron el Storybook _antes_ que tuviera Knobs, ¿verdad? Los visitantes completamente nuevos no deberían verse afectados.

Para mí, nada de lo anterior funcionó, pero logré solucionarlo agregando el complemento de controles en main.js:

module.exports = {
  addons: ['@storybook/addon-knobs', '@storybook/addon-controls'],
  stories: ['./src/stories/*.stories.js'],
};
¿Fue útil esta página
0 / 5 - 0 calificaciones