fix: Refactor interfaces to types (#1055)

.eslintrc.json

@@ -26,7 +26,7 @@
       "extends": [
         "plugin:react/recommended",
         "eslint-config-prettier",
-        "./.eslintrc.js.json",
+        "./.eslintrc.ts.json",
         "./.eslintrc.react.json",
         "plugin:mdx/overrides"
       ],
@@ -37,7 +37,7 @@
       "extends": [
         "plugin:react/recommended",
         "eslint-config-prettier",
-        "./.eslintrc.js.json",
+        "./.eslintrc.ts.json",
         "./.eslintrc.react.json"
       ],
       "files": ["*.js", "*.jsx"],
@@ -47,15 +47,15 @@
       "extends": [
         "plugin:react/recommended",
         "eslint-config-prettier",
-        "./.eslintrc.js.json",
+        "./.eslintrc.ts.json",
         "./.eslintrc.react.json"
       ],
       "files": ["*.ts", "*.tsx"],
       "parser": "@typescript-eslint/parser",
       "plugins": ["@typescript-eslint", "import", "jest"]
     },
     {
-      "extends": ["plugin:react/recommended", "eslint-config-prettier", "./.eslintrc.js.json"],
+      "extends": ["plugin:react/recommended", "eslint-config-prettier", "./.eslintrc.ts.json"],
       "files": ["*.ts", "*.tsx"],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {

.eslintrc.js.json → .eslintrc.ts.json

@@ -1,5 +1,6 @@
 {
   "rules": {
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
     "array-callback-return": ["error", { "checkForEach": false }],
     "block-scoped-var": "error",
     "consistent-return": "error",

packages/react/src/Accordion/Accordion.tsx

@@ -11,14 +11,14 @@ import { AccordionSection } from './AccordionSection'
 import useFocusWithArrows from './useFocusWithArrows'
 import { HeadingLevel } from '../Heading/Heading'
 
-export interface AccordionProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+export type AccordionProps = {
   headingLevel: HeadingLevel
   section?: boolean
-}
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
-export interface AccordionComponent extends ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>> {
+type AccordionComponent = {
   Section: typeof AccordionSection
-}
+} & ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>
 
 export const Accordion = forwardRef(
   ({ children, className, headingLevel, section = true }: AccordionProps, ref: ForwardedRef<HTMLDivElement>) => {

packages/react/src/Accordion/AccordionContext.tsx

@@ -1,7 +1,7 @@
 import { createContext } from 'react'
 import { HeadingLevel } from '../Heading/Heading'
 
-export interface AccordionContextValue {
+export type AccordionContextValue = {
   headingLevel: HeadingLevel
   section?: boolean
 }

packages/react/src/Accordion/AccordionSection.tsx

@@ -11,10 +11,10 @@ import AccordionContext from './AccordionContext'
 import { getHeadingElement } from '../Heading/Heading'
 import { Icon } from '../Icon/Icon'
 
-export interface AccordionSectionProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+export type AccordionSectionProps = {
   label: string
   expanded?: boolean
-}
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const AccordionSection = forwardRef(
   (

packages/react/src/Alert/Alert.tsx

@@ -12,7 +12,7 @@ import type { HeadingProps } from '../Heading'
 import { Icon } from '../Icon'
 import { IconButton } from '../IconButton'
 
-export interface AlertProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+export type AlertProps = {
   /** Whether the alert can be dismissed by the user. Adds a button to the top right. */
   closeable?: boolean
   /**
@@ -26,7 +26,7 @@ export interface AlertProps extends PropsWithChildren<HTMLAttributes<HTMLDivElem
   severity?: 'error' | 'info' | 'success' | 'warning'
   /** The title for the alert. */
   title?: string
-}
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 const iconSvgBySeverity = {
   error: AlertIcon,

packages/react/src/AspectRatio/AspectRatio.tsx

@@ -9,9 +9,9 @@ import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export type Ratio = 'x-tall' | 'tall' | 'square' | 'wide' | 'x-wide' | '2x-wide'
 
-export interface AspectRatioProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+export type AspectRatioProps = {
   ratio?: Ratio
-}
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const AspectRatio = forwardRef(
   ({ children, className, ratio = 'square', ...restProps }: AspectRatioProps, ref: ForwardedRef<HTMLDivElement>) => (

packages/react/src/Blockquote/Blockquote.tsx

@@ -7,13 +7,13 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { BlockquoteHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 
-export interface BlockquoteProps extends PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>> {
+export type BlockquoteProps = {
   /**
    * De kleur van het citaat.
    * Gebruik deze property om het citaat in tegenovergestelde kleur te tonen.
    */
   inverseColor?: boolean
-}
+} & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>
 
 export const Blockquote = forwardRef(
   ({ children, className, inverseColor, ...restProps }: BlockquoteProps, ref: ForwardedRef<HTMLQuoteElement>) => (

packages/react/src/Breadcrumb/Breadcrumb.tsx

@@ -10,9 +10,9 @@ import { BreadcrumbItem } from './BreadcrumbItem'
 
 export type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
-interface BreadcrumbComponent extends ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>> {
+type BreadcrumbComponent = {
   Item: typeof BreadcrumbItem
-}
+} & ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>>
 
 export const Breadcrumb = forwardRef(
   ({ children, className, ...restProps }: BreadcrumbProps, ref: ForwardedRef<HTMLElement>) => (

packages/react/src/Breadcrumb/BreadcrumbItem.tsx

@@ -7,9 +7,9 @@ import { clsx } from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface BreadcrumbItemProps extends PropsWithChildren<HTMLAttributes<HTMLLIElement>> {
+export type BreadcrumbItemProps = {
   href: string
-}
+} & PropsWithChildren<HTMLAttributes<HTMLLIElement>>
 
 export const BreadcrumbItem = forwardRef(
   ({ children, className, href, ...restProps }: BreadcrumbItemProps, ref: ForwardedRef<HTMLLIElement>) => (

packages/react/src/Button/Button.tsx

@@ -9,9 +9,9 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 
-export interface ButtonProps extends PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> {
+export type ButtonProps = {
   variant?: 'primary' | 'secondary' | 'tertiary'
-}
+} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>
 
 type CommunityButtonAppearance = 'primary-action-button' | 'secondary-action-button' | 'subtle-button'
 

packages/react/src/Card/Card.tsx

@@ -9,12 +9,12 @@ import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWith
 import { CardHeadingGroup } from './CardHeadingGroup'
 import { CardLink } from './CardLink'
 
-export interface CardProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {}
+export type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
-export interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLElement>> {
+type CardComponent = {
   HeadingGroup: typeof CardHeadingGroup
   Link: typeof CardLink
-}
+} & ForwardRefExoticComponent<CardProps & RefAttributes<HTMLElement>>
 
 export const Card = forwardRef(({ children, className, ...restProps }: CardProps, ref: ForwardedRef<HTMLElement>) => (
   <article {...restProps} ref={ref} className={clsx('amsterdam-card', className)}>

packages/react/src/Card/CardHeadingGroup.tsx

@@ -8,9 +8,9 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 import { Paragraph } from '../Paragraph'
 
-export interface CardHeadingGroupProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+export type CardHeadingGroupProps = {
   tagline: string
-}
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const CardHeadingGroup = forwardRef(
   ({ children, className, tagline, ...restProps }: CardHeadingGroupProps, ref: ForwardedRef<HTMLElement>) => (

packages/react/src/Card/CardLink.tsx

@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { AnchorHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 
-export interface CardLinkProps extends PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> {}
+export type CardLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>
 
 export const CardLink = forwardRef(
   ({ children, className, ...otherProps }: CardLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (

packages/react/src/Checkbox/Checkbox.tsx

@@ -7,10 +7,10 @@ import clsx from 'clsx'
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from 'react'
 import type { ForwardedRef, InputHTMLAttributes, PropsWithChildren } from 'react'
 
-export interface CheckboxProps extends PropsWithChildren<InputHTMLAttributes<HTMLInputElement>> {
+export type CheckboxProps = {
   invalid?: boolean
   indeterminate?: boolean
-}
+} & PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>
 
 export const Checkbox = forwardRef(
   (

packages/react/src/Dialog/Dialog.tsx

@@ -8,9 +8,9 @@ import { forwardRef } from 'react'
 import type { DialogHTMLAttributes, ForwardedRef, PropsWithChildren, ReactNode } from 'react'
 import { IconButton } from '../IconButton'
 
-export interface DialogProps extends PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>> {
+export type DialogProps = {
   actions?: ReactNode
-}
+} & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>
 
 export const Dialog = forwardRef(
   ({ children, className, title, actions, ...restProps }: DialogProps, ref: ForwardedRef<HTMLDialogElement>) => (

packages/react/src/Footer/Footer.tsx

@@ -11,10 +11,10 @@ import { FooterTop } from './FooterTop'
 
 export type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
-interface FooterComponent extends ForwardRefExoticComponent<FooterProps & RefAttributes<HTMLElement>> {
+type FooterComponent = {
   Top: typeof FooterTop
   Bottom: typeof FooterBottom
-}
+} & ForwardRefExoticComponent<FooterProps & RefAttributes<HTMLElement>>
 
 export const Footer = forwardRef(
   ({ children, className, ...restProps }: FooterProps, ref: ForwardedRef<HTMLElement>) => (

packages/react/src/Grid/Grid.tsx

@@ -68,9 +68,9 @@ const paddingClasses = (
   return classes
 }
 
-interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>> {
+type GridComponent = {
   Cell: typeof GridCell
-}
+} & ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>>
 
 export const Grid = forwardRef(
   (

packages/react/src/Header/Header.tsx

@@ -11,14 +11,14 @@ import { Logo } from '../Logo'
 import type { LogoBrand } from '../Logo'
 import { VisuallyHidden } from '../VisuallyHidden'
 
-export interface HeaderProps extends HTMLAttributes<HTMLElement> {
+export type HeaderProps = {
   logoBrand?: LogoBrand
   logoLink?: string
   logoLinkTitle?: string
   title?: string
   links?: ReactNode
   menu?: ReactNode
-}
+} & HTMLAttributes<HTMLElement>
 
 export const Header = forwardRef(
   (

packages/react/src/Heading/Heading.tsx

@@ -11,7 +11,7 @@ import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 export type HeadingLevel = 1 | 2 | 3 | 4
 type HeadingSize = 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6'
 
-export interface HeadingProps extends PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> {
+export type HeadingProps = {
   /**
    * Het hiërarchische niveau van de titel.
    */
@@ -26,7 +26,7 @@ export interface HeadingProps extends PropsWithChildren<HTMLAttributes<HTMLHeadi
    * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
    */
   inverseColor?: boolean
-}
+} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>
 
 export function getHeadingElement(level: HeadingLevel) {
   switch (level) {

packages/react/src/Icon/Icon.tsx

@@ -9,11 +9,11 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 
-export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+export type IconProps = {
   size?: 'level-3' | 'level-4' | 'level-5' | 'level-6'
   square?: boolean
   svg: Function
-}
+} & HTMLAttributes<HTMLSpanElement>
 
 export const Icon = forwardRef(
   ({ className, size = 'level-3', square, svg, ...otherProps }: IconProps, ref: ForwardedRef<HTMLElement>) => (

packages/react/src/IconButton/IconButton.tsx

@@ -10,12 +10,12 @@ import type { ButtonHTMLAttributes, ForwardedRef } from 'react'
 import { Icon } from '../Icon'
 import { VisuallyHidden } from '../VisuallyHidden'
 
-export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export type IconButtonProps = {
   label: string
   onBackground?: 'light' | 'dark'
   size?: 'level-3' | 'level-4' | 'level-5' | 'level-6'
   svg?: Function
-}
+} & ButtonHTMLAttributes<HTMLButtonElement>
 
 export const IconButton = forwardRef(
   (

packages/react/src/Image/Image.tsx

@@ -7,9 +7,9 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, ImgHTMLAttributes } from 'react'
 
-export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+export type ImageProps = {
   cover?: Boolean
-}
+} & ImgHTMLAttributes<HTMLImageElement>
 
 export const Image = forwardRef(
   ({ className, cover = false, ...restProps }: ImageProps, ref: ForwardedRef<HTMLImageElement>) => (

packages/react/src/Link/Link.tsx

@@ -14,10 +14,10 @@ type LinkOnBackground = 'default' | 'light' | 'dark'
 type DeprecatedLinkVariantInList = 'inList'
 type LinkVariant = 'standalone' | 'inline' | DeprecatedLinkVariantInList
 
-interface CommonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'> {
+type CommonProps = {
   variant?: LinkVariant
   onBackground?: LinkOnBackground
-}
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>
 
 type ConditionalProps =
   | {

packages/react/src/LinkList/LinkList.tsx

@@ -8,11 +8,11 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 import { LinkListLink } from './LinkListLink'
 
-export interface LinkListProps extends PropsWithChildren<HTMLAttributes<HTMLUListElement>> {}
+export type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>
 
-interface LinkListComponent extends ForwardRefExoticComponent<LinkListProps & RefAttributes<HTMLUListElement>> {
+type LinkListComponent = {
   Link: typeof LinkListLink
-}
+} & ForwardRefExoticComponent<LinkListProps & RefAttributes<HTMLUListElement>>
 
 /** A collection of related links. */
 export const LinkList = forwardRef(

packages/react/src/LinkList/LinkListLink.tsx

@@ -17,7 +17,7 @@ import { Icon } from '../Icon'
 
 type BackgroundName = 'default' | 'light' | 'dark'
 
-export interface LinkListLinkProps extends PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> {
+export type LinkListLinkProps = {
   /** The target url for the link. */
   href: string
   /**
@@ -32,10 +32,9 @@ export interface LinkListLinkProps extends PropsWithChildren<AnchorHTMLAttribute
    * Use the same size for all items in the list.
    */
   size?: 'small' | 'large'
-}
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>
 
-interface LinkListLinkComponent
-  extends ForwardRefExoticComponent<LinkListLinkProps & RefAttributes<HTMLAnchorElement>> {}
+type LinkListLinkComponent = ForwardRefExoticComponent<LinkListLinkProps & RefAttributes<HTMLAnchorElement>>
 
 const iconSizeMap = {
   small: 'level-6',

packages/react/src/Logo/Logo.tsx

@@ -16,9 +16,9 @@ import {
 
 export type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen'
 
-export interface LogoProps extends SVGProps<SVGSVGElement> {
+export type LogoProps = {
   brand?: LogoBrand
-}
+} & SVGProps<SVGSVGElement>
 
 const logoConfig: Record<
   LogoBrand,

packages/react/src/Mark/Mark.tsx

@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface MarkProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {}
+export type MarkProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const Mark = forwardRef(({ children, className, ...restProps }: MarkProps, ref: ForwardedRef<HTMLElement>) => (
   <mark {...restProps} ref={ref} className={clsx('amsterdam-mark', className)}>