Fixed addon knobs proptypes deserialization

addons/knobs/src/components/types/Array.js

@@ -41,7 +41,7 @@ ArrayType.defaultProps = {
 ArrayType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
-    value: PropTypes.string,
+    value: PropTypes.array,
   }),
   onChange: PropTypes.func,
 };

addons/knobs/src/components/types/Boolean.js

@@ -39,12 +39,12 @@ BooleanType.defaultProps = {
 BooleanType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
-    value: PropTypes.string,
+    value: PropTypes.bool,
   }),
   onChange: PropTypes.func,
 };
 
 BooleanType.serialize = value => String(value);
-BooleanType.deserialize = value => (typeof value === 'string' ? value.match('true') : false);
+BooleanType.deserialize = value => value === 'true';
 
 export default BooleanType;

addons/knobs/src/components/types/Date/index.js

@@ -39,7 +39,7 @@ DateType.defaultProps = {
 DateType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
-    value: PropTypes.string,
+    value: PropTypes.number,
   }),
   onChange: PropTypes.func,
 };

addons/knobs/src/components/types/Object.js

@@ -88,7 +88,7 @@ ObjectType.defaultProps = {
 ObjectType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
-    value: PropTypes.string,
+    value: PropTypes.object,
   }),
   onChange: PropTypes.func,
 };

examples/cra-kitchen-sink/src/stories/index.js

@@ -6,7 +6,17 @@ import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 import WithEvents from '@storybook/addon-events';
 import { WithNotes } from '@storybook/addon-notes';
-import { withKnobs, text, number } from '@storybook/addon-knobs';
+import {
+  withKnobs,
+  text,
+  number,
+  boolean,
+  color,
+  select,
+  array,
+  date,
+  object,
+} from '@storybook/addon-knobs';
 import centered from '@storybook/addon-centered';
 
 import Button from '@storybook/components/dist/demo/Button';
@@ -37,11 +47,44 @@ storiesOf('Button', module)
     </WithNotes>
   )
   .add('with knobs', () => {
-    const label = text('Label', 'Edit me in knobs panel');
-    const num = number('Number', 1);
-    const content = `I am ${label} and I'm ${num} years old.`;
+    const name = text('Name', 'Storyteller');
+    const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
+    const fruits = {
+      apple: 'Apple',
+      banana: 'Banana',
+      cherry: 'Cherry',
+    };
+    const fruit = select('Fruit', fruits, 'apple');
+    const dollars = number('Dollars', 12.5);
 
-    return <Button>{content}</Button>;
+    // NOTE: color picker is currently broken
+    const backgroundColor = color('background', '#ffff00');
+    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+    const otherStyles = object('Styles', {
+      border: '3px solid #ff00ff',
+      padding: '10px',
+    });
+    const nice = boolean('Nice', true);
+
+    // NOTE: put this last because it currently breaks everything after it :D
+    const birthday = date('Birthday', new Date('Jan 20 2017'));
+
+    const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`;
+    const style = { backgroundColor, ...otherStyles };
+    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+
+    return (
+      <div style={style}>
+        <p>{intro}</p>
+        <p>My birthday is: {new Date(birthday).toLocaleDateString()}</p>
+        <p>My wallet contains: ${dollars.toFixed(2)}</p>
+        <p>In my backpack, I have:</p>
+        <ul>
+          {items.map(item => <li key={item}>{item}</li>)}
+        </ul>
+        <p>{salutation}</p>
+      </div>
+    );
   })
   .addWithInfo(
     'with some info',