Merge pull request #21452 from storybookjs/21441-fix-missing-of

Docs: Don't allow passing `of={}` with undefined prop

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ArgTypes } from './ArgTypes';
@@ -35,6 +36,16 @@ export const OfStory: Story = {
   },
 };
 
+export const OfUndefined: Story = {
+  args: {
+    // @ts-expect-error this is supposed to be undefined
+    // eslint-disable-next-line import/namespace
+    of: ExampleStories.NotDefined,
+  },
+  parameters: { chromatic: { disableSnapshot: true } },
+  decorators: [(s) => (window?.navigator.userAgent.match(/StorybookTestRunner/) ? <div /> : s())],
+};
+
 // NOTE: this will throw with no of prop
 export const OfStoryUnattached: Story = {
   parameters: { attached: false },

code/ui/blocks/src/blocks/ArgTypes.tsx

@@ -60,6 +60,9 @@ function getArgTypesFromResolved(resolved: ReturnType<typeof useOf>, props: ArgT
 
 export const ArgTypes: FC<ArgTypesProps> = (props) => {
   const { of } = props;
+  if ('of' in props && of === undefined) {
+    throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+  }
   const resolved = useOf(of || 'meta');
   const { argTypes, parameters } = getArgTypesFromResolved(resolved, props);
   const argTypesParameters = parameters.docs?.argTypes || ({} as ArgTypesParameters);

code/ui/blocks/src/blocks/ArgsTable.tsx

@@ -226,6 +226,9 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     ({ parameters, component, subcomponents } = context.storyById());
   } catch (err) {
     const { of } = props as OfProps;
+    if ('of' in props && of === undefined) {
+      throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+    }
     ({
       projectAnnotations: { parameters },
     } = context.resolveOf(of, ['component']));

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

@@ -33,26 +33,36 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const DefaultAttached: Story = {
+export const OfAttached: Story = {
   args: {
     of: ButtonStories.Primary,
   },
 };
 
-export const DefaultUnattached: Story = {
+export const OfUnattached: Story = {
   args: {
     of: ButtonStories.Primary,
   },
   parameters: { attached: false },
 };
 
-export const DefaultError: Story = {
+export const OfError: Story = {
   args: {
     of: ButtonStories.ErrorStory,
   },
 };
 
-export const UndefinedOf: Story = {};
+export const DefaultAttached: Story = {};
+
+export const OfUndefined: Story = {
+  args: {
+    // @ts-expect-error this is supposed to be undefined
+    // eslint-disable-next-line import/namespace
+    of: ButtonStories.NotDefined,
+  },
+  parameters: { chromatic: { disableSnapshot: true } },
+  decorators: [(s) => (window?.navigator.userAgent.match(/StorybookTestRunner/) ? <div /> : s())],
+};
 
 export const PropWithToolbar: Story = {
   name: 'Prop withToolbar = true',

code/ui/blocks/src/blocks/Canvas.tsx

@@ -115,7 +115,10 @@ const useDeprecatedPreviewProps = (
   const stories = useStories(storyIds, docsContext);
   const isLoading = stories.some((s) => !s);
   const sourceProps = useSourceProps(
-    mdxSource ? { code: decodeURI(mdxSource), of: props.of } : { ids: storyIds, of: props.of },
+    {
+      ...(mdxSource ? { code: decodeURI(mdxSource) } : { ids: storyIds }),
+      ...(props.of && { of: props.of }),
+    },
     docsContext,
     sourceContext
   );
@@ -155,6 +158,10 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
   const docsContext = useContext(DocsContext);
   const sourceContext = useContext(SourceContext);
   const { children, of, source } = props;
+  if ('of' in props && of === undefined) {
+    throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+  }
+
   const { isLoading, previewProps } = useDeprecatedPreviewProps(props, docsContext, sourceContext);
 
   let story: PreparedStory;
@@ -175,7 +182,7 @@ export const Canvas: FC<CanvasProps & DeprecatedCanvasProps> = (props) => {
     }
   }
   try {
-    sourceProps = useSourceProps({ ...source, of }, docsContext, sourceContext);
+    sourceProps = useSourceProps({ ...source, ...(of && { of }) }, docsContext, sourceContext);
   } catch (error) {
     if (!children) {
       hookError = error;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Controls } from './Controls';
@@ -30,6 +31,16 @@ export const OfStoryUnattached: Story = {
   },
 };
 
+export const OfUndefined: Story = {
+  args: {
+    // @ts-expect-error this is supposed to be undefined
+    // eslint-disable-next-line import/namespace
+    of: ExampleStories.NotDefined,
+  },
+  parameters: { chromatic: { disableSnapshot: true } },
+  decorators: [(s) => (window?.navigator.userAgent.match(/StorybookTestRunner/) ? <div /> : s())],
+};
+
 export const IncludeProp: Story = {
   args: {
     of: ExampleStories.NoParameters,

code/ui/blocks/src/blocks/Controls.tsx

@@ -24,6 +24,10 @@ type ControlsProps = ControlsParameters & {
 
 export const Controls: FC<ControlsProps> = (props) => {
   const { of } = props;
+  if ('of' in props && of === undefined) {
+    throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+  }
+
   const context = useContext(DocsContext);
   const { story } = context.resolveOf(of || 'story', ['story']);
   const { parameters, argTypes } = story;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Description } from './Description';
 import { Button as ButtonComponent } from '../examples/Button';
@@ -107,9 +108,22 @@ export const OfStoryAsStoryCommentAndParameter: Story = {
   },
   parameters: { relativeCsfPaths: ['../examples/Button.stories'] },
 };
-export const OfUndefinedAttached: Story = {
+export const DefaultAttached: Story = {
   parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true },
 };
+export const OfUndefinedAttached: Story = {
+  args: {
+    // @ts-expect-error this is supposed to be undefined
+    // eslint-disable-next-line import/namespace
+    of: DefaultButtonStories.NotDefined,
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    relativeCsfPaths: ['../examples/Button.stories'],
+    attached: true,
+  },
+  decorators: [(s) => (window?.navigator.userAgent.match(/StorybookTestRunner/) ? <div /> : s())],
+};
 export const OfStringComponentAttached: Story = {
   name: 'Of "component" Attached',
   args: {

code/ui/blocks/src/blocks/Description.tsx

@@ -125,6 +125,10 @@ const getDescriptionFromDeprecatedProps = (
 
 const DescriptionContainer: FC<DescriptionProps> = (props) => {
   const { of, type, markdown: markdownProp, children } = props;
+
+  if ('of' in props && of === undefined) {
+    throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+  }
   const context = useContext(DocsContext);
   const resolvedOf = useOf(of || 'meta');
   let markdown;

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

@@ -53,6 +53,16 @@ export const Of: Story = {
   },
 };
 
+export const OfUndefined: Story = {
+  args: {
+    // @ts-expect-error this is supposed to be undefined
+    // eslint-disable-next-line import/namespace
+    of: ParametersStories.NotDefined,
+  },
+  parameters: { chromatic: { disableSnapshot: true } },
+  decorators: [(s) => (window?.navigator.userAgent.match(/StorybookTestRunner/) ? <div /> : s())],
+};
+
 export const OfTypeProp: Story = {
   args: {
     of: ParametersStories.NoParameters,

code/ui/blocks/src/blocks/Source.tsx

@@ -126,8 +126,13 @@ export const useSourceProps = (
 
   // The check didn't actually change the type.
   let stories: PreparedStory[] = storiesFromIds as PreparedStory[];
-  if (props.of) {
-    const resolved = docsContext.resolveOf(props.of, ['story']);
+  const { of } = props;
+  if ('of' in props && of === undefined) {
+    throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+  }
+
+  if (of) {
+    const resolved = docsContext.resolveOf(of, ['story']);
     stories = [resolved.story];
   } else if (stories.length === 0) {
     try {

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Story as StoryBlock } from './Story';
@@ -45,6 +46,16 @@ export const OfError: Story = {
   },
 };
 
+export const OfUndefined: Story = {
+  args: {
+    // @ts-expect-error this is supposed to be undefined
+    // eslint-disable-next-line import/namespace
+    of: ButtonStories.NotDefined,
+  },
+  parameters: { chromatic: { disableSnapshot: true } },
+  decorators: [(s) => (window?.navigator.userAgent.match(/StorybookTestRunner/) ? <div /> : s())],
+};
+
 export const Inline: Story = {
   args: {
     of: StoryParametersStories.NoParameters,

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

@@ -89,6 +89,10 @@ export type StoryProps = (StoryDefProps | StoryRefProps) & StoryParameters;
 
 export const getStoryId = (props: StoryProps, context: DocsContextProps): StoryId => {
   const { id, of, meta, story } = props as StoryRefProps;
+  if ('of' in props && of === undefined) {
+    throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+  }
+
   if (id) {
     deprecate(dedent`Referencing stories by \`id\` is deprecated, please use \`of\` instead.