Dark scheme overlay (#7052)

facebook · Oct 24, 2019 · c24314d · c24314d
1 parent a51729c
commit c24314d
Show file tree

Hide file tree

Showing 22 changed files with 457 additions and 380 deletions.
diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md
@@ -1577,20 +1577,20 @@ Unhandled Promise rejections will now crash tests. You can fix them by explicitl
 After the regular update procedure above, add these line to `<head>` in `public/index.html`:
 
 ```html
-    <meta name="theme-color" content="#000000">
-    <!--
+<meta name="theme-color" content="#000000" />
+<!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 ```
 
 Add `<noscript>` to `<body>` in `public/index.html`:
 
 ```html
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
+<noscript>
+  You need to enable JavaScript to run this app.
+</noscript>
 ```
 
 Then create a file called `public/manifest.json` that looks like this:

diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md
@@ -23,4 +23,4 @@ You can adjust various development and production settings by setting environmen
 | INLINE_RUNTIME_CHUNK    | 🚫 Ignored  |  ✅ Used   | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored  |  ✅ Used   | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | EXTEND_ESLINT           |   ✅ Used   |  ✅ Used   | When set to `true`, ESLint configs that extend `eslint-config-react-app` will be used by `eslint-loader`. Any rules that are set to `"error"` will stop the application from building.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| TSC_COMPILE_ON_ERROR           |   ✅ Used   |  ✅ Used   | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console.                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| TSC_COMPILE_ON_ERROR    |   ✅ Used   |  ✅ Used   | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js
@@ -248,7 +248,9 @@ function createApp(
       if (npmInfo.npmVersion) {
         console.log(
           chalk.yellow(
-            `You are using npm ${npmInfo.npmVersion} so the project will be bootstrapped with an old unsupported version of tools.\n\n` +
+            `You are using npm ${
+              npmInfo.npmVersion
+            } so the project will be bootstrapped with an old unsupported version of tools.\n\n` +
               `Please update to npm 5 or higher for a better, fully supported experience.\n`
           )
         );
@@ -262,7 +264,9 @@ function createApp(
       if (yarnInfo.yarnVersion) {
         console.log(
           chalk.yellow(
-            `You are using Yarn ${yarnInfo.yarnVersion} together with the --use-pnp flag, but Plug'n'Play is only supported starting from the 1.12 release.\n\n` +
+            `You are using Yarn ${
+              yarnInfo.yarnVersion
+            } together with the --use-pnp flag, but Plug'n'Play is only supported starting from the 1.12 release.\n\n` +
               `Please update to Yarn 1.12 or higher for a better, fully supported experience.\n`
           )
         );

diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json
@@ -50,7 +50,7 @@
     "eslint-plugin-import": "2.18.2",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.14.3",
-    "flow-bin": "^0.63.1",
+    "flow-bin": "^0.110.0",
     "html-entities": "1.2.1",
     "jest": "24.9.0",
     "jest-fetch-mock": "2.1.2",

diff --git a/packages/react-error-overlay/src/components/CloseButton.js b/packages/react-error-overlay/src/components/CloseButton.js
@@ -6,27 +6,32 @@
  */
 
 /* @flow */
-import React from 'react';
-import { black } from '../styles';
+import React, { useContext } from 'react';
+import { ThemeContext } from '../iframeScript';
+import type { Theme } from '../styles';
 
-const closeButtonStyle = {
-  color: black,
+const closeButtonStyle = (theme: Theme) => ({
+  color: theme.closeColor,
   lineHeight: '1rem',
   fontSize: '1.5rem',
   padding: '1rem',
   cursor: 'pointer',
   position: 'absolute',
   right: 0,
   top: 0,
-};
+});
 
-type CloseCallback = () => void;
-function CloseButton({ close }: {| close: CloseCallback |}) {
+type CloseButtonPropsType = {|
+  close: () => void,
+|};
+
+function CloseButton({ close }: CloseButtonPropsType) {
+  const theme = useContext(ThemeContext);
   return (
     <span
       title="Click or press Escape to dismiss."
       onClick={close}
-      style={closeButtonStyle}
+      style={closeButtonStyle(theme)}
     >
       ×
     </span>

diff --git a/packages/react-error-overlay/src/components/CodeBlock.js b/packages/react-error-overlay/src/components/CodeBlock.js
@@ -6,8 +6,8 @@
  */
 
 /* @flow */
-import React from 'react';
-import { redTransparent, yellowTransparent } from '../styles';
+import React, { useContext } from 'react';
+import { ThemeContext } from '../iframeScript';
 
 const _preStyle = {
   position: 'relative',
@@ -20,16 +20,6 @@ const _preStyle = {
   borderRadius: '0.25rem',
 };
 
-const primaryPreStyle = {
-  ..._preStyle,
-  backgroundColor: redTransparent,
-};
-
-const secondaryPreStyle = {
-  ..._preStyle,
-  backgroundColor: yellowTransparent,
-};
-
 const codeStyle = {
   fontFamily: 'Consolas, Menlo, monospace',
 };
@@ -39,9 +29,20 @@ type CodeBlockPropsType = {|
   codeHTML: string,
 |};
 
-function CodeBlock(props: CodeBlockPropsType) {
-  const preStyle = props.main ? primaryPreStyle : secondaryPreStyle;
-  const codeBlock = { __html: props.codeHTML };
+function CodeBlock({ main, codeHTML }: CodeBlockPropsType) {
+  const theme = useContext(ThemeContext);
+  const primaryPreStyle = {
+    ..._preStyle,
+    backgroundColor: theme.primaryPreBackground,
+    color: theme.primaryPreColor,
+  };
+  const secondaryPreStyle = {
+    ..._preStyle,
+    backgroundColor: theme.secondaryPreBackground,
+    color: theme.secondaryPreColor,
+  };
+  const preStyle = main ? primaryPreStyle : secondaryPreStyle;
+  const codeBlock = { __html: codeHTML };
 
   return (
     <pre style={preStyle}>

diff --git a/packages/react-error-overlay/src/components/Collapsible.js b/packages/react-error-overlay/src/components/Collapsible.js
@@ -6,81 +6,76 @@
  */
 
 /* @flow */
-import React, { Component } from 'react';
-import { black } from '../styles';
+import React, { useState, useContext } from 'react';
+import { ThemeContext } from '../iframeScript';
 
 import type { Element as ReactElement } from 'react';
+import type { Theme } from '../styles';
 
 const _collapsibleStyle = {
-  color: black,
   cursor: 'pointer',
   border: 'none',
   display: 'block',
   width: '100%',
   textAlign: 'left',
-  background: '#fff',
   fontFamily: 'Consolas, Menlo, monospace',
   fontSize: '1em',
   padding: '0px',
   lineHeight: '1.5',
 };
 
-const collapsibleCollapsedStyle = {
+const collapsibleCollapsedStyle = (theme: Theme) => ({
   ..._collapsibleStyle,
+  color: theme.color,
+  background: theme.background,
   marginBottom: '1.5em',
-};
+});
 
-const collapsibleExpandedStyle = {
+const collapsibleExpandedStyle = (theme: Theme) => ({
   ..._collapsibleStyle,
+  color: theme.color,
+  background: theme.background,
   marginBottom: '0.6em',
-};
+});
 
-type Props = {|
+type CollapsiblePropsType = {|
   children: ReactElement<any>[],
 |};
 
-type State = {|
-  collapsed: boolean,
-|};
-
-class Collapsible extends Component<Props, State> {
-  state = {
-    collapsed: true,
-  };
+function Collapsible(props: CollapsiblePropsType) {
+  const theme = useContext(ThemeContext);
+  const [collapsed, setCollapsed] = useState(true);
 
-  toggleCollapsed = () => {
-    this.setState(state => ({
-      collapsed: !state.collapsed,
-    }));
+  const toggleCollapsed = () => {
+    setCollapsed(!collapsed);
   };
 
-  render() {
-    const count = this.props.children.length;
-    const collapsed = this.state.collapsed;
-    return (
-      <div>
+  const count = props.children.length;
+  return (
+    <div>
+      <button
+        onClick={toggleCollapsed}
+        style={
+          collapsed
+            ? collapsibleCollapsedStyle(theme)
+            : collapsibleExpandedStyle(theme)
+        }
+      >
+        {(collapsed ? '▶' : '▼') +
+          ` ${count} stack frames were ` +
+          (collapsed ? 'collapsed.' : 'expanded.')}
+      </button>
+      <div style={{ display: collapsed ? 'none' : 'block' }}>
+        {props.children}
         <button
-          onClick={this.toggleCollapsed}
-          style={
-            collapsed ? collapsibleCollapsedStyle : collapsibleExpandedStyle
-          }
+          onClick={toggleCollapsed}
+          style={collapsibleExpandedStyle(theme)}
         >
-          {(collapsed ? '▶' : '▼') +
-            ` ${count} stack frames were ` +
-            (collapsed ? 'collapsed.' : 'expanded.')}
+          {`▲ ${count} stack frames were expanded.`}
         </button>
-        <div style={{ display: collapsed ? 'none' : 'block' }}>
-          {this.props.children}
-          <button
-            onClick={this.toggleCollapsed}
-            style={collapsibleExpandedStyle}
-          >
-            {`▲ ${count} stack frames were expanded.`}
-          </button>
-        </div>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 export default Collapsible;
diff --git a/packages/react-error-overlay/src/components/ErrorOverlay.js b/packages/react-error-overlay/src/components/ErrorOverlay.js
@@ -6,12 +6,13 @@
  */
 
 /* @flow */
-import React, { Component } from 'react';
-import { black } from '../styles';
+import React, { useContext, useEffect } from 'react';
+import { ThemeContext } from '../iframeScript';
 
 import type { Node as ReactNode } from 'react';
+import type { Theme } from '../styles';
 
-const overlayStyle = {
+const overlayStyle = (theme: Theme) => ({
   position: 'relative',
   display: 'inline-flex',
   flexDirection: 'column',
@@ -28,56 +29,50 @@ const overlayStyle = {
   whiteSpace: 'pre-wrap',
   wordBreak: 'break-word',
   lineHeight: 1.5,
-  color: black,
-};
+  color: theme.color,
+});
 
-type Props = {|
+type ErrorOverlayPropsType = {|
   children: ReactNode,
   shortcutHandler?: (eventKey: string) => void,
 |};
 
-type State = {|
-  collapsed: boolean,
-|};
+let iframeWindow: window = null;
 
-class ErrorOverlay extends Component<Props, State> {
-  iframeWindow: window = null;
+function ErrorOverlay(props: ErrorOverlayPropsType) {
+  const theme = useContext(ThemeContext);
 
-  getIframeWindow = (element: ?HTMLDivElement) => {
+  const getIframeWindow = (element: ?HTMLDivElement) => {
     if (element) {
       const document = element.ownerDocument;
-      this.iframeWindow = document.defaultView;
-    }
-  };
-
-  onKeyDown = (e: KeyboardEvent) => {
-    const { shortcutHandler } = this.props;
-    if (shortcutHandler) {
-      shortcutHandler(e.key);
+      iframeWindow = document.defaultView;
     }
   };
+  const { shortcutHandler } = props;
 
-  componentDidMount() {
-    window.addEventListener('keydown', this.onKeyDown);
-    if (this.iframeWindow) {
-      this.iframeWindow.addEventListener('keydown', this.onKeyDown);
-    }
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('keydown', this.onKeyDown);
-    if (this.iframeWindow) {
-      this.iframeWindow.removeEventListener('keydown', this.onKeyDown);
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (shortcutHandler) {
+        shortcutHandler(e.key);
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    if (iframeWindow) {
+      iframeWindow.addEventListener('keydown', onKeyDown);
     }
-  }
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      if (iframeWindow) {
+        iframeWindow.removeEventListener('keydown', onKeyDown);
+      }
+    };
+  }, [shortcutHandler]);
 
-  render() {
-    return (
-      <div style={overlayStyle} ref={this.getIframeWindow}>
-        {this.props.children}
-      </div>
-    );
-  }
+  return (
+    <div style={overlayStyle(theme)} ref={getIframeWindow}>
+      {props.children}
+    </div>
+  );
 }
 
 export default ErrorOverlay;