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/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" />);