use new Canvas API in autodocs

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

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';
 };
 

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>
   );
 };

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

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 />
       )}
     </>
   );

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;