diff --git a/lib/ui/README.md b/lib/ui/README.md index 8d8e0da6ad71..adf4b6925344 100644 --- a/lib/ui/README.md +++ b/lib/ui/README.md @@ -6,20 +6,20 @@ You can configure it by providing a provider API. ## Table of Contents -- [Usage](#usage) -- [API](#api) - - [.setOptions()](#setoptions) -- [.setStories()](#setstories) -- [.onStory()](#onstory) -- [Hacking Guide](#hacking-guide) - - [The App](#the-app) - - [Changing UI](#changing-ui) - - [Mounting](#mounting) - - [App Context](#app-context) - - [Actions](#actions) - - [Core API](#core-api) - - [Keyboard Shortcuts](#keyboard-shortcuts) - - [URL Changes](#url-changes) +- [Usage](#usage) +- [API](#api) + - [.setOptions()](#setoptions) +- [.setStories()](#setstories) +- [.onStory()](#onstory) +- [Hacking Guide](#hacking-guide) + - [The App](#the-app) + - [Changing UI](#changing-ui) + - [Mounting](#mounting) + - [App Context](#app-context) + - [Actions](#actions) + - [Core API](#core-api) + - [Keyboard Shortcuts](#keyboard-shortcuts) + - [URL Changes](#url-changes) ## Usage @@ -41,9 +41,7 @@ export default class MyProvider extends Provider { } renderPreview() { - return ( -

This is the Preview

- ); + return

This is the Preview

; } handleAPI(api) { @@ -63,8 +61,6 @@ const roolEl = document.getElementById('root'); renderStorybookUI(roolEl, new Provider()); ``` -> **See the [example](./example) app for a complete example.** - ## API ### .setOptions() @@ -79,7 +75,7 @@ class ReactProvider extends Provider { // https://github.com/storybookjs/storybook/tree/master/addons/options#getting-started }); } -}; +} ``` ## .setStories() @@ -94,13 +90,13 @@ class ReactProvider extends Provider { api.setStories([ { kind: 'Component 1', - stories: ['State 1', 'State 2'] + stories: ['State 1', 'State 2'], }, { kind: 'Component 2', - stories: ['State a', 'State b'] - } + stories: ['State a', 'State b'], + }, ]); } } @@ -116,7 +112,7 @@ import { Provider } from '@storybook/ui'; class ReactProvider extends Provider { handleAPI(api) { api.onStory((kind, story) => { - this.globalState.emit('change', kind, story); + this.globalState.emit('change', kind, story); }); } } @@ -178,6 +174,7 @@ TODO: state we use reach/router customized to query params ### Story Order Stories are sorted in the order in which they were imported. This can be overridden by adding storySort to the Parameters for the stories in `.storybook/config.js`: + ```js addParameters({ options: {