Convert @theme-ui/theme-provider to TypeScript

[epilande]

Convert @theme-ui/theme-provider to TypeScript.

This PR needs #707.

Related to #668.

[hasparus]

LGTM generally, but there's a small issue I need to investigate (not sure how to unnaprove without requesting changes).

GitHub Actions didn't run on this PR.

I also have two minor issues but I don't think we should address them here.

• There's a missing dependency on theme-provider -> typography which, I think, will fail microbundle after babel packages update.
• The colorMode and setColorMode could be merged to ContextValue in @theme-ui/color-modes instead of being defined in core ahead of time.

[hasparus]

This fails in tests, because Global.styles argument is unknown and it's not assignable to theme.

We'd either need to do

<Global<Theme> styles={correctlyTypedTheme => ({})}>

or

jsx(Global, {
  styles: emotionTheme => {
    const theme = emotionTheme as Theme
    //...
  },
});

Both are in fact assertions. The second one is just explicit. I'll leave it here as a suggestion.

Suggested change

	styles: (theme: Theme) => {
	styles: emotionTheme => {
	const theme = emotionTheme as Theme

[hasparus]

Hey @epilande, I took the liberty of fixing merge conflicts and few minor test problems.

@jxnblk @mxstbr
I followed up on #708 (comment), and made JS tests and examples reflect that the theme prop is now expected.

[hasparus]

Sidenote:

theme-ui/packages/theme-provider/src/index.ts

Lines 34 to 58 in 076cd7b

	})
	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') {
	return jsx(
	CoreProvider,
	{ theme },
	jsx(MDXProvider, {
	components,
	children,
	})
	)
	}

I'm not sure if keyof IntrinsicSxElements here isn't too little. i.e. it's passed to MDXProvider so I think it can actually be any string. Whatever we pass will get used in MDX.

It should actually be okay now if components are defined separately and then passed,
but if someone defines them inline in JSX, she'll get an "extra keys" error.

@epilande Do you think it makes sense?