🏷️ Replace any types with generics

Author: Frontendland

scripts/buildTypes.js

@@ -5,8 +5,26 @@ import { utilityTypes } from './utilityTypes.js'
 import fs from 'fs'
 
 const componentsWithGenericTypes = [
+    'Alert',
+    'Badge',
+    'Button',
+    'Card',
+    'Checkbox',
+    'ConditionalWrapper',
+    'ContextMenu',
+    'Copy',
+    'Counter',
+    'Flex',
+    'Grid',
     'Image',
-    'Modal'
+    'Input',
+    'Modal',
+    'OTPInput',
+    'Popover',
+    'Radio',
+    'Switch',
+    'Textarea',
+    'Toast'
 ]
 
 const componentsWithoutFrameworkSpecificTypes = [

src/components/Alert/Alert.astro

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { AlertProps } from './alert'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
@@ -10,7 +11,7 @@ import warning from '../../icons/warning.svg?raw'
 
 import styles from './alert.module.scss'
 
-interface Props extends AlertProps {}
+export type Props = AlertProps<HTMLAttributes<'section'>>
 
 const iconMap = {
     info,

src/components/Alert/Alert.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { Snippet } from 'svelte'
+    import type { HTMLAttributes } from 'svelte/elements'
     import type { AlertProps } from './alert'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
@@ -14,7 +15,7 @@
     export type SvelteAlertProps = {
         icon?: Snippet
         children: Snippet
-    } & AlertProps
+    } & AlertProps<HTMLAttributes<HTMLElement>>
 
     const {
         element = 'section',

src/components/Alert/alert.ts

@@ -1,4 +1,4 @@
-export type AlertProps = {
+export type AlertProps<T extends object = object> = {
     element?: string
     title?: string
     titleTag?: string
@@ -9,5 +9,4 @@ export type AlertProps = {
         | 'success'
         | 'warning'
         | 'alert'
-    [key: string]: any
-}
+} & T

src/components/Badge/Badge.astro

@@ -1,9 +1,10 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { BadgeProps } from './badge'
 
 import styles from './badge.module.scss'
 
-interface Props extends BadgeProps {}
+export type Props = BadgeProps<HTMLAttributes<'span'>>
 
 const {
     theme,

src/components/Badge/Badge.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from 'svelte'
-    import type { MouseEventHandler } from 'svelte/elements'
+    import type { HTMLAttributes, MouseEventHandler } from 'svelte/elements'
     import type { BadgeProps } from './badge'
 
     import { classNames } from '../../utils/classNames'
@@ -10,7 +10,7 @@
     export type SvelteBadgeProps = {
         onClick?: MouseEventHandler<HTMLButtonElement> | null
         children?: Snippet
-    } & BadgeProps
+    } & BadgeProps<HTMLAttributes<HTMLElement>>
 
     const {
         theme,

src/components/Badge/Badge.tsx

@@ -1,3 +1,4 @@
+import type React from 'react'
 import type { BadgeProps } from './badge'
 
 import { classNames } from '../../utils/classNames'
@@ -7,7 +8,7 @@ import styles from './badge.module.scss'
 export type ReactBadgeProps = {
     onClick?: React.MouseEventHandler<HTMLButtonElement>
     children?: React.ReactNode
-} & BadgeProps
+} & BadgeProps<React.HTMLAttributes<HTMLElement>>
 
 const Badge = ({
     theme,

src/components/Badge/badge.ts

@@ -1,4 +1,4 @@
-export type BadgeProps = {
+type BadgeBase = {
     theme?: 'secondary'
         | 'outline'
         | 'flat'
@@ -11,5 +11,16 @@ export type BadgeProps = {
     rounded?: boolean
     transparent?: boolean
     className?: string
-    [key: string]: any
 }
+
+type AsSpan<T extends object = object> = BadgeBase & {
+    onClick?: never
+} & T
+
+type AsButton<T extends object = object> = BadgeBase & {
+    onClick: any
+} & T
+
+export type BadgeProps<T extends object = object> =
+    | AsSpan<T>
+    | AsButton<T>

src/components/Button/Button.astro

@@ -1,9 +1,10 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { ButtonProps } from './button'
 
 import styles from './button.module.scss'
 
-interface Props extends ButtonProps {}
+export type Props = ButtonProps<HTMLAttributes<'button'>>
 
 const {
     theme,

src/components/Button/Button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from 'svelte'
-    import type { MouseEventHandler } from 'svelte/elements'
+    import type { HTMLAttributes, MouseEventHandler } from 'svelte/elements'
     import type { ButtonProps } from './button'
 
     import { classNames } from '../../utils/classNames'
@@ -10,7 +10,7 @@
     export type SvelteButtonProps = {
         onClick?: MouseEventHandler<HTMLButtonElement>
         children: Snippet
-    } & ButtonProps
+    } & ButtonProps<HTMLAttributes<HTMLElement>>
 
     const {
         theme,