Merge pull request #2679 from storybooks/tmeasday/add-options-to-stor…

…y-store Add parameters to stories in the story store, and render them in app layers
storybookjs · Mar 20, 2018 · 9340dde · 9340dde
2 parents c8373ff + 5a81b74
commit 9340dde
Show file tree

Hide file tree

Showing 32 changed files with 349 additions and 86 deletions.
diff --git a/app/angular/index.d.ts b/app/angular/index.d.ts
@@ -11,7 +11,15 @@ export interface IStoribookSection {
   stories: IStorybookStory[];
 }
 
-export type IGetStory = () => {
+export interface IStoryContext {
+  kind: string;
+  name: string;
+  parameters: any;
+}
+
+export type IGetStory = (
+  IStoryContext
+) => {
   props?: ICollection;
   moduleMetadata?: Partial<NgModuleMetadata>;
   component?: any;
@@ -21,13 +29,15 @@ export type IGetStory = () => {
 export interface IApi {
   kind: string;
   addDecorator: (decorator: any) => IApi;
-  add: (storyName: string, getStory: IGetStory) => 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 addParameters(parameters: any): IApi;
   export function configure(loaders: () => NodeRequire, module: NodeModule): void;
   export function getStorybook(): IStoribookSection[];
 }
diff --git a/app/angular/src/client/index.js b/app/angular/src/client/index.js
@@ -1,3 +1,10 @@
-export { storiesOf, setAddon, addDecorator, configure, getStorybook } from './preview';
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+} from './preview';
 
 export { moduleMetadata } from './preview/angular/decorators';
diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts
@@ -8,8 +8,7 @@ import { NoPreviewComponent } from './components/no-preview.component';
 import { STORY } from './app.token';
 import {
   NgModuleMetadata,
-  IGetStoryWithContext,
-  IContext,
+  IGetStory,
   NgProvidedData,
   IRenderErrorFn,
   IRenderStoryFn,
@@ -78,11 +77,10 @@ const createComponentFromTemplate = (template: string, styles: string[]): Functi
 };
 
 const initModule = (
-  currentStory: IGetStoryWithContext,
-  context: IContext,
+  currentStory: IGetStory,
   reRender: boolean = false
 ): Function => {
-  const storyObj = currentStory(context);
+  const storyObj = currentStory();
   const { component, template, props, styles, moduleMetadata = {} } = storyObj;
 
   let AnnotatedComponent;
@@ -154,6 +152,6 @@ export const renderNoPreview = debounce(() => {
   draw(Module);
 });
 
-export const renderNgApp = debounce((story, context, reRender) => {
-  draw(initModule(story, context, reRender), reRender);
+export const renderNgApp = debounce((story, reRender) => {
+  draw(initModule(story, reRender), reRender);
 });
diff --git a/app/angular/src/client/preview/angular/types.ts b/app/angular/src/client/preview/angular/types.ts
@@ -26,15 +26,10 @@ export interface NgError {
 
 export type NgProvidedData = NgStory | NgError;
 
-export interface IContext {
-  [p: string]: any;
-}
-
-export type IGetStoryWithContext = (context: IContext) => NgStory;
+export type IGetStory = () => NgStory;
 
 export type IRenderStoryFn = (
-  story: IGetStoryWithContext,
-  context: IContext,
+  story: IGetStory,
   reRender?: boolean
 ) => void;
 export type IRenderErrorFn = (error: Error) => void;
diff --git a/app/angular/src/client/preview/index.js b/app/angular/src/client/preview/index.js
@@ -25,7 +25,14 @@ const storyStore = new StoryStore();
 const reduxStore = createStore(reducer);
 const context = { storyStore, reduxStore };
 const clientApi = new ClientApi(context);
-export const { storiesOf, setAddon, addDecorator, clearDecorators, getStorybook } = clientApi;
+export const {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+} = clientApi;
 
 let channel;
 if (isBrowser) {

diff --git a/app/angular/src/client/preview/render.js b/app/angular/src/client/preview/render.js
@@ -27,7 +27,7 @@ export function renderMain(data, storyStore, forceRender) {
 
   const { selectedKind, selectedStory } = data;
 
-  const story = storyStore.getStory(selectedKind, selectedStory);
+  const story = storyStore.getStoryWithContext(selectedKind, selectedStory);
   if (!story) {
     renderNoPreview();
     return null;
@@ -47,11 +47,7 @@ export function renderMain(data, storyStore, forceRender) {
     previousKind = selectedKind;
     previousStory = selectedStory;
   }
-  const context = {
-    kind: selectedKind,
-    story: selectedStory,
-  };
-  return renderNgApp(story, context, reRender);
+  return renderNgApp(story, reRender);
 }
 
 export default function renderPreview({ reduxStore, storyStore }, forceRender = false) {

diff --git a/app/polymer/src/client/index.js b/app/polymer/src/client/index.js
@@ -1 +1,8 @@
-export { storiesOf, setAddon, addDecorator, configure, getStorybook } from './preview';
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+} from './preview';
diff --git a/app/polymer/src/client/preview/index.js b/app/polymer/src/client/preview/index.js
@@ -27,7 +27,14 @@ const reduxStore = createStore(reducer);
 const context = { storyStore, reduxStore };
 
 const clientApi = new ClientApi(context);
-export const { storiesOf, setAddon, addDecorator, clearDecorators, getStorybook } = clientApi;
+export const {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+} = clientApi;
 
 let channel;
 if (isBrowser) {

diff --git a/app/polymer/src/client/preview/render.js b/app/polymer/src/client/preview/render.js
@@ -21,19 +21,15 @@ export function renderException(error) {
 export function renderMain(data, storyStore) {
   if (storyStore.size() === 0) return;
   const { selectedKind, selectedStory } = data;
-  const story = storyStore.getStory(selectedKind, selectedStory);
+  const story = storyStore.getStoryWithContext(selectedKind, selectedStory);
 
   if (selectedKind !== previousKind || previousStory !== selectedStory) {
     previousKind = selectedKind;
     previousStory = selectedStory;
   } else {
     return;
   }
-  const context = {
-    kind: selectedKind,
-    story: selectedStory,
-  };
-  const component = story ? story(context) : nopreview;
+  const component = story ? story() : nopreview;
 
   if (!component) {
     renderError({

diff --git a/app/react-native/src/index.js b/app/react-native/src/index.js
@@ -11,6 +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 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);

diff --git a/app/react-native/src/preview/components/StoryView/index.js b/app/react-native/src/preview/components/StoryView/index.js
@@ -44,10 +44,9 @@ export default class StoryView extends Component {
       return this.renderHelp();
     }
     const { kind, story } = this.state.selection;
-    const context = { kind, story };
     return (
       <View key={`${kind}:::${story}`} style={style.main}>
-        {this.state.storyFn(context)}
+        {this.state.storyFn()}
       </View>
     );
   }

diff --git a/app/react-native/src/preview/index.js b/app/react-native/src/preview/index.js
@@ -18,7 +18,14 @@ export default class Preview {
     this._stories = new StoryStore();
     this._clientApi = new ClientApi({ storyStore: this._stories });
 
-    ['storiesOf', 'setAddon', 'addDecorator', 'clearDecorators', 'getStorybook'].forEach(method => {
+    [
+      'storiesOf',
+      'setAddon',
+      'addDecorator',
+      'addParameters',
+      'clearDecorators',
+      'getStorybook',
+    ].forEach(method => {
       this[method] = this._clientApi[method].bind(this._clientApi);
     });
   }
@@ -87,7 +94,7 @@ export default class Preview {
 
   _selectStory(selection) {
     const { kind, story } = selection;
-    const storyFn = this._stories.getStory(kind, story);
+    const storyFn = this._stories.getStoryWithContext(kind, story);
     this._events.emit('story', storyFn, selection);
   }
 }
diff --git a/app/react/src/client/index.js b/app/react/src/client/index.js
@@ -8,6 +8,7 @@ export {
   storiesOf,
   setAddon,
   addDecorator,
+  addParameters,
   configure,
   getStorybook,
   forceReRender,

diff --git a/app/react/src/client/preview/index.js b/app/react/src/client/preview/index.js
@@ -27,7 +27,14 @@ const reduxStore = createStore(reducer);
 const context = { storyStore, reduxStore };
 
 const clientApi = new ClientApi(context);
-export const { storiesOf, setAddon, addDecorator, clearDecorators, getStorybook } = clientApi;
+export const {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+} = clientApi;
 
 let channel;
 if (isBrowser) {

diff --git a/app/react/src/client/preview/render.js b/app/react/src/client/preview/render.js
@@ -47,7 +47,7 @@ export function renderMain(data, storyStore, forceRender) {
   const { selectedKind, selectedStory } = data;
 
   const revision = storyStore.getRevision();
-  const story = storyStore.getStory(selectedKind, selectedStory);
+  const story = storyStore.getStoryWithContext(selectedKind, selectedStory);
   if (!story) {
     ReactDOM.render(noPreview, rootEl);
     return null;
@@ -77,12 +77,7 @@ export function renderMain(data, storyStore, forceRender) {
   previousStory = selectedStory;
   ReactDOM.unmountComponentAtNode(rootEl);
 
-  const context = {
-    kind: selectedKind,
-    story: selectedStory,
-  };
-
-  const element = story(context);
+  const element = story();
 
   if (!element) {
     const error = {

diff --git a/app/vue/src/client/index.js b/app/vue/src/client/index.js
@@ -1 +1,8 @@
-export { storiesOf, setAddon, addDecorator, configure, getStorybook } from './preview';
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+} from './preview';
diff --git a/app/vue/src/client/preview/index.js b/app/vue/src/client/preview/index.js
@@ -44,7 +44,14 @@ const decorateStory = (getStory, decorators) =>
   );
 const context = { storyStore, reduxStore, decorateStory };
 const clientApi = new ClientApi(context);
-export const { storiesOf, setAddon, addDecorator, clearDecorators, getStorybook } = clientApi;
+export const {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+} = clientApi;
 
 let channel;
 if (isBrowser) {

diff --git a/app/vue/src/client/preview/render.js b/app/vue/src/client/preview/render.js
@@ -19,7 +19,13 @@ function renderErrorDisplay(error) {
       return h(
         'div',
         { attrs: { id: 'error-display' } },
-        error ? [h(ErrorDisplay, { props: { message: error.message, stack: error.stack } })] : []
+        error
+          ? [
+              h(ErrorDisplay, {
+                props: { message: error.message, stack: error.stack },
+              }),
+            ]
+          : []
       );
     },
   });
@@ -54,7 +60,7 @@ export function renderMain(data, storyStore, forceRender) {
 
   const { selectedKind, selectedStory } = data;
 
-  const story = storyStore.getStory(selectedKind, selectedStory);
+  const story = storyStore.getStoryWithContext(selectedKind, selectedStory);
 
   // Unmount the previous story only if selectedKind or selectedStory has changed.
   // renderMain() gets executed after each action. Actions will cause the whole
@@ -71,12 +77,7 @@ export function renderMain(data, storyStore, forceRender) {
     return;
   }
 
-  const context = {
-    kind: selectedKind,
-    story: selectedStory,
-  };
-
-  const component = story ? story(context) : NoPreview;
+  const component = story ? story() : NoPreview;
 
   if (!component) {
     const error = {

diff --git a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot b/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"}
+    </button>
+
+
+  </storybook-button-component>
+</storybook-dynamic-app-root>
+`;