GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-02-05 14:13:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Addon-docs: Make new code panel opt in
This commit is contained in:
Valentin Palkovic 2025-01-13 10:21:59 +01:00 committed by GitHub
commit 909605c0b5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
MIGRATION.md
View File

@ -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,
},
},
};

12
code/addons/docs/src/manager.tsx
View File

@ -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<{

7
code/core/src/manager/container/Panel.tsx
View File

@ -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),