From 010257ebe51096f42647cbb45eb1f5588ab78852 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 27 Apr 2017 19:07:00 +1000 Subject: [PATCH 1/2] Update linkTo documentation Links used to be an add-on, but are now supported natively in storybook. Updated the docs to reflect that. --- .../react-storybook/addons/addon-gallery.js | 4 ---- .../react-storybook/basics/writing-stories.js | 24 ++++++++++++++++++- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/docs/react-storybook/addons/addon-gallery.js b/src/docs/react-storybook/addons/addon-gallery.js index 2683c3c..dfce725 100644 --- a/src/docs/react-storybook/addons/addon-gallery.js +++ b/src/docs/react-storybook/addons/addon-gallery.js @@ -16,10 +16,6 @@ export default { Also, you can think of this as a way to document events in your components. - ### [Links](https://github.com/storybooks/storybook/tree/master/packages/addon-links) - - With links you can link stories together. With that, you can build demos and prototypes directly from your UI components. (Like you can do with [InVision](https://www.invisionapp.com/) and [Framer.js](https://framerjs.com/)) - ## Third Party Addons You need to install these addons directly from NPM in order to use them. diff --git a/src/docs/react-storybook/basics/writing-stories.js b/src/docs/react-storybook/basics/writing-stories.js index 724779f..29cf5b6 100644 --- a/src/docs/react-storybook/basics/writing-stories.js +++ b/src/docs/react-storybook/basics/writing-stories.js @@ -89,7 +89,6 @@ export default { .add('with some props', () => ()); ~~~ - Here we only add the decorator for the current set of stories. (In this example, we add it just for the **MyComponent** story group.) But, you can also add a decorator **globally** and it'll be applied to all the stories you create. This is how to add a decorator like that: @@ -107,6 +106,29 @@ export default { }, module); ~~~ + ## Linking stories + + With \`linkTo\` you can link stories together to build demos and prototypes directly from your UI components. (Simlar to [InVision](https://www.invisionapp.com/) and [Framer.js](https://framerjs.com/)) + + ~~~js + import { storiesOf, linkTo } from '@kadira/storybook' + + storiesOf('Button', module) + .add('First', () => ( + + )) + .add('Second', () => ( + + )); + ~~~ + + With that, you can link an event in a component to any story in the Storybook. + + * First parameter is the the story kind (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. + ## Managing stories Storybook has a very simple API to write stories. With that, you can’t display nested stories. From dd80a304b5b2bc21ad32918c2252bde9784ae648 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 28 Apr 2017 06:59:34 +1000 Subject: [PATCH 2/2] Fixed typos and add function example --- src/docs/react-storybook/basics/writing-stories.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/docs/react-storybook/basics/writing-stories.js b/src/docs/react-storybook/basics/writing-stories.js index 29cf5b6..3691e48 100644 --- a/src/docs/react-storybook/basics/writing-stories.js +++ b/src/docs/react-storybook/basics/writing-stories.js @@ -108,7 +108,7 @@ export default { ## Linking stories - With \`linkTo\` you can link stories together to build demos and prototypes directly from your UI components. (Simlar to [InVision](https://www.invisionapp.com/) and [Framer.js](https://framerjs.com/)) + With \`linkTo\` you can link stories together to build demos and prototypes directly from your UI components. (Similar to [InVision](https://www.invisionapp.com/) and [Framer.js](https://framerjs.com/)) ~~~js import { storiesOf, linkTo } from '@kadira/storybook' @@ -124,10 +124,14 @@ export default { With that, you can link an event in a component to any story in the Storybook. - * First parameter is the the story kind (what you named with storiesOf). + * First parameter is the story kind (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. + You can also pass a function instead for any of above parameters. That function accepts arguments emitted by the event and it should return a string. For example: + + ~~~js + linkTo(() => 'Button', () => 'Second') + ~~~ ## Managing stories