Addon-controls: Fix undefined args handling

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
@@ -44,17 +42,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,
 };

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(undefined);

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,

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);

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']);

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>
+    </>
+  );
+};

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>
+    </>
+  );
+};

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([]);

lib/components/src/controls/Range.stories.tsx

@@ -6,8 +6,8 @@ export default {
   component: RangeControl,
 };
 
-export const Basic = () => {
-  const [value, setValue] = useState(10);
+const Template = (initialValue?: number) => {
+  const [value, setValue] = useState(initialValue);
   return (
     <>
       <RangeControl
@@ -22,3 +22,7 @@ export const Basic = () => {
     </>
   );
 };
+
+export const Basic = () => Template(10);
+
+export const Undefined = () => Template(undefined);

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,

lib/components/src/controls/Text.stories.tsx

@@ -6,12 +6,16 @@ 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)} />
       <p>{value}</p>
     </>
   );
 };
+
+export const Basic = () => Template('Hello text');
+
+export const Undefined = () => Template(undefined);

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>
   );

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;