🏷️ Improve types

Author: Frontendland

src/components/Badge/Badge.svelte

@@ -6,10 +6,10 @@
     import styles from './badge.module.scss'
 
     export let theme: SvelteBadgeProps['theme'] = null
-    export let onClick: SvelteBadgeProps['onClick'] = null
     export let hover: SvelteBadgeProps['hover'] = false
     export let small: SvelteBadgeProps['small'] = false
     export let className: SvelteBadgeProps['className'] = ''
+    export let onClick: SvelteBadgeProps['onClick'] = () => {}
 
     const classes = classNames([
         styles.badge,

src/components/Badge/badge.ts

@@ -1,3 +1,5 @@
+import type { MouseEventHandler } from 'svelte/elements'
+
 export type BadgeProps = {
     theme?: 'secondary'
         | 'outline'
@@ -14,10 +16,10 @@ export type BadgeProps = {
 }
 
 export type SvelteBadgeProps = {
-    onClick?: ((event: MouseEvent) => void) | null
+    onClick?: MouseEventHandler<HTMLButtonElement>
 } & BadgeProps
 
 export type ReactBadgeProps = {
-    onClick?: (event: React.MouseEvent) => void
+    onClick?: React.MouseEventHandler<HTMLButtonElement>
     children: React.ReactNode
 } & BadgeProps

src/components/Button/button.ts

@@ -1,3 +1,5 @@
+import type { MouseEventHandler } from 'svelte/elements'
+
 export type ButtonProps = {
     theme?: 'secondary'
         | 'outline'
@@ -7,17 +9,24 @@ export type ButtonProps = {
         | 'warning'
         | 'alert'
         | null
+        | undefined
+    target?: '_self'
+        | '_blank'
+        | '_parent'
+        | '_top'
+        | '_unfencedTop'
+        | null
+        | undefined
     href?: string
-    target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop' | undefined
     className?: string
     [key: string]: any
 }
 
 export type SvelteButtonProps = {
-    onClick?: ((event: MouseEvent) => void) | null
+    onClick?: MouseEventHandler<HTMLButtonElement>
 } & ButtonProps
 
 export type ReactButtonProps = {
-    onClick?: (event: React.MouseEvent) => void
+    onClick?: React.MouseEventHandler<HTMLButtonElement>
     children: React.ReactNode
 } & ButtonProps

src/components/Checkbox/checkbox.ts

@@ -1,3 +1,5 @@
+import type { MouseEventHandler } from 'svelte/elements'
+
 export type CheckboxProps = {
     checked?: boolean
     label?: string
@@ -8,9 +10,9 @@ export type CheckboxProps = {
 }
 
 export type SvelteCheckboxProps = {
-    onClick?: ((event: MouseEvent) => void) | null
+    onClick?: MouseEventHandler<HTMLInputElement>
 } & CheckboxProps
 
 export type ReactCheckboxProps = {
-    onClick?: (event: React.MouseEvent) => void
+    onClick?: React.MouseEventHandler<HTMLInputElement>
 } & CheckboxProps

src/components/Switch/switch.ts

@@ -1,3 +1,5 @@
+import type { MouseEventHandler } from 'svelte/elements'
+
 export type SwitchProps = {
     label?: string
     reverse?: boolean
@@ -11,9 +13,9 @@ export type SwitchProps = {
 }
 
 export type SvelteSwitchProps = {
-    onClick?: ((event: MouseEvent) => void) | null
+    onClick?: MouseEventHandler<HTMLInputElement>
 } & SwitchProps
 
 export type ReactSwitchProps = {
-    onClick?: (event: React.MouseEvent) => void
+    onClick?: React.MouseEventHandler<HTMLInputElement>
 } & SwitchProps

src/playground/ReactPlayground.tsx

@@ -92,7 +92,7 @@ const ReactPlayground = () => {
             <Card title="Checkbox">
                 <Checkbox
                     label="Accept"
-                    onClick={e => setCheckbox(e.target.checked)}
+                    onClick={e => setCheckbox(e.currentTarget.checked)}
                 />
 
                 <span className={styles.span}>{`${checkbox}`}</span>
@@ -222,7 +222,7 @@ const ReactPlayground = () => {
 
             <Card title="Switch">
                 <Switch
-                    onClick={e => setToggle(e.target.checked)}
+                    onClick={e => setToggle(e.currentTarget.checked)}
                 />
 
                 <span className={styles.span}>{`${toggle}`}</span>

src/playground/SveltePlayground.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import Accordion from '@components/Accordion/Accordion.svelte'
     import Badge from '@components/Badge/Badge.svelte'
     import Button from '@components/Button/Button.svelte'
@@ -90,7 +90,7 @@
     <Card title="Checkbox">
         <Checkbox
             label="Accept"
-            onClick={e => checkbox = e.target.checked}
+            onClick={e => checkbox = e.currentTarget.checked}
         />
 
         <span class={styles.span}>{checkbox}</span>
@@ -128,12 +128,12 @@
         <Input
             label="Enter a value"
             placeholder="Or change the color below"
-            onKeyUp={e => input = e.target.value}
+            onKeyUp={e => input = e.currentTarget.value}
         />
 
         <Input
             type="color"
-            onChange={e => input = e.target.value}
+            onChange={e => input = e.currentTarget.value}
         />
 
         <span class={styles.span}>{input}</span>
@@ -217,7 +217,7 @@
 
     <Card title="Switch">
         <Switch
-            onClick={e => toggle = e.target.checked}
+            onClick={e => toggle = e.currentTarget.checked}
         />
 
         <span class={styles.span}>{toggle}</span>