🏷️ Improve component types

Author: Frontendland

src/components/Breadcrumb/breadcrumb.ts

@@ -1,9 +1,11 @@
+import type { ButtonProps } from '../Button/button'
+
 export type BreadcrumbProps = {
     items: {
         icon?: string
         label?: string
         href?: string
-        target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop'
+        target?: ButtonProps['target']
     }[]
     separator?: string
     className?: string

src/components/Button/button.ts

@@ -8,15 +8,16 @@ export type ButtonProps = {
         | 'alert'
         | null
     href?: string
+    target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop' | undefined
     className?: string
     [key: string]: any
 }
 
 export type SvelteButtonProps = {
-    onClick?: (() => any) | null
+    onClick?: ((event: MouseEvent) => void) | null
 } & ButtonProps
 
 export type ReactButtonProps = {
-    onClick?: (() => any) | null
+    onClick?: (event: React.MouseEvent) => void
     children: React.ReactNode
 } & ButtonProps

src/components/Checkbox/checkbox.ts

@@ -8,9 +8,9 @@ export type CheckboxProps = {
 }
 
 export type SvelteCheckboxProps = {
-    onClick?: (key: any) => any
+    onClick?: ((event: MouseEvent) => void) | null
 } & CheckboxProps
 
 export type ReactCheckboxProps = {
-    onClick?: (key: any) => any
+    onClick?: (event: React.MouseEvent) => void
 } & CheckboxProps

src/components/Footer/footer.ts

@@ -1,3 +1,5 @@
+import type { ButtonProps } from '../Button/button'
+
 export type FooterProps = {
     logo?: {
         url?: string
@@ -12,7 +14,7 @@ export type FooterProps = {
         items: {
             href: string
             name: string
-            target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop'
+            target?: ButtonProps['target']
             active?: boolean
         }[]
     }[]

src/components/List/list.ts

@@ -1,3 +1,5 @@
+import type { ButtonProps } from '../Button/button'
+
 export type ListEventType = {
     value: string
     name: string
@@ -19,7 +21,7 @@ export type ListProps = {
             name: string
             value?: string
             href?: string
-            target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop'
+            target?: ButtonProps['target']
             selected?: boolean
             disabled?: boolean
             icon?: string

src/components/Menu/menu.ts

@@ -1,8 +1,10 @@
+import type { ButtonProps } from '../Button/button'
+
 export type MenuProps = {
     items?: {
         href: string
         name: string
-        target?: string
+        target?: ButtonProps['target']
         active?: boolean
     }[]
     logo?: {

src/components/Rating/rating.ts

@@ -1,3 +1,5 @@
+import type { ButtonProps } from '../Button/button'
+
 export type RatingProps = {
     score: number
     total?: number
@@ -8,7 +10,7 @@ export type RatingProps = {
     reviewCount?: number
     reviewText?: string
     reviewLink?: string
-    reviewTarget?: string
+    reviewTarget?: ButtonProps['target']
     color?: string
     emptyColor?: string
     size?: number

src/components/Switch/switch.ts

@@ -11,9 +11,9 @@ export type SwitchProps = {
 }
 
 export type SvelteSwitchProps = {
-    onClick?: (key: any) => any
+    onClick?: ((event: MouseEvent) => void) | null
 } & SwitchProps
 
 export type ReactSwitchProps = {
-    onClick?: (key: any) => any
+    onClick?: (event: React.MouseEvent) => void
 } & SwitchProps