From 36e5acf48461e2af8104d352acd05bb52db5ed65 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@thesnail.org>
Date: Mon, 20 Jul 2020 12:29:02 +1000
Subject: [PATCH 1/4] Add stories to reproduce #11586

---
 .../stories/core/args.stories.js                 | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/examples/official-storybook/stories/core/args.stories.js b/examples/official-storybook/stories/core/args.stories.js
index bdaafecb350d..c4720383ae1b 100644
--- a/examples/official-storybook/stories/core/args.stories.js
+++ b/examples/official-storybook/stories/core/args.stories.js
@@ -44,17 +44,25 @@ export default {
   ],
 };
 
-export const PassedToStory = (inputArgs) => {
+const Template = (args) => {
   return (
     <div>
       <h3>Input args:</h3>
-      <pre>{JSON.stringify(inputArgs)}</pre>
+      <pre>{JSON.stringify(args)}</pre>
     </div>
   );
 };
 
+export const PassedToStory = Template.bind({});
+
 PassedToStory.argTypes = { name: { defaultValue: 'initial', control: 'text' } };
 
-PassedToStory.propTypes = {
-  args: PropTypes.shape({}).isRequired,
+export const OtherValues = Template.bind({});
+
+OtherValues.argTypes = { name: { control: 'text' } };
+
+export const DifferentSet = Template.bind({});
+DifferentSet.args = {
+  foo: 'bar',
+  bar: 2,
 };

From 8699df25684f412f1f365e5ea2a3abadca50859b Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Mon, 20 Jul 2020 16:54:10 +0800
Subject: [PATCH 2/4] Controls: Allow optional input values and add stories

---
 .../stories/core/args.stories.js              |  2 --
 lib/components/src/controls/Array.stories.tsx | 23 +++++++++----------
 lib/components/src/controls/Array.tsx         |  3 +--
 .../src/controls/Boolean.stories.tsx          | 10 +++++---
 lib/components/src/controls/Color.stories.tsx | 18 +++++++--------
 lib/components/src/controls/Date.stories.tsx  | 10 ++++++++
 .../src/controls/Number.stories.tsx           | 10 ++++++++
 .../src/controls/Object.stories.tsx           | 18 ++++++---------
 lib/components/src/controls/Range.stories.tsx |  9 ++++++--
 lib/components/src/controls/Text.stories.tsx  |  8 +++++--
 lib/components/src/controls/Text.tsx          |  6 +++--
 lib/components/src/controls/types.ts          |  2 +-
 12 files changed, 73 insertions(+), 46 deletions(-)

diff --git a/examples/official-storybook/stories/core/args.stories.js b/examples/official-storybook/stories/core/args.stories.js
index c4720383ae1b..1a1bb9ee72a1 100644
--- a/examples/official-storybook/stories/core/args.stories.js
+++ b/examples/official-storybook/stories/core/args.stories.js
@@ -1,6 +1,4 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-
 import { useArgs } from '@storybook/client-api';
 
 // eslint-disable-next-line react/prop-types
diff --git a/lib/components/src/controls/Array.stories.tsx b/lib/components/src/controls/Array.stories.tsx
index ff83cb0679bb..70076a8c04bd 100644
--- a/lib/components/src/controls/Array.stories.tsx
+++ b/lib/components/src/controls/Array.stories.tsx
@@ -6,22 +6,21 @@ export default {
   component: ArrayControl,
 };
 
-export const Basic = () => {
-  const [value, setValue] = useState(['Bat', 'Cat', 'Rat']);
+const Template = (initialValue: any) => {
+  const [value, setValue] = useState(initialValue);
   return (
     <>
-      <ArrayControl name="array" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <ArrayControl
+        name="array"
+        value={value}
+        onChange={(name, newVal) => setValue(newVal)}
+        separator=","
+      />
       <ul>{value && value.map((item) => <li key={item}>{item}</li>)}</ul>
     </>
   );
 };
 
-export const Null = () => {
-  const [value, setValue] = useState(null);
-  return (
-    <>
-      <ArrayControl name="array" value={value} onChange={(name, newVal) => setValue(newVal)} />
-      <ul>{value && value.map((item) => <li key={item}>{item}</li>)}</ul>
-    </>
-  );
-};
+export const Basic = () => Template(['Bat', 'Cat', 'Rat']);
+
+export const Undefined = () => Template.bind(undefined);
diff --git a/lib/components/src/controls/Array.tsx b/lib/components/src/controls/Array.tsx
index 6cdc6648d8ea..b43c9109aca5 100644
--- a/lib/components/src/controls/Array.tsx
+++ b/lib/components/src/controls/Array.tsx
@@ -7,7 +7,7 @@ import { ControlProps, ArrayValue, ArrayConfig } from './types';
 const parse = (value: string, separator: string): ArrayValue =>
   !value || value.trim() === '' ? [] : value.split(separator);
 
-const format = (value: ArrayValue, separator: string) => {
+const format = (value: ArrayValue | undefined, separator: string) => {
   return value && Array.isArray(value) ? value.join(separator) : '';
 };
 
@@ -20,7 +20,6 @@ export const ArrayControl: FC<ArrayProps> = ({
   name,
   value,
   onChange,
-  argType,
   separator = ',',
   onBlur,
   onFocus,
diff --git a/lib/components/src/controls/Boolean.stories.tsx b/lib/components/src/controls/Boolean.stories.tsx
index c0bd2bc53c2d..0d9050aac9e2 100644
--- a/lib/components/src/controls/Boolean.stories.tsx
+++ b/lib/components/src/controls/Boolean.stories.tsx
@@ -6,12 +6,16 @@ export default {
   component: BooleanControl,
 };
 
-export const Basic = () => {
-  const [value, setValue] = useState(false);
+const Template = (initialValue?: boolean) => {
+  const [value, setValue] = useState(initialValue);
   return (
     <>
       <BooleanControl name="boolean" value={value} onChange={(name, newVal) => setValue(newVal)} />
-      <p>value: {value.toString()}</p>
+      <p>value: {typeof value === 'boolean' ? value.toString() : value}</p>
     </>
   );
 };
+
+export const Basic = () => Template(false);
+
+export const Undefined = () => Template(undefined);
diff --git a/lib/components/src/controls/Color.stories.tsx b/lib/components/src/controls/Color.stories.tsx
index 85b2ba9f3420..59bda246bd90 100644
--- a/lib/components/src/controls/Color.stories.tsx
+++ b/lib/components/src/controls/Color.stories.tsx
@@ -1,20 +1,13 @@
 import React, { useState } from 'react';
 import { ColorControl } from './Color';
 
-const presetColors = ['#FE4A49', '#FED766', '#009FB7', '#E6E6EA', '#F4F4F8'];
-
 export default {
   title: 'Controls/Color',
   component: ColorControl,
 };
 
-export const Basic = () => {
-  const [value, setValue] = useState('#ff0');
-  return <ColorControl name="Color" value={value} onChange={(name, newVal) => setValue(newVal)} />;
-};
-
-export const WithPresetColors = () => {
-  const [value, setValue] = useState('#ff0');
+const Template = (initialValue?: string, presetColors?: string[]) => {
+  const [value, setValue] = useState(initialValue);
   return (
     <ColorControl
       name="Color"
@@ -24,3 +17,10 @@ export const WithPresetColors = () => {
     />
   );
 };
+
+export const Basic = () => Template('#ff0');
+
+export const Undefined = () => Template(undefined);
+
+export const WithPresetColors = () =>
+  Template('#ff0', ['#FE4A49', '#FED766', '#009FB7', '#E6E6EA', '#F4F4F8']);
diff --git a/lib/components/src/controls/Date.stories.tsx b/lib/components/src/controls/Date.stories.tsx
index 50fd587e374e..165464d02696 100644
--- a/lib/components/src/controls/Date.stories.tsx
+++ b/lib/components/src/controls/Date.stories.tsx
@@ -15,3 +15,13 @@ export const Basic = () => {
     </>
   );
 };
+
+export const Undefined = () => {
+  const [value, setValue] = useState(undefined);
+  return (
+    <>
+      <DateControl name="date" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <p>{value && new Date(value).toISOString()}</p>
+    </>
+  );
+};
diff --git a/lib/components/src/controls/Number.stories.tsx b/lib/components/src/controls/Number.stories.tsx
index b15b7a1b4849..b58f47868ccc 100644
--- a/lib/components/src/controls/Number.stories.tsx
+++ b/lib/components/src/controls/Number.stories.tsx
@@ -15,3 +15,13 @@ export const Basic = () => {
     </>
   );
 };
+
+export const Undefined = () => {
+  const [value, setValue] = useState(undefined);
+  return (
+    <>
+      <NumberControl name="number" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <p>{value}</p>
+    </>
+  );
+};
diff --git a/lib/components/src/controls/Object.stories.tsx b/lib/components/src/controls/Object.stories.tsx
index eae894ad71f8..3b43e8528f6e 100644
--- a/lib/components/src/controls/Object.stories.tsx
+++ b/lib/components/src/controls/Object.stories.tsx
@@ -6,8 +6,8 @@ export default {
   component: ObjectControl,
 };
 
-export const Basic = () => {
-  const [value, setValue] = useState({ name: 'Michael', nested: { something: true } });
+const Template = (initialValue: any) => {
+  const [value, setValue] = useState(initialValue);
   return (
     <>
       <ObjectControl name="object" value={value} onChange={(name, newVal) => setValue(newVal)} />
@@ -16,15 +16,11 @@ export const Basic = () => {
   );
 };
 
-export const Null = () => {
-  const [value, setValue] = useState(null);
-  return (
-    <>
-      <ObjectControl name="object" value={value} onChange={(name, newVal) => setValue(newVal)} />
-      <p>{value && JSON.stringify(value)}</p>
-    </>
-  );
-};
+export const Basic = () => Template({ name: 'Michael', nested: { something: true } });
+
+export const Null = () => Template(null);
+
+export const Undefined = () => Template(undefined);
 
 export const ValidatedAsArray = () => {
   const [value, setValue] = useState([]);
diff --git a/lib/components/src/controls/Range.stories.tsx b/lib/components/src/controls/Range.stories.tsx
index 4d8c36f554c7..f956030a46fb 100644
--- a/lib/components/src/controls/Range.stories.tsx
+++ b/lib/components/src/controls/Range.stories.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { initial } from 'lodash';
 import { RangeControl } from './Range';
 
 export default {
@@ -6,8 +7,8 @@ export default {
   component: RangeControl,
 };
 
-export const Basic = () => {
-  const [value, setValue] = useState(10);
+export const Template = (initialValue?: number) => {
+  const [value, setValue] = useState(initialValue);
   return (
     <>
       <RangeControl
@@ -22,3 +23,7 @@ export const Basic = () => {
     </>
   );
 };
+
+export const Basic = () => Template(10);
+
+export const Undefined = () => Template(undefined);
diff --git a/lib/components/src/controls/Text.stories.tsx b/lib/components/src/controls/Text.stories.tsx
index 02d7bb90b1fc..2f8007ec5c41 100644
--- a/lib/components/src/controls/Text.stories.tsx
+++ b/lib/components/src/controls/Text.stories.tsx
@@ -6,8 +6,8 @@ export default {
   component: TextControl,
 };
 
-export const Basic = () => {
-  const [value, setValue] = useState('Hello text');
+const Template = (initialValue?: string) => {
+  const [value, setValue] = useState(initialValue);
   return (
     <>
       <TextControl name="Text" value={value} onChange={(name, newVal) => setValue(newVal)} />
@@ -15,3 +15,7 @@ export const Basic = () => {
     </>
   );
 };
+
+export const Basic = () => Template('Hello text');
+
+export const Undefined = () => Template(undefined);
diff --git a/lib/components/src/controls/Text.tsx b/lib/components/src/controls/Text.tsx
index 2444867aa507..5dd0fd804a44 100644
--- a/lib/components/src/controls/Text.tsx
+++ b/lib/components/src/controls/Text.tsx
@@ -4,12 +4,14 @@ import { styled } from '@storybook/theming';
 import { Form } from '../form';
 import { ControlProps, TextValue, TextConfig } from './types';
 
-export type TextProps = ControlProps<TextValue> & TextConfig;
+export type TextProps = ControlProps<TextValue | undefined> & TextConfig;
 
 const Wrapper = styled.label({
   display: 'flex',
 });
 
+const format = (value?: TextValue) => value || '';
+
 export const TextControl: FC<TextProps> = ({ name, value, onChange, onFocus, onBlur }) => {
   const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     onChange(name, event.target.value);
@@ -21,7 +23,7 @@ export const TextControl: FC<TextProps> = ({ name, value, onChange, onFocus, onB
         onChange={handleChange}
         size="flex"
         placeholder="Adjust string dynamically"
-        {...{ name, value, onFocus, onBlur }}
+        {...{ name, value: format(value), onFocus, onBlur }}
       />
     </Wrapper>
   );
diff --git a/lib/components/src/controls/types.ts b/lib/components/src/controls/types.ts
index 34afbe0d68d8..b8c737823d37 100644
--- a/lib/components/src/controls/types.ts
+++ b/lib/components/src/controls/types.ts
@@ -3,7 +3,7 @@ import { ArgType } from '../blocks';
 /* eslint-disable @typescript-eslint/no-empty-interface */
 export interface ControlProps<T> {
   name: string;
-  value: T;
+  value?: T;
   defaultValue?: T;
   argType?: ArgType;
   onChange: (name: string, value: T) => T | void;

From 064c039cf5677aa98179a08149f1792a3d794592 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Mon, 20 Jul 2020 18:43:30 +0800
Subject: [PATCH 3/4] Fix typo

---
 lib/components/src/controls/Range.stories.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/lib/components/src/controls/Range.stories.tsx b/lib/components/src/controls/Range.stories.tsx
index f956030a46fb..a2214ef7b2ed 100644
--- a/lib/components/src/controls/Range.stories.tsx
+++ b/lib/components/src/controls/Range.stories.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { initial } from 'lodash';
 import { RangeControl } from './Range';
 
 export default {
@@ -7,7 +6,7 @@ export default {
   component: RangeControl,
 };
 
-export const Template = (initialValue?: number) => {
+const Template = (initialValue?: number) => {
   const [value, setValue] = useState(initialValue);
   return (
     <>

From 22dd2359e48a43ec2265e6fbee0d168b069dfa4c Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Mon, 20 Jul 2020 19:05:32 +0800
Subject: [PATCH 4/4] Addon-controls: Fix stories

---
 lib/components/src/controls/Array.stories.tsx | 2 +-
 lib/components/src/controls/Range.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/src/controls/Array.stories.tsx b/lib/components/src/controls/Array.stories.tsx
index 70076a8c04bd..9feffc7da951 100644
--- a/lib/components/src/controls/Array.stories.tsx
+++ b/lib/components/src/controls/Array.stories.tsx
@@ -23,4 +23,4 @@ const Template = (initialValue: any) => {
 
 export const Basic = () => Template(['Bat', 'Cat', 'Rat']);
 
-export const Undefined = () => Template.bind(undefined);
+export const Undefined = () => Template(undefined);
diff --git a/lib/components/src/controls/Range.tsx b/lib/components/src/controls/Range.tsx
index 16d0b298dcd5..2abee0d063b9 100644
--- a/lib/components/src/controls/Range.tsx
+++ b/lib/components/src/controls/Range.tsx
@@ -153,7 +153,7 @@ const RangeWrapper = styled.div({
 
 export const RangeControl: FC<RangeProps> = ({
   name,
-  value = 50,
+  value,
   onChange,
   min = 0,
   max = 100,