Skip to content

Commit

Permalink
Addon-docs: Make new code panel opt in
Browse files Browse the repository at this point in the history
  • Loading branch information
shilman committed Jan 12, 2025
1 parent f43a567 commit b451851
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 13 deletions.
9 changes: 5 additions & 4 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -434,7 +434,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,
Expand All @@ -444,15 +444,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,
},
},
};
Expand Down
12 changes: 3 additions & 9 deletions code/addons/docs/src/manager.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<{
Expand Down

0 comments on commit b451851

Please sign in to comment.