[deploy] 🚀 Feature: Draw Command for connect with image annotations (#10136)

* 🚀 Draw Command ready for connect [Rebase] * revert schema changes * fix & replace Button with theme button * fix UI * add test cases * fix travis issue * on image upload enable send button * revert schema.db changes * revert UI changes * fix suggestions * Update app/javascript/chat/draw/index.jsx Co-authored-by: Nick Taylor <nick@iamdeveloper.com> * update test cases * remove commented code * Trigger Travis CI Co-authored-by: Narender Singh <narender2031@gmail.com> Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
2020-10-07 19:36:22 +05:30 · 2020-10-07 19:36:22 +05:30 · 83b3baeac3
commit 83b3baeac3
parent b800b81c45
9 changed files with 429 additions and 9 deletions
--- a/app/assets/stylesheets/chat.scss
+++ b/app/assets/stylesheets/chat.scss
@ -1203,6 +1203,52 @@
  }
 }

+.connect-draw {
+  margin-top: 30px;
+  .draw-title {
+    display: flex;
+    justify-content: flex-start;
+  }
+  .connect-draw__colors {
+    z-index: 2;
+    margin: 5px 20px;
+    text-align: center;
+    pointer-events: all;
+  }
+
+  .connect-draw__color {
+    height: 30px;
+    width: 30px;
+    margin-right: 10px;
+    border-radius: 50%;
+    border: none;
+  }
+  .color:hover {
+    opacity: 0.7;
+    cursor: pointer;
+  }
+
+  .color:focus {
+    outline: 0;
+  }
+  .connect-draw__draw-area {
+    display: grid;
+
+    .connect-draw__draw {
+      border: 1px solid black;
+      background-color: white;
+      justify-self: center;
+    }
+    .connect-draw__actions {
+      margin: 20px 0px;
+      display: flex;
+      button {
+        margin-left: 10px;
+      }
+    }
+  }
+}
+
 .membership-section {
  position: relative;

--- a/app/javascript/chat/tests/draw.test.jsx
+++ b/app/javascript/chat/tests/draw.test.jsx
@ -0,0 +1,21 @@
+import { h } from 'preact';
+import { render } from '@testing-library/preact';
+import { axe } from 'jest-axe';
+import Draw from '../draw';
+
+describe('<Draw />', () => {
+  it('should have no a11y violations', async () => {
+    const { container } = render(<Draw />);
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should render', () => {
+    const { queryByText } = render(<Draw />);
+
+    expect(queryByText('Connect Draw')).not.toBeNull();
+    expect(queryByText('Clear')).not.toBeNull();
+    expect(queryByText('Send')).not.toBeNull();
+  });
+});
--- a/app/javascript/chat/chat.jsx
+++ b/app/javascript/chat/chat.jsx
@ -42,6 +42,7 @@ import ActionMessage from './actionMessage';
 import Content from './content';
 import { VideoContent } from './videoContent';
 import { DragAndDropZone } from '@utilities/dragAndDrop';
+import { dragAndUpload } from '@utilities/dragAndUpload';

 const NARROW_WIDTH_LIMIT = 767;
 const WIDE_WIDTH_LIMIT = 1600;
@ -746,6 +747,11 @@ export default class Chat extends Component {
        this.handleSuccess,
        this.handleFailure,
      );
+    } else if (message.startsWith('/draw')) {
+      this.setActiveContent({
+        sendCanvasImage: this.sendCanvasImage,
+        type_of: 'draw',
+      });
    } else if (message.startsWith('/')) {
      this.setActiveContentState(activeChannelId, {
        type_of: 'loading-post',
@ -1432,6 +1438,9 @@ export default class Chat extends Component {
    event.currentTarget.classList.remove('opacity-25');
    processImageUpload(files, this.handleImageSuccess, this.handleImageFailure);
  };
+  sendCanvasImage = (files) => {
+    dragAndUpload([files], this.handleImageSuccess, this.handleImageFailure);
+  };
  handleImageSuccess = (res) => {
    const { links, image } = res;
    const mLink = `![${image[0].name}](${links[0]})`;
--- a/app/javascript/chat/content.jsx
+++ b/app/javascript/chat/content.jsx
@ -4,6 +4,7 @@ import Article from './article';
 import ChannelRequest from './channelRequest';
 import RequestManager from './RequestManager/RequestManager';
 import ChatChannelSettings from './ChatChannelSettings/ChatChannelSettings';
+import Draw from './draw';

 const smartSvgIcon = (content, d) => (
  <svg
@ -27,6 +28,7 @@ export default class Content extends Component {
      handleRequestApproval: PropTypes.func,
      handleJoiningRequest: PropTypes.func,
      activeMembershipId: PropTypes.func,
+      sendCanvasImage: PropTypes.func,
    }).isRequired,
    fullscreen: PropTypes.bool.isRequired,
    onTriggerContent: PropTypes.func.isRequired,
@ -90,6 +92,8 @@ const Display = ({ resource }) => {
      return <div className="loading-user" title="Loading user" />;
    case 'article':
      return <Article resource={resource} />;
+    case 'draw':
+      return <Draw sendCanvasImage={resource.sendCanvasImage} />;
    case 'channel-request':
      return (
        <ChannelRequest
--- a/app/javascript/chat/draw/index.jsx
+++ b/app/javascript/chat/draw/index.jsx
@ -0,0 +1,186 @@
+import { h } from 'preact';
+import { useRef, useEffect, useState } from 'preact/hooks';
+import PropTypes from 'prop-types';
+import { chatDrawPalettes } from '../../utilities/Constants';
+import { Button } from '@crayons';
+
+/**
+ * Draw function is wrapped in this component
+ *
+ * @example
+ * <Draw
+ *  sendCanvasImage={sendCanvasImage}
+ * />
+ *
+ *
+ * @param {object} props
+ * @param {function} props.sendCanvasImage
+ */
+function Draw({ sendCanvasImage }) {
+  const canvasRef = useRef(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [drawColor, setDrawColor] = useState('#F58F8E');
+  const [coordinates, setCoordinates] = useState({});
+  const [sendButtonDisabled, setSendButtonDisabled] = useState(true);
+  const prevCoordinates = usePrevious(coordinates);
+
+  const handleCanvasSend = () => {
+    const canvas = canvasRef.current;
+    canvas.toBlob((blob) => {
+      sendCanvasImage(new File([blob], 'draw.png'));
+    });
+  };
+
+  const handleMouseDown = (e) => {
+    setCoordinates({ x: e.offsetX, y: e.offsetY });
+    setIsDrawing(true);
+  };
+
+  const handleImageDrop = (e) => {
+    e.preventDefault();
+    if (!canvasRef.current) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    const context = canvas.getContext('2d');
+    canvas.classList.remove('opacity-25');
+
+    const { files } = e.dataTransfer;
+    const img = new Image();
+    img.src = URL.createObjectURL(files[0]);
+
+    img.onload = () => {
+      const scale = Math.min(
+        canvas.width / img.width,
+        canvas.height / img.height,
+      );
+      setSendButtonDisabled(false);
+      const x = canvas.width / 2 - (img.width / 2) * scale;
+      const y = canvas.height / 2 - (img.height / 2) * scale;
+      context.drawImage(img, x, y, img.width * scale, img.height * scale);
+    };
+  };
+
+  const handleClearCanvas = () => {
+    setSendButtonDisabled(true);
+    if (!canvasRef.current) {
+      return;
+    }
+    const context = canvasRef.current.getContext('2d');
+    context.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+  };
+
+  const handleDragHover = (e) => {
+    e.preventDefault();
+
+    canvasRef.current.classList.add('opacity-25');
+  };
+
+  const handleChangeColor = (e) => {
+    setDrawColor(e.target.style.backgroundColor);
+  };
+
+  const handleDragExit = (e) => {
+    e.preventDefault();
+    canvasRef.current.classList.remove('opacity-25');
+    canvasRef.current.classList.add('opacity-100');
+  };
+
+  const handleMouseMove = (e) => {
+    if (isDrawing) {
+      setSendButtonDisabled(false);
+      setCoordinates({ x: e.offsetX, y: e.offsetY });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setCoordinates({});
+    setIsDrawing(false);
+  };
+
+  useEffect(() => {
+    if (!canvasRef.current) {
+      return;
+    }
+
+    const context = canvasRef.current.getContext('2d');
+
+    if (isDrawing) {
+      context.beginPath();
+      context.strokeStyle = drawColor;
+      context.lineWidth = 2;
+      context.moveTo(prevCoordinates.x, prevCoordinates.y);
+      context.lineTo(coordinates.x, coordinates.y);
+      context.stroke();
+      context.closePath();
+    }
+  }, [drawColor, isDrawing, coordinates, prevCoordinates]);
+
+  return (
+    <div className="p-4 grid gap-2 crayons-card mb-4 connect-draw">
+      <div className="mb-1 draw-title">
+        <h2>Connect Draw</h2>
+        <div className="connect-draw__colors">
+          {chatDrawPalettes.map((color) => (
+            <button
+              className="connect-draw__color"
+              onClick={handleChangeColor}
+              style={`background-color: ${color}`}
+              title={`Change color to ${color}`}
+              key={color}
+            />
+          ))}
+        </div>
+      </div>
+      <div
+        aria-hidden
+        className="connect-draw__draw-area"
+        onMouseUp={handleMouseUp}
+      >
+        <canvas
+          className="connect-draw__draw"
+          ref={canvasRef}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onDrop={handleImageDrop}
+          onDragOver={handleDragHover}
+          onDragExit={handleDragExit}
+          height="600"
+          width="400"
+        />
+        <div className="connect-draw__actions">
+          <Button
+            onClick={handleClearCanvas}
+            title="Clear the canvas."
+            type="button"
+            size="s"
+            variant="secondary"
+          >
+            Clear
+          </Button>
+          <Button
+            onClick={handleCanvasSend}
+            title="Send the canvas."
+            disabled={sendButtonDisabled}
+          >
+            Send
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}
+Draw.propTypes = {
+  sendCanvasImage: PropTypes.func.isRequired,
+};
+
+export default Draw;
--- a/app/javascript/utilities/Constants/index.js
+++ b/app/javascript/utilities/Constants/index.js
@ -0,0 +1,8 @@
+export const chatDrawPalettes = [
+  '#F4908E',
+  '#F2F097',
+  '#88B0DC',
+  '#F7B5D1',
+  '#53C4AF',
+  '#FDE38C',
+];
--- a/app/javascript/utilities/dragAndUpload.js
+++ b/app/javascript/utilities/dragAndUpload.js
@ -0,0 +1,9 @@
+import { generateMainImage } from '../article-form/actions';
+import { validateFileInputs } from '../packs/validateFileInputs';
+
+export const dragAndUpload = (files, handleImageSuccess, handleImageFailure) => {
+  if (files.length > 0 && validateFileInputs()) {
+    const payload = { image: files };
+    generateMainImage(payload, handleImageSuccess, handleImageFailure);
+  }
+};
--- a/package.json
+++ b/package.json
@ -105,6 +105,7 @@
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.3.0",
    "babel-loader": "^8.1.0",
+    "canvas": "^2.6.1",
    "css-loader": "^4.3.0",
    "cssom": "^0.4.4",
    "eslint": "^7.10.0",
--- a/yarn.lock
+++ b/yarn.lock
@ -5577,6 +5577,15 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, can
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001124.tgz#5d9998190258e11630d674fc50ea8e579ae0ced2"
  integrity sha512-zQW8V3CdND7GHRH6rxm6s59Ww4g/qGWTheoboW9nfeMg7sUoopIfKCcNZUjwYRCOrvereh3kwDpZj4VLQ7zGtA==

+canvas@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.6.1.tgz#0d087dd4d60f5a5a9efa202757270abea8bef89e"
+  integrity sha512-S98rKsPcuhfTcYbtF53UIJhcbgIAK533d1kJKMwsMwAIFgfd58MOyxRud3kktlzWiEkFliaJtvyZCBtud/XVEA==
+  dependencies:
+    nan "^2.14.0"
+    node-pre-gyp "^0.11.0"
+    simple-get "^3.0.3"
+
 capture-exit@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@ -6767,7 +6776,7 @@ debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
  dependencies:
    ms "^2.1.1"

-debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5:
+debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
  version "3.2.6"
  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@ -6801,6 +6810,13 @@ decompress-response@^3.3.0:
  dependencies:
    mimic-response "^1.0.0"

+decompress-response@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-4.2.1.tgz#414023cc7a302da25ce2ec82d0d5238ccafd8986"
+  integrity sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==
+  dependencies:
+    mimic-response "^2.0.0"
+
 dedent@^0.7.0:
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
@ -6974,6 +6990,11 @@ detect-indent@^4.0.0:
  dependencies:
    repeating "^2.0.0"

+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
+
 detect-newline@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@ -8495,6 +8516,13 @@ fs-extra@^9.0.0:
    jsonfile "^6.0.1"
    universalify "^1.0.0"

+fs-minipass@^1.2.5:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
+  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
+  dependencies:
+    minipass "^2.6.0"
+
 fs-minipass@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
@ -9459,7 +9487,7 @@ ibm-openapi-validator@0.30.0:
    validator "^11.0.0"
    yaml-js "^0.2.3"

-iconv-lite@0.4.24, iconv-lite@^0.4.24:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
  version "0.4.24"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@ -9483,6 +9511,13 @@ iferr@^0.1.5:
  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=

+ignore-walk@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
+  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
+  dependencies:
+    minimatch "^3.0.4"
+
 ignore@^3.3.5:
  version "3.3.10"
  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
@ -11723,6 +11758,11 @@ mimic-response@^1.0.0, mimic-response@^1.0.1:
  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
  integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==

+mimic-response@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-2.1.0.tgz#d13763d35f613d09ec37ebb30bac0469c0ee8f43"
+  integrity sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==
+
 min-document@^2.19.0:
  version "2.19.0"
  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
@ -11788,6 +11828,14 @@ minipass-pipeline@^1.2.2:
  dependencies:
    minipass "^3.0.0"

+minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
+  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
+  dependencies:
+    safe-buffer "^5.1.2"
+    yallist "^3.0.0"
+
 minipass@^3.0.0, minipass@^3.1.1:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
@ -11795,6 +11843,13 @@ minipass@^3.0.0, minipass@^3.1.1:
  dependencies:
    yallist "^4.0.0"

+minizlib@^1.2.1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
+  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
+  dependencies:
+    minipass "^2.9.0"
+
 minizlib@^2.1.1:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
@ -11914,7 +11969,7 @@ mute-stream@0.0.8:
  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==

-nan@^2.12.1, nan@^2.13.2:
+nan@^2.12.1, nan@^2.13.2, nan@^2.14.0:
  version "2.14.1"
  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
  integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
@ -11951,6 +12006,15 @@ ncp@^2.0.0:
  resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
  integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=

+needle@^2.2.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.5.2.tgz#cf1a8fce382b5a280108bba90a14993c00e4010a"
+  integrity sha512-LbRIwS9BfkPvNwNHlsA41Q29kL2L/6VaOJ0qisM5lLWsTV3nP15abO5ITL6L81zqFhzjRKDAYjpcBcwM0AVvLQ==
+  dependencies:
+    debug "^3.2.6"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
+
 negotiator@0.6.2:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@ -12080,6 +12144,22 @@ node-notifier@^8.0.0:
    uuid "^8.3.0"
    which "^2.0.2"

+node-pre-gyp@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.11.0.tgz#db1f33215272f692cd38f03238e3e9b47c5dd054"
+  integrity sha512-TwWAOZb0j7e9eGaf9esRx3ZcLaE5tQ2lvYy1pb5IAaG1a2e2Kv5Lms1Y4hpj+ciXJRofIxxlt5haeQ/2ANeE0Q==
+  dependencies:
+    detect-libc "^1.0.2"
+    mkdirp "^0.5.1"
+    needle "^2.2.1"
+    nopt "^4.0.1"
+    npm-packlist "^1.1.6"
+    npmlog "^4.0.2"
+    rc "^1.2.7"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^4"
+
 node-readfiles@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/node-readfiles/-/node-readfiles-0.2.0.tgz#dbbd4af12134e2e635c245ef93ffcf6f60673a5d"
@ -12122,6 +12202,14 @@ node-sass@^4.14.1:
  dependencies:
    abbrev "1"

+nopt@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
+  integrity sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==
+  dependencies:
+    abbrev "1"
+    osenv "^0.1.4"
+
 nopt@~1.0.10:
  version "1.0.10"
  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
@ -12176,6 +12264,27 @@ normalize-url@^4.1.0:
  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
  integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==

+npm-bundled@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
+  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
+  dependencies:
+    npm-normalize-package-bin "^1.0.1"
+
+npm-normalize-package-bin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
+  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
+
+npm-packlist@^1.1.6:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
+  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
+  dependencies:
+    ignore-walk "^3.0.1"
+    npm-bundled "^1.0.1"
+    npm-normalize-package-bin "^1.0.1"
+
 npm-run-path@^2.0.0:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@ -12190,7 +12299,7 @@ npm-run-path@^4.0.0:
  dependencies:
    path-key "^3.0.0"

-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.1.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2, npmlog@^4.1.2:
  version "4.1.2"
  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@ -12507,7 +12616,7 @@ os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.2:
  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=

-osenv@0:
+osenv@0, osenv@^0.1.4:
  version "0.1.5"
  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
@ -14398,7 +14507,7 @@ raw-loader@^4.0.1:
    loader-utils "^2.0.0"
    schema-utils "^2.6.5"

-rc@^1.2.8:
+rc@^1.2.7, rc@^1.2.8:
  version "1.2.8"
  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@ -15371,7 +15480,7 @@ rgba-regex@^1.0.0:
  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=

-rimraf@2, rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.3:
+rimraf@2, rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3:
  version "2.7.1"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@ -15508,7 +15617,7 @@ sass-loader@^8.0.2:
    schema-utils "^2.6.1"
    semver "^6.3.0"

-sax@~1.2.4:
+sax@^1.2.4, sax@~1.2.4:
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@ -15851,6 +15960,20 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==

+simple-concat@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
+  integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
+
+simple-get@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-3.1.0.tgz#b45be062435e50d159540b576202ceec40b9c6b3"
+  integrity sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==
+  dependencies:
+    decompress-response "^4.2.0"
+    once "^1.3.1"
+    simple-concat "^1.0.0"
+
 simple-git@^1.95.0:
  version "1.132.0"
  resolved "https://registry.yarnpkg.com/simple-git/-/simple-git-1.132.0.tgz#53ac4c5ec9e74e37c2fd461e23309f22fcdf09b1"
@ -16643,6 +16766,19 @@ tar@^2.0.0:
    fstream "^1.0.12"
    inherits "2"

+tar@^4:
+  version "4.4.13"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
+  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
+  dependencies:
+    chownr "^1.1.1"
+    fs-minipass "^1.2.5"
+    minipass "^2.8.6"
+    minizlib "^1.2.1"
+    mkdirp "^0.5.0"
+    safe-buffer "^5.1.2"
+    yallist "^3.0.3"
+
 tar@^6.0.2:
  version "6.0.5"
  resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.5.tgz#bde815086e10b39f1dcd298e89d596e1535e200f"
@ -17913,7 +18049,7 @@ yallist@^2.1.2:
  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=

-yallist@^3.0.2:
+yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==