remove all references to addon-links in examples

create renderer agnostic stories in addons/links/template/stories

code/addons/links/template/stories/decorator.stories.ts

@@ -0,0 +1,38 @@
+import globalThis from 'global';
+import { withLinks } from '@storybook/addon-links';
+
+export default {
+  component: globalThis.Components.Html,
+  parameters: {
+    chromatic: { disable: true },
+  },
+  decorators: [withLinks],
+};
+
+export const Basic = {
+  args: {
+    content: `
+      <div>
+        <a class="link" href="#" data-sb-story="basic">go to basic</a>
+      </div>
+    `,
+  },
+};
+export const Other = {
+  args: {
+    content: `
+      <div>
+        <a class="link" href="#" data-sb-story="basic">to to basic</a>
+      </div>
+    `,
+  },
+};
+export const Third = {
+  args: {
+    content: `
+      <div>
+        <a class="link" href="#" data-sb-story="other">go to other</a>
+      </div>
+    `,
+  },
+};

code/addons/links/template/stories/parameters.stories.ts

@@ -0,0 +1,34 @@
+import globalThis from 'global';
+import { linkTo } from '@storybook/addon-links';
+
+export default {
+  component: globalThis.Components.Button,
+  args: {
+    children: 'Click Me!',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Basic = {
+  args: {
+    onClick: linkTo('basic'),
+  },
+};
+export const Other = {
+  args: {
+    onClick: linkTo('basic'),
+  },
+};
+export const Third = {
+  args: {
+    onClick: linkTo('other'),
+  },
+};
+
+export const Callback = {
+  args: {
+    onClick: linkTo('Addons/Links', (event: Event) => 'basic'),
+  },
+};

code/addons/links/template/stories/scroll.stories.ts

@@ -0,0 +1,41 @@
+import globalThis from 'global';
+import { withLinks } from '@storybook/addon-links';
+
+export default {
+  component: globalThis.Components.Html,
+  parameters: {
+    chromatic: { disable: true },
+  },
+  decorators: [withLinks],
+};
+
+export const Basic = {
+  args: {
+    content: `
+      <div>
+        <div style="marginBottom=100vh"></div>
+        <a class="link" href="#" data-sb-story="basic">go to basic</a>
+      </div>
+    `,
+  },
+};
+export const Other = {
+  args: {
+    content: `
+      <div>
+        <div style="marginBottom=100vh"></div>
+        <a class="link" href="#" data-sb-story="basic">to to basic</a>
+      </div>
+    `,
+  },
+};
+export const Third = {
+  args: {
+    content: `
+      <div>
+        <div style="marginBottom=100vh"></div>
+        <a class="link" href="#" data-sb-story="other">go to other</a>
+      </div>
+    `,
+  },
+};

code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '../react-demo';
 
 export default {
@@ -11,6 +10,6 @@ export default {
   },
 };
 
-export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={() => {}} />;
 
 ToStorybook.storyName = 'to Storybook';

code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx

@@ -1,4 +1,3 @@
-import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '../react-demo';
 import { Meta, Story } from '@storybook/addon-docs';
 
@@ -10,5 +9,5 @@ import { Meta, Story } from '@storybook/addon-docs';
 />
 
 <Story name="to Storybook">
-  <Welcome showApp={linkTo('Button')} />
+  <Welcome showApp={() => {}} />
 </Story>

code/examples/angular-cli/src/stories/addons/docs/addon-docs.stories.mdx

@@ -1,7 +1,6 @@
 import { moduleMetadata } from '@storybook/angular';
 import { Story, Meta, ArgsTable } from '@storybook/addon-docs';
 import { Welcome, Button } from '../.././angular-demo';
-import { linkTo } from '@storybook/addon-links';
 import { DocButtonComponent } from './doc-button/doc-button.component';
 
 # Storybook Docs for Angular

code/examples/angular-cli/src/stories/addons/links/addon-links.stories.ts

@@ -1,4 +1,3 @@
-import { linkTo } from '@storybook/addon-links';
 import { Button } from '../../angular-demo';
 
 export default {
@@ -9,7 +8,7 @@ export default {
 export const ButtonWithLinkToAnotherStory = () => ({
   props: {
     text: 'Go to Welcome Story',
-    onClick: linkTo('Welcome'),
+    onClick: () => {},
   },
 });
 

code/examples/angular-cli/src/stories/welcome-angular.stories.ts

@@ -1,5 +1,4 @@
 import type { Meta, StoryFn } from '@storybook/angular';
-import { linkTo } from '@storybook/addon-links';
 import { AppComponent } from '../app/app.component';
 
 export default {
@@ -9,6 +8,6 @@ export default {
 export const ToAngular: StoryFn = () => ({
   component: AppComponent,
   props: {
-    showApp: linkTo('Button'),
+    showApp: () => {},
   },
 });

code/examples/angular-cli/src/stories/welcome-storybook.stories.ts

@@ -1,5 +1,4 @@
 import type { Meta, StoryFn } from '@storybook/angular';
-import { linkTo } from '@storybook/addon-links';
 import { Welcome } from './angular-demo';
 
 export default {
@@ -9,6 +8,6 @@ export default {
 export const ToStorybook: StoryFn = () => ({
   component: Welcome,
   props: {
-    showApp: linkTo('Button'),
+    showApp: () => {},
   },
 });

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '../components/react-demo';
 
 export default {
@@ -7,5 +6,5 @@ export default {
   component: Welcome,
 };
 
-export const Story1 = () => <Welcome showApp={linkTo('Button')} />;
+export const Story1 = () => <Welcome showApp={() => {}} />;
 Story1.title = 'to Storybook';

code/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { linkTo } from '@storybook/addon-links';
 import type { ComponentMeta, ComponentStoryFn } from '@storybook/react';
 import { Welcome } from './react-demo';
 
@@ -8,8 +7,6 @@ export default {
   component: Welcome,
 } as ComponentMeta<typeof Welcome>;
 
-export const ToStorybook: ComponentStoryFn<typeof Welcome> = () => (
-  <Welcome showApp={linkTo('Button')} />
-);
+export const ToStorybook: ComponentStoryFn<typeof Welcome> = () => <Welcome showApp={() => {}} />;
 
 ToStorybook.storyName = 'to Storybook';

code/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '../components/react-demo';
 
 export default {
@@ -7,6 +6,6 @@ export default {
   component: Welcome,
 };
 
-export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={() => {}} />;
 
 ToStorybook.storyName = 'to Storybook';

code/examples/ember-cli/stories/addon-links.stories.js

@@ -1,15 +0,0 @@
-import { hbs } from 'ember-cli-htmlbars';
-import { linkTo } from '@storybook/addon-links';
-
-export default {
-  title: 'Addon/Links',
-};
-
-export const GoToWelcome = () => ({
-  template: hbs`<button {{action onClick}}>This button brings you to welcome</button>`,
-  context: {
-    onClick: linkTo('Welcome'),
-  },
-});
-
-GoToWelcome.storyName = 'Go to welcome';

code/examples/html-kitchen-sink/stories/welcome.stories.js

@@ -1,11 +1,8 @@
-import { withLinks } from '@storybook/addon-links';
-
 import './welcome.css';
 import welcome from './welcome.html';
 
 export default {
   title: 'Welcome',
-  decorators: [withLinks],
 };
 
 export const Welcome = () => welcome;

code/examples/official-storybook/stories/addon-links/button.stories.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { linkTo } from '@storybook/addon-links';
-
-export default {
-  title: 'Addons/Links/Button',
-};
-
-export const First = () => (
-  <button type="button" onClick={linkTo('Addons/Links/Button', 'Second')}>
-    Go to "Second"
-  </button>
-);
-
-export const Second = () => (
-  <button type="button" onClick={linkTo('Addons/Links/Button', 'First')}>
-    Go to "First"
-  </button>
-);

code/examples/official-storybook/stories/addon-links/href.stories.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { hrefTo } from '@storybook/addon-links';
-
-export default {
-  title: 'Addons/Links/Href',
-};
-
-export const Log = () => {
-  hrefTo('Addons/Links/Href', 'log');
-
-  return <span>See action logger</span>;
-};
-Log.parameters = {
-  options: {
-    panel: 'storybook/actions/panel',
-  },
-};

code/examples/official-storybook/stories/addon-links/link.stories.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import LinkTo from '@storybook/addon-links/react';
-
-export default {
-  title: 'Addons/Links/Link',
-};
-
-export const First = () => <LinkTo story="Second">Go to Second</LinkTo>;
-export const Second = () => <LinkTo story="First">Go to First</LinkTo>;

code/examples/official-storybook/stories/addon-links/scroll.stories.js

@@ -1,17 +0,0 @@
-import React, { Fragment } from 'react';
-import LinkTo from '@storybook/addon-links/react';
-
-export default {
-  title: 'Addons/Links/Scroll position',
-  decorators: [
-    (storyFn) => (
-      <Fragment>
-        <div style={{ marginBottom: '100vh' }}>Scroll down to see the link</div>
-        {storyFn()}
-      </Fragment>
-    ),
-  ],
-};
-
-export const First = () => <LinkTo story="Second">Go to Second</LinkTo>;
-export const Second = () => <LinkTo story="First">Go to First</LinkTo>;

code/examples/official-storybook/stories/addon-links/select.stories.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { linkTo } from '@storybook/addon-links';
-import LinkTo from '@storybook/addon-links/react';
-
-export default {
-  title: 'Addons/Links/Select',
-};
-
-export const Index = () => (
-  <select value="Index" onChange={linkTo('Addons/Links/Select', (e) => e.currentTarget.value)}>
-    <option>Index</option>
-    <option>First</option>
-    <option>Second</option>
-    <option>Third</option>
-  </select>
-);
-
-export const First = () => <LinkTo story="Index">Go back</LinkTo>;
-export const Second = () => <LinkTo story="Index">Go back</LinkTo>;
-export const Third = () => <LinkTo story="Index">Go back</LinkTo>;

code/examples/official-storybook/stories/demo/welcome.stories.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '../../components/react-demo';
 
 export default {
@@ -10,5 +9,5 @@ export default {
 // Some other valid values:
 // - 'other-demo-buttonmdx--with-text'
 // - 'Other/Demo/ButtonMdx'
-export const ToStorybook = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;
+export const ToStorybook = () => <Welcome showApp={() => {}} />;
 ToStorybook.storyName = 'to Storybook';

code/examples/preact-kitchen-sink/src/stories/addon-links.stories.js

@@ -1,12 +0,0 @@
-import { linkTo } from '@storybook/addon-links';
-import Button from '../Button';
-
-export default {
-  title: 'Addons/Links',
-};
-
-export const GoToWelcome = () => (
-  <Button onclick={linkTo('Welcome')}>This button links to Welcome</Button>
-);
-
-GoToWelcome.storyName = 'Go to welcome';

code/examples/preact-kitchen-sink/src/stories/welcome.stories.js

@@ -1,4 +1,3 @@
-import { linkTo } from '@storybook/addon-links';
 import Welcome from '../Welcome';
 
 export default {
@@ -8,6 +7,6 @@ export default {
   },
 };
 
-export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={() => {}} />;
 
 ToStorybook.storyName = 'to Storybook';

code/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js

@@ -1,16 +0,0 @@
-import { linkTo } from '@storybook/addon-links';
-
-import ActionLinkView from './views/ActionLinkView.svelte';
-
-export default {
-  title: 'Addon/Links',
-};
-
-export const GoToWelcomeView = () => ({
-  Component: ActionLinkView,
-  on: {
-    click: linkTo('Welcome'),
-  },
-});
-
-GoToWelcomeView.storyName = 'Go to welcome view';

code/examples/vue-kitchen-sink/src/stories/addon-links.stories.js

@@ -1,14 +0,0 @@
-import { linkTo } from '@storybook/addon-links';
-
-export default {
-  title: 'Addon/Links',
-};
-
-export const GoToWelcome = () => ({
-  template: '<my-button :rounded="true" @click="click" >This buttons links to Welcome</my-button>',
-  methods: {
-    click: linkTo('Welcome'),
-  },
-});
-
-GoToWelcome.storyName = 'Go to welcome';

code/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js

@@ -1,5 +1,3 @@
-import { linkTo } from '@storybook/addon-links';
-
 import Welcome from '../Welcome.vue';
 
 export default {
@@ -9,7 +7,7 @@ export default {
 
 export const WelcomeStory = () => {
   return {
-    render: (h) => h(Welcome, { listeners: { buttonRequested: linkTo('Button') } }),
+    render: (h) => h(Welcome, { listeners: { buttonRequested: () => {} } }),
   };
 };
 WelcomeStory.storyName = 'Welcome';

code/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js

@@ -1,5 +1,3 @@
-import { linkTo } from '@storybook/addon-links';
-
 import MyButton from './Button.vue';
 
 export default {
@@ -41,7 +39,7 @@ export const TemplateMethods = () => ({
         <my-button :rounded="true" @click="action">MyButton rendered in a template + props & methods</my-button>
       </p>`,
   methods: {
-    action: linkTo('Button'),
+    action: () => {},
   },
 });