Fix Controls with names not updating

storybookjs · Jul 29, 2020 · 7309560 · 7309560
1 parent d49e9d9
commit 7309560
Show file tree

Hide file tree

Showing 23 changed files with 105 additions and 84 deletions.
diff --git a/lib/components/src/blocks/ArgsTable/ArgControl.tsx b/lib/components/src/blocks/ArgsTable/ArgControl.tsx
@@ -21,7 +21,7 @@ export interface ArgControlProps {
 const NoControl = () => <>-</>;
 
 export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs }) => {
-  const { name, control } = row;
+  const { key, control } = row;
 
   const [isFocused, setFocused] = useState(false);
   // box because arg can be a fn (e.g. actions) and useState calls fn's
@@ -32,20 +32,20 @@ export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs }) => {
   }, [isFocused, arg]);
 
   const onChange = useCallback(
-    (argName: string, argVal: any) => {
+    (argVal: any) => {
       setBoxedValue({ value: argVal });
-      updateArgs({ [name]: argVal });
+      updateArgs({ [key]: argVal });
       return argVal;
     },
-    [updateArgs, name]
+    [updateArgs, key]
   );
 
   const onBlur = useCallback(() => setFocused(false), []);
   const onFocus = useCallback(() => setFocused(true), []);
 
   if (!control || control.disable) return <NoControl />;
 
-  const props = { name, argType: row, value: boxedValue.value, onChange, onBlur, onFocus };
+  const props = { key, argType: row, value: boxedValue.value, onChange, onBlur, onFocus };
   switch (control.type) {
     case 'array':
       return <ArrayControl {...props} {...control} />;

diff --git a/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgRow.stories.tsx
@@ -28,7 +28,8 @@ export const String = Template.bind({});
 String.args = {
   ...baseArgs,
   row: {
-    name: 'someString',
+    key: 'someString',
+    name: 'Some String',
     description: 'someString description',
     type: { required: true },
     control: { type: 'text' },
@@ -44,7 +45,7 @@ LongName.args = {
   ...baseArgs,
   row: {
     ...String.args.row,
-    name: 'reallyLongStringThatTakesUpSpace',
+    name: 'Really Long String That Takes Up Space',
   },
 };
 
@@ -61,7 +62,8 @@ export const Boolean = Template.bind({});
 Boolean.args = {
   ...baseArgs,
   row: {
-    name: 'someBoolean',
+    key: 'someBoolean',
+    name: 'Some Boolean',
     description: 'someBoolean description',
     type: { required: true },
     control: { type: 'boolean' },
@@ -76,7 +78,8 @@ export const Color = Template.bind({});
 Color.args = {
   ...baseArgs,
   row: {
-    name: 'someColor',
+    key: 'someColor',
+    name: 'Some Color',
     type: { name: 'string' },
     description: 'someColor description',
     defaultValue: '#ff0',
@@ -88,7 +91,8 @@ export const Date = Template.bind({});
 Date.args = {
   ...baseArgs,
   row: {
-    name: 'someDate',
+    key: 'someDate',
+    name: 'Some Date',
     type: { name: 'string' },
     description: 'someDate description',
     control: { type: 'date' },
@@ -99,7 +103,8 @@ export const Number = Template.bind({});
 Number.args = {
   ...baseArgs,
   row: {
-    name: 'someNumber',
+    key: 'someNumber',
+    name: 'Some Number',
     description: 'someNumber description',
     type: { required: false },
     table: {
@@ -123,7 +128,8 @@ export const Radio = Template.bind({});
 Radio.args = {
   ...baseArgs,
   row: {
-    name: 'someEnum',
+    key: 'someEnum',
+    name: 'Some Enum',
     description: 'someEnum description',
     control: { type: 'radio', options: ['a', 'b', 'c'] },
   },
@@ -178,7 +184,8 @@ export const ObjectOf = Template.bind({});
 ObjectOf.args = {
   ...baseArgs,
   row: {
-    name: 'someObject',
+    key: 'someObject',
+    name: 'Some Object',
     description: 'A simple `objectOf` propType.',
     table: {
       type: { summary: 'objectOf(number)' },
@@ -192,7 +199,8 @@ export const ArrayOf = Template.bind({});
 ArrayOf.args = {
   ...baseArgs,
   row: {
-    name: 'someArray',
+    key: 'someArray',
+    name: 'Some Array',
     description: 'array of a certain type',
     table: {
       type: { summary: 'number[]' },
@@ -206,7 +214,8 @@ export const ComplexObject = Template.bind({});
 ComplexObject.args = {
   ...baseArgs,
   row: {
-    name: 'someComplex',
+    key: 'someComplex',
+    name: 'Some Complex',
     description: 'A very complex `objectOf` propType.',
     table: {
       type: {
@@ -234,7 +243,8 @@ export const Func = Template.bind({});
 Func.args = {
   ...baseArgs,
   row: {
-    name: 'concat',
+    key: 'concat',
+    name: 'Concat',
     description: 'concat 2 string values.',
     type: { required: true },
     table: {
@@ -256,7 +266,8 @@ export const Markdown = Template.bind({});
 Markdown.args = {
   ...baseArgs,
   row: {
-    name: 'someString',
+    key: 'someString',
+    name: 'Some String',
     description:
       'A `prop` can *support* __markdown__ syntax. This was ship in ~~5.2~~ 5.3. [Find more info in the storybook docs.](https://storybook.js.org/)',
     table: {

diff --git a/lib/components/src/controls/Array.stories.tsx b/lib/components/src/controls/Array.stories.tsx
@@ -11,9 +11,9 @@ const Template = (initialValue: any) => {
   return (
     <>
       <ArrayControl
-        name="array"
+        argKey="array"
         value={value}
-        onChange={(name, newVal) => setValue(newVal)}
+        onChange={(newVal) => setValue(newVal)}
         separator=","
       />
       <ul>{value && value.map((item) => <li key={item}>{item}</li>)}</ul>

diff --git a/lib/components/src/controls/Array.tsx b/lib/components/src/controls/Array.tsx
@@ -17,7 +17,7 @@ const Wrapper = styled.label({
 
 export type ArrayProps = ControlProps<ArrayValue> & ArrayConfig;
 export const ArrayControl: FC<ArrayProps> = ({
-  name,
+  argKey,
   value,
   onChange,
   separator = ',',
@@ -27,20 +27,21 @@ export const ArrayControl: FC<ArrayProps> = ({
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>): void => {
       const { value: newVal } = e.target;
-      onChange(name, parse(newVal, separator));
+      onChange(parse(newVal, separator));
     },
     [onChange]
   );
 
   return (
     <Wrapper>
       <Form.Textarea
-        id={name}
+        id={argKey}
+        name={argKey}
         value={format(value, separator)}
         onChange={handleChange}
         size="flex"
         placeholder="Adjust array dynamically"
-        {...{ name, onBlur, onFocus }}
+        {...{ onBlur, onFocus }}
       />
     </Wrapper>
   );

diff --git a/lib/components/src/controls/Boolean.stories.tsx b/lib/components/src/controls/Boolean.stories.tsx
@@ -10,7 +10,7 @@ const Template = (initialValue?: boolean) => {
   const [value, setValue] = useState(initialValue);
   return (
     <>
-      <BooleanControl name="boolean" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <BooleanControl argKey="boolean" value={value} onChange={(newVal) => setValue(newVal)} />
       <p>value: {typeof value === 'boolean' ? value.toString() : value}</p>
     </>
   );

diff --git a/lib/components/src/controls/Boolean.tsx b/lib/components/src/controls/Boolean.tsx
@@ -79,14 +79,15 @@ const format = (value: BooleanValue): string | null => (value ? String(value) :
 const parse = (value: string | null) => value === 'true';
 
 export type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
-export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange, onBlur, onFocus }) => (
-  <Label htmlFor={name} title={value ? 'Change to false' : 'Change to true'}>
+export const BooleanControl: FC<BooleanProps> = ({ argKey, value, onChange, onBlur, onFocus }) => (
+  <Label htmlFor={argKey} title={value ? 'Change to false' : 'Change to true'}>
     <input
-      id={name}
+      id={argKey}
+      name={argKey}
       type="checkbox"
-      onChange={(e) => onChange(name, e.target.checked)}
+      onChange={(e) => onChange(e.target.checked)}
       checked={value}
-      {...{ name, onBlur, onFocus }}
+      {...{ onBlur, onFocus }}
     />
     <span>True</span>
     <span>False</span>

diff --git a/lib/components/src/controls/Color.stories.tsx b/lib/components/src/controls/Color.stories.tsx
@@ -10,9 +10,9 @@ const Template = (initialValue?: string, presetColors?: string[]) => {
   const [value, setValue] = useState(initialValue);
   return (
     <ColorControl
-      name="Color"
+      argKey="Color"
       value={value}
-      onChange={(name, newVal) => setValue(newVal)}
+      onChange={(newVal) => setValue(newVal)}
       presetColors={presetColors}
     />
   );

diff --git a/lib/components/src/controls/Color.tsx b/lib/components/src/controls/Color.tsx
@@ -31,7 +31,7 @@ const format = (color: ColorResult) =>
 
 export type ColorProps = ControlProps<ColorValue> & ColorConfig;
 export const ColorControl: FC<ColorProps> = ({
-  name,
+  argKey,
   value,
   onChange,
   onFocus,
@@ -44,7 +44,8 @@ export const ColorControl: FC<ColorProps> = ({
     <ColorButton
       active={showPicker}
       type="button"
-      name={name}
+      id={argKey}
+      name={argKey}
       onClick={() => setShowPicker(!showPicker)}
       onKeyDown={(e: KeyboardEvent) => {
         if (e.key === 'Enter') {
@@ -66,7 +67,7 @@ export const ColorControl: FC<ColorProps> = ({
         >
           <SketchPicker
             color={value}
-            onChange={(color: ColorResult) => onChange(name, format(color))}
+            onChange={(color: ColorResult) => onChange(format(color))}
             {...{ onFocus, onBlur, presetColors }}
           />
         </Popover>

diff --git a/lib/components/src/controls/Date.stories.tsx b/lib/components/src/controls/Date.stories.tsx
@@ -10,7 +10,7 @@ export const Basic = () => {
   const [value, setValue] = useState(new Date(2020, 4, 20));
   return (
     <>
-      <DateControl name="date" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <DateControl argKey="date" value={value} onChange={(newVal) => setValue(newVal)} />
       <p>{value && new Date(value).toISOString()}</p>
     </>
   );
@@ -20,7 +20,7 @@ export const Undefined = () => {
   const [value, setValue] = useState(undefined);
   return (
     <>
-      <DateControl name="date" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <DateControl argKey="date" value={value} onChange={(newVal) => setValue(newVal)} />
       <p>{value && new Date(value).toISOString()}</p>
     </>
   );

diff --git a/lib/components/src/controls/Date.tsx b/lib/components/src/controls/Date.tsx
@@ -57,7 +57,7 @@ const FlexSpaced = styled.div(({ theme }) => ({
 }));
 
 export type DateProps = ControlProps<DateValue> & DateConfig;
-export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onBlur }) => {
+export const DateControl: FC<DateProps> = ({ argKey, value, onChange, onFocus, onBlur }) => {
   const [valid, setValid] = useState(true);
   const dateRef = useRef<HTMLInputElement>();
   const timeRef = useRef<HTMLInputElement>();
@@ -79,7 +79,7 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onB
     result.setMonth(parsed.getMonth());
     result.setDate(parsed.getDate());
     const time = result.getTime();
-    if (time) onChange(name, time);
+    if (time) onChange(time);
     setValid(!!time);
   };
 
@@ -89,7 +89,7 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onB
     result.setHours(parsed.getHours());
     result.setMinutes(parsed.getMinutes());
     const time = result.getTime();
-    if (time) onChange(name, time);
+    if (time) onChange(time);
     setValid(!!time);
   };
 
@@ -99,15 +99,15 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onB
         type="date"
         max="9999-12-31" // I do this because of a rendering bug in chrome
         ref={dateRef as RefObject<HTMLInputElement>}
-        id={`${name}date`}
-        name={`${name}date`}
+        id={`${argKey}date`}
+        name={`${argKey}date`}
         onChange={onDateChange}
         {...{ onFocus, onBlur }}
       />
       <Form.Input
         type="time"
-        id={`${name}time`}
-        name={`${name}time`}
+        id={`${argKey}time`}
+        name={`${argKey}time`}
         ref={timeRef as RefObject<HTMLInputElement>}
         onChange={onTimeChange}
         {...{ onFocus, onBlur }}

diff --git a/lib/components/src/controls/Number.stories.tsx b/lib/components/src/controls/Number.stories.tsx
@@ -10,7 +10,7 @@ export const Basic = () => {
   const [value, setValue] = useState(10);
   return (
     <>
-      <NumberControl name="number" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <NumberControl argKey="number" value={value} onChange={(newVal) => setValue(newVal)} />
       <p>{value}</p>
     </>
   );
@@ -20,7 +20,7 @@ export const Undefined = () => {
   const [value, setValue] = useState(undefined);
   return (
     <>
-      <NumberControl name="number" value={value} onChange={(name, newVal) => setValue(newVal)} />
+      <NumberControl argKey="number" value={value} onChange={(newVal) => setValue(newVal)} />
       <p>{value}</p>
     </>
   );

diff --git a/lib/components/src/controls/Number.tsx b/lib/components/src/controls/Number.tsx
@@ -18,7 +18,7 @@ export const parse = (value: string) => {
 export const format = (value: NumberValue) => (value != null ? String(value) : '');
 
 export const NumberControl: FC<NumberProps> = ({
-  name,
+  argKey,
   value,
   onChange,
   min,
@@ -28,17 +28,19 @@ export const NumberControl: FC<NumberProps> = ({
   onFocus,
 }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange(name, parse(event.target.value));
+    onChange(parse(event.target.value));
   };
 
   return (
     <Wrapper>
       <Form.Input
+        id={argKey}
+        name={argKey}
         type="number"
         onChange={handleChange}
         size="flex"
         placeholder="Adjust number dynamically"
-        {...{ name, value, min, max, step, onFocus, onBlur }}
+        {...{ value, min, max, step, onFocus, onBlur }}
       />
     </Wrapper>
   );