[Bug]: Collapse all broken (`api.collapseAll is not a function`)

[ghengeveld]

Describe the bug

The "collapse all" action is broken. It logs an error in the console:

Uncaught TypeError: api.collapseAll is not a function

Reproduction link

https://635781f3500dd2c49e189caf-hyyihpyiuz.chromatic.com

Reproduction steps

1. Visit a Storybook
2. Open the main menu (cog icon)
3. Click "collapse all"
4. Check the browser console

System

Storybook 8.1.11

Additional context

No response

[greptile-apps[bot]]

To resolve the api.collapseAll is not a function error, implement the collapseAll function in the API and ensure it is correctly referenced in the Menu.tsx file.

1. Implement collapseAll in the API:

   • Locate the API file where other functions like toggleNav, toggleToolbar, etc., are defined.
   • Add the collapseAll function.

   // Example API implementation
   export const collapseAll = () => {
    // Logic to collapse all items
   };

2. Update Menu.tsx:

   • Ensure collapseAll is correctly imported and used in the useMenu hook.

   import { collapseAll } from 'path-to-api';
   
   const collapse = useMemo(
    () => ({
      id: 'collapse',
      title: 'Collapse all',
      onClick: () => api.collapseAll(),
      right: enableShortcuts ? <Shortcut keys={shortcutKeys.collapseAll} /> : null,
    }),
    [api, enableShortcuts, shortcutKeys]
   );

3. Ensure useExpanded.ts handles collapse events:

   • Verify that useExpanded correctly listens for STORIES_COLLAPSE_ALL events and calls the collapseAll function.

   useEffect(() => {
    if (!api) return noop;
   
    api.on(STORIES_COLLAPSE_ALL, collapseAll);
   
    return () => {
      api.off(STORIES_COLLAPSE_ALL, collapseAll);
    };
   }, [api, collapseAll]);

References

/code/core/src/manager/container/Menu.tsx /code/core/src/manager/components/sidebar/useExpanded.ts

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)