Convert @theme-ui/theme-provider to TypeScript

Author: epilande

packages/core/src/index.ts

@@ -40,6 +40,8 @@ export const jsx: typeof React.createElement = (type, props, ...children) =>
 export interface ContextValue {
   __EMOTION_VERSION__: string
   theme: Theme | null
+  colorMode?: string
+  setColorMode?: () => void
 }
 export const Context = React.createContext<ContextValue>({
   __EMOTION_VERSION__,

packages/css/src/index.ts

@@ -1,6 +1,7 @@
 import * as CSS from 'csstype'
 
 import { SystemStyleObject, UseThemeFunction, Theme } from './types'
+import { SerializedStyles } from '@emotion/serialize'
 
 export * from './types'
 
@@ -256,7 +257,7 @@ type CssPropsArgument = { theme: Theme } | Theme
 
 export const css = (args: SystemStyleObject = {}) => (
   props: CssPropsArgument = {}
-): CSS.Properties => {
+) => {
   const theme: Theme = {
     ...defaultTheme,
     ...('theme' in props ? props.theme : props),
@@ -297,5 +298,5 @@ export const css = (args: SystemStyleObject = {}) => (
     }
   }
 
-  return result
+  return result as SerializedStyles
 }

packages/theme-provider/package.json

@@ -3,10 +3,12 @@
   "version": "0.4.0-alpha.1",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "source": "src/index.ts",
+  "types": "dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "prepare": "microbundle --no-compress",
-    "watch": "microbundle watch --no-compress"
+    "prepare": "microbundle --no-compress --tsconfig tsconfig.json",
+    "watch": "microbundle watch --no-compress --tsconfig tsconfig.json"
   },
   "dependencies": {
     "@emotion/core": "^10.0.0",

packages/theme-provider/src/index.js renamed to packages/theme-provider/src/index.ts

@@ -1,12 +1,17 @@
-import { jsx, useThemeUI, ThemeProvider as CoreProvider } from '@theme-ui/core'
-import { css } from '@theme-ui/css'
+import {
+  jsx,
+  useThemeUI,
+  ThemeProvider as CoreProvider,
+  IntrinsicSxElements,
+} from '@theme-ui/core'
+import { css, Theme } from '@theme-ui/css'
 import { ColorModeProvider } from '@theme-ui/color-modes'
 import { MDXProvider } from '@theme-ui/mdx'
 import { Global } from '@emotion/core'
 
 const BodyStyles = () =>
   jsx(Global, {
-    styles: theme => {
+    styles: (theme: Theme) => {
       if (theme.useBodyStyles === false || (theme.styles && !theme.styles.root))
         return false
       const boxSizing = theme.useBorderBox === false ? null : 'border-box'
@@ -23,7 +28,17 @@ const BodyStyles = () =>
     },
   })
 
-export const ThemeProvider = ({ theme, components, children }) => {
+interface ThemeProviderProps {
+  theme: Theme
+  children?: React.ReactNode
+  components?: { [key in keyof IntrinsicSxElements]?: React.ReactNode }
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  theme,
+  components,
+  children,
+}) => {
   const outer = useThemeUI()
 
   if (typeof outer.setColorMode === 'function') {

packages/theme-provider/test/__snapshots__/index.js.snap renamed to packages/theme-provider/test/__snapshots__/index.tsx.snap

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-import React from 'react'
 import { jsx } from '@theme-ui/core'
 import { mdx } from '@mdx-js/react'
 import renderer from 'react-test-renderer'
@@ -15,7 +14,7 @@ const renderJSON = el => renderer.create(el).toJSON()
 
 test('renders', () => {
   const json = renderJSON(
-    <ThemeProvider>
+    <ThemeProvider theme={{}}>
       <h1>Hello</h1>
     </ThemeProvider>
   )
@@ -29,6 +28,8 @@ test('renders with theme', () => {
         useCustomProperties: false,
         colors: {
           primary: 'tomato',
+          background: 'white',
+          text: 'black',
         },
       }}>
       <h1 sx={{ color: 'primary' }}>Hello</h1>
@@ -82,7 +83,7 @@ test('renders with nested provider', () => {
 })
 
 test('renders with custom components', () => {
-  const h1 = props => <pre {...props} />
+  const h1 = (props: any) => <pre {...props} />
 
   const json = renderJSON(
     <ThemeProvider
@@ -136,7 +137,7 @@ test('renders global styles', () => {
 
 test('resets body margin', () => {
   const root = render(
-    <ThemeProvider>
+    <ThemeProvider theme={{}}>
       <h1>Hello</h1>
     </ThemeProvider>
   )

packages/theme-provider/test/index.js renamed to packages/theme-provider/test/index.tsx

@@ -0,0 +1,4 @@
+{
+  "extends": "../core/tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}