🏷️ Move React type definitions to type files

Author: Frontendland

src/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { AlertProps } from './alert'
+import type { ReactAlertProps } from './alert'
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import info from '../../icons/info.svg?raw'
@@ -16,13 +16,6 @@ const iconMap = {
     alert
 }
 
-type ReactAlertProps = {
-    Element?: keyof JSX.IntrinsicElements
-    TitleTag?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-    icon?: string
-} & AlertProps
-
 const Alert = ({
     Element = 'section',
     title,

src/components/Alert/alert.ts

@@ -10,3 +10,9 @@ export type AlertProps = {
         | 'alert'
         | null
 }
+
+export type ReactAlertProps = {
+    Element?: keyof JSX.IntrinsicElements
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<AlertProps, 'titleTag' | 'element'>

src/components/Badge/Badge.tsx

@@ -1,11 +1,7 @@
 import React from 'react'
-import type { BadgeProps } from './badge'
+import type { ReactBadgeProps } from './badge'
 import './badge.scss'
 
-type ReactBadgeProps = {
-    children: React.ReactNode
-} & BadgeProps
-
 const Badge = ({ theme, onClick, children, ...rest }: ReactBadgeProps) => {
     const classes = [
         'w-badge',

src/components/Badge/badge.ts

@@ -9,3 +9,7 @@ export type BadgeProps = {
         | null
     onClick?: () => any
 }
+
+export type ReactBadgeProps = {
+    children: React.ReactNode
+} & BadgeProps

src/components/Button/Button.tsx

@@ -1,11 +1,7 @@
 import React from 'react'
-import type { ButtonProps } from './button'
+import type { ReactButtonProps } from './button'
 import './button.scss'
 
-type ReactButtonProps = {
-    children: React.ReactNode
-} & ButtonProps
-
 const Button = ({
     theme,
     bold,

src/components/Button/button.ts

@@ -12,3 +12,7 @@ export type ButtonProps = {
     onClick?: () => any
     [key: string]: any
 }
+
+export type ReactButtonProps = {
+    children: React.ReactNode
+} & ButtonProps

src/components/Card/Card.tsx

@@ -1,13 +1,7 @@
 import React from 'react'
-import type { CardProps } from './card'
+import type { ReactCardProps } from './card'
 import './card.scss'
 
-type ReactCardProps = {
-    Element?: keyof JSX.IntrinsicElements
-    TitleTag?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-} & CardProps
-
 const Card = ({
     Element = 'section',
     title,

src/components/Card/card.ts

@@ -7,3 +7,9 @@ export type CardProps = {
     secondary?: boolean
     [key: string]: any
 }
+
+export type ReactCardProps = {
+    Element?: keyof JSX.IntrinsicElements
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<CardProps, 'titleTag' | 'element'>

src/components/Checkbox/Checkbox.tsx

@@ -1,15 +1,11 @@
 import React from 'react'
-import type { CheckboxProps } from './checkbox'
+import type { ReactCheckboxProps } from './checkbox'
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import check from '../../icons/check.svg?raw'
 
 import './checkbox.scss'
 
-type ReactCheckboxProps = {
-    onClick?: (key: any) => any
-} & CheckboxProps
-
 const Checkbox = ({
     checked,
     label,

src/components/Checkbox/checkbox.ts

@@ -6,3 +6,7 @@ export type CheckboxProps = {
     boxed?: boolean
     color?: string
 }
+
+export type ReactCheckboxProps = {
+    onClick?: (key: any) => any
+} & CheckboxProps

src/components/ConditionalWrapper/ConditionalWrapper.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
 import type { ConditionalWrapperProps } from './conditionalwrapper'
 
-type ExtendedConditionalWrapperProps = {
-  condition: ConditionalWrapperProps['condition']
+type ReactConditionalWrapperProps = {
   wrapper: (_: React.ReactNode) => any
   children: React.ReactNode
-};
+} & ConditionalWrapperProps
 
-const ConditionalWrapper = ({ condition, wrapper, children }: ExtendedConditionalWrapperProps) =>
+const ConditionalWrapper = ({ condition, wrapper, children }: ReactConditionalWrapperProps) =>
   condition ? wrapper(children) : children
 
 export default ConditionalWrapper

src/components/Radio/Radio.tsx

@@ -1,14 +1,10 @@
 import React from 'react'
-import type { RadioProps } from './radio'
+import type { ReactRadioProps } from './radio'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import './radio.scss'
 
-type ReactRadioProps = {
-    onChange?: (key: any) => any
-} & RadioProps
-
 const Radio = ({
     name,
     items,

src/components/Radio/radio.ts

@@ -11,3 +11,7 @@ export type RadioProps = {
     inline?: boolean
     className?: string
 }
+
+export type ReactRadioProps = {
+    onChange?: (key: any) => any
+} & RadioProps

src/components/Switch/Switch.tsx

@@ -1,11 +1,7 @@
 import React from 'react'
-import type { SwitchProps } from './switch'
+import type { ReactSwitchProps } from './switch'
 import './switch.scss'
 
-type ReactSwitchProps = {
-    onClick?: (key: any) => any
-} & SwitchProps
-
 const Switch = ({
     label,
     toggled,

src/components/Switch/switch.ts

@@ -9,3 +9,7 @@ export type SwitchProps = {
     disabled?: boolean
     className?: string
 }
+
+export type ReactSwitchProps = {
+    onClick?: (key: any) => any
+} & SwitchProps

src/components/Tabs/Tabs.tsx

@@ -1,12 +1,8 @@
 import React, { useState, useRef } from 'react'
-import type { TabsProps } from './tabs'
+import type { ReactTabsProps } from './tabs'
 
 import './tabs.scss'
 
-type ReactTabsProps = {
-    children: React.ReactNode
-} & TabsProps
-
 const Tabs = ({
     items,
     theme,
@@ -40,7 +36,7 @@ const Tabs = ({
         setActive(tab)
     }
 
-    const isActive = (item: TabsProps['items'][0]) => {
+    const isActive = (item: ReactTabsProps['items'][0]) => {
         if (!active) {
             return item.active ? 'active' : undefined
         }

src/components/Tabs/tabs.ts

@@ -10,3 +10,7 @@ export type TabsProps = {
     even?: boolean
     className?: string
 }
+
+export type ReactTabsProps = {
+    children: React.ReactNode
+} & TabsProps

src/components/Timeline/Timeline.tsx

@@ -1,12 +1,8 @@
 import React from 'react'
-import type { TimelineProps } from './timeline'
+import type { ReactTimelineProps } from './timeline'
 
 import './timeline.scss'
 
-type ReactTimelineProps = {
-    children: React.ReactNode
-} & TimelineProps
-
 const Timeline = ({
     theme,
     counter,

src/components/Timeline/timeline.ts

@@ -55,3 +55,7 @@ export type TimelineProps = {
     | 'upper-roman'
     | null
 }
+
+export type ReactTimelineProps = {
+    children: React.ReactNode
+} & TimelineProps

src/components/Toast/Toast.tsx

@@ -1,14 +1,9 @@
 import React from 'react'
-import type { ToastProps } from './toast'
+import type { ReactToastProps } from './toast'
 import Alert from '../Alert/Alert.tsx'
 
 import './toast.scss'
 
-type ReactToastProps = {
-    children: React.ReactNode
-    icon?: string
-} & ToastProps
-
 const Toast = ({
     icon,
     position,

src/components/Toast/toast.ts

@@ -4,3 +4,8 @@ export type ToastProps = {
     position?: string
     [key: string]: any
 } & AlertProps
+
+export type ReactToastProps = {
+    children: React.ReactNode
+    icon?: string
+} & ToastProps