Merge pull request #14976 from storybookjs/14752-fix-controls-without…

…-options

Controls: Fix controls without options and add warning

examples/official-storybook/stories/addon-controls.stories.tsx

@@ -161,3 +161,8 @@ FilteredWithExcludeRegex.parameters = {
     exclude: /hello*/,
   },
 };
+
+// https://github.com/storybookjs/storybook/issues/14752
+export const MissingRadioOptions = Template.bind({});
+MissingRadioOptions.argTypes = { invalidRadio: { control: 'radio' } };
+MissingRadioOptions.args = { invalidRadio: 'someValue' };

lib/components/src/controls/options/Checkbox.tsx

@@ -1,5 +1,6 @@
 import React, { FC, ChangeEvent, useState, Fragment } from 'react';
 import { styled } from '@storybook/theming';
+import { logger } from '@storybook/client-logger';
 import { ControlProps, OptionsMultiSelection, NormalizedOptionsConfig } from '../types';
 import { selectedKeys, selectedValues } from './helpers';
 
@@ -48,6 +49,11 @@ export const CheckboxControl: FC<CheckboxProps> = ({
   onChange,
   isInline,
 }) => {
+  if (!options) {
+    logger.warn(`Checkbox with no options: ${name}`);
+    return <>-</>;
+  }
+
   const initial = selectedKeys(value, options);
   const [selected, setSelected] = useState(initial);
 

lib/components/src/controls/options/Radio.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import { styled } from '@storybook/theming';
+import { logger } from '@storybook/client-logger';
 import { ControlProps, OptionsSingleSelection, NormalizedOptionsConfig } from '../types';
 import { selectedKey } from './helpers';
 
@@ -48,6 +49,10 @@ const Label = styled.label({
 type RadioConfig = NormalizedOptionsConfig & { isInline: boolean };
 type RadioProps = ControlProps<OptionsSingleSelection> & RadioConfig;
 export const RadioControl: FC<RadioProps> = ({ name, options, value, onChange, isInline }) => {
+  if (!options) {
+    logger.warn(`Radio with no options: ${name}`);
+    return <>-</>;
+  }
   const selection = selectedKey(value, options);
   return (
     <Wrapper isInline={isInline}>

lib/components/src/controls/options/Select.tsx

@@ -1,5 +1,6 @@
 import React, { FC, ChangeEvent } from 'react';
 import { styled, CSSObject } from '@storybook/theming';
+import { logger } from '@storybook/client-logger';
 import { ControlProps, OptionsSelection, NormalizedOptionsConfig } from '../types';
 import { selectedKey, selectedKeys, selectedValues } from './helpers';
 import { Icons } from '../../icon/icon';
@@ -129,6 +130,13 @@ const MultiSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
   );
 };
 
-export const SelectControl: FC<SelectProps> = (props) =>
+export const SelectControl: FC<SelectProps> = (props) => {
+  const { name, options } = props;
+  if (!options) {
+    logger.warn(`Select with no options: ${name}`);
+    return <>-</>;
+  }
+
   // eslint-disable-next-line react/destructuring-assignment
-  props.isMulti ? <MultiSelect {...props} /> : <SingleSelect {...props} />;
+  return props.isMulti ? <MultiSelect {...props} /> : <SingleSelect {...props} />;
+};

lib/components/src/controls/options/helpers.ts

@@ -1,16 +1,16 @@
 import { OptionsObject } from '../types';
 
 export const selectedKey = (value: any, options: OptionsObject) => {
-  const entry = Object.entries(options).find(([_key, val]) => val === value);
+  const entry = options && Object.entries(options).find(([_key, val]) => val === value);
   return entry ? entry[0] : undefined;
 };
 
 export const selectedKeys = (value: any[], options: OptionsObject) =>
-  value
+  value && options
     ? Object.entries(options)
         .filter((entry) => value.includes(entry[1]))
         .map((entry) => entry[0])
     : [];
 
 export const selectedValues = (keys: string[], options: OptionsObject) =>
-  keys.map((key) => options[key]);
+  keys && options && keys.map((key) => options[key]);