Add types to exported utility functions (#820)

* Types for exported utility functions

* Add script to format types project

packages/types/package.json

@@ -23,7 +23,8 @@
     "directory": "packages/types"
   },
   "scripts": {
-    "test": "dtslint types"
+    "test": "dtslint types",
+    "format": "prettier --write types"
   },
   "bugs": {
     "url": "https://github.com/priceline/design-system/issues"
@@ -33,6 +34,7 @@
     "@types/styled-system": "^4.2.2"
   },
   "devDependencies": {
-    "dtslint": "^3.5.2"
+    "dtslint": "^3.5.2",
+    "prettier": "^2.0.5"
   }
 }

packages/types/types/index.d.ts

@@ -153,7 +153,10 @@ export interface ThemeProviderProps {
 
 export class Absolute extends React.Component<AbsoluteProps, any> {}
 export class Avatar extends React.Component<any, any> {}
-export class BackgroundImage extends React.Component<BackgroundImageProps, any> {}
+export class BackgroundImage extends React.Component<
+  BackgroundImageProps,
+  any
+> {}
 export class Badge extends React.Component<any, any> {}
 export class Banner extends React.Component<any, any> {}
 export class BlockLink extends React.Component<LinkProps, any> {}
@@ -192,7 +195,10 @@ export class Label extends React.Component<any, any> {
   static isLabel: boolean
 }
 export class Link extends React.Component<LinkProps, any> {}
-export class PlaceholderImage extends React.Component<PlaceholderImageProps, any> {}
+export class PlaceholderImage extends React.Component<
+  PlaceholderImageProps,
+  any
+> {}
 export class Radio extends React.Component<any, any> {}
 export class RatingBadge extends React.Component<any, any> {}
 export class Relative extends React.Component<RelativeProps, any> {}
@@ -228,7 +234,47 @@ export interface ThemeArgs {
   theme: Theme
 }
 
+export interface ColorArgs extends ThemeArgs {
+  color?: string
+  bg?: string
+}
+
+interface CustomBreakpoints {
+  [key: string]: string | number
+}
+
+interface PaletteColor {
+  lightest?: string
+  light?: string
+  base: string
+  dark?: string
+  darkest?: string
+}
+
+interface Palette {
+  [key: string]: PaletteColor
+}
+
+interface CreateThemeResult extends Theme {
+  contrastRatio: number
+  breakpoints: any[]
+  mediaQueries: any[]
+  palette: Palette
+}
+
 export function getContrastRatio(colorA: string, colorB: string): number
 export function deprecatedPropType(replacement: string): Error | undefined
 export function borders(props: ThemeArgs): object
 export function hasPaletteColor(props: ThemeArgs): boolean
+export function color(props: ColorArgs): string[] | string
+export function getPaletteColor(
+  color: string,
+  shade?: string
+): (props: ThemeArgs) => any
+export function getTextColorOn(name: string): (props: ThemeArgs) => any
+export function createTheme(
+  theme: Theme,
+  customBreakpoints: CustomBreakpoints
+): CreateThemeResult
+
+type theme = Theme

packages/types/types/test.tsx

@@ -1,23 +1,28 @@
 import {
-  getContrastRatio,
-  deprecatedPropType,
+  Absolute,
+  BackgroundImage,
+  BlockLink,
   borders,
-  hasPaletteColor,
   Box,
   Card,
-  Text,
-  Absolute,
+  color,
+  createTheme,
+  deprecatedPropType,
   Flex,
-  Hide,
-  ThemeProvider,
-  Link,
-  BlockLink,
+  getContrastRatio,
+  getPaletteColor,
+  getTextColorOn,
+  hasPaletteColor,
   Heading,
-  Truncate,
-  SrOnly,
+  Hide,
   Image,
-  BackgroundImage,
+  Link,
   PlaceholderImage,
+  SrOnly,
+  Text,
+  theme as ThemeType,
+  ThemeProvider,
+  Truncate,
 } from 'pcln-types'
 import theme from '../../core/src/theme'
 import * as React from 'react'
@@ -37,6 +42,16 @@ borders({
 
 hasPaletteColor({ theme }) // $ExpectType boolean
 
+color({ theme, bg: 'primary', color: 'secondary' }) // $ExpectType string | string[]
+
+getPaletteColor('primary', 'light') // $ExpectType (props: ThemeArgs) => any
+
+getTextColorOn('bla') // $ExpectType (props: ThemeArgs) => any
+
+createTheme(theme, {}) // $ExpectType CreateThemeResult
+
+const myTheme: ThemeType = theme
+
 //
 // Design System Core Components
 // =============================================================================================