Simplify native component prop types.

davidjerleke · Jun 24, 2024 · 66794e4 · 66794e4
1 parent ad51645
commit 66794e4
Show file tree

Hide file tree

Showing 14 changed files with 38 additions and 98 deletions.
diff --git a/packages/embla-carousel-docs/src/components/Button/ButtonBare.tsx b/packages/embla-carousel-docs/src/components/Button/ButtonBare.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithRef } from 'react'
+import React, { ComponentPropsWithRef } from 'react'
 import styled, { css } from 'styled-components'
 import { COLORS } from 'consts/themes'
 import { BORDER_SIZES } from 'consts/border'
@@ -42,28 +42,19 @@ const ButtonBareWrapper = styled.button`
 
 export const ButtonBareText = styled.span``
 
-export type PropType = PropsWithRef<
-  React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >
->
+export type PropType = ComponentPropsWithRef<'button'>
 
-export const ButtonBare = React.forwardRef(function ButtonBare(
-  props: PropType,
-  ref: React.ForwardedRef<HTMLButtonElement>
-) {
+export const ButtonBare = (props: PropType) => {
   const { children, ...restProps } = props
   const isKeyNavigating = useAppSelector(selectKeyNavigating)
 
   return (
     <ButtonBareWrapper
       $isKeyNavigating={isKeyNavigating}
-      ref={ref}
       $isButton
       {...restProps}
     >
       <ButtonBareText>{children}</ButtonBareText>
     </ButtonBareWrapper>
   )
-})
+}
diff --git a/packages/embla-carousel-docs/src/components/Button/createButtonWithLoading.tsx b/packages/embla-carousel-docs/src/components/Button/createButtonWithLoading.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
-import { ButtonBare, PropType as ButtonBarePropType } from './ButtonBare'
+import { PropType as ButtonBarePropType } from './ButtonBare'
+import { ButtonPrimaryFilled } from './ButtonPrimaryFilled'
 import {
   LoadSpinner,
   PropType as LoadSpinnerPropType
@@ -35,7 +36,7 @@ type PropType = ButtonBarePropType & {
 }
 
 export const createButtonWithLoading = (
-  ButtonComponent: typeof ButtonBare,
+  ButtonComponent: typeof ButtonPrimaryFilled,
   size?: LoadSpinnerPropType['size'],
   color?: LoadSpinnerPropType['color']
 ): ((props: PropType) => JSX.Element) => {

diff --git a/packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorCarousel.tsx b/packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorCarousel.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, PropsWithRef } from 'react'
+import React, { useMemo, useRef, ComponentPropsWithRef } from 'react'
 import styled, { css } from 'styled-components'
 import { SandboxGeneratorExample } from 'components/Sandbox/SandboxGeneratorExample'
 import { arrayFromNumber } from 'utils/arrayFromNumber'
@@ -130,14 +130,9 @@ const CarouselGeneratorCarouselWrapper = styled.div<{
   }
 `
 
-type PropType = PropsWithRef<
-  React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
-  > & {
-    previewLarge: boolean
-  }
->
+type PropType = ComponentPropsWithRef<'div'> & {
+  previewLarge: boolean
+}
 
 export const CarouselGeneratorCarousel = (props: PropType) => {
   const { previewLarge, className, ...restProps } = props

diff --git a/packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorForm.tsx b/packages/embla-carousel-docs/src/components/CarouselGenerator/CarouselGeneratorForm.tsx
@@ -1,12 +1,7 @@
-import React, { PropsWithRef } from 'react'
+import React, { ComponentPropsWithRef } from 'react'
 import { URLS } from 'consts/urls'
 
-type PropType = PropsWithRef<
-  React.DetailedHTMLProps<
-    React.FormHTMLAttributes<HTMLFormElement>,
-    HTMLFormElement
-  >
->
+type PropType = ComponentPropsWithRef<'form'>
 
 export const CarouselGeneratorForm = (props: PropType) => {
   const { children, ...restProps } = props

diff --git a/packages/embla-carousel-docs/src/components/Icon/Icon.tsx b/packages/embla-carousel-docs/src/components/Icon/Icon.tsx
@@ -1,11 +1,9 @@
-import React, { PropsWithRef } from 'react'
+import React, { ComponentPropsWithRef } from 'react'
 import { ICONS, IconType } from 'assets/icons'
 import { css } from 'styled-components'
 import { createSquareSizeStyles } from 'utils/createSquareSizeStyles'
 
-type PropType = PropsWithRef<
-  React.DetailedHTMLProps<React.SVGAttributes<SVGSVGElement>, SVGSVGElement>
-> & {
+type PropType = ComponentPropsWithRef<'svg'> & {
   svg: IconType
   color?: string
   size?: string

diff --git a/packages/embla-carousel-docs/src/components/Input/InputText.tsx b/packages/embla-carousel-docs/src/components/Input/InputText.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithRef } from 'react'
+import React, { ComponentPropsWithRef } from 'react'
 import styled, { css } from 'styled-components'
 import { useAppSelector } from 'hooks/useRedux'
 import { selectKeyNavigating } from 'components/KeyEvents/keyEventsReducer'
@@ -126,12 +126,7 @@ const Input = styled.input<{
     `};
 `
 
-type PropType = PropsWithRef<
-  React.DetailedHTMLProps<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  >
->
+type PropType = ComponentPropsWithRef<'input'>
 
 export const InputText = (props: PropType) => {
   const { children, className, ...restProps } = props

diff --git a/packages/embla-carousel-docs/src/components/Input/createRadioOrCheckboxDefault.tsx b/packages/embla-carousel-docs/src/components/Input/createRadioOrCheckboxDefault.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithRef } from 'react'
+import React, { ComponentPropsWithRef } from 'react'
 import styled, { css } from 'styled-components'
 import { useAppSelector } from 'hooks/useRedux'
 import { selectKeyNavigating } from 'components/KeyEvents/keyEventsReducer'
@@ -120,12 +120,7 @@ const Label = styled.label<{ $disabled?: boolean }>`
     `};
 `
 
-export type PropType = PropsWithRef<
-  React.DetailedHTMLProps<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  >
->
+export type PropType = ComponentPropsWithRef<'input'>
 
 export const createRadioOrCheckboxDefault = (
   type: 'radio' | 'checkbox'

diff --git a/.../components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselArrowButtons.tsx b/.../components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselArrowButtons.tsx
@@ -1,5 +1,5 @@
 import React, {
-  PropsWithChildren,
+  ComponentPropsWithRef,
   useCallback,
   useEffect,
   useState
@@ -64,12 +64,7 @@ export const usePrevNextButtons = (
   }
 }
 
-type PropType = PropsWithChildren<
-  React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >
->
+type PropType = ComponentPropsWithRef<'button'>
 
 export const PrevButton: React.FC<PropType> = (props) => {
   const { children, ...restProps } = props

diff --git a/...src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.tsx b/...src/components/Sandbox/React/SandboxFilesSrc/CarouselGenerator/EmblaCarouselDotButton.tsx
@@ -1,5 +1,5 @@
 import React, {
-  PropsWithChildren,
+  ComponentPropsWithRef,
   useCallback,
   useEffect,
   useState
@@ -58,12 +58,7 @@ export const useDotButton = (
   }
 }
 
-type PropType = PropsWithChildren<
-  React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >
->
+type PropType = ComponentPropsWithRef<'button'>
 
 export const DotButton: React.FC<PropType> = (props) => {
   const { children, ...restProps } = props

diff --git a/...-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselArrowButtons.tsx b/...-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselArrowButtons.tsx
@@ -1,5 +1,5 @@
 import React, {
-  PropsWithChildren,
+  ComponentPropsWithRef,
   useCallback,
   useEffect,
   useState
@@ -52,12 +52,7 @@ export const usePrevNextButtons = (
   }
 }
 
-type PropType = PropsWithChildren<
-  React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >
->
+type PropType = ComponentPropsWithRef<'button'>
 
 export const PrevButton: React.FC<PropType> = (props) => {
   const { children, ...restProps } = props

diff --git a/...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselDotButton.tsx b/...bla-carousel-docs/src/components/Sandbox/React/SandboxFilesSrc/EmblaCarouselDotButton.tsx
@@ -1,5 +1,5 @@
 import React, {
-  PropsWithChildren,
+  ComponentPropsWithRef,
   useCallback,
   useEffect,
   useState
@@ -52,12 +52,7 @@ export const useDotButton = (
   }
 }
 
-type PropType = PropsWithChildren<
-  React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >
->
+type PropType = ComponentPropsWithRef<'button'>
 
 export const DotButton: React.FC<PropType> = (props) => {
   const { children, ...restProps } = props

diff --git a/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleArrowButtons.tsx b/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleArrowButtons.tsx
@@ -1,5 +1,5 @@
 import React, {
-  PropsWithChildren,
+  ComponentPropsWithRef,
   useCallback,
   useEffect,
   useState
@@ -52,15 +52,10 @@ export const usePrevNextButtons = (
   }
 }
 
-type PropType = PropsWithChildren<
-  React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  > & {
-    isRightToLeft: boolean
-    isVertical: boolean
-  }
->
+type PropType = ComponentPropsWithRef<'button'> & {
+  isRightToLeft: boolean
+  isVertical: boolean
+}
 
 export const PrevButton: React.FC<PropType> = (props) => {
   const { children, isRightToLeft, isVertical, ...restProps } = props

diff --git a/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleDotButton.tsx b/packages/embla-carousel-docs/src/components/Sandbox/SandboxGeneratorExampleDotButton.tsx
@@ -1,5 +1,5 @@
 import React, {
-  PropsWithChildren,
+  ComponentPropsWithRef,
   useCallback,
   useEffect,
   useState
@@ -51,12 +51,7 @@ export const useDotButton = (
   }
 }
 
-type PropType = PropsWithChildren<
-  React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >
->
+type PropType = ComponentPropsWithRef<'button'>
 
 export const DotButton: React.FC<PropType> = (props) => {
   const { children, ...restProps } = props

diff --git a/packages/embla-carousel-docs/src/components/Tabs/TabsList.tsx b/packages/embla-carousel-docs/src/components/Tabs/TabsList.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithRef, ReactNode } from 'react'
+import React, { ComponentPropsWithRef, ReactNode } from 'react'
 import styled from 'styled-components'
 import { useAppSelector } from 'hooks/useRedux'
 import { selectKeyNavigating } from 'components/KeyEvents/keyEventsReducer'
@@ -67,9 +67,9 @@ export const TabsListScrollArea = styled.div`
   }
 `
 
-type PropType = { children?: ReactNode | undefined } & PropsWithRef<
-  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
->
+type PropType = ComponentPropsWithRef<'div'> & {
+  children?: ReactNode | undefined
+}
 
 export const TabsList = (props: PropType) => {
   const { children, ...restProps } = props