Expand all categories

[thani-sh]

@arunoda

It'll be easier to navigate if categories are always expanded. Even when there are many stories, as long as they're sorted alphabetically it won't take much effort to scroll to the category we're interested. And we also have filters to help for long lists.

[arunoda]

This is a good feature. But I don't think we have a alphabetically sorted functionality. It should be based on the order stories has been written (loaded).

[ndelangen]

Yes, this is something I'd like to see a PR on, please wait for #1383 #151 to be completed.

[ndelangen]

I think a keyboard shortcut for this would be a big ➕

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[samjacoby]

I know this is stale, at this point, but has a solution emerged in the meantime?

[sky007]

Is there any implementation of this, I see there is an reference issue that has been merged but the documentation doesn't have an option to expand all the stories.

[shilman]

We don't have that feature -- not sure why that PR references this issue. Would you like to add it?

[wbern]

I'd like to chime in to say that I wouldn't mind all my categories being expanded from the start either.

[wbern]

I solved this in a rather crude way, but it does the trick. (@storybook/vue, version 5.1.9)

add a manager-head.html file in your .storybook directory as per docs. (https://storybook.js.org/docs/configurations/add-custom-head-tags/#add-tags-or-scripts-to-the-main-ui)

inside, put the following:

<script type="text/javascript">
    var hideStyle = document.createElement('style');
    document.head.appendChild(hideStyle);

    var hideCategories = function() {
        hideStyle.innerHTML =
            '.simplebar-content > .css-0 { visibility: hidden; }';
    };

    var showCategories = function() {
        hideStyle.innerHTML = '';
    };

    var clickCollapsedItemsUntilNoneLeft = () => {
        try {
            var items = Array.from(
                document.querySelectorAll(
                    ".simplebar-content [id^='explorer']:not([href])",
                ),
            );
            var expandedItems = Array.from(
                document.querySelectorAll(
                    ".simplebar-content [id^='explorer']:not([href]) + .css-0",
                ),
            ).map(e => e.previousSibling);

            var itemsLeftToClick = items.filter(item =>
                expandedItems.every(expandedItem => item !== expandedItem),
            );

            if (itemsLeftToClick.length > 0) {
                itemsLeftToClick.forEach(item => item.click());

                clickCollapsedItemsUntilNoneLeft();
            } else {
                // everything is now expanded, show the content!
                showCategories();
            }
        } catch (e) {
            console.error(e);

            showCategories();
        }
    };

    hideCategories();

    window.onload = clickCollapsedItemsUntilNoneLeft;
</script>

afterwards, start storybook. This file is not included in any hot reloading mechanisms by the way.

[jayrungta]

is there any support for this yet?

[shilman]

There's support for collapse all, but not AFAIK not expand all:

[atanasster]

@jayrungta - collapse all is in the menu as @shilman posted above.

Expand all is also implemented, but only with keyboard shortcuts (its not in the menu) since its not supposed to be used that often :)

The shortcut for Expand All is:
Command+Shift+DownArrow. (same as Collapse all but with down arrow opposite Up arrow)

[jayrungta]

@atanasster do you know why this is not supported as a configuration/option? Why is expanding all by default such a "bad idea"?

[atanasster]

@jayrungta - because there can be a lot of stories and expand all will take significant time. If you would prefer to have expand all in the menu, please file an issue

[lkraav]

@jayrungta - because there can be a lot of stories and expand all will take significant time. If you would prefer to have expand all in the menu, please file an issue

Storybook 5.3.19 (latest stable): I would like to have "Expand all" as project default state. Is it possible to configure or programmatically trigger?

Command+Shift+DownArrow works, so clearly the function is there.

[phun-ky]

Perhaps and old issue, but I see no configuration for this still, I know the option is there in the UI:

But no configuration option. If this is by design, maybe storybook was not intended for large component-sets?

[scscgit]

Is this feature of default expansion state still being ignored? @atanasster mentions that it may take significant time in large projects, yet paradoxically this is most important for smaller projects where it'd be way easier to skim all entries than to expand all the roots manually every single time you refresh the storybook. You also switch between two extremes of expanding/collapsing everything, yet sometimes the most logical default would be to expand all root folders while keeping the specific stories hidden. They are all combined anyway if one uses the Docs to browse them. (Actually if you're concerned about bloating the UI, you could even enable an option to automatically hide the specific stories once a different entry is selected, or not to expand them at all.)

[danielrob]

A workaround that seems pretty solid is to create an addon just like this:

.storybook/addons/expand-all/register.js

import { STORY_RENDERED } from '@storybook/core-events';
import { addons } from '@storybook/addons';

let hasExpanded = false;

addons.register('expand-all', (api) => {
  const emitter = addons.getChannel();

  emitter.on(STORY_RENDERED, () => {
    if (!hasExpanded) {
      setTimeout(api.expandAll) // Calling on the next tick after storyRendered seems to work reliably.
      hasExpanded = true;
    }
  })
});

Then, in main.js

  addons: [
    "@storybook/addon-actions/register",
    "@storybook/addon-links",
    "./addons/expand-all/register.js",

Problem sovled!

[codebear228]

@danielrob Thanks a lot, wonderful answer, you are genius hhhhhh~

[llaenowyd]

A workaround that seems pretty solid is to create an addon just like this ...

Expand-All | @a110/storybook-expand-all
This Storybook Add On aims to expand all the items in the sidebar when the Storybook launches in the browser.

I'm using it in my Storybook, seems to be working ok, thanks for pointing the way @danielrob.

[micahgodbolt]

A workaround that seems pretty solid is to create an addon just like this:

.storybook/addons/expand-all/register.js

import { STORY_RENDERED } from '@storybook/core-events';
import { addons } from '@storybook/addons';

let hasExpanded = false;

addons.register('expand-all', (api) => {
  const emitter = addons.getChannel();

  emitter.on(STORY_RENDERED, () => {
    if (!hasExpanded) {
      setTimeout(api.expandAll) // Calling on the next tick after storyRendered seems to work reliably.
      hasExpanded = true;
    }
  })
});

Then, in main.js

  addons: [
    "@storybook/addon-actions/register",
    "@storybook/addon-links",
    "./addons/expand-all/register.js",

Problem sovled!

Note that if your landing page is a MDX story, the event will be DOCS_RENDERED, not STORY_RENDERED

[llaenowyd]

I found listening for CURRENT_STORY_WAS_SET was most reliable. The listener in this add-on unregisters itself once it fires. If you try it, let me know if it's helpful or if you run into an issue.

[taylorvnoj]

Thank you for the workaround @danielrob - I'm wondering if there's an option to only have the folders open, and not the sub-stories within stories? Or is this an all or nothing

[d9k]

@wbern, #244 (comment)

I solved this in a rather crude way, but it does the trick. (@storybook/vue, version 5.1.9)

add a manager-head.html file in your .storybook directory as per docs. (https://storybook.js.org/docs/configurations/add-custom-head-tags/#add-tags-or-scripts-to-the-main-ui)
. . . . .

Fixed for Storybook v7, expand only folders:

<script id="storybook-mod-expand-all-folders" type="text/javascript">
  var clickCollapsedItemsUntilNoneLeft = () => {
    try {
      var itemsLeftToClick = Array.from(
        document.querySelectorAll(
          '#storybook-explorer-tree button.sidebar-item[data-nodetype="group"][aria-expanded="false"]',
        ),
      );

      if (itemsLeftToClick.length > 0) {
        itemsLeftToClick.forEach(item => item.click());

        clickCollapsedItemsUntilNoneLeft();
      }
    } catch (e) {
      console.error(e);
    }
  };

  window.removeEventListener('load', clickCollapsedItemsUntilNoneLeft);
  window.addEventListener('load', clickCollapsedItemsUntilNoneLeft);
</script>

To expand stories too delete [data-nodetype="group"]