Fix a few related codebeat issues

lib/ui/example/client/provider.js

@@ -82,7 +82,16 @@ export default class ReactProvider extends Provider {
     });
 
     // set stories
-    this.api.setStories([
+    this.api.setStories(this.createStories());
+
+    // listen to the story change and update the preview.
+    this.api.onStory((kind, story) => {
+      this.globalState.emit('change', kind, story);
+    });
+  }
+
+  createStories() {
+    return [
       {
         kind: 'some.name.Component 1',
         stories: ['State 1', 'State 2'],
@@ -115,12 +124,7 @@ export default class ReactProvider extends Provider {
         kind: 'Bla 2',
         stories: ['State 1', 'State 2'],
       }
-    ]);
-
-    // listen to the story change and update the preview.
-    this.api.onStory((kind, story) => {
-      this.globalState.emit('change', kind, story);
-    });
+    ]
   }
 
   _handlePreviewEvents() {

lib/ui/src/modules/ui/components/left_panel/stories.js

@@ -93,6 +93,14 @@ class Stories extends React.Component {
     return hierarchyRoot;
   }
 
+  renderMenuItem(item, style, onClick, displayName) {
+    return (
+      <a title={`Open ${item}`} style={style} onClick={onClick} role="menuitem" tabIndex="0">
+        {displayName}
+      </a>
+    );
+  }
+
   renderStory(story) {
     const { selectedStory } = this.props;
     const style = { display: 'block', ...storyStyle };
@@ -106,15 +114,7 @@ class Stories extends React.Component {
 
     return (
       <li key={story}>
-        <a
-          title={`Open ${story}`}
-          style={style}
-          onClick={props.onClick}
-          role="menuitem"
-          tabIndex="0"
-        >
-          {story}
-        </a>
+        {this.renderMenuItem(story, style, props.onClick, story)}
       </li>
     );
   }
@@ -129,9 +129,7 @@ class Stories extends React.Component {
       style.fontWeight = 'bold';
       return (
         <li key={kind}>
-          <a title={`Open ${kind}`} style={style} onClick={onClick} role="menuitem" tabIndex="0">
-            {displayName}
-          </a>
+          {this.renderMenuItem(kind, style, onClick, displayName)}
           <div>
             <ul style={listStyleType} role="menu">
               {stories.map(this.renderStory)}
@@ -143,9 +141,7 @@ class Stories extends React.Component {
 
     return (
       <li key={kind}>
-        <a title={`Open ${kind}`} style={style} onClick={onClick} role="menuitem" tabIndex="0">
-          {displayName}
-        </a>
+        {this.renderMenuItem(kind, style, onClick, displayName)}
       </li>
     );
   }
@@ -174,9 +170,7 @@ class Stories extends React.Component {
       children.push(
         <ul style={listStyleType} role="menu" key={`${value.current}_container`}>
           <li key={value.current}>
-            <a title={`Open ${key}`} style={style} onClick={onClick} role="menuitem" tabIndex="0">
-              {key}
-            </a>
+            {this.renderMenuItem(key, style, onClick, key)}
           </li>
           {isSelectedHierarchy &&
             <li key={`${value.current}_children`} style={nestedListStyle}>