Storybook: Expand all categories

[mnmtanish]

@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[bot]]

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.