Merge pull request #30179 from storybookjs/larsrickert/code-panel-imp…

…rovements Addon-docs: Consider custom code snippet in story code panel and update styles
storybookjs · Feb 12, 2025 · 926ab54 · 926ab54
2 parents a019db8 + 1f21e81
commit 926ab54
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 33 deletions.
diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 
 import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
 import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
-import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
+import { addons, types, useChannel, useParameter } from 'storybook/internal/manager-api';
+import { ignoreSsrWarning, styled, useTheme } from 'storybook/internal/theming';
 
-import { Source } from '@storybook/blocks';
+import { Source, type SourceParameters } from '@storybook/blocks';
 
 addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
@@ -27,25 +28,46 @@ addons.register(ADDON_ID, (api) => {
     disabled: (parameters) => !parameters?.docs?.codePanel,
     match: ({ viewMode }) => viewMode === 'story',
     render: ({ active }) => {
-      const [codeSnippet, setSourceCode] = useAddonState<{
-        source: string;
-        format: SyntaxHighlighterFormatTypes;
-      }>(ADDON_ID, {
-        source: '',
-        format: 'html',
+      const parameter = useParameter(PARAM_KEY, {
+        source: { code: '' } as SourceParameters,
+        theme: 'dark',
       });
 
+      const [codeSnippet, setSourceCode] = React.useState<{
+        source?: string;
+        format?: SyntaxHighlighterFormatTypes;
+      }>({});
+
       useChannel({
         [SNIPPET_RENDERED]: ({ source, format }) => {
           setSourceCode({ source, format });
         },
       });
 
+      const theme = useTheme();
+      const isDark = theme.base !== 'light';
+
       return (
         <AddonPanel active={!!active}>
-          <Source code={codeSnippet.source} format={codeSnippet.format} dark />
+          <SourceStyles>
+            <Source
+              {...parameter.source}
+              code={parameter.source.code || codeSnippet.source}
+              format={parameter.source.format || codeSnippet.format}
+              dark={isDark}
+            />
+          </SourceStyles>
         </AddonPanel>
       );
     },
   });
 });
+
+const SourceStyles = styled.div(() => ({
+  height: '100%',
+  [`> :first-child${ignoreSsrWarning}`]: {
+    margin: 0,
+    height: '100%',
+    boxShadow: 'none',
+  },
+}));
diff --git a/code/addons/docs/template/stories/codePanel/index.stories.tsx b/code/addons/docs/template/stories/codePanel/index.stories.tsx
@@ -0,0 +1,32 @@
+export default {
+  component: globalThis.Components.Button,
+  tags: ['autodocs'],
+  parameters: {
+    chromatic: { disable: true },
+    docs: {
+      codePanel: true,
+    },
+  },
+};
+
+export const Default = { args: { label: 'Default' } };
+
+export const CustomCode = {
+  args: { label: 'Custom code' },
+  parameters: {
+    docs: {
+      source: {
+        code: '<button>Custom code</button>',
+      },
+    },
+  },
+};
+
+export const WithoutPanel = {
+  args: { label: 'Without panel' },
+  parameters: {
+    docs: {
+      codePanel: false,
+    },
+  },
+};
diff --git a/code/addons/docs/template/stories/sourcePanel/index.stories.tsx b/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
diff --git a/code/lib/blocks/src/blocks/Source.tsx b/code/lib/blocks/src/blocks/Source.tsx
@@ -11,7 +11,7 @@ import { DocsContext } from './DocsContext';
 import type { SourceContextProps, SourceItem } from './SourceContainer';
 import { SourceContext, UNKNOWN_ARGS_HASH, argsHash } from './SourceContainer';
 
-type SourceParameters = SourceCodeProps & {
+export type SourceParameters = SourceCodeProps & {
   /** Where to read the source code from, see `SourceType` */
   type?: SourceType;
   /** Transform the detected source for display */