Add a search bar to filter components

dist/client/ui/controls.js

@@ -28,29 +28,55 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _filter_stories = require('./filter_stories');
+
+var _filter_stories2 = _interopRequireDefault(_filter_stories);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var StorybookControls = function (_React$Component) {
   (0, _inherits3.default)(StorybookControls, _React$Component);
 
-  function StorybookControls() {
+  function StorybookControls(props) {
     (0, _classCallCheck3.default)(this, StorybookControls);
-    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(StorybookControls).apply(this, arguments));
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(StorybookControls).call(this, props));
+
+    _this.state = {
+      filterText: ''
+    };
+    return _this;
   }
 
   (0, _createClass3.default)(StorybookControls, [{
     key: 'getKindNames',
     value: function getKindNames() {
+      var _this2 = this;
+
       var storyStore = this.props.storyStore;
 
       if (!storyStore) {
         return [];
       }
-
-      return storyStore.map(function (_ref) {
+      var kindNames = storyStore.map(function (_ref) {
         var kind = _ref.kind;
         return kind;
       });
+
+      var filterdKindNames = kindNames.filter(function (kind) {
+        var selectedKind = _this2.props.selectedKind;
+        var filterText = _this2.state.filterText;
+
+
+        if (kind === selectedKind) {
+          // Always keep the selected kind name
+          return true;
+        }
+
+        return kind.toLowerCase().indexOf(filterText.toLowerCase()) > -1;
+      });
+
+      return filterdKindNames;
     }
   }, {
     key: 'getStories',
@@ -80,6 +106,16 @@ var StorybookControls = function (_React$Component) {
 
       if (onStory) onStory(story);
     }
+  }, {
+    key: 'filterStoryList',
+    value: function filterStoryList(filterText) {
+      this.setState({ filterText: filterText });
+    }
+  }, {
+    key: 'clearFilterText',
+    value: function clearFilterText() {
+      this.setState({ filterText: '' });
+    }
   }, {
     key: 'renderStory',
     value: function renderStory(story) {
@@ -159,7 +195,6 @@ var StorybookControls = function (_React$Component) {
 
       var h1WrapStyle = {
         background: '#F7F7F7',
-        borderBottom: '1px solid #EEE',
         paddingBottom: '20px',
         position: 'absolute',
         top: '20px',
@@ -181,10 +216,17 @@ var StorybookControls = function (_React$Component) {
         margin: 0
       };
 
+      var filterTextWrapStyle = {
+        position: 'absolute',
+        top: '68px',
+        right: '10px',
+        left: '20px'
+      };
+
       var listStyle = {
         overflowY: 'auto',
         position: 'absolute',
-        top: '68px',
+        top: '108px',
         right: '10px',
         bottom: 0,
         left: '20px'
@@ -202,6 +244,15 @@ var StorybookControls = function (_React$Component) {
             'React Storybook'
           )
         ),
+        _react2.default.createElement(
+          'div',
+          { style: filterTextWrapStyle },
+          _react2.default.createElement(_filter_stories2.default, {
+            filterText: this.state.filterText,
+            onChange: this.filterStoryList.bind(this),
+            onClear: this.clearFilterText.bind(this)
+          })
+        ),
         _react2.default.createElement(
           'div',
           { style: listStyle },

dist/client/ui/filter_stories.js

@@ -0,0 +1,123 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FilterText = function (_React$Component) {
+  (0, _inherits3.default)(FilterText, _React$Component);
+
+  function FilterText(props) {
+    (0, _classCallCheck3.default)(this, FilterText);
+    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(FilterText).call(this, props));
+  }
+
+  (0, _createClass3.default)(FilterText, [{
+    key: 'onChange',
+    value: function onChange(event) {
+      var filterText = event.target.value;
+      this.props.onChange(filterText);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var mainStyle = {
+        border: '1px solid #C1C1C1',
+        borderRadius: '2px'
+      };
+
+      var filterTextWrapStyle = {
+        background: '#F7F7F7',
+        paddingRight: '24px'
+      };
+
+      var filterTextStyle = {
+        fontSize: '15px',
+        color: '#828282',
+        border: 'none',
+        padding: '5px',
+        display: 'block',
+        width: '100%',
+        height: '30px',
+        boxSizing: 'border-box',
+        outline: 'none'
+      };
+
+      var clearButtonStyle = {
+        position: 'absolute',
+        border: 'none',
+        padding: '5px',
+        width: '25px',
+        height: '30px',
+        lineHeight: '20px',
+        margin: '0 0 10px 0',
+        right: '0px',
+        top: '0px',
+        textAlign: 'center',
+        boxSizing: 'border-box',
+        cursor: 'pointer'
+      };
+
+      return _react2.default.createElement(
+        'div',
+        { style: mainStyle },
+        _react2.default.createElement(
+          'div',
+          { style: filterTextWrapStyle },
+          _react2.default.createElement('input', {
+            style: filterTextStyle,
+            type: 'text',
+            placeholder: 'Filter',
+            name: 'filter-text',
+            value: this.props.filterText,
+            onChange: this.onChange.bind(this)
+          })
+        ),
+        _react2.default.createElement(
+          'div',
+          {
+            style: clearButtonStyle,
+            onClick: this.props.onClear
+          },
+          'x'
+        )
+      );
+    }
+  }]);
+  return FilterText;
+}(_react2.default.Component);
+
+exports.default = FilterText;
+
+
+FilterText.propTypes = {
+  filterText: _react2.default.PropTypes.string,
+  onChange: _react2.default.PropTypes.func,
+  onClear: _react2.default.PropTypes.func
+};

src/client/ui/controls.js

@@ -1,13 +1,34 @@
 import React from 'react';
+import FilterText from './filter_stories'
 
 export default class StorybookControls extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      filterText: '',
+    };
+  }
+
   getKindNames() {
     const { storyStore } = this.props;
     if (!storyStore) {
       return [];
     }
+    const kindNames = storyStore.map(({ kind }) => kind);
+
+    const filterdKindNames = kindNames.filter(kind => {
+      const { selectedKind } = this.props;
+      const { filterText } = this.state;
+
+      if (kind === selectedKind) {
+        // Always keep the selected kind name
+        return true;
+      }
 
-    return storyStore.map(({ kind }) => kind);
+      return kind.toLowerCase().indexOf(filterText.toLowerCase()) > -1;
+    });
+
+    return filterdKindNames;
   }
 
   getStories(kind) {
@@ -30,6 +51,14 @@ export default class StorybookControls extends React.Component {
     if (onStory) onStory(story);
   }
 
+  filterStoryList(filterText) {
+    this.setState({ filterText });
+  }
+
+  clearFilterText() {
+    this.setState({ filterText: '' });
+  }
+
   renderStory(story) {
     const { selectedStory } = this.props;
     const storyStyle = {
@@ -102,7 +131,6 @@ export default class StorybookControls extends React.Component {
 
     const h1WrapStyle = {
       background: '#F7F7F7',
-      borderBottom: '1px solid #EEE',
       paddingBottom: '20px',
       position: 'absolute',
       top: '20px',
@@ -124,10 +152,17 @@ export default class StorybookControls extends React.Component {
       margin: 0,
     };
 
+    const filterTextWrapStyle = {
+      position: 'absolute',
+      top: '68px',
+      right: '10px',
+      left: '20px',
+    };
+
     const listStyle = {
       overflowY: 'auto',
       position: 'absolute',
-      top: '68px',
+      top: '108px',
       right: '10px',
       bottom: 0,
       left: '20px',
@@ -138,6 +173,13 @@ export default class StorybookControls extends React.Component {
         <div style={h1WrapStyle}>
           <h3 style={h1Style}>React Storybook</h3>
         </div>
+        <div style={filterTextWrapStyle}>
+          <FilterText
+            filterText={this.state.filterText}
+            onChange={this.filterStoryList.bind(this)}
+            onClear={this.clearFilterText.bind(this)}
+          />
+        </div>
         <div style={listStyle}>
           {kindNames.map(this.renderKind.bind(this))}
         </div>