mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 13:01:07 +08:00
CHANGE addon-options readme, to make it clear this stuff will stop working soon && ADD a warning when importing the addon
This commit is contained in:
Norbert de Langen
parent
e2c8d9ec08
commit
3a32164514
@ -1,136 +1,28 @@
|
||||
#NOTE: Options Addon is deprecated as of Storybook 5.0
|
||||
# Options Addon is deprecated as of Storybook 5.0
|
||||
|
||||
Options are now configured using the [`options` parameter](../../docs/src/pages/configurations/options-parameter/index.md) which is built into Storybook.
|
||||
Global options can be specified with:
|
||||
|
||||
- Global options: `addParameters({ options: { ... }})` and no addon is needed.
|
||||
- Story options: `storiesOf(...).add('name', storyFn, { options: { ... }})`
|
||||
```js
|
||||
import '@storybook/addon-roundtrip/register';
|
||||
import '@storybook/addon-parameter/register';
|
||||
import '@storybook/addon-preview-wrapper/register';
|
||||
|
||||
import { addons } from '@storybook/addons';
|
||||
import { themes } from '@storybook/theming';
|
||||
|
||||
addons.setConfig({
|
||||
theme: themes.dark,
|
||||
showNav: true,
|
||||
showPanel: true,
|
||||
panelPosition: 'bottom',
|
||||
enableShortcuts: true,
|
||||
isToolshown: true,
|
||||
selectedPanel: 'storybook/roundtrip',
|
||||
});
|
||||
```
|
||||
|
||||
Story specific options can be configured with: [`options` parameter](https://storybook.js.org/docs/configurations/options-parameter/) which is built into Storybook.
|
||||
|
||||
---
|
||||
|
||||
See the [migration docs](../../MIGRATION.md#options-addon-deprecated) for what's changed.
|
||||
|
||||
# Storybook Options Addon
|
||||
|
||||
The Options addon can be used to (re-)configure the [Storybook](https://storybook.js.org) UI at runtime.
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, install the addon
|
||||
|
||||
```sh
|
||||
yarn add @storybook/addon-options --dev
|
||||
```
|
||||
|
||||
Add this line to your `addons.js` file (create this file inside your storybook config directory if needed).
|
||||
|
||||
```js
|
||||
import '@storybook/addon-options/register';
|
||||
```
|
||||
|
||||
### Set options globally
|
||||
|
||||
Import and use the `addParameters` + `options`-key in your `config.js` file.
|
||||
|
||||
```js
|
||||
import { addParameters, configure } from '@storybook/react';
|
||||
|
||||
// Option defaults:
|
||||
addParameters({
|
||||
options: {
|
||||
/**
|
||||
* name to display in the top left corner
|
||||
* @type {String}
|
||||
*/
|
||||
name: 'Storybook',
|
||||
/**
|
||||
* URL for name in top left corner to link to
|
||||
* @type {String}
|
||||
*/
|
||||
url: '#',
|
||||
/**
|
||||
* show story component as full screen
|
||||
* @type {Boolean}
|
||||
*/
|
||||
goFullScreen: false,
|
||||
/**
|
||||
* display panel that shows a list of stories
|
||||
* @type {Boolean}
|
||||
*/
|
||||
showStoriesPanel: true,
|
||||
/**
|
||||
* display panel that shows addon configurations
|
||||
* @type {Boolean}
|
||||
*/
|
||||
showAddonPanel: true,
|
||||
/**
|
||||
* display floating search box to search through stories
|
||||
* @type {Boolean}
|
||||
*/
|
||||
showSearchBox: false,
|
||||
/**
|
||||
* show addon panel as a vertical panel on the right
|
||||
* @type {Boolean}
|
||||
*/
|
||||
addonPanelInRight: false,
|
||||
/**
|
||||
* display the top-level grouping as a "root" in the sidebar
|
||||
* @type {Boolean}
|
||||
*/
|
||||
showRoots: null,
|
||||
/**
|
||||
* sidebar tree animations
|
||||
* @type {Boolean}
|
||||
*/
|
||||
sidebarAnimations: true,
|
||||
/**
|
||||
* id to select an addon panel
|
||||
* @type {String}
|
||||
*/
|
||||
selectedPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
|
||||
/**
|
||||
* enable/disable shortcuts
|
||||
* @type {Boolean}
|
||||
*/
|
||||
enableShortcuts: false, // true by default
|
||||
/**
|
||||
* show/hide tool bar
|
||||
* @type {Boolean}
|
||||
*/
|
||||
isToolshown: false, // true by default
|
||||
},
|
||||
});
|
||||
|
||||
configure(() => require('./stories'), module);
|
||||
```
|
||||
|
||||
### Using per-story options
|
||||
|
||||
The options-addon accepts story parameters on the `options` key:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import MyComponent from './my-component';
|
||||
|
||||
storiesOf('Addons|Custom options', module)
|
||||
// If you want to set the option for all stories in of this kind
|
||||
.addParameters({ options: { addonPanelInRight: true } })
|
||||
.add(
|
||||
'Story for MyComponent',
|
||||
() => <MyComponent />,
|
||||
// If you want to set the options for a specific story
|
||||
{ options: { addonPanelInRight: false } }
|
||||
);
|
||||
```
|
||||
|
||||
## TypeScript
|
||||
|
||||
To install type definitions: `yarn add @types/storybook__addon-options --dev`
|
||||
|
||||
Make sure you also have the type definitions installed for the following libs:
|
||||
|
||||
- Node
|
||||
- React
|
||||
|
||||
You can install them using `yarn add @types/node @types/react --dev`, assuming you are using TypeScript >2.0.
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
import addons from '@storybook/addons';
|
||||
import deprecate from 'util-deprecate';
|
||||
import EVENTS, { ADDON_ID } from './constants';
|
||||
|
||||
addons.register(ADDON_ID, api => {
|
||||
const channel = addons.getChannel();
|
||||
addons.register(
|
||||
ADDON_ID,
|
||||
deprecate(api => {
|
||||
const channel = addons.getChannel();
|
||||
|
||||
channel.on(EVENTS.SET, data => {
|
||||
api.setOptions(data.options);
|
||||
});
|
||||
});
|
||||
channel.on(EVENTS.SET, data => {
|
||||
api.setOptions(data.options);
|
||||
});
|
||||
}, 'storybook-addon-options is deprecated and will stop working soon')
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user