Docs: Make reference stories consistent

code/ui/blocks/src/blocks/Story.stories.tsx

@@ -1,15 +1,14 @@
-/// <reference types="vite/client" />
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Story as StoryBlock } from './Story';
 import * as ButtonStories from '../examples/Button.stories';
 import * as StoryComponentStories from '../components/Story.stories';
+import * as StoryParametersStories from '../examples/StoryParameters.stories';
 
 const meta: Meta<typeof StoryBlock> = {
   component: StoryBlock,
   parameters: {
-    relativeCsfPaths: ['../examples/Button.stories', '../blocks/Story.stories'],
+    relativeCsfPaths: ['../examples/Button.stories', '../examples/StoryParameters.stories'],
   },
 };
 export default meta;
@@ -29,147 +28,69 @@ export const OfWithMeta: Story = {
   },
 };
 
-const blocksAwareId = `${
-  import.meta.env.STORYBOOK_BLOCKS_ONLY === 'true' ? '' : 'storybook-blocks-'
-}example-button--primary`;
-
-export const Id: Story = {
-  args: {
-    id: blocksAwareId,
-  },
-};
-
-export const Name: Story = {
-  args: {
-    name: 'Secondary',
-  },
-};
-
-export const SimpleSizeTest: Story = {
-  render: () => {
-    return (
-      <div
-        style={{
-          background: '#fd5c9355',
-          padding: '3rem',
-          height: '500px',
-          width: '800px',
-          // a global decorator is applying a default padding that we want to negate here
-          margin: '-4rem -20px',
-        }}
-      >
-        <p>
-          This story does nothing. Its only purpose is to show how its size renders in different
-          conditions (inline/iframe/fixed height) when used in a <code>{'<Story />'}</code> block.
-        </p>
-        <p>
-          It has a fixed <code>height</code> of <code>500px</code> and a fixed <code>width</code> of{' '}
-          <code>800px</code>
-        </p>
-      </div>
-    );
-  },
-  parameters: {
-    // Stop *this* story from being stacked in Chromatic
-    theme: 'default',
-  },
-};
-
 export const Inline: Story = {
   args: {
-    of: SimpleSizeTest,
+    of: StoryParametersStories.NoParameters,
     inline: true,
   },
 };
 
 export const InlineWithHeightProps: Story = {
   ...Inline,
   args: {
-    of: SimpleSizeTest,
+    of: StoryParametersStories.NoParameters,
     inline: true,
     height: '600px',
   },
 };
 
-export const SimpleSizeTestWithHeightParameter = {
-  ...SimpleSizeTest,
-  parameters: {
-    docs: { story: { height: '600px' } },
-    // Stop *this* story from being stacked in Chromatic
-    theme: 'default',
-  },
-};
-
 export const InlineWithHeightParameter: Story = {
   ...Inline,
   args: {
-    of: SimpleSizeTestWithHeightParameter,
+    of: StoryParametersStories.Height,
   },
 };
 
 export const IFrameProps: Story = {
   ...Inline,
   name: 'IFrame Props',
   args: {
-    of: SimpleSizeTest,
+    of: StoryParametersStories.NoParameters,
     inline: false,
   },
 };
 
-export const SimpleSizeTestWithIFrameParameter = {
-  ...SimpleSizeTest,
-  parameters: { docs: { story: { inline: false } } },
-};
-
-export const IframeWithParameter: Story = {
+export const IFrameWithParameter: Story = {
   ...Inline,
   name: 'IFrame With Parameter',
   args: {
-    of: SimpleSizeTestWithIFrameParameter,
+    of: StoryParametersStories.InlineFalse,
   },
 };
 
-export const IframeWithHeightProps: Story = {
+export const IFrameWithHeightProps: Story = {
   ...Inline,
   name: 'IFrame With Height Props',
   args: {
-    of: SimpleSizeTest,
+    of: StoryParametersStories.NoParameters,
     inline: false,
     height: '300px',
   },
 };
 
-export const SimpleSizeTestWithIFrameAndIFrameHeightParameter = {
-  ...SimpleSizeTest,
-  parameters: {
-    docs: { story: { inline: false, iframeHeight: '300px' } },
-    // Stop *this* story from being stacked in Chromatic
-    theme: 'default',
-  },
-};
-
-export const IFrameWithIFrameHeightParameter: Story = {
+export const IFrameWithHeightParameter: Story = {
   ...Inline,
-  name: 'IFrame With IFrame Height Parameter',
+  name: 'IFrame With Height Parameter',
   args: {
-    of: SimpleSizeTestWithIFrameAndIFrameHeightParameter,
-  },
-};
-
-export const SimpleSizeTestWithIFrameAndHeightParameter = {
-  ...SimpleSizeTest,
-  parameters: {
-    docs: { story: { inline: false, height: '300px' } },
-    // Stop *this* story from being stacked in Chromatic
-    theme: 'default',
+    of: StoryParametersStories.InlineFalseWithHeight,
   },
 };
 
-export const IFrameWithHeightParameter: Story = {
+export const IFrameWithIFrameHeightParameter: Story = {
   ...Inline,
-  name: 'IFrame With Height Parameter',
+  name: 'IFrame With IFrame Height Parameter',
   args: {
-    of: SimpleSizeTestWithIFrameAndHeightParameter,
+    of: StoryParametersStories.InlineFalseWithIframeHeight,
   },
 };
 
@@ -192,7 +113,7 @@ export const WithInteractionsAutoplayInProps: Story = {
   },
 };
 
-export const WithInteractionsAutoplayInStory: Story = {
+export const WithInteractionsAutoplayInParameters: Story = {
   args: {
     of: ButtonStories.ClickingInDocs,
   },

code/ui/blocks/src/blocks/Story.tsx

@@ -110,11 +110,6 @@ export const getStoryId = (props: StoryProps, context: DocsContextProps): StoryI
   return id || context.storyIdByName(name);
 };
 
-// Find the first option that isn't undefined
-function getProp<T>(...options: (T | undefined)[]) {
-  return options.find((option) => typeof option !== 'undefined');
-}
-
 export const getStoryProps = <TFramework extends Renderer>(
   props: StoryParameters,
   story: PreparedStory<TFramework>,
@@ -139,16 +134,16 @@ export const getStoryProps = <TFramework extends Renderer>(
   };
   if (typeof inlineStories !== 'undefined')
     deprecate('The `docs.inlineStories` parameter is deprecated, use `docs.story.inline` instead');
-  const inline = getProp(props.inline, storyParameters.inline, inlineStories) || false;
+  const inline = props.inline ?? storyParameters.inline ?? inlineStories ?? false;
 
   if (typeof iframeHeight !== 'undefined')
     deprecate(
       'The `docs.iframeHeight` parameter is deprecated, use `docs.story.iframeHeight` instead'
     );
 
   if (inline) {
-    const height = getProp(props.height, storyParameters.height);
-    const autoplay = getProp(props.autoplay, storyParameters.autoplay) || false;
+    const height = props.height ?? storyParameters.height;
+    const autoplay = props.autoplay ?? storyParameters.autoplay ?? false;
     return {
       story,
       inline: true,
@@ -163,7 +158,10 @@ export const getStoryProps = <TFramework extends Renderer>(
   }
 
   const height =
-    getProp(props.height, storyParameters.height, storyParameters.iframeHeight, iframeHeight) ||
+    props.height ??
+    storyParameters.height ??
+    storyParameters.iframeHeight ??
+    iframeHeight ??
     '100px';
   return {
     story,

code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx

@@ -10,7 +10,6 @@ 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',

code/ui/blocks/src/blocks/internal/InternalDescription.stories.tsx

@@ -4,7 +4,6 @@ import { Description, DescriptionType } from '../Description';
 import { Button } from '../../examples/Button';
 
 const meta: Meta<typeof Description> = {
-  title: 'Blocks/Internal/Description',
   component: Description,
   parameters: {
     relativeCsfPaths: ['../examples/Button.stories'],

code/ui/blocks/src/blocks/internal/InternalSource.stories.tsx

@@ -3,7 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Source } from '../Source';
 
 const meta: Meta<typeof Source> = {
-  title: 'Blocks/Internal/Source',
   component: Source,
   parameters: {
     relativeCsfPaths: ['../examples/Button.stories'],
@@ -16,12 +15,15 @@ type Story = StoryObj<typeof meta>;
 
 export const Id: Story = {
   args: {
-    id: 'storybook-blocks-example-button--primary',
+    id: 'storybook-blocks-examples-button--primary',
   },
 };
 
 export const Ids: Story = {
   args: {
-    ids: ['storybook-blocks-example-button--primary', 'storybook-blocks-example-button--secondary'],
+    ids: [
+      'storybook-blocks-examples-button--primary',
+      'storybook-blocks-examples-button--secondary',
+    ],
   },
 };

code/ui/blocks/src/blocks/internal/InternalStory.stories.tsx

@@ -1,3 +1,4 @@
+/// <reference types="vite/client" />
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Story as StoryBlock } from '../Story';
@@ -18,3 +19,19 @@ export const StoryExport: Story = {
     story: ButtonStories.Primary,
   },
 };
+
+const blocksAwareId = `${
+  import.meta.env.STORYBOOK_BLOCKS_ONLY === 'true' ? '' : 'storybook-blocks-'
+}examples-button--primary`;
+
+export const Id: Story = {
+  args: {
+    id: blocksAwareId,
+  },
+};
+
+export const Name: Story = {
+  args: {
+    name: 'Secondary',
+  },
+};

code/ui/blocks/src/examples/ArgTypesParameters.stories.tsx

@@ -5,7 +5,7 @@ import { ArgTypesParameters } from './ArgTypesParameters';
  * Reference stories to be used by the ArgTypes stories
  */
 const meta = {
-  title: 'Example/Stories for ArgTypes',
+  title: 'examples/Stories for the ArgTypes Block',
   component: ArgTypesParameters,
   args: { b: 'b' },
   argTypes: {

code/ui/blocks/src/examples/Button.stories.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { Button } from './Button';
 
 const meta = {
-  title: 'Example/Button',
+  title: 'examples/Button',
   component: Button,
   tags: ['autodocs'],
   argTypes: {

code/ui/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx

@@ -8,7 +8,7 @@ import { Button } from './Button';
  * _this should never be shown in Storybook, as it should be overridden by `parameters.docs.description.component`_
  */
 const meta = {
-  title: 'Blocks/Description/Button',
+  title: 'Examples/Button with Meta Description as Parameter and Comment',
   component: Button,
   argTypes: {
     backgroundColor: { control: 'color' },

code/ui/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx

@@ -7,7 +7,7 @@ import { Button } from './Button';
  * _this description was written as a comment above the default export_
  */
 const meta = {
-  title: 'Blocks/Description/Button',
+  title: 'Examples/Button with Meta Description as Comment',
   component: Button,
   argTypes: {
     backgroundColor: { control: 'color' },

code/ui/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';
 
 const meta = {
-  title: 'Blocks/Description/Button',
+  title: 'examples/Button with Meta Description as Parameter',
   component: Button,
   argTypes: {
     backgroundColor: { control: 'color' },

code/ui/blocks/src/examples/CanvasParameters.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EmptyExample } from './EmptyExample';
 
 const meta = {
-  title: 'example/CanvasParameters',
+  title: 'examples/Stories for the Canvas Block',
   component: EmptyExample,
 } satisfies Meta<typeof EmptyExample>;
 export default meta;

code/ui/blocks/src/examples/ControlsParameters.stories.tsx

@@ -5,7 +5,7 @@ import { ControlsParameters } from './ControlsParameters';
  * Reference stories to be used by the Controls stories
  */
 const meta = {
-  title: 'Example/Stories for the Controls Block',
+  title: 'examples/Stories for the Controls Block',
   component: ControlsParameters,
   args: { b: 'b' },
   argTypes: {

code/ui/blocks/src/examples/SimpleSizeTest.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export const SimpleSizeTest = () => {
+  return (
+    <div
+      style={{
+        background: '#fd5c9355',
+        padding: '3rem',
+        height: '500px',
+        width: '800px',
+        // a global decorator is applying a default padding that we want to negate here
+        margin: '-4rem -20px',
+      }}
+    >
+      <p>
+        This story does nothing. Its only purpose is to show how its size renders in different
+        conditions (inline/iframe/fixed height) when used in a <code>{'<Story />'}</code> block.
+      </p>
+      <p>
+        It has a fixed <code>height</code> of <code>500px</code> and a fixed <code>width</code> of{' '}
+        <code>800px</code>
+      </p>
+    </div>
+  );
+};

code/ui/blocks/src/examples/SourceParameters.stories.tsx

@@ -14,7 +14,7 @@ const code = `query HeroNameAndFriends($episode: Episode) {
 `;
 
 const meta = {
-  title: 'Example/SourceParameters',
+  title: 'examples/Stories for the Source Block',
   component: EmptyExample,
 } satisfies Meta<typeof EmptyExample>;
 export default meta;