GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 21:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Triconfig - configure ui options overhaul (#8871)

Browse Source 
Triconfig - configure ui options overhaul
This commit is contained in:
Norbert de Langen 2019-11-27 12:28:26 +01:00 committed by GitHub
commit e520afa6a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 104 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
addons/options/README.md
View File

@ -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',
() => <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.

16
addons/options/src/register.ts
View File

@ -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')
);

129
docs/src/pages/configurations/options-parameter/index.md
View File

@ -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',
() => <MyComponent />,
export default {
title: 'Custom options',
component: MyComponent,
};
export const story1 = () => <MyComponent />;
story1.story = {
name: 'Story for MyComponent',
parameters: {
// If you want to set the options for a specific story
{ options: { panelPosition: 'right' } }
);
options: { panelPosition: 'right' },
},
};
```

2
examples/cra-kitchen-sink/.storybook/manager.js
View File

@ -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',

12
examples/dev-kits/config.js
View File

@ -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);

3
examples/dev-kits/main.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
stories: [`${__dirname}/stories/*.*`],
};

2
examples/dev-kits/addons.js → examples/dev-kits/manager.js
View File

@ -7,4 +7,6 @@ import { themes } from '@storybook/theming';
addons.setConfig({
theme: themes.dark,
panelPosition: 'bottom',
selectedPanel: 'storybook/roundtrip',
});

4
examples/rax-kitchen-sink/.storybook/manager.js
View File

@ -9,11 +9,7 @@ const theme = create({
});
addons.setConfig({
goFullScreen: false,
showAddonsPanel: true,
showSearchBox: false,
showRoots: true,
enableShortcuts: true,
panelPosition: 'bottom',
theme,
});

12
lib/api/src/modules/layout.ts
View File

@ -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,
};
},

12
lib/cli/generators/RAX/template-csf/.storybook/addons.js
View File

@ -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 });

16
lib/cli/generators/RAX/template-csf/.storybook/config.js
View File

@ -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);