Merge branch 'master' into ts-theme-provider

* master: chore(deps): bump @emotion/core from 10.0.22 to 10.0.28 Link fix in docs. refactor(theme-ui): add typescript chore(deps): bump gatsby-remark-prismjs from 3.3.30 to 3.3.31 chore(deps): bump polished from 3.4.2 to 3.4.4 chore(deps-dev): bump @testing-library/react from 9.4.0 to 9.4.1 chore(deps-dev): bump husky from 4.2.1 to 4.2.3 chore(deps): bump gatsby-plugin-mdx from 1.0.70 to 1.0.73 Fix useBorderBox feat: add type variable to hook task: add root tsconfig
system-ui · Mar 5, 2020 · 806ebb0 · 806ebb0
2 parents 0084f8a + e3a24ce
commit 806ebb0
Show file tree

Hide file tree

Showing 33 changed files with 194 additions and 247 deletions.
diff --git a/packages/color/tsconfig.json b/packages/color/tsconfig.json
@@ -1,10 +1,4 @@
 {
-  "compilerOptions": {
-    "strict": true,
-
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node"
-  },
+  "extends": "../../tsconfig.json",
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"]
 }
diff --git a/packages/core/test/react-jsx.tsx b/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', () => {

diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
@@ -1,9 +1,8 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "jsx": "react"
+    "jsx": "react",
+    "strict": false
   },
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
@@ -556,7 +556,7 @@ export interface Theme {
   /**
    * Adds a global box-sizing: border-box style
    */
-  useBoxSizing?: boolean
+  useBorderBox?: boolean
 
   /**
    * Define the colors that are available through this theme

diff --git a/packages/css/tsconfig.json b/packages/css/tsconfig.json
@@ -1,5 +1,7 @@
 {
-  "extends": "../core/tsconfig.json",
-  "compilerOptions": {},
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "strict": false
+  },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"]
 }
diff --git a/packages/custom-properties/tsconfig.json b/packages/custom-properties/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/docs/src/pages/styling-mdx.mdx b/packages/docs/src/pages/styling-mdx.mdx
@@ -87,7 +87,7 @@ colors and other styles can be added to `theme.styles.pre` to target child eleme
 Prism.js adds `<span>` elements with class names that can be used as child selectors.
 
 
-To enable syntax highlighting in MDX, see the [`@theme-ui/prism`](/prism) package.
+To enable syntax highlighting in MDX, see the [`@theme-ui/prism`](/packages/prism) package.
 
 [prism.js]: https://github.com/PrismJS/prism
 

diff --git a/packages/docs/src/pages/theming.mdx b/packages/docs/src/pages/theming.mdx
@@ -173,7 +173,7 @@ Flag | Default | Description
 `useBodyStyles` | `true` | Adds styles defined in `theme.styles.root` to the `<body>` element along with `color` and `background-color`
 `initialColorModeName` | `'default'` | The key used for the top-level color palette in `theme.colors`
 `useColorSchemeMediaQuery` | `false` | Initializes the color mode based on the `prefers-color-scheme` media query
-`useBoxSizing` | `true` | Adds a global `box-sizing: border-box` style
+`useBorderBox` | `true` | Adds a global `box-sizing: border-box` style
 
 ## Example Theme
 

diff --git a/packages/match-media/src/index.ts b/packages/match-media/src/index.ts
@@ -52,9 +52,12 @@ export const useBreakpointIndex = (options: defaultOptions = {}) => {
   return value
 }
 
-type Values = ((theme: Theme | null) => string[]) | string[]
+type Values<T> = ((theme: Theme | null) => T[]) | T[]
 
-export const useResponsiveValue = (values: Values, options: defaultOptions = {}) => {
+export function useResponsiveValue<T>(
+  values: Values<T>,
+  options: defaultOptions = {}
+): T {
   const { theme } = useThemeUI()
   const array = typeof values === 'function' ? values(theme) : values
   const index = useBreakpointIndex(options)

diff --git a/packages/match-media/tsconfig.json b/packages/match-media/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
-}
+  "extends": "../../tsconfig.json"
+}
diff --git a/packages/preset-base/tsconfig.json b/packages/preset-base/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/preset-bootstrap/tsconfig.json b/packages/preset-bootstrap/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/preset-bulma/tsconfig.json b/packages/preset-bulma/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/preset-dark/tsconfig.json b/packages/preset-dark/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/preset-deep/tsconfig.json b/packages/preset-deep/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/preset-funk/tsconfig.json b/packages/preset-funk/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/preset-future/tsconfig.json b/packages/preset-future/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/preset-polaris/tsconfig.json b/packages/preset-polaris/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/preset-roboto/tsconfig.json b/packages/preset-roboto/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/preset-swiss/tsconfig.json b/packages/preset-swiss/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/preset-system/tsconfig.json b/packages/preset-system/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/preset-tailwind/tsconfig.json b/packages/preset-tailwind/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/preset-tosh/tsconfig.json b/packages/preset-tosh/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/presets/tsconfig.json b/packages/presets/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/tachyons/tsconfig.json b/packages/tachyons/tsconfig.json
@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  }
+  "extends": "../../tsconfig.json"
 }
diff --git a/packages/tailwind/tsconfig.json b/packages/tailwind/tsconfig.json
@@ -1,9 +1,4 @@
 {
-  "compilerOptions": {
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "strict": true
-  },
+  "extends": "../../tsconfig.json",
   "exclude": ["test"]
 }
diff --git a/packages/theme-ui/package.json b/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",

diff --git a/packages/theme-ui/src/index.js b/packages/theme-ui/src/index.js
diff --git a/packages/theme-ui/src/index.ts b/packages/theme-ui/src/index.ts
@@ -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',
+    },
+  })
diff --git a/packages/theme-ui/test/node.js → packages/theme-ui/test/node.tsx b/packages/theme-ui/test/node.js → packages/theme-ui/test/node.tsx
diff --git a/packages/theme-ui/tsconfig.json b/packages/theme-ui/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../core/tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitAny": false
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "strict": true
+  }
+}