addParameters in config.js not changing parameters

[bennypowers]

Describe the bug Setting global parameters with the addParameters function is apparently not changing parameters in my project.

To Reproduce use this config.js

import { addParameters, configure } from '@storybook/polymer';

import '@storybook/addon-console';

import { create } from '@storybook/theming';

const req = require.context('../packages', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addParameters({ options: {
  panelPosition: 'right',
  theme: create({
    base: 'light',

    fontBase: '"proxima-nova", arial, sans-serif',
    fontCode: 'monospace',

    brandImage: '/logo.png'

  }),
} })

configure(loadStories, module);

Expected behavior I expect to see my brand logo and the panel on the right. Instead I see storybook logo and panel on the bottom.

System:

• OS: MacOS
• Device: iPhoneX, Macbook Pro 2018
• Browser: Chrome, Firefox latest
• Framework: Web Components (@storybook/polymer)
• Addons: knobs
• Version: 5.1.0-alpha.6

Additional context Inspecting the browser console shows that stories do not receive the global properties

[bennypowers]

For those in a pinch, this terrible hack is tiding us over for now.

.storybook/manager-head.html

<script type="module">
  // HACK: storybook theming looks broken.
  // this is a temporary workaround
  const newLogo = document.createElement('img');
  newLogo.src = './logo.png';
  newLogo.alt = 'Logo';

  function brand() {
    const oldLogo = document.querySelector('.simplebar-content svg');
    if (!oldLogo) return requestAnimationFrame(brand);
    newLogo.classList = oldLogo.classList;
    oldLogo.parentElement.prepend(newLogo);
    oldLogo.remove();
  }

  requestAnimationFrame(brand)
</script>

[g1eny0ung]

Also not changed when setting addParameters in config.js

[shilman]

@bennypowers is the panel position getting set properly?

[bennypowers]

@shilman :wave: No, panel position was not properly set. I was worried that my theme config was broken so I checked panelPosition as well. I tried with values top, bottom, right, and side (these options, as far as I could tell, are not documented) and nothing worked.

[bennypowers]

The following, in /.storybook/config.js does work:

import { addDecorator } from '@storybook/polymer';
import { withA11y } from '@storybook/addon-a11y';

addDecorator(withA11y)

So it appears that it's specifically the addParameters hook which is malfunctioning.

[g1eny0ung]

Sorry about my problem. I upgrade storybook to 5.0.1 and the addParameters works fine. I just use:

addParameters({
  options: {
    showPanel: false
  }
}

[shilman]

@bennypowers I verified that the panelPosition: 'right' parameter is working in our polymer demo in /examples/polymer-cli, so it looks like it's an issue with your setup. Please take a look at the demo setup, and if you can provide a minimal repro I'd be happy to take a look at it.

[bennypowers]

Did a little debugging and it looks like this was related to duplicated packages.

@open-wc/demoing-storybook exports a lot of storybook features, like storiesOf, which itself relies on the global state set by addParameters. If i import addParameters from @storybook/polymer but storiesOf from open-wc, they'll be setting and querying state on two different closures - a nightmare.

Ultimately this is an npm/webpack problem, but I need to get this out, so my solution was to refactor all of my imports to storybook ones.

[crusenov]

@shilman In my vue js app enableShortcuts is not working. I cant disable shortcuts. Any suggestion? I'm using Storybook 5.1.11.

[shilman]

@crusenov #6569