Merge pull request #157 from silinternational/develop

Release
silinternational · Aug 18, 2022 · 85a72c4 · 85a72c4
2 parents 8d7d3fd + bcc25f2
commit 85a72c4
Show file tree

Hide file tree

Showing 3 changed files with 381 additions and 124 deletions.
diff --git a/README.md b/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 sass@1.50.x material-components-web@13.0.0 @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 sass@1.50.x material-components-web@13.0.0 @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

diff --git a/index.d.ts b/index.d.ts
@@ -0,0 +1,328 @@
+declare module '@silintl/ui-components' {
+  import type { SvelteComponentTyped } from 'svelte'
+  import type { writable } from 'svelte/store'
+
+  export type actions = writable<any[]>
+
+  interface ButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    disabled?: boolean
+    outlined?: boolean
+    raised?: boolean
+    prependIcon?: string
+    appendIcon?: string
+    url?: string
+  }
+  export class Button extends SvelteComponentTyped<ButtonProps> {}
+
+  export function isAboveMobile(): boolean
+
+  export function isAboveTablet(): boolean
+
+  interface CardProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    secondary?: string
+    outlined?: boolean
+    color?: string
+    isClickable?: boolean
+    noPadding?: boolean
+  }
+  export class Card extends SvelteComponentTyped<CardProps> {}
+
+  interface CheckboxProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    label?: string
+    checked?: boolean
+    disabled?: boolean
+    uppercase?: boolean
+  }
+  export class Checkbox extends SvelteComponentTyped<CheckboxProps> {}
+
+  //Datatable
+  interface DatatableProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    label?: string
+    numberOfCheckboxes?: number
+  }
+  export class Datatable extends SvelteComponentTyped<DatatableProps> {}
+
+  export namespace Datatable {
+    type HeaderProps = svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']>
+    export class Header extends SvelteComponentTyped<HeaderProps> {}
+
+    interface DatatableCheckboxProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+      disabled?: boolean
+      rowId?: string
+    }
+    export class Checkbox extends SvelteComponentTyped<DatatableCheckboxProps> {}
+
+    export namespace Header {
+      interface ItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+        numeric?: boolean
+        columnID?: string
+        sortable?: boolean
+      }
+      export class Item extends SvelteComponentTyped<ItemProps> {}
+      export class Checkbox extends SvelteComponentTyped<HeaderProps> {}
+    }
+
+    type DataProps = svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']>
+    export class Data extends SvelteComponentTyped<DataProps> {}
+
+    export namespace Data {
+      interface RowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+        clickable?: boolean
+      }
+      export class Row extends SvelteComponentTyped<RowProps> {}
+
+      export namespace Row {
+        interface ItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+          numeric?: boolean
+          colspan?: number
+        }
+        export class Item extends SvelteComponentTyped<ItemProps> {}
+      }
+    }
+  }
+
+  export namespace Dialog {
+    export type AlertButton = {
+      label: string
+      action: string
+      class: string
+    }
+    interface AlertProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+      open?: boolean
+      title?: string
+      titleIcon?: string
+      defaultAction?: string
+      buttons?: AlertButton[]
+    }
+    export class Alert extends SvelteComponentTyped<AlertProps> {}
+
+    interface SimpleProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+      open?: boolean
+      title?: string
+    }
+    export class Simple extends SvelteComponentTyped<SimpleProps> {}
+  }
+
+  interface DrawerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    title?: string
+    subtitle?: string
+    menuItems?: {
+      icon: string, label: string, url: string, urlPattern: string, hide: boolean, button: boolean, tooltip: string
+    }[]
+    dismissible?: boolean
+    hasTopAppBar?: boolean
+    hideForTablet?: boolean
+    hideForPhonesOnly?: boolean
+    isFullHeightMenu?: boolean
+    miniMenu?: boolean
+    modal?: boolean
+    toggle?: boolean
+    currentUrl?: string
+  }
+  export class Drawer extends SvelteComponentTyped<DrawerProps> {}
+
+  interface FabProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    icon?: string
+    label?: string
+    mini?: boolean
+    extended?: boolean
+    url?: string
+    action?: Function
+  }
+  export class Fab extends SvelteComponentTyped<FabProps> {}
+
+  interface IconButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    icon?: string
+    ariaLabel?: string
+    url?: string
+    disabled?: boolean
+  }
+  export class IconButton extends SvelteComponentTyped<IconButtonProps> {}
+
+  interface ListProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    twoLine?: boolean
+    avatar?: boolean
+  }
+  export class List extends SvelteComponentTyped<ListProps> {}
+
+  type MenuItem = {
+    icon?: string
+    label?: string
+    url?: string
+    action?: VoidFunction
+    subtitle?: string
+  }
+  interface MenuProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    menuItems?: MenuItem[]
+    menuOpen?: boolean
+  }
+  export class Menu extends SvelteComponentTyped<MenuProps> {}
+
+  interface MoneyInputProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    label?: string
+    value?: number
+    placeholder?: string
+    autofocus?: boolean
+    disabled?: boolean
+    required?: boolean
+    minValue?: string
+    maxValue?: string
+    step?: string
+    description?: string
+  }
+  export class MoneyInput extends SvelteComponentTyped<MoneyInputProps> {}
+
+  export namespace Progress {
+    type CircularProps = svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']>
+    export class Circular extends SvelteComponentTyped<CircularProps> {}
+
+    interface LinearProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+      indeterminate?: boolean
+      value?: number
+    }
+    export class Linear extends SvelteComponentTyped<LinearProps> {}
+  }
+
+  interface SelectProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    options?: { name: string, id: number }[]
+    width?: string
+    disabled?: boolean
+    selectedID?: string
+  }
+  export class Select extends SvelteComponentTyped<SelectProps> {}
+
+  interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    label?: string
+    disabled?: boolean
+    selected?: boolean
+  }
+  export class Switch extends SvelteComponentTyped<SwitchProps> {}
+
+  interface SnackbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    // no exported members
+  }
+  export class Snackbar extends SvelteComponentTyped<SnackbarProps> {}
+
+  interface TabBarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    tab?: number
+  }
+  export class TabBar extends SvelteComponentTyped<TabBarProps> {}
+
+  interface TextAreaProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    label?: string
+    value?: string
+    placeholder?: string
+    rows?: number | string
+    required?: boolean
+    maxlength?: number
+    autofocus?: boolean
+    rtl?: boolean
+    description?: string
+  }
+  export class TextArea extends SvelteComponentTyped<TextAreaProps> {}
+
+  interface TextFieldProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    label?: string
+    value?: string
+    placeholder?: string
+    maxlength?: number
+    autofocus?: boolean
+    disabled?: boolean
+    required?: boolean
+    description?: string
+  }
+  export class TextField extends SvelteComponentTyped<TextFieldProps> {}
+
+  interface TooltipProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    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?: string
+    }
+    export class Wrapper extends SvelteComponentTyped<TooltipWrapperProps> {}
+  }
+
+  interface TopAppBarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    bgColorIsVariant?: boolean
+    dense?: boolean
+    fixed?: boolean
+    navIconBreakpointClass?: string
+  }
+  export class TopAppBar extends SvelteComponentTyped<TopAppBarProps> {}
+
+  interface BadgeProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    color?: string
+    borderRadius?: string
+    padding?: string
+    bordered?: boolean
+  }
+  export class Badge extends SvelteComponentTyped<BadgeProps> {}
+
+  interface CustomCardProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    src?: string
+    alt?: string
+    title?: string
+    icon?: string
+    disabled?: boolean
+    buttons?: { label: string, url: string }[]
+    footerText?: string
+  }
+  export class CustomCard extends SvelteComponentTyped<CustomCardProps> {}
+
+  interface FileDropAreaProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    raised?: boolean
+    outlined?: boolean
+    mimeType?: string
+    uploading?: boolean
+  }
+  export class FileDropArea extends SvelteComponentTyped<FileDropAreaProps> {}
+
+  interface FormProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    // no exported members
+  }
+  export class Form extends SvelteComponentTyped<FormProps> {}
+
+  interface PageProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    loading?: boolean
+    title?: string
+    layout?: string
+    center?: boolean
+    noProgress?: boolean
+  }
+  export class Page extends SvelteComponentTyped<PageProps> {}
+
+  interface StaticChipProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    bgColor?: string
+  }
+  export class StaticChip extends SvelteComponentTyped<StaticChipProps> {}
+
+  export function setNotice(label: string, action?: string, callback?: Function): void
+
+  interface SearchableSelectProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    options: { [key: string]: string }
+    choice?: string
+    placeholder?: string
+    padding?: string
+    width?: string
+    maxlength?: string
+    disabled?: boolean
+  }
+  export class SearchableSelect extends SvelteComponentTyped<SearchableSelectProps> {}
+
+  type steps = 'title' | 'content' | 'left' | 'right' | 'previous' | 'next' | 'target'
+
+  interface TourProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    steps?: { [key in steps]: string | number }[]
+    data?: { [key: string]: string }
+  }
+  export class Tour extends SvelteComponentTyped<TourProps> {}
+}
+
+module '@silintl/ui-components/random' {
+  export function generateRandomID(prefix?: string): string
+}