From 3f6f69914b8e5dc80a96e0bef168a7a44acee825 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 23 Oct 2018 09:49:34 +0200
Subject: [PATCH 1/2] FIX knobs select to actually support rich values

---
 addons/knobs/src/components/types/Select.js   | 50 +++++++++----------
 .../stories/addon-knobs.stories.js            | 10 ++--
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/addons/knobs/src/components/types/Select.js b/addons/knobs/src/components/types/Select.js
index 4fe654e0e2b2..ee49a1a8343a 100644
--- a/addons/knobs/src/components/types/Select.js
+++ b/addons/knobs/src/components/types/Select.js
@@ -1,32 +1,32 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Select } from '@storybook/components';
 
-class SelectType extends Component {
-  renderOptionList({ options }) {
-    if (Array.isArray(options)) {
-      return options.map(val => this.renderOption(val, val));
-    }
-    return Object.keys(options).map(key => this.renderOption(key, options[key]));
-  }
-
-  renderOption(key, value) {
-    const opts = { key, value };
-
-    return <option {...opts}>{key}</option>;
-  }
-
-  render() {
-    const { knob, onChange } = this.props;
-
-    return (
-      <Select value={knob.value} onChange={e => onChange(e.target.value)} size="flex">
-        {this.renderOptionList(knob)}
-      </Select>
-    );
-  }
-}
+const SelectType = ({ knob, onChange }) => {
+  const { options } = knob;
+  const entries = Array.isArray(options)
+    ? options.reduce((acc, k) => Object.assign(acc, { k }), {})
+    : options;
+
+  const selectedKey = Object.keys(entries).find(k => entries[k] === knob.value);
+
+  return (
+    <Select
+      value={selectedKey}
+      onChange={e => {
+        onChange(entries[e.target.value]);
+      }}
+      size="flex"
+    >
+      {Object.entries(entries).map(([key]) => (
+        <option key={key} value={key}>
+          {key}
+        </option>
+      ))}
+    </Select>
+  );
+};
 
 SelectType.defaultProps = {
   knob: {},
diff --git a/examples/official-storybook/stories/addon-knobs.stories.js b/examples/official-storybook/stories/addon-knobs.stories.js
index fe6d4bfa3b4b..866a5b335216 100644
--- a/examples/official-storybook/stories/addon-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs.stories.js
@@ -185,8 +185,8 @@ storiesOf('Addons|Knobs.withKnobs', module)
     const showOptional = select('Show optional', ['yes', 'no'], 'yes');
     return (
       <div>
-        <div>{text('compulsary', 'I must be here')}</div>
-        {showOptional === 'yes' ? <div>{text('optional', 'I can disapear')}</div> : null}
+        <div>{text('compulsory', 'I must be here')}</div>
+        {showOptional === 'yes' ? <div>{text('optional', 'I can disappear')}</div> : null}
       </div>
     );
   })
@@ -202,7 +202,11 @@ storiesOf('Addons|Knobs.withKnobs', module)
       'string'
     );
     const value = m.toString();
-    return <pre>{value}</pre>;
+    return (
+      <pre>
+        the type of {value} = {typeof m}
+      </pre>
+    );
   })
   .add('triggers actions via button', () => {
     button('Toggle item list state', () => {

From c98a11a5617ab87a892bc32471cb69d5726a0ac9 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 23 Oct 2018 14:32:23 +0200
Subject: [PATCH 2/2] FIX tests && FIX snapshots

---
 addons/knobs/src/components/__tests__/Select.js               | 2 +-
 .../stories/__snapshots__/addon-knobs.stories.storyshot       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/addons/knobs/src/components/__tests__/Select.js b/addons/knobs/src/components/__tests__/Select.js
index 464d43f66bd2..ccc2e2b0255a 100644
--- a/addons/knobs/src/components/__tests__/Select.js
+++ b/addons/knobs/src/components/__tests__/Select.js
@@ -22,7 +22,7 @@ describe('Select', () => {
 
       const green = wrapper.find('option').first();
       expect(green.text()).toEqual('Green');
-      expect(green.prop('value')).toEqual('#00ff00');
+      expect(green.prop('value')).toEqual('Green');
     });
   });
 });
diff --git a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
index 5b446a426bf8..8053f7b46679 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -14,7 +14,7 @@ exports[`Storyshots Addons|Knobs.withKnobs accepts story parameters 1`] = `
 
 exports[`Storyshots Addons|Knobs.withKnobs complex select 1`] = `
 <pre>
-  string
+  the type of string = string
 </pre>
 `;
 
@@ -24,7 +24,7 @@ exports[`Storyshots Addons|Knobs.withKnobs dynamic knobs 1`] = `
     I must be here
   </div>
   <div>
-    I can disapear
+    I can disappear
   </div>
 </div>
 `;