Used refs instead of id to get wrapper, added showSuggestions prop.

Author: gregchamberlain

.storybook/config.js

@@ -0,0 +1,7 @@
+import { configure } from '@kadira/storybook';
+
+function loadStories() {
+  require('../stories');
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,18 @@
+// you can use this file to add your custom webpack plugins, loaders and anything you like.
+// This is just the basic way to add addional webpack configurations.
+// For more information refer the docs: https://goo.gl/qPbSyX
+
+// IMPORTANT
+// When you add this file, we won't add the default configurations which is similar
+// to "React Create App". This only has babel loader to load JavaScript.
+
+module.exports = {
+  plugins: [
+    // your custom plugins
+  ],
+  module: {
+    loaders: [
+      // add your custom loaders.
+    ],
+  },
+};

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "vsicons.presets.angular": false
+}

package.json

@@ -11,7 +11,9 @@
     "start": "node tools/devServer.js",
     "build": "NODE_ENV=production ./tools/build.sh",
     "buildSite": "NODE_ENV=production webpack --config webpack.config.prod.js --progress",
-    "prepublish": "npm run build"
+    "prepublish": "npm run build",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -38,7 +40,8 @@
     "react-hot-loader": "^3.0.0-beta.6",
     "webpack": "^1.14.0",
     "webpack-dev-middleware": "^1.8.4",
-    "webpack-hot-middleware": "^2.13.2"
+    "webpack-hot-middleware": "^2.13.2",
+    "@kadira/storybook": "^2.21.0"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.3.0"

site/src/basic.js

@@ -34,6 +34,7 @@ class BasicExample extends Component {
         onChange={this.onChange}
         placeholder="Type a Programming Language"
         suggestions={data}
+        shouldRenderSuggestions={value => value.length >= 0}
         fromSuggestionsOnly={false} />
     );
   }

src/Chips.js

@@ -17,22 +17,18 @@ class Chips extends Component {
     };
   }
 
-  componentDidMount = () => {
-    this.chips = document.getElementById('chips-wrapper');
-  }
-
   onBlur = e => {
-    this.chips.focus();
+    this.refs.wrapper.focus();
   }
 
   onFocus = e => {
-    this.chips.blur();
+    this.refs.wrapper.blur();
   }
 
   handleKeyDown = e => {
     if (!this.props.fromSuggestionsOnly && e.keyCode === 9) {
       e.preventDefault();
-      if (this.state.value) this.addChip(this.state.value);
+      if (this.state.value.trim()) this.addChip(this.state.value);
     }
     if (e.keyCode === 8) {
       this.onBackspace();
@@ -119,7 +115,7 @@ class Chips extends Component {
   render() {
 
     const { value, suggestions } = this.state;
-    const { placeholder, renderSuggestion, getSuggestionValue } = this.props;
+    const { placeholder, renderSuggestion, getSuggestionValue, shouldRenderSuggestions } = this.props;
     const themr = themeable(this.props.theme);
 
     const inputProps = {
@@ -132,13 +128,14 @@ class Chips extends Component {
     };
 
     return (
-      <div {...themr(200, 'chipsContainer')} id="chips-wrapper" >
+      <div {...themr(200, 'chipsContainer')} ref="wrapper" >
         {this.renderChips()}
         <Autosuggest
           theme={this.props.theme}
           suggestions={this.state.suggestions}
           onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
           onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+          shouldRenderSuggestions={shouldRenderSuggestions}
           renderSuggestion={renderSuggestion}
           inputProps={inputProps}
           getSuggestionValue={getSuggestionValue}
@@ -156,6 +153,7 @@ Chips.propTypes = {
   fromSuggestionsOnly: PropTypes.bool,
   uniqueChips: PropTypes.bool,
   chips: PropTypes.array,
+  shouldRenderSuggestions: PropTypes.func,
   getSuggestionValue: PropTypes.func,
   onChange: PropTypes.func,
   renderChip: PropTypes.func,

src/theme.js

@@ -3,8 +3,8 @@ const theme = {
     display: "flex",
     position: "relative",
     border: "1px solid #ccc",
+    backgroundColor: '#fff',
     font: "13.33333px Arial",
-    zIndex: 1,
     minHeight: 24,
     alignItems: "center",
     flexWrap: "wrap",
@@ -34,6 +34,7 @@ const theme = {
   suggestionsList: {
     position: 'absolute',
     border: '1px solid #ccc',
+    zIndex: 10,
     left: 0,
     top: '100%',
     width: '100%',

stories/Button.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const buttonStyles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+const Button = ({ children, onClick }) => (
+  <button
+    style={buttonStyles}
+    onClick={onClick}
+  >
+    {children}
+  </button>
+);
+
+Button.propTypes = {
+  children: React.PropTypes.string.isRequired,
+  onClick: React.PropTypes.func,
+};
+
+export default Button;

stories/Chips.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import Chips from '../src';
+
+class ChipsExample extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      chips: []
+    };
+  }
+
+  updateChips = chips => {
+    if (this.props.onChange) {
+      this.props.onChange();
+    }
+    this.setState({ chips });
+  }
+
+  render() {
+    const { chips } = this.state;
+    return (
+      <Chips {...this.props} onChange={this.updateChips} value={chips}/>
+    );
+  }
+}
+
+export default ChipsExample;

stories/Welcome.js

@@ -0,0 +1,82 @@
+import React from 'react';
+
+const styles = {
+  main: {
+    margin: 15,
+    maxWidth: 600,
+    lineHeight: 1.4,
+    fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+  },
+
+  logo: {
+    width: 200,
+  },
+
+  link: {
+    color: '#1474f3',
+    textDecoration: 'none',
+    borderBottom: '1px solid #1474f3',
+    paddingBottom: 2,
+  },
+
+  code: {
+    fontSize: 15,
+    fontWeight: 600,
+    padding: "2px 5px",
+    border: "1px solid #eae9e9",
+    borderRadius: 4,
+    backgroundColor: '#f3f2f2',
+    color: '#3a3a3a',
+  },
+
+  note: {
+    opacity: 0.5,
+  }
+};
+
+export default class Welcome extends React.Component {
+  showApp(e) {
+    e.preventDefault();
+    if(this.props.showApp) this.props.showApp();
+  }
+
+  render() {
+    return (
+      <div style={styles.main}>
+        <h1>Welcome to STORYBOOK</h1>
+        <p>
+          This is a UI component dev environment for your app.
+        </p>
+        <p>
+          We've added some basic stories inside the <code style={styles.code}>src/stories</code> directory.
+          <br/>
+          A story is a single state of one or more UI components. You can have as many stories as you want.
+          <br/>
+          (Basically a story is like a visual test case.)
+        </p>
+        <p>
+          See these sample <a style={styles.link} href='#' onClick={this.showApp.bind(this)}>stories</a> for a component called <code style={styles.code}>Button</code>.
+        </p>
+        <p>
+          Just like that, you can add your own components as stories.
+          <br />
+          You can also edit those components and see changes right away.
+          <br />
+          (Try editing the <code style={styles.code}>Button</code> component
+          located at <code style={styles.code}>src/stories/Button.js</code>.)
+        </p>
+        <p>
+          This is just one thing you can do with Storybook.
+          <br/>
+          Have a look at the <a style={styles.link} href="https://github.com/kadirahq/react-storybook" target="_blank">React Storybook</a> repo for more information.
+        </p>
+        <p style={styles.note}>
+          <b>NOTE:</b>
+          <br/>
+          Have a look at the <code style={styles.code}>.storybook/webpack.config.js</code> to add webpack
+          loaders and plugins you are using in this project.
+        </p>
+      </div>
+    );
+  }
+}

stories/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { storiesOf, action, linkTo } from '@kadira/storybook';
+import Button from './Button';
+import Welcome from './Welcome';
+import Chips from './Chips';
+
+storiesOf('Welcome', module)
+  .add('to Storybook', () => (
+    <Welcome showApp={linkTo('Button')}/>
+  ));
+
+storiesOf('Button', module)
+  .add('with text', () => (
+    <Button onClick={action('clicked')}>Hello Button</Button>
+  ))
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+  ));
+
+  const suggestions = [
+    'JavaScript',
+    'Ruby',
+    'Python',
+    'Java',
+    'Swift',
+    'C++',
+    'C',
+    'Objective C',
+    'Go'
+  ];
+
+storiesOf('Chips', module)
+  .add('basic', () => (
+    <Chips
+    placeholder="Type a Programming Language"
+    suggestions={suggestions}
+    fromSuggestionsOnly={false}
+    />
+  ));