Add some better example.

example/stories/Button.js

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

example/stories/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import moment from 'moment';
 import { storiesOf } from '@kadira/storybook';
-import { action } from '@kadira/storybook-addon-actions';
+import moment from 'moment';
 import {
   withKnobs,
   number,
@@ -12,25 +11,38 @@ import {
   date
 } from '../../src';
 
-import Button from './Button';
-
-const today = new Date();
-
-storiesOf('Button', module)
+storiesOf('Example of Knobs', module)
   .addDecorator(withKnobs)
-  .add('default view', () => (
-    <Button
-      onClick={ action('button clicked') }
-      disabled={ boolean('Disabled', false) }
-      color={ select('Height', { red: 'Red', blue: 'Blue', yellow: 'Yellow' }, 'red') }
-      width={ number('Width', 100) }
-      style={ object('Style', { backgroundColor: '#FFF' }) }
-    >
-      { text('Label', 'Hello Man23') } World
-      <br/>
-      { date('Date', today).toString() }
-    </Button>
+  .add('simple example', () => (
+    <button>{text('Label', 'Hello Button')}</button>
   ))
-  .add('Story without any knobs', () => (
-    <Button>{text('Label', 'Hello')}</Button>
+  .add('with all knobs', () => {
+    const name = text('Name', 'Tom Cary');
+    const dob = date('DOB', new Date('1889 Jan 20'));
+    const bold = boolean('Bold', false);
+    const color = select('Color', {
+      red: 'Red',
+      green: 'Green',
+      black: 'Black'
+    }, 'black');
+
+    const customStyle = object('Style', {
+      fontFamily: 'Arial',
+      padding: 20,
+    });
+
+    const style = {
+      ...customStyle,
+      fontWeight: bold ? 800: 400,
+      color
+    };
+
+    return (
+      <div style={style}>
+        I'm {name} and I born on "{moment(dob).format("DD MMM YYYY")}"
+      </div>
+    );
+  })
+  .add('without any knob', () => (
+    <button>This is a button</button>
   ));