src: Include image cropper

package.json

@@ -8,16 +8,17 @@
     "test": "react-scripts test"
   },
   "dependencies": {
-    "typescript": "^4.0.5",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-images-upload": "^1.2.8",
+    "react-multi-crops": "^0.0.10",
     "react-scripts": "^4.0.1",
     "sass": "^1.29.0",
     "tesseract.js": "^2.1.4",
-    "react-images-upload": "^1.2.8"
+    "typescript": "^4.0.5"
   },
   "eslintConfig": {
     "extends": [

src/components/App/App.scss

@@ -11,3 +11,58 @@
 .Answer {
   font-size: smaller;
 }
+
+
+.fileUploader {
+  width: 180px;
+  height: 40px;
+}
+
+.fileContainer {
+  width: 100%;
+  height: 100%;
+
+  background: #fff;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin: 0;
+
+  p {
+    display: none;
+  }
+
+  button {
+    margin: 10px 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.UploadSection {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ConfirmButton {
+  width: 180px;
+  height: 30px;
+
+  padding: 6px 23px;
+  background: #3f4257;
+  border-radius: 30px;
+  color: white;
+  font-weight: 300;
+  font-size: 14px;
+  margin: 10px 10px;
+  transition: all 0.2s ease-in;
+  cursor: pointer;
+  outline: none;
+  border: none;
+}

src/components/App/App.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 
 import ImageUploader from 'react-images-upload';
+import MultiCrops from 'react-multi-crops'
 
 import Logo from '../Logo/Logo';
 import Board from '../Board/Board';
 
 import './App.scss';
-import {findTextRegions} from "../../helpers/findTextRegions";
+//import {findTextRegions} from "../../helpers/findTextRegions";
-import {recognizeTextOnImageGrid} from "../../helpers/recognizeTextOnImage";
+//import {recognizeTextOnImageGrid} from "../../helpers/recognizeTextOnImage";
 
 export type Point = {
   x: number;
@@ -32,36 +33,51 @@ type Game = {
   solutions: Array<Solution>;
 }
 
-export default class App extends React.Component {
+interface IAppProps {
+}
+
+interface IAppState {
+  image: HTMLImageElement | null,
+  selections: Array<any>;
+}
+
+export default class App extends React.Component<IAppProps, IAppState> {
   private game: Game;
 
-  constructor(props: object) {
+  constructor(props: IAppProps) {
     super(props);
 
     const gameId = (Math.trunc(Math.random() * 100) % 2) + 1;
     this.game = require(`../../constants/${gameId}.json`);
+
+    this.state = {
+      image: null,
+      selections: [],
+    }
   }
 
   handleTakePhoto(pictures: any[], _: any[]): void {
-    console.log("handleTakePhoto: loading image...")
-    const url = URL.createObjectURL(pictures[0]);
     const image = document.createElement('img');
-    image.src = url;
+    image.src = URL.createObjectURL(pictures[0]);
-    image.onload = () => {
+    image.onload = () => this.setState({...this.state, image});
-      console.log("handleTakePhoto: finding text regions...")
+      //this.leftMenu.current;
-      const r = findTextRegions(image);
+      //const r = findTextRegions(image);
-      console.log(r);
+      //console.log(r);
-      URL.revokeObjectURL(url);
+      //URL.revokeObjectURL(url);
+      //if (r !== null) {
+      //  recognizeTextOnImageGrid(r.grid).then(grid => {
 
-      if (r !== null) {
+      //  });
-        recognizeTextOnImageGrid(r.grid).then(() => {});
+      //}
-      }
+  }
-    }
+
+  handleChangeCoordinate(_: any, __: any, selections: any) {
+    this.setState({selections});
   }
 
   renderAnswers(): Array<JSX.Element> {
     return this.game.solutions.map(s => s.key).map(k =>
-      <p className="Answer">{k}</p>);
+      <p key={k} className="Answer">{k}</p>);
   }
 
   render() {
@@ -77,12 +93,24 @@ export default class App extends React.Component {
         </div>
         <div />
         <div style={{paddingLeft: '300px'}}>
-          <ImageUploader
+          <div className="UploadSection">
-            withIcon={false}
+            <ImageUploader
-            buttonText='Wrzuć zdjęcie!'
+              withIcon={false}
-            onChange={this.handleTakePhoto.bind(this)}
+              buttonText='Wrzuć zdjęcie!'
-            imgExtension={['.jpg', '.jpeg', '.png']}
+              onChange={this.handleTakePhoto.bind(this)}
-            maxFileSize={5242880 * 5}  // 5MB * 5
+              imgExtension={['.jpg', '.jpeg', '.png']}
+              maxFileSize={5242880 * 5}  // 5MB * 5
+            />
+            <button
+              className="ConfirmButton"
+              style={{visibility: this.state.image ? 'visible' : 'hidden'}}
+            >Potwierdź</button>
+          </div>
+          <MultiCrops
+            src={this.state.image?.src || ''}
+            width={this.state.image?.width}
+            coordinates={this.state.selections}
+            onChange={this.handleChangeCoordinate.bind(this)}
           />
         </div>
         <div>

src/helpers/recognizeTextOnImage.ts

@@ -11,7 +11,7 @@ async function prepareWorker(isColumn: boolean = true): Promise<Worker> {
     await worker.setParameters({
       // @ts-ignore, i don't know why this PSM.... stuff is mad at me
       tessedit_pageseg_mode: isColumn ? PSM.SINGLE_COLUMN : PSM.SINGLE_CHAR,
-      tessedit_char_whitelist: 'AĄBCĆDEĘFGHIJKLŁMNŃOÓPRSŚTUWXYZŹŻ',
+      tessedit_char_whitelist: 'ABCĆDEĘFGHIJKLŁMNŃOÓPRSŚTUWXYZŹŻ', // no 'Ą'!
       tessjs_create_box: '1',
     });
 
@@ -19,7 +19,8 @@ async function prepareWorker(isColumn: boolean = true): Promise<Worker> {
 }
 
 async function recognize(worker: Worker, image: ImageLike) {
-  return (await worker.recognize(image)).data.text.trim() || "";
+  // bug fix - letter 'I' (capital i) is often not recognised
+  return (await worker.recognize(image)).data.text.trim() || "I";
 }
 
 export async function recognizeTextOnImage(image: ImageLike): Promise<string> {
@@ -27,44 +28,16 @@ export async function recognizeTextOnImage(image: ImageLike): Promise<string> {
     return await recognize(TEXT_WORKER, image);
 }
 
-export async function recognizeTextOnImageGrid(grid: any[][]): Promise<void> {
+export async function recognizeTextOnImageGrid(grid: any[][]): Promise<any[][]> {
   CHAR_WORKER = CHAR_WORKER ?? await prepareWorker(false);
 
   // no parallelization for now, we can always Promise it all() later
   for (let line of grid) {
     for (let g of line) {
       g.text = await recognize(CHAR_WORKER, g.canvas);
-      //g.data = g.canvas = null;
+      g.data = g.canvas = null;  // free mem
     }
   }
 
-  const polishLetters = ['Ą', 'Ć', 'Ę', 'V', 'Ł', 'Ń', 'Ó', 'Ś', 'Ź', 'Ż'];
+  return grid;
-
-  for (let line of grid) {
-    let div = document.createElement('div');
-
-    for (let g of line) {
-      let p = document.createElement('p');
-      p.style.paddingRight = '5px';
-      p.style.paddingBottom = '5px';
-      p.style.marginTop = '-5px';
-      p.style.textAlign = 'right';
-      // bug fix, this letter is rarely recognized
-      p.innerText = g.text || "V";
-
-      let innerDiv = document.createElement('div');
-      innerDiv.style.display = 'inline-block';
-      let color = polishLetters.includes(p.innerText) ? 'red' : 'blue';
-      innerDiv.style.border = `3px solid ${color}`;
-      innerDiv.style.marginLeft = '3px';
-      innerDiv.style.marginBottom = '3px';
-      innerDiv.style.width = '70px';
-      innerDiv.style.height = '70px';
-      innerDiv.appendChild(g.canvas);
-      innerDiv.appendChild(p);
-
-      div.appendChild(innerDiv);
-    }
-    document.body.appendChild(div);
-  }
 }

yarn.lock

@@ -1182,6 +1182,11 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
+"@interactjs/types@1.10.2":
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/@interactjs/types/-/types-1.10.2.tgz#45a74d019f9b3e8fccd3ccc288b55bcf510106bc"
+  integrity sha512-l0T1bU8OHRv716ztQOYwP+K7b/lA76C0T3r/cdabbUv6CKeAFdFRRFlmNxYOM36SxMGWAiq5VWrN3SeXlB7Fow==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -2520,6 +2525,11 @@ babel-plugin-named-asset-import@^0.3.7:
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz#156cd55d3f1228a5765774340937afc8398067dd"
   integrity sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==
 
+babel-plugin-syntax-jsx@6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -2585,7 +2595,7 @@ babel-preset-react-app@^10.0.0:
     babel-plugin-macros "2.8.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"
 
-babel-runtime@^6.26.0:
+babel-runtime@6.26.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -2593,6 +2603,16 @@ babel-runtime@^6.26.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
+babel-types@6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
 babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
@@ -3371,6 +3391,11 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
+convert-source-map@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
+  integrity sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU=
+
 convert-source-map@1.7.0, convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
@@ -5660,6 +5685,13 @@ ini@^1.3.5:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+interactjs@^1.4.0-alpha.1:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/interactjs/-/interactjs-1.10.2.tgz#b8efa1ecc72fd3e3b8da32ce5082df308b318ba1"
+  integrity sha512-5tj+4k0jtIzUj4TeLp4+F4VUAHXzQHnXfFwuaUsU1pnfRXiP3EqawsUpAn7gfAOS6Ltj6EQvvurCN9GJn/G/Pw==
+  dependencies:
+    "@interactjs/types" "1.10.2"
+
 internal-ip@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
@@ -6874,7 +6906,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5:
+"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -7234,6 +7266,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
+nanoid@^2.1.0:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
+  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
+
 nanoid@^3.1.20:
   version "3.1.20"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
@@ -8709,7 +8746,7 @@ prompts@2.4.0, prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8833,6 +8870,11 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
+ramda@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.25.0.tgz#8fdf68231cffa90bc2f9460390a0cb74a29b29a9"
+  integrity sha512-GXpfrYVPwx3K7RQ6aYT8KPS8XViSXUVJT1ONhoKPE9VAleW42YE+U+8VEyGWt41EnEQW7gwecYJriTI0pKoecQ==
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -8905,6 +8947,16 @@ react-dev-utils@^11.0.1:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
+react-dom@^16.2.0:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
+  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.19.1"
+
 react-dom@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
@@ -8942,6 +8994,58 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-multi-crops@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/react-multi-crops/-/react-multi-crops-0.0.1.tgz#681354bbfba9674479f0d642ae36e4838b59587c"
+  integrity sha512-8zJiUjJGQfRuzv+PYtyfEn7XES1g1OrWAYXp6Mi4lJk8UlclJC3OwqeC0nWZHmnfy2j0L+F7lbsNeILmDZD1sQ==
+  dependencies:
+    interactjs "^1.4.0-alpha.1"
+    prop-types "^15.6.1"
+    ramda "^0.25.0"
+    react "^16.2.0"
+    react-dom "^16.2.0"
+    shortid "^2.2.8"
+
+react-multi-crops@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/react-multi-crops/-/react-multi-crops-0.0.10.tgz#0c99b09680f6f2a897cfd8f38c6b92d1899bff9d"
+  integrity sha512-vR0NJaAN4egwBVBNiiN2ex0sSSRbw1BTW5jCqhzk42ihXFp/DnNrw1rpuLWmpe7QsycowrCH+qWVGQIDhOO70A==
+  dependencies:
+    interactjs "^1.4.0-alpha.1"
+    prop-types "^15.6.1"
+    ramda "^0.25.0"
+    react "^16.2.0"
+    react-dom "^16.2.0"
+    react-multi-crops "^0.0.5"
+    shortid "^2.2.8"
+    styled-jsx "^2.2.6"
+
+react-multi-crops@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/react-multi-crops/-/react-multi-crops-0.0.4.tgz#2540d906d65730885eb6d22c3e4c76c88eacfc8f"
+  integrity sha1-JUDZBtZXMIhettIsPkx2yI6s/I8=
+  dependencies:
+    interactjs "^1.4.0-alpha.1"
+    prop-types "^15.6.1"
+    ramda "^0.25.0"
+    react "^16.2.0"
+    react-dom "^16.2.0"
+    react-multi-crops "^0.0.1"
+    shortid "^2.2.8"
+
+react-multi-crops@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/react-multi-crops/-/react-multi-crops-0.0.5.tgz#3b0412d547095a0c04b005331e53d465f81eb243"
+  integrity sha1-OwQS1UcJWgwEsAUzHlPUZfgeskM=
+  dependencies:
+    interactjs "^1.4.0-alpha.1"
+    prop-types "^15.6.1"
+    ramda "^0.25.0"
+    react "^16.2.0"
+    react-dom "^16.2.0"
+    react-multi-crops "^0.0.4"
+    shortid "^2.2.8"
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -9013,7 +9117,7 @@ react-scripts@^4.0.1:
   optionalDependencies:
     fsevents "^2.1.3"
 
-react@^16.12.0:
+react@^16.12.0, react@^16.2.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
   integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
@@ -9533,6 +9637,14 @@ saxes@^5.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
+scheduler@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.20.1:
   version "0.20.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
@@ -9742,6 +9854,13 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+shortid@^2.2.8:
+  version "2.2.16"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.16.tgz#b742b8f0cb96406fd391c76bfc18a67a57fe5608"
+  integrity sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==
+  dependencies:
+    nanoid "^2.1.0"
+
 side-channel@^1.0.2, side-channel@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -10051,6 +10170,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
+string-hash@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
+  integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
+
 string-length@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.1.tgz#4a973bf31ef77c4edbceadd6af2611996985f8a1"
@@ -10196,6 +10320,20 @@ style-loader@1.3.0:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
+styled-jsx@^2.2.6:
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.7.tgz#0ada82e2e4b8b59e38508a8e57258fd1f70e204a"
+  integrity sha512-L67wypf8ULpAFxbVefl7ccE/rutz9w/Q1eJLg8Szm4KyN+bmmmaHYfSyfogfDn2l/CmzOlf8/bHbVSI6EeWYkQ==
+  dependencies:
+    babel-plugin-syntax-jsx "6.18.0"
+    babel-runtime "6.26.0"
+    babel-types "6.26.0"
+    convert-source-map "1.5.1"
+    source-map "0.6.1"
+    string-hash "1.1.3"
+    stylis "3.5.1"
+    stylis-rule-sheet "0.0.10"
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -10205,6 +10343,16 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis-rule-sheet@0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
+  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
+
+stylis@3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.1.tgz#fd341d59f57f9aeb412bc14c9d8a8670b438e03b"
+  integrity sha512-yM4PyeHuwhIOUHNJxi1/Mbq8kVLv4AkyE7IYLP/LK0lIFcr3tRa2H1iZlBYKIxOlf+/jruBTe8DdKSyQX9w4OA==
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -10438,6 +10586,11 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+  integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"