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

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 · Edit Issue Bot Settings