Fix errors in grafana-ui's storybook files (#28004)

.eslintrc

@@ -3,7 +3,7 @@
   "root": true,
   "overrides": [
     {
-      "files": ["packages/grafana-ui/**/*.{ts,tsx}", "public/app/**/*.{ts,tsx}"],
+      "files": ["packages/grafana-ui/**/*/!(*.story).{ts,tsx}", "public/app/**/*.{ts,tsx}"],
       "rules": {
         "react-hooks/rules-of-hooks": "off",
         "react-hooks/exhaustive-deps": "off"

packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx

@@ -16,7 +16,7 @@ export default {
   },
 };
 
-export const single = () => {
+export const Single = () => {
   const size = useSize();
   return (
     <FileUpload

packages/grafana-ui/src/components/Forms/Checkbox.story.tsx

@@ -12,7 +12,7 @@ export default {
   },
 };
 
-export const controlled = () => {
+export const Controlled = () => {
   const [checked, setChecked] = useState(false);
   const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]);
   return (

packages/grafana-ui/src/components/Forms/Field.story.tsx

@@ -37,7 +37,7 @@ const getKnobs = () => {
   return { containerWidth, disabled, invalid, loading, error };
 };
 
-export const simple = () => {
+export const Simple = () => {
   const { containerWidth, ...otherProps } = getKnobs();
   return (
     <div style={{ width: containerWidth }}>
@@ -48,7 +48,7 @@ export const simple = () => {
   );
 };
 
-export const horizontalLayout = () => {
+export const HorizontalLayout = () => {
   const [checked, setChecked] = useState(false);
   const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]);
   const { containerWidth, ...otherProps } = getKnobs();

packages/grafana-ui/src/components/Forms/Form.story.tsx

@@ -120,11 +120,11 @@ const renderForm = (defaultValues?: Partial<FormDTO>) => (
   </Form>
 );
 
-export const basic = () => {
+export const Basic = () => {
   return <>{renderForm()}</>;
 };
 
-export const defaultValues = () => {
+export const DefaultValues = () => {
   const defaultValues = [
     {
       name: 'Roger Waters',
@@ -162,7 +162,7 @@ export const defaultValues = () => {
   );
 };
 
-export const asyncValidation = () => {
+export const AsyncValidation = () => {
   const passAsyncValidation = boolean('Pass username validation', true);
   return (
     <>

packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx

@@ -4,7 +4,7 @@ import { withKnobs, object } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory';
 import { UseState } from '../../../../utils/storybook/UseState';
 import { SelectableValue } from '@grafana/data';
-import { Select, AsyncSelect } from './Select';
+import { Select, AsyncSelect as AsyncSelectComponent } from './Select';
 
 export default {
   title: 'Forms/Legacy/Select',
@@ -70,22 +70,19 @@ export const withAllowCustomValue = () => {
   );
 };
 
-export const asyncSelect = () => {
+export const AsyncSelect = () => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [value, setValue] = useState<SelectableValue<any>>();
-  const loadAsyncOptions = useCallback(
-    inputValue => {
-      return new Promise<Array<SelectableValue<string>>>(resolve => {
-        setTimeout(() => {
-          setIsLoading(false);
-          resolve(options.filter(option => option.label && option.label.includes(inputValue)));
-        }, 1000);
-      });
-    },
-    [value]
-  );
+  const loadAsyncOptions = useCallback(inputValue => {
+    return new Promise<Array<SelectableValue<string>>>(resolve => {
+      setTimeout(() => {
+        setIsLoading(false);
+        resolve(options.filter(option => option.label && option.label.includes(inputValue)));
+      }, 1000);
+    });
+  }, []);
   return (
-    <AsyncSelect
+    <AsyncSelectComponent
       value={value}
       defaultOptions
       width={20}

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.story.tsx

@@ -16,7 +16,7 @@ export default {
 
 const sizes: RadioButtonSize[] = ['sm', 'md'];
 
-export const simple = () => {
+export const Simple = () => {
   const [selected, setSelected] = useState('graphite');
   const BEHAVIOUR_GROUP = 'Behaviour props';
   const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
@@ -42,7 +42,7 @@ export const simple = () => {
   );
 };
 
-export const fullWidth = () => {
+export const FullWidth = () => {
   const [selected, setSelected] = useState('elastic');
   const BEHAVIOUR_GROUP = 'Behaviour props';
   const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);

packages/grafana-ui/src/components/Icon/Icon.story.tsx

@@ -61,7 +61,7 @@ const IconWrapper: React.FC<{ name: IconName }> = ({ name }) => {
 
 const icons = getAvailableIcons().sort((a, b) => a.localeCompare(b));
 
-export const iconsOverview = () => {
+export const IconsOverview = () => {
   const [filter, setFilter] = useState('');
 
   const searchIcon = (event: ChangeEvent<HTMLInputElement>) => {

packages/grafana-ui/src/components/IconButton/IconButton.story.tsx

@@ -15,7 +15,7 @@ export default {
   },
 };
 
-export const simple = () => {
+export const Simple = () => {
   const theme = useTheme();
 
   return (

packages/grafana-ui/src/components/Input/Input.story.tsx

@@ -17,7 +17,7 @@ export default {
   },
 };
 
-export const simple = () => {
+export const Simple = () => {
   const prefixSuffixOpts = {
     None: null,
     Text: '$',
@@ -96,7 +96,7 @@ export const simple = () => {
   );
 };
 
-export const withFieldValidation = () => {
+export const WithFieldValidation = () => {
   const [value, setValue] = useState('');
 
   return (

packages/grafana-ui/src/components/Modal/Modal.story.tsx

@@ -58,7 +58,7 @@ const tabs = [
   { label: '3rd child', value: 'third', active: false },
 ];
 
-export const withTabs = () => {
+export const WithTabs = () => {
   const [activeTab, setActiveTab] = useState('first');
   const modalHeader = (
     <ModalTabsHeader

packages/grafana-ui/src/components/Select/Select.story.tsx

@@ -87,7 +87,7 @@ const getDynamicProps = () => {
   };
 };
 
-export const basic = () => {
+export const Basic = () => {
   const [value, setValue] = useState<SelectableValue<string>>();
 
   return (
@@ -107,7 +107,7 @@ export const basic = () => {
 /**
  * Uses plain values instead of SelectableValue<T>
  */
-export const basicSelectPlainValue = () => {
+export const BasicSelectPlainValue = () => {
   const [value, setValue] = useState<string>();
   return (
     <>
@@ -158,7 +158,7 @@ export const SelectWithOptionDescriptions = () => {
 /**
  * Uses plain values instead of SelectableValue<T>
  */
-export const multiPlainValue = () => {
+export const MultiPlainValue = () => {
   const [value, setValue] = useState<string[]>();
 
   return (
@@ -175,7 +175,7 @@ export const multiPlainValue = () => {
   );
 };
 
-export const multiSelect = () => {
+export const MultiSelectBasic = () => {
   const [value, setValue] = useState<Array<SelectableValue<string>>>([]);
 
   return (
@@ -193,7 +193,7 @@ export const multiSelect = () => {
   );
 };
 
-export const multiSelectAsync = () => {
+export const MultiSelectAsync = () => {
   const [value, setValue] = useState<Array<SelectableValue<string>>>();
 
   return (
@@ -209,7 +209,7 @@ export const multiSelectAsync = () => {
     />
   );
 };
-export const buttonSelect = () => {
+export const ButtonSelectBasic = () => {
   const [value, setValue] = useState<SelectableValue<string>>();
   const icon = getIconKnob();
   return (
@@ -227,7 +227,7 @@ export const buttonSelect = () => {
   );
 };
 
-export const basicSelectAsync = () => {
+export const BasicSelectAsync = () => {
   const [value, setValue] = useState<SelectableValue<string>>();
 
   return (
@@ -243,7 +243,7 @@ export const basicSelectAsync = () => {
   );
 };
 
-export const customizedControl = () => {
+export const CustomizedControl = () => {
   const [value, setValue] = useState<SelectableValue<string>>();
 
   return (
@@ -266,7 +266,7 @@ export const customizedControl = () => {
   );
 };
 
-export const autoMenuPlacement = () => {
+export const AutoMenuPlacement = () => {
   const [value, setValue] = useState<SelectableValue<string>>();
 
   return (
@@ -285,7 +285,7 @@ export const autoMenuPlacement = () => {
   );
 };
 
-export const customValueCreation = () => {
+export const CustomValueCreation = () => {
   const [value, setValue] = useState<SelectableValue<string>>();
   const [customOptions, setCustomOptions] = useState<Array<SelectableValue<string>>>([]);
   const options = generateOptions();

packages/grafana-ui/src/components/Switch/Switch.story.tsx

@@ -15,7 +15,7 @@ export default {
   },
 };
 
-export const controlled = () => {
+export const Controlled = () => {
   const [checked, setChecked] = useState(false);
   const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]);
   const BEHAVIOUR_GROUP = 'Behaviour props';
@@ -23,7 +23,7 @@ export const controlled = () => {
   return <Switch value={checked} disabled={disabled} onChange={onChange} />;
 };
 
-export const uncontrolled = () => {
+export const Uncontrolled = () => {
   const BEHAVIOUR_GROUP = 'Behaviour props';
   const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
   return <Switch disabled={disabled} />;