From f4a6b287ba2948b49a2c10f8d22d86f550f8ee05 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 24 Jun 2021 21:52:33 +0800 Subject: [PATCH 1/4] UI: Fix navigation after no story error --- lib/ui/src/components/preview/preview.tsx | 33 ++++++++++--------- lib/ui/src/components/preview/utils/types.tsx | 1 + lib/ui/src/containers/preview.tsx | 1 + 3 files changed, 19 insertions(+), 16 deletions(-) diff --git a/lib/ui/src/components/preview/preview.tsx b/lib/ui/src/components/preview/preview.tsx index c506ae65a14a..5e2b3897f8d6 100644 --- a/lib/ui/src/components/preview/preview.tsx +++ b/lib/ui/src/components/preview/preview.tsx @@ -136,6 +136,7 @@ const Preview = React.memo((props) => { id: previewId, options, viewMode, + storyId, story = undefined, description, baseUrl, @@ -148,25 +149,25 @@ const Preview = React.memo((props) => { const shouldScale = viewMode === 'story'; const { isToolshown } = options; - const initialRender = useRef(true); + const previousStoryId = useRef(storyId); + 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; - } - return; - } + console.log({ story }); + 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', - }, - }); + if (storyId !== previousStoryId.current) { + previousStoryId.current = storyId; + const { refId, id } = story; + console.log({ refId, id }); + 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 index 5148c54211f5..edc557a4d36c 100644 --- 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 index 4de756d22b65..16e19e49950e 100644 --- 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, From 007c2395b7159f318ffb44bfc083df7264174e61 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 24 Jun 2021 21:54:01 +0800 Subject: [PATCH 2/4] Clean up --- lib/ui/src/components/preview/preview.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/lib/ui/src/components/preview/preview.tsx b/lib/ui/src/components/preview/preview.tsx index 5e2b3897f8d6..e9c27c092d83 100644 --- a/lib/ui/src/components/preview/preview.tsx +++ b/lib/ui/src/components/preview/preview.tsx @@ -152,14 +152,12 @@ const Preview = React.memo((props) => { const previousStoryId = useRef(storyId); useEffect(() => { - // Don't emit the event on first ("real") render, only when story or mode changes - console.log({ story }); - if (story && viewMode && viewMode.match(/docs|story/)) { + // Don't emit the event on first ("real") render, only when story or mode changes if (storyId !== previousStoryId.current) { previousStoryId.current = storyId; + const { refId, id } = story; - console.log({ refId, id }); api.emit(SET_CURRENT_STORY, { storyId: id, viewMode, From 2d393aa072e987fe44f65090268162439d465608 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 24 Jun 2021 22:00:27 +0800 Subject: [PATCH 3/4] Clean up logic for viewMode changes --- lib/ui/src/components/preview/preview.tsx | 26 +++++++++++++---------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/lib/ui/src/components/preview/preview.tsx b/lib/ui/src/components/preview/preview.tsx index e9c27c092d83..b5096c1f3369 100644 --- a/lib/ui/src/components/preview/preview.tsx +++ b/lib/ui/src/components/preview/preview.tsx @@ -150,21 +150,25 @@ const Preview = React.memo((props) => { const { isToolshown } = options; const previousStoryId = useRef(storyId); + const previousViewMode = useRef(viewMode); useEffect(() => { - if (story && viewMode && viewMode.match(/docs|story/)) { + if (story && viewMode) { // Don't emit the event on first ("real") render, only when story or mode changes - if (storyId !== previousStoryId.current) { + if (storyId !== previousStoryId.current || viewMode !== previousViewMode.current) { previousStoryId.current = storyId; - - const { refId, id } = story; - api.emit(SET_CURRENT_STORY, { - storyId: id, - viewMode, - options: { - target: refId ? `storybook-ref-${refId}` : 'storybook-preview-iframe', - }, - }); + 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', + }, + }); + } } } }, [story, viewMode]); From 2944969f66568b031835082b4159c41789ee3e2e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 24 Jun 2021 22:25:23 +0800 Subject: [PATCH 4/4] Fix snapshots --- .../mdx/component-args.output.snapshot | 76 ------------------- .../mdx/component-id.output.snapshot | 50 ------------ 2 files changed, 126 deletions(-) diff --git a/lib/csf-tools/__testfixtures__/mdx/component-args.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/component-args.output.snapshot index 842ce69627c5..ca2bd2aa2a7f 100644 --- 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 ( - - -

{\`Args\`}

- - - - - ); -} - -MDXContent.isMDXComponent = true; - -export const componentNotes = () => ; -componentNotes.storyName = 'component notes'; -componentNotes.parameters = { storySource: { source: '' } }; - -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: () => ( - - - - ), -}; - -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 index b7de20b4c0de..71c57f7711a9 100644 --- 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 ( - - - - - - - ); -} - -MDXContent.isMDXComponent = true; - -export const componentNotes = () => ; -componentNotes.storyName = 'component notes'; -componentNotes.parameters = { storySource: { source: '' } }; - -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: () => ( - - - - ), -}; - -export default componentMeta; -" -`; - exports[`docs-mdx-compiler-plugin component-id.mdx 1`] = ` "/* @jsxRuntime classic */ /* @jsx mdx */