Use ComponentProps everywhere

Author: benface

website/src/components/Callout.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 
 import { classNames } from '@edgeandnode/gds'
 import { ExclamationMark, Lightbulb } from '@edgeandnode/gds/icons'
@@ -10,7 +10,7 @@ type CalloutType = (typeof calloutTypes)[number]
 const calloutTypes = ['note', 'tip', 'important', 'warning', 'caution'] as const
 const importantCalloutTypes: CalloutType[] = ['important', 'warning', 'caution']
 
-interface CalloutProps extends Omit<ComponentPropsWithoutRef<'blockquote'>, 'title'> {
+interface CalloutProps extends Omit<ComponentProps<'blockquote'>, 'title'> {
   /**
    * Defaults to `info`, or to `important` if `data-callout-type` is set to either `important`, `warning`, or `caution`.
    */
@@ -51,7 +51,7 @@ export const Callout = ({
         --:my-8 --:last:mb-0 -:is-[li>*]:my-4`,
         className,
       ])}
-      {...(props as ComponentPropsWithoutRef<'div'>)}
+      {...(props as ComponentProps<'div'>)}
     >
       <div className="flex size-6 shrink-0 items-center justify-center">
         {variant === 'info' ? (

website/src/components/CodeBlock.tsx

@@ -1,8 +1,8 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 
 import { classNames, ExperimentalCodeBlock, type ExperimentalCodeBlockProps } from '@edgeandnode/gds'
 
-interface CodeBlockProps extends Omit<ComponentPropsWithoutRef<'pre'>, 'children'> {
+interface CodeBlockProps extends Omit<ComponentProps<'pre'>, 'children'> {
   children?:
     | ReactNode
     | {
@@ -29,7 +29,7 @@ export const CodeBlock = ({ className, children, ...props }: CodeBlockProps) =>
       language={language as ExperimentalCodeBlockProps['language']}
       lineNumbers={lineCount > 1}
       className={classNames(['graph-docs-not-markdown --:my-8 --:last:mb-0 -:is-[li>*]:my-4', className])}
-      {...(props as ComponentPropsWithoutRef<'div'>)}
+      {...(props as ComponentProps<'div'>)}
     >
       {code}
     </ExperimentalCodeBlock>

website/src/components/Heading.tsx

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type ElementType, useContext, useEffect } from 'react'
+import { type ComponentProps, type ElementType, useContext, useEffect } from 'react'
 import { useInView } from 'react-intersection-observer'
 
 import { classNames, ExperimentalButton } from '@edgeandnode/gds'
@@ -7,7 +7,7 @@ import { Link as LinkIcon } from '@edgeandnode/gds/icons'
 import { useI18n } from '@/i18n'
 import { MDXContentContext } from '@/layout'
 
-interface HeadingProps extends ComponentPropsWithoutRef<'h1'> {
+interface HeadingProps extends ComponentProps<'h1'> {
   as?: ElementType
 }
 

website/src/components/Image.tsx

@@ -1,10 +1,10 @@
-import type NextImage from 'next/image'
-import type { ComponentPropsWithoutRef } from 'react'
+import NextImage from 'next/image'
+import type { ComponentProps } from 'react'
 
 import { classNames } from '@edgeandnode/gds'
 
-interface ImageProps extends Omit<ComponentPropsWithoutRef<'img'>, 'src'> {
-  src?: ComponentPropsWithoutRef<typeof NextImage>['src']
+export interface ImageProps extends Omit<ComponentProps<'img'>, 'src'> {
+  src?: ComponentProps<typeof NextImage>['src']
 }
 
 export const Image = ({ src: passedSrc, alt, className, ...props }: ImageProps) => {

website/src/components/Navigation.tsx

@@ -1,11 +1,4 @@
-import {
-  type ComponentPropsWithoutRef,
-  createContext,
-  type MouseEvent,
-  type ReactNode,
-  useContext,
-  useState,
-} from 'react'
+import { type ComponentProps, createContext, type MouseEvent, type ReactNode, useContext, useState } from 'react'
 
 import {
   ButtonOrLink,
@@ -16,7 +9,7 @@ import {
 } from '@edgeandnode/gds'
 import { CaretDown } from '@edgeandnode/gds/icons'
 
-export const NavigationGroup = ({ className, children, ...props }: ComponentPropsWithoutRef<'div'>) => {
+export const NavigationGroup = ({ className, children, ...props }: ComponentProps<'div'>) => {
   return (
     <div className={classNames(['overflow-clip border-b border-space-1500 px-4 py-2', className])} {...props}>
       <NavigationList>{children}</NavigationList>
@@ -28,7 +21,7 @@ export const NavigationListContext = createContext<{
   depth: number
 } | null>(null)
 
-export const NavigationList = ({ className, children, ...props }: ComponentPropsWithoutRef<'ul'>) => {
+export const NavigationList = ({ className, children, ...props }: ComponentProps<'ul'>) => {
   const ancestorNavigationListContext = useContext(NavigationListContext)
   const depth = ancestorNavigationListContext ? ancestorNavigationListContext.depth + 1 : 0
 

website/src/components/Table.tsx

@@ -1,8 +1,8 @@
-import type { ComponentPropsWithoutRef } from 'react'
+import type { ComponentProps } from 'react'
 
 import { classNames } from '@edgeandnode/gds'
 
-interface TableProps extends ComponentPropsWithoutRef<'table'> {
+interface TableProps extends ComponentProps<'table'> {
   variant?: 'default' | 'supported-networks'
 }
 

website/src/components/TimeIcon.tsx

@@ -1,11 +1,11 @@
-import type { ComponentPropsWithoutRef } from 'react'
+import type { ComponentProps } from 'react'
 
 import { classNames } from '@edgeandnode/gds'
 import { HourglassDynamic } from '@edgeandnode/gds/icons'
 
 import { useI18n } from '@/i18n'
 
-export interface TimeIconProps extends ComponentPropsWithoutRef<'div'> {
+export interface TimeIconProps extends ComponentProps<'div'> {
   variant: 'reading' | 'duration'
   minutes: number
 }

website/src/components/VideoEmbed.tsx

@@ -1,11 +1,11 @@
-import type { ComponentPropsWithoutRef } from 'react'
+import type { ComponentProps } from 'react'
 
 import { classNames } from '@edgeandnode/gds'
 
 import { useI18n } from '@/i18n'
 
 declare namespace VideoEmbedProps {
-  interface BaseProps extends Omit<ComponentPropsWithoutRef<'iframe'>, 'src'> {
+  interface BaseProps extends Omit<ComponentProps<'iframe'>, 'src'> {
     title: string
   }
   interface SrcProps extends BaseProps {

website/src/layout/MDXContent.tsx

@@ -1,11 +1,11 @@
 import { useSet } from '@react-hookz/web'
 import type { NextraMDXContent } from 'nextra'
-import type { ComponentPropsWithoutRef } from 'react'
+import type { ComponentProps } from 'react'
 
 import { MDXContentContext } from './shared'
 import { Template } from './Template'
 
-export function MDXContent({ toc: headings, children }: ComponentPropsWithoutRef<NextraMDXContent>) {
+export function MDXContent({ toc: headings, children }: ComponentProps<NextraMDXContent>) {
   const headingIdsInOrAboveView = useSet<string>()
 
   const markHeading = (id: string, inOrAboveView: boolean) => {

website/src/layout/templates/default/aside.tsx

@@ -1,13 +1,13 @@
 import { motion } from 'motion/react'
-import { type ComponentPropsWithoutRef, type CSSProperties, useContext } from 'react'
+import { type ComponentProps, type CSSProperties, useContext } from 'react'
 
 import { ButtonOrLink, reactNodeToString } from '@edgeandnode/gds'
 
 import { useI18n } from '@/i18n'
 
 import { LayoutContext, MAX_HEADING_DEPTH, MDXContentContext } from '../../shared'
 
-export default function TemplateDefaultAside(props: ComponentPropsWithoutRef<'div'>) {
+export default function TemplateDefaultAside(props: ComponentProps<'div'>) {
   const { activeIndex } = useContext(LayoutContext)!
   const { headings, headingIsInOrAboveView } = useContext(MDXContentContext)!
   const { t } = useI18n()