Vue: Consider custom code snippet in story code panel

storybookjs · Jan 3, 2025 · 7486245 · 7486245
1 parent fbf01bd
commit 7486245
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 34 deletions.
diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } 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 } 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, {
@@ -33,14 +34,15 @@ addons.register(ADDON_ID, (api) => {
     },
     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,
       });
 
+      const [codeSnippet, setSourceCode] = useState<{
+        source?: string;
+        format?: SyntaxHighlighterFormatTypes;
+      }>({});
+
       useChannel({
         [SNIPPET_RENDERED]: ({ source, format }) => {
           setSourceCode({ source, format });
@@ -49,9 +51,25 @@ addons.register(ADDON_ID, (api) => {
 
       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
+            />
+          </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,29 @@
+export default {
+  component: globalThis.Components.Button,
+  tags: ['autodocs'],
+  parameters: {
+    chromatic: { disable: 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 */