Addon-docs: Fix link CORS errors using channel navigate event (#9381)

Addon-docs: Fix link CORS errors using channel navigate event

addons/docs/package.json

@@ -49,6 +49,7 @@
     "@storybook/addons": "5.3.0-rc.12",
     "@storybook/api": "5.3.0-rc.12",
     "@storybook/components": "5.3.0-rc.12",
+    "@storybook/core-events": "5.3.0-rc.12",
     "@storybook/csf": "0.0.1",
     "@storybook/postinstall": "5.3.0-rc.12",
     "@storybook/source-loader": "5.3.0-rc.12",

addons/docs/src/blocks/DocsContainer.tsx

@@ -29,7 +29,12 @@ export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context,
   const allComponents = { ...defaultComponents, ...userComponents };
 
   useEffect(() => {
-    const url = new URL(window.parent.location);
+    let url;
+    try {
+      url = new URL(window.parent.location);
+    } catch (err) {
+      return;
+    }
     if (url.hash) {
       const element = document.getElementById(url.hash.substring(1));
       if (element) {

addons/docs/src/blocks/mdx.tsx

@@ -1,11 +1,11 @@
 import React, { FC, SyntheticEvent } from 'react';
+import addons from '@storybook/addons';
 import { Source } from '@storybook/components';
+import { NAVIGATE_URL } from '@storybook/core-events';
 import { Code, components } from '@storybook/components/html';
-import { document, window } from 'global';
+import { document } from 'global';
-import { isNil } from 'lodash';
 import { styled } from '@storybook/theming';
 import { DocsContext, DocsContextProps } from './DocsContext';
-import { scrollToElement } from './utils';
 
 // Hacky utility for asserting identifiers in MDX Story elements
 export const assertIsFn = (val: any) => {
@@ -48,11 +48,8 @@ export const CodeOrSourceMdx: FC<CodeOrSourceMdxProps> = ({ className, children,
   );
 };
 
-function generateHrefWithHash(hash: string): string {
+function navigate(url: string) {
-  const url = new URL(window.parent.location);
+  addons.getChannel().emit(NAVIGATE_URL, url);
-  const href = `${url.origin}/${url.search}#${hash}`;
-
-  return href;
 }
 
 // @ts-ignore
@@ -65,14 +62,12 @@ interface AnchorInPageProps {
 const AnchorInPage: FC<AnchorInPageProps> = ({ hash, children }) => (
   <A
     href={hash}
+    target="_self"
     onClick={(event: SyntheticEvent) => {
-      event.preventDefault();
+      const id = hash.substring(1);
-
+      const element = document.getElementById(id);
-      const hashValue = hash.substring(1);
+      if (element) {
-      const element = document.getElementById(hashValue);
+        navigate(hash);
-      if (!isNil(element)) {
-        window.parent.history.replaceState(null, '', generateHrefWithHash(hashValue));
-        scrollToElement(element);
       }
     }}
   >
@@ -88,7 +83,7 @@ interface AnchorMdxProps {
 export const AnchorMdx: FC<AnchorMdxProps> = props => {
   const { href, target, children, ...rest } = props;
 
-  if (!isNil(href)) {
+  if (href) {
     // Enable scrolling for in-page anchors.
     if (href.startsWith('#')) {
       return <AnchorInPage hash={href}>{children}</AnchorInPage>;
@@ -96,11 +91,16 @@ export const AnchorMdx: FC<AnchorMdxProps> = props => {
 
     // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe.
     if (target !== '_blank') {
-      const parentUrl = new URL(window.parent.location.href);
-      const newHref = `${parentUrl.origin}${href}`;
-
       return (
-        <A href={newHref} target={target} {...rest}>
+        <A
+          href={href}
+          onClick={(event: SyntheticEvent) => {
+            event.preventDefault();
+            navigate(href);
+          }}
+          target={target}
+          {...rest}
+        >
           {children}
         </A>
       );
@@ -149,17 +149,19 @@ const HeaderWithOcticonAnchor: FC<HeaderWithOcticonAnchorProps> = ({
 }) => {
   // @ts-ignore
   const OcticonHeader = OcticonHeaders[as];
+  const hash = `#${id}`;
 
   return (
     <OcticonHeader id={id} {...rest}>
       <OcticonAnchor
         aria-hidden="true"
-        href={generateHrefWithHash(id)}
+        href={hash}
         tabIndex={-1}
-        onClick={() => {
+        target="_self"
+        onClick={(event: SyntheticEvent) => {
           const element = document.getElementById(id);
-          if (!isNil(element)) {
+          if (element) {
-            scrollToElement(element);
+            navigate(hash);
           }
         }}
       >
@@ -184,7 +186,7 @@ export const HeaderMdx: FC<HeaderMdxProps> = props => {
   const { as, id, children, ...rest } = props;
 
   // An id should have been added on every header by the "remark-slug" plugin.
-  if (!isNil(id)) {
+  if (id) {
     return (
       <HeaderWithOcticonAnchor as={as} id={id} {...rest}>
         {children}

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

@@ -129,13 +129,19 @@ Right aligned columns
 
 ## Links
 
-[link text](https://hichroma.com)
+[external link](https://hichroma.com)
 
-[link with title](https://hichroma.com 'Insert title!')
+[external link with title](https://hichroma.com 'Insert title!')
 
 [link to in page anchor](#h1-heading)
 
-[link to another story](/?path=/docs/addons-docs-docs-only--page#bottom)
+[link to another story (docs)](?path=/docs/addons-docs-docs-only--page)
+
+[link to another story (canvas)](?path=/story/addons-docs-buttongroup--basic)
+
+[link to about page](?path=/settings/about)
+
+[link to absolute local url](/absolute)
 
 ## Images
 

lib/api/package.json

@@ -26,12 +26,14 @@
     "prepare": "node ./scripts/generateVersion.js && node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@reach/router": "^1.2.1",
     "@storybook/channels": "5.3.0-rc.12",
     "@storybook/client-logger": "5.3.0-rc.12",
     "@storybook/core-events": "5.3.0-rc.12",
     "@storybook/csf": "0.0.1",
     "@storybook/router": "5.3.0-rc.12",
     "@storybook/theming": "5.3.0-rc.12",
+    "@types/reach__router": "^1.2.3",
     "core-js": "^3.0.1",
     "fast-deep-equal": "^2.0.1",
     "global": "^4.3.2",

lib/api/src/index.tsx

@@ -38,7 +38,7 @@ export { Options as StoreOptions, Listener as ChannelListener };
 
 const ManagerContext = createContext({ api: undefined, state: getInitialState({}) });
 
-const { STORY_CHANGED, SET_STORIES, SELECT_STORY } = Events;
+const { STORY_CHANGED, SET_STORIES, SELECT_STORY, NAVIGATE_URL } = Events;
 
 export type Module = StoreData &
   RouterData &
@@ -186,6 +186,9 @@ class ManagerProvider extends Component<Props, State> {
         api.selectStory(kind, story, rest);
       }
     );
+    api.on(NAVIGATE_URL, (url: string, options: { [k: string]: any }) => {
+      api.navigateUrl(url, options);
+    });
 
     this.state = state;
     this.api = api;

lib/api/src/modules/url.ts

@@ -1,3 +1,4 @@
+import { navigate as navigateRouter, NavigateOptions } from '@reach/router';
 import { queryFromLocation } from '@storybook/router';
 import { toId } from '@storybook/csf';
 
@@ -92,6 +93,7 @@ export interface QueryParams {
 }
 
 export interface SubAPI {
+  navigateUrl: (url: string, options: NavigateOptions<{}>) => void;
   getQueryParam: (key: string) => string | undefined;
   getUrlState: () => {
     queryParams: QueryParams;
@@ -139,6 +141,9 @@ export default function({ store, navigate, state, provider, ...rest }: Module) {
         },
       });
     },
+    navigateUrl(url: string, options: NavigateOptions<{}>) {
+      navigateRouter(url, options);
+    },
   };
 
   return {

lib/core-events/src/index.ts

@@ -21,6 +21,7 @@ enum events {
   STORIES_COLLAPSE_ALL = 'storiesCollapseAll',
   STORIES_EXPAND_ALL = 'storiesExpandAll',
   DOCS_RENDERED = 'docsRendered',
+  NAVIGATE_URL = 'navigateUrl',
 }
 
 // Enables: `import Events from ...`
@@ -50,4 +51,5 @@ export const {
   STORIES_EXPAND_ALL,
   STORY_THREW_EXCEPTION,
   DOCS_RENDERED,
+  NAVIGATE_URL,
 } = events;