Blocks: New Canvas API

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.stories.tsx

@@ -1,66 +1,64 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Canvas, SourceState } from './Canvas';
-import { Story as StoryComponent } from './Story';
+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';
 
 const meta: Meta<typeof Canvas> = {
   component: Canvas,
   parameters: {
-    relativeCsfPaths: ['../examples/Button.stories'],
-  },
-  render: (args) => {
-    return (
-      <Canvas {...args}>
-        <StoryComponent of={ButtonStories.Primary} />
-      </Canvas>
-    );
+    relativeCsfPaths: [
+      '../examples/Button.stories',
+      '../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;
 
 type Story = StoryObj<typeof meta>;
 
-export const BasicStory: Story = {};
-
-export const WithSourceOpen: Story = {
+export const DefaultAttached: Story = {
   args: {
-    withSource: SourceState.OPEN,
-  },
-};
-export const WithSourceClosed: Story = {
-  args: {
-    withSource: SourceState.CLOSED,
+    of: ButtonStories.Primary,
   },
 };
 
-export const WithMdxSource: Story = {
-  name: 'With MDX Source',
+export const DefaultUnattached: Story = {
   args: {
-    withSource: SourceState.OPEN,
-    mdxSource: `<Button
-  label="Button"
-  primary
-  onClick={() => {
-    console.log('this is custom source for the source viewer')
-  }}
-/>`,
+    of: ButtonStories.Primary,
   },
+  parameters: { attached: false },
 };
 
-export const WithoutSource: Story = {
-  args: {
-    withSource: SourceState.NONE,
-  },
-};
+export const UndefinedOf: Story = {};
 
-export const WithToolbar: Story = {
+export const PropWithToolbar: Story = {
+  name: 'Prop withToolbar = true',
   args: {
+    of: ButtonStories.Primary,
     withToolbar: true,
   },
 };
-export const WithAdditionalActions: Story = {
+
+export const PropAdditionalActions: Story = {
+  name: 'Prop additionalActions = [ ... ]',
   args: {
+    of: ButtonStories.Primary,
     additionalActions: [
       {
         title: 'Open in GitHub',
@@ -84,34 +82,217 @@ export const WithAdditionalActions: Story = {
   },
 };
 
-const ClassNameStoryDescripition = () => (
+export const PropSourceStateShown: Story = {
+  name: 'Prop sourceState = shown',
+  args: {
+    of: ButtonStories.Primary,
+    sourceState: 'shown',
+  },
+};
+
+export const PropSourceStateHidden: Story = {
+  name: 'Prop sourceState = hidden',
+  args: {
+    of: ButtonStories.Primary,
+    sourceState: 'hidden',
+  },
+};
+
+export const PropSourceStateNone: Story = {
+  name: 'Prop sourceState = none',
+  args: {
+    of: ButtonStories.Primary,
+    sourceState: 'none',
+  },
+};
+
+export const PropLayoutFullscreen: Story = {
+  name: 'Prop layout = fullscreen',
+  args: {
+    of: ButtonStories.Primary,
+    layout: 'fullscreen',
+  },
+};
+
+export const PropLayoutCentered: Story = {
+  name: 'Prop layout = centered',
+  args: {
+    of: ButtonStories.Primary,
+    layout: 'centered',
+  },
+};
+
+export const PropLayoutPadded: Story = {
+  name: 'Prop layout = padded',
+  args: {
+    of: ButtonStories.Primary,
+    layout: 'padded',
+  },
+};
+
+export const PropSource: Story = {
+  name: 'Prop source = { ... }',
+  args: {
+    of: ButtonStories.Primary,
+    source: {
+      language: 'html',
+      code: '<button>           Button          </button>', // spaces should be removed by the prettier formatter
+      format: 'html',
+    },
+  },
+};
+
+export const PropInlineStory: Story = {
+  name: 'Prop story = { ..., inline: true }',
+  args: {
+    of: ButtonStories.Primary,
+    story: { inline: false, height: '200px' },
+  },
+};
+
+export const PropAutoplayingStory: Story = {
+  name: 'Prop story = { ..., autoplay: true}',
+  args: {
+    of: ButtonStories.Clicking,
+    story: { autoplay: true },
+  },
+};
+
+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
     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 ClassName: Story = {
-  name: 'ClassName',
+export const PropClassName: Story = {
+  name: 'Prop className = my-custom-classname',
   args: {
+    of: ButtonStories.Primary,
     className: 'my-custom-classname',
   },
   render: (args) => (
     <>
-      <ClassNameStoryDescripition />
+      <ClassNameStoryDescription />
+      <style>
+        {`
+          .my-custom-classname {
+            background-color: #fd5c9355;
+          }
+        `}
+      </style>
+      <Canvas {...args} />
+    </>
+  ),
+};
+
+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: 'parameters.docs.canvas.className = my-custom-classname',
+  args: {
+    of: ParameterStories.ClassName,
+  },
+  render: (args) => (
+    <>
+      <ClassNameStoryDescription />
       <style>
         {`
           .my-custom-classname {
             background-color: #fd5c9355;
           }
         `}
       </style>
-      <Canvas {...args}>
-        <StoryComponent of={ButtonStories.Primary} />
-      </Canvas>
+      <Canvas {...args} />
     </>
   ),
 };
+
+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,
+  },
+};