Descreva o bug
Estou usando o complemento de botões para meu projeto StencilJs e está funcionando tecnicamente (se eu definir o componente prob dentro da história, ele o está alterando, por exemplo: olhe para o arquivo de história e, em seguida, o componente, você verá que está configurado isso - e faz). mas não consigo ver o painel de complementos. Acho que fiz toda a configuração corretamente (addons.js, package.json, etc).
Eu tentei selecionar a opção show addons dentro do storybook em execução, mas nada é exibido.
Como estou administrando é com npm run storybook
Reproduzir
Passos para reproduzir o comportamento:
Comportamento esperado
Espero ver o painel de complementos se eu tiver um complemento instalado para ser usado
Capturas de tela
Partes de codigo
Abaixo está meu .storybook / addons.js
import '@storybook/addon-a11y/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
Abaixo está o meu 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"
}
Abaixo está meu .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();
});
}
abaixo está minha história.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
Às vezes, a IU fica em um estado engraçado em que o painel adicional fica oculto com base no armazenamento local. Nesse caso, executar localStorage.clear()
no console do navegador e recarregar a página deve corrigir o problema.
Sim, eu fiz isso e funcionou, desculpe pelo problema redundante, obrigado pela ajuda!
Desculpe pelo bug! Feliz por você fazer isso funcionar!
Às vezes, a IU fica em um estado engraçado em que o painel adicional fica oculto com base no armazenamento local. Nesse caso, executar
localStorage.clear()
no console do navegador e recarregar a página deve corrigir o problema.
isso salvou meu dia, tvm @shilman
Não tenho certeza se isso deve ser fechado - isso não pode ser corrigido? Isso acontece com bastante frequência
Reabrindo. Devemos descobrir como consertar esse bug.
obrigado pela dica sobre como corrigi-lo. Ansioso por uma solução permanente
Se ajudar, acabei de encontrar esse bug imediatamente após adicionar o pacote de botões. Tudo o que fiz para que o painel ficasse visível foi ir ao menu ...
e mudar a orientação do painel (invisível). Ele apareceu magicamente na orientação vertical e eu fui capaz de girá-lo de volta depois.
Talvez isso ajude, talvez não!
Também estou enfrentando esse problema, exceto que limpar o armazenamento local / abrir uma janela anônima não funciona. Posso encontrar o painel no console do Elements e forçá-lo a ficar visível, e os botões funcionam perfeitamente.
Atualização: começou a funcionar depois que mudei de
panelPosition: 'bottom'
para
addonPanelInRight: true
na configuração. E então, quando mudei de volta para panelPosition: 'bottom'
, ele continuou a funcionar, mas não funcionou em uma janela anônima. Não tenho certeza se esta é uma informação útil
Tive o mesmo problema, a mudança de orientação ajudou, mas continua desaparecendo sempre que seleciono outra história. Eu acredito que pode estar relacionado à tela de proporção 3: 2 (Surface Book) e talvez não a esteja tratando como um desktop por causa disso?
Tive o mesmo problema em um desktop, cromo. Novamente, mudar a orientação ajudou, mas continua desaparecendo sempre que seleciono outra história.
Ainda bem que me deparei com esta página. Eu encontrei esse bug frustrante hoje e localStorage.clear()
corrigiu. Ansioso por uma solução permanente também.
Ei, acabei de encontrar esse bug no Storybook 6.0.10, mas encontrei uma correção para ele alterando a configuração:
Eu tinha showPanel
e panelPosition
configurados em meu preview.js
assim:
// preview.js
addParameters({
options: {
showPanel: true,
panelPosition: "bottom",
},
});
Movê-los para manager.js
resolveu o problema para mim:
// manager.js
addons.setConfig({
showPanel: true,
panelPosition: "bottom",
});
Talvez isso ajude você a encontrar o problema subjacente ou outras pessoas procurando uma solução alternativa;)
Descobri isso no Storybook 6.x, a solução localStorage.clear () corrigiu isso.
+1 em localStorage.clear () como uma solução rápida (^ 6.0.18)
E também @milenaNeumann 🙌 🙌
Quando neste estado, o seguinte não resolverá:
Correções rápidas e sujas:
Solução de longo prazo (isso parece resolver em todos os casos, adereços para @milenaNeumann):
npm i @storybook/addons
.storybook / manager.js :
import { addons } from "@storybook/addons";
addons.setConfig({
showPanel: true,
panelPosition: "bottom",
});
Mesmo. Tenho seguido o guia e estou tendo o mesmo problema, nada aqui resolve isso para mim. Posso ir para a guia Docs e definir meus argumentos lá.
Edit: Consegui fazer este trabalho atualizando todos os meus pacotes com npm-check-updates.
Só para ter certeza: isso deve acontecer apenas para usuários que viram o Storybook _antes_ dele ter os Knobs, certo? Visitantes completamente novos não devem ser afetados.
Para mim, nada disso funcionou, mas consegui corrigi-lo adicionando o complemento de controles no main.js:
module.exports = {
addons: ['@storybook/addon-knobs', '@storybook/addon-controls'],
stories: ['./src/stories/*.stories.js'],
};
Comentários muito úteis
Às vezes, a IU fica em um estado engraçado em que o painel adicional fica oculto com base no armazenamento local. Nesse caso, executar
localStorage.clear()
no console do navegador e recarregar a página deve corrigir o problema.