Renamed options -> parameters

This commit is contained in:
Tom Coleman 2018-03-01 15:13:03 +11:00
parent 2842d8a94a
commit 6c68af02c5
22 changed files with 161 additions and 106 deletions

View File

@ -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[];
}

View File

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

View File

@ -29,7 +29,7 @@ export const {
storiesOf,
setAddon,
addDecorator,
addOptions,
addParameters,
clearDecorators,
getStorybook,
} = clientApi;

View File

@ -1 +1,8 @@
export { storiesOf, setAddon, addDecorator, addOptions, configure, getStorybook } from './preview';
export {
storiesOf,
setAddon,
addDecorator,
addParameters,
configure,
getStorybook,
} from './preview';

View File

@ -31,7 +31,7 @@ export const {
storiesOf,
setAddon,
addDecorator,
addOptions,
addParameters,
clearDecorators,
getStorybook,
} = clientApi;

View File

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

View File

@ -22,7 +22,7 @@ export default class Preview {
'storiesOf',
'setAddon',
'addDecorator',
'addOptions',
'addParameters',
'clearDecorators',
'getStorybook',
].forEach(method => {

View File

@ -8,7 +8,7 @@ export {
storiesOf,
setAddon,
addDecorator,
addOptions,
addParameters,
configure,
getStorybook,
forceReRender,

View File

@ -31,7 +31,7 @@ export const {
storiesOf,
setAddon,
addDecorator,
addOptions,
addParameters,
clearDecorators,
getStorybook,
} = clientApi;

View File

@ -1 +1,8 @@
export { storiesOf, setAddon, addDecorator, addOptions, configure, getStorybook } from './preview';
export {
storiesOf,
setAddon,
addDecorator,
addParameters,
configure,
getStorybook,
} from './preview';

View File

@ -48,7 +48,7 @@ export const {
storiesOf,
setAddon,
addDecorator,
addOptions,
addParameters,
clearDecorators,
getStorybook,
} = clientApi;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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