Hide addon panel for all stories by default

[hhourani27]

Summary

I am trying to hide the addon panel by default for all stories.
I tried this solution and added options: { showPanel: true } to preview.ts

import type { Preview } from "@storybook/react";

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    options: { showPanel: true },
  },
};

export default preview;

But when I added options, Storybook didn't start correctly and displayed a blank page at start.

I also tried to follow this previous discussion and the Features and behavior documentation, but my version of storybook (7.6.8) doesn't have a .storybook/manager.ts file

So I created .storybook/manager.ts with

import { addons } from "@storybook/manager-api";

addons.setConfig({
  showPanel: false,
});

But it didn't work, as I still see the addon panel when Storybook starts.

Is there something I missed? Thank you for your time!

Additional information

No response

Create a reproduction

No response

[paveleremin]

Any updates on this?

[richburdon]

this was bothering me also; i just figured out a workaround:

// manager.ts
import { addons } from '@storybook/manager-api';
addons.register('custom-panel', (api) => {
  api.togglePanel(false);
});

[huksley]

Solution by @richburdon does not work in Storybook 8 :(

[damassi]

Automatically hiding the addons panel is broken in Storybooks 8 (please fix 🙏), but I do have this extremely hacky fix. Add it to .storybook/manager.ts:

import { addons } from "@storybook/manager-api"

// Hack fix to automatically close the addons panel. 
addons.ready().then(() => {
  setTimeout(() => {
    const closeAddonsButton = document.querySelector(
      // eslint-disable-next-line quotes
      'button[title^="Hide addons"]',
    )

    if (closeAddonsButton instanceof HTMLElement) {
      const isHidden = sessionStorage.getItem("addons-hidden") === "true"

      if (!isHidden) {
        closeAddonsButton.click()
        sessionStorage.setItem("addons-hidden", "true")
      }
    }
  // long delay for storybooks to initialize
  }, 1000) 
})