From 0186ff8da8022ec674930035c975f202cb6c1d13 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 19 Jan 2023 15:18:18 +0100
Subject: [PATCH 01/25] add new props and stories

---
 code/ui/blocks/src/blocks/Canvas.stories.tsx  | 58 ++++----------
 code/ui/blocks/src/blocks/Canvas.tsx          | 79 ++++++++++++++++---
 .../internal/InternalCanvas.stories.tsx       | 35 +++++++-
 3 files changed, 118 insertions(+), 54 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx
index 329690713f78..0194b952f39f 100644
--- a/code/ui/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Canvas, SourceState } from './Canvas';
+import { Canvas } from './Canvas';
 import { Story as StoryComponent } from './Story';
 import * as ButtonStories from '../examples/Button.stories';
 
@@ -9,58 +9,26 @@ const meta: Meta<typeof Canvas> = {
   parameters: {
     relativeCsfPaths: ['../examples/Button.stories'],
   },
-  render: (args) => {
-    return (
-      <Canvas {...args}>
-        <StoryComponent of={ButtonStories.Primary} />
-      </Canvas>
-    );
-  },
 };
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const BasicStory: Story = {};
-
-export const WithSourceOpen: Story = {
-  args: {
-    withSource: SourceState.OPEN,
-  },
-};
-export const WithSourceClosed: Story = {
-  args: {
-    withSource: SourceState.CLOSED,
-  },
-};
-
-export const WithMdxSource: Story = {
-  name: 'With MDX Source',
+export const Default: Story = {
   args: {
-    withSource: SourceState.OPEN,
-    mdxSource: `<Button
-  label="Button"
-  primary
-  onClick={() => {
-    console.log('this is custom source for the source viewer')
-  }}
-/>`,
-  },
-};
-
-export const WithoutSource: Story = {
-  args: {
-    withSource: SourceState.NONE,
+    of: ButtonStories.Primary,
   },
 };
 
 export const WithToolbar: Story = {
   args: {
+    of: ButtonStories.Primary,
     withToolbar: true,
   },
 };
 export const WithAdditionalActions: Story = {
   args: {
+    of: ButtonStories.Primary,
     additionalActions: [
       {
         title: 'Open in GitHub',
@@ -84,7 +52,14 @@ export const WithAdditionalActions: Story = {
   },
 };
 
-const ClassNameStoryDescripition = () => (
+export const SourceStateShown: Story = {
+  args: {
+    of: ButtonStories.Primary,
+    sourceState: 'shown',
+  },
+};
+
+const ClassNameStoryDescription = () => (
   <p>
     This story sets the <code>className</code> prop on the <code>Canvas</code> to{' '}
     <code>my-custom-classname</code>, which will propagate to the preview element. To demonstrate
@@ -97,11 +72,12 @@ const ClassNameStoryDescripition = () => (
 export const ClassName: Story = {
   name: 'ClassName',
   args: {
+    of: ButtonStories.Primary,
     className: 'my-custom-classname',
   },
   render: (args) => (
     <>
-      <ClassNameStoryDescripition />
+      <ClassNameStoryDescription />
       <style>
         {`
           .my-custom-classname {
@@ -109,9 +85,7 @@ export const ClassName: Story = {
           }
         `}
       </style>
-      <Canvas {...args}>
-        <StoryComponent of={ButtonStories.Primary} />
-      </Canvas>
+      <Canvas {...args} />
     </>
   ),
 };
diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 6ccd43f49650..068156e49e65 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -1,26 +1,48 @@
 import React, { Children, useContext } from 'react';
 import type { FC, ReactElement, ReactNode } from 'react';
-import type { Renderer } from '@storybook/types';
+import type { ModuleExport, Renderer } from '@storybook/types';
 import type { PreviewProps as PurePreviewProps } from '../components';
 import { Preview as PurePreview, PreviewSkeleton } from '../components';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
 import type { SourceContextProps } from './SourceContainer';
 import { SourceContext } from './SourceContainer';
-import { useSourceProps, SourceState } from './Source';
+import { useSourceProps, SourceState as DeprecatedSourceState, SourceState } from './Source';
 import { useStories } from './useStory';
-import { getStoryId } from './Story';
+import { getStoryId, Story } from './Story';
 
-export { SourceState };
+export { DeprecatedSourceState as SourceState };
 
-type CanvasProps = Omit<PurePreviewProps, 'isExpanded' | 'isLoading'> & {
-  withSource?: SourceState;
+const sourceStateMap: Record<CanvasProps['sourceState'], SourceState> = {
+  shown: SourceState.OPEN,
+  hidden: SourceState.CLOSED,
+  none: SourceState.NONE,
+};
+
+type DeprecatedCanvasProps = Omit<
+  PurePreviewProps,
+  'isExpanded' | 'isLoading' | 'withToolbar' | 'additionalActions' | 'className'
+> & {
+  /**
+   * @deprecated use `sourceState` instead
+   */
+  withSource?: DeprecatedSourceState;
+  /**
+   * @deprecated use `source.code` instead
+   */
   mdxSource?: string;
   children?: ReactNode;
 };
 
-const usePreviewProps = (
-  { withSource, mdxSource, children, ...props }: CanvasProps,
+type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' | 'className'> & {
+  of: ModuleExport;
+  sourceState?: 'hidden' | 'shown' | 'none';
+  source?: any; // TODO: get from Source component (and or block) when that is ready
+  story?: any; // TODO: get from Story component (and or block) when that is ready
+};
+
+const useDeprecatedPreviewProps = (
+  { withSource, mdxSource, children, ...props }: DeprecatedCanvasProps,
   docsContext: DocsContextProps<Renderer>,
   sourceContext: SourceContextProps
 ) => {
@@ -54,11 +76,46 @@ const usePreviewProps = (
   };
 };
 
-export const Canvas: FC<CanvasProps> = (props) => {
+export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
   const docsContext = useContext(DocsContext);
   const sourceContext = useContext(SourceContext);
-  const { isLoading, previewProps } = usePreviewProps(props, docsContext, sourceContext);
-  const { children } = props;
+  const {
+    children,
+    of,
+    story: storyProps,
+    sourceState = 'hidden',
+    source,
+    withToolbar,
+    additionalActions,
+    className,
+  } = props;
+  const sourceProps = useSourceProps(
+    {
+      ...source,
+      of,
+      state: sourceStateMap[sourceState],
+    },
+    docsContext,
+    sourceContext
+  );
+  const { isLoading, previewProps } = useDeprecatedPreviewProps(props, docsContext, sourceContext);
+
+  if (of) {
+    // TODO: loading?
+    return (
+      <PurePreview
+        withSource={sourceProps}
+        withToolbar={withToolbar}
+        additionalActions={additionalActions}
+        className={className}
+      >
+        <Story of={of} {...storyProps} />
+      </PurePreview>
+    );
+  }
+  if (!of && !children) {
+    throw new Error('No story passed to the Canvas block. Did you forget to pass the `of` prop?');
+  }
 
   if (isLoading) return <PreviewSkeleton />;
 
diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
index 1f4b4ffddcd0..fc800c2f3dcc 100644
--- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { Canvas } from '../Canvas';
+import { Canvas, SourceState } from '../Canvas';
 import { Story as StoryComponent } from '../Story';
 import * as ButtonStories from '../../examples/Button.stories';
 
@@ -44,6 +44,39 @@ const expectAmountOfStoriesInSource =
     await expect(booleanControlNodes).toHaveLength(amount);
   };
 
+export const BasicStoryChild: Story = {};
+
+export const WithSourceOpen: Story = {
+  args: {
+    withSource: SourceState.OPEN,
+  },
+};
+export const WithSourceClosed: Story = {
+  args: {
+    withSource: SourceState.CLOSED,
+  },
+};
+
+export const WithMdxSource: Story = {
+  name: 'With MDX Source',
+  args: {
+    withSource: SourceState.OPEN,
+    mdxSource: `<Button
+  label="Button"
+  primary
+  onClick={() => {
+    console.log('this is custom source for the source viewer')
+  }}
+/>`,
+  },
+};
+
+export const WithoutSource: Story = {
+  args: {
+    withSource: SourceState.NONE,
+  },
+};
+
 export const MultipleChildren: Story = {
   render: (args) => {
     return (

From 40beb217bbf7afeebac8b8ff616cc98958b7e1e6 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 19 Jan 2023 16:26:17 +0100
Subject: [PATCH 02/25] support source props

---
 code/ui/blocks/src/blocks/Canvas.stories.tsx | 34 +++++++++++++++++++-
 code/ui/blocks/src/blocks/Canvas.tsx         | 13 +++++---
 code/ui/blocks/src/blocks/Source.tsx         |  6 ++--
 3 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx
index 0194b952f39f..21286a463562 100644
--- a/code/ui/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx
@@ -1,14 +1,20 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Canvas } from './Canvas';
-import { Story as StoryComponent } from './Story';
+import SourceStoriesMeta from './Source.stories';
 import * as ButtonStories from '../examples/Button.stories';
 
 const meta: Meta<typeof Canvas> = {
   component: Canvas,
   parameters: {
     relativeCsfPaths: ['../examples/Button.stories'],
+    snippets: {
+      'storybook-blocks-example-button--primary': {
+        code: `const emitted = 'source';`,
+      },
+    },
   },
+  decorators: SourceStoriesMeta.decorators,
 };
 export default meta;
 
@@ -59,6 +65,32 @@ export const SourceStateShown: Story = {
   },
 };
 
+export const SourceStateHidden: Story = {
+  args: {
+    of: ButtonStories.Primary,
+    sourceState: 'hidden',
+  },
+};
+
+export const SourceStateNone: Story = {
+  args: {
+    of: ButtonStories.Primary,
+    sourceState: 'none',
+  },
+};
+
+export const WithSourceProps: Story = {
+  args: {
+    of: ButtonStories.Primary,
+    sourceState: 'shown',
+    source: {
+      language: 'html',
+      code: '<button>           Button          </button>', // spaces should be removed by the prettier formatter
+      format: 'html',
+    },
+  },
+};
+
 const ClassNameStoryDescription = () => (
   <p>
     This story sets the <code>className</code> prop on the <code>Canvas</code> to{' '}
diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 068156e49e65..2e9a92ebda99 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -7,6 +7,7 @@ import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
 import type { SourceContextProps } from './SourceContainer';
 import { SourceContext } from './SourceContainer';
+import type { SourceProps } from './Source';
 import { useSourceProps, SourceState as DeprecatedSourceState, SourceState } from './Source';
 import { useStories } from './useStory';
 import { getStoryId, Story } from './Story';
@@ -37,7 +38,7 @@ type DeprecatedCanvasProps = Omit<
 type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' | 'className'> & {
   of: ModuleExport;
   sourceState?: 'hidden' | 'shown' | 'none';
-  source?: any; // TODO: get from Source component (and or block) when that is ready
+  source?: Omit<SourceProps, 'dark'>;
   story?: any; // TODO: get from Story component (and or block) when that is ready
 };
 
@@ -100,11 +101,16 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
   );
   const { isLoading, previewProps } = useDeprecatedPreviewProps(props, docsContext, sourceContext);
 
+  if (!of && !children) {
+    throw new Error('No story passed to the Canvas block. Did you forget to pass the `of` prop?');
+  }
+
   if (of) {
     // TODO: loading?
     return (
       <PurePreview
-        withSource={sourceProps}
+        withSource={sourceState === 'none' ? undefined : sourceProps}
+        isExpanded={sourceState === 'shown'}
         withToolbar={withToolbar}
         additionalActions={additionalActions}
         className={className}
@@ -113,9 +119,6 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
       </PurePreview>
     );
   }
-  if (!of && !children) {
-    throw new Error('No story passed to the Canvas block. Did you forget to pass the `of` prop?');
-  }
 
   if (isLoading) return <PreviewSkeleton />;
 
diff --git a/code/ui/blocks/src/blocks/Source.tsx b/code/ui/blocks/src/blocks/Source.tsx
index a990dd7c87f0..03e0653ce3ec 100644
--- a/code/ui/blocks/src/blocks/Source.tsx
+++ b/code/ui/blocks/src/blocks/Source.tsx
@@ -33,7 +33,7 @@ type SourceParameters = SourceCodeProps & {
   originalSource?: string;
 };
 
-type SourceProps = Omit<SourceParameters, 'transformSource' | 'storySource'> & {
+export type SourceProps = Omit<SourceParameters, 'transformSource' | 'storySource'> & {
   /**
    * Pass the export defining a story to render its source
    *
@@ -112,14 +112,13 @@ export const useSourceProps = (
   // The check didn't actually change the type.
   let stories: PreparedStory[] = storiesFromIds as PreparedStory[];
   if (props.of) {
-    const resolved = docsContext.resolveModuleExport(props.of);
+    const resolved = docsContext.resolveOf(props.of);
     if (resolved.type !== 'story')
       throw new Error(`Invalid value passed to the 'of' prop, it should be a story export.`);
     stories = [resolved.story];
   } else if (stories.length === 0) {
     stories = [docsContext.storyById()];
   }
-
   const sourceParameters = (stories[0].parameters.docs?.source || {}) as SourceParameters;
   let { code } = props; // We will fall back to `sourceParameters.code`, but per story below
   let format = props.format ?? sourceParameters.format;
@@ -140,7 +139,6 @@ export const useSourceProps = (
   }
 
   const state = getSourceState(stories as PreparedStory[]);
-
   return code
     ? {
         code,

From d6ad83dcb08896fbb12a760969ddb2e979c83937 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 19 Jan 2023 16:32:59 +0100
Subject: [PATCH 03/25] fix sourceState

---
 code/ui/blocks/src/blocks/Canvas.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 2e9a92ebda99..0c719c7d212c 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -14,12 +14,6 @@ import { getStoryId, Story } from './Story';
 
 export { DeprecatedSourceState as SourceState };
 
-const sourceStateMap: Record<CanvasProps['sourceState'], SourceState> = {
-  shown: SourceState.OPEN,
-  hidden: SourceState.CLOSED,
-  none: SourceState.NONE,
-};
-
 type DeprecatedCanvasProps = Omit<
   PurePreviewProps,
   'isExpanded' | 'isLoading' | 'withToolbar' | 'additionalActions' | 'className'
@@ -94,7 +88,6 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
     {
       ...source,
       of,
-      state: sourceStateMap[sourceState],
     },
     docsContext,
     sourceContext

From 52d9c5f80197f17caad991e8f79fe416eec6b25a Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 19 Jan 2023 20:57:20 +0100
Subject: [PATCH 04/25] support story props

---
 code/ui/blocks/src/blocks/Canvas.stories.tsx | 16 +++++++++++++++-
 code/ui/blocks/src/blocks/Canvas.tsx         |  3 ++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx
index 21286a463562..7d4468b66a92 100644
--- a/code/ui/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx
@@ -20,7 +20,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const DefaultAttached: Story = {
   args: {
     of: ButtonStories.Primary,
   },
@@ -91,6 +91,20 @@ export const WithSourceProps: Story = {
   },
 };
 
+export const WithInlineStoryProps: Story = {
+  args: {
+    of: ButtonStories.Primary,
+    story: { inline: false, height: '200px' },
+  },
+};
+
+export const WithAutoplayingStory: Story = {
+  args: {
+    of: ButtonStories.Clicking,
+    story: { autoplay: true },
+  },
+};
+
 const ClassNameStoryDescription = () => (
   <p>
     This story sets the <code>className</code> prop on the <code>Canvas</code> to{' '}
diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 0c719c7d212c..690d64b823b1 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -10,6 +10,7 @@ import { SourceContext } from './SourceContainer';
 import type { SourceProps } from './Source';
 import { useSourceProps, SourceState as DeprecatedSourceState, SourceState } from './Source';
 import { useStories } from './useStory';
+import type { StoryProps } from './Story';
 import { getStoryId, Story } from './Story';
 
 export { DeprecatedSourceState as SourceState };
@@ -33,7 +34,7 @@ type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' |
   of: ModuleExport;
   sourceState?: 'hidden' | 'shown' | 'none';
   source?: Omit<SourceProps, 'dark'>;
-  story?: any; // TODO: get from Story component (and or block) when that is ready
+  story?: Pick<StoryProps, 'inline' | 'height' | 'autoplay'>;
 };
 
 const useDeprecatedPreviewProps = (

From f7eb5ded10dfb9a7c71285ef07fafa44ed656ad8 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 19 Jan 2023 21:17:07 +0100
Subject: [PATCH 05/25] support layout prop

---
 code/ui/blocks/src/blocks/Canvas.stories.tsx | 30 ++++++++++++++++----
 code/ui/blocks/src/blocks/Canvas.tsx         | 20 ++++++++++++-
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx
index 7d4468b66a92..33f63e31f3d2 100644
--- a/code/ui/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx
@@ -32,7 +32,7 @@ export const WithToolbar: Story = {
     withToolbar: true,
   },
 };
-export const WithAdditionalActions: Story = {
+export const AdditionalActions: Story = {
   args: {
     of: ButtonStories.Primary,
     additionalActions: [
@@ -79,10 +79,30 @@ export const SourceStateNone: Story = {
   },
 };
 
-export const WithSourceProps: Story = {
+export const LayoutFullscreen: Story = {
+  args: {
+    of: ButtonStories.Primary,
+    layout: 'fullscreen',
+  },
+};
+
+export const LayoutCentered: Story = {
+  args: {
+    of: ButtonStories.Primary,
+    layout: 'centered',
+  },
+};
+
+export const LayoutPadded: Story = {
+  args: {
+    of: ButtonStories.Primary,
+    layout: 'padded',
+  },
+};
+
+export const SourceProps: Story = {
   args: {
     of: ButtonStories.Primary,
-    sourceState: 'shown',
     source: {
       language: 'html',
       code: '<button>           Button          </button>', // spaces should be removed by the prettier formatter
@@ -91,14 +111,14 @@ export const WithSourceProps: Story = {
   },
 };
 
-export const WithInlineStoryProps: Story = {
+export const InlineStoryProps: Story = {
   args: {
     of: ButtonStories.Primary,
     story: { inline: false, height: '200px' },
   },
 };
 
-export const WithAutoplayingStory: Story = {
+export const AutoplayingStory: Story = {
   args: {
     of: ButtonStories.Clicking,
     story: { autoplay: true },
diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 690d64b823b1..50a76c1f1ecc 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -35,6 +35,7 @@ type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' |
   sourceState?: 'hidden' | 'shown' | 'none';
   source?: Omit<SourceProps, 'dark'>;
   story?: Pick<StoryProps, 'inline' | 'height' | 'autoplay'>;
+  layout?: 'padded' | 'centered' | 'fullscreen';
 };
 
 const useDeprecatedPreviewProps = (
@@ -80,6 +81,7 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
     of,
     story: storyProps,
     sourceState = 'hidden',
+    layout: layoutProp,
     source,
     withToolbar,
     additionalActions,
@@ -101,6 +103,10 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
 
   if (of) {
     // TODO: loading?
+
+    const layout =
+      layoutProp || of.parameters?.layout || of.parameters?.docs?.canvas?.layout || 'padded';
+
     return (
       <PurePreview
         withSource={sourceState === 'none' ? undefined : sourceProps}
@@ -109,7 +115,19 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
         additionalActions={additionalActions}
         className={className}
       >
-        <Story of={of} {...storyProps} />
+        <Story
+          of={of}
+          {...storyProps}
+          parameters={
+            /**
+             * this is a hack, Story v2 doesn't read from the 2parameters" prop
+             * But PurePreview determines the layout from it's first child's "parameters.layout" prop
+             * So by passing the layout as a parameter, we can force the layout
+             * TODO: remove this pattern once all the deprecated features can be removed
+             */
+            { layout }
+          }
+        />
       </PurePreview>
     );
   }

From 77f0c6a25f451377e9c7deec640314539e20b095 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 20 Jan 2023 12:25:53 +0100
Subject: [PATCH 06/25] disable sourcecontext

---
 code/ui/blocks/src/blocks/Canvas.stories.tsx  | 19 +++++++++++++------
 code/ui/blocks/src/blocks/Canvas.tsx          |  2 +-
 .../internal/InternalCanvas.stories.tsx       | 11 +++++++++--
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx
index 33f63e31f3d2..2c3f2a8d1d56 100644
--- a/code/ui/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx
@@ -8,13 +8,13 @@ const meta: Meta<typeof Canvas> = {
   component: Canvas,
   parameters: {
     relativeCsfPaths: ['../examples/Button.stories'],
-    snippets: {
-      'storybook-blocks-example-button--primary': {
-        code: `const emitted = 'source';`,
-      },
-    },
+    // snippets: {
+    //   'storybook-blocks-example-button--primary': {
+    //     code: `const emitted = 'source';`,
+    //   },
+    // },
   },
-  decorators: SourceStoriesMeta.decorators,
+  // decorators: SourceStoriesMeta.decorators,
 };
 export default meta;
 
@@ -26,6 +26,13 @@ export const DefaultAttached: Story = {
   },
 };
 
+export const DefaultUnattached: Story = {
+  args: {
+    of: ButtonStories.Primary,
+  },
+  parameters: { attached: false },
+};
+
 export const WithToolbar: Story = {
   args: {
     of: ButtonStories.Primary,
diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 50a76c1f1ecc..6f3195cbd3b2 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -39,7 +39,7 @@ type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' |
 };
 
 const useDeprecatedPreviewProps = (
-  { withSource, mdxSource, children, ...props }: DeprecatedCanvasProps,
+  { withSource, mdxSource, children, ...props }: DeprecatedCanvasProps & { of: ModuleExport },
   docsContext: DocsContextProps<Renderer>,
   sourceContext: SourceContextProps
 ) => {
diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
index fc800c2f3dcc..c62b6c6eab35 100644
--- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
@@ -7,6 +7,7 @@ import { expect } from '@storybook/jest';
 import { Canvas, SourceState } from '../Canvas';
 import { Story as StoryComponent } from '../Story';
 import * as ButtonStories from '../../examples/Button.stories';
+import SourceStoriesMeta from '../Source.stories';
 
 const meta: Meta<typeof Canvas> = {
   title: 'Blocks/Internal/Canvas',
@@ -14,7 +15,13 @@ const meta: Meta<typeof Canvas> = {
   parameters: {
     theme: 'light',
     relativeCsfPaths: ['../examples/Button.stories'],
+    //   snippets: {
+    //     'storybook-blocks-example-button--primary': {
+    //       code: `const emitted = 'source';`,
   },
+  // },
+  // },
+  // decorators: SourceStoriesMeta.decorators,
   render: (args) => {
     return (
       <Canvas {...args}>
@@ -40,8 +47,8 @@ const expectAmountOfStoriesInSource =
     await userEvent.click(showCodeButton);
 
     // Assert - check that the correct amount of stories' source is shown
-    const booleanControlNodes = await canvas.findAllByText(`label`);
-    await expect(booleanControlNodes).toHaveLength(amount);
+    const buttonNodes = await canvas.findAllByText(`label`);
+    await expect(buttonNodes).toHaveLength(amount);
   };
 
 export const BasicStoryChild: Story = {};

From 5eb25d0358bb9a99f7b383abb98f0cace9e14347 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 20 Jan 2023 15:02:42 +0100
Subject: [PATCH 07/25] add stories for layout parameters

---
 code/ui/blocks/src/blocks/Canvas.stories.tsx  | 78 ++++++++++++++-----
 code/ui/blocks/src/blocks/Canvas.tsx          |  2 +-
 .../src/examples/CanvasParameters.stories.tsx | 31 ++++++++
 3 files changed, 89 insertions(+), 22 deletions(-)
 create mode 100644 code/ui/blocks/src/examples/CanvasParameters.stories.tsx

diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx
index 2c3f2a8d1d56..6b85f88cb4e7 100644
--- a/code/ui/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx
@@ -1,20 +1,14 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Canvas } from './Canvas';
-import SourceStoriesMeta from './Source.stories';
 import * as ButtonStories from '../examples/Button.stories';
+import * as ParameterStories from '../examples/CanvasParameters.stories';
 
 const meta: Meta<typeof Canvas> = {
   component: Canvas,
   parameters: {
-    relativeCsfPaths: ['../examples/Button.stories'],
-    // snippets: {
-    //   'storybook-blocks-example-button--primary': {
-    //     code: `const emitted = 'source';`,
-    //   },
-    // },
+    relativeCsfPaths: ['../examples/Button.stories', '../examples/CanvasParameters.stories'],
   },
-  // decorators: SourceStoriesMeta.decorators,
 };
 export default meta;
 
@@ -33,13 +27,13 @@ export const DefaultUnattached: Story = {
   parameters: { attached: false },
 };
 
-export const WithToolbar: Story = {
+export const PropWithToolbar: Story = {
   args: {
     of: ButtonStories.Primary,
     withToolbar: true,
   },
 };
-export const AdditionalActions: Story = {
+export const PropAdditionalActions: Story = {
   args: {
     of: ButtonStories.Primary,
     additionalActions: [
@@ -65,49 +59,91 @@ export const AdditionalActions: Story = {
   },
 };
 
-export const SourceStateShown: Story = {
+export const PropSourceStateShown: Story = {
   args: {
     of: ButtonStories.Primary,
     sourceState: 'shown',
   },
 };
 
-export const SourceStateHidden: Story = {
+export const PropSourceStateHidden: Story = {
   args: {
     of: ButtonStories.Primary,
     sourceState: 'hidden',
   },
 };
 
-export const SourceStateNone: Story = {
+export const PropSourceStateNone: Story = {
   args: {
     of: ButtonStories.Primary,
     sourceState: 'none',
   },
 };
 
-export const LayoutFullscreen: Story = {
+export const PropLayoutFullscreen: Story = {
   args: {
     of: ButtonStories.Primary,
     layout: 'fullscreen',
   },
 };
 
-export const LayoutCentered: Story = {
+export const PropLayoutCentered: Story = {
   args: {
     of: ButtonStories.Primary,
     layout: 'centered',
   },
 };
 
-export const LayoutPadded: Story = {
+export const PropLayoutPadded: Story = {
   args: {
     of: ButtonStories.Primary,
     layout: 'padded',
   },
 };
 
-export const SourceProps: Story = {
+export const ParameterDocsCanvasLayoutFullscreen: Story = {
+  name: 'parameters.docs.canvas.layout = fullscreen',
+  args: {
+    of: ParameterStories.DocsCanvasLayoutFullscreen,
+  },
+};
+
+export const ParameterDocsCanvasLayoutCentered: Story = {
+  name: 'parameters.docs.canvas.layout = centered',
+  args: {
+    of: ParameterStories.DocsCanvasLayoutCentered,
+  },
+};
+
+export const ParameterDocsCanvasLayoutPadded: Story = {
+  name: 'parameters.docs.canvas.layout = padded',
+  args: {
+    of: ParameterStories.DocsCanvasLayoutPadded,
+  },
+};
+
+export const ParameterLayoutFullscreen: Story = {
+  name: 'parameters.layout = fullscreen',
+  args: {
+    of: ParameterStories.LayoutFullscreen,
+  },
+};
+
+export const ParameterLayoutCentered: Story = {
+  name: 'parameters.layout = centered',
+  args: {
+    of: ParameterStories.LayoutCentered,
+  },
+};
+
+export const ParameterLayoutPadded: Story = {
+  name: 'parameters.layout = padded',
+  args: {
+    of: ParameterStories.LayoutPadded,
+  },
+};
+
+export const PropSource: Story = {
   args: {
     of: ButtonStories.Primary,
     source: {
@@ -118,14 +154,14 @@ export const SourceProps: Story = {
   },
 };
 
-export const InlineStoryProps: Story = {
+export const PropInlineStory: Story = {
   args: {
     of: ButtonStories.Primary,
     story: { inline: false, height: '200px' },
   },
 };
 
-export const AutoplayingStory: Story = {
+export const PropAutoplayingStory: Story = {
   args: {
     of: ButtonStories.Clicking,
     story: { autoplay: true },
@@ -142,8 +178,8 @@ const ClassNameStoryDescription = () => (
 /**
  * This is a comment on classname
  */
-export const ClassName: Story = {
-  name: 'ClassName',
+export const PropClassName: Story = {
+  name: 'Prop ClassName',
   args: {
     of: ButtonStories.Primary,
     className: 'my-custom-classname',
diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 6f3195cbd3b2..5972fa64ad27 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -55,7 +55,7 @@ const useDeprecatedPreviewProps = (
   const stories = useStories(storyIds, docsContext);
   const isLoading = stories.some((s) => !s);
   const sourceProps = useSourceProps(
-    mdxSource ? { code: decodeURI(mdxSource) } : { ids: storyIds },
+    mdxSource ? { code: decodeURI(mdxSource), of: props.of } : { ids: storyIds, of: props.of },
     docsContext,
     sourceContext
   );
diff --git a/code/ui/blocks/src/examples/CanvasParameters.stories.tsx b/code/ui/blocks/src/examples/CanvasParameters.stories.tsx
new file mode 100644
index 000000000000..9d52e90c1a90
--- /dev/null
+++ b/code/ui/blocks/src/examples/CanvasParameters.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EmptyExample } from './EmptyExample';
+
+const meta = {
+  title: 'example/CanvasParameters',
+  component: EmptyExample,
+} satisfies Meta<typeof EmptyExample>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LayoutFullscreen: Story = {
+  parameters: { layout: 'fullscreen' },
+};
+export const LayoutPadded: Story = {
+  parameters: { layout: 'padded' },
+};
+export const LayoutCentered: Story = {
+  parameters: { layout: 'centered' },
+};
+
+export const DocsCanvasLayoutFullscreen: Story = {
+  parameters: { docs: { canvas: { layout: 'fullscreen' } } },
+};
+export const DocsCanvasLayoutPadded: Story = {
+  parameters: { docs: { canvas: { layout: 'padded' } } },
+};
+export const DocsCanvasLayoutCentered: Story = {
+  parameters: { docs: { canvas: { layout: 'centered' } } },
+};

From a5f14bf500e2840eccc4612dc0ec169968695281 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 20 Jan 2023 15:33:03 +0100
Subject: [PATCH 08/25] support parameters

---
 code/ui/blocks/src/blocks/Canvas.stories.tsx  | 73 ++++++++++++++++++-
 code/ui/blocks/src/blocks/Canvas.tsx          | 33 +++------
 .../src/examples/CanvasParameters.stories.tsx | 50 +++++++++++++
 3 files changed, 130 insertions(+), 26 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx
index 6b85f88cb4e7..7bd2890a2db7 100644
--- a/code/ui/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx
@@ -3,11 +3,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Canvas } from './Canvas';
 import * as ButtonStories from '../examples/Button.stories';
 import * as ParameterStories from '../examples/CanvasParameters.stories';
+import * as SourceParameterStories from '../examples/SourceParameters.stories';
 
 const meta: Meta<typeof Canvas> = {
   component: Canvas,
   parameters: {
-    relativeCsfPaths: ['../examples/Button.stories', '../examples/CanvasParameters.stories'],
+    relativeCsfPaths: [
+      '../examples/Button.stories',
+      '../examples/CanvasParameters.stories',
+      '../examples/SourceParameters.stories',
+    ],
   },
 };
 export default meta;
@@ -33,6 +38,12 @@ export const PropWithToolbar: Story = {
     withToolbar: true,
   },
 };
+export const ParameterWithToolbar: Story = {
+  name: 'parameters.docs.canvas.withToolbar = true',
+  args: {
+    of: ParameterStories.WithToolbar,
+  },
+};
 export const PropAdditionalActions: Story = {
   args: {
     of: ButtonStories.Primary,
@@ -58,6 +69,12 @@ export const PropAdditionalActions: Story = {
     ],
   },
 };
+export const ParameterAdditionalActions: Story = {
+  name: 'parameters.docs.canvas.additionalActions = [ ... ]',
+  args: {
+    of: ParameterStories.AdditionalActions,
+  },
+};
 
 export const PropSourceStateShown: Story = {
   args: {
@@ -79,6 +96,26 @@ export const PropSourceStateNone: Story = {
     sourceState: 'none',
   },
 };
+export const ParametersSourceStateShown: Story = {
+  name: 'parameters.docs.canvas.sourceState = shown',
+  args: {
+    of: ParameterStories.SourceStateShown,
+  },
+};
+
+export const ParametersSourceStateHidden: Story = {
+  name: 'parameters.docs.canvas.sourceState = hidden',
+  args: {
+    of: ParameterStories.SourceStateHidden,
+  },
+};
+
+export const ParametersSourceStateNone: Story = {
+  name: 'parameters.docs.canvas.sourceState = none',
+  args: {
+    of: ParameterStories.SourceStateNone,
+  },
+};
 
 export const PropLayoutFullscreen: Story = {
   args: {
@@ -154,6 +191,12 @@ export const PropSource: Story = {
   },
 };
 
+export const ParameterSource: Story = {
+  args: {
+    of: SourceParameterStories.CodeLanguage,
+  },
+};
+
 export const PropInlineStory: Story = {
   args: {
     of: ButtonStories.Primary,
@@ -168,6 +211,11 @@ export const PropAutoplayingStory: Story = {
   },
 };
 
+export const ParameterStory: Story = {
+  args: {
+    of: ParameterStories.StoryParameters,
+  },
+};
 const ClassNameStoryDescription = () => (
   <p>
     This story sets the <code>className</code> prop on the <code>Canvas</code> to{' '}
@@ -175,9 +223,6 @@ const ClassNameStoryDescription = () => (
     this, it also adds a <code>style</code> tag that sets another background color for that class:
   </p>
 );
-/**
- * This is a comment on classname
- */
 export const PropClassName: Story = {
   name: 'Prop ClassName',
   args: {
@@ -198,3 +243,23 @@ export const PropClassName: Story = {
     </>
   ),
 };
+
+export const ParameterClassName: Story = {
+  name: 'Parameter ClassName',
+  args: {
+    of: ParameterStories.ClassName,
+  },
+  render: (args) => (
+    <>
+      <ClassNameStoryDescription />
+      <style>
+        {`
+          .my-custom-classname {
+            background-color: #fd5c9355;
+          }
+        `}
+      </style>
+      <Canvas {...args} />
+    </>
+  ),
+};
diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 5972fa64ad27..f57ffffdcca7 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Children, useContext } from 'react';
 import type { FC, ReactElement, ReactNode } from 'react';
 import type { ModuleExport, Renderer } from '@storybook/types';
@@ -76,25 +77,8 @@ const useDeprecatedPreviewProps = (
 export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
   const docsContext = useContext(DocsContext);
   const sourceContext = useContext(SourceContext);
-  const {
-    children,
-    of,
-    story: storyProps,
-    sourceState = 'hidden',
-    layout: layoutProp,
-    source,
-    withToolbar,
-    additionalActions,
-    className,
-  } = props;
-  const sourceProps = useSourceProps(
-    {
-      ...source,
-      of,
-    },
-    docsContext,
-    sourceContext
-  );
+  const { children, of, source } = props;
+  const sourceProps = useSourceProps({ ...source, of }, docsContext, sourceContext);
   const { isLoading, previewProps } = useDeprecatedPreviewProps(props, docsContext, sourceContext);
 
   if (!of && !children) {
@@ -105,7 +89,12 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
     // TODO: loading?
 
     const layout =
-      layoutProp || of.parameters?.layout || of.parameters?.docs?.canvas?.layout || 'padded';
+      props.layout ?? of.parameters?.layout ?? of.parameters?.docs?.canvas?.layout ?? 'padded';
+    const withToolbar = props.withToolbar ?? of.parameters?.docs?.canvas?.withToolbar ?? false;
+    const additionalActions =
+      props.additionalActions ?? of.parameters?.docs?.canvas?.additionalActions;
+    const sourceState = props.sourceState ?? of.parameters?.docs?.canvas?.sourceState ?? 'hidden';
+    const className = props.className ?? of.parameters?.docs?.canvas?.className;
 
     return (
       <PurePreview
@@ -117,10 +106,10 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
       >
         <Story
           of={of}
-          {...storyProps}
+          {...props.story}
           parameters={
             /**
-             * this is a hack, Story v2 doesn't read from the 2parameters" prop
+             * this is a hack, Story v2 doesn't read from the "parameters" prop
              * But PurePreview determines the layout from it's first child's "parameters.layout" prop
              * So by passing the layout as a parameter, we can force the layout
              * TODO: remove this pattern once all the deprecated features can be removed
diff --git a/code/ui/blocks/src/examples/CanvasParameters.stories.tsx b/code/ui/blocks/src/examples/CanvasParameters.stories.tsx
index 9d52e90c1a90..65905ac99dd5 100644
--- a/code/ui/blocks/src/examples/CanvasParameters.stories.tsx
+++ b/code/ui/blocks/src/examples/CanvasParameters.stories.tsx
@@ -10,6 +10,48 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const WithToolbar: Story = {
+  parameters: { docs: { canvas: { withToolbar: true } } },
+};
+export const AdditionalActions: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        additionalActions: [
+          {
+            title: 'Open in GitHub',
+            onClick: () => {
+              window.open(
+                'https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/examples/Button.stories.tsx',
+                '_blank'
+              );
+            },
+          },
+          {
+            title: 'Go to documentation',
+            onClick: () => {
+              window.open(
+                'https://storybook.js.org/docs/react/essentials/controls#annotation',
+                '_blank'
+              );
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const SourceStateShown: Story = {
+  parameters: { docs: { canvas: { sourceState: 'shown' } } },
+};
+export const SourceStateHidden: Story = {
+  parameters: { docs: { canvas: { sourceState: 'hidden' } } },
+};
+export const SourceStateNone: Story = {
+  parameters: { docs: { canvas: { sourceState: 'none' } } },
+};
+
 export const LayoutFullscreen: Story = {
   parameters: { layout: 'fullscreen' },
 };
@@ -29,3 +71,11 @@ export const DocsCanvasLayoutPadded: Story = {
 export const DocsCanvasLayoutCentered: Story = {
   parameters: { docs: { canvas: { layout: 'centered' } } },
 };
+
+export const ClassName: Story = {
+  parameters: { docs: { canvas: { className: 'my-custom-classname' } } },
+};
+
+export const StoryParameters: Story = {
+  parameters: { docs: { story: { inline: false, height: '200px' } } },
+};

From 6aa9acd90a1b6cfddb92697321476d7d97629090 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 20 Jan 2023 22:33:45 +0100
Subject: [PATCH 09/25] add meta prop, clean up stories

---
 code/ui/blocks/src/blocks/Canvas.stories.tsx | 192 ++++++++++---------
 code/ui/blocks/src/blocks/Canvas.tsx         |   4 +-
 2 files changed, 109 insertions(+), 87 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx
index 7bd2890a2db7..5e0834b2f9f3 100644
--- a/code/ui/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import dedent from 'ts-dedent';
 import { Canvas } from './Canvas';
+import SourceStoriesMeta from './Source.stories';
 import * as ButtonStories from '../examples/Button.stories';
 import * as ParameterStories from '../examples/CanvasParameters.stories';
 import * as SourceParameterStories from '../examples/SourceParameters.stories';
@@ -13,7 +15,18 @@ const meta: Meta<typeof Canvas> = {
       '../examples/CanvasParameters.stories',
       '../examples/SourceParameters.stories',
     ],
+    snippets: {
+      'storybook-blocks-example-button--primary': {
+        code: dedent`
+          <Button
+            label="Button"
+            onClick={() => {}}
+            primary={true}
+          />`,
+      },
+    },
   },
+  decorators: SourceStoriesMeta.decorators,
 };
 export default meta;
 
@@ -38,12 +51,7 @@ export const PropWithToolbar: Story = {
     withToolbar: true,
   },
 };
-export const ParameterWithToolbar: Story = {
-  name: 'parameters.docs.canvas.withToolbar = true',
-  args: {
-    of: ParameterStories.WithToolbar,
-  },
-};
+
 export const PropAdditionalActions: Story = {
   args: {
     of: ButtonStories.Primary,
@@ -69,12 +77,6 @@ export const PropAdditionalActions: Story = {
     ],
   },
 };
-export const ParameterAdditionalActions: Story = {
-  name: 'parameters.docs.canvas.additionalActions = [ ... ]',
-  args: {
-    of: ParameterStories.AdditionalActions,
-  },
-};
 
 export const PropSourceStateShown: Story = {
   args: {
@@ -96,26 +98,6 @@ export const PropSourceStateNone: Story = {
     sourceState: 'none',
   },
 };
-export const ParametersSourceStateShown: Story = {
-  name: 'parameters.docs.canvas.sourceState = shown',
-  args: {
-    of: ParameterStories.SourceStateShown,
-  },
-};
-
-export const ParametersSourceStateHidden: Story = {
-  name: 'parameters.docs.canvas.sourceState = hidden',
-  args: {
-    of: ParameterStories.SourceStateHidden,
-  },
-};
-
-export const ParametersSourceStateNone: Story = {
-  name: 'parameters.docs.canvas.sourceState = none',
-  args: {
-    of: ParameterStories.SourceStateNone,
-  },
-};
 
 export const PropLayoutFullscreen: Story = {
   args: {
@@ -138,48 +120,6 @@ export const PropLayoutPadded: Story = {
   },
 };
 
-export const ParameterDocsCanvasLayoutFullscreen: Story = {
-  name: 'parameters.docs.canvas.layout = fullscreen',
-  args: {
-    of: ParameterStories.DocsCanvasLayoutFullscreen,
-  },
-};
-
-export const ParameterDocsCanvasLayoutCentered: Story = {
-  name: 'parameters.docs.canvas.layout = centered',
-  args: {
-    of: ParameterStories.DocsCanvasLayoutCentered,
-  },
-};
-
-export const ParameterDocsCanvasLayoutPadded: Story = {
-  name: 'parameters.docs.canvas.layout = padded',
-  args: {
-    of: ParameterStories.DocsCanvasLayoutPadded,
-  },
-};
-
-export const ParameterLayoutFullscreen: Story = {
-  name: 'parameters.layout = fullscreen',
-  args: {
-    of: ParameterStories.LayoutFullscreen,
-  },
-};
-
-export const ParameterLayoutCentered: Story = {
-  name: 'parameters.layout = centered',
-  args: {
-    of: ParameterStories.LayoutCentered,
-  },
-};
-
-export const ParameterLayoutPadded: Story = {
-  name: 'parameters.layout = padded',
-  args: {
-    of: ParameterStories.LayoutPadded,
-  },
-};
-
 export const PropSource: Story = {
   args: {
     of: ButtonStories.Primary,
@@ -191,12 +131,6 @@ export const PropSource: Story = {
   },
 };
 
-export const ParameterSource: Story = {
-  args: {
-    of: SourceParameterStories.CodeLanguage,
-  },
-};
-
 export const PropInlineStory: Story = {
   args: {
     of: ButtonStories.Primary,
@@ -211,11 +145,6 @@ export const PropAutoplayingStory: Story = {
   },
 };
 
-export const ParameterStory: Story = {
-  args: {
-    of: ParameterStories.StoryParameters,
-  },
-};
 const ClassNameStoryDescription = () => (
   <p>
     This story sets the <code>className</code> prop on the <code>Canvas</code> to{' '}
@@ -244,8 +173,22 @@ export const PropClassName: Story = {
   ),
 };
 
+export const ParameterWithToolbar: Story = {
+  name: 'parameters.docs.canvas.withToolbar = true',
+  args: {
+    of: ParameterStories.WithToolbar,
+  },
+};
+
+export const ParameterAdditionalActions: Story = {
+  name: 'parameters.docs.canvas.additionalActions = [ ... ]',
+  args: {
+    of: ParameterStories.AdditionalActions,
+  },
+};
+
 export const ParameterClassName: Story = {
-  name: 'Parameter ClassName',
+  name: 'parameters.docs.canvas.className = my-custom-classname',
   args: {
     of: ParameterStories.ClassName,
   },
@@ -263,3 +206,80 @@ export const ParameterClassName: Story = {
     </>
   ),
 };
+
+export const ParametersSourceStateShown: Story = {
+  name: 'parameters.docs.canvas.sourceState = shown',
+  args: {
+    of: ParameterStories.SourceStateShown,
+  },
+};
+
+export const ParametersSourceStateHidden: Story = {
+  name: 'parameters.docs.canvas.sourceState = hidden',
+  args: {
+    of: ParameterStories.SourceStateHidden,
+  },
+};
+
+export const ParametersSourceStateNone: Story = {
+  name: 'parameters.docs.canvas.sourceState = none',
+  args: {
+    of: ParameterStories.SourceStateNone,
+  },
+};
+
+export const ParameterDocsCanvasLayoutFullscreen: Story = {
+  name: 'parameters.docs.canvas.layout = fullscreen',
+  args: {
+    of: ParameterStories.DocsCanvasLayoutFullscreen,
+  },
+};
+
+export const ParameterDocsCanvasLayoutCentered: Story = {
+  name: 'parameters.docs.canvas.layout = centered',
+  args: {
+    of: ParameterStories.DocsCanvasLayoutCentered,
+  },
+};
+
+export const ParameterDocsCanvasLayoutPadded: Story = {
+  name: 'parameters.docs.canvas.layout = padded',
+  args: {
+    of: ParameterStories.DocsCanvasLayoutPadded,
+  },
+};
+
+export const ParameterLayoutFullscreen: Story = {
+  name: 'parameters.layout = fullscreen',
+  args: {
+    of: ParameterStories.LayoutFullscreen,
+  },
+};
+
+export const ParameterLayoutCentered: Story = {
+  name: 'parameters.layout = centered',
+  args: {
+    of: ParameterStories.LayoutCentered,
+  },
+};
+
+export const ParameterLayoutPadded: Story = {
+  name: 'parameters.layout = padded',
+  args: {
+    of: ParameterStories.LayoutPadded,
+  },
+};
+
+export const ParameterSource: Story = {
+  name: 'parameters.docs.source',
+  args: {
+    of: SourceParameterStories.CodeLanguage,
+  },
+};
+
+export const ParameterStory: Story = {
+  name: 'parameters.docs.story',
+  args: {
+    of: ParameterStories.StoryParameters,
+  },
+};
diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index f57ffffdcca7..7e84314f3e85 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/destructuring-assignment */
 import React, { Children, useContext } from 'react';
 import type { FC, ReactElement, ReactNode } from 'react';
-import type { ModuleExport, Renderer } from '@storybook/types';
+import type { ModuleExport, ModuleExports, Renderer } from '@storybook/types';
 import type { PreviewProps as PurePreviewProps } from '../components';
 import { Preview as PurePreview, PreviewSkeleton } from '../components';
 import type { DocsContextProps } from './DocsContext';
@@ -33,6 +33,7 @@ type DeprecatedCanvasProps = Omit<
 
 type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' | 'className'> & {
   of: ModuleExport;
+  meta?: ModuleExports;
   sourceState?: 'hidden' | 'shown' | 'none';
   source?: Omit<SourceProps, 'dark'>;
   story?: Pick<StoryProps, 'inline' | 'height' | 'autoplay'>;
@@ -106,6 +107,7 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
       >
         <Story
           of={of}
+          meta={props.meta}
           {...props.story}
           parameters={
             /**

From 73b9c7b1b69b6a6a2ef7854fe2824e16ca625052 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Sat, 21 Jan 2023 22:25:11 +0100
Subject: [PATCH 10/25] use new Canvas API in autodocs

---
 .../preview-web/docs-context/DocsContext.ts   |  2 +-
 code/ui/blocks/src/blocks/Canvas.tsx          |  4 +--
 code/ui/blocks/src/blocks/DocsStory.tsx       | 35 +++++++------------
 code/ui/blocks/src/blocks/Primary.tsx         |  4 ++-
 code/ui/blocks/src/blocks/Stories.tsx         |  8 ++---
 code/ui/blocks/src/blocks/types.ts            | 12 +++----
 6 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts
index 02799288b716..3542e0a1919c 100644
--- a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts
+++ b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts
@@ -48,7 +48,7 @@ export class DocsContext<TRenderer extends Renderer> implements DocsContextProps
     });
   }
 
-  // This docs entry references this CSF file and can syncronously load the stories, as well
+  // This docs entry references this CSF file and can synchronously load the stories, as well
   // as reference them by module export. If the CSF is part of the "component" stories, they
   // can also be referenced by name and are in the componentStories list.
   referenceCSFFile(csfFile: CSFFile<TRenderer>) {
diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 7e84314f3e85..2d20349fe0c3 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -32,11 +32,11 @@ type DeprecatedCanvasProps = Omit<
 };
 
 type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' | 'className'> & {
-  of: ModuleExport;
+  of?: ModuleExport;
   meta?: ModuleExports;
   sourceState?: 'hidden' | 'shown' | 'none';
   source?: Omit<SourceProps, 'dark'>;
-  story?: Pick<StoryProps, 'inline' | 'height' | 'autoplay'>;
+  story?: Pick<StoryProps, 'inline' | 'height' | 'autoplay' | '__forceInitialArgs' | '__primary'>;
   layout?: 'padded' | 'centered' | 'fullscreen';
 };
 
diff --git a/code/ui/blocks/src/blocks/DocsStory.tsx b/code/ui/blocks/src/blocks/DocsStory.tsx
index efdf5e51081b..fd0e970b62fd 100644
--- a/code/ui/blocks/src/blocks/DocsStory.tsx
+++ b/code/ui/blocks/src/blocks/DocsStory.tsx
@@ -1,41 +1,32 @@
 import type { FC } from 'react';
 import React from 'react';
+import type { PreparedStory } from '@storybook/types';
 import { Subheading } from './Subheading';
 import type { DocsStoryProps } from './types';
 import { Anchor } from './Anchor';
 import { Description } from './Description';
-import { Story } from './Story';
 import { Canvas } from './Canvas';
+import { useOf } from './useOf';
 
 export const DocsStory: FC<DocsStoryProps> = ({
-  id,
-  name,
+  of,
   expanded = true,
   withToolbar = false,
-  parameters = {},
   __forceInitialArgs = false,
   __primary = false,
 }) => {
-  let description;
-  const { docs } = parameters;
-  if (expanded && docs) {
-    description = docs.description?.story;
-  }
-
-  const subheading = expanded && name;
+  const { story } = useOf(of, ['story']) as { type: 'story'; story: PreparedStory };
+  const description = story.parameters?.docs?.description?.story;
 
   return (
-    <Anchor storyId={id}>
-      {subheading && <Subheading>{subheading}</Subheading>}
-      {description && <Description markdown={description} />}
-      <Canvas withToolbar={withToolbar}>
-        <Story
-          id={id}
-          parameters={parameters}
-          __forceInitialArgs={__forceInitialArgs}
-          __primary={__primary}
-        />
-      </Canvas>
+    <Anchor storyId={story.id}>
+      {expanded && (
+        <>
+          <Subheading>{story.name}</Subheading>
+          {description !== undefined && <Description markdown={description} />}
+        </>
+      )}
+      <Canvas of={of} withToolbar={withToolbar} story={{ __forceInitialArgs, __primary }} />
     </Anchor>
   );
 };
diff --git a/code/ui/blocks/src/blocks/Primary.tsx b/code/ui/blocks/src/blocks/Primary.tsx
index 8095d079323e..7d5f84d06bb6 100644
--- a/code/ui/blocks/src/blocks/Primary.tsx
+++ b/code/ui/blocks/src/blocks/Primary.tsx
@@ -12,5 +12,7 @@ export const Primary: FC<PrimaryProps> = ({ name }) => {
   const docsContext = useContext(DocsContext);
   const storyId = name && docsContext.storyIdByName(name);
   const story = docsContext.storyById(storyId);
-  return story ? <DocsStory {...story} expanded={false} withToolbar __primary /> : null;
+  return story ? (
+    <DocsStory of={story.moduleExport} expanded={false} withToolbar __primary />
+  ) : null;
 };
diff --git a/code/ui/blocks/src/blocks/Stories.tsx b/code/ui/blocks/src/blocks/Stories.tsx
index 76cb3a6a1e04..4accadb42eed 100644
--- a/code/ui/blocks/src/blocks/Stories.tsx
+++ b/code/ui/blocks/src/blocks/Stories.tsx
@@ -3,7 +3,6 @@ import React, { useContext } from 'react';
 import { DocsContext } from './DocsContext';
 import { DocsStory } from './DocsStory';
 import { Heading } from './Heading';
-import type { DocsStoryProps } from './types';
 
 interface StoriesProps {
   title?: JSX.Element | string;
@@ -13,8 +12,8 @@ interface StoriesProps {
 export const Stories: FC<StoriesProps> = ({ title, includePrimary = true }) => {
   const { componentStories } = useContext(DocsContext);
 
-  let stories: DocsStoryProps[] = componentStories();
-  stories = stories.filter((story) => !story.parameters?.docs?.disable);
+  let stories = componentStories().filter((story) => !story.parameters?.docs?.disable);
+
   if (!includePrimary) stories = stories.slice(1);
 
   if (!stories || stories.length === 0) {
@@ -24,7 +23,8 @@ export const Stories: FC<StoriesProps> = ({ title, includePrimary = true }) => {
     <>
       <Heading>{title}</Heading>
       {stories.map(
-        (story) => story && <DocsStory key={story.id} {...story} expanded __forceInitialArgs />
+        (story) =>
+          story && <DocsStory key={story.id} of={story.moduleExport} expanded __forceInitialArgs />
       )}
     </>
   );
diff --git a/code/ui/blocks/src/blocks/types.ts b/code/ui/blocks/src/blocks/types.ts
index 5aab18554b8e..8a8dba5bfbce 100644
--- a/code/ui/blocks/src/blocks/types.ts
+++ b/code/ui/blocks/src/blocks/types.ts
@@ -1,17 +1,13 @@
+import type { ModuleExport } from '@storybook/types';
+
 export const PRIMARY_STORY = '^';
 
 // TODO
 
 export type Component = any;
 
-export interface StoryData {
-  id?: string;
-  kind?: string;
-  name?: string;
-  parameters?: any;
-}
-
-export type DocsStoryProps = StoryData & {
+export type DocsStoryProps = {
+  of: ModuleExport;
   expanded?: boolean;
   withToolbar?: boolean;
   __forceInitialArgs?: boolean;

From 3f3db865aae097a651b4e40ff83935db3c8f9f23 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Sat, 21 Jan 2023 22:43:53 +0100
Subject: [PATCH 11/25] improve prop documentation

---
 code/ui/blocks/src/blocks/Canvas.tsx      | 47 +++++++++++++++++++++--
 code/ui/blocks/src/components/Preview.tsx |  2 +-
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 2d20349fe0c3..53dc1cc94686 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -2,7 +2,7 @@
 import React, { Children, useContext } from 'react';
 import type { FC, ReactElement, ReactNode } from 'react';
 import type { ModuleExport, ModuleExports, Renderer } from '@storybook/types';
-import type { PreviewProps as PurePreviewProps } from '../components';
+import type { Layout, PreviewProps as PurePreviewProps } from '../components';
 import { Preview as PurePreview, PreviewSkeleton } from '../components';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
@@ -32,16 +32,57 @@ type DeprecatedCanvasProps = Omit<
 };
 
 type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' | 'className'> & {
+  /**
+   * Pass the export defining a story to render that story
+   *
+   * ```jsx
+   * import { Meta, Canvas } from '@storybook/blocks';
+   * import * as ButtonStories from './Button.stories';
+   *
+   * <Meta of={ButtonStories} />
+   * <Canvas of={ButtonStories.Primary} />
+   * ```
+   */
   of?: ModuleExport;
+  /**
+   * Pass all exports of the CSF file if this MDX file is unattached
+   *
+   * ```jsx
+   * import { Canvas } from '@storybook/blocks';
+   * import * as ButtonStories from './Button.stories';
+   *
+   * <Canvas of={ButtonStories.Primary} meta={ButtonStories} />
+   * ```
+   */
   meta?: ModuleExports;
+  /**
+   * Specify the initial state of the source panel
+   * hidden: the source panel is hidden by default
+   * shown: the source panel is shown by default
+   * none: the source panel is not available and the button to show it is hidden
+   * @default 'hidden'
+   */
   sourceState?: 'hidden' | 'shown' | 'none';
+  /**
+   * how to layout the story within the canvas
+   * padded: the story has padding within the canvas
+   * fullscreen: the story is rendered edge to edge within the canvas
+   * centered: the story is centered within the canvas
+   * @default 'padded'
+   */
+  layout?: Layout;
+  /**
+   * @see {SourceProps}
+   */
   source?: Omit<SourceProps, 'dark'>;
+  /**
+   * @see {StoryProps}
+   */
   story?: Pick<StoryProps, 'inline' | 'height' | 'autoplay' | '__forceInitialArgs' | '__primary'>;
-  layout?: 'padded' | 'centered' | 'fullscreen';
 };
 
 const useDeprecatedPreviewProps = (
-  { withSource, mdxSource, children, ...props }: DeprecatedCanvasProps & { of: ModuleExport },
+  { withSource, mdxSource, children, ...props }: DeprecatedCanvasProps & { of?: ModuleExport },
   docsContext: DocsContextProps<Renderer>,
   sourceContext: SourceContextProps
 ) => {
diff --git a/code/ui/blocks/src/components/Preview.tsx b/code/ui/blocks/src/components/Preview.tsx
index 39135e92a873..a0f1b9e5156a 100644
--- a/code/ui/blocks/src/components/Preview.tsx
+++ b/code/ui/blocks/src/components/Preview.tsx
@@ -27,7 +27,7 @@ export interface PreviewProps {
   children?: ReactNode;
 }
 
-type Layout = 'padded' | 'fullscreen' | 'centered';
+export type Layout = 'padded' | 'fullscreen' | 'centered';
 
 const ChildrenContainer = styled.div<PreviewProps & { layout: Layout }>(
   ({ isColumn, columns, layout }) => ({

From 435b88472af1083111bace000f7b08825586eb2a Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Sat, 21 Jan 2023 23:20:53 +0100
Subject: [PATCH 12/25] add props deprecations

---
 code/ui/blocks/src/blocks/Canvas.tsx | 40 +++++++++++++++++++++++++---
 code/ui/blocks/src/blocks/Source.tsx |  2 ++
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 53dc1cc94686..862e291c96dc 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -2,6 +2,8 @@
 import React, { Children, useContext } from 'react';
 import type { FC, ReactElement, ReactNode } from 'react';
 import type { ModuleExport, ModuleExports, Renderer } from '@storybook/types';
+import { deprecate } from '@storybook/client-logger';
+import dedent from 'ts-dedent';
 import type { Layout, PreviewProps as PurePreviewProps } from '../components';
 import { Preview as PurePreview, PreviewSkeleton } from '../components';
 import type { DocsContextProps } from './DocsContext';
@@ -16,10 +18,15 @@ import { getStoryId, Story } from './Story';
 
 export { DeprecatedSourceState as SourceState };
 
-type DeprecatedCanvasProps = Omit<
-  PurePreviewProps,
-  'isExpanded' | 'isLoading' | 'withToolbar' | 'additionalActions' | 'className'
-> & {
+type DeprecatedCanvasProps = {
+  /**
+   * @deprecated multiple stories are not supported
+   */
+  isColumn?: boolean;
+  /**
+   * @deprecated multiple stories are not supported
+   */
+  columns?: number;
   /**
    * @deprecated use `sourceState` instead
    */
@@ -127,6 +134,31 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
     throw new Error('No story passed to the Canvas block. Did you forget to pass the `of` prop?');
   }
 
+  if (children) {
+    deprecate(dedent`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story. 
+    
+    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block'
+  `);
+  }
+  if (props.withSource) {
+    deprecate(dedent`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead. 
+    
+    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block'
+  `);
+  }
+  if (props.mdxSource) {
+    deprecate(dedent`Setting source code with \`mdxSource\` is deprecated, please use source={{code: '...'}} instead. 
+    
+    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block'
+  `);
+  }
+  if (props.isColumn !== undefined || props.columns !== undefined) {
+    deprecate(dedent`\`isColumn\` and \`columns\` props are deprecated as the Canvas block now only supports showing a single story. 
+    
+    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block'
+  `);
+  }
+
   if (of) {
     // TODO: loading?
 
diff --git a/code/ui/blocks/src/blocks/Source.tsx b/code/ui/blocks/src/blocks/Source.tsx
index bdb6cfd4ea9f..f63d497af048 100644
--- a/code/ui/blocks/src/blocks/Source.tsx
+++ b/code/ui/blocks/src/blocks/Source.tsx
@@ -116,6 +116,7 @@ export const useSourceProps = (
   } else if (stories.length === 0) {
     stories = [docsContext.storyById()];
   }
+
   const sourceParameters = (stories[0].parameters.docs?.source || {}) as SourceParameters;
   let { code } = props; // We will fall back to `sourceParameters.code`, but per story below
   let format = props.format ?? sourceParameters.format;
@@ -136,6 +137,7 @@ export const useSourceProps = (
   }
 
   const state = getSourceState(stories as PreparedStory[]);
+
   return code
     ? {
         code,

From 15aa210e5110bd97c2d7d841a26f7326272555cb Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Sat, 21 Jan 2023 23:27:32 +0100
Subject: [PATCH 13/25] cleanup

---
 .../blocks/src/blocks/internal/InternalCanvas.stories.tsx  | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
index c62b6c6eab35..d7da9192a9f4 100644
--- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
@@ -7,7 +7,6 @@ import { expect } from '@storybook/jest';
 import { Canvas, SourceState } from '../Canvas';
 import { Story as StoryComponent } from '../Story';
 import * as ButtonStories from '../../examples/Button.stories';
-import SourceStoriesMeta from '../Source.stories';
 
 const meta: Meta<typeof Canvas> = {
   title: 'Blocks/Internal/Canvas',
@@ -15,13 +14,7 @@ const meta: Meta<typeof Canvas> = {
   parameters: {
     theme: 'light',
     relativeCsfPaths: ['../examples/Button.stories'],
-    //   snippets: {
-    //     'storybook-blocks-example-button--primary': {
-    //       code: `const emitted = 'source';`,
   },
-  // },
-  // },
-  // decorators: SourceStoriesMeta.decorators,
   render: (args) => {
     return (
       <Canvas {...args}>

From 3a8f2d83d708f1ae6fa01049cc2b49dfde2a851d Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Sun, 22 Jan 2023 22:41:18 +0100
Subject: [PATCH 14/25] support undefined of prop in attached mode

---
 code/ui/blocks/src/blocks/Canvas.stories.tsx |  2 +
 code/ui/blocks/src/blocks/Canvas.tsx         | 96 ++++++++++----------
 2 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx
index 5e0834b2f9f3..e718a9cac66d 100644
--- a/code/ui/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx
@@ -45,6 +45,8 @@ export const DefaultUnattached: Story = {
   parameters: { attached: false },
 };
 
+export const UndefinedOf: Story = {};
+
 export const PropWithToolbar: Story = {
   args: {
     of: ButtonStories.Primary,
diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 862e291c96dc..2df85df7b033 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/destructuring-assignment */
 import React, { Children, useContext } from 'react';
 import type { FC, ReactElement, ReactNode } from 'react';
-import type { ModuleExport, ModuleExports, Renderer } from '@storybook/types';
+import type { ModuleExport, ModuleExports, PreparedStory, Renderer } from '@storybook/types';
 import { deprecate } from '@storybook/client-logger';
 import dedent from 'ts-dedent';
 import type { Layout, PreviewProps as PurePreviewProps } from '../components';
@@ -15,6 +15,7 @@ import { useSourceProps, SourceState as DeprecatedSourceState, SourceState } fro
 import { useStories } from './useStory';
 import type { StoryProps } from './Story';
 import { getStoryId, Story } from './Story';
+import { useOf } from './useOf';
 
 export { DeprecatedSourceState as SourceState };
 
@@ -130,73 +131,68 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
   const sourceProps = useSourceProps({ ...source, of }, docsContext, sourceContext);
   const { isLoading, previewProps } = useDeprecatedPreviewProps(props, docsContext, sourceContext);
 
-  if (!of && !children) {
-    throw new Error('No story passed to the Canvas block. Did you forget to pass the `of` prop?');
-  }
+  const { story } = useOf(of || 'story', ['story']) as { type: 'story'; story: PreparedStory };
 
-  if (children) {
-    deprecate(dedent`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story. 
-    
-    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block'
-  `);
-  }
   if (props.withSource) {
     deprecate(dedent`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead. 
     
     Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block'
-  `);
+    `);
   }
   if (props.mdxSource) {
     deprecate(dedent`Setting source code with \`mdxSource\` is deprecated, please use source={{code: '...'}} instead. 
     
     Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block'
-  `);
+    `);
   }
   if (props.isColumn !== undefined || props.columns !== undefined) {
     deprecate(dedent`\`isColumn\` and \`columns\` props are deprecated as the Canvas block now only supports showing a single story. 
     
     Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block'
-  `);
+    `);
   }
-
-  if (of) {
-    // TODO: loading?
-
-    const layout =
-      props.layout ?? of.parameters?.layout ?? of.parameters?.docs?.canvas?.layout ?? 'padded';
-    const withToolbar = props.withToolbar ?? of.parameters?.docs?.canvas?.withToolbar ?? false;
-    const additionalActions =
-      props.additionalActions ?? of.parameters?.docs?.canvas?.additionalActions;
-    const sourceState = props.sourceState ?? of.parameters?.docs?.canvas?.sourceState ?? 'hidden';
-    const className = props.className ?? of.parameters?.docs?.canvas?.className;
-
-    return (
-      <PurePreview
-        withSource={sourceState === 'none' ? undefined : sourceProps}
-        isExpanded={sourceState === 'shown'}
-        withToolbar={withToolbar}
-        additionalActions={additionalActions}
-        className={className}
-      >
-        <Story
-          of={of}
-          meta={props.meta}
-          {...props.story}
-          parameters={
-            /**
-             * this is a hack, Story v2 doesn't read from the "parameters" prop
-             * But PurePreview determines the layout from it's first child's "parameters.layout" prop
-             * So by passing the layout as a parameter, we can force the layout
-             * TODO: remove this pattern once all the deprecated features can be removed
-             */
-            { layout }
-          }
-        />
-      </PurePreview>
+  if (children) {
+    deprecate(dedent`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story. 
+    
+    Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block'
+  `);
+    return isLoading ? (
+      <PreviewSkeleton />
+    ) : (
+      <PurePreview {...previewProps}>{children}</PurePreview>
     );
   }
 
-  if (isLoading) return <PreviewSkeleton />;
+  const layout =
+    props.layout ?? story.parameters?.layout ?? story.parameters?.docs?.canvas?.layout ?? 'padded';
+  const withToolbar = props.withToolbar ?? story.parameters?.docs?.canvas?.withToolbar ?? false;
+  const additionalActions =
+    props.additionalActions ?? story.parameters?.docs?.canvas?.additionalActions;
+  const sourceState = props.sourceState ?? story.parameters?.docs?.canvas?.sourceState ?? 'hidden';
+  const className = props.className ?? story.parameters?.docs?.canvas?.className;
 
-  return <PurePreview {...previewProps}>{children}</PurePreview>;
+  return (
+    <PurePreview
+      withSource={sourceState === 'none' ? undefined : sourceProps}
+      isExpanded={sourceState === 'shown'}
+      withToolbar={withToolbar}
+      additionalActions={additionalActions}
+      className={className}
+    >
+      <Story
+        of={of || story.moduleExport}
+        meta={props.meta}
+        {...props.story}
+        parameters={
+          /**
+           * this is a hack, Story v2 doesn't read from the "parameters" prop
+           * But PurePreview determines the layout from it's first child's "parameters.layout" prop
+           * So by passing the layout as a parameter, we can force the layout
+           * TODO: remove this pattern once all the deprecated features can be removed
+           */
+          { layout }
+        }
+      />
+    </PurePreview>
+  );
 };

From 0984503694add99b6ee66c8a7cdd87b97d1b5337 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Sun, 22 Jan 2023 23:13:01 +0100
Subject: [PATCH 15/25] make useOf return types

---
 code/ui/blocks/src/blocks/Canvas.tsx    |  2 +-
 code/ui/blocks/src/blocks/DocsStory.tsx |  3 +-
 code/ui/blocks/src/blocks/useOf.ts      | 41 +++++++++++++++++++++----
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 2df85df7b033..0624aaa4ebce 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -131,7 +131,7 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
   const sourceProps = useSourceProps({ ...source, of }, docsContext, sourceContext);
   const { isLoading, previewProps } = useDeprecatedPreviewProps(props, docsContext, sourceContext);
 
-  const { story } = useOf(of || 'story', ['story']) as { type: 'story'; story: PreparedStory };
+  const { story } = useOf(of || 'story', ['story']);
 
   if (props.withSource) {
     deprecate(dedent`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead. 
diff --git a/code/ui/blocks/src/blocks/DocsStory.tsx b/code/ui/blocks/src/blocks/DocsStory.tsx
index fd0e970b62fd..cfbe2a576876 100644
--- a/code/ui/blocks/src/blocks/DocsStory.tsx
+++ b/code/ui/blocks/src/blocks/DocsStory.tsx
@@ -1,6 +1,5 @@
 import type { FC } from 'react';
 import React from 'react';
-import type { PreparedStory } from '@storybook/types';
 import { Subheading } from './Subheading';
 import type { DocsStoryProps } from './types';
 import { Anchor } from './Anchor';
@@ -15,7 +14,7 @@ export const DocsStory: FC<DocsStoryProps> = ({
   __forceInitialArgs = false,
   __primary = false,
 }) => {
-  const { story } = useOf(of, ['story']) as { type: 'story'; story: PreparedStory };
+  const { story } = useOf(of || 'story', ['story']);
   const description = story.parameters?.docs?.description?.story;
 
   return (
diff --git a/code/ui/blocks/src/blocks/useOf.ts b/code/ui/blocks/src/blocks/useOf.ts
index 66c2f000b1f9..fc4ea2cdd3bd 100644
--- a/code/ui/blocks/src/blocks/useOf.ts
+++ b/code/ui/blocks/src/blocks/useOf.ts
@@ -1,22 +1,51 @@
-import type { DocsContextProps } from '@storybook/types';
+import type {
+  DocsContextProps,
+  ModuleExport,
+  NormalizedProjectAnnotations,
+  PreparedMeta,
+  Renderer,
+  ResolvedModuleExportFromType,
+  ResolvedModuleExportType,
+} from '@storybook/types';
 import { prepareMeta } from '@storybook/preview-api';
 import { useContext } from 'react';
 import { DocsContext } from './DocsContext';
 
 export type Of = Parameters<DocsContextProps['resolveOf']>[0];
+
+export type EnhancedResolvedModuleExportType<
+  TType extends ResolvedModuleExportType,
+  TRenderer extends Renderer = Renderer
+> = TType extends 'component'
+  ? ResolvedModuleExportFromType<TType, TRenderer> & {
+      projectAnnotations: NormalizedProjectAnnotations<Renderer>;
+    }
+  : TType extends 'meta'
+  ? ResolvedModuleExportFromType<TType, TRenderer> & { preparedMeta: PreparedMeta }
+  : ResolvedModuleExportFromType<TType, TRenderer>;
+
 /**
  * A hook to resolve the `of` prop passed to a block.
  * will return the resolved module
  * if the resolved module is a meta it will include a preparedMeta property similar to a preparedStory
  * if the resolved module is a component it will include the project annotations
  */
-export const useOf = (...args: Parameters<DocsContextProps['resolveOf']>) => {
+export const useOf = <
+  TType extends ResolvedModuleExportType,
+  TRenderer extends Renderer = Renderer
+>(
+  moduleExportOrType: ModuleExport | TType,
+  validTypes?: TType[]
+): EnhancedResolvedModuleExportType<TType, TRenderer> => {
   const context = useContext(DocsContext);
-  const resolved = context.resolveOf(...args);
+  const resolved = context.resolveOf(moduleExportOrType, validTypes);
 
   switch (resolved.type) {
     case 'component': {
-      return { ...resolved, projectAnnotations: context.projectAnnotations };
+      return {
+        ...resolved,
+        projectAnnotations: context.projectAnnotations,
+      } as EnhancedResolvedModuleExportType<TType, TRenderer>;
     }
     case 'meta': {
       return {
@@ -26,11 +55,11 @@ export const useOf = (...args: Parameters<DocsContextProps['resolveOf']>) => {
           context.projectAnnotations,
           resolved.csfFile.moduleExports.default
         ),
-      };
+      } as EnhancedResolvedModuleExportType<TType, TRenderer>;
     }
     case 'story':
     default: {
-      return resolved;
+      return resolved as EnhancedResolvedModuleExportType<TType, TRenderer>;
     }
   }
 };

From d23bed80746b2268382c8a1533c5e54de7ef021b Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Sun, 22 Jan 2023 23:31:50 +0100
Subject: [PATCH 16/25] support deprecated API unattached

---
 code/ui/blocks/src/blocks/Canvas.tsx                | 13 ++++++++++---
 .../src/blocks/internal/InternalCanvas.stories.tsx  |  4 ++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 0624aaa4ebce..cc1cf800ecf4 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -128,10 +128,17 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
   const docsContext = useContext(DocsContext);
   const sourceContext = useContext(SourceContext);
   const { children, of, source } = props;
-  const sourceProps = useSourceProps({ ...source, of }, docsContext, sourceContext);
   const { isLoading, previewProps } = useDeprecatedPreviewProps(props, docsContext, sourceContext);
-
-  const { story } = useOf(of || 'story', ['story']);
+  let story;
+  let sourceProps;
+  try {
+    ({ story } = useOf(of || 'story', ['story']));
+    sourceProps = useSourceProps({ ...source, of }, docsContext, sourceContext);
+  } catch (error) {
+    if (!children) {
+      throw error;
+    }
+  }
 
   if (props.withSource) {
     deprecate(dedent`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead. 
diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
index d7da9192a9f4..9829eb2685e7 100644
--- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
@@ -46,6 +46,10 @@ const expectAmountOfStoriesInSource =
 
 export const BasicStoryChild: Story = {};
 
+export const BasicStoryChildUnattached: Story = {
+  parameters: { attached: false },
+};
+
 export const WithSourceOpen: Story = {
   args: {
     withSource: SourceState.OPEN,

From 5d72968566d6c24f87cc1c90ad1689cab75de0c0 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Sun, 22 Jan 2023 23:40:12 +0100
Subject: [PATCH 17/25] explain try-catch block

---
 code/ui/blocks/src/blocks/Canvas.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index cc1cf800ecf4..29e7284067aa 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -132,6 +132,12 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
   let story;
   let sourceProps;
   try {
+    /**
+     * useOf and useSourceProps will throw if they can't find the story, in the scenario where
+     * the doc is unattached (no primary story) and 'of' is undefined.
+     * That scenario is valid in the deprecated API, where children is used as story refs rather than 'of'.
+     * So if children is passed we allow the error to be swallowed and we'll use them instead.
+     */
     ({ story } = useOf(of || 'story', ['story']));
     sourceProps = useSourceProps({ ...source, of }, docsContext, sourceContext);
   } catch (error) {

From 2b5eead2c6f37e99f73ec2f03f47678a121dba1d Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Sun, 22 Jan 2023 23:47:29 +0100
Subject: [PATCH 18/25] fix check

---
 code/ui/blocks/src/blocks/Canvas.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 29e7284067aa..c9422d3838d0 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/destructuring-assignment */
 import React, { Children, useContext } from 'react';
 import type { FC, ReactElement, ReactNode } from 'react';
-import type { ModuleExport, ModuleExports, PreparedStory, Renderer } from '@storybook/types';
+import type { ModuleExport, ModuleExports, Renderer } from '@storybook/types';
 import { deprecate } from '@storybook/client-logger';
 import dedent from 'ts-dedent';
 import type { Layout, PreviewProps as PurePreviewProps } from '../components';

From 171bb63a2258c8b8c2502458c106989ac623c0d9 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 23 Jan 2023 09:28:45 +0100
Subject: [PATCH 19/25] rename prop-based stories

---
 code/ui/blocks/src/blocks/Canvas.stories.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx
index e718a9cac66d..ccc50895e53c 100644
--- a/code/ui/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx
@@ -48,6 +48,7 @@ export const DefaultUnattached: Story = {
 export const UndefinedOf: Story = {};
 
 export const PropWithToolbar: Story = {
+  name: 'Prop withToolbar = true',
   args: {
     of: ButtonStories.Primary,
     withToolbar: true,
@@ -55,6 +56,7 @@ export const PropWithToolbar: Story = {
 };
 
 export const PropAdditionalActions: Story = {
+  name: 'Prop additionalActions = [ ... ]',
   args: {
     of: ButtonStories.Primary,
     additionalActions: [
@@ -81,6 +83,7 @@ export const PropAdditionalActions: Story = {
 };
 
 export const PropSourceStateShown: Story = {
+  name: 'Prop sourceState = shown',
   args: {
     of: ButtonStories.Primary,
     sourceState: 'shown',
@@ -88,6 +91,7 @@ export const PropSourceStateShown: Story = {
 };
 
 export const PropSourceStateHidden: Story = {
+  name: 'Prop sourceState = hidden',
   args: {
     of: ButtonStories.Primary,
     sourceState: 'hidden',
@@ -95,6 +99,7 @@ export const PropSourceStateHidden: Story = {
 };
 
 export const PropSourceStateNone: Story = {
+  name: 'Prop sourceState = none',
   args: {
     of: ButtonStories.Primary,
     sourceState: 'none',
@@ -102,6 +107,7 @@ export const PropSourceStateNone: Story = {
 };
 
 export const PropLayoutFullscreen: Story = {
+  name: 'Prop layout = fullscreen',
   args: {
     of: ButtonStories.Primary,
     layout: 'fullscreen',
@@ -109,6 +115,7 @@ export const PropLayoutFullscreen: Story = {
 };
 
 export const PropLayoutCentered: Story = {
+  name: 'Prop layout = centered',
   args: {
     of: ButtonStories.Primary,
     layout: 'centered',
@@ -116,6 +123,7 @@ export const PropLayoutCentered: Story = {
 };
 
 export const PropLayoutPadded: Story = {
+  name: 'Prop layout = padded',
   args: {
     of: ButtonStories.Primary,
     layout: 'padded',
@@ -123,6 +131,7 @@ export const PropLayoutPadded: Story = {
 };
 
 export const PropSource: Story = {
+  name: 'Prop source = { ... }',
   args: {
     of: ButtonStories.Primary,
     source: {
@@ -134,6 +143,7 @@ export const PropSource: Story = {
 };
 
 export const PropInlineStory: Story = {
+  name: 'Prop story = { ..., inline: true }',
   args: {
     of: ButtonStories.Primary,
     story: { inline: false, height: '200px' },
@@ -141,6 +151,7 @@ export const PropInlineStory: Story = {
 };
 
 export const PropAutoplayingStory: Story = {
+  name: 'Prop story = { ..., autoplay: true}',
   args: {
     of: ButtonStories.Clicking,
     story: { autoplay: true },
@@ -155,7 +166,7 @@ const ClassNameStoryDescription = () => (
   </p>
 );
 export const PropClassName: Story = {
-  name: 'Prop ClassName',
+  name: 'Prop className = my-custom-classname',
   args: {
     of: ButtonStories.Primary,
     className: 'my-custom-classname',

From 78dd7831f2490a436023b182eac16dece864ce1a Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 23 Jan 2023 09:38:53 +0100
Subject: [PATCH 20/25] split try blocks

---
 code/ui/blocks/src/blocks/Canvas.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index c9422d3838d0..cd2961fd2c75 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -131,14 +131,21 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
   const { isLoading, previewProps } = useDeprecatedPreviewProps(props, docsContext, sourceContext);
   let story;
   let sourceProps;
+  /**
+   * useOf and useSourceProps will throw if they can't find the story, in the scenario where
+   * the doc is unattached (no primary story) and 'of' is undefined.
+   * That scenario is valid in the deprecated API, where children is used as story refs rather than 'of'.
+   * So if children is passed we allow the error to be swallowed and we'll use them instead.
+   * We use two separate try blocks to not break the rules of hooks.
+   */
   try {
-    /**
-     * useOf and useSourceProps will throw if they can't find the story, in the scenario where
-     * the doc is unattached (no primary story) and 'of' is undefined.
-     * That scenario is valid in the deprecated API, where children is used as story refs rather than 'of'.
-     * So if children is passed we allow the error to be swallowed and we'll use them instead.
-     */
     ({ story } = useOf(of || 'story', ['story']));
+  } catch (error) {
+    if (!children) {
+      throw error;
+    }
+  }
+  try {
     sourceProps = useSourceProps({ ...source, of }, docsContext, sourceContext);
   } catch (error) {
     if (!children) {

From aac176787321a7bcc49a0149fdeb57fc36056a2c Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 23 Jan 2023 09:52:33 +0100
Subject: [PATCH 21/25] deprecate name in Primary block

---
 code/ui/blocks/src/blocks/Primary.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/code/ui/blocks/src/blocks/Primary.tsx b/code/ui/blocks/src/blocks/Primary.tsx
index 7d5f84d06bb6..1a4e36672453 100644
--- a/code/ui/blocks/src/blocks/Primary.tsx
+++ b/code/ui/blocks/src/blocks/Primary.tsx
@@ -1,15 +1,25 @@
 import type { FC } from 'react';
 import React, { useContext } from 'react';
+import dedent from 'ts-dedent';
+import { deprecate } from '@storybook/client-logger';
 
 import { DocsContext } from './DocsContext';
 import { DocsStory } from './DocsStory';
 
 interface PrimaryProps {
+  /**
+   * @deprecated Primary block should only be used to render the primary story, which is automatically found.
+   */
   name?: string;
 }
 
 export const Primary: FC<PrimaryProps> = ({ name }) => {
   const docsContext = useContext(DocsContext);
+  if (name) {
+    deprecate(dedent`\`name\` prop is deprecated on the Primary block.
+    The Primary block should only be used to render the primary story, which is automatically found.
+    `);
+  }
   const storyId = name && docsContext.storyIdByName(name);
   const story = docsContext.storyById(storyId);
   return story ? (

From 6464cc2ea34f8525d4fbb43a542950dd518859f5 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 23 Jan 2023 10:04:01 +0100
Subject: [PATCH 22/25] cleanup

---
 code/ui/blocks/src/blocks/Canvas.tsx    | 13 ++++++++-----
 code/ui/blocks/src/blocks/DocsStory.tsx |  3 +--
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index cd2961fd2c75..77b727112d7f 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -36,6 +36,9 @@ type DeprecatedCanvasProps = {
    * @deprecated use `source.code` instead
    */
   mdxSource?: string;
+  /**
+   * @deprecated reference stories with the `of` prop instead
+   */
   children?: ReactNode;
 };
 
@@ -184,12 +187,12 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
   }
 
   const layout =
-    props.layout ?? story.parameters?.layout ?? story.parameters?.docs?.canvas?.layout ?? 'padded';
-  const withToolbar = props.withToolbar ?? story.parameters?.docs?.canvas?.withToolbar ?? false;
+    props.layout ?? story.parameters.layout ?? story.parameters.docs?.canvas?.layout ?? 'padded';
+  const withToolbar = props.withToolbar ?? story.parameters.docs?.canvas?.withToolbar ?? false;
   const additionalActions =
-    props.additionalActions ?? story.parameters?.docs?.canvas?.additionalActions;
-  const sourceState = props.sourceState ?? story.parameters?.docs?.canvas?.sourceState ?? 'hidden';
-  const className = props.className ?? story.parameters?.docs?.canvas?.className;
+    props.additionalActions ?? story.parameters.docs?.canvas?.additionalActions;
+  const sourceState = props.sourceState ?? story.parameters.docs?.canvas?.sourceState ?? 'hidden';
+  const className = props.className ?? story.parameters.docs?.canvas?.className;
 
   return (
     <PurePreview
diff --git a/code/ui/blocks/src/blocks/DocsStory.tsx b/code/ui/blocks/src/blocks/DocsStory.tsx
index cfbe2a576876..1c9599667acc 100644
--- a/code/ui/blocks/src/blocks/DocsStory.tsx
+++ b/code/ui/blocks/src/blocks/DocsStory.tsx
@@ -15,14 +15,13 @@ export const DocsStory: FC<DocsStoryProps> = ({
   __primary = false,
 }) => {
   const { story } = useOf(of || 'story', ['story']);
-  const description = story.parameters?.docs?.description?.story;
 
   return (
     <Anchor storyId={story.id}>
       {expanded && (
         <>
           <Subheading>{story.name}</Subheading>
-          {description !== undefined && <Description markdown={description} />}
+          <Description of={of} />
         </>
       )}
       <Canvas of={of} withToolbar={withToolbar} story={{ __forceInitialArgs, __primary }} />

From e763511c94b0e87a425fb951fa900421d5b75bca Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Mon, 23 Jan 2023 10:55:30 +0100
Subject: [PATCH 23/25] calculate layout in all cases

---
 code/ui/blocks/src/blocks/Canvas.tsx          | 43 ++++++++++++-------
 .../internal/InternalCanvas.stories.tsx       | 43 ++++++++++++++++++-
 code/ui/blocks/src/components/Preview.tsx     | 17 +-------
 3 files changed, 72 insertions(+), 31 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 77b727112d7f..362644c7a3d4 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -93,7 +93,13 @@ type CanvasProps = Pick<PurePreviewProps, 'withToolbar' | 'additionalActions' |
 };
 
 const useDeprecatedPreviewProps = (
-  { withSource, mdxSource, children, ...props }: DeprecatedCanvasProps & { of?: ModuleExport },
+  {
+    withSource,
+    mdxSource,
+    children,
+    layout: layoutProp,
+    ...props
+  }: DeprecatedCanvasProps & { of?: ModuleExport; layout?: Layout },
   docsContext: DocsContextProps<Renderer>,
   sourceContext: SourceContextProps
 ) => {
@@ -117,10 +123,28 @@ const useDeprecatedPreviewProps = (
     return { isLoading, previewProps: props };
   }
 
+  // if the user has specified a layout prop, use that...
+  let layout = layoutProp;
+  // ...otherwise, try to infer it from the children 'parameters' prop
+  Children.forEach(children, (child) => {
+    if (layout) {
+      return;
+    }
+    layout = (child as ReactElement)?.props?.parameters?.layout;
+  });
+  // ...otherwise, try to infer it from the story parameters
+  stories.forEach((story) => {
+    if (layout || !story) {
+      return;
+    }
+    layout = story?.parameters.layout ?? story.parameters.docs?.canvas?.layout;
+  });
+
   return {
     isLoading,
     previewProps: {
       ...props, // pass through columns etc.
+      layout: layout ?? 'padded',
       withSource: sourceProps,
       isExpanded: (withSource || sourceProps.state) === SourceState.OPEN,
     },
@@ -132,6 +156,7 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
   const sourceContext = useContext(SourceContext);
   const { children, of, source } = props;
   const { isLoading, previewProps } = useDeprecatedPreviewProps(props, docsContext, sourceContext);
+
   let story;
   let sourceProps;
   /**
@@ -201,21 +226,9 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
       withToolbar={withToolbar}
       additionalActions={additionalActions}
       className={className}
+      layout={layout}
     >
-      <Story
-        of={of || story.moduleExport}
-        meta={props.meta}
-        {...props.story}
-        parameters={
-          /**
-           * this is a hack, Story v2 doesn't read from the "parameters" prop
-           * But PurePreview determines the layout from it's first child's "parameters.layout" prop
-           * So by passing the layout as a parameter, we can force the layout
-           * TODO: remove this pattern once all the deprecated features can be removed
-           */
-          { layout }
-        }
-      />
+      <Story of={of || story.moduleExport} meta={props.meta} {...props.story} />
     </PurePreview>
   );
 };
diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
index 9829eb2685e7..f16f8bb80329 100644
--- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
+++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
@@ -7,13 +7,14 @@ import { expect } from '@storybook/jest';
 import { Canvas, SourceState } from '../Canvas';
 import { Story as StoryComponent } from '../Story';
 import * as ButtonStories from '../../examples/Button.stories';
+import * as CanvasParameterStories from '../../examples/CanvasParameters.stories';
 
 const meta: Meta<typeof Canvas> = {
   title: 'Blocks/Internal/Canvas',
   component: Canvas,
   parameters: {
     theme: 'light',
-    relativeCsfPaths: ['../examples/Button.stories'],
+    relativeCsfPaths: ['../examples/Button.stories', '../examples/CanvasParameters.stories'],
   },
   render: (args) => {
     return (
@@ -81,6 +82,46 @@ export const WithoutSource: Story = {
   },
 };
 
+export const LayoutProp: Story = {
+  args: {
+    layout: 'fullscreen',
+  },
+};
+
+export const LayoutAsChildProp: Story = {
+  render: (args) => {
+    return (
+      <Canvas {...args}>
+        <StoryComponent of={ButtonStories.Primary} parameters={{ layout: 'fullscreen' }} />
+      </Canvas>
+    );
+  },
+};
+
+export const LayoutAsChildPropMultiple: Story = {
+  args: { isColumn: true },
+  render: (args) => {
+    return (
+      <Canvas {...args}>
+        <h1>Fullscreen</h1>
+        <StoryComponent of={ButtonStories.Secondary} />
+        <StoryComponent of={ButtonStories.Large} parameters={{ layout: 'fullscreen' }} />
+        <StoryComponent of={ButtonStories.Primary} />
+      </Canvas>
+    );
+  },
+};
+
+export const LayoutAsParameter: Story = {
+  render: (args) => {
+    return (
+      <Canvas {...args}>
+        <StoryComponent of={CanvasParameterStories.LayoutFullscreen} />
+      </Canvas>
+    );
+  },
+};
+
 export const MultipleChildren: Story = {
   render: (args) => {
     return (
diff --git a/code/ui/blocks/src/components/Preview.tsx b/code/ui/blocks/src/components/Preview.tsx
index a0f1b9e5156a..fd8dd3289823 100644
--- a/code/ui/blocks/src/components/Preview.tsx
+++ b/code/ui/blocks/src/components/Preview.tsx
@@ -17,6 +17,7 @@ import { StorySkeleton } from './Story';
 
 export interface PreviewProps {
   isLoading?: true;
+  layout?: Layout;
   isColumn?: boolean;
   columns?: number;
   withSource?: SourceProps;
@@ -171,18 +172,6 @@ const Relative = styled.div({
   position: 'relative',
 });
 
-const getLayout = (children: ReactElement[]): Layout => {
-  return children.reduce((result, c) => {
-    if (result) {
-      return result;
-    }
-    if (typeof c === 'string' || typeof c === 'number') {
-      return 'padded';
-    }
-    return (c.props && c.props.parameters && c.props.parameters.layout) || 'padded';
-  }, undefined);
-};
-
 /**
  * A preview component for showing one or more component `Story`
  * items. The preview also shows the source for the component
@@ -198,6 +187,7 @@ export const Preview: FC<PreviewProps> = ({
   isExpanded = false,
   additionalActions,
   className,
+  layout = 'padded',
   ...props
 }) => {
   const [expanded, setExpanded] = useState(isExpanded);
@@ -211,9 +201,6 @@ export const Preview: FC<PreviewProps> = ({
   );
   const actionItems = [...defaultActionItems, ...additionalActionItems];
 
-  // @ts-expect-error (Converted from ts-ignore)
-  const layout = getLayout(Children.count(children) === 1 ? [children] : children);
-
   const { window: globalWindow } = global;
 
   const copyToClipboard = useCallback(async (text: string) => {

From b89d8ef96713a7610685d2c45ac8b38e5b25874a Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Tue, 24 Jan 2023 08:58:08 +0100
Subject: [PATCH 24/25] "better" error handling in Canvas

---
 code/ui/blocks/src/blocks/Canvas.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 362644c7a3d4..c6bf9c1b7f77 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -164,22 +164,26 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
    * the doc is unattached (no primary story) and 'of' is undefined.
    * That scenario is valid in the deprecated API, where children is used as story refs rather than 'of'.
    * So if children is passed we allow the error to be swallowed and we'll use them instead.
-   * We use two separate try blocks to not break the rules of hooks.
+   * We use two separate try blocks and throw the error afterwards to not break the rules of hooks.
    */
+  let hookError;
   try {
     ({ story } = useOf(of || 'story', ['story']));
   } catch (error) {
     if (!children) {
-      throw error;
+      hookError = error;
     }
   }
   try {
     sourceProps = useSourceProps({ ...source, of }, docsContext, sourceContext);
   } catch (error) {
     if (!children) {
-      throw error;
+      hookError = error;
     }
   }
+  if (hookError) {
+    throw hookError;
+  }
 
   if (props.withSource) {
     deprecate(dedent`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead. 

From db9cbff0fd0c92b3ee0152af5b34e35e0fd65021 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Tue, 24 Jan 2023 10:03:44 +0100
Subject: [PATCH 25/25] add layout prop to preview stories

---
 code/ui/blocks/src/components/Preview.stories.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/code/ui/blocks/src/components/Preview.stories.tsx b/code/ui/blocks/src/components/Preview.stories.tsx
index df05b8e77a0c..ad5b1f913c8d 100644
--- a/code/ui/blocks/src/components/Preview.stories.tsx
+++ b/code/ui/blocks/src/components/Preview.stories.tsx
@@ -157,7 +157,7 @@ export const WithFullscreenSingle = (
   args: any,
   { loaded: { docsContext } }: { loaded: { docsContext: DocsContextProps } }
 ) => (
-  <Preview withToolbar>
+  <Preview withToolbar layout="fullscreen">
     <Story
       inline
       story={getPreparedStory(docsContext, ButtonStories.Primary)}
@@ -174,7 +174,7 @@ export const WithFullscreenMulti = (
   args: any,
   { loaded: { docsContext } }: { loaded: { docsContext: DocsContextProps } }
 ) => (
-  <Preview withToolbar>
+  <Preview withToolbar layout="fullscreen">
     <Story
       inline
       story={getPreparedStory(docsContext, ButtonStories.Primary)}
@@ -200,7 +200,7 @@ export const WithCenteredSingle = (
   args: any,
   { loaded: { docsContext } }: { loaded: { docsContext: DocsContextProps } }
 ) => (
-  <Preview withToolbar>
+  <Preview withToolbar layout="centered">
     <Story
       inline
       story={getPreparedStory(docsContext, ButtonStories.Primary)}
@@ -217,7 +217,7 @@ export const WithCenteredMulti = (
   args: any,
   { loaded: { docsContext } }: { loaded: { docsContext: DocsContextProps } }
 ) => (
-  <Preview withToolbar>
+  <Preview withToolbar layout="centered">
     <Story
       inline
       story={getPreparedStory(docsContext, ButtonStories.Primary)}