Merge pull request #156 from silinternational/feature/fix-types

replace any with better types and move types to index.d.ts

Author: hobbitronics

README.md

@@ -4,7 +4,9 @@ Reusable Svelte components for some internal applications
 
 ## installation
 
-To install to your Svelte project, open your project's root directory in a terminal. Type or paste `npm i -D [email protected] [email protected] @silintl/ui-components` and press enter (versions will vary if you use an older release of this repo). Sass and-material-components web are required to develop additional material web components in your app, but it may depend on your version of npm if they are necessary even if you don't. You should already have svelte@3 installed if you are using this library. If you are using typescript you will probaly need to run `npm i -D tslib` to avoid a material-components-web type error.
+To install to your Svelte project, open your project's root directory in a terminal. Type or paste `npm i -D [email protected] [email protected] @silintl/ui-components` and press enter (versions will vary if you use an older release of this repo). Sass and-material-components web are required to develop additional material web components in your app, but it may depend on your version of npm if they are necessary even if you don't. You should already have svelte@3 installed if you are using this library.
+
+If you are using typescript you will need to run `npm i -D tslib` to avoid a material-components-web type error.
 
 You will also want to follow the example below for your index.html (app.html for sveltekit templates) for Material Icons to work and for Google fonts to load.
 see https://github.com/material-components/material-web#2-write-html-and-javascript

components/ui-components.d.ts renamed to index.d.ts

@@ -5,12 +5,12 @@ declare module '@silintl/ui-components' {
   export type actions = writable<any[]>
 
   interface ButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-    disabled?: any
-    outlined?: any
-    raised?: any
-    prependIcon?: any
-    appendIcon?: any
-    url?: any
+    disabled?: boolean
+    outlined?: boolean
+    raised?: boolean
+    prependIcon?: string
+    appendIcon?: string
+    url?: string
   }
   export class Button extends SvelteComponentTyped<ButtonProps> {}
 
@@ -106,7 +106,9 @@ declare module '@silintl/ui-components' {
   interface DrawerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
     title?: string
     subtitle?: string
-    menuItems?: any[]
+    menuItems?: {
+      icon: string, label: string, url: string, urlPattern: string, hide: boolean, button: boolean, tooltip: string
+    }[]
     dismissible?: boolean
     hasTopAppBar?: boolean
     hideForTablet?: boolean
@@ -125,15 +127,15 @@ declare module '@silintl/ui-components' {
     mini?: boolean
     extended?: boolean
     url?: string
-    action?: any
+    action?: Function
   }
   export class Fab extends SvelteComponentTyped<FabProps> {}
 
   interface IconButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-    icon?: any
-    ariaLabel?: any
-    url?: any
-    disabled?: any
+    icon?: string
+    ariaLabel?: string
+    url?: string
+    disabled?: boolean
   }
   export class IconButton extends SvelteComponentTyped<IconButtonProps> {}
 
@@ -182,7 +184,7 @@ declare module '@silintl/ui-components' {
   }
 
   interface SelectProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-    options?: any[]
+    options?: { name: string, id: number }[]
     width?: string
     disabled?: boolean
     selectedID?: string
@@ -232,15 +234,15 @@ declare module '@silintl/ui-components' {
   export class TextField extends SvelteComponentTyped<TextFieldProps> {}
 
   interface TooltipProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-    tooltipID?: any
+    tooltipID?: string
     positionX?: 'start' | 'center' | 'end'
     positionY?: 'above' | 'below'
   }
   export class Tooltip extends SvelteComponentTyped<TooltipProps> {}
 
   export namespace Tooltip {
     interface TooltipWrapperProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-      ariaDescribedBy?: any
+      ariaDescribedBy?: string
     }
     export class Wrapper extends SvelteComponentTyped<TooltipWrapperProps> {}
   }
@@ -267,7 +269,7 @@ declare module '@silintl/ui-components' {
     title?: string
     icon?: string
     disabled?: boolean
-    buttons?: any
+    buttons?: { label: string, url: string }[]
     footerText?: string
   }
   export class CustomCard extends SvelteComponentTyped<CustomCardProps> {}
@@ -286,11 +288,11 @@ declare module '@silintl/ui-components' {
   export class Form extends SvelteComponentTyped<FormProps> {}
 
   interface PageProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-    loading?: any
-    title?: any
-    layout?: any
-    center?: any
-    noProgress?: any
+    loading?: boolean
+    title?: string
+    layout?: string
+    center?: boolean
+    noProgress?: boolean
   }
   export class Page extends SvelteComponentTyped<PageProps> {}
 
@@ -312,9 +314,11 @@ declare module '@silintl/ui-components' {
   }
   export class SearchableSelect extends SvelteComponentTyped<SearchableSelectProps> {}
 
+  type steps = 'title' | 'content' | 'left' | 'right' | 'previous' | 'next' | 'target'
+
   interface TourProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-    steps?: any[]
-    data?: any
+    steps?: { [key in steps]: string | number }[]
+    data?: { [key: string]: string }
   }
   export class Tour extends SvelteComponentTyped<TourProps> {}
 }

index.mjs

@@ -30,8 +30,6 @@ import {
 
 import { Badge, FileDropArea, Form, SearchableSelect, StaticChip } from './components/custom/index.js'
 
-import * as uiComponentTypes from './components/ui-components.d.ts'
-
 export {
   actions,
   Button,
@@ -65,5 +63,4 @@ export {
   StaticChip,
   setNotice,
   Tour,
-  uiComponentTypes,
 }