Merge pull request #708 from epilande/ts-theme-provider

Convert @theme-ui/theme-provider to TypeScript

Author: hasparus

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- Make ThemeProvider `theme` prop required
 - Removes overriding property on editor combobox
 - Adjust media query sort logic #600
 - Fixed link to Gatsby Plugin page in `getting-started` page. Issue #602

examples/codesandbox-starter/src/index.js

@@ -6,7 +6,7 @@ import { jsx, Layout, Styled } from 'theme-ui'
 
 function App() {
   return (
-    <ThemeProvider>
+    <ThemeProvider theme={{}}>
       <Layout sx={{ p: 3 }}>
         <Reset />
         <Styled.h1 sx={{ color: 'primary', mb: 3 }}>Hello Theme UI</Styled.h1>

packages/color-modes/test/index.js

@@ -90,7 +90,7 @@ test('useColorMode updates color mode state', () => {
     )
   }
   const tree = render(
-    <ThemeProvider>
+    <ThemeProvider theme={{}}>
       <ColorModeProvider>
         <Button />
       </ColorModeProvider>
@@ -182,7 +182,7 @@ test('uses default mode', () => {
     return <button children="test" />
   }
   const tree = render(
-    <ThemeProvider>
+    <ThemeProvider theme={{}}>
       <ColorModeProvider>
         <Button />
       </ColorModeProvider>
@@ -200,7 +200,7 @@ test('initializes mode based on localStorage', () => {
     return <button children="test" />
   }
   const tree = render(
-    <ThemeProvider>
+    <ThemeProvider theme={{}}>
       <ColorModeProvider>
         <Button />
       </ColorModeProvider>
@@ -237,7 +237,7 @@ test('retains initial context', () => {
     return false
   }
   render(
-    <ThemeProvider>
+    <ThemeProvider theme={{}}>
       <ColorModeProvider>
         <Consumer />
       </ColorModeProvider>
@@ -340,7 +340,7 @@ test('does not initialize mode from prefers-color-scheme media query when useCol
     return false
   }
   render(
-    <ThemeProvider>
+    <ThemeProvider theme={{}}>
       <ColorModeProvider>
         <Consumer />
       </ColorModeProvider>
@@ -606,7 +606,7 @@ test('warns when localStorage is disabled', () => {
   }
 
   render(
-    <ThemeProvider>
+    <ThemeProvider theme={{}}>
       <ColorModeProvider>
         <Consumer />
       </ColorModeProvider>

packages/core/src/index.ts

@@ -39,11 +39,13 @@ export const jsx: typeof React.createElement = (type, props, ...children) =>
 
 export interface ContextValue {
   __EMOTION_VERSION__: string
-  theme: Theme | null
+  theme: Theme
+  colorMode?: string
+  setColorMode?: () => void
 }
 export const Context = React.createContext<ContextValue>({
   __EMOTION_VERSION__,
-  theme: null,
+  theme: {},
 })
 
 export const useThemeUI = () => React.useContext(Context)
@@ -76,7 +78,7 @@ interface BaseProviderProps {
 const BaseProvider: React.FC<BaseProviderProps> = ({ context, children }) =>
   jsx(
     EmotionContext.Provider,
-    { value: context.theme! },
+    { value: context.theme },
     jsx(Context.Provider, {
       value: context,
       children,
@@ -103,7 +105,7 @@ export function ThemeProvider({ theme, children }: ThemeProviderProps) {
 
   const context =
     typeof theme === 'function'
-      ? { ...outer, theme: theme(outer.theme!) }
+      ? { ...outer, theme: theme(outer.theme) }
       : merge.all<ContextValue>({}, outer, { theme })
 
   return jsx(BaseProvider, { context }, children)

packages/core/test/index.js

@@ -4,13 +4,7 @@ import renderer from 'react-test-renderer'
 import { render, fireEvent, cleanup, act } from '@testing-library/react'
 import { matchers } from 'jest-emotion'
 import mockConsole from 'jest-mock-console'
-import {
-  jsx,
-  Context,
-  useThemeUI,
-  merge,
-  ThemeProvider,
-} from '../src'
+import { jsx, Context, useThemeUI, merge, ThemeProvider } from '../src'
 
 afterEach(cleanup)
 
@@ -21,7 +15,7 @@ const renderJSON = el => renderer.create(el).toJSON()
 describe('ThemeProvider', () => {
   test('renders', () => {
     const json = renderJSON(
-      <ThemeProvider>
+      <ThemeProvider theme={{}}>
         <h1>Hello</h1>
       </ThemeProvider>
     )
@@ -35,7 +29,7 @@ describe('ThemeProvider', () => {
         value={{
           emotionVersion: '9.0.0',
         }}>
-        <ThemeProvider>Conflicting versions</ThemeProvider>
+        <ThemeProvider theme={{}}>Conflicting versions</ThemeProvider>
       </Context.Provider>
     )
     expect(console.warn).toBeCalled()
@@ -104,20 +98,21 @@ describe('ThemeProvider', () => {
       cards: {
         default: {
           border: t => `1px solid ${t.colors.primary}`,
-        }
-      }
+        },
+      },
     }
     const json = renderJSON(
-      jsx(ThemeProvider, { theme },
+      jsx(
+        ThemeProvider,
+        { theme },
         jsx('div', {
           sx: {
             variant: 'cards.default',
-          }
+          },
         })
       )
     )
     expect(json).toHaveStyleRule('border', '1px solid tomato')
-
   })
 })
 
@@ -151,13 +146,15 @@ describe('jsx', () => {
 
   test('css prop accepts functions', () => {
     const json = renderJSON(
-      jsx(ThemeProvider, {
-        theme: {
-          colors: {
-            primary: 'tomato',
-          }
-        }
-      },
+      jsx(
+        ThemeProvider,
+        {
+          theme: {
+            colors: {
+              primary: 'tomato',
+            },
+          },
+        },
         jsx('div', {
           css: t => ({
             color: t.colors.primary,
@@ -338,7 +335,7 @@ describe('useThemeUI', () => {
         theme={{
           colors: {
             text: 'tomato',
-          }
+          },
         }}>
         <GetContext />
       </ThemeProvider>
@@ -347,4 +344,3 @@ describe('useThemeUI', () => {
     expect(context.theme.colors.text).toBe('tomato')
   })
 })
-

packages/css/package.json

@@ -7,8 +7,8 @@
   "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"
   },
   "author": "Brent Jackson",
   "license": "MIT",

packages/css/src/index.ts

@@ -1,6 +1,4 @@
-import * as CSS from 'csstype'
-
-import { SystemStyleObject, UseThemeFunction, Theme } from './types'
+import { CSSObject, SystemStyleObject, UseThemeFunction, Theme } from './types'
 
 export * from './types'
 
@@ -256,7 +254,7 @@ type CssPropsArgument = { theme: Theme } | Theme
 
 export const css = (args: SystemStyleObject = {}) => (
   props: CssPropsArgument = {}
-): CSS.Properties => {
+): CSSObject => {
   const theme: Theme = {
     ...defaultTheme,
     ...('theme' in props ? props.theme : props),

packages/docs/src/pages/guides/mdx-layout-components.mdx

@@ -18,7 +18,7 @@ As an example, create a new component with the `ThemeProvider` and a wrapping `<
 import { jsx, ThemeProvider } from 'theme-ui'
 
 export default props => (
-  <ThemeProvider>
+  <ThemeProvider theme={{}}>
     <div {...props} />
   </ThemeProvider>
 )

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,15 +1,25 @@
-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 => {
-      if (theme.useBodyStyles === false || (theme.styles && !theme.styles.root))
+    styles: emotionTheme => {
+      const theme = emotionTheme as Theme
+      if (
+        theme.useBodyStyles === false ||
+        (theme.styles && !theme.styles.root)
+      ) {
         return false
-      const boxSizing = theme.useBorderBox === false ? null : 'border-box'
+      }
+      const boxSizing = theme.useBorderBox === false ? undefined : 'border-box'
 
       return css({
         '*': {
@@ -23,7 +33,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') {