Is it possible to hide stories in Storybook on the sidebar? But still be able to access them by URL?

Question

I'm trying to do some stuff in Storybook. I have a component called Button and there are too many stories on the sidebar.

Is there a way to be able to "hide" the stories on the sidebar but having the stories still loading in? So basically for example if I could hide the "With Text Only" story but have the story is loaded in so you could still access it at the url "http://localhost:9001/?path=/story/ccfk-%F0%9F%A7%A9-%E2%A0%80components-button--with-text-only" or access it using addon-links.

I'm unsure if this is possible or not and would really appreciate any help, thank you!

Achaean

Maybe it's late but you can check this: github.com/storybookjs/storybook/issues/… – Cool

Answer 1

You can add a style with display: none for the story id in manager-head.html. This will hide the story link from side panel(but doesn't remove it from accessing it from URL).

Each side panel item has the css id same as the story id. So if you want to hide a button/withTextOnly story then below style in .storybook/manager-head.html will hide it.

<style>#components-button--with-text-only { display: none;}</style>

Erminia

Thanks, Amith. Nice simple workaround. I hope at some point this gets included as a proper features for Storybook – Gaseous

Answer 2

Thanks for your answer above, Amith!

It's too bad that Storybook doesn't allow us to specify 'docsMode' at the story level, which would easily support this scenario :(

I wanted to add that another way to implement your workaround is by adding a style to the .storybook\main.js configuration, if somebody is not already using a .storybook/manager-head.html file. That's the case for me, and here's how I handled it:

.storybook\main.js

const config = {
    'stories': [
        ...
    ],

    docs: {
        autodocs: true,
    },

    managerHead: (head) => `
        ${head}
        <style>a[id$="--docs-only"] { display: none; }</style>
    `,

    ...
};

export default config;

MyComponent.stories.js

import React from 'react';
...

export default {
    ...
};

export const DocsOnly = {};

The a[id$="--docs-only"] CSS selector in .storybook\main.js will match any DOM element with an id that ends with --docs-only, which is the pattern that Storybook produces for any story exports that are named DocsOnly (as seen in my MyComponent.stories.js example).

Pentagrid

Answer 3

According to the docs here, to hide a story from the sidebar, you can also set your tags at the story level to tags: ['!dev'].

So your story object might look like this:

// assuming you're using React components.
const astory = {
  tags: ['!dev'],
  render: () => {
  // JSX here
  }
}

I hope that helps.

Witherite

Answer 4

Adding to ozman's answer which works great for me...

I changed the selector in head CSS to div[data-item-id$="--docs-only"] to hide the entire sidebar item, not just the

Canker