🏷️ Use Svelte specific types for components

Author: Frontendland

scripts/buildTypes.js

@@ -23,7 +23,11 @@ const buildTypes = type => {
         const getTypeName = component => {
             const componentsWithSvelteSpecificTypes = [
                 'Badge',
-                'Button'
+                'Button',
+                'Checkbox',
+                'Input',
+                'Radio',
+                'Switch'
             ]
 
             return componentsWithSvelteSpecificTypes.includes(component)

src/components/Checkbox/Checkbox.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-    import type { CheckboxProps } from './checkbox'
+    import type { SvelteCheckboxProps } from './checkbox'
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
     
     import check from '../../icons/check.svg?raw'
     
     import styles from './checkbox.module.scss'
     import { classNames } from '../../utils/classNames'
     
-    export let checked: CheckboxProps['checked'] = false
-    export let label: CheckboxProps['label'] = ''
-    export let subText: CheckboxProps['subText'] = ''
-    export let disabled: CheckboxProps['disabled'] = false
-    export let boxed: CheckboxProps['boxed'] = false
-    export let color: CheckboxProps['color'] = ''
-    export let onClick: () => any = () => {}
+    export let checked: SvelteCheckboxProps['checked'] = false
+    export let label: SvelteCheckboxProps['label'] = ''
+    export let subText: SvelteCheckboxProps['subText'] = ''
+    export let disabled: SvelteCheckboxProps['disabled'] = false
+    export let boxed: SvelteCheckboxProps['boxed'] = false
+    export let color: SvelteCheckboxProps['color'] = ''
+    export let onClick: SvelteCheckboxProps['onClick'] = () => {}
 
     const classes = classNames([
         styles.checkbox,

src/components/Checkbox/checkbox.ts

@@ -7,6 +7,10 @@ export type CheckboxProps = {
     color?: string
 }
 
+export type SvelteCheckboxProps = {
+    onClick?: (key: any) => any
+} & CheckboxProps
+
 export type ReactCheckboxProps = {
     onClick?: (key: any) => any
 } & CheckboxProps

src/components/Input/Input.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-    import type { InputProps } from './input'
+    import type { SvelteInputProps } from './input'
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
     import styles from './input.module.scss'
     import { classNames } from '../../utils/classNames'
 
-    export let type: InputProps['type'] = 'text'
-    export let theme: InputProps['theme'] = null
-    export let label: InputProps['label'] = ''
-    export let subText: InputProps['subText'] = ''
-    export let fill: InputProps['fill'] = false
-    export let className: InputProps['className'] = ''
-    export let onChange: (e: any) => any = () => {}
-    export let onKeyUp: (e: any) => any = () => {}
+    export let type: SvelteInputProps['type'] = 'text'
+    export let theme: SvelteInputProps['theme'] = null
+    export let label: SvelteInputProps['label'] = ''
+    export let subText: SvelteInputProps['subText'] = ''
+    export let fill: SvelteInputProps['fill'] = false
+    export let className: SvelteInputProps['className'] = ''
+    export let onChange: SvelteInputProps['onChange'] = () => {}
+    export let onKeyUp: SvelteInputProps['onKeyUp'] = () => {}
 
     const classes = classNames([
         styles.input,

src/components/Input/input.ts

@@ -38,7 +38,14 @@ export type InputProps = {
     [key: string]: any
 }
 
+export type SvelteInputProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
+} & InputProps
+
 export type ReactInputProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
     icon?: string
     children?: React.ReactNode
 } & InputProps

src/components/Radio/Radio.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-    import type { RadioProps } from './radio'
+    import type { SvelteRadioProps } from './radio'
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
     import styles from './radio.module.scss'
     import { classNames } from '../../utils/classNames'
 
-    export let name: RadioProps['name'] = ''
-    export let items: RadioProps['items'] = []
-    export let color: RadioProps['color'] =  ''
-    export let inline: RadioProps['inline'] = false
-    export let className: RadioProps['className'] = ''
-    export let onChange: () => any = () => {}
+    export let name: SvelteRadioProps['name'] = ''
+    export let items: SvelteRadioProps['items'] = []
+    export let color: SvelteRadioProps['color'] =  ''
+    export let inline: SvelteRadioProps['inline'] = false
+    export let className: SvelteRadioProps['className'] = ''
+    export let onChange: SvelteRadioProps['onChange'] = () => {}
 
     const classes = classNames([
         styles.radio,

src/components/Radio/radio.ts

@@ -12,6 +12,10 @@ export type RadioProps = {
     className?: string
 }
 
+export type SvelteRadioProps = {
+    onChange?: (key: any) => any
+} & RadioProps
+
 export type ReactRadioProps = {
     onChange?: (key: any) => any
 } & RadioProps

src/components/Switch/Switch.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-    import type { SwitchProps } from './switch'
+    import type { SvelteSwitchProps } from './switch'
 
     import styles from './switch.module.scss'
     import { classNames } from '../../utils/classNames'
     
-    export let label: SwitchProps['label'] = ''
-    export let toggled: SwitchProps['toggled'] = false
-    export let offColor: SwitchProps['offColor'] = ''
-    export let onColor: SwitchProps['onColor'] = ''
-    export let reverse: SwitchProps['reverse'] = false
-    export let small: SwitchProps['small'] = false
-    export let square: SwitchProps['square'] = false
-    export let disabled: SwitchProps['disabled'] = false
-    export let className: SwitchProps['className'] = ''
-    export let onClick: () => any = () => {}
+    export let label: SvelteSwitchProps['label'] = ''
+    export let toggled: SvelteSwitchProps['toggled'] = false
+    export let offColor: SvelteSwitchProps['offColor'] = ''
+    export let onColor: SvelteSwitchProps['onColor'] = ''
+    export let reverse: SvelteSwitchProps['reverse'] = false
+    export let small: SvelteSwitchProps['small'] = false
+    export let square: SvelteSwitchProps['square'] = false
+    export let disabled: SvelteSwitchProps['disabled'] = false
+    export let className: SvelteSwitchProps['className'] = ''
+    export let onClick: SvelteSwitchProps['onClick'] = () => {}
     
     const classes = classNames([
         styles.switch,

src/components/Switch/switch.ts

@@ -10,6 +10,10 @@ export type SwitchProps = {
     className?: string
 }
 
+export type SvelteSwitchProps = {
+    onClick?: (key: any) => any
+} & SwitchProps
+
 export type ReactSwitchProps = {
     onClick?: (key: any) => any
 } & SwitchProps