mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-02 05:03:44 +08:00
Renamed options
-> parameters
This commit is contained in:
parent
2842d8a94a
commit
6c68af02c5
8
app/angular/index.d.ts
vendored
8
app/angular/index.d.ts
vendored
@ -14,7 +14,7 @@ export interface IStoribookSection {
|
||||
export interface IStoryContext {
|
||||
kind: string;
|
||||
name: string;
|
||||
options: any;
|
||||
parameters: any;
|
||||
}
|
||||
|
||||
export type IGetStory = (
|
||||
@ -29,15 +29,15 @@ export type IGetStory = (
|
||||
export interface IApi {
|
||||
kind: string;
|
||||
addDecorator: (decorator: any) => IApi;
|
||||
addOptions: (options: any) => IApi;
|
||||
add: (storyName: string, getStory: IGetStory, options?: any) => IApi;
|
||||
addParameters: (parameters: any) => IApi;
|
||||
add: (storyName: string, getStory: IGetStory, parameters?: any) => IApi;
|
||||
}
|
||||
|
||||
declare module '@storybook/angular' {
|
||||
export function storiesOf(kind: string, module: NodeModule): IApi;
|
||||
export function setAddon(addon: any): void;
|
||||
export function addDecorator(decorator: any): IApi;
|
||||
export function addOptions(options: any): IApi;
|
||||
export function addParameters(parameters: any): IApi;
|
||||
export function configure(loaders: () => NodeRequire, module: NodeModule): void;
|
||||
export function getStorybook(): IStoribookSection[];
|
||||
}
|
||||
|
9
app/angular/src/client/index.js
vendored
9
app/angular/src/client/index.js
vendored
@ -1,3 +1,10 @@
|
||||
export { storiesOf, setAddon, addDecorator, addOptions, configure, getStorybook } from './preview';
|
||||
export {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
configure,
|
||||
getStorybook,
|
||||
} from './preview';
|
||||
|
||||
export { moduleMetadata } from './preview/angular/decorators';
|
||||
|
2
app/angular/src/client/preview/index.js
vendored
2
app/angular/src/client/preview/index.js
vendored
@ -29,7 +29,7 @@ export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addOptions,
|
||||
addParameters,
|
||||
clearDecorators,
|
||||
getStorybook,
|
||||
} = clientApi;
|
||||
|
@ -1 +1,8 @@
|
||||
export { storiesOf, setAddon, addDecorator, addOptions, configure, getStorybook } from './preview';
|
||||
export {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
configure,
|
||||
getStorybook,
|
||||
} from './preview';
|
||||
|
@ -31,7 +31,7 @@ export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addOptions,
|
||||
addParameters,
|
||||
clearDecorators,
|
||||
getStorybook,
|
||||
} = clientApi;
|
||||
|
2
app/react-native/src/index.js
vendored
2
app/react-native/src/index.js
vendored
@ -11,7 +11,7 @@ const preview = new Preview();
|
||||
export const storiesOf = preview.storiesOf.bind(preview);
|
||||
export const setAddon = preview.setAddon.bind(preview);
|
||||
export const addDecorator = preview.addDecorator.bind(preview);
|
||||
export const addOptions = preview.addOptions.bind(preview);
|
||||
export const addParameters = preview.addParameters.bind(preview);
|
||||
export const clearDecorators = preview.clearDecorators.bind(preview);
|
||||
export const configure = preview.configure.bind(preview);
|
||||
export const getStorybook = preview.getStorybook.bind(preview);
|
||||
|
2
app/react-native/src/preview/index.js
vendored
2
app/react-native/src/preview/index.js
vendored
@ -22,7 +22,7 @@ export default class Preview {
|
||||
'storiesOf',
|
||||
'setAddon',
|
||||
'addDecorator',
|
||||
'addOptions',
|
||||
'addParameters',
|
||||
'clearDecorators',
|
||||
'getStorybook',
|
||||
].forEach(method => {
|
||||
|
@ -8,7 +8,7 @@ export {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addOptions,
|
||||
addParameters,
|
||||
configure,
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
|
@ -31,7 +31,7 @@ export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addOptions,
|
||||
addParameters,
|
||||
clearDecorators,
|
||||
getStorybook,
|
||||
} = clientApi;
|
||||
|
@ -1 +1,8 @@
|
||||
export { storiesOf, setAddon, addDecorator, addOptions, configure, getStorybook } from './preview';
|
||||
export {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
configure,
|
||||
getStorybook,
|
||||
} from './preview';
|
||||
|
@ -48,7 +48,7 @@ export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addOptions,
|
||||
addParameters,
|
||||
clearDecorators,
|
||||
getStorybook,
|
||||
} = clientApi;
|
||||
|
@ -0,0 +1,23 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core|Parameters passed to story 1`] = `
|
||||
<storybook-dynamic-app-root
|
||||
cfr={[Function CodegenComponentFactoryResolver]}
|
||||
data={[Function Object]}
|
||||
target={[Function ViewContainerRef_]}
|
||||
>
|
||||
<storybook-button-component
|
||||
_nghost-c8=""
|
||||
>
|
||||
|
||||
|
||||
<button
|
||||
_ngcontent-c8=""
|
||||
>
|
||||
Parameters are {"globalParameter":"globalParameter","chapterParameter":"chapterParameter","storyParameter":"storyParameter","fileName":"/Users/tom/OSS/storybook/examples/angular-cli/src/stories/core.stories.ts"}
|
||||
</button>
|
||||
|
||||
|
||||
</storybook-button-component>
|
||||
</storybook-dynamic-app-root>
|
||||
`;
|
@ -1,22 +1,22 @@
|
||||
import { storiesOf, addOptions } from '@storybook/angular';
|
||||
import { storiesOf, addParameters } from '@storybook/angular';
|
||||
import { Button } from '@storybook/angular/demo';
|
||||
|
||||
const globalOption = 'globalOption';
|
||||
const chapterOption = 'chapterOption';
|
||||
const storyOption = 'storyOption';
|
||||
const globalParameter = 'globalParameter';
|
||||
const chapterParameter = 'chapterParameter';
|
||||
const storyParameter = 'storyParameter';
|
||||
|
||||
addOptions({ globalOption });
|
||||
addParameters({ globalParameter });
|
||||
|
||||
storiesOf('Core|Options', module)
|
||||
.addOptions({ chapterOption })
|
||||
storiesOf('Core|Parameters', module)
|
||||
.addParameters({ chapterParameter })
|
||||
.add(
|
||||
'passed to story',
|
||||
({ options }) => ({
|
||||
({ parameters }) => ({
|
||||
component: Button,
|
||||
props: {
|
||||
text: JSON.stringify(options),
|
||||
text: `Parameters are ${JSON.stringify(parameters)}`,
|
||||
onClick: () => 0,
|
||||
},
|
||||
}),
|
||||
{ storyOption }
|
||||
{ storyParameter }
|
||||
);
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Text } from 'react-native';
|
||||
|
||||
import { storiesOf, addOptions } from '@storybook/react-native';
|
||||
import { storiesOf, addParameters } from '@storybook/react-native';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { linkTo } from '@storybook/addon-links';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
@ -30,14 +30,18 @@ storiesOf('Knobs', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('with knobs', knobsWrapper);
|
||||
|
||||
const globalOption = 'globalOption';
|
||||
const chapterOption = 'chapterOption';
|
||||
const storyOption = 'storyOption';
|
||||
const globalParameter = 'globalParameter';
|
||||
const chapterParameter = 'chapterParameter';
|
||||
const storyParameter = 'storyParameter';
|
||||
|
||||
addOptions({ globalOption });
|
||||
addParameters({ globalParameter });
|
||||
|
||||
storiesOf('Core|Options', module)
|
||||
.addOptions({ chapterOption })
|
||||
.add('passed to story', ({ options }) => <Text>Options are {JSON.stringify(options)}</Text>, {
|
||||
storyOption,
|
||||
});
|
||||
storiesOf('Core|Parameters', module)
|
||||
.addParameters({ chapterParameter })
|
||||
.add(
|
||||
'passed to story',
|
||||
({ parameters }) => <Text>Parameters are {JSON.stringify(parameters)}</Text>,
|
||||
{
|
||||
storyParameter,
|
||||
}
|
||||
);
|
||||
|
@ -1,15 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots core/options passed to story 1`] = `
|
||||
exports[`Storyshots Core|Parameters passed to story 1`] = `
|
||||
<div>
|
||||
Value of
|
||||
<code>
|
||||
myOption
|
||||
</code>
|
||||
is '
|
||||
<code>
|
||||
value
|
||||
</code>
|
||||
'
|
||||
Parameters are {"globalParameter":"globalParameter","chapterParameter":"chapterParameter","storyParameter":"storyParameter","fileName":"/Users/tom/OSS/storybook/examples/official-storybook/stories/core.stories.js"}
|
||||
</div>
|
||||
`;
|
||||
|
@ -1,14 +1,18 @@
|
||||
import React from 'react';
|
||||
import { storiesOf, addOptions } from '@storybook/react';
|
||||
import { storiesOf, addParameters } from '@storybook/react';
|
||||
|
||||
const globalOption = 'globalOption';
|
||||
const chapterOption = 'chapterOption';
|
||||
const storyOption = 'storyOption';
|
||||
const globalParameter = 'globalParameter';
|
||||
const chapterParameter = 'chapterParameter';
|
||||
const storyParameter = 'storyParameter';
|
||||
|
||||
addOptions({ globalOption });
|
||||
addParameters({ globalParameter });
|
||||
|
||||
storiesOf('Core|Options', module)
|
||||
.addOptions({ chapterOption })
|
||||
.add('passed to story', ({ options }) => <div>Options are {JSON.stringify(options)}</div>, {
|
||||
storyOption,
|
||||
});
|
||||
storiesOf('Core|Parameters', module)
|
||||
.addParameters({ chapterParameter })
|
||||
.add(
|
||||
'passed to story',
|
||||
({ parameters }) => <div>Parameters are {JSON.stringify(parameters)}</div>,
|
||||
{
|
||||
storyParameter,
|
||||
}
|
||||
);
|
||||
|
@ -1,13 +1,17 @@
|
||||
import { storiesOf, addOptions } from '@storybook/polymer';
|
||||
import { storiesOf, addParameters } from '@storybook/polymer';
|
||||
|
||||
const globalOption = 'globalOption';
|
||||
const chapterOption = 'chapterOption';
|
||||
const storyOption = 'storyOption';
|
||||
const globalParameter = 'globalParameter';
|
||||
const chapterParameter = 'chapterParameter';
|
||||
const storyParameter = 'storyParameter';
|
||||
|
||||
addOptions({ globalOption });
|
||||
addParameters({ globalParameter });
|
||||
|
||||
storiesOf('Core|Options', module)
|
||||
.addOptions({ chapterOption })
|
||||
.add('passed to story', ({ options }) => `<div>${JSON.stringify(options)}</div>`, {
|
||||
storyOption,
|
||||
});
|
||||
storiesOf('Core|Parameters', module)
|
||||
.addParameters({ chapterParameter })
|
||||
.add(
|
||||
'passed to story',
|
||||
({ parameters }) => `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
|
||||
{
|
||||
storyParameter,
|
||||
}
|
||||
);
|
||||
|
@ -0,0 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core|Parameters passed to story 1`] = `
|
||||
<div>
|
||||
Parameters are {"globalParameter":"globalParameter","chapterParameter":"chapterParameter","storyParameter":"storyParameter","fileName":"/Users/tom/OSS/storybook/examples/vue-kitchen-sink/src/stories/core.stories.js"}
|
||||
</div>
|
||||
`;
|
@ -1,19 +1,19 @@
|
||||
import { storiesOf, addOptions } from '@storybook/vue';
|
||||
import { storiesOf, addParameters } from '@storybook/vue';
|
||||
|
||||
const globalOption = 'globalOption';
|
||||
const chapterOption = 'chapterOption';
|
||||
const storyOption = 'storyOption';
|
||||
const globalParameter = 'globalParameter';
|
||||
const chapterParameter = 'chapterParameter';
|
||||
const storyParameter = 'storyParameter';
|
||||
|
||||
addOptions({ globalOption });
|
||||
addParameters({ globalParameter });
|
||||
|
||||
storiesOf('Core|Options', module)
|
||||
.addOptions({ chapterOption })
|
||||
storiesOf('Core|Parameters', module)
|
||||
.addParameters({ chapterParameter })
|
||||
.add(
|
||||
'passed to story',
|
||||
({ options }) => ({
|
||||
template: `<div>${JSON.stringify(options)}</div>`,
|
||||
({ parameters }) => ({
|
||||
template: `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
|
||||
}),
|
||||
{
|
||||
storyOption,
|
||||
storyParameter,
|
||||
}
|
||||
);
|
||||
|
@ -15,7 +15,7 @@ export default class ClientApi {
|
||||
this._storyStore = storyStore;
|
||||
this._addons = {};
|
||||
this._globalDecorators = [];
|
||||
this._globalOptions = {};
|
||||
this._globalParameters = {};
|
||||
this._decorateStory = decorateStory;
|
||||
}
|
||||
|
||||
@ -30,8 +30,8 @@ export default class ClientApi {
|
||||
this._globalDecorators.push(decorator);
|
||||
};
|
||||
|
||||
addOptions = options => {
|
||||
this._globalOptions = options;
|
||||
addParameters = parameters => {
|
||||
this._globalParameters = parameters;
|
||||
};
|
||||
|
||||
clearDecorators = () => {
|
||||
@ -57,7 +57,7 @@ export default class ClientApi {
|
||||
}
|
||||
|
||||
const localDecorators = [];
|
||||
let localOptions = {};
|
||||
let localParameters = {};
|
||||
const api = {
|
||||
kind,
|
||||
};
|
||||
@ -71,7 +71,7 @@ export default class ClientApi {
|
||||
};
|
||||
});
|
||||
|
||||
api.add = (storyName, getStory, options) => {
|
||||
api.add = (storyName, getStory, parameters) => {
|
||||
if (typeof storyName !== 'string') {
|
||||
throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`);
|
||||
}
|
||||
@ -89,9 +89,9 @@ export default class ClientApi {
|
||||
|
||||
// Add the fully decorated getStory function.
|
||||
this._storyStore.addStory(kind, storyName, this._decorateStory(getStory, decorators), {
|
||||
...this._globalOptions,
|
||||
...localOptions,
|
||||
...options,
|
||||
...this._globalParameters,
|
||||
...localParameters,
|
||||
...parameters,
|
||||
fileName,
|
||||
});
|
||||
return api;
|
||||
@ -102,8 +102,8 @@ export default class ClientApi {
|
||||
return api;
|
||||
};
|
||||
|
||||
api.addOptions = options => {
|
||||
localOptions = { ...localOptions, ...options };
|
||||
api.addParameters = parameters => {
|
||||
localParameters = { ...localParameters, ...parameters };
|
||||
return api;
|
||||
};
|
||||
|
||||
|
@ -23,11 +23,11 @@ export default class StoryStore extends EventEmitter {
|
||||
this._revision += 1;
|
||||
}
|
||||
|
||||
addStory(kind, name, fn, options = {}) {
|
||||
addStory(kind, name, fn, parameters = {}) {
|
||||
if (!this._data[kind]) {
|
||||
this._data[kind] = {
|
||||
kind,
|
||||
fileName: options.fileName,
|
||||
fileName: parameters.fileName,
|
||||
index: getId(),
|
||||
stories: {},
|
||||
};
|
||||
@ -37,10 +37,10 @@ export default class StoryStore extends EventEmitter {
|
||||
name,
|
||||
index: getId(),
|
||||
fn,
|
||||
options,
|
||||
parameters,
|
||||
};
|
||||
|
||||
this.emit('storyAdded', kind, name, fn, options);
|
||||
this.emit('storyAdded', kind, name, fn, parameters);
|
||||
}
|
||||
|
||||
getStoryKinds() {
|
||||
@ -71,7 +71,7 @@ export default class StoryStore extends EventEmitter {
|
||||
return storiesKind.fileName;
|
||||
}
|
||||
|
||||
getStoryAndOptions(kind, name) {
|
||||
getStoryAndParameters(kind, name) {
|
||||
const storiesKind = this._data[kind];
|
||||
if (!storiesKind) {
|
||||
return null;
|
||||
@ -82,30 +82,30 @@ export default class StoryStore extends EventEmitter {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { fn, options } = storyInfo;
|
||||
const { fn, parameters } = storyInfo;
|
||||
return {
|
||||
story: fn,
|
||||
options,
|
||||
parameters,
|
||||
};
|
||||
}
|
||||
|
||||
getStory(kind, name) {
|
||||
const data = this.getStoryAndOptions(kind, name);
|
||||
const data = this.getStoryAndParameters(kind, name);
|
||||
return data && data.story;
|
||||
}
|
||||
|
||||
getStoryWithContext(kind, name) {
|
||||
const data = this.getStoryAndOptions(kind, name);
|
||||
const data = this.getStoryAndParameters(kind, name);
|
||||
if (!data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { story, options } = data;
|
||||
const { story, parameters } = data;
|
||||
return () =>
|
||||
story({
|
||||
kind,
|
||||
story: name,
|
||||
options,
|
||||
parameters,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -47,19 +47,19 @@ describe('preview.story_store', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('getStoryAndOptions', () => {
|
||||
it('should return options that we passed in', () => {
|
||||
describe('getStoryAndParameters', () => {
|
||||
it('should return parameters that we passed in', () => {
|
||||
const store = new StoryStore();
|
||||
const story = jest.fn();
|
||||
const options = {
|
||||
const parameters = {
|
||||
fileName: 'foo.js',
|
||||
option: 'value',
|
||||
parameter: 'value',
|
||||
};
|
||||
store.addStory('kind', 'name', story, options);
|
||||
store.addStory('kind', 'name', story, parameters);
|
||||
|
||||
expect(store.getStoryAndOptions('kind', 'name')).toEqual({
|
||||
expect(store.getStoryAndParameters('kind', 'name')).toEqual({
|
||||
story,
|
||||
options,
|
||||
parameters,
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -68,18 +68,18 @@ describe('preview.story_store', () => {
|
||||
it('should return a function that calls the story with the context', () => {
|
||||
const store = new StoryStore();
|
||||
const story = jest.fn();
|
||||
const options = {
|
||||
const parameters = {
|
||||
fileName: 'foo.js',
|
||||
option: 'value',
|
||||
parameter: 'value',
|
||||
};
|
||||
store.addStory('kind', 'name', story, options);
|
||||
store.addStory('kind', 'name', story, parameters);
|
||||
|
||||
const storyWithContext = store.getStoryWithContext('kind', 'name');
|
||||
storyWithContext();
|
||||
expect(story).toHaveBeenCalledWith({
|
||||
kind: 'kind',
|
||||
story: 'name',
|
||||
options,
|
||||
parameters,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user