Merge pull request #30248 from storybookjs/shilman/docs-disable-codep…

…anel

Addon-docs: Make new code panel opt in

MIGRATION.md

@@ -435,7 +435,7 @@ As part of our ongoing efforts to improve the testability and debuggability of S
 In development mode, React and other libraries often include additional checks and warnings that help catch potential issues early. These checks are usually stripped out in production builds to optimize performance. However, when running tests or debugging issues in a built Storybook, having these additional checks can be incredibly valuable. One such feature is React's `act`, which ensures that all updates related to a test are processed and applied before making assertions. `act` is crucial for reliable and predictable test results, but it only works correctly when `NODE_ENV` is set to `development`.
 
 ```js
-// main.js
+// .storybook/main.js
 export default {
   features: {
     developmentModeForBuild: true,
@@ -445,15 +445,16 @@ export default {
 
 ### Added source code panel to docs
 
-Starting in 8.5, Storybook Docs (`@storybook/addon-docs`) automatically adds a new addon panel to stories that displays a source snippet beneath each story. This works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource).
+Storybook Docs (`@storybook/addon-docs`) now can automatically add a new addon panel to stories that displays a source snippet beneath each story. This is an experimental feature that works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource).
 
-If you wish to disable this panel globally, add the following line to your `.storybook/preview.js` project configuration. You can also selectively disable/enable at the story level.
+To enable this globally, add the following line to your project configuration. You can also configure at the component/story level.
 
 ```js
+// .storybook/preview.js
 export default {
   parameters: {
     docs: {
-      codePanel: false,
+      codePanel: true,
     },
   },
 };

code/addons/docs/src/manager.tsx

@@ -12,25 +12,19 @@ addons.register(ADDON_ID, (api) => {
     type: types.PANEL,
     paramKey: PARAM_KEY,
     /**
-     * This code panel can be disabled by the user by adding this parameter:
+     * This code panel can be enabled by adding this parameter:
      *
      * @example
      *
      * ```ts
      *  parameters: {
      *    docs: {
-     *      codePanel: false,
+     *      codePanel: true,
      *    },
      *  },
      * ```
      */
-    disabled: (parameters) => {
-      return (
-        !!parameters &&
-        typeof parameters[PARAM_KEY] === 'object' &&
-        parameters[PARAM_KEY].codePanel === false
-      );
-    },
+    disabled: (parameters) => !parameters?.docs?.codePanel,
     match: ({ viewMode }) => viewMode === 'story',
     render: ({ active }) => {
       const [codeSnippet, setSourceCode] = useAddonState<{

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { Addon_TypesEnum } from '@storybook/core/types';
+import { type API_LeafEntry, Addon_TypesEnum } from '@storybook/core/types';
 
 import { Consumer } from '@storybook/core/manager-api';
 import type { API, Combo } from '@storybook/core/manager-api';
@@ -16,9 +16,8 @@ const createPanelActions = memoize(1)((api) => ({
   togglePosition: () => api.togglePanelPosition(),
 }));
 
-const getPanels = memoize(1)((api: API) => {
+const getPanels = memoize(1)((api: API, story: API_LeafEntry) => {
   const allPanels = api.getElements(Addon_TypesEnum.PANEL);
-  const story = api.getCurrentStoryData();
 
   if (!allPanels || !story || story.type !== 'story') {
     return allPanels;
@@ -45,7 +44,7 @@ const getPanels = memoize(1)((api: API) => {
 });
 
 const mapper = ({ state, api }: Combo) => ({
-  panels: getPanels(api),
+  panels: getPanels(api, api.getCurrentStoryData()),
   selectedPanel: api.getSelectedPanel(),
   panelPosition: state.layout.panelPosition,
   actions: createPanelActions(api),