Chore: Better typings in `@grafana/ui` needed for react 18 (#64828)

* type changes needed for react 18

* pass empty props as generic

* move eslint ignore to correct line

packages/grafana-ui/src/components/Collapse/Collapse.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FunctionComponent, useState } from 'react';
+import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -105,7 +105,7 @@ export interface Props {
   className?: string;
 }
 
-export const ControlledCollapse: FunctionComponent<Props> = ({ isOpen, onToggle, ...otherProps }) => {
+export const ControlledCollapse = ({ isOpen, onToggle, ...otherProps }: React.PropsWithChildren<Props>) => {
   const [open, setOpen] = useState(isOpen);
   return (
     <Collapse

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

@@ -22,7 +22,10 @@ const meta: ComponentMeta<typeof Checkbox> = {
 
 export const Basic: ComponentStory<typeof Checkbox> = (args) => {
   const [checked, setChecked] = useState(false);
-  const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
+  const onChange = useCallback(
+    (e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked),
+    [setChecked]
+  );
   return (
     <div>
       <Checkbox value={checked} onChange={onChange} {...args} />

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

@@ -47,7 +47,10 @@ Simple.args = {
 
 export const HorizontalLayout: ComponentStory<typeof Field> = (args) => {
   const [checked, setChecked] = useState(false);
-  const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
+  const onChange = useCallback(
+    (e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked),
+    [setChecked]
+  );
   return (
     <div>
       <Field {...args}>

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

@@ -86,7 +86,7 @@ Basic.args = {
 export const AsyncSelect: ComponentStory<typeof AsyncSelectComponent> = (args) => {
   const [, updateArgs] = useArgs();
   const loadAsyncOptions = useCallback(
-    (inputValue) => {
+    (inputValue: string) => {
       return new Promise<Array<SelectableValue<string>>>((resolve) => {
         setTimeout(() => {
           updateArgs({ isLoading: false });

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

@@ -58,7 +58,10 @@ export const Controlled: ComponentStory<typeof Switch> = (args) => {
 
 export const Uncontrolled: ComponentStory<typeof Switch> = (args) => {
   const [checked, setChecked] = useState(args.value);
-  const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
+  const onChange = useCallback(
+    (e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked),
+    [setChecked]
+  );
   return <Switch value={checked} disabled={args.disabled} transparent={args.transparent} onChange={onChange} />;
 };
 

packages/grafana-ui/src/types/index.ts

@@ -1,7 +1,6 @@
 export * from './theme';
 export * from './input';
 export * from './completion';
-export * from './storybook';
 export * from './forms';
 export * from './icon';
 export * from './select';

packages/grafana-ui/src/types/storybook.ts

@@ -1,2 +0,0 @@
-export type Renderable = React.ComponentType | JSX.Element;
-export type RenderFunction = () => Renderable | Renderable[];

packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx

@@ -1,7 +1,6 @@
+import { DecoratorFn } from '@storybook/react';
 import React from 'react';
 
-import { RenderFunction } from '../../types';
-
 interface CenteredStoryProps {
   children: React.ReactNode;
   horizontal?: boolean;
@@ -23,13 +22,13 @@ const CenteredStory: React.FunctionComponent<CenteredStoryProps> = ({ horizontal
   );
 };
 
-export const withNotCenteredStory = (story: RenderFunction) => <CenteredStory>{story()}</CenteredStory>;
-export const withCenteredStory = (story: RenderFunction) => (
+export const withNotCenteredStory: DecoratorFn = (story) => <CenteredStory>{story()}</CenteredStory>;
+export const withCenteredStory: DecoratorFn = (story) => (
   <CenteredStory horizontal vertical>
     {story()}
   </CenteredStory>
 );
-export const withHorizontallyCenteredStory = (story: RenderFunction) => (
+export const withHorizontallyCenteredStory: DecoratorFn = (story) => (
   <CenteredStory horizontal>{story()}</CenteredStory>
 );
-export const withVerticallyCenteredStory = (story: RenderFunction) => <CenteredStory vertical>{story()}</CenteredStory>;
+export const withVerticallyCenteredStory: DecoratorFn = (story) => <CenteredStory vertical>{story()}</CenteredStory>;

packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx

@@ -1,9 +1,9 @@
+import { DecoratorFn } from '@storybook/react';
 import React from 'react';
 
 import { GlobalStyles, useTheme2 } from '../../themes';
-import { RenderFunction } from '../../types';
 
-const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
+const PaddedStory = ({ children }: React.PropsWithChildren<{}>) => {
   const theme = useTheme2();
 
   return (
@@ -22,4 +22,4 @@ const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
   );
 };
 
-export const withPaddedStory = (story: RenderFunction) => <PaddedStory>{story()}</PaddedStory>;
+export const withPaddedStory: DecoratorFn = (story) => <PaddedStory>{story()}</PaddedStory>;

packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx

@@ -1,8 +1,7 @@
+import { DecoratorFn } from '@storybook/react';
 import React from 'react';
 
-import { RenderFunction } from '../../types';
-
-const RightAlignedStory: React.FunctionComponent<{}> = ({ children }) => {
+const RightAlignedStory = ({ children }: React.PropsWithChildren<{}>) => {
   return (
     <div
       style={{
@@ -18,4 +17,4 @@ const RightAlignedStory: React.FunctionComponent<{}> = ({ children }) => {
   );
 };
 
-export const withRightAlignedStory = (story: RenderFunction) => <RightAlignedStory>{story()}</RightAlignedStory>;
+export const withRightAlignedStory: DecoratorFn = (story) => <RightAlignedStory>{story()}</RightAlignedStory>;

packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx

@@ -1,9 +1,7 @@
 import { css, cx } from '@emotion/css';
-import { StoryContext } from '@storybook/react';
+import { DecoratorFn } from '@storybook/react';
 import React from 'react';
 
-import { RenderFunction } from '../../types';
-
 interface Props {
   width?: number;
   height?: number;
@@ -45,7 +43,7 @@ const StoryContainer = ({ width, height, showBoundaries, children }: React.Props
   );
 };
 
-export const withStoryContainer = (story: RenderFunction, context: StoryContext) => {
+export const withStoryContainer: DecoratorFn = (story, context) => {
   return (
     <StoryContainer
       width={context.args.containerWidth}

packages/grafana-ui/src/utils/storybook/withTheme.tsx

@@ -1,3 +1,4 @@
+import { DecoratorFn } from '@storybook/react';
 import React from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
 
@@ -5,13 +6,12 @@ import { createTheme, GrafanaTheme2 } from '@grafana/data';
 
 import { GlobalStyles } from '../../themes/GlobalStyles/GlobalStyles';
 import { ThemeContext } from '../../themes/ThemeContext';
-import { RenderFunction } from '../../types';
 
 type SassThemeChangeHandler = (theme: GrafanaTheme2) => void;
-const ThemeableStory: React.FunctionComponent<{ handleSassThemeChange: SassThemeChangeHandler }> = ({
+const ThemeableStory = ({
   children,
   handleSassThemeChange,
-}) => {
+}: React.PropsWithChildren<{ handleSassThemeChange: SassThemeChangeHandler }>) => {
   const theme = createTheme({ colors: { mode: useDarkMode() ? 'dark' : 'light' } });
 
   handleSassThemeChange(theme);
@@ -49,6 +49,8 @@ export const renderComponentWithTheme = (component: React.ComponentType<any>, pr
   );
 };
 
-// eslint-disable-next-line react/display-name
-export const withTheme = (handleSassThemeChange: SassThemeChangeHandler) => (story: RenderFunction) =>
-  <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>;
+export const withTheme =
+  (handleSassThemeChange: SassThemeChangeHandler): DecoratorFn =>
+  // eslint-disable-next-line react/display-name
+  (story) =>
+    <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>;