Merge pull request #473 from Pwuts/improve-types

feat(types): improve & add type declarations

Author: codebender828

packages/chakra-ui-core/package.json

@@ -53,6 +53,7 @@
     "vue": "^2.6.10"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-common-types": "^0.2.36",
     "rimraf": "^3.0.2"
   },
   "keywords": [

packages/chakra-ui-core/src/CToast/CToast.d.ts

@@ -0,0 +1,14 @@
+interface ChakraToastOptions {
+  position?: 'bottom' | 'top' | 'right' | 'left'
+  duration?: number
+  render?: (options: { onClose?: VoidFunction, id: any }) => any
+  title?: string
+  description?: string
+  status?: 'info' | 'warning' | 'success' | 'error'
+  variant?: 'solid' | 'subtle' | 'top-accent' | 'left-accent'
+  isClosable?: boolean
+}
+
+function useToast(): (options: ChakraToastOptions) => void
+
+export default useToast

packages/chakra-ui-core/src/CToast/index.d.ts

@@ -0,0 +1,2 @@
+import CToast from './CToast'
+export default CToast

packages/chakra-ui-core/types/chakra.d.ts

@@ -1,34 +1,24 @@
 import { PluginObject } from "vue"
+import { IconPack } from "@fortawesome/fontawesome-common-types"
+import { Theme } from "../../chakra-ui-theme/types"
 
-export type Theme = {
-  breakpoints: any
-  zIndices: any
-  radii: any
-  opacity: any
-  borders: any
-  colors: any
-  borderWidths: any
-  sizes: any
-  shadows: any
-  space: any
-  fontSizes: any
-  fonts: any
-  fontWeights: any
-  lineHeights: any
-  letterSpacings: any
+export type Icon = {
+  path: string
+  viewBox?: string
+  attrs?: any
 }
 
 export type Options = {
   theme: Theme
   extendTheme: Theme
   icons: {
-      extend: any
+      extend: { [name: string]: Icon }
       iconPack: string
-      iconSet: any
+      iconSet: IconPack
   }
 }
 
-export type Chakra = PluginObject<Options>
+export type ChakraPlugin = PluginObject<Options>
 
-declare let chakra: Chakra
-export default chakra
+declare let chakra: ChakraPlugin
+export default chakra

packages/chakra-ui-core/types/index.d.ts

@@ -1,4 +1,16 @@
-import Chakra from "./chakra"
+import Chakra, { Icon } from "./chakra"
+import { Theme } from "../../chakra-ui-theme/types"
+import useToast from "../src/CToast"
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $toast: ReturnType<typeof useToast>
+    $chakra: {
+      theme: Theme
+      icons: { [name: string]: Icon }
+    }
+  }
+}
 
 export * from './component'
-export default Chakra
+export default Chakra

packages/chakra-ui-nuxt/package.json

@@ -11,6 +11,7 @@
   ],
   "files": ["lib"],
   "main": "lib/module.js",
+  "types": "types/index.d.ts",
   "scripts": {
     "dev": "nuxt example/base",
     "lint": "eslint --ext .js,.vue .",

packages/chakra-ui-nuxt/types/index.d.ts

@@ -0,0 +1,31 @@
+import Chakra, { Icon } from "./chakra"
+import { Theme } from "../../chakra-ui-theme/types"
+import useToast from "../src/CToast"
+
+declare module '@nuxt/types' {
+  interface Context {
+    $toast?: ReturnType<typeof useToast>
+    $chakra: {
+      theme: Theme
+      icons: { [name: string]: Icon }
+    }
+  }
+
+  interface NuxtAppOptions {
+    $toast?: ReturnType<typeof useToast>
+    $chakra: {
+      theme: Theme
+      icons: { [name: string]: Icon }
+    }
+  }
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $toast: ReturnType<typeof useToast>
+    $chakra: {
+      theme: Theme
+      icons: { [name: string]: Icon }
+    }
+  }
+}

packages/chakra-ui-theme/package.json

@@ -17,6 +17,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "module": "src/index.js",
+  "types": "types/index.d.ts",
   "files": [
     "dist",
     "src"

packages/chakra-ui-theme/types/index.d.ts

@@ -0,0 +1,25 @@
+export type Theme = {
+  breakpoints: { [key: string]: string }
+  zIndices: { [key: string]: string | number }
+  radii:    { [key: string]: string }
+  opacity:  { [key: string]: string }
+  borders:  { [key: string]: string }
+  colors:   { [key: string]: string | { [opacity: string]: string }}
+  fonts: {
+    heading: string
+    body: string
+    mono: string
+  }
+  fontSizes:      { [key: string]: string }
+  fontWeights:    { [key: string]: number }
+  letterSpacings: { [key: string]: string }
+  lineHeights:    { [key: string]: string }
+  borderWidths:   { [key: string]: string }
+  shadows:  { [key: string]: string }
+  sizes:    { [key: string]: string }
+  space:    { [key: string]: string }
+}
+
+declare const theme: Theme
+
+export default theme

yarn.lock

@@ -3061,6 +3061,11 @@
     unique-filename "^1.1.1"
     which "^1.3.1"
 
+"@fortawesome/fontawesome-common-types@^0.2.36":
+  version "0.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
+  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+
 "@gulp-sourcemaps/map-sources@1.X":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/map-sources/-/map-sources-1.0.0.tgz#890ae7c5d8c877f6d384860215ace9d7ec945bda"