Merge pull request #15349 from storybookjs/15310-fix-first-navigation…

…-on-error UI: Fix navigation after no story error
storybookjs · Jun 28, 2021 · a4c029c · a4c029c
1 parent 1c47dc0
commit a4c029c
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 143 deletions.
diff --git a/lib/csf-tools/__testfixtures__/mdx/component-args.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/component-args.output.snapshot
@@ -75,79 +75,3 @@ componentMeta.parameters.docs = {
 export default componentMeta;
 "
 `;
-
-exports[`docs-mdx-compiler-plugin fixtures component-args 1`] = `
-"/* @jsxRuntime classic */
-/* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs';
-
-import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs';
-
-const layoutProps = {};
-const MDXLayout = 'wrapper';
-function MDXContent({ components, ...props }) {
-  return (
-    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
-      <Meta
-        title=\\"Button\\"
-        args={{
-          a: 1,
-          b: 2,
-        }}
-        argTypes={{
-          a: {
-            name: 'A',
-          },
-          b: {
-            name: 'B',
-          },
-        }}
-        mdxType=\\"Meta\\"
-      />
-      <h1>{\`Args\`}</h1>
-      <Story name=\\"component notes\\" mdxType=\\"Story\\">
-        <Button mdxType=\\"Button\\">Component notes</Button>
-      </Story>
-    </MDXLayout>
-  );
-}
-
-MDXContent.isMDXComponent = true;
-
-export const componentNotes = () => <Button>Component notes</Button>;
-componentNotes.storyName = 'component notes';
-componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
-
-const componentMeta = {
-  title: 'Button',
-  args: {
-    a: 1,
-    b: 2,
-  },
-  argTypes: {
-    a: {
-      name: 'A',
-    },
-    b: {
-      name: 'B',
-    },
-  },
-  includeStories: ['componentNotes'],
-};
-
-const mdxStoryNameToKey = { 'component notes': 'componentNotes' };
-
-componentMeta.parameters = componentMeta.parameters || {};
-componentMeta.parameters.docs = {
-  ...(componentMeta.parameters.docs || {}),
-  page: () => (
-    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
-      <MDXContent />
-    </AddContext>
-  ),
-};
-
-export default componentMeta;
-"
-`;
diff --git a/lib/csf-tools/__testfixtures__/mdx/component-id.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/component-id.output.snapshot
@@ -1,55 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`docs-mdx-compiler-plugin component-id 1`] = `
-"/* @jsxRuntime classic */
-/* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs';
-
-import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs';
-
-const layoutProps = {};
-const MDXLayout = 'wrapper';
-function MDXContent({ components, ...props }) {
-  return (
-    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
-      <Meta title=\\"Button\\" component={Button} id=\\"button-id\\" mdxType=\\"Meta\\" />
-      <Story name=\\"component notes\\" mdxType=\\"Story\\">
-        <Button mdxType=\\"Button\\">Component notes</Button>
-      </Story>
-    </MDXLayout>
-  );
-}
-
-MDXContent.isMDXComponent = true;
-
-export const componentNotes = () => <Button>Component notes</Button>;
-componentNotes.storyName = 'component notes';
-componentNotes.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
-
-const componentMeta = {
-  title: 'Button',
-  id: 'button-id',
-  component: Button,
-  includeStories: ['componentNotes'],
-};
-
-const mdxStoryNameToKey = { 'component notes': 'componentNotes' };
-
-componentMeta.parameters = componentMeta.parameters || {};
-componentMeta.parameters.docs = {
-  ...(componentMeta.parameters.docs || {}),
-  page: () => (
-    <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}>
-      <MDXContent />
-    </AddContext>
-  ),
-};
-
-export default componentMeta;
-"
-`;
-
 exports[`docs-mdx-compiler-plugin component-id.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */

diff --git a/lib/ui/src/components/preview/preview.tsx b/lib/ui/src/components/preview/preview.tsx
@@ -136,6 +136,7 @@ const Preview = React.memo<PreviewProps>((props) => {
     id: previewId,
     options,
     viewMode,
+    storyId,
     story = undefined,
     description,
     baseUrl,
@@ -148,25 +149,27 @@ const Preview = React.memo<PreviewProps>((props) => {
   const shouldScale = viewMode === 'story';
   const { isToolshown } = options;
 
-  const initialRender = useRef(true);
+  const previousStoryId = useRef(storyId);
+  const previousViewMode = useRef(viewMode);
+
   useEffect(() => {
-    // Don't emit the event on first ("real") render, only when story or mode changes
-    if (initialRender.current) {
-      // We initially render without a story set, which isn't all that interesting, let's ignore
-      if (story) {
-        initialRender.current = false;
+    if (story && viewMode) {
+      // Don't emit the event on first ("real") render, only when story or mode changes
+      if (storyId !== previousStoryId.current || viewMode !== previousViewMode.current) {
+        previousStoryId.current = storyId;
+        previousViewMode.current = viewMode;
+
+        if (viewMode.match(/docs|story/)) {
+          const { refId, id } = story;
+          api.emit(SET_CURRENT_STORY, {
+            storyId: id,
+            viewMode,
+            options: {
+              target: refId ? `storybook-ref-${refId}` : 'storybook-preview-iframe',
+            },
+          });
+        }
       }
-      return;
-    }
-    if (story && viewMode && viewMode.match(/docs|story/)) {
-      const { refId, id } = story;
-      api.emit(SET_CURRENT_STORY, {
-        storyId: id,
-        viewMode,
-        options: {
-          target: refId ? `storybook-ref-${refId}` : 'storybook-preview-iframe',
-        },
-      });
     }
   }, [story, viewMode]);
 

diff --git a/lib/ui/src/components/preview/utils/types.tsx b/lib/ui/src/components/preview/utils/types.tsx
@@ -7,6 +7,7 @@ export interface PreviewProps {
   api: API;
   viewMode: ViewMode;
   refs: State['refs'];
+  storyId: Story['id'];
   story: Group | Story;
   docsOnly: boolean;
   options: {

diff --git a/lib/ui/src/containers/preview.tsx b/lib/ui/src/containers/preview.tsx
@@ -41,6 +41,7 @@ const mapper = ({ api, state }: Combo) => {
     viewMode,
     path,
     refs,
+    storyId,
     baseUrl: PREVIEW_URL || 'iframe.html',
     queryParams: customQueryParams,
     docsOnly,