Merge pull request #7965 from atanasster/mdx-empty-story

Addon-docs: Error handling for invalid Story id

examples/official-storybook/stories/addon-docs/addon-docs.stories.mdx

@@ -28,6 +28,10 @@ import DocgenButton from '../../components/DocgenButton';
 
 <Props of="." />
 
+<Preview>
+  <Story id="nonexistent-story" />
+</Preview>
+
 ## A random color ColorPalette
 
 <ColorPalette>

examples/official-storybook/stories/hooks.stories.js

@@ -19,3 +19,13 @@ export const Input = () => {
   const [text, setText] = useState('foo');
   return <input value={text} onChange={e => setText(e.target.value)} />;
 };
+
+export const reactHookCheckbox = () => {
+  const [on, setOn] = React.useState(false);
+  return (
+    <label>
+      <input type="checkbox" checked={on} onChange={e => setOn(e.target.checked)} />
+      On
+    </label>
+  );
+};

examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx

@@ -73,6 +73,8 @@ Just like in React, we can easily reference other stories in our docs:
 
 <Story id="addon-knobs--all-knobs" height="400px" />
 
+<Story id="nonexistent-story" />
+
 ## More info
 
 For more info, check out the [Storybook Docs Technical Preview](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing).

lib/components/src/blocks/Story.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { IFrame } from './IFrame';
 import { EmptyBlock } from './EmptyBlock';
 import { ZoomContext } from './ZoomContext';
@@ -10,6 +9,12 @@ export enum StoryError {
   NO_STORY = 'No component or story to display',
 }
 
+/** error message for Story with null storyFn
+ * if the story id exists, it must be pointing to a non-existing story
+ *  if there is assigned story id, the story must be empty
+ */
+const MISSING_STORY = (id?: string) => (id ? `Story "${id}" doesn't exist.` : StoryError.NO_STORY);
+
 interface CommonProps {
   title: string;
   height?: string;
@@ -48,15 +53,12 @@ const InlineZoomWrapper: React.FC<{ scale: number }> = ({ scale, children }) =>
   );
 };
 
-const InlineStory: React.FunctionComponent<InlineStoryProps> = ({
-  storyFn: ReactStory,
-  height,
-}) => (
+const InlineStory: React.FunctionComponent<InlineStoryProps> = ({ storyFn, height, id }) => (
   <div style={{ height }}>
     <ZoomContext.Consumer>
       {({ scale }) => (
         <InlineZoomWrapper scale={scale}>
-          <ReactStory />
+          {storyFn ? React.createElement(storyFn) : <EmptyBlock>{MISSING_STORY(id)}</EmptyBlock>}
         </InlineZoomWrapper>
       )}
     </ZoomContext.Consumer>