Renamed options -> parameters

app/angular/index.d.ts

@@ -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;
+  addParameters: (parameters: any) => IApi;
-  add: (storyName: string, getStory: IGetStory, options?: 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[];
 }

app/angular/src/client/index.js

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

app/angular/src/client/preview/index.js

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

app/polymer/src/client/index.js

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

app/polymer/src/client/preview/index.js

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

app/react-native/src/index.js

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

app/react-native/src/preview/index.js

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

app/react/src/client/index.js

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

app/react/src/client/preview/index.js

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

app/vue/src/client/index.js

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

app/vue/src/client/preview/index.js

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

examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot

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

examples/angular-cli/src/stories/core.stories.ts

@@ -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 globalParameter = 'globalParameter';
-const chapterOption = 'chapterOption';
+const chapterParameter = 'chapterParameter';
-const storyOption = 'storyOption';
+const storyParameter = 'storyParameter';
 
-addOptions({ globalOption });
+addParameters({ globalParameter });
 
-storiesOf('Core|Options', module)
+storiesOf('Core|Parameters', module)
-  .addOptions({ chapterOption })
+  .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 }
   );

examples/crna-kitchen-sink/storybook/stories/index.js

@@ -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 globalParameter = 'globalParameter';
-const chapterOption = 'chapterOption';
+const chapterParameter = 'chapterParameter';
-const storyOption = 'storyOption';
+const storyParameter = 'storyParameter';
 
-addOptions({ globalOption });
+addParameters({ globalParameter });
 
-storiesOf('Core|Options', module)
+storiesOf('Core|Parameters', module)
-  .addOptions({ chapterOption })
+  .addParameters({ chapterParameter })
-  .add('passed to story', ({ options }) => <Text>Options are {JSON.stringify(options)}</Text>, {
+  .add(
-    storyOption,
+    'passed to story',
-  });
+    ({ parameters }) => <Text>Parameters are {JSON.stringify(parameters)}</Text>,
+    {
+      storyParameter,
+    }
+  );

examples/official-storybook/stories/__snapshots__/core.stories.storyshot

@@ -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 
+  Parameters are {"globalParameter":"globalParameter","chapterParameter":"chapterParameter","storyParameter":"storyParameter","fileName":"/Users/tom/OSS/storybook/examples/official-storybook/stories/core.stories.js"}
-  <code>
-    myOption
-  </code>
-   is '
-  <code>
-    value
-  </code>
-  '
 </div>
 `;

examples/official-storybook/stories/core.stories.js

@@ -1,14 +1,18 @@
 import React from 'react';
-import { storiesOf, addOptions } from '@storybook/react';
+import { storiesOf, addParameters } from '@storybook/react';
 
-const globalOption = 'globalOption';
+const globalParameter = 'globalParameter';
-const chapterOption = 'chapterOption';
+const chapterParameter = 'chapterParameter';
-const storyOption = 'storyOption';
+const storyParameter = 'storyParameter';
 
-addOptions({ globalOption });
+addParameters({ globalParameter });
 
-storiesOf('Core|Options', module)
+storiesOf('Core|Parameters', module)
-  .addOptions({ chapterOption })
+  .addParameters({ chapterParameter })
-  .add('passed to story', ({ options }) => <div>Options are {JSON.stringify(options)}</div>, {
+  .add(
-    storyOption,
+    'passed to story',
-  });
+    ({ parameters }) => <div>Parameters are {JSON.stringify(parameters)}</div>,
+    {
+      storyParameter,
+    }
+  );

examples/polymer-cli/src/stories/core.stories.js

@@ -1,13 +1,17 @@
-import { storiesOf, addOptions } from '@storybook/polymer';
+import { storiesOf, addParameters } from '@storybook/polymer';
 
-const globalOption = 'globalOption';
+const globalParameter = 'globalParameter';
-const chapterOption = 'chapterOption';
+const chapterParameter = 'chapterParameter';
-const storyOption = 'storyOption';
+const storyParameter = 'storyParameter';
 
-addOptions({ globalOption });
+addParameters({ globalParameter });
 
-storiesOf('Core|Options', module)
+storiesOf('Core|Parameters', module)
-  .addOptions({ chapterOption })
+  .addParameters({ chapterParameter })
-  .add('passed to story', ({ options }) => `<div>${JSON.stringify(options)}</div>`, {
+  .add(
-    storyOption,
+    'passed to story',
-  });
+    ({ parameters }) => `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
+    {
+      storyParameter,
+    }
+  );

examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot

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

examples/vue-kitchen-sink/src/stories/core.stories.js

@@ -1,19 +1,19 @@
-import { storiesOf, addOptions } from '@storybook/vue';
+import { storiesOf, addParameters } from '@storybook/vue';
 
-const globalOption = 'globalOption';
+const globalParameter = 'globalParameter';
-const chapterOption = 'chapterOption';
+const chapterParameter = 'chapterParameter';
-const storyOption = 'storyOption';
+const storyParameter = 'storyParameter';
 
-addOptions({ globalOption });
+addParameters({ globalParameter });
 
-storiesOf('Core|Options', module)
+storiesOf('Core|Parameters', module)
-  .addOptions({ chapterOption })
+  .addParameters({ chapterParameter })
   .add(
     'passed to story',
-    ({ options }) => ({
+    ({ parameters }) => ({
-      template: `<div>${JSON.stringify(options)}</div>`,
+      template: `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
     }),
     {
-      storyOption,
+      storyParameter,
     }
   );

lib/core/src/client/preview/client_api.js

@@ -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 => {
+  addParameters = parameters => {
-    this._globalOptions = options;
+    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,
+        ...this._globalParameters,
-        ...localOptions,
+        ...localParameters,
-        ...options,
+        ...parameters,
         fileName,
       });
       return api;
@@ -102,8 +102,8 @@ export default class ClientApi {
       return api;
     };
 
-    api.addOptions = options => {
+    api.addParameters = parameters => {
-      localOptions = { ...localOptions, ...options };
+      localParameters = { ...localParameters, ...parameters };
       return api;
     };
 

lib/core/src/client/preview/story_store.js

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

lib/core/src/client/preview/story_store.test.js

@@ -47,19 +47,19 @@ describe('preview.story_store', () => {
     });
   });
 
-  describe('getStoryAndOptions', () => {
+  describe('getStoryAndParameters', () => {
-    it('should return options that we passed in', () => {
+    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,
       });
     });
   });