Upgrade to Foundry v4 (#1173)

* Upgrade all dependencies to their latest minor

* Fix all new lint errors

* Fix most new lint warnings

* Migrate Sidebar to TypeScript

* Fix the version of axe-core

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = require('@sumup/foundry/eslint')(
   },
   {
     parserOptions: {
-      project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
+      project: ['./packages/*/tsconfig.json', './tsconfig.eslint.json'],
       tsconfigRootDir: __dirname,
     },
     overrides: [
@@ -42,6 +42,9 @@ module.exports = require('@sumup/foundry/eslint')(
           'notice/notice': 'off',
           '@typescript-eslint/no-unused-vars': 'off',
           'prettier/prettier': 'off',
+          'no-unused-vars': 'off',
+          'react/prop-types': 'off',
+          'no-console': 'off',
         },
       },
       {
@@ -54,6 +57,7 @@ module.exports = require('@sumup/foundry/eslint')(
           // that should not be transformed.
           'consistent-return': 'off',
           'no-console': 'off',
+          '@typescript-eslint/no-explicit-any': 'off',
           '@typescript-eslint/no-unsafe-call': 'off',
           '@typescript-eslint/no-unsafe-assignment': 'off',
           '@typescript-eslint/no-unsafe-member-access': 'off',

packages/circuit-ui/cli/index.ts

@@ -58,6 +58,7 @@ yargs
   .help()
   .version().argv;
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function execute(command: CommandType, args: any): void {
   const commands = { migrate };
   const commandFn = commands[command];

packages/circuit-ui/cli/migrate/icons-v2.ts

@@ -287,9 +287,9 @@ function handleIconRenamed(
         [
           `The "${oldIconName}" icon has been renamed to "${newIconName}",`,
           `and should only be used in the context of the ${productName}`,
-          `product/feature.`,
-          `If you have doubts about your use of the icon, file an issue or`,
-          `contact the Design System team.`,
+          'product/feature.',
+          'If you have doubts about your use of the icon, file an issue or',
+          'contact the Design System team.',
           `\nin ${filePath}`,
         ].join(' '),
       ),
@@ -367,8 +367,8 @@ function handleIconDefaultSize(
           }
 
           const actionMessage = [
-            `Verify your page with the 24px icon size, and request a new 16px size`,
-            `from the Design System team if needed.`,
+            'Verify your page with the 24px icon size, and request a new 16px size',
+            'from the Design System team if needed.',
             `\nin ${filePath}`,
           ];
 

packages/circuit-ui/cli/migrate/theme-border-radius.ts

@@ -26,12 +26,12 @@ const transform: Transform = (file, api) => {
     ['theme.borderRadius.giga', 'theme.borderRadius.byte'],
     ['theme.borderRadius.tera', 'theme.borderRadius.byte'],
     ['theme.borderRadius.peta', 'theme.borderRadius.kilo'],
-    ['theme.borderRadius.kilo', `'1px'`],
+    ['theme.borderRadius.kilo', "'1px'"],
     ['p.theme.borderRadius.mega', 'p.theme.borderRadius.bit'],
     ['p.theme.borderRadius.giga', 'p.theme.borderRadius.byte'],
     ['p.theme.borderRadius.tera', 'p.theme.borderRadius.byte'],
     ['p.theme.borderRadius.peta', 'p.theme.borderRadius.kilo'],
-    ['p.theme.borderRadius.kilo', `'1px'`],
+    ['p.theme.borderRadius.kilo', "'1px'"],
   ];
 
   mappings.forEach(([prevValue, nextValue]) =>

packages/circuit-ui/components/Anchor/Anchor.stories.tsx

@@ -32,12 +32,12 @@ export const AsLink = (args: AnchorProps) => <Anchor {...args} />;
 
 AsLink.args = {
   href: 'https://opensource.sumup.com',
-  children: `View SumUp's OSS projects`,
+  children: "View SumUp's OSS projects",
 };
 
 export const AsButton = (args: AnchorProps) => <Anchor {...args} />;
 
 AsButton.args = {
   onClick: () => alert('Hello'),
-  children: `Say hello`,
+  children: 'Say hello',
 };

packages/circuit-ui/components/Anchor/Anchor.tsx

@@ -45,6 +45,7 @@ export interface BaseProps extends BodyProps {
   /**
    * The ref to the HTML DOM element, it can be a button an anchor or a span, typed as any for now because of complex js manipulation with styled components
    */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ref?: Ref<any>;
 }
 type LinkElProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'>;

packages/circuit-ui/components/Avatar/Avatar.tsx

@@ -46,8 +46,10 @@ const avatarSizes = {
 };
 
 const placeholders = {
-  object: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 96 96"><path fill="white" d="M30 25c0-4.9706 4.0294-9 9-9s9 4.0294 9 9-4.0294 9-9 9-9-4.0294-9-9zM41.1571 60.5691L30.6742 48.3905c-1.6438-1.9097-4.6225-1.8422-6.1782.1399L8 69.5483v12.4515c0 3.3137 2.6863 6 6 6h5.9592l21.1979-27.4307zM70.4856 32.878c1.5553-2.002 4.5569-2.0705 6.202-.1417l11.312 13.2623v36c0 3.3137-2.6863 6-6 6H27.6611L70.4856 32.878z"/></svg>`,
-  identity: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 96 96"><path fill="white" d="M48 18c-7.732 0-14 6.268-14 14s6.268 14 14 14 14-6.268 14-14-6.268-14-14-14zM47.9998 88C61.53 88 73.4913 81.2822 80.73 71c-7.2387-10.2822-19.2-17-32.7303-17-13.5302 0-25.4914 6.7178-32.7302 17 7.2388 10.2822 19.2 17 32.7303 17z"/></svg>`,
+  object:
+    '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 96 96"><path fill="white" d="M30 25c0-4.9706 4.0294-9 9-9s9 4.0294 9 9-4.0294 9-9 9-9-4.0294-9-9zM41.1571 60.5691L30.6742 48.3905c-1.6438-1.9097-4.6225-1.8422-6.1782.1399L8 69.5483v12.4515c0 3.3137 2.6863 6 6 6h5.9592l21.1979-27.4307zM70.4856 32.878c1.5553-2.002 4.5569-2.0705 6.202-.1417l11.312 13.2623v36c0 3.3137-2.6863 6-6 6H27.6611L70.4856 32.878z"/></svg>',
+  identity:
+    '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 96 96"><path fill="white" d="M48 18c-7.732 0-14 6.268-14 14s6.268 14 14 14 14-6.268 14-14-6.268-14-14-14zM47.9998 88C61.53 88 73.4913 81.2822 80.73 71c-7.2387-10.2822-19.2-17-32.7303-17-13.5302 0-25.4914 6.7178-32.7302 17 7.2388 10.2822 19.2 17 32.7303 17z"/></svg>',
 };
 
 const baseStyles = ({

packages/circuit-ui/components/BaseStyles/BaseStylesService.ts

@@ -13,14 +13,16 @@
  * limitations under the License.
  */
 
-import { css } from '@emotion/react';
+import { css, SerializedStyles } from '@emotion/react';
 
 import { StyleProps } from '../../styles/styled';
 import { typography } from '../../styles/style-mixins';
 
 const FONTS_BASE_URL = 'https://static.sumup.com/fonts/latin-greek-cyrillic';
 
-export const createBaseStyles = ({ theme }: StyleProps) => css`
+export const createBaseStyles = ({
+  theme,
+}: StyleProps): SerializedStyles => css`
   /**
    * Start downloading custom fonts as soon as possible.
    */

packages/circuit-ui/components/Body/Body.tsx

@@ -44,6 +44,7 @@ export interface BodyProps extends HTMLAttributes<HTMLParagraphElement> {
   /**
    * The ref to the HTML DOM element.
    */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ref?: Ref<any>;
 }
 

packages/circuit-ui/components/Button/Button.stories.tsx

@@ -41,7 +41,7 @@ export const Base = (args: ButtonProps) => <Button {...args} />;
 
 Base.args = {
   onClick: () => alert('Hello'),
-  children: `Say hello`,
+  children: 'Say hello',
 };
 
 export const Variants = (args: ButtonProps) => (

packages/circuit-ui/components/Button/Button.tsx

@@ -81,6 +81,7 @@ export interface BaseProps {
   /**
    The ref to the HTML DOM element
    */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   'ref'?: Ref<any>;
   'data-testid'?: string;
 }

packages/circuit-ui/components/Calendar/components/CalendarWrapper/CalendarWrapper.js

@@ -21,6 +21,7 @@ import {
   disableVisually,
   cx,
 } from '../../../../styles/style-mixins';
+import { childrenPropType } from '../../../../util/shared-prop-types';
 
 import calendarInheritStyles from './CalendarImportedStyles';
 
@@ -263,6 +264,10 @@ const CalendarWrapper = ({ children }) => (
   </div>
 );
 
+CalendarWrapper.propTypes = {
+  children: childrenPropType,
+};
+
 /**
  * @component
  */

packages/circuit-ui/components/Card/Card.tsx

@@ -27,6 +27,7 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * The ref to the HTML DOM element.
    */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ref?: Ref<any>;
 }
 

packages/circuit-ui/components/CardList/components/Item/Item.js

@@ -120,6 +120,10 @@ Item.propTypes = {
    * Content of the list item.
    */
   children: PropTypes.node.isRequired,
+  /**
+   * The onClick method to handle the click event.
+   */
+  onClick: PropTypes.func,
 };
 
 Item.defaultProps = {

packages/circuit-ui/components/Col/Col.js

@@ -17,6 +17,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import isPropValid from '@emotion/is-prop-valid';
+import { forwardRef } from 'react';
 
 import { getSpanStyles, getSkipStyles, getBreakPointStyles } from './utils';
 
@@ -28,18 +29,15 @@ const baseStyles = ({ theme, span, skip }) => css`
   ${getSpanStyles(theme, span)};
   ${getSkipStyles(theme, skip)};
 `;
+const StyledCol = styled('div', {
+  shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'span',
+})(baseStyles);
 
 /**
  * Content wrapping for the Grid component. Allows sizing based on provided
  * props.
  */
-const StyledCol = styled('div', {
-  shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'span',
-})(baseStyles);
-
-function Col({ children, ...props }) {
-  return <StyledCol {...props}>{children}</StyledCol>;
-}
+const Col = forwardRef((props, ref) => <StyledCol {...props} ref={ref} />);
 
 const sizingProp = PropTypes.oneOfType([
   PropTypes.object,
@@ -66,6 +64,8 @@ Col.propTypes = {
   span: sizingProp,
 };
 
+Col.displayName = 'Col';
+
 /**
  * @component
  */

packages/circuit-ui/components/Col/Col.spec.js

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+import { createRef } from 'react';
+
 import Col from '.';
 
 describe('Col', () => {
@@ -50,6 +52,13 @@ describe('Col', () => {
     });
   });
 
+  it('should forward a ref', () => {
+    const ref = createRef();
+    const { container } = render(<Col ref={ref} />);
+    const element = container.querySelector('div');
+    expect(ref.current).toBe(element);
+  });
+
   /**
    * Accessibility tests.
    */

packages/circuit-ui/components/Grid/Grid.js

@@ -15,6 +15,7 @@
 
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import { forwardRef } from 'react';
 
 const getBreakPointStyles = (theme, breakpoint) => {
   const config = theme.grid[breakpoint];
@@ -41,14 +42,14 @@ const baseStyles = ({ theme }) => css`
   ${getBreakPointStyles(theme, 'tera')};
 `;
 
+const StyledGrid = styled('div')(baseStyles);
+
 /**
  * A basic 12-column grid component.
  */
-const StyledGrid = styled('div')(baseStyles);
+const Grid = forwardRef((props, ref) => <StyledGrid {...props} ref={ref} />);
 
-function Grid({ children, ...props }) {
-  return <StyledGrid {...props}>{children}</StyledGrid>;
-}
+Grid.displayName = 'Grid';
 
 /**
  * @component

packages/circuit-ui/components/Grid/Grid.spec.js

@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+import { createRef } from 'react';
+
 import Grid from '.';
 
 describe('Grid', () => {
@@ -24,6 +26,13 @@ describe('Grid', () => {
     expect(actual).toMatchSnapshot();
   });
 
+  it('should forward a ref', () => {
+    const ref = createRef();
+    const { container } = render(<Grid ref={ref} />);
+    const element = container.querySelector('div');
+    expect(ref.current).toBe(element);
+  });
+
   /**
    * Accessibility tests.
    */

packages/circuit-ui/components/Headline/Headline.spec.tsx

@@ -22,15 +22,15 @@ describe('Headline', () => {
    * Style tests.
    */
   const elements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-  it.each(elements)(`should render as %s element`, (element) => {
+  it.each(elements)('should render as %s element', (element) => {
     const headline = create(
       <Headline as={element}>{`${element} headline`}</Headline>,
     );
     expect(headline).toMatchSnapshot();
   });
 
   const sizes = ['one', 'two', 'three', 'four'] as const;
-  it.each(sizes)(`should render with size %s`, (size) => {
+  it.each(sizes)('should render with size %s', (size) => {
     const headline = create(
       <Headline as="h2" {...{ size }}>{`${size} headline`}</Headline>,
     );

packages/circuit-ui/components/IconButton/IconButton.tsx

@@ -54,7 +54,11 @@ const sizeStyles = (size: IconButtonProps['size'] = 'giga') => (
  * as its only child.
  */
 export const IconButton = forwardRef(
-  ({ children, label, size, ...props }: IconButtonProps, ref?: Ref<any>) => {
+  (
+    { children, label, size, ...props }: IconButtonProps,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ref?: Ref<any>,
+  ) => {
     const child = Children.only(children);
     const iconSize = size === 'kilo' ? '16' : '24';
     const icon = cloneElement(child, {

packages/circuit-ui/components/ImageInput/ImageInput.stories.tsx

@@ -76,7 +76,8 @@ export const Stateful = (): JSX.Element => {
   /**
    * Fakes a network request that fails 30% of the time
    */
-  const uploadFile = (file) =>
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const uploadFile = (_file: File) =>
     // upload the file to storage
     new Promise<string>((resolve, reject) =>
       setTimeout(() => {
@@ -87,7 +88,7 @@ export const Stateful = (): JSX.Element => {
       }, 2000),
     );
 
-  const onChange = (file) => {
+  const onChange = (file: File) => {
     setError('');
     setImageUrl('');
     return uploadFile(file)

packages/circuit-ui/components/ModalContext/ModalContext.tsx

@@ -58,8 +58,10 @@ type ModalState<TProps extends BaseModalProps> = Omit<TProps, 'isOpen'> &
   StackItem & { component: ModalComponent<TProps> };
 
 type ModalContextValue = {
+  /* eslint-disable @typescript-eslint/no-explicit-any */
   setModal: (modal: ModalState<any>) => void;
   removeModal: (modal: ModalState<any>) => void;
+  /* eslint-enable @typescript-eslint/no-explicit-any */
 };
 
 export const ModalContext = createContext<ModalContextValue>({

packages/circuit-ui/components/Pagination/components/PageList/PageList.tsx

@@ -51,7 +51,7 @@ export const PageList: FC<PageListProps> = ({
   pages,
   currentPage,
   ...props
-}: PageListProps) => (
+}: PageListProps): JSX.Element => (
   <List role="list" {...props}>
     {pages.map((page) => {
       const isCurrent = currentPage === page;

packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.tsx

@@ -24,7 +24,7 @@ export interface PageSelectProps extends Omit<SelectProps, 'onChange'> {
   currentPage: number;
   totalPages: number;
   totalLabel?: (totalPages: number) => string;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 const TotalPages = styled('span')`

packages/circuit-ui/components/Popover/Popover.spec.tsx

@@ -119,7 +119,7 @@ describe('Popover', () => {
       expect(baseElement).toMatchSnapshot();
     });
 
-    it.each(placements)(`should render popover on %s`, (placement) => {
+    it.each(placements)('should render popover on %s', (placement) => {
       const { baseElement } = renderPopover({ ...baseProps, placement });
 
       expect(baseElement).toMatchSnapshot();