diff --git a/addons/options/README.md b/addons/options/README.md index 628ad9ee9c5..854cc8b45c5 100644 --- a/addons/options/README.md +++ b/addons/options/README.md @@ -1,136 +1,3 @@ -#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: `addParameters({ options: { ... }})` and no addon is needed. -- Story options: `storiesOf(...).add('name', storyFn, { options: { ... }})` - -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) - -![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/HEAD/addons/options/docs/screenshot.png) - -## 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', - () => , - // 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. +Please read https://storybook.js.org/docs/configurations/options-parameter/ to learn about storybook's options and setting them. diff --git a/addons/options/src/register.ts b/addons/options/src/register.ts index d9d09ac29e4..8cec35efa85 100644 --- a/addons/options/src/register.ts +++ b/addons/options/src/register.ts @@ -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') +); diff --git a/docs/src/pages/configurations/options-parameter/index.md b/docs/src/pages/configurations/options-parameter/index.md index 2905291e894..31c5c39562d 100644 --- a/docs/src/pages/configurations/options-parameter/index.md +++ b/docs/src/pages/configurations/options-parameter/index.md @@ -12,64 +12,58 @@ Storybook UI is configurable using an options API that allows you to tweak its a Import and use `addParameters` with the `options` key in your `config.js` file. ```js -import { addParameters, configure } from '@storybook/react'; +import { addons } from '@storybook/addons'; -// Option defaults: -addParameters({ - options: { - /** - * show story component as full screen - * @type {Boolean} - */ - isFullscreen: false, - /** - * display panel that shows a list of stories - * @type {Boolean} - */ - showNav: true, - /** - * display panel that shows addon configurations - * @type {Boolean} - */ - showPanel: true, - /** - * where to show the addon panel - * @type {('bottom'|'right')} - */ - panelPosition: 'bottom', - /** - * display the top-level grouping as a "root" in the sidebar - * @type {Boolean} - */ - showRoots: null, - /** - * sidebar tree animations - * @type {Boolean} - */ - sidebarAnimations: true, - /** - * enable/disable shortcuts - * @type {Boolean} - */ - enableShortcuts: true, - /** - * show/hide tool bar - * @type {Boolean} - */ - isToolshown: true, - /** - * theme storybook, see link below - */ - theme: undefined, - /** - * function to sort stories in the tree view - * common use is alphabetical `(a, b) => a[1].id.localeCompare(b[1].id)` - * if left undefined, then the order in which the stories are imported will - * be the order they display - * @type {Function} - */ - storySort: undefined, - }, +addons.setConfig({ + /** + * display panel that shows a list of stories + * @type {Boolean} + */ + showNav: true, + /** + * display panel that shows addon configurations + * @type {Boolean} + */ + showPanel: true, + /** + * where to show the addon panel + * @type {('bottom'|'right')} + */ + panelPosition: 'bottom', + /** + * display the top-level grouping as a "root" in the sidebar + * @type {Boolean} + */ + showRoots: false, + /** + * sidebar tree animations + * @type {Boolean} + */ + sidebarAnimations: true, + /** + * enable/disable shortcuts + * @type {Boolean} + */ + enableShortcuts: true, + /** + * show/hide tool bar + * @type {Boolean} + */ + isToolshown: true, + /** + * theme storybook, see link below + */ + theme: undefined, + /** + * show story component as full screen + * @type {Boolean} + */ + goFullScreen: false, + /** + * 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 }); ``` @@ -80,16 +74,19 @@ For more information on configuring the `theme`, see [theming](../theming/). 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: { panelPosition: 'bottom' } }) - .add( - 'Story for MyComponent', - () => , +export default { + title: 'Custom options', + component: MyComponent, +}; + +export const story1 = () => ; +story1.story = { + name: 'Story for MyComponent', + parameters: { // If you want to set the options for a specific story - { options: { panelPosition: 'right' } } - ); + options: { panelPosition: 'right' }, + }, +}; ``` diff --git a/examples/cra-kitchen-sink/.storybook/manager.js b/examples/cra-kitchen-sink/.storybook/manager.js index e3d4725d747..8b2c926cf5f 100644 --- a/examples/cra-kitchen-sink/.storybook/manager.js +++ b/examples/cra-kitchen-sink/.storybook/manager.js @@ -4,9 +4,7 @@ import { addons } from '@storybook/addons'; addons.setConfig({ isFullscreen: false, showAddonsPanel: true, - showSearchBox: false, panelPosition: 'right', - enableShortcuts: true, theme: create({ base: 'light', brandTitle: 'CRA Kitchen Sink', diff --git a/examples/dev-kits/config.js b/examples/dev-kits/config.js deleted file mode 100644 index 51d216a42df..00000000000 --- a/examples/dev-kits/config.js +++ /dev/null @@ -1,12 +0,0 @@ -import { configure } from '@storybook/react'; - -// The simplest version of examples would export this function for users to use -function importAll(context) { - context.keys().forEach(filename => context(filename)); -} - -function loadStories() { - importAll(require.context('./stories', true, /\.js$/)); -} - -configure(loadStories, module); diff --git a/examples/dev-kits/main.js b/examples/dev-kits/main.js new file mode 100644 index 00000000000..cf58e227c54 --- /dev/null +++ b/examples/dev-kits/main.js @@ -0,0 +1,3 @@ +module.exports = { + stories: [`${__dirname}/stories/*.*`], +}; diff --git a/examples/dev-kits/addons.js b/examples/dev-kits/manager.js similarity index 80% rename from examples/dev-kits/addons.js rename to examples/dev-kits/manager.js index 25fb6ff0e5d..203b71164ba 100644 --- a/examples/dev-kits/addons.js +++ b/examples/dev-kits/manager.js @@ -7,4 +7,6 @@ import { themes } from '@storybook/theming'; addons.setConfig({ theme: themes.dark, + panelPosition: 'bottom', + selectedPanel: 'storybook/roundtrip', }); diff --git a/examples/rax-kitchen-sink/.storybook/manager.js b/examples/rax-kitchen-sink/.storybook/manager.js index 29673158057..8a2fe5c08f2 100644 --- a/examples/rax-kitchen-sink/.storybook/manager.js +++ b/examples/rax-kitchen-sink/.storybook/manager.js @@ -9,11 +9,7 @@ const theme = create({ }); addons.setConfig({ - goFullScreen: false, - showAddonsPanel: true, - showSearchBox: false, showRoots: true, - enableShortcuts: true, panelPosition: 'bottom', theme, }); diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts index c5ffa29e847..1805cd99712 100644 --- a/lib/api/src/modules/layout.ts +++ b/lib/api/src/modules/layout.ts @@ -271,10 +271,20 @@ export default function({ store, provider }: { store: Store; provider: Provider }, getInitialOptions() { - const { theme } = provider.getConfig(); + const { theme, selectedPanel, ...options } = provider.getConfig(); return { ...initial, + layout: { + ...initial.layout, + ...pick(options, Object.keys(initial.layout)), + ...checkDeprecatedLayoutOptions(options), + }, + ui: { + ...initial.ui, + ...pick(options, Object.keys(initial.ui)), + }, + selectedPanel: selectedPanel || initial.selectedPanel, theme: theme || initial.theme, }; }, diff --git a/lib/cli/generators/RAX/template-csf/.storybook/addons.js b/lib/cli/generators/RAX/template-csf/.storybook/addons.js index 6aed412d04a..3cf5981c4be 100644 --- a/lib/cli/generators/RAX/template-csf/.storybook/addons.js +++ b/lib/cli/generators/RAX/template-csf/.storybook/addons.js @@ -1,2 +1,14 @@ import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; + +import { create } from '@storybook/theming/create'; +import { addons } from '@storybook/addons'; + +const theme = create({ + base: 'light', + + brandTitle: 'Rax Kitchen Sink', + brandUrl: 'https://github.com/storybookjs/storybook/tree/master/examples/rax-kitchen-sink', +}); + +addons.setConfig({ theme }); diff --git a/lib/cli/generators/RAX/template-csf/.storybook/config.js b/lib/cli/generators/RAX/template-csf/.storybook/config.js index d964ae12046..ed9cb9dfebc 100644 --- a/lib/cli/generators/RAX/template-csf/.storybook/config.js +++ b/lib/cli/generators/RAX/template-csf/.storybook/config.js @@ -1,18 +1,4 @@ -import { configure, addParameters } from '@storybook/rax'; - -addParameters({ - options: { - name: 'Rax Kitchen Sink', - url: 'https://github.com/storybookjs/storybook/tree/master/examples/rax-kitchen-sink', - goFullScreen: false, - showAddonsPanel: true, - showSearchBox: false, - addonPanelInRight: true, - hierarchySeparator: /\./, - hierarchyRootSeparator: /\|/, - enableShortcuts: true, - }, -}); +import { configure } from '@storybook/rax'; // automatically import all story js files that end with *.stories.js configure(require.context('../stories', true, /\.stories\.js$/), module);