Merge pull request #20 from ritz078/feat/options

API to set options added. also fixes #4

example/client/provider.js

@@ -28,6 +28,9 @@ export default class ReactProvider extends Provider {
   // You must implement this public API.
   handleAPI(api) {
     this.api = api;
+    this.api.setOptions({
+      name : 'REACT-STORYBOOK',
+    });
 
     // set stories
     this.api.setStories([

src/modules/api/actions/__tests__/api.js

@@ -84,4 +84,20 @@ describe('manager.api.actions.api', () => {
       });
     });
   });
+
+  describe('setOptions', () => {
+    it('should dispatch related redux action', () => {
+      const reduxStore = {
+        dispatch: sinon.stub(),
+      };
+      const options = {};
+
+      actions.setOptions({ reduxStore }, options);
+      const a = reduxStore.dispatch.args[0][0];
+      expect(a).to.deep.equal({
+        type: types.SET_OPTIONS,
+        options,
+      });
+    });
+  });
 });

src/modules/api/actions/api.js

@@ -35,4 +35,11 @@ export default {
       action,
     });
   },
+
+  setOptions({ reduxStore }, options) {
+    reduxStore.dispatch({
+      type: types.SET_OPTIONS,
+      options,
+    });
+  },
 };

src/modules/api/actions/index.js

@@ -5,6 +5,7 @@ export const types = {
   JUMP_TO_STORY: 'API_JUMP_TO_STORY',
   CLEAR_ACTIONS: 'API_CLEAR_ACTIONS',
   ADD_ACTION: 'API_ADD_ACTION',
+  SET_OPTIONS: 'API_SET_OPTIONS',
 };
 
 import api from './api';

src/modules/api/configs/init_api.js

@@ -7,6 +7,7 @@ export default function (provider, reduxStore, actions) {
     addAction: actions.api.addAction,
     setStories: actions.api.setStories,
     selectStory: actions.api.selectStory,
+    setOptions: actions.api.setOptions,
     handleShortcut: actions.shortcuts.handleEvent,
   };
 

src/modules/api/configs/reducers/__tests__/api.js

@@ -301,3 +301,27 @@ describe('manager.preview.config.reducers.preview', () => {
     });
   });
 });
+
+describe('SET OPTIONS', () => {
+  it('should set options merging with the default ones', () => {
+    const options = {
+      name: 'foo',
+      url: 'bar',
+    };
+
+    const action = {
+      type: types.SET_OPTIONS,
+      options: {
+        name: 'hello world',
+      },
+    };
+
+    const expected = {
+      name: 'hello world',
+      url: 'bar',
+    };
+
+    const newState = reducer({ options }, action);
+    expect(newState.options).to.eql(expected);
+  });
+});

src/modules/api/configs/reducers/api.js

@@ -49,6 +49,10 @@ export function jumpToStory(storyKinds, selectedKind, selectedStory, direction)
 
 const defaultState = {
   actions: [],
+  options: {
+    name: 'REACT STORYBOOK',
+    url: 'https://github.com/kadirahq/react-storybook',
+  },
 };
 
 export default function (state = defaultState, action) {
@@ -117,6 +121,18 @@ export default function (state = defaultState, action) {
       };
     }
 
+    case types.SET_OPTIONS: {
+      const newOptions = {
+        ...state.options,
+        ...action.options,
+      };
+
+      return {
+        ...state,
+        options: newOptions,
+      };
+    }
+
     default:
       return state;
   }

src/modules/ui/components/left_panel/header.js

@@ -47,17 +47,19 @@ const linkStyle = {
   textDecoration: 'none',
 };
 
-const Header = ({ openShortcutsHelp }) => (
+const Header = ({ openShortcutsHelp, name, url }) => (
   <div style={wrapperStyle}>
     <button style={shortcutIconStyle} onClick={openShortcutsHelp}>⌘</button>
-    <a style={linkStyle} href="https://github.com/kadirahq/react-storybook" target="_blank">
-      <h3 style={headingStyle}>React Storybook</h3>
+    <a style={linkStyle} href={url} target="_blank">
+      <h3 style={headingStyle}>{name}</h3>
     </a>
   </div>
 );
 
 Header.propTypes = {
   openShortcutsHelp: React.PropTypes.func,
+  name: React.PropTypes.string,
+  url: React.PropTypes.string,
 };
 
 export default Header;

src/modules/ui/components/left_panel/index.js

@@ -18,7 +18,11 @@ const storyProps = ['stories', 'selectedKind', 'selectedStory', 'onSelectStory']
 
 const LeftPanel = (props) => (
   <div style={mainStyle}>
-    <Header openShortcutsHelp={props.openShortcutsHelp} />
+    <Header
+      name={props.name}
+      url={props.url}
+      openShortcutsHelp={props.openShortcutsHelp}
+    />
     <TextFilter
       text={props.storyFilter}
       onClear={() => props.onStoryFilter('')}
@@ -40,6 +44,8 @@ LeftPanel.propTypes = {
   onStoryFilter: React.PropTypes.func,
 
   openShortcutsHelp: React.PropTypes.func,
+  name: React.PropTypes.string,
+  url: React.PropTypes.string,
 };
 
 export default LeftPanel;

src/modules/ui/containers/__tests__/left_panel.js

@@ -8,6 +8,10 @@ describe('manager.ui.containers.left_panel', () => {
       const stories = [{ kind: 'sk', stories: ['dd'] }];
       const selectedKind = 'sk';
       const selectedStory = 'dd';
+      const options = {
+        name: 'foo',
+        url: 'bar',
+      };
 
       const selectStory = () => 'selectStory';
       const toggleShortcutsHelp = () => 'toggleShortcutsHelp';
@@ -33,6 +37,7 @@ describe('manager.ui.containers.left_panel', () => {
           stories,
           selectedKind,
           selectedStory,
+          options,
         },
       };
 
@@ -55,6 +60,10 @@ describe('manager.ui.containers.left_panel', () => {
       ];
       const selectedKind = 'pk';
       const selectedStory = 'dd';
+      const options = {
+        name: 'foo',
+        url: 'bar',
+      };
 
       const selectStory = () => 'selectStory';
       const toggleShortcutsHelp = () => 'toggleShortcutsHelp';
@@ -80,6 +89,7 @@ describe('manager.ui.containers.left_panel', () => {
           stories,
           selectedKind,
           selectedStory,
+          options,
         },
       };
 

src/modules/ui/containers/left_panel.js

@@ -5,7 +5,7 @@ import reduxComposer from '../libs/redux_composer';
 
 export const composer = ({ api, ui }, { actions }) => {
   const actionMap = actions();
-  const { stories, selectedKind, selectedStory } = api;
+  const { stories, selectedKind, selectedStory, options } = api;
   const { storyFilter } = ui;
 
   const data = {
@@ -18,6 +18,8 @@ export const composer = ({ api, ui }, { actions }) => {
     onStoryFilter: actionMap.ui.setStoryFilter,
 
     openShortcutsHelp: actionMap.ui.toggleShortcutsHelp,
+    name: options.name,
+    url: options.url,
   };
 
   return data;