From 7dc7619007ec423a2d31a126ff143de12daccea9 Mon Sep 17 00:00:00 2001
From: Shaun Lloyd <shaun@chromatic.com>
Date: Fri, 12 Jan 2024 15:12:34 -0500
Subject: [PATCH 1/8] Remove use of React.FC

---
 .../src/components/ActionBar/ActionBar.tsx    |  4 +--
 .../components/src/components/Badge/Badge.tsx |  6 ++---
 .../ErrorFormatter/ErrorFormatter.tsx         |  9 +++++--
 .../src/components/Loader/Loader.tsx          | 11 +++-----
 .../src/components/ScrollArea/ScrollArea.tsx  |  5 ++--
 code/ui/components/src/components/bar/bar.tsx | 25 ++++++++++++-------
 .../components/src/components/bar/button.tsx  |  3 +--
 .../src/components/bar/separator.tsx          |  7 +++---
 .../src/components/brand/StorybookIcon.tsx    |  3 +--
 .../src/components/brand/StorybookLogo.tsx    |  7 +++---
 .../src/components/form/field/field.tsx       |  4 +--
 .../src/components/form/input/input.tsx       |  4 +--
 .../components/placeholder/placeholder.tsx    |  3 +--
 .../src/components/spaced/Spaced.tsx          |  3 +--
 .../syntaxhighlighter/syntaxhighlighter.tsx   |  4 +--
 .../src/components/tooltip/ListItem.tsx       |  8 +++---
 .../components/tooltip/TooltipLinkList.tsx    | 16 +++++++-----
 .../src/components/tooltip/TooltipMessage.tsx |  4 +--
 .../src/components/tooltip/TooltipNote.tsx    |  3 +--
 .../src/components/tooltip/WithTooltip.tsx    | 22 +++++++++-------
 .../components/typography/elements/Link.tsx   | 11 ++++----
 .../src/components/typography/link/link.tsx   |  8 +++---
 22 files changed, 90 insertions(+), 80 deletions(-)

diff --git a/code/ui/components/src/components/ActionBar/ActionBar.tsx b/code/ui/components/src/components/ActionBar/ActionBar.tsx
index 8519b47e47c1..c97d09598e83 100644
--- a/code/ui/components/src/components/ActionBar/ActionBar.tsx
+++ b/code/ui/components/src/components/ActionBar/ActionBar.tsx
@@ -1,4 +1,4 @@
-import type { FC, MouseEvent, ReactElement } from 'react';
+import type { MouseEvent, ReactElement } from 'react';
 import React from 'react';
 
 import { styled } from '@storybook/theming';
@@ -66,7 +66,7 @@ export interface ActionBarProps {
   actionItems: ActionItem[];
 }
 
-export const ActionBar: FC<ActionBarProps> = ({ actionItems, ...props }) => (
+export const ActionBar = ({ actionItems, ...props }: ActionBarProps) => (
   <Container {...props}>
     {actionItems.map(({ title, className, onClick, disabled }, index: number) => (
       // eslint-disable-next-line react/no-array-index-key
diff --git a/code/ui/components/src/components/Badge/Badge.tsx b/code/ui/components/src/components/Badge/Badge.tsx
index bcb4d3b01b50..f9d1c9b91ebb 100644
--- a/code/ui/components/src/components/Badge/Badge.tsx
+++ b/code/ui/components/src/components/Badge/Badge.tsx
@@ -1,4 +1,3 @@
-import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
@@ -80,10 +79,11 @@ const BadgeWrapper = styled.div<BadgeProps>(
   }
 );
 
-export interface BadgeProps extends PropsWithChildren {
+export interface BadgeProps {
   status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
+  children?: React.ReactNode;
 }
 
-export const Badge: FC<BadgeProps> = ({ ...props }) => {
+export const Badge = ({ ...props }: BadgeProps) => {
   return <BadgeWrapper {...props} />;
 };
diff --git a/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx b/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx
index 5204ceb6f9aa..99a97f33871f 100644
--- a/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx
+++ b/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx
@@ -1,5 +1,5 @@
 import { global } from '@storybook/global';
-import type { FC } from 'react';
+
 import React, { Fragment } from 'react';
 import { styled } from '@storybook/theming';
 
@@ -20,7 +20,12 @@ const firstLineRegex = /(Error): (.*)\n/;
 const linesRegexChromium = /at (?:(.*) )?\(?(.+)\)?/;
 const linesRegexFirefox = /([^@]+)?(?:\/<)?@(.+)?/;
 const linesRegexSafari = /([^@]+)?@(.+)?/;
-export const ErrorFormatter: FC<{ error: Error }> = ({ error }) => {
+
+export interface ErrorFormatterProps {
+  error: Error;
+}
+
+export const ErrorFormatter = ({ error }: ErrorFormatterProps) => {
   if (!error) {
     return <Fragment>This error has no stack or message</Fragment>;
   }
diff --git a/code/ui/components/src/components/Loader/Loader.tsx b/code/ui/components/src/components/Loader/Loader.tsx
index c4f89c572a5d..537063c48fd5 100644
--- a/code/ui/components/src/components/Loader/Loader.tsx
+++ b/code/ui/components/src/components/Loader/Loader.tsx
@@ -1,5 +1,5 @@
 import { transparentize } from 'polished';
-import type { ComponentProps, FC } from 'react';
+import type { ComponentProps } from 'react';
 import React from 'react';
 import { styled, keyframes } from '@storybook/theming';
 import { Icons } from '../icon/icon';
@@ -98,18 +98,13 @@ interface Progress {
   };
 }
 
-interface LoaderProps {
+interface LoaderProps extends ComponentProps<typeof LoaderWrapper> {
   progress?: Progress;
   error?: Error;
   size?: number;
 }
 
-export const Loader: FC<LoaderProps & ComponentProps<typeof ProgressWrapper>> = ({
-  progress,
-  error,
-  size,
-  ...props
-}) => {
+export const Loader = ({ progress, error, size, ...props }: LoaderProps) => {
   if (error) {
     return (
       <ProgressWrapper aria-label={error.toString()} aria-live="polite" role="status" {...props}>
diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx
index b06fff3f5ec4..f3f965af8783 100644
--- a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx
+++ b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
@@ -76,14 +75,14 @@ const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb)(({ theme }) => ({
   },
 }));
 
-export const ScrollArea: FC<ScrollAreaProps> = ({
+export const ScrollArea = ({
   children,
   horizontal = false,
   vertical = false,
   offset = 2,
   scrollbarSize = 6,
   className,
-}) => (
+}: ScrollAreaProps) => (
   <ScrollAreaRoot scrollbarsize={scrollbarSize} offset={offset} className={className}>
     <ScrollAreaViewport>{children}</ScrollAreaViewport>
     {horizontal && (
diff --git a/code/ui/components/src/components/bar/bar.tsx b/code/ui/components/src/components/bar/bar.tsx
index bdbb60757f38..e431a7dccd92 100644
--- a/code/ui/components/src/components/bar/bar.tsx
+++ b/code/ui/components/src/components/bar/bar.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps, FC } from 'react';
+import type { ComponentProps } from 'react';
 import React, { Children } from 'react';
 import { styled } from '@storybook/theming';
 
@@ -39,11 +39,11 @@ export const Side = styled.div<SideProps>(
 );
 Side.displayName = 'Side';
 
-const UnstyledBar: FC<ComponentProps<typeof ScrollArea> & { scrollable?: boolean }> = ({
-  children,
-  className,
-  scrollable,
-}) =>
+interface UnstyledBarProps extends ComponentProps<typeof ScrollArea> {
+  scrollable?: boolean;
+}
+
+const UnstyledBar = ({ children, className, scrollable }: UnstyledBarProps) =>
   scrollable ? (
     <ScrollArea vertical={false} className={className}>
       {children}
@@ -51,7 +51,11 @@ const UnstyledBar: FC<ComponentProps<typeof ScrollArea> & { scrollable?: boolean
   ) : (
     <div className={className}>{children}</div>
   );
-export const Bar = styled(UnstyledBar)<{ border?: boolean; scrollable?: boolean }>(
+
+export interface BarProps extends UnstyledBarProps {
+  border?: boolean;
+}
+export const Bar = styled(UnstyledBar)<BarProps>(
   ({ theme, scrollable = true }) => ({
     color: theme.barTextColor,
     width: '100%',
@@ -70,7 +74,10 @@ export const Bar = styled(UnstyledBar)<{ border?: boolean; scrollable?: boolean
 );
 Bar.displayName = 'Bar';
 
-const BarInner = styled.div<{ bgColor: string }>(({ bgColor }) => ({
+interface BarInnerProps {
+  bgColor?: string;
+}
+const BarInner = styled.div<BarInnerProps>(({ bgColor }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   position: 'relative',
@@ -85,7 +92,7 @@ export interface FlexBarProps extends ComponentProps<typeof Bar> {
   backgroundColor?: string;
 }
 
-export const FlexBar: FC<FlexBarProps> = ({ children, backgroundColor, ...rest }) => {
+export const FlexBar = ({ children, backgroundColor, ...rest }: FlexBarProps) => {
   const [left, right] = Children.toArray(children);
   return (
     <Bar {...rest}>
diff --git a/code/ui/components/src/components/bar/button.tsx b/code/ui/components/src/components/bar/button.tsx
index 0c45c0ba3fa6..68ce83036b59 100644
--- a/code/ui/components/src/components/bar/button.tsx
+++ b/code/ui/components/src/components/bar/button.tsx
@@ -2,7 +2,6 @@ import type {
   AnchorHTMLAttributes,
   ButtonHTMLAttributes,
   DetailedHTMLProps,
-  FC,
   ForwardedRef,
   ForwardRefExoticComponent,
   ReactElement,
@@ -147,7 +146,7 @@ const IconButtonSkeletonWrapper = styled.div(() => ({
  * @deprecated
  * This component will be removed in Storybook 9.0
  * */
-export const IconButtonSkeleton: FC = () => (
+export const IconButtonSkeleton = () => (
   <IconButtonSkeletonWrapper>
     <IconPlaceholder />
   </IconButtonSkeletonWrapper>
diff --git a/code/ui/components/src/components/bar/separator.tsx b/code/ui/components/src/components/bar/separator.tsx
index 6a24a11d3386..66ade31f3241 100644
--- a/code/ui/components/src/components/bar/separator.tsx
+++ b/code/ui/components/src/components/bar/separator.tsx
@@ -1,6 +1,10 @@
 import React, { Fragment } from 'react';
 import { styled } from '@storybook/theming';
 
+export interface SeparatorProps {
+  force?: boolean;
+}
+
 export const Separator = styled.span<SeparatorProps>(
   ({ theme }) => ({
     width: 1,
@@ -35,6 +39,3 @@ export const interleaveSeparators = (list: any[]) =>
       ),
     null
   );
-export interface SeparatorProps {
-  force?: boolean;
-}
diff --git a/code/ui/components/src/components/brand/StorybookIcon.tsx b/code/ui/components/src/components/brand/StorybookIcon.tsx
index 5b756ea3afc6..fc3ec8c00033 100644
--- a/code/ui/components/src/components/brand/StorybookIcon.tsx
+++ b/code/ui/components/src/components/brand/StorybookIcon.tsx
@@ -1,7 +1,6 @@
-import type { FC } from 'react';
 import React from 'react';
 
-export const StorybookIcon: FC = ({ ...props }) => (
+export const StorybookIcon = ({ ...props }): React.ReactNode => (
   <svg viewBox="0 0 64 64" {...props}>
     <title>Storybook icon</title>
     <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
diff --git a/code/ui/components/src/components/brand/StorybookLogo.tsx b/code/ui/components/src/components/brand/StorybookLogo.tsx
index b94c9e37f144..c83453436e20 100644
--- a/code/ui/components/src/components/brand/StorybookLogo.tsx
+++ b/code/ui/components/src/components/brand/StorybookLogo.tsx
@@ -1,9 +1,10 @@
-import type { FC } from 'react';
 import React from 'react';
 
-export const StorybookLogo: FC<{
+export interface StorybookLogoProps extends React.SVGAttributes<SVGSVGElement> {
   alt: string;
-}> = ({ alt, ...props }) => (
+}
+
+export const StorybookLogo = ({ alt, ...props }: StorybookLogoProps) => (
   <svg width="200px" height="40px" viewBox="0 0 200 40" {...props} role="img">
     {alt ? <title>{alt}</title> : null}
     <defs>
diff --git a/code/ui/components/src/components/form/field/field.tsx b/code/ui/components/src/components/form/field/field.tsx
index 6452a31e3444..19b21ae8d2f7 100644
--- a/code/ui/components/src/components/form/field/field.tsx
+++ b/code/ui/components/src/components/form/field/field.tsx
@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 
@@ -28,7 +28,7 @@ export interface FieldProps {
   label?: ReactNode;
 }
 
-export const Field: FC<FieldProps> = ({ label, children, ...props }) => (
+export const Field = ({ label, children, ...props }: FieldProps) => (
   <Wrapper {...props}>
     {label ? (
       <Label>
diff --git a/code/ui/components/src/components/form/input/input.tsx b/code/ui/components/src/components/form/input/input.tsx
index cf143915b426..0249a6e2e6e9 100644
--- a/code/ui/components/src/components/form/input/input.tsx
+++ b/code/ui/components/src/components/form/input/input.tsx
@@ -1,4 +1,4 @@
-import type { FC, HTMLProps, SelectHTMLAttributes } from 'react';
+import type { HTMLProps, SelectHTMLAttributes } from 'react';
 import React, { forwardRef } from 'react';
 import type { CSSObject, FunctionInterpolation } from '@storybook/theming';
 import { styled } from '@storybook/theming';
@@ -207,7 +207,7 @@ type TextareaProps = Omit<
   valid?: ValidationStates;
   height?: number;
 } & React.RefAttributes<HTMLTextAreaElement>;
-export const Textarea: FC<TextareaProps> = Object.assign(
+export const Textarea = Object.assign(
   styled(
     forwardRef<any, TextareaProps>(function Textarea({ size, valid, align, ...props }, ref) {
       return <TextareaAutoResize {...props} ref={ref} />;
diff --git a/code/ui/components/src/components/placeholder/placeholder.tsx b/code/ui/components/src/components/placeholder/placeholder.tsx
index 5b1b6e6e34c5..ad2367a46e01 100644
--- a/code/ui/components/src/components/placeholder/placeholder.tsx
+++ b/code/ui/components/src/components/placeholder/placeholder.tsx
@@ -1,4 +1,3 @@
-import type { FunctionComponent } from 'react';
 import React, { Children } from 'react';
 import { styled } from '@storybook/theming';
 
@@ -19,7 +18,7 @@ export interface PlaceholderProps {
   children?: React.ReactNode;
 }
 
-export const Placeholder: FunctionComponent<PlaceholderProps> = ({ children, ...props }) => {
+export const Placeholder = ({ children, ...props }: PlaceholderProps) => {
   const [title, desc] = Children.toArray(children);
   return (
     <Message {...props}>
diff --git a/code/ui/components/src/components/spaced/Spaced.tsx b/code/ui/components/src/components/spaced/Spaced.tsx
index 52f0ecf9d7c1..3c999f602455 100644
--- a/code/ui/components/src/components/spaced/Spaced.tsx
+++ b/code/ui/components/src/components/spaced/Spaced.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import React from 'react';
 import { styled, ignoreSsrWarning } from '@storybook/theming';
 
@@ -60,7 +59,7 @@ export interface SpacedProps {
   outer?: number | boolean;
 }
 
-export const Spaced: FC<SpacedProps> = ({ col, row, outer, children, ...rest }) => {
+export const Spaced = ({ col, row, outer, children, ...rest }: SpacedProps) => {
   const outerAmount = toNumber(typeof outer === 'number' || !outer ? outer : col || row);
 
   return (
diff --git a/code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.tsx
index e90f4c01480e..543f9146e5a1 100644
--- a/code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps, FC, MouseEvent } from 'react';
+import type { ComponentProps, MouseEvent } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { logger } from '@storybook/client-logger';
 import { styled } from '@storybook/theming';
@@ -106,7 +106,7 @@ const Wrapper = styled.div<WrapperProps>(
       : {}
 );
 
-const UnstyledScroller: FC<ComponentProps<typeof ScrollArea>> = ({ children, className }) => (
+const UnstyledScroller = ({ children, className }: ComponentProps<typeof ScrollArea>) => (
   <ScrollArea horizontal vertical className={className}>
     {children}
   </ScrollArea>
diff --git a/code/ui/components/src/components/tooltip/ListItem.tsx b/code/ui/components/src/components/tooltip/ListItem.tsx
index 404662a0b240..34921e65d5ae 100644
--- a/code/ui/components/src/components/tooltip/ListItem.tsx
+++ b/code/ui/components/src/components/tooltip/ListItem.tsx
@@ -1,4 +1,4 @@
-import type { FC, ReactNode, ComponentProps } from 'react';
+import type { ReactNode, ComponentProps } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 import memoize from 'memoizerific';
@@ -170,7 +170,7 @@ const getItemProps = memoize(100)((onClick, href, LinkWrapper) => {
   return result;
 });
 
-export type LinkWrapperType = FC<any>;
+export type LinkWrapperType = (props: any) => ReactNode;
 
 export interface ListItemProps extends Omit<ComponentProps<typeof Item>, 'href' | 'title'> {
   loading?: boolean;
@@ -185,7 +185,7 @@ export interface ListItemProps extends Omit<ComponentProps<typeof Item>, 'href'
   isIndented?: boolean;
 }
 
-const ListItem: FC<ListItemProps> = ({
+const ListItem = ({
   loading,
   title,
   center,
@@ -198,7 +198,7 @@ const ListItem: FC<ListItemProps> = ({
   onClick,
   LinkWrapper,
   ...rest
-}) => {
+}: ListItemProps) => {
   const itemProps = getItemProps(onClick, href, LinkWrapper);
   const commonProps = { active, disabled };
 
diff --git a/code/ui/components/src/components/tooltip/TooltipLinkList.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.tsx
index 347e6d291789..8c9d1b6564ad 100644
--- a/code/ui/components/src/components/tooltip/TooltipLinkList.tsx
+++ b/code/ui/components/src/components/tooltip/TooltipLinkList.tsx
@@ -1,4 +1,4 @@
-import type { FC, SyntheticEvent } from 'react';
+import type { SyntheticEvent } from 'react';
 import React, { useCallback } from 'react';
 import { styled } from '@storybook/theming';
 
@@ -23,12 +23,11 @@ export interface Link extends Omit<ListItemProps, 'onClick'> {
   onClick?: (event: SyntheticEvent, item: ListItemProps) => void;
 }
 
-export interface TooltipLinkListProps {
-  links: Link[];
-  LinkWrapper?: LinkWrapperType;
+interface ItemProps extends Link {
+  isIndented?: boolean;
 }
 
-const Item: FC<Link & { isIndented?: boolean }> = (props) => {
+const Item = (props: ItemProps) => {
   const { LinkWrapper, onClick: onClickFromProps, id, isIndented, ...rest } = props;
   const { title, href, active } = rest;
   const onClick = useCallback(
@@ -54,7 +53,12 @@ const Item: FC<Link & { isIndented?: boolean }> = (props) => {
   );
 };
 
-export const TooltipLinkList: FC<TooltipLinkListProps> = ({ links, LinkWrapper }) => {
+export interface TooltipLinkListProps {
+  links: Link[];
+  LinkWrapper?: LinkWrapperType;
+}
+
+export const TooltipLinkList = ({ links, LinkWrapper }: TooltipLinkListProps) => {
   const hasIcon = links.some((link) => link.icon);
   return (
     <List>
diff --git a/code/ui/components/src/components/tooltip/TooltipMessage.tsx b/code/ui/components/src/components/tooltip/TooltipMessage.tsx
index 0d4d7f79f477..1e47bb5481f5 100644
--- a/code/ui/components/src/components/tooltip/TooltipMessage.tsx
+++ b/code/ui/components/src/components/tooltip/TooltipMessage.tsx
@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 
@@ -41,7 +41,7 @@ export interface TooltipMessageProps {
   }[];
 }
 
-export const TooltipMessage: FC<TooltipMessageProps> = ({ title, desc, links }) => {
+export const TooltipMessage = ({ title, desc, links }: TooltipMessageProps) => {
   return (
     <MessageWrapper>
       <Message>
diff --git a/code/ui/components/src/components/tooltip/TooltipNote.tsx b/code/ui/components/src/components/tooltip/TooltipNote.tsx
index 0b9d49075504..71ce08bacb82 100644
--- a/code/ui/components/src/components/tooltip/TooltipNote.tsx
+++ b/code/ui/components/src/components/tooltip/TooltipNote.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 
@@ -21,6 +20,6 @@ export interface TooltipNoteProps {
   note: string;
 }
 
-export const TooltipNote: FC<TooltipNoteProps> = ({ note, ...props }) => {
+export const TooltipNote = ({ note, ...props }: TooltipNoteProps) => {
   return <Note {...props}>{note}</Note>;
 };
diff --git a/code/ui/components/src/components/tooltip/WithTooltip.tsx b/code/ui/components/src/components/tooltip/WithTooltip.tsx
index e76c898d6dd0..a95db5d76af2 100644
--- a/code/ui/components/src/components/tooltip/WithTooltip.tsx
+++ b/code/ui/components/src/components/tooltip/WithTooltip.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps, FC, ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import React, { useCallback, useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { styled } from '@storybook/theming';
@@ -44,7 +44,7 @@ export interface WithTooltipPureProps
 }
 
 // Pure, does not bind to the body
-const WithTooltipPure: FC<WithTooltipPureProps> = ({
+const WithTooltipPure = ({
   svg,
   trigger,
   closeOnOutsideClick,
@@ -66,7 +66,7 @@ const WithTooltipPure: FC<WithTooltipPureProps> = ({
   followCursor,
   onVisibleChange,
   ...props
-}) => {
+}: WithTooltipPureProps) => {
   const Container = svg ? TargetSvgContainer : TargetContainer;
   const {
     getArrowProps,
@@ -149,12 +149,16 @@ WithTooltipPure.defaultProps = {
   defaultVisible: false,
 };
 
-const WithToolTipState: FC<
-  Omit<WithTooltipPureProps, 'onVisibleChange'> & {
-    startOpen?: boolean;
-    onVisibleChange?: (visible: boolean) => void | boolean;
-  }
-> = ({ startOpen = false, onVisibleChange: onChange, ...rest }) => {
+export interface WithTooltipStateProps extends Omit<WithTooltipPureProps, 'onVisibleChange'> {
+  startOpen?: boolean;
+  onVisibleChange?: (visible: boolean) => void | boolean;
+}
+
+const WithToolTipState = ({
+  startOpen = false,
+  onVisibleChange: onChange,
+  ...rest
+}: WithTooltipStateProps) => {
   const [tooltipShown, setTooltipShown] = useState(startOpen);
   const onVisibilityChange = useCallback(
     (visibility: boolean) => {
diff --git a/code/ui/components/src/components/typography/elements/Link.tsx b/code/ui/components/src/components/typography/elements/Link.tsx
index 20706db00270..ace6beec1971 100644
--- a/code/ui/components/src/components/typography/elements/Link.tsx
+++ b/code/ui/components/src/components/typography/elements/Link.tsx
@@ -1,11 +1,10 @@
-import type { FC, AnchorHTMLAttributes } from 'react';
 import React from 'react';
 
-export const Link: FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({
-  href: input,
-  children,
-  ...props
-}) => {
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: React.ReactNode;
+}
+
+export const Link = ({ href: input, children, ...props }: LinkProps) => {
   const isStorybookPath = /^\//.test(input);
   const isAnchorUrl = /^#.*/.test(input);
   const href = isStorybookPath ? `./?path=${input}` : input;
diff --git a/code/ui/components/src/components/typography/link/link.tsx b/code/ui/components/src/components/typography/link/link.tsx
index fb26a03a0df4..4d7afec9a1c0 100644
--- a/code/ui/components/src/components/typography/link/link.tsx
+++ b/code/ui/components/src/components/typography/link/link.tsx
@@ -1,4 +1,4 @@
-import type { AnchorHTMLAttributes, FC, MouseEvent } from 'react';
+import type { AnchorHTMLAttributes, MouseEvent } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 import { darken } from 'polished';
@@ -175,7 +175,7 @@ const A = styled.a<LinkStylesProps>(
       : {}
 );
 
-export interface LinkProps extends LinkInnerProps, LinkStylesProps {
+export interface LinkProps extends LinkInnerProps, LinkStylesProps, AProps {
   cancel?: boolean;
   className?: string;
   style?: object;
@@ -183,7 +183,7 @@ export interface LinkProps extends LinkInnerProps, LinkStylesProps {
   href?: string;
 }
 
-export const Link: FC<LinkProps & AProps> = ({
+export const Link = ({
   cancel,
   children,
   onClick,
@@ -191,7 +191,7 @@ export const Link: FC<LinkProps & AProps> = ({
   containsIcon,
   className,
   ...rest
-}) => (
+}: LinkProps) => (
   <A
     {...rest}
     onClick={onClick && cancel ? (e) => cancelled(e, onClick) : onClick}

From ce56cc9c8aba7f952b2a76f3f04e017accbe0dd6 Mon Sep 17 00:00:00 2001
From: Shaun Lloyd <shaun@chromatic.com>
Date: Fri, 12 Jan 2024 15:23:29 -0500
Subject: [PATCH 2/8] Cast map of new icons

---
 code/ui/components/src/components/icon/icon.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/code/ui/components/src/components/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx
index 78850f5e7930..270431624e99 100644
--- a/code/ui/components/src/components/icon/icon.tsx
+++ b/code/ui/components/src/components/icon/icon.tsx
@@ -1,11 +1,14 @@
-import type { ComponentProps, FC } from 'react';
+import type { ComponentProps } from 'react';
 import React, { memo } from 'react';
+
 import * as StorybookIcons from '@storybook/icons';
 import { styled } from '@storybook/theming';
 import { deprecate, logger } from '@storybook/client-logger';
 
 export type IconType = keyof typeof icons;
-type NewIconTypes = (typeof icons)[IconType];
+type NewIconTypes = typeof icons[IconType];
+
+const NEW_ICON_MAP = StorybookIcons as Record<NewIconTypes, (props: unknown) => React.ReactNode>;
 
 const Svg = styled.svg`
   display: inline-block;
@@ -27,7 +30,7 @@ export interface IconsProps extends ComponentProps<typeof Svg> {
  * @deprecated No longer used, will be removed in Storybook 9.0
  * Please use the `@storybook/icons` package instead.
  * */
-export const Icons: FC<IconsProps> = ({ icon, useSymbol, ...props }: IconsProps) => {
+export const Icons = ({ icon, useSymbol, ...props }: IconsProps) => {
   deprecate(
     `Use of the deprecated Icons ${
       `(${icon})` || ''
@@ -42,8 +45,8 @@ export const Icons: FC<IconsProps> = ({ icon, useSymbol, ...props }: IconsProps)
     );
     return null;
   }
-  // TODO: Find a better way to type this component
-  const Icon: FC = (StorybookIcons as any)[findIcon];
+
+  const Icon = NEW_ICON_MAP[findIcon];
 
   return <Icon {...props} />;
 };

From a97a63d7caa63845d733b326daa0ac14342be31d Mon Sep 17 00:00:00 2001
From: Shaun Lloyd <shaun@chromatic.com>
Date: Fri, 12 Jan 2024 15:35:48 -0500
Subject: [PATCH 3/8] Fix prop types for StorybookIcon

---
 code/ui/components/src/components/brand/StorybookIcon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/ui/components/src/components/brand/StorybookIcon.tsx b/code/ui/components/src/components/brand/StorybookIcon.tsx
index fc3ec8c00033..b880d5bcefc7 100644
--- a/code/ui/components/src/components/brand/StorybookIcon.tsx
+++ b/code/ui/components/src/components/brand/StorybookIcon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const StorybookIcon = ({ ...props }): React.ReactNode => (
+export const StorybookIcon = (props: React.SVGAttributes<SVGElement>) => (
   <svg viewBox="0 0 64 64" {...props}>
     <title>Storybook icon</title>
     <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">

From a4fab8091a7b4a8fc473b21fe08651a2c0bb293d Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 24 Jan 2024 09:13:11 +0100
Subject: [PATCH 4/8] simplify LoaderProps

---
 code/ui/components/src/components/Loader/Loader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/ui/components/src/components/Loader/Loader.tsx b/code/ui/components/src/components/Loader/Loader.tsx
index 537063c48fd5..84d00fe79a66 100644
--- a/code/ui/components/src/components/Loader/Loader.tsx
+++ b/code/ui/components/src/components/Loader/Loader.tsx
@@ -98,7 +98,7 @@ interface Progress {
   };
 }
 
-interface LoaderProps extends ComponentProps<typeof LoaderWrapper> {
+interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
   progress?: Progress;
   error?: Error;
   size?: number;

From caeabc3a612540bdd3cb40a73124e03cc7a43310 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 24 Jan 2024 09:50:40 +0100
Subject: [PATCH 5/8] simplify component types

---
 code/ui/components/src/components/bar/bar.tsx                | 3 ++-
 .../src/components/syntaxhighlighter/syntaxhighlighter.tsx   | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/code/ui/components/src/components/bar/bar.tsx b/code/ui/components/src/components/bar/bar.tsx
index e431a7dccd92..27c595c65a8a 100644
--- a/code/ui/components/src/components/bar/bar.tsx
+++ b/code/ui/components/src/components/bar/bar.tsx
@@ -2,6 +2,7 @@ import type { ComponentProps } from 'react';
 import React, { Children } from 'react';
 import { styled } from '@storybook/theming';
 
+import type { ScrollAreaProps } from '../ScrollArea/ScrollArea';
 import { ScrollArea } from '../ScrollArea/ScrollArea';
 
 export interface SideProps {
@@ -39,7 +40,7 @@ export const Side = styled.div<SideProps>(
 );
 Side.displayName = 'Side';
 
-interface UnstyledBarProps extends ComponentProps<typeof ScrollArea> {
+interface UnstyledBarProps extends ScrollAreaProps {
   scrollable?: boolean;
 }
 
diff --git a/code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.tsx
index 543f9146e5a1..42961976ac54 100644
--- a/code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps, MouseEvent } from 'react';
+import type { MouseEvent } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { logger } from '@storybook/client-logger';
 import { styled } from '@storybook/theming';
@@ -23,6 +23,7 @@ import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-ligh
 import { createElement } from 'react-syntax-highlighter/dist/esm/index';
 
 import { ActionBar } from '../ActionBar/ActionBar';
+import type { ScrollAreaProps } from '../ScrollArea/ScrollArea';
 import { ScrollArea } from '../ScrollArea/ScrollArea';
 
 import type {
@@ -106,7 +107,7 @@ const Wrapper = styled.div<WrapperProps>(
       : {}
 );
 
-const UnstyledScroller = ({ children, className }: ComponentProps<typeof ScrollArea>) => (
+const UnstyledScroller = ({ children, className }: ScrollAreaProps) => (
   <ScrollArea horizontal vertical className={className}>
     {children}
   </ScrollArea>

From a32225c737ebef12a8aca19b4d48663bc40748f1 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 24 Jan 2024 10:05:34 +0100
Subject: [PATCH 6/8] fix unused import

---
 code/ui/components/src/components/Loader/Loader.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/ui/components/src/components/Loader/Loader.tsx b/code/ui/components/src/components/Loader/Loader.tsx
index 84d00fe79a66..c4fc4eb68e86 100644
--- a/code/ui/components/src/components/Loader/Loader.tsx
+++ b/code/ui/components/src/components/Loader/Loader.tsx
@@ -1,5 +1,4 @@
 import { transparentize } from 'polished';
-import type { ComponentProps } from 'react';
 import React from 'react';
 import { styled, keyframes } from '@storybook/theming';
 import { Icons } from '../icon/icon';

From d21c368f2da9fc8fbd4ae4bd9ce8e5f3e2447333 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 24 Jan 2024 12:53:55 +0100
Subject: [PATCH 7/8] Fix failing type compilation

---
 code/ui/components/src/components/brand/StorybookLogo.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/ui/components/src/components/brand/StorybookLogo.tsx b/code/ui/components/src/components/brand/StorybookLogo.tsx
index c83453436e20..aafcc0aa1149 100644
--- a/code/ui/components/src/components/brand/StorybookLogo.tsx
+++ b/code/ui/components/src/components/brand/StorybookLogo.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-export interface StorybookLogoProps extends React.SVGAttributes<SVGSVGElement> {
+type StorybookLogoProps = {
   alt: string;
-}
+} & React.SVGAttributes<SVGSVGElement>;
 
 export const StorybookLogo = ({ alt, ...props }: StorybookLogoProps) => (
   <svg width="200px" height="40px" viewBox="0 0 200 40" {...props} role="img">

From c3c503a49ace1d9eec692cf06c73b84a4c019b57 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 25 Jan 2024 11:08:05 +0100
Subject: [PATCH 8/8] fix types, simplify Link

---
 code/ui/components/src/components/icon/icon.tsx   |  2 +-
 .../src/components/typography/elements/Link.tsx   | 15 ++++-----------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/code/ui/components/src/components/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx
index 270431624e99..b0164ef2a276 100644
--- a/code/ui/components/src/components/icon/icon.tsx
+++ b/code/ui/components/src/components/icon/icon.tsx
@@ -6,7 +6,7 @@ import { styled } from '@storybook/theming';
 import { deprecate, logger } from '@storybook/client-logger';
 
 export type IconType = keyof typeof icons;
-type NewIconTypes = typeof icons[IconType];
+type NewIconTypes = (typeof icons)[IconType];
 
 const NEW_ICON_MAP = StorybookIcons as Record<NewIconTypes, (props: unknown) => React.ReactNode>;
 
diff --git a/code/ui/components/src/components/typography/elements/Link.tsx b/code/ui/components/src/components/typography/elements/Link.tsx
index ace6beec1971..dbb48f48a149 100644
--- a/code/ui/components/src/components/typography/elements/Link.tsx
+++ b/code/ui/components/src/components/typography/elements/Link.tsx
@@ -1,18 +1,11 @@
 import React from 'react';
 
-export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  children: React.ReactNode;
-}
-
-export const Link = ({ href: input, children, ...props }: LinkProps) => {
+export const Link = ({ href: input, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
   const isStorybookPath = /^\//.test(input);
-  const isAnchorUrl = /^#.*/.test(input);
   const href = isStorybookPath ? `./?path=${input}` : input;
+
+  const isAnchorUrl = /^#.*/.test(input);
   const target = isAnchorUrl ? '_self' : '_top';
 
-  return (
-    <a href={href} target={target} {...props}>
-      {children}
-    </a>
-  );
+  return <a href={href} target={target} {...props} />;
 };