Merge pull request #724 from hasparus/ts-theme-ui

refactor(theme-ui): add typescript to the root package

Author: mxstbr

packages/core/test/react-jsx.tsx

@@ -2,7 +2,7 @@
 import { jsx } from '../src'
 import renderer from 'react-test-renderer'
 
-const renderJSON = (el: React.ReactNode) => renderer.create(el).toJSON()
+const renderJSON = (el: React.ReactElement) => renderer.create(el).toJSON()
 
 describe('JSX', () => {
   test('accepts sx prop', () => {

packages/theme-ui/package.json

@@ -2,6 +2,7 @@
   "name": "theme-ui",
   "version": "0.3.1",
   "description": "Build consistent, themeable React UIs based on design system constraints",
+  "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "sideEffects": false,
@@ -18,7 +19,8 @@
     "@theme-ui/core": "^0.3.1",
     "@theme-ui/css": "^0.3.1",
     "@theme-ui/mdx": "^0.3.0",
-    "@theme-ui/theme-provider": "^0.3.1"
+    "@theme-ui/theme-provider": "^0.3.1",
+    "@types/theme-ui__components": "^0.2.3"
   },
   "keywords": [
     "theme-ui",

packages/theme-ui/src/index.js

@@ -0,0 +1,42 @@
+import { jsx } from '@theme-ui/core'
+
+export {
+  jsx,
+  Context,
+  merge,
+  useThemeUI,
+  ContextValue,
+  IntrinsicSxElements,
+  SxProps,
+  SxStyleProp,
+} from '@theme-ui/core'
+export { useColorMode, InitializeColorMode } from '@theme-ui/color-modes'
+export { Styled, components } from '@theme-ui/mdx'
+export { ThemeProvider } from '@theme-ui/theme-provider'
+export * from '@theme-ui/components'
+export {
+  css,
+  get,
+  ColorMode,
+  CSSObject,
+  CSSProperties,
+  CSSPseudoSelectorProps,
+  ResponsiveStyleValue,
+  SystemCssProperties,
+  SystemStyleObject,
+  Theme,
+  TLengthStyledSystem,
+  UseThemeFunction,
+} from '@theme-ui/css'
+
+// TODO: work this into root provider/global styles?
+export const BaseStyles = (props: Record<string, unknown>) =>
+  jsx('div', {
+    ...props,
+    sx: {
+      fontFamily: 'body',
+      lineHeight: 'body',
+      fontWeight: 'body',
+      variant: 'styles',
+    },
+  })

packages/theme-ui/src/index.ts

@@ -0,0 +1,8 @@
+{
+  "extends": "../core/tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitAny": false
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}

packages/theme-ui/test/node.js renamed to packages/theme-ui/test/node.tsx

@@ -3590,6 +3590,20 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/styled-system@*":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.7.tgz#b5aeb6efea499103a497da762516cdf38efd9e02"
+  integrity sha512-0zMxF/B5Z4T6ZhCP8CKtxe8wBmH7sqDjK3lOMByNQ6gG/Qf6RDnBp1aZwkReS1uDVhrsPx9J+IbLigpAdYBkrQ==
+  dependencies:
+    csstype "^2.6.9"
+
+"@types/styled-system__css@*":
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/@types/styled-system__css/-/styled-system__css-5.0.5.tgz#f3c8036e551fbf603f1ad39cf317fd0e6ad1e431"
+  integrity sha512-JaKYusiRtP3osDx+PhTPP7Ki68mMKoImv/bhr7lK4UFAxeXvveARD5v5rUY0Oy0pfbNkky/nVgHlgGaPbG/JBQ==
+  dependencies:
+    csstype "^2.6.6"
+
 "@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0":
   version "6.10.0"
   resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.10.0.tgz#590d76e3875a7c536dc744eb530cbf51b6483404"
@@ -3605,6 +3619,29 @@
     "@types/react-dom" "*"
     "@types/testing-library__dom" "*"
 
+"@types/theme-ui@*":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@types/theme-ui/-/theme-ui-0.3.0.tgz#5a8972b1e6060a4699885ea6c91f9d17a957661a"
+  integrity sha512-3PJw/As8C1HeLJXZytGf5Gfz7HBKskbtyOabPsHSNRTr+jLZvIWpFKF9hgDWYp7io35UcLDS5TLcFwiCGGxAzg==
+  dependencies:
+    "@emotion/serialize" "^0.11.15"
+    "@types/react" "*"
+    "@types/styled-system" "*"
+    "@types/styled-system__css" "*"
+    "@types/theme-ui__components" "*"
+    csstype "^2.6.6"
+
+"@types/theme-ui__components@*", "@types/theme-ui__components@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@types/theme-ui__components/-/theme-ui__components-0.2.3.tgz#470c286375f5177d2607f34da4b38c315e66907c"
+  integrity sha512-g0q3IpJxDXPQvWhaVSXJroB74dxD6HAHAfCbb3unV7iaoovrLact1Yxan5cDRMqHf8d7ub3JAvpSmGSdlNJ5OQ==
+  dependencies:
+    "@emotion/core" "^10.0.0"
+    "@emotion/styled" "^10.0.0"
+    "@types/react" "*"
+    "@types/styled-system" "*"
+    "@types/theme-ui" "*"
+
 "@types/tmp@^0.0.32":
   version "0.0.32"
   resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.32.tgz#0d3cb31022f8427ea58c008af32b80da126ca4e3"
@@ -8220,6 +8257,11 @@ csstype@^2.2.0, csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
   integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==
 
+csstype@^2.6.6, csstype@^2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
+  integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"