Avoid React.FC, improve types and fix lint errors

src/components/AvatarList.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, FunctionComponent } from 'react';
+import React, { ComponentProps } from 'react';
 import { styled } from '@storybook/theming';
 
 import { Avatar, sizes } from './Avatar';
@@ -52,7 +52,7 @@ const Users = styled.ul`
   }
 `;
 
-export interface AvatarListProps {
+interface AvatarListProps {
   isLoading: boolean;
   users: {
     id: string;
@@ -64,7 +64,7 @@ export interface AvatarListProps {
 }
 
 // Either pass the full list of users, or a userCount if known
-export const AvatarList: FunctionComponent<AvatarListProps & ComponentProps<typeof Users>> = ({
+export const AvatarList = ({
   isLoading = false,
   users = [
     { id: 'loading', avatarUrl: null, name: 'loading' },
@@ -74,7 +74,7 @@ export const AvatarList: FunctionComponent<AvatarListProps & ComponentProps<type
   userCount = null,
   size = 'medium',
   ...props
-}) => {
+}: AvatarListProps & ComponentProps<typeof Users>) => {
   const count = userCount || users.length;
 
   return (

src/components/ButtonAction.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, FC } from 'react';
+import React, { ComponentProps, ReactNode } from 'react';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { typography, color } from './shared/styles';
@@ -9,7 +9,7 @@ import WithTooltip from './tooltip/WithTooltip';
 
 interface ButtonActionProps {
   icon: IconType;
-  children?: string;
+  children?: ReactNode;
   isActive?: boolean;
   isLoading?: boolean;
   loadingText?: string | null;
@@ -58,15 +58,15 @@ const StyledButton = styled.button<ButtonStylingProps>`
   }
 `;
 
-export const ButtonAction: FC<ButtonActionProps & ComponentProps<typeof InsideButtonAction>> = ({
+export const ButtonAction = ({
   children,
   icon,
   isActive = false,
   isLoading = false,
   loadingText = null,
   tooltip,
   ...rest
-}) => {
+}: ButtonActionProps & ComponentProps<typeof InsideButtonAction>) => {
   if (tooltip)
     return (
       <WithTooltip tooltip={<TooltipNote note={tooltip} />} hasChrome={false} tagName="span">
@@ -94,15 +94,15 @@ export const ButtonAction: FC<ButtonActionProps & ComponentProps<typeof InsideBu
   );
 };
 
-const InsideButtonAction: FC<ButtonActionProps & ComponentProps<typeof StyledButton>> = ({
+const InsideButtonAction = ({
   children,
   icon,
   isActive = false,
   isLoading = false,
   loadingText = null,
   tooltip,
   ...rest
-}) => (
+}: ButtonActionProps & ComponentProps<typeof StyledButton>) => (
   <StyledButton isActive={isActive} isLoading={isLoading} {...rest}>
     {icon && !isLoading && <Icon icon={icon} />}
     {isLoading && (

src/components/CodeSnippets.tsx

@@ -115,10 +115,7 @@ function SnippetList({ snippets }: { snippets: SnippetType[] }) {
   );
 }
 
-export function CodeSnippets({
-  snippets,
-  ...rest
-}: Props & ComponentProps<typeof Wrapper> & { children?: never }) {
+export function CodeSnippets({ snippets, ...rest }: Props & ComponentProps<typeof Wrapper>) {
   return (
     <Wrapper {...rest}>
       <Background>

src/components/Input.tsx

@@ -5,7 +5,6 @@ import React, {
   useState,
   forwardRef,
   ReactNode,
-  FC,
   ComponentProps,
   MutableRefObject,
 } from 'react';
@@ -18,15 +17,15 @@ import WithTooltip from './tooltip/WithTooltip';
 import { TooltipMessage } from './tooltip/TooltipMessage';
 
 // prettier-ignore
-const Label = styled.label<Pick<Props, 'appearance'>>`
+const Label = styled.label<Pick<PureInputProps, 'appearance'>>`
   font-weight: ${props => props.appearance !== 'code' && typography.weight.bold};
   font-family: ${props => props.appearance === 'code' && typography.type.code };
   font-size: ${props => props.appearance === 'code' ? typography.size.s1 - 1 : typography.size.s2 }px;
   line-height: ${props => props.appearance === 'code' ? 16 : 20 }px;
 `;
 
 // prettier-ignore
-const LabelWrapper = styled.div<Pick<Props, 'hideLabel'>>`
+const LabelWrapper = styled.div<Pick<PureInputProps, 'hideLabel'>>`
   margin-bottom: 8px;
 
   ${props => props.hideLabel && css`
@@ -64,7 +63,7 @@ const InputEl = styled.input`
   &:-webkit-autofill { -webkit-box-shadow: 0 0 0 3em ${color.lightest} inset; }
 `;
 
-const getStackLevelStyling = (props: Pick<Props, 'error' | 'stackLevel'>) => {
+const getStackLevelStyling = (props: Pick<PureInputProps, 'error' | 'stackLevel'>) => {
   const radius = 4;
   const stackLevelDefinedStyling = css`
     position: relative;
@@ -107,7 +106,7 @@ const getStackLevelStyling = (props: Pick<Props, 'error' | 'stackLevel'>) => {
 
 // prettier-ignore
 const InputWrapper = styled.div<
-  Pick<Props, 'error' | 'stackLevel' | 'appearance' | 'startingType' | 'icon'>
+  Pick<PureInputProps, 'error' | 'stackLevel' | 'appearance' | 'startingType' | 'icon'>
 >`
   display: inline-block;
   position: relative;
@@ -228,7 +227,7 @@ const InputWrapper = styled.div<
     `}
 `;
 // prettier-ignore
-const InputContainer = styled.div<Pick<Props, 'orientation'>>`
+const InputContainer = styled.div<Pick<PureInputProps, 'orientation'>>`
   ${props => props.orientation === 'horizontal' && css`
     display: table-row;
 
@@ -272,7 +271,7 @@ const getErrorMessage = ({
   error,
   value,
   lastErrorValue,
-}: Pick<Props, 'error' | 'value' | 'lastErrorValue'>) => {
+}: Pick<PureInputProps, 'error' | 'value' | 'lastErrorValue'>) => {
   let errorMessage = typeof error === 'function' ? error(value) : error;
   if (lastErrorValue) {
     if (value !== lastErrorValue) {
@@ -282,8 +281,30 @@ const getErrorMessage = ({
   return errorMessage;
 };
 
-// FC<Props & ComponentProps<typeof InputEl>>
-export const PureInput = forwardRef<HTMLInputElement, Props & ComponentProps<typeof InputEl>>(
+interface PureInputProps {
+  id: string;
+  value?: string;
+  appearance?: 'default' | 'pill' | 'code' | 'tertiary';
+  errorTooltipPlacement?: ComponentProps<typeof WithTooltip>['placement'];
+  stackLevel?: 'top' | 'middle' | 'bottom';
+  label: string;
+  hideLabel?: boolean;
+  orientation?: 'vertical' | 'horizontal';
+  icon?: ComponentProps<typeof Icon>['icon'];
+  error?: ReactNode | ((value: PureInputProps['value']) => ReactNode);
+  suppressErrorMessage?: boolean;
+  className?: string;
+  lastErrorValue?: string;
+  startingType?: string;
+  type?: string;
+  onActionClick?: (ev: React.MouseEvent<HTMLElement>) => void;
+  startFocused?: boolean;
+}
+
+export const PureInput = forwardRef<
+  HTMLInputElement,
+  PureInputProps & ComponentProps<typeof InputEl>
+>(
   (
     {
       id,
@@ -379,26 +400,7 @@ export const PureInput = forwardRef<HTMLInputElement, Props & ComponentProps<typ
     );
   }
 );
-
-interface Props {
-  id: string;
-  value?: string;
-  appearance?: 'default' | 'pill' | 'code' | 'tertiary';
-  errorTooltipPlacement?: ComponentProps<typeof WithTooltip>['placement'];
-  stackLevel?: 'top' | 'middle' | 'bottom';
-  label: string;
-  hideLabel?: boolean;
-  orientation?: 'vertical' | 'horizontal';
-  icon?: ComponentProps<typeof Icon>['icon'];
-  error?: ReactNode | Function;
-  suppressErrorMessage?: boolean;
-  className?: string;
-  lastErrorValue?: string;
-  startingType?: string;
-  type?: string;
-  onActionClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-  startFocused?: boolean;
-}
+PureInput.displayName = 'PureInput';
 
 export const Input = forwardRef<HTMLInputElement, ComponentProps<typeof PureInput>>(
   ({ type: startingType, startFocused, ...rest }, ref) => {
@@ -427,7 +429,7 @@ export const Input = forwardRef<HTMLInputElement, ComponentProps<typeof PureInpu
         inputRef.current.focus();
         didFocusOnStart.current = true;
       }
-    }, [inputRef, didFocusOnStart]);
+    }, [inputRef, startFocused, didFocusOnStart]);
 
     return (
       <PureInput
@@ -440,3 +442,4 @@ export const Input = forwardRef<HTMLInputElement, ComponentProps<typeof PureInpu
     );
   }
 );
+Input.displayName = 'Input';

src/components/Link.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { ComponentProps, forwardRef } from 'react';
 import { styled, css } from '@storybook/theming';
 import { darken } from 'polished';
 
@@ -174,28 +174,29 @@ const LinkComponentPicker = forwardRef<HTMLAnchorElement | HTMLButtonElement, Li
 );
 LinkComponentPicker.displayName = 'LinkComponentPicker';
 
-export const Link = forwardRef<HTMLAnchorElement | HTMLButtonElement, LinkProps>(
-  ({ children, withArrow, ...rest }, ref) => {
-    const content = (
-      <>
-        <LinkInner withArrow={withArrow}>
-          {children}
-          {withArrow && <Icon icon="arrowright" />}
-        </LinkInner>
-      </>
-    );
-
-    return (
-      <StyledLink
-        as={LinkComponentPicker}
-        ref={ref as React.ForwardedRef<HTMLAnchorElement>}
-        {...rest}
-      >
-        {content}
-      </StyledLink>
-    );
-  }
-);
+export const Link = forwardRef<
+  HTMLAnchorElement | HTMLButtonElement,
+  LinkProps & ComponentProps<typeof StyledLink>
+>(({ children, withArrow, ...rest }, ref) => {
+  const content = (
+    <>
+      <LinkInner withArrow={withArrow}>
+        {children}
+        {withArrow && <Icon icon="arrowright" />}
+      </LinkInner>
+    </>
+  );
+
+  return (
+    <StyledLink
+      as={LinkComponentPicker}
+      ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+      {...rest}
+    >
+      {content}
+    </StyledLink>
+  );
+});
 Link.displayName = 'Link';
 
 Link.defaultProps = {

src/components/LinkTabs.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, FC } from 'react';
+import React, { ComponentProps } from 'react';
 import { styled, css } from '@storybook/theming';
 import type { StyledComponent } from '@storybook/theming';
 
@@ -59,16 +59,16 @@ type ItemProps = {
   label: string;
 } & ComponentProps<typeof Tab>;
 
-interface Props {
+interface LinkTabsProps {
   isLoading?: boolean;
   items: ItemProps[];
 }
 
-export const LinkTabs: FC<Props & ComponentProps<typeof Wrapper>> = ({
+export const LinkTabs = ({
   isLoading = false,
   items = [],
   ...props
-}) => (
+}: LinkTabsProps & ComponentProps<typeof Wrapper>) => (
   <Wrapper {...props}>
     {items.map(({ key, label, ...item }) => (
       <li key={key}>

src/components/OutlineCTA.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { styled } from '@storybook/theming';
 
 import { breakpoint, color, spacing, typography } from './shared/styles';

src/components/Select.tsx

@@ -1,6 +1,6 @@
-import React, { ComponentProps, FC, FunctionComponent, ReactNode } from 'react';
+import React, { ComponentProps, FunctionComponent, ReactNode } from 'react';
 import { styled, css } from '@storybook/theming';
-import { color, typography, spacing } from './shared/styles';
+import { color, typography } from './shared/styles';
 import { jiggle } from './shared/animation';
 import { Icon } from './Icon';
 import { Spinner } from './Spinner';

src/components/ShadowBoxCTA.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, FC, ReactNode } from 'react';
+import React, { ComponentProps, ReactNode } from 'react';
 import { styled } from '@storybook/theming';
 
 import { breakpoint, spacing, typography } from './shared/styles';
@@ -55,18 +55,18 @@ const Action = styled.div`
   }
 `;
 
-interface Props {
+interface ShadowBoxCTAProps {
   headingText: ReactNode;
   messageText?: ReactNode;
   action: ReactNode;
 }
 
-export const ShadowBoxCTA: FC<Props & ComponentProps<typeof ShadowBoxCTAWrapper>> = ({
+export const ShadowBoxCTA = ({
   action,
   headingText,
   messageText,
   ...rest
-}) => (
+}: ShadowBoxCTAProps & ComponentProps<typeof ShadowBoxCTAWrapper>) => (
   <ShadowBoxCTAWrapper {...rest}>
     <TextWrapper>
       <HeadingText>{headingText}</HeadingText>