Merge branch 'master' into convert-editor-to-typescript

Author: dcastil

package.json

@@ -27,6 +27,8 @@
     "@babel/runtime": "^7.7.7",
     "@testing-library/react": "^9.1.3",
     "@types/jest": "^25.1.2",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.merge": "^4.6.6",
     "@types/react-test-renderer": "^16.9.2",
     "babel-jest": "^25.3.0",
     "husky": ">=4.0.7",

packages/chrome/README.md

@@ -2,6 +2,12 @@
 
 Chrome devtools extension for editing Theme UI styles in the browser.
 
+## Status: Deprecated.
+
+This package is not compatible with current Theme UI version.
+
+See [Blocks UI](https://github.com/blocks/blocks) for a theme editor and JSX page builder.
+
 ## Installation
 
 1. [Download extension](https://github.com/system-ui/theme-ui/tree/master/packages/chrome/public)
@@ -12,5 +18,5 @@ Chrome devtools extension for editing Theme UI styles in the browser.
 
 ## Local Development
 
-1. Run `yarn prepare` (or `yarn watch`)
+1. Run `yarn __prepare` (or `yarn watch`)
 1. Load unpacked extension from the `public/` directory

packages/chrome/babel.config.js

@@ -1,3 +1 @@
-module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react'],
-}
+module.exports = require('../../babel.config')

packages/chrome/global.d.ts

@@ -0,0 +1,7 @@
+export {}
+
+declare global {
+  interface Window {
+    chrome: any
+  }
+}

packages/chrome/package.json

@@ -31,5 +31,8 @@
     "webpack": "^4.33.0",
     "webpack-cli": "^3.3.4"
   },
+  "devDependencies": {
+    "@theme-ui/css": "^0.4.0-alpha.1"
+  },
   "gitHead": "bfd026cae085f377ca537de897dc43233d50f5d5"
 }

packages/chrome/src/index.js renamed to packages/chrome/src/index.tsx

@@ -1,6 +1,12 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui'
-import React, { useReducer, useEffect, useRef, useState } from 'react'
+import {
+  useReducer,
+  useEffect,
+  useRef,
+  useState,
+  FunctionComponent,
+} from 'react'
 import { render } from 'react-dom'
 import debounce from 'lodash.debounce'
 import merge from 'lodash.merge'
@@ -15,13 +21,24 @@ import {
   LineHeights,
   FontSizes,
   Space,
+  // @ts-ignore
 } from '@theme-ui/editor'
+import { Theme } from '@theme-ui/css'
+
+interface DevToolsExceptionInfo {
+  isError: boolean
+  code: string
+  description: string
+  details: any[]
+  isException: boolean
+  value: string
+}
 
-const runScript = script =>
+const runScript = (script: string) =>
   new Promise((resolve, reject) => {
     debounce(window.chrome.devtools.inspectedWindow.eval, 100)(
       script,
-      (result, err) => {
+      (result: object, err: DevToolsExceptionInfo) => {
         if (err) {
           console.error(err)
           reject(err)
@@ -31,17 +48,19 @@ const runScript = script =>
     )
   })
 
-const mergeState = (state, next) => merge({}, state, next)
+type StateWithColorMode = { colorMode?: string; theme?: Theme }
+const mergeState = (state: StateWithColorMode, next: StateWithColorMode) =>
+  merge({}, state, next)
 
-const CopyTheme = ({ theme }) => {
+const CopyTheme = ({ theme }: { theme: Theme }) => {
   const [copied, setCopied] = useState(false)
-  const timer = useRef(false)
+  const timer = useRef(0)
 
   const handleClick = () => {
     setCopied(true)
     copyToClipboard(JSON.stringify(theme))
     clearInterval(timer.current)
-    timer.current = setInterval(() => setCopied(false), 1000)
+    timer.current = window.setInterval(() => setCopied(false), 1000)
   }
 
   return (
@@ -51,33 +70,32 @@ const CopyTheme = ({ theme }) => {
 
 const Spacer = () => <div sx={{ my: 2 }} />
 
-const App = () => {
+const App: FunctionComponent = () => {
   const dark = window.chrome.devtools.panels.themeName === 'dark'
 
-  const [state, setState] = useReducer(mergeState, {
-    theme: null,
-    colorMode: null,
-  })
+  const [state, setState] = useReducer(mergeState, {})
 
   const getTheme = () => {
-    runScript(`window.__THEME_UI__.theme`).then(theme => {
+    runScript(`window.__THEME_UI__.theme`).then(resolvedTheme => {
+      const theme = resolvedTheme as StateWithColorMode['theme']
       setState({ theme })
     })
   }
 
   const getColorMode = () => {
-    runScript(`window.__THEME_UI__.colorMode`).then(colorMode => {
+    runScript(`window.__THEME_UI__.colorMode`).then(resolvedColorMode => {
+      const colorMode = resolvedColorMode as StateWithColorMode['colorMode']
       setState({ colorMode })
     })
   }
 
-  const setTheme = nextTheme => {
+  const setTheme = (nextTheme: Theme) => {
     const json = JSON.stringify(nextTheme)
     runScript(`window.__THEME_UI__.setTheme(${json})`)
     setState({ theme: nextTheme })
   }
 
-  const setColorMode = nextMode => {
+  const setColorMode = (nextMode: Theme['initialColorModeName']) => {
     setState({ colorMode: nextMode })
     runScript(`window.__THEME_UI__.setColorMode('${nextMode}')`)
   }
@@ -96,7 +114,7 @@ const App = () => {
     setColorMode,
   }
 
-  if (!context.theme) return false
+  if (!context.theme) return null
 
   return (
     <Editor
@@ -135,7 +153,7 @@ const App = () => {
         <Space />
       </Row>
       <Spacer />
-      <CopyTheme theme={state.theme} />
+      <CopyTheme theme={context.theme} />
     </Editor>
   )
 }

packages/chrome/src/theme.js renamed to packages/chrome/src/theme.ts

@@ -1,5 +1,7 @@
-export default {
-  initialColorMode: 'light',
+import { Theme } from '@theme-ui/css'
+
+const theme: Theme = {
+  initialColorModeName: 'light',
   colors: {
     text: '#000',
     background: '#fff',
@@ -30,11 +32,13 @@ export default {
     monospace: 'Menlo, monospace',
   },
   fontWeights: {
-    body: '400',
-    heading: '700',
+    body: 400,
+    heading: 700,
   },
   lineHeights: {
     body: 1.5,
     heading: 1.25,
   },
 }
+
+export default theme

packages/chrome/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ES2015", "DOM"],
+    "jsx": "react"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "global.d.ts"]
+}

packages/chrome/webpack.config.js

@@ -1,14 +1,15 @@
 const path = require('path')
 
 module.exports = {
+  entry: ['./src/index.tsx'],
   output: {
     path: path.resolve(__dirname, 'public', 'bundle'),
     filename: 'index.js',
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.tsx?$/,
         use: 'babel-loader',
       },
     ],