diff --git a/packages/addon-links/.storybook/addons.js b/packages/addon-links/.storybook/addons.js new file mode 100644 index 000000000000..25315237a045 --- /dev/null +++ b/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'; diff --git a/packages/addon-links/.storybook/config.js b/packages/addon-links/.storybook/config.js new file mode 100644 index 000000000000..c4434721049e --- /dev/null +++ b/packages/addon-links/.storybook/config.js @@ -0,0 +1,2 @@ +import * as storybook from '@kadira/storybook'; +storybook.configure(() => require('./stories'), module); diff --git a/packages/addon-links/.storybook/stories.js b/packages/addon-links/.storybook/stories.js new file mode 100644 index 000000000000..a74042267160 --- /dev/null +++ b/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', () => ( + + )) + .add('Second Story', () => ( + + )) + .add('Multiple Selection', () => ( + { + return filter === 'First' ? 'First Story' : 'Second Story'; + })}/> + )); + +const MultipleStories = ({onClick}) => { + return ( + ); +} diff --git a/packages/addon-links/CHANGELOG.md b/packages/addon-links/CHANGELOG.md new file mode 100644 index 000000000000..e75e5e46b4de --- /dev/null +++ b/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 diff --git a/packages/addon-links/README.md b/packages/addon-links/README.md new file mode 100644 index 000000000000..cf57b0ef9ada --- /dev/null +++ b/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', () => ( + + )) + .add('Second', () => ( + + )); +``` + +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.
+> Have a look at [PR86](https://github.com/kadirahq/react-storybook/pull/86) for more information. diff --git a/packages/addon-links/package.json b/packages/addon-links/package.json new file mode 100644 index 000000000000..aa9c966bb1c9 --- /dev/null +++ b/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": "*" + } +} diff --git a/packages/addon-links/register.js b/packages/addon-links/register.js new file mode 100644 index 000000000000..e69edbea3ed1 --- /dev/null +++ b/packages/addon-links/register.js @@ -0,0 +1 @@ +require('./dist').register(); diff --git a/packages/addon-links/src/index.js b/packages/addon-links/src/index.js new file mode 100644 index 000000000000..1f51be4d789f --- /dev/null +++ b/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'; diff --git a/packages/addon-links/src/manager.js b/packages/addon-links/src/manager.js new file mode 100644 index 000000000000..c868d6d1c7f4 --- /dev/null +++ b/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); + }); + }); +} diff --git a/packages/addon-links/src/preview.js b/packages/addon-links/src/preview.js new file mode 100644 index 000000000000..3b2444489a5c --- /dev/null +++ b/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 }); + }; +}