Skip to content

Commit

Permalink
Include documentation about stories.json
Browse files Browse the repository at this point in the history
  • Loading branch information
jonniebigodes committed Sep 17, 2020
1 parent ecaa84c commit dc8e587
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 0 deletions.
38 changes: 38 additions & 0 deletions docs/snippets/common/storybook-extract-result.json.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
```json
{
"v": 2,
"globalParameters": {},
"kindParameters": {
"components/myComponent": {
"fileName": 445,
"framework": "react"
},
"components/myOtherComponent": {
"fileName": 447,
"framework": "react"
}
},
"stories": {
"components-mycomponent--simple": {
"id": "components-mycomponent--simple",
"name": "Simple",
"kind": "components/myComponent",
"story": "Simple",
"parameters": {
"__id": "components-mycomponent--simple",
"__isArgsStory": true
}
},
"components-myothercomponent--simple": {
"id": "components-myothercomponent--simple",
"name": "Simple",
"kind": "components/myothercomponent",
"story": "Simple",
"parameters": {
"__id": "components-myothercomponent--simple",
"__isArgsStory": true
}
}
}
}
```
39 changes: 39 additions & 0 deletions docs/workflows/storybook-composition.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,42 @@ You can also compose Storybook that are running locally. For instance, if you ha
<!-- prettier-ignore-end -->

This composes the React and Angular Storybooks into your current Storybook. When either code base changes, hot-module-reload will work perfectly. That enables you to develop both frameworks in sync.

### Improve your Storybook composition

So far we've covered how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow:

```shell
npx sb extract
```

Using this command will generate a `stories.json` file in the default build directory (`storybook-static`) with information regarding your Storybook. Here's how it might look:

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'common/storybook-extract-result.json.mdx',
]}
/>

<!-- prettier-ignore-end -->

Once you add a reference to a Storybook deployed using this method, almost immediately you'll see all the stories and other relevant information displayed in the UI.

If required, you can also add additional arguments to this command. You can use the following to generate the `stories.json` file to a custom directory:

```shell
npx sb extract my-built-storybook-directory my-other-directory
```

Once the command executes it will look for a built Storybook in the `my-built-storybook-directory` and create the file in `my-other-directory`.

<div class="aside">

If you need to use arguments, you'll need to use both of them, or the command will not be executed properly.

</div>



0 comments on commit dc8e587

Please sign in to comment.