Merge pull request #696 from LekoArts/ts-match-media

@theme-ui/match-media : TypeScript conversion

Author: mxstbr

packages/css/src/types.ts

@@ -511,7 +511,7 @@ export type ColorMode = {
 }
 
 export interface Theme {
-  breakpoints?: ObjectOrArray<number | string | symbol>
+  breakpoints?: Array<string>
   mediaQueries?: { [size: string]: string }
   space?: ObjectOrArray<CSS.MarginProperty<number | string>>
   fontSizes?: ObjectOrArray<CSS.FontSizeProperty<number>>

packages/match-media/package.json

@@ -2,21 +2,24 @@
   "name": "@theme-ui/match-media",
   "version": "0.3.1",
   "description": "React hooks for theme-ui breakpoints",
+  "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "author": "Brent Jackson <[email protected]>",
   "license": "MIT",
   "repository": "system-ui/theme-ui",
   "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"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
     "react": "^16.9.0",
-    "theme-ui": "^0.3.1"
+    "@theme-ui/core": "^0.3.1",
+    "@theme-ui/css": "^0.3.1"
   },
   "peerDependencies": {
     "react": "^16.9.0",

packages/match-media/src/index.js renamed to packages/match-media/src/index.ts

@@ -1,10 +1,15 @@
 import { useState, useEffect, useCallback } from 'react'
-import { useThemeUI } from 'theme-ui'
+import { useThemeUI } from '@theme-ui/core'
+import { Theme } from '@theme-ui/css'
 
 // Shared with @theme-ui/css
 const defaultBreakpoints = [40, 52, 64].map(n => n + 'em')
 
-export const useBreakpointIndex = (options = {}) => {
+type defaultOptions = {
+  defaultIndex?: number
+}
+
+export const useBreakpointIndex = (options: defaultOptions = {}) => {
   const context = useThemeUI()
   const { defaultIndex = 0 } = options
   const breakpoints =
@@ -47,7 +52,9 @@ export const useBreakpointIndex = (options = {}) => {
   return value
 }
 
-export const useResponsiveValue = (values, options) => {
+type Values = ((theme: Theme | null) => string[]) | string[]
+
+export const useResponsiveValue = (values: Values, options: defaultOptions = {}) => {
   const { theme } = useThemeUI()
   const array = typeof values === 'function' ? values(theme) : values
   const index = useBreakpointIndex(options)

packages/match-media/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "strict": true
+  }
+}