Merge pull request #1021 from storybooks/add-addonlinks-repo

Add addonlinks repo

packages/addon-links/.storybook/addons.js

@@ -0,0 +1,6 @@
+// Uncomment to register defaults
+// import '@kadira/storybook/addons';
+
+// Use the line below to register this addon
+// import '@kadira/storybook-addon-links/register';
+import '../register';

packages/addon-links/.storybook/config.js

@@ -0,0 +1,2 @@
+import * as storybook from '@kadira/storybook';
+storybook.configure(() => require('./stories'), module);

packages/addon-links/.storybook/stories.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import { linkTo } from '../src';
+
+storiesOf('Button', module)
+  .add('First Story', () => (
+    <button onClick={linkTo('Button', 'Second Story')}>Go to "Second Story"</button>
+  ))
+  .add('Second Story', () => (
+    <button onClick={linkTo('Button', 'First Story')}>Go to "First Story"</button>
+  ))
+  .add('Multiple Selection', () => (
+    <MultipleStories onClick={linkTo('Button', (filter) => {
+      return filter === 'First' ? 'First Story' : 'Second Story';
+    })}/> 
+  ));
+
+const MultipleStories = ({onClick}) => {
+  return (
+  <ul>
+    <button onClick={onClick.bind(null, 'First')}>Go to "First Story"</button>
+    <button onClick={onClick.bind(null, 'Second')}>Go to "Second Story"</button>
+  </ul>);
+}

packages/addon-links/CHANGELOG.md

@@ -0,0 +1,10 @@
+## Changelog
+
+### v1.0.1
+
+* Refactor source code
+* Update the README file
+
+### v1.0.0
+
+* First stable release with all features from the storybook linkTo function

packages/addon-links/README.md

@@ -0,0 +1,33 @@
+# Story Links Addon
+
+The Story Links addon can be used to create links between stories. This addon works with both [React Storybook](https://github.com/kadirahq/react-storybook) and [React Native Storybook](https://github.com/kadirahq/react-native-storybook) (included by default).
+
+## Getting Started
+
+You can use this addon without installing it.
+
+```js
+import { storiesOf, linkTo } from '@kadira/storybook'
+
+storiesOf('Button', module)
+  .add('First', () => (
+    <button onClick={linkTo('Button', 'Second')}>Go to "Second"</button>
+  ))
+  .add('Second', () => (
+    <button onClick={linkTo('Button', 'First')}>Go to "First"</button>
+  ));
+```
+
+Have a look at the linkTo function:
+
+```js
+linkTo('Toggle', 'off')
+```
+
+With that, you can link an event in a component to any story in the Storybook.
+
+* First parameter is the the story kind name (what you named with `storiesOf`).
+* Second parameter is the story name (what you named with `.add`).
+
+> You can also pass a function instead for any of above parameter. That function accepts arguments emitted by the event and it should return a string. <br/>
+> Have a look at [PR86](https://github.com/kadirahq/react-storybook/pull/86) for more information.

packages/addon-links/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@kadira/storybook-addon-links",
+  "version": "1.0.1",
+  "description": "Story Links addon for storybook",
+  "main": "dist/index.js",
+  "scripts": {
+    "deploy-storybook": "storybook-to-ghpages",
+    "prepublish": "node ../../scripts/prepublish.js",
+    "storybook": "start-storybook -p 9001"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kadirahq/storybook-addon-links.git"
+  },
+  "keywords": [
+    "storybook"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kadirahq/storybook-addon-links/issues"
+  },
+  "homepage": "https://github.com/kadirahq/storybook-addon-links#readme",
+  "devDependencies": {
+    "@kadira/storybook": "^*",
+    "@kadira/storybook-addons": "*",
+    "@kadira/storybook-ui": "*",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "shelljs": "^0.7.7"
+  },
+  "peerDependencies": {
+    "@kadira/storybook-addons": "*",
+    "react": "*",
+    "react-dom": "*"
+  }
+}

packages/addon-links/register.js

@@ -0,0 +1 @@
+require('./dist').register();

packages/addon-links/src/index.js

@@ -0,0 +1,5 @@
+export const ADDON_ID = 'kadirahq/storybook-addon-links';
+export const EVENT_ID = `${ADDON_ID}/link-event`;
+
+export { register } from './manager';
+export { linkTo } from './preview';

packages/addon-links/src/manager.js

@@ -0,0 +1,11 @@
+import addons from '@kadira/storybook-addons';
+import { ADDON_ID, EVENT_ID } from './';
+
+export function register() {
+  addons.register(ADDON_ID, api => {
+    const channel = addons.getChannel();
+    channel.on(EVENT_ID, selection => {
+      api.selectStory(selection.kind, selection.story);
+    });
+  });
+}

packages/addon-links/src/preview.js

@@ -0,0 +1,12 @@
+import addons from '@kadira/storybook-addons';
+import { EVENT_ID } from './';
+
+export function linkTo(kind, story) {
+  return function(...args) {
+    const resolvedKind = typeof kind === 'function' ? kind(...args) : kind;
+    const resolvedStory = typeof story === 'function' ? story(...args) : story;
+
+    const channel = addons.getChannel();
+    channel.emit(EVENT_ID, { kind: resolvedKind, story: resolvedStory });
+  };
+}