🏷️ Improve component types

Author: Frontendland

src/components/Alert/Alert.tsx

@@ -16,6 +16,13 @@ const iconMap = {
     alert
 }
 
+type ReactAlertProps = {
+    Element?: keyof JSX.IntrinsicElements
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+    icon?: string
+}
+
 const Alert = ({
     Element = 'section',
     title,
@@ -25,7 +32,7 @@ const Alert = ({
     children,
     icon,
     ...rest
-}: AlertProps & { icon?: any }) => {
+}: AlertProps & ReactAlertProps) => {
     const classes = [
         'w-alert',
         (!icon && !theme) && 'col',

src/components/Alert/alert.ts

@@ -9,5 +9,4 @@ export type AlertProps = {
         | 'warning'
         | 'alert'
         | null
-    [key: string]: any
 }

src/components/Badge/Badge.tsx

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

src/components/Badge/badge.ts

@@ -8,5 +8,4 @@ export type BadgeProps = {
         | 'alert'
         | null
     onClick?: () => any
-    [key: string]: any
 }

src/components/Button/Button.tsx

@@ -2,14 +2,18 @@ import React from 'react'
 import type { ButtonProps } from './button'
 import './button.scss'
 
+type ReactButtonProps = {
+    children: React.ReactNode
+}
+
 const Button = ({
     theme,
     bold,
     href,
     children,
     onClick,
     ...rest
-}: ButtonProps) => {
+}: ButtonProps & ReactButtonProps) => {
     const classes = [
         'w-button',
         bold && 'bold',

src/components/Button/button.ts

@@ -9,6 +9,6 @@ export type ButtonProps = {
         | null
     bold?: boolean
     href?: string
+    target?: string
     onClick?: () => any
-    [key: string]: any
 }

src/components/Card/Card.tsx

@@ -2,6 +2,12 @@ import React from 'react'
 import type { CardProps } from './card'
 import './card.scss'
 
+type ReactCardProps = {
+    Element?: keyof JSX.IntrinsicElements
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+}
+
 const Card = ({
     Element = 'section',
     title,
@@ -11,7 +17,7 @@ const Card = ({
     secondary,
     children,
     ...rest
-}: CardProps) => {
+}: CardProps & ReactCardProps) => {
     const classes = [
         'w-card',
         className,

src/components/Card/card.ts

@@ -4,5 +4,4 @@ export type CardProps = {
     compact?: boolean
     className?: string
     secondary?: boolean
-    [key: string]: any
 }