@gamelearn/arcade-components 0.2.0

package/dist/helpers/drawLOD.js

@@ -0,0 +1,358 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var THREE = _interopRequireWildcard(require("three"));
+
+var _lodStats = _interopRequireDefault(require("./lodStats"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var loadingManager = new THREE.LoadingManager();
+var imgLoader = new THREE.ImageLoader(loadingManager);
+var pureGlbMode = false;
+var pureGeometryMode = false;
+var currentLOD = 'original';
+var progressiveMode = true;
+var rgbSimulation = false;
+var texturesFrustum = true;
+var texturesDistance = false;
+var showHelpers = false;
+var showStats = false;
+var progressiveOrder = ['divideby64', 'divideby16', 'divideby4', 'original'];
+var lodDistances = {
+  divideby64: Infinity,
+  divideby16: 200,
+  divideby4: 100,
+  original: 50
+};
+var redImage = new Image();
+redImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==';
+var greenImage = new Image();
+greenImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==';
+var blueImage = new Image();
+blueImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPj/HwADBwIAMCbHYQAAAABJRU5ErkJggg==';
+var whiteImage = new Image();
+whiteImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=';
+
+function roundedRectangle(ctx, rect, radius) {
+  var pi = Math.PI;
+  var x1 = rect[0];
+  var y1 = rect[1];
+  var x2 = rect[2] + x1;
+  var y2 = rect[3] + y1;
+  var cr = radius;
+  ctx.beginPath();
+  ctx.arc(x1 + cr, y1 + cr, cr, pi, 1.5 * pi); // upper left corner
+
+  ctx.arc(x2 - cr, y1 + cr, cr, 1.5 * pi, 0); // upper right corner
+
+  ctx.arc(x2 - cr, y2 - cr, cr, 0, 0.5 * pi); // lower right corner
+
+  ctx.arc(x1 + cr, y2 - cr, cr, 0.5 * pi, pi); // lower left corner
+
+  ctx.closePath();
+  ctx.strokeStyle = 'rgba(255,255,255,1.0)';
+  ctx.lineWidth = 20;
+  ctx.stroke();
+}
+
+function makeTextSprite(message, opts) {
+  var parameters = opts || {};
+  var fontface = parameters.fontface || 'Helvetica';
+  var fontsize = parameters.fontsize || 120;
+  var canvas = document.createElement('canvas');
+  var context = canvas.getContext('2d');
+  context.font = fontsize + "px " + fontface; // get size data (height depends only on font size)
+  // var metrics = context.measureText(message);
+  // var textWidth = metrics.width;
+  // text color
+
+  context.fillStyle = 'rgba(255,255,255,1.0)';
+  roundedRectangle(context, [0, 0, canvas.width, canvas.height], 25);
+  context.fillStyle = 'rgba(255, 255, 255, 1.0)';
+  context.fillText(message, 0, fontsize); // canvas contents will be used for a texture
+
+  var texture = new THREE.Texture(canvas);
+  texture.minFilter = THREE.LinearFilter;
+  texture.needsUpdate = true;
+  var spriteMaterial = new THREE.SpriteMaterial({
+    map: texture,
+    opacity: 0.5
+  });
+  var sprite = new THREE.Sprite(spriteMaterial);
+  sprite.scale.set(10, 5, 1.0);
+  sprite.center.set(0.5, 0.5);
+  return sprite;
+}
+
+var texturablesDone = function texturablesDone(params) {
+  params._texturableElements.forEach(function (elem) {
+    elem._isDone = true;
+  });
+};
+
+var materialize = function materialize(params, lod) {
+  var totalLods = 0;
+  var doneLods = 0;
+
+  var checkPromises = function checkPromises() {
+    if (doneLods >= totalLods) {
+      if (progressiveMode) {
+        var currentIndex = progressiveOrder.indexOf(lod);
+        var lastIndex = progressiveOrder.indexOf(currentLOD);
+
+        if (currentIndex < lastIndex) {
+          materialize(params, progressiveOrder[currentIndex + 1]);
+        } else {
+          params._scene._isDone = true;
+          texturablesDone(params);
+        }
+      } else {
+        texturablesDone(params);
+      }
+    }
+  };
+
+  params._texturableElements.forEach(function (elem) {
+    if (params._texturesDistance && elem.distanceToCam > lodDistances[lod]) {
+      return;
+    }
+
+    if (elem._isDone) return;
+    var jsonUrl = elem.url.replace('.glb', '.json');
+    fetch(jsonUrl).then(function (response) {
+      return response.json();
+    }).then(function (materials) {
+      elem.traverse(function (obj) {
+        if (obj.isMesh || obj.isSkinnedMesh) {
+          obj.material.wireframe = false;
+
+          if (materials[obj.material.name]) {
+            materials[obj.material.name].forEach(function (item) {
+              var imgSrc = "".concat(elem.url, ".textures.").concat(lod, ".").concat(item.positionInArray, ".png");
+              imgLoader.load(imgSrc, function (result) {
+                if (showStats) {
+                  statsTextures(lod, imgSrc, result);
+                }
+
+                obj.material[item.key].image = result;
+
+                if (rgbSimulation) {
+                  var image;
+
+                  switch (lod) {
+                    case 'divideby64':
+                      image = redImage;
+                      break;
+
+                    case 'divideby16':
+                      image = greenImage;
+                      break;
+
+                    case 'divideby4':
+                      image = blueImage;
+                      break;
+
+                    default:
+                      image = result;
+                  }
+
+                  obj.material[item.key].image = image;
+                }
+
+                obj.material[item.key].needsUpdate = true;
+                doneLods += 1;
+                checkPromises();
+              });
+              totalLods += 1;
+            });
+          }
+        }
+      });
+    });
+  });
+};
+
+var updateSceneLods = function updateSceneLods(params) {
+  if (!pureGlbMode && !pureGeometryMode
+  /*&& !params._scene._isDone*/
+  ) {
+      if (progressiveMode) {
+        materialize(params, progressiveOrder[0]);
+      } else {
+        materialize(params, currentLOD);
+      }
+    }
+};
+
+var getPerspectiveCamera = function getPerspectiveCamera(params) {
+  params._scene.children.forEach(function (item) {
+    if (item.type === 'PerspectiveCamera') {
+      params._camera = item;
+
+      if (showHelpers) {
+        var helper = new THREE.CameraHelper(params._camera.clone());
+
+        params._helpers.add(helper);
+
+        helper.update();
+      }
+
+      ;
+      return;
+    }
+  });
+};
+
+var invalidateOutOfFrustum = function invalidateOutOfFrustum(params) {
+  params._texturableElements = params._texturableElements.filter(function (elem) {
+    var bbox = new THREE.Box3().setFromObject(elem);
+
+    var insideFrustum = params._frustum.intersectsBox(bbox);
+
+    elem.bbox = bbox;
+
+    if (showHelpers) {
+      var boundingHelper = new THREE.Box3Helper(bbox, insideFrustum ? 0x00ff00 : 0xff0000);
+
+      params._helpers.add(boundingHelper);
+    }
+
+    return insideFrustum;
+  });
+};
+
+var checkDistances = function checkDistances(params) {
+  params._texturableElements.forEach(function (elem) {
+    var center = new THREE.Vector3();
+    elem.bbox.getCenter(center);
+    var bsphere = elem.bbox.getBoundingSphere(new THREE.Sphere(center));
+    var distance = params._camera.position.distanceTo(center) - bsphere.radius;
+    elem.distanceToCam = distance;
+
+    if (showHelpers) {
+      var sphere = new THREE.Mesh(new THREE.SphereGeometry(bsphere.radius, 32, 32), new THREE.MeshStandardMaterial({
+        color: 0xffffff,
+        opacity: 0.3,
+        transparent: true,
+        wireframe: true
+      }));
+      sphere.position.copy(center);
+
+      params._helpers.add(sphere);
+
+      var sprite = makeTextSprite(distance);
+      sprite.position.copy(sphere.position);
+      sprite.position.y = sphere.position.y + bsphere.radius + 2;
+
+      params._helpers.add(sprite);
+    }
+  });
+};
+
+var statsGeometries = function statsGeometries(params) {
+  params._texturableElements.forEach(function (item) {
+    var url = item.url.replace('.glb', '.geometry.glb');
+    fetch(url).then(function (response) {
+      return response.blob();
+    }).then(function (blob) {
+      var size = blob.size;
+      (0, _lodStats.default)({
+        geometries: size
+      });
+    });
+  });
+};
+
+var statsTextures = function statsTextures(lod, url, image) {
+  fetch(url).then(function (response) {
+    return response.blob();
+  }).then(function (blob) {
+    var size = blob.size;
+    var obj = {};
+    obj[lod] = size;
+    (0, _lodStats.default)(obj);
+  });
+};
+
+var setTexturableElements = function setTexturableElements(params) {
+  params._texturableElements = [];
+
+  params._scene.traverse(function (item) {
+    if (item.url) {
+      params._texturableElements.push(item);
+    }
+  });
+
+  (0, _lodStats.default)({
+    reset: true
+  });
+
+  if (showStats) {
+    statsGeometries(params);
+  }
+};
+
+var getHelpers = function getHelpers(scene) {
+  var helper = null;
+  scene.children.forEach(function (item) {
+    if (item.userData.isHelper) {
+      helper = item;
+    }
+  });
+  return helper;
+};
+
+var drawLOD = function drawLOD(scene) {
+  var params = {};
+  params._texturesFrustum = texturesFrustum;
+  params._texturesDistance = texturesDistance;
+  params._scene = scene;
+
+  params._scene.remove(getHelpers(params._scene));
+
+  params._helpers = new THREE.Group();
+  params._helpers.userData.isHelper = true;
+
+  params._scene.add(params._helpers);
+
+  params._camera = null;
+  params._frustum = null;
+
+  if (params._texturesFrustum || params._texturesDistance) {
+    getPerspectiveCamera(params);
+
+    if (params._camera) {
+      params._frustum = new THREE.Frustum();
+
+      params._frustum.setFromProjectionMatrix(new THREE.Matrix4().multiplyMatrices(params._camera.projectionMatrix, params._camera.matrixWorldInverse));
+    } else {
+      params._texturesFrustum = params._texturesDistance = false;
+    }
+  }
+
+  setTexturableElements(params);
+
+  if (params._texturesFrustum) {
+    invalidateOutOfFrustum(params);
+  }
+
+  if (params._texturesDistance) {
+    checkDistances(params);
+  }
+
+  updateSceneLods(params);
+};
+
+var _default = drawLOD;
+exports.default = _default;

package/dist/helpers/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getObjectPosition = exports.cameraFitAnyObject = exports.usePrevious = exports.formatMessage = void 0;
+
+var _react = require("react");
+
+var _three = require("three");
+
+var formatMessage = function formatMessage(text) {
+  var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var result = text;
+  Object.keys(values).forEach(function (currentValue) {
+    result = result.replace("{".concat(currentValue, "}"), values[currentValue]);
+  });
+  return result;
+};
+
+exports.formatMessage = formatMessage;
+
+var usePrevious = function usePrevious(value) {
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
+
+exports.usePrevious = usePrevious;
+
+var cameraFitAnyObject = function cameraFitAnyObject(object, camera) {
+  var uOff = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  var controls = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  var offset = uOff || 1.25;
+  var boundingBox = new _three.Box3();
+  boundingBox.setFromObject(object);
+  var boundingBoxCenter = boundingBox.getCenter(new _three.Vector3());
+  var center = new _three.Vector3(0, boundingBoxCenter.y, 0);
+  var size = boundingBox.getSize(new _three.Vector3());
+  var maxDim = Math.max(size.x, size.y, size.z);
+  var fov = camera.fov * (Math.PI / 180);
+  var cameraZ = Math.abs(maxDim * Math.sqrt(2) / 2 * Math.tan(fov * 2));
+  cameraZ *= offset;
+  var objectWorldPosition = new _three.Vector3();
+  objectWorldPosition.setFromMatrixPosition(object.matrixWorld);
+  var directionVector = new _three.Vector3(1, 1, 1);
+  var unitDirectionVector = directionVector.normalize();
+  camera.position.copy(unitDirectionVector.multiplyScalar(cameraZ));
+  camera.lookAt(objectWorldPosition);
+  var minZ = boundingBox.min.z;
+  var cameraToFarEdge = minZ < 0 ? -minZ + cameraZ : cameraZ - minZ;
+  camera.far = cameraToFarEdge * 3;
+  camera.near = 0.01;
+  camera.updateProjectionMatrix();
+  camera.lookAt(center);
+
+  if (controls) {
+    controls.target = center;
+    controls.maxDistance = cameraToFarEdge * 2;
+    controls.saveState();
+  }
+};
+
+exports.cameraFitAnyObject = cameraFitAnyObject;
+
+var getObjectPosition = function getObjectPosition(object, camera, canvas) {
+  if (!object) return;
+  var point = new _three.Vector3();
+  var boundingBox = new _three.Box3().setFromObject(object);
+  boundingBox.getCenter(point);
+  var p = point.clone();
+  camera.updateMatrixWorld();
+  p.project(camera);
+  var clientHeight = canvas.clientHeight,
+      clientWidth = canvas.clientWidth;
+  var position = new _three.Vector2((p.x * clientWidth + clientWidth) / 2, (-p.y * clientHeight + clientHeight) / 2);
+  return position;
+};
+
+exports.getObjectPosition = getObjectPosition;

package/dist/helpers/lodStats.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _root = null;
+var _geo = 0;
+var _divideby64 = 0;
+var _divideby16 = 0;
+var _divideby4 = 0;
+var _original = 0;
+var style = "float:left;margin:5px;padding:5px;";
+
+function formatBytes(a) {
+  var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  if (0 === a) return "0 Bytes";
+  var c = 0 > b ? 0 : b,
+      d = Math.floor(Math.log(a) / Math.log(1024));
+  return parseFloat((a / Math.pow(1024, d)).toFixed(c)) + " " + ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][d];
+}
+
+var lodStats = function lodStats(obj) {
+  if (!_root) {
+    var root = document.getElementById('root');
+    var previous = document.getElementById('lodStats');
+    if (previous) root.removeChild(previous);
+    var div = document.createElement('div');
+    div.style = "border-radius:5px;color:white; background-color:black;position: fixed; top: 0px; left: 100px; opacity: 0.5; z-index: 10001;";
+    div.id = "lodStats";
+    root.appendChild(div);
+    _root = div;
+  }
+
+  if (obj.reset) {
+    _root.innerHTML = '';
+    _root = null;
+    _geo = _divideby64 = _divideby16 = _divideby4 = _original = 0;
+  } else {
+    _geo += obj.geometries ? obj.geometries : 0;
+    _divideby64 += obj.divideby64 ? obj.divideby64 : 0;
+    _divideby16 += obj.divideby16 ? obj.divideby16 : 0;
+    _divideby4 += obj.divideby4 ? obj.divideby4 : 0;
+    _original += obj.original ? obj.original : 0; // _root.innerHTML = `Geo: ${_geo} d64: ${_divideby64} d16: ${_divideby16} d4: ${_divideby4} original: ${_original}`;
+
+    _root.innerHTML = "\n      <div style=\"".concat(style, "\">  \n        <div>Geometries</div>\n        <div>").concat(formatBytes(_geo), "</div>\n      </div>\n      <div style=\"").concat(style, "\">  \n        <div style=\"color:red\">DivideBy64</div>\n        <div>").concat(formatBytes(_divideby64), "</div>\n      </div>\n      <div style=\"").concat(style, "\">  \n        <div style=\"color:green\">DivideBy16</div>\n        <div>").concat(formatBytes(_divideby16), "</div>\n      </div>\n      <div style=\"").concat(style, "\">  \n        <div style=\"color:blue\">DivideBy4</div>\n        <div>").concat(formatBytes(_divideby4), "</div>\n      </div>\n      <div style=\"").concat(style, "\">  \n        <div>Original</div>\n        <div>").concat(formatBytes(_original), "</div>\n      </div>\n    ");
+  }
+};
+
+var _default = lodStats;
+exports.default = _default;

package/dist/helpers/useGLB.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactPromiseSuspense = _interopRequireDefault(require("react-promise-suspense"));
+
+var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
+
+var _DRACOLoader = require("three/examples/jsm/loaders/DRACOLoader");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// We need this to reuse GLTF and DRACO loaders for Arcade working 
+// in Mobile devices, drei.useGLTF instances new loaders every time is
+// used
+var dracoDecoderPath = 'https://www.gstatic.com/draco/versioned/decoders/1.4.1/'; // TODO: Maybe download those files to statics.gamelearn
+
+var whiteImage = new Image();
+whiteImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=';
+var dracoLoader = new _DRACOLoader.DRACOLoader();
+var gltfLoader = new _GLTFLoader.GLTFLoader();
+dracoLoader.setDecoderPath(dracoDecoderPath);
+gltfLoader.setDRACOLoader(dracoLoader);
+
+var treatGeometry = function treatGeometry(res) {
+  res.scene.traverse(function (obj) {
+    if (obj.isMesh || obj.isSkinnedMesh) {
+      var keys = Object.keys(obj.material);
+      keys.forEach(function (key) {
+        var value = obj.material[key];
+
+        if (value && value.isTexture) {
+          obj.material[key].image = whiteImage;
+        }
+      });
+      obj.material.needsUpdate = true;
+    }
+  });
+};
+
+var fetchGlb = function fetchGlb(originalUrl) {
+  var isTexturableObject = originalUrl.includes('/character/') || originalUrl.includes('/object/');
+  var url = isTexturableObject ? originalUrl.replace('.glb', '.geometry.glb') : originalUrl;
+  return new Promise(function (resolve, reject) {
+    gltfLoader.load(url, function (result) {
+      treatGeometry(result);
+      resolve(result);
+    }, null, function (error) {
+      return reject(error);
+    });
+  });
+};
+
+var useGLB = function useGLB(url) {
+  return (0, _reactPromiseSuspense.default)(fetchGlb, [url]);
+};
+
+var _default = useGLB;
+exports.default = _default;

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _components = require("./components");
+
+Object.keys(_components).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _components[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _components[key];
+    }
+  });
+});

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@gamelearn/arcade-components",
+  "version": "0.2.0",
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gamelearn/arcade-components"
+  },
+  "dependencies": {
+    "@react-three/drei": "4.3.2",
+    "@react-three/fiber": "6.0.16",
+    "@testing-library/jest-dom": "5.11.4",
+    "@testing-library/react": "11.1.0",
+    "@testing-library/user-event": "12.1.10",
+    "hls.js": "0.12.4",
+    "prop-types": "15.7.2",
+    "react-pdf": "5.2.0",
+    "react-promise-suspense": "0.3.3",
+    "react-typist": "^2.0.5",
+    "three": "0.128.0",
+    "use-sound": "2.0.1",
+    "web-vitals": "0.2.4"
+  },
+  "scripts": {
+    "start": "npm run storybook",
+    "clean": "rimraf dist",
+    "compile": "npm run clean && cross-env NODE_ENV=production babel src -d dist --ignore src/**/*.stories.js,src/**/*.test.js,src/setupTests.js",
+    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(three)/)'",
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public",
+    "generate": "plop"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "7.12.10",
+    "@babel/preset-env": "7.12.11",
+    "@babel/preset-react": "7.12.10",
+    "@gamelearn/ui-components-core": "5.10.1",
+    "@react-three/test-renderer": "6.0.6",
+    "@storybook/addon-actions": "6.1.11",
+    "@storybook/addon-essentials": "6.1.11",
+    "@storybook/addon-links": "6.1.11",
+    "@storybook/node-logger": "6.1.11",
+    "@storybook/preset-create-react-app": "3.1.5",
+    "@storybook/react": "6.1.11",
+    "babel-loader": "8.2.2",
+    "cross-env": "7.0.3",
+    "plop": "^2.7.4",
+    "react": "0.0.0-experimental-27659559e",
+    "react-dom": "0.0.0-experimental-27659559e",
+    "react-scripts": "4.0.1",
+    "rimraf": "3.0.2"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "^react-pdf$": "react-pdf/dist/umd/entry.jest"
+    }
+  }
+}