improve withTheme types (#552)

Author: mshwery

src/theme/index.ts

@@ -1,3 +1,3 @@
 export { default as defaultTheme } from './src/default-theme'
-export { ThemeProvider, ThemeConsumer } from './src/ThemeContext'
-export { default as withTheme } from './src/withTheme'
+export { ThemeProvider, ThemeConsumer, Theme } from './src/ThemeContext'
+export { withTheme } from './src/withTheme'

src/theme/src/ThemeContext.ts

@@ -1,12 +1,22 @@
 import React from 'react'
 import defaultTheme from './default-theme'
 
+export interface Theme {
+  getCodeProps: (appearance: 'default' | 'minimal') => any
+  getFontFamily: (fontFamily?: string) => string
+  getHeadingStyle: (size?: number) => any
+  getLinkClassName: (color?: string) => string
+  getParagraphStyle: (size?: number) => any
+  getTextColor: (colorAlias?: string) => string
+  getTextStyle: (size?: number) => any
+}
+
 /**
  * Use React 16.3+ createContext API.
  */
 const {
   Provider: ThemeProvider,
   Consumer: ThemeConsumer
-} = React.createContext(defaultTheme)
+} = React.createContext<Theme>(defaultTheme)
 
 export { ThemeProvider, ThemeConsumer }

src/theme/src/withTheme.tsx

@@ -1,21 +1,26 @@
 import React from 'react'
-import { ThemeConsumer } from './ThemeContext'
+import { ThemeConsumer, Theme } from './ThemeContext'
 
-type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
+type Difference<T, K> = Pick<T, Exclude<keyof T, keyof K>>
 
 interface WithThemeProps {
-  // TODO: type this
-  theme: object
+  /**
+   * The theme context from the ThemeProvider
+   */
+  theme: Theme
 }
 
 /**
  * HOC that injects the `theme` from the ThemeConsumer into the wrapper component.
  */
-export default function withTheme<P extends WithThemeProps>(Component: React.ComponentType<P>) {
-  const displayName =
-    Component.displayName || Component.name || 'Component'
+export function withTheme<P extends WithThemeProps>(
+  Component: React.ComponentType<P>
+): React.ComponentClass<Difference<P, WithThemeProps>, {}> {
+  const displayName = Component.displayName || Component.name || 'Component'
 
-  return class WithTheme extends React.Component<Omit<P, keyof WithThemeProps>> {
+  return class WithTheme extends React.Component<
+    Difference<P, WithThemeProps>
+  > {
     static displayName = `withTheme(${displayName})`
 
     render() {

src/typography/src/Text.tsx

@@ -1,21 +1,26 @@
 import React, { PureComponent } from 'react'
 import Box from 'ui-box'
-import { withTheme } from '../../theme'
-
-interface Theme {
-  getTextStyle: (size?: number) => any
-  getTextColor: (colorAlias?: string) => string
-  getFontFamily: (fontFamily?: string) => string
-}
+import { withTheme, Theme } from '../../theme'
 
 interface TextProps {
-  /** The color (alias or valid color) applied to the text */
+  /**
+   * The color (alias or valid color) applied to the text
+   */
   color?: string
-  /** The font family alias applied to the text */
+
+  /**
+   * The font family alias applied to the text
+   */
   fontFamily?: 'ui' | 'display' | 'mono'
-  /** The size of the text style */
+
+  /**
+   * The size of the text style
+   */
   size?: 300 | 400 | 500 | 600
-  /** Theme provided by ThemeProvider. */
+
+  /**
+   * Theme provided by ThemeProvider.
+   */
   theme: Theme
 }