fix(types): fix TypeScript definitions (#108)

- Adjust the build step so core-em and core-sc have their own independent
type definitions, and copy the shared definitions to a
'shared/index.d.ts' module.
- Add a "tsc:check" CI script to ensure type definition correctness.

Author: elliottsj

config/rollup.js

@@ -24,12 +24,20 @@ export const getRollupConfig = ({
         exclude: 'node_modules/**',
         configFile: path.join(pwd, '../../babel.config.js'),
       }),
-      copyTypeScriptDefs
-        ? copy({
-            files: `${CORE_DIR}/*.d.ts`,
-            dest: DIST_DIR,
-          })
-        : null,
+      ...(
+        copyTypeScriptDefs
+          ? [
+            copy({
+              files: `${CORE_DIR}/*.d.ts`,
+              dest: `${DIST_DIR}/shared`,
+            }),
+            copy({
+              files: `${SOURCE_DIR}/*.d.ts`,
+              dest: DIST_DIR
+            })
+          ]
+          : []
+      ),
     ],
   }
 

package.json

@@ -7,12 +7,13 @@
     "build": "lerna run build",
     "build:docs": "yarn build && docz build && cp _redirects .docz/dist",
     "build:watch": "WATCH_MODE=true lerna run --parallel build -- --watch",
-    "ci": "yarn lint && yarn test && yarn build && bundlesize",
+    "ci": "yarn lint && yarn test && yarn build && yarn tsc:check && bundlesize",
     "dev": "docz dev",
     "format": "prettier --write \"**/*.{js,json,md,mdx}\"",
     "lint": "eslint .",
     "release": "lerna publish --conventional-commits --force-publish=* && conventional-github-releaser --preset angular",
-    "test": "jest"
+    "test": "jest",
+    "tsc:check": "tsc --noEmit --strict ./packages/core-em/dist/index.d.ts ./packages/core-sc/dist/index.d.ts"
   },
   "bundlesize": [
     {
@@ -36,6 +37,8 @@
     "@emotion/core": "^10.0.7",
     "@emotion/styled": "^10.0.7",
     "@material-ui/system": "^3.0.0-alpha.2",
+    "@types/react": "^16.7.22",
+    "@types/styled-components": "^4.1.6",
     "babel-core": "^7.0.0-0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.0.0",
@@ -79,6 +82,7 @@
     "standard-version": "^4.4.0",
     "styled-components": "^4.1.3",
     "styled-system": "^3.2.1",
+    "typescript": "^3.3.1",
     "terser": "3.14.1",
     "uglifyjs-webpack-plugin": "^2.1.1",
     "webpack": "^4.29.0"

packages/core-em/src/index.d.ts

@@ -0,0 +1,27 @@
+import * as emotionCore from '@emotion/core'
+import { withTheme } from 'emotion-theming'
+import { ThemeType } from './shared'
+
+export * from './shared'
+
+export const Normalize: ReturnType<typeof withTheme>
+
+export type ResponsiveUtilityStyles =
+  | string
+  | emotionCore.ArrayInterpolation<undefined>
+
+export const up: (
+  name: string | number,
+  code: ResponsiveUtilityStyles,
+) => (props: Object) => any
+
+export const down: (
+  name: string | number,
+  code: ResponsiveUtilityStyles,
+) => (props: Object) => any
+
+export const between: (
+  lower: string | number,
+  upper: string | number,
+  code: ResponsiveUtilityStyles,
+) => (props: Object) => any

packages/core-sc/src/index.d.ts

@@ -0,0 +1,26 @@
+import * as styledComponents from 'styled-components'
+import { ThemeType } from './shared'
+
+export * from './shared'
+
+export const Normalize: styledComponents.GlobalStyleComponent<{__scTheme?: ThemeType},ThemeType>
+
+export type ResponsiveUtilityStyles =
+  | string
+  | styledComponents.FlattenSimpleInterpolation
+
+export const up: (
+  name: string | number,
+  code: ResponsiveUtilityStyles,
+) => (props: Object) => any
+
+export const down: (
+  name: string | number,
+  code: ResponsiveUtilityStyles,
+) => (props: Object) => any
+
+export const between: (
+  lower: string | number,
+  upper: string | number,
+  code: ResponsiveUtilityStyles,
+) => (props: Object) => any

packages/shared/core/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 
 import * as React from 'react'
-import * as styledComponents from 'styled-components'
 
 export type DefaultColors = 'primary'
 | 'secondary'
@@ -16,9 +15,9 @@ export type Sizes = "sm" | "md" | "lg"
 
 interface InputType {
   checked?: boolean
-  onChange?: (e) => void
-  onFocus?: (e) => void
-  onBlur?: (e) => void
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onFocus?: React.FocusEventHandler<HTMLInputElement>
+  onBlur?: React.FocusEventHandler<HTMLInputElement>
   style?: React.CSSProperties
 }
 
@@ -595,7 +594,7 @@ export const lazyTh: (name: string) => (props: Object) => string
 
 export const th: (
   name: string,
-  transform?: (res) => string,
+  transform?: (res: any) => string,
 ) => (props: Object) => string
 
 export const mixin: (
@@ -630,8 +629,6 @@ export const composeStyles: (
   ...funcs: Array<(props: Object) => string>
 ) => ((props: Object) => Object)
 
-export const Normalize: styledComponents.GlobalStyleComponent<{__scTheme?: ThemeType},ThemeType>
-
 export interface ModalProps extends BoxProps {
   children?: React.ReactNode
   onClose?: () => void
@@ -721,23 +718,3 @@ export const mediaBetweenWidth: (
   min: string | number,
   max: string | number,
 ) => string
-
-export type ResponsiveUtilityStyles =
-  | string
-  | styledComponents.FlattenSimpleInterpolation
-
-export const up: (
-  name: string | number,
-  code: ResponsiveUtilityStyles,
-) => (props: Object) => any
-
-export const down: (
-  name: string | number,
-  code: ResponsiveUtilityStyles,
-) => (props: Object) => any
-
-export const between: (
-  lower: string | number,
-  upper: string | number,
-  code: ResponsiveUtilityStyles,
-) => (props: Object) => any

yarn.lock

@@ -1792,6 +1792,28 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.1.tgz#48fd98c1561fe718b61733daed46ff115b496e18"
   integrity sha512-eqz8c/0kwNi/OEHQfvIuJVLTst3in0e7uTKeuY+WL/zfKn0xVujOTp42bS/vUUokhK5P2BppLd9JXMOMHcgbjA==
 
+"@types/prop-types@*":
+  version "15.5.8"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.8.tgz#8ae4e0ea205fe95c3901a5a1df7f66495e3a56ce"
+  integrity sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw==
+
+"@types/react@*", "@types/react@^16.7.22":
+  version "16.7.22"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.22.tgz#5bc6d166d5ac34b835756f0b736c7b1af0043e81"
+  integrity sha512-j/3tVoY09kHcTfbia4l67ofQn9xvktUvlC/4QN0KuBHAXlbU/wuGKMb8WfEb/vIcWxsOxHv559uYprkFDFfP8Q==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
+"@types/styled-components@^4.1.6":
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.6.tgz#9aa1d47dbc6bae540083869bcc6c639c6e9af0fe"
+  integrity sha512-w/ra/Tk9oPMvWpWId7esZNY1MOa6E9BYUPLl4scVJdYnrYuy5ITLbku8dGDCVH/vjjuegrHBCRYvFLQOYJ+uHg==
+  dependencies:
+    "@types/node" "*"
+    "@types/react" "*"
+    csstype "^2.2.0"
+
 "@types/unist@*", "@types/unist@^2.0.0":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.2.tgz#5dc0a7f76809b7518c0df58689cd16a19bd751c6"
@@ -4359,6 +4381,11 @@ cssstyle@^1.0.0:
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.2.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.2.tgz#3043d5e065454579afc7478a18de41909c8a2f01"
+  integrity sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow==
+
 csstype@^2.5.7:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.2.tgz#3043d5e065454579afc7478a18de41909c8a2f01"
@@ -13374,6 +13401,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.1.tgz#6de14e1db4b8a006ac535e482c8ba018c55f750b"
+  integrity sha512-cTmIDFW7O0IHbn1DPYjkiebHxwtCMU+eTy30ZtJNBPF9j2O1ITu5XH2YnBeVRKWHqF+3JQwWJv0Q0aUgX8W7IA==
+
 ua-parser-js@^0.7.18:
   version "0.7.19"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"