Merge pull request #30629 from storybookjs/version-non-patch-from-8.6…

….0-beta.7

Release: Prerelease 8.6.0-beta.8

CHANGELOG.prerelease.md

@@ -1,3 +1,8 @@
+## 8.6.0-beta.8
+
+- Addon-Test: Fix console error in build mode - [#30625](https://github.com/storybookjs/storybook/pull/30625), thanks @JReinhold!
+- Manager: Fix panel reactivity - [#30638](https://github.com/storybookjs/storybook/pull/30638), thanks @valentinpalkovic!
+
 ## 8.6.0-beta.7
 
 - Angular: Fix @angular/platform-browser/animations never available - [#30618](https://github.com/storybookjs/storybook/pull/30618), thanks @valentinpalkovic!

code/addons/test/src/manager-store.ts

@@ -2,4 +2,7 @@ import { experimental_UniversalStore } from 'storybook/internal/manager-api';
 
 import { type StoreState, storeOptions } from './constants';
 
-export const store = experimental_UniversalStore.create<StoreState>(storeOptions);
+export const store = experimental_UniversalStore.create<StoreState>({
+  ...storeOptions,
+  leader: (globalThis as any).CONFIG_TYPE === 'PRODUCTION',
+});

code/core/src/manager/container/Panel.tsx

@@ -1,58 +1,70 @@
 import type { FC } from 'react';
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 
-import { type API_LeafEntry, Addon_TypesEnum } from '@storybook/core/types';
+import { Addon_TypesEnum } from '@storybook/core/types';
 
-import { Consumer } from '@storybook/core/manager-api';
-import type { API, Combo } from '@storybook/core/manager-api';
-
-import memoize from 'memoizerific';
+import { useChannel, useStorybookApi, useStorybookState } from '@storybook/core/manager-api';
 
+import { STORY_PREPARED } from '../../core-events';
 import { AddonPanel } from '../components/panel/Panel';
 
-const createPanelActions = memoize(1)((api) => ({
-  onSelect: (panel: string) => api.setSelectedPanel(panel),
-  toggleVisibility: () => api.togglePanel(),
-  togglePosition: () => api.togglePanelPosition(),
-}));
+const Panel: FC<any> = (props) => {
+  const api = useStorybookApi();
+  const state = useStorybookState();
+  const [story, setStory] = useState(api.getCurrentStoryData());
 
-const getPanels = memoize(1)((api: API, story: API_LeafEntry) => {
-  const allPanels = api.getElements(Addon_TypesEnum.PANEL);
+  useChannel(
+    {
+      [STORY_PREPARED]: () => {
+        setStory(api.getCurrentStoryData());
+      },
+    },
+    []
+  );
 
-  if (!allPanels || !story || story.type !== 'story') {
-    return allPanels;
-  }
+  const { parameters, type } = story ?? {};
 
-  const { parameters } = story;
+  const panelActions = useMemo(
+    () => ({
+      onSelect: (panel: string) => api.setSelectedPanel(panel),
+      toggleVisibility: () => api.togglePanel(),
+      togglePosition: () => api.togglePanelPosition(),
+    }),
+    [api]
+  );
 
-  const filteredPanels: typeof allPanels = {};
-  Object.entries(allPanels).forEach(([id, panel]) => {
-    const { paramKey }: any = panel;
-    if (paramKey && parameters && parameters[paramKey] && parameters[paramKey].disable) {
-      return;
-    }
-    if (
-      panel.disabled === true ||
-      (typeof panel.disabled === 'function' && panel.disabled(parameters))
-    ) {
-      return;
+  const panels = useMemo(() => {
+    const allPanels = api.getElements(Addon_TypesEnum.PANEL);
+
+    if (!allPanels || type !== 'story') {
+      return allPanels;
     }
-    filteredPanels[id] = panel;
-  });
-
-  return filteredPanels;
-});
-
-const mapper = ({ state, api }: Combo) => ({
-  panels: getPanels(api, api.getCurrentStoryData()),
-  selectedPanel: api.getSelectedPanel(),
-  panelPosition: state.layout.panelPosition,
-  actions: createPanelActions(api),
-  shortcuts: api.getShortcutKeys(),
-});
-
-const Panel: FC<any> = (props) => (
-  <Consumer filter={mapper}>{(customProps) => <AddonPanel {...props} {...customProps} />}</Consumer>
-);
+
+    const filteredPanels: typeof allPanels = {};
+    Object.entries(allPanels).forEach(([id, p]) => {
+      const { paramKey }: any = p;
+      if (paramKey && parameters && parameters[paramKey] && parameters[paramKey].disable) {
+        return;
+      }
+      if (p.disabled === true || (typeof p.disabled === 'function' && p.disabled(parameters))) {
+        return;
+      }
+      filteredPanels[id] = p;
+    });
+
+    return filteredPanels;
+  }, [api, type, parameters]);
+
+  return (
+    <AddonPanel
+      panels={panels}
+      selectedPanel={api.getSelectedPanel()}
+      panelPosition={state.layout.panelPosition}
+      actions={panelActions}
+      shortcuts={api.getShortcutKeys()}
+      {...props}
+    />
+  );
+};
 
 export default Panel;

code/package.json

@@ -303,5 +303,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.6.0-beta.8"
 }

docs/versions/next.json

@@ -1 +1 @@
-{"version":"8.6.0-beta.7","info":{"plain":"- Angular: Fix @angular/platform-browser/animations never available - [#30618](https://github.com/storybookjs/storybook/pull/30618), thanks @valentinpalkovic!\n- Angular: Fix @angular/platform-browser/animations never available - [#30619](https://github.com/storybookjs/storybook/pull/30619), thanks @valentinpalkovic!\n- CLI: Fix peer dep issues for npm users during upgrade - [#30616](https://github.com/storybookjs/storybook/pull/30616), thanks @valentinpalkovic!"}}
+{"version":"8.6.0-beta.8","info":{"plain":"- Addon-Test: Fix console error in build mode - [#30625](https://github.com/storybookjs/storybook/pull/30625), thanks @JReinhold!\n- Manager: Fix panel reactivity - [#30638](https://github.com/storybookjs/storybook/pull/30638), thanks @valentinpalkovic!"}}