🏷️ 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