Move LinkTo component to a separate addon-links/react endpoint

addons/links/react.js

@@ -0,0 +1 @@
+module.exports = require('./dist/react');

addons/links/src/index.js

@@ -5,4 +5,18 @@ export const RECEIVE_HREF_EVENT_ID = `${ADDON_ID}/receive-href-event`;
 
 export { register } from './manager';
 export { linkTo, hrefTo } from './preview';
-export { default as LinkTo } from './components/link';
+
+let hasWarned = false;
+
+export function LinkTo() {
+  if (!hasWarned) {
+    // eslint-disable-next-line no-console
+    console.error(`
+LinkTo has moved to addon-links/react:
+
+import LinkTo from '@storybook/addon-links/react';
+    `);
+    hasWarned = true;
+  }
+  return null;
+}

addons/links/src/components/link.js → addons/links/src/react/components/link.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import { RoutedLink } from '@storybook/components';
-import { openLink, hrefTo } from '../preview';
+import { openLink, hrefTo } from '../../preview';
 
 export default class LinkTo extends PureComponent {
   constructor(...args) {

addons/links/src/components/link.test.js → addons/links/src/react/components/link.test.js

@@ -2,8 +2,8 @@ import { shallow } from 'enzyme';
 import React from 'react';
 import addons from '@storybook/addons';
 
-import { EVENT_ID } from '..';
-import { mockChannel } from '../preview.test';
+import { EVENT_ID } from '../../index';
+import { mockChannel } from '../../preview.test';
 import LinkTo from './link';
 
 jest.mock('@storybook/addons');

addons/links/src/react/index.js

@@ -0,0 +1 @@
+export default from './components/link';

app/react/src/demo/Welcome.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import glamorous from 'glamorous';
-import { LinkTo } from '@storybook/addon-links';
+import LinkTo from '@storybook/addon-links/react';
 
 const Main = glamorous.article({
   margin: 15,

examples/cra-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Links.Button First 1`] = `
+<button
+  onClick={[Function]}
+>
+  Go to "Second"
+</button>
+`;
+
+exports[`Storyshots Addon Links.Button Second 1`] = `
+<button
+  onClick={[Function]}
+>
+  Go to "First"
+</button>
+`;
+
+exports[`Storyshots Addon Links.Href log 1`] = `
+<span>
+  See action logger
+</span>
+`;
+
+exports[`Storyshots Addon Links.Link First 1`] = `
+<a
+  href="/"
+  onClick={[Function]}
+>
+  Go to Second
+</a>
+`;
+
+exports[`Storyshots Addon Links.Link Second 1`] = `
+<a
+  href="/"
+  onClick={[Function]}
+>
+  Go to First
+</a>
+`;
+
+exports[`Storyshots Addon Links.Select First 1`] = `
+<a
+  href="/"
+  onClick={[Function]}
+>
+  Go back
+</a>
+`;
+
+exports[`Storyshots Addon Links.Select Index 1`] = `
+<select
+  onChange={[Function]}
+  value="Index"
+>
+  <option>
+    Index
+  </option>
+  <option>
+    First
+  </option>
+  <option>
+    Second
+  </option>
+  <option>
+    Third
+  </option>
+</select>
+`;
+
+exports[`Storyshots Addon Links.Select Second 1`] = `
+<a
+  href="/"
+  onClick={[Function]}
+>
+  Go back
+</a>
+`;
+
+exports[`Storyshots Addon Links.Select Third 1`] = `
+<a
+  href="/"
+  onClick={[Function]}
+>
+  Go back
+</a>
+`;

examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot

@@ -32,9 +32,8 @@ exports[`Storyshots Welcome to Storybook 1`] = `
 
     <a
       className="css-ca0824"
+      href="/"
       onClick={[Function]}
-      role="button"
-      tabIndex="0"
     >
       stories
     </a>

examples/cra-kitchen-sink/src/stories/addon-links.stories.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { linkTo, hrefTo } from '@storybook/addon-links';
+import LinkTo from '@storybook/addon-links/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Addon Links.Link', module)
+  .add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
+  .add('Second', () => <LinkTo story="First">Go to First</LinkTo>);
+
+storiesOf('Addon Links.Button', module)
+  .add('First', () => (
+    <button onClick={linkTo('Addon Links.Button', 'Second')}>Go to "Second"</button>
+  ))
+  .add('Second', () => (
+    <button onClick={linkTo('Addon Links.Button', 'First')}>Go to "First"</button>
+  ));
+
+storiesOf('Addon Links.Select', module)
+  .add('Index', () => (
+    <select value="Index" onChange={linkTo('Addon Links.Select', e => e.currentTarget.value)}>
+      <option>Index</option>
+      <option>First</option>
+      <option>Second</option>
+      <option>Third</option>
+    </select>
+  ))
+  .add('First', () => <LinkTo story="Index">Go back</LinkTo>)
+  .add('Second', () => <LinkTo story="Index">Go back</LinkTo>)
+  .add('Third', () => <LinkTo story="Index">Go back</LinkTo>);
+
+storiesOf('Addon Links.Href', module).add('log', () => {
+  hrefTo('Addon Links.Href', 'log').then(href => action('URL of this story')({ href }));
+
+  return <span>See action logger</span>;
+});

examples/cra-kitchen-sink/src/stories/welcome.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Welcome } from '@storybook/react/demo';
 import { storiesOf } from '@storybook/react';
-import { linkTo } from '@storybook/addon-links';
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showKind="Button" />);