Add options to stories in the story store, and render them in app layers

storybookjs · Jan 9, 2018 · bcbc87a · bcbc87a
1 parent ba66d77
commit bcbc87a
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 53 deletions.
diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts
@@ -7,12 +7,12 @@ import { ErrorComponent } from './components/error.component';
 import { NoPreviewComponent } from './components/no-preview.component';
 import { STORY } from './app.token';
 import { getAnnotations, getParameters, getPropMetadata } from './utils';
-import { NgModuleMetadata, NgStory, IGetStoryWithContext, IContext, NgProvidedData } from './types';
+import { NgModuleMetadata, NgStory, IGetStoryWithContext, NgProvidedData } from './types';
 
 let platform: any = null;
 let promises: Promise<NgModuleRef<any>>[] = [];
 
-type IRenderStoryFn = (story: IGetStoryWithContext, context: IContext, reRender?: boolean) => void;
+type IRenderStoryFn = (story: IGetStoryWithContext, reRender?: boolean) => void;
 type IRenderErrorFn = (error: Error) => void;
 
 interface IModule extends Type<any> {
@@ -134,13 +134,9 @@ const getModule = (
   return NewModule;
 };
 
-const initModule = (
-  currentStory: IGetStoryWithContext,
-  context: IContext,
-  reRender: boolean
-): IModule => {
+const initModule = (currentStory: IGetStory, reRender: boolean): IModule => {
   const { component, componentMeta, props, propsMeta, params, moduleMeta } = getComponentMetadata(
-    currentStory(context)
+    currentStory()
   );
 
   if (!componentMeta) {
@@ -208,6 +204,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
@@ -23,8 +23,4 @@ export interface NgError {
 
 export type NgProvidedData = NgStory | NgError;
 
-export interface IContext {
-  [p: string]: any;
-}
-
-export type IGetStoryWithContext = (context: IContext) => NgStory;
+export type IGetStory = () => NgStory;
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/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
@@ -50,7 +50,7 @@ export default class Preview {
       const fileName = this._stories.getStoryFileName(kind);
 
       const stories = this._stories.getStories(kind).map(name => {
-        const render = this._stories.getStory(kind, name);
+        const render = this._stories.getStoryWithContext(kind, name);
         return { name, render };
       });
 
@@ -112,7 +112,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/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,8 @@ export function renderMain(data, storyStore, forceRender) {
   previousStory = selectedStory;
   ReactDOM.unmountComponentAtNode(rootEl);
 
-  const context = {
-    kind: selectedKind,
-    story: selectedStory,
-  };
-
-  const element = story(context);
+  console.log(story);
+  const element = story();
 
   if (!element) {
     const error = {

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/official-storybook/stories/core.stories.js b/examples/official-storybook/stories/core.stories.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+storiesOf('core/options', module).add(
+  'passed to story',
+  ({ options: { myOption } }) => (
+    <div>
+      Value of <code>myOption</code> is '<code>{myOption}</code>'
+    </div>
+  ),
+  { myOption: 'value' }
+);
diff --git a/lib/core/src/client/preview/client_api.js b/lib/core/src/client/preview/client_api.js
@@ -66,7 +66,7 @@ export default class ClientApi {
       };
     });
 
-    api.add = (storyName, getStory) => {
+    api.add = (storyName, getStory, options) => {
       if (typeof storyName !== 'string') {
         throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`);
       }
@@ -83,12 +83,10 @@ export default class ClientApi {
       const fileName = m ? m.filename : null;
 
       // Add the fully decorated getStory function.
-      this._storyStore.addStory(
-        kind,
-        storyName,
-        this._decorateStory(getStory, decorators),
-        fileName
-      );
+      this._storyStore.addStory(kind, storyName, this._decorateStory(getStory, decorators), {
+        ...options,
+        fileName,
+      });
       return api;
     };
 
@@ -105,7 +103,7 @@ export default class ClientApi {
       const fileName = this._storyStore.getStoryFileName(kind);
 
       const stories = this._storyStore.getStories(kind).map(name => {
-        const render = this._storyStore.getStory(kind, name);
+        const render = this._storyStore.getStoryWithContext(kind, name);
         return { name, render };
       });
 

diff --git a/lib/core/src/client/preview/story_store.js b/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, fileName) {
+  addStory(kind, name, fn, options) {
     if (!this._data[kind]) {
       this._data[kind] = {
         kind,
-        fileName,
+        fileName: options.fileName,
         index: getId(),
         stories: {},
       };
@@ -37,9 +37,10 @@ export default class StoryStore extends EventEmitter {
       name,
       index: getId(),
       fn,
+      options,
     };
 
-    this.emit('storyAdded', kind, name, fn);
+    this.emit('storyAdded', kind, name, fn, options);
   }
 
   getStoryKinds() {
@@ -70,7 +71,7 @@ export default class StoryStore extends EventEmitter {
     return storiesKind.fileName;
   }
 
-  getStory(kind, name) {
+  getStoryAndOptions(kind, name) {
     const storiesKind = this._data[kind];
     if (!storiesKind) {
       return null;
@@ -81,7 +82,31 @@ export default class StoryStore extends EventEmitter {
       return null;
     }
 
-    return storyInfo.fn;
+    const { fn, options } = storyInfo;
+    return {
+      story: fn,
+      options,
+    };
+  }
+
+  getStory(kind, name) {
+    const data = this.getStoryAndOptions(kind, name);
+    return data && data.story;
+  }
+
+  getStoryWithContext(kind, name) {
+    const data = this.getStoryAndOptions(kind, name);
+    if (!data) {
+      return null;
+    }
+
+    const { story, options } = data;
+    return () =>
+      story({
+        kind,
+        name,
+        options,
+      });
   }
 
   removeStoryKind(kind) {