diff --git a/packages/react-scripts/package-lock.json b/packages/react-scripts/package-lock.json index 23ecaa800be..00280e7eb45 100644 --- a/packages/react-scripts/package-lock.json +++ b/packages/react-scripts/package-lock.json @@ -1,6 +1,6 @@ { "name": "@fs/react-scripts", - "version": "3.0.0-RC.14", + "version": "3.0.0-RC.16", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1192,26 +1192,57 @@ } }, "@fs/eslint-config-frontier-react": { - "version": "2.3.0", - "resolved": "http://code.lds.org/artifactory/api/npm/npm-fhd/@fs/eslint-config-frontier-react/-/@fs/eslint-config-frontier-react-2.3.0.tgz", - "integrity": "sha1-dSqTPMBKvLqrtAU2EiWAwLXC5Ds=", + "version": "3.0.0", + "resolved": "http://code.lds.org/artifactory/api/npm/npm-fhd/@fs/eslint-config-frontier-react/-/@fs/eslint-config-frontier-react-3.0.0.tgz", + "integrity": "sha1-78xTuDU8X3Obv6C+eZ1ZlG2hAp4=", "requires": { "babel-eslint": "^10.0.1", "eslint-config-airbnb": "^17.1.0", - "eslint-config-prettier": "^3.3.0", + "eslint-config-prettier": "^6.6.0", "eslint-plugin-babel": "^5.3.0", - "eslint-plugin-html": "^5.0.3", + "eslint-plugin-html": "^6.0.0", "eslint-plugin-import": "^2.16.0", - "eslint-plugin-jest": "22.5.1", - "eslint-plugin-jsdoc": "^8.0.1", - "eslint-plugin-json": "^1.4.0", + "eslint-plugin-jest": "^23.0.4", + "eslint-plugin-jsdoc": "^18.0.1", + "eslint-plugin-json": "^2.0.1", "eslint-plugin-jsx-a11y": "^6.1.2", - "eslint-plugin-no-autofix": "0.0.2", + "eslint-plugin-no-autofix": "0.0.3", "eslint-plugin-only-warn": "^1.0.1", "eslint-plugin-prettier": "^3.0.0", - "eslint-plugin-react": "~7.14.3", - "eslint-plugin-react-hooks": "^1.0.2", + "eslint-plugin-react": "^7.16.0", + "eslint-plugin-react-hooks": "^2.3.0", "prettier": "^1.15.3" + }, + "dependencies": { + "doctrine": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", + "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", + "requires": { + "esutils": "^2.0.2" + } + }, + "eslint-plugin-react": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.16.0.tgz", + "integrity": "sha512-GacBAATewhhptbK3/vTP09CbFrgUJmBSaaRcWdbQLFvUZy9yVcQxigBNHGPU/KE2AyHpzj3AWXpxoMTsIDiHug==", + "requires": { + "array-includes": "^3.0.3", + "doctrine": "^2.1.0", + "has": "^1.0.3", + "jsx-ast-utils": "^2.2.1", + "object.entries": "^1.1.0", + "object.fromentries": "^2.0.0", + "object.values": "^1.1.0", + "prop-types": "^15.7.2", + "resolve": "^1.12.0" + } + }, + "eslint-plugin-react-hooks": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.3.0.tgz", + "integrity": "sha512-gLKCa52G4ee7uXzdLiorca7JIQZPPXRAQDXV83J4bUEeUuc5pIEyZYAZ45Xnxe5IuupxEqHS+hUhSLIimK1EMw==" + } } }, "@hapi/address": { @@ -1739,6 +1770,11 @@ "@types/istanbul-lib-report": "*" } }, + "@types/json-schema": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.3.tgz", + "integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==" + }, "@types/node": { "version": "6.14.9", "resolved": "https://registry.npmjs.org/@types/node/-/node-6.14.9.tgz", @@ -1775,6 +1811,56 @@ "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-13.1.0.tgz", "integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==" }, + "@typescript-eslint/experimental-utils": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.9.0.tgz", + "integrity": "sha512-0lOLFdpdJsCMqMSZT7l7W2ta0+GX8A3iefG3FovJjrX+QR8y6htFlFdU7aOVPL6pDvt6XcsOb8fxk5sq+girTw==", + "requires": { + "@types/json-schema": "^7.0.3", + "@typescript-eslint/typescript-estree": "2.9.0", + "eslint-scope": "^5.0.0" + }, + "dependencies": { + "eslint-scope": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz", + "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==", + "requires": { + "esrecurse": "^4.1.0", + "estraverse": "^4.1.1" + } + } + } + }, + "@typescript-eslint/typescript-estree": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.9.0.tgz", + "integrity": "sha512-v6btSPXEWCP594eZbM+JCXuFoXWXyF/z8kaSBSdCb83DF+Y7+xItW29SsKtSULgLemqJBT+LpT+0ZqdfH7QVmA==", + "requires": { + "debug": "^4.1.1", + "eslint-visitor-keys": "^1.1.0", + "glob": "^7.1.6", + "is-glob": "^4.0.1", + "lodash.unescape": "4.0.1", + "semver": "^6.3.0", + "tsutils": "^3.17.1" + }, + "dependencies": { + "glob": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + } + } + }, "@webassemblyjs/ast": { "version": "1.8.5", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz", @@ -2231,7 +2317,7 @@ "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, "auth-middleware": { - "version": "github:fs-webdev/auth-middleware#02a54ea840da821e616b11b69bcf0b1d61d4af10", + "version": "github:fs-webdev/auth-middleware#9ab16ef5c1256c36d3b32fb4032a4147c2e20b65", "from": "github:fs-webdev/auth-middleware", "requires": { "binding-registry-client": "github:fs-webdev/frontier-binding-registry-client#2.0.13", @@ -4020,9 +4106,9 @@ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" }, "comment-parser": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-0.5.5.tgz", - "integrity": "sha512-oB3TinFT+PV3p8UwDQt71+HkG03+zwPwikDlKU6ZDmql6QX2zFlQ+G0GGSDqyJhdZi4PSlzFBm+YJ+ebOX3Vgw==" + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-0.7.0.tgz", + "integrity": "sha512-m0SGP0RFO4P3hIBlIor4sBFPe5Y4HUeGgo/UZK/1Zdea5eUiqxroQ3lFqBDDSfWo9z9Q6LLnt2u0JqwacVEd/A==" }, "common-tags": { "version": "1.8.0", @@ -5341,48 +5427,70 @@ } }, "eslint": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.16.0.tgz", - "integrity": "sha512-S3Rz11i7c8AA5JPv7xAH+dOyq/Cu/VXHiHXBPOU1k/JAM5dXqQPt3qcrhpHSorXmrpu2g0gkIBVXAqCpzfoZIg==", + "version": "6.7.1", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.7.1.tgz", + "integrity": "sha512-UWzBS79pNcsDSxgxbdjkmzn/B6BhsXMfUaOHnNwyE8nD+Q6pyT96ow2MccVayUTV4yMid4qLhMiQaywctRkBLA==", "requires": { "@babel/code-frame": "^7.0.0", - "ajv": "^6.9.1", + "ajv": "^6.10.0", "chalk": "^2.1.0", "cross-spawn": "^6.0.5", "debug": "^4.0.1", "doctrine": "^3.0.0", - "eslint-scope": "^4.0.3", - "eslint-utils": "^1.3.1", - "eslint-visitor-keys": "^1.0.0", - "espree": "^5.0.1", + "eslint-scope": "^5.0.0", + "eslint-utils": "^1.4.3", + "eslint-visitor-keys": "^1.1.0", + "espree": "^6.1.2", "esquery": "^1.0.1", "esutils": "^2.0.2", "file-entry-cache": "^5.0.1", "functional-red-black-tree": "^1.0.1", - "glob": "^7.1.2", - "globals": "^11.7.0", + "glob-parent": "^5.0.0", + "globals": "^12.1.0", "ignore": "^4.0.6", "import-fresh": "^3.0.0", "imurmurhash": "^0.1.4", - "inquirer": "^6.2.2", - "js-yaml": "^3.13.0", + "inquirer": "^7.0.0", + "is-glob": "^4.0.0", + "js-yaml": "^3.13.1", "json-stable-stringify-without-jsonify": "^1.0.1", "levn": "^0.3.0", - "lodash": "^4.17.11", + "lodash": "^4.17.14", "minimatch": "^3.0.4", "mkdirp": "^0.5.1", "natural-compare": "^1.4.0", - "optionator": "^0.8.2", - "path-is-inside": "^1.0.2", + "optionator": "^0.8.3", "progress": "^2.0.0", "regexpp": "^2.0.1", - "semver": "^5.5.1", - "strip-ansi": "^4.0.0", - "strip-json-comments": "^2.0.1", + "semver": "^6.1.2", + "strip-ansi": "^5.2.0", + "strip-json-comments": "^3.0.1", "table": "^5.2.3", - "text-table": "^0.2.0" + "text-table": "^0.2.0", + "v8-compile-cache": "^2.0.3" }, "dependencies": { + "ansi-escapes": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.0.tgz", + "integrity": "sha512-EiYhwo0v255HUL6eDyuLrXEkTi7WwVCLAw+SeOQ7M7qdun1z1pum4DEm/nuqIVbPvi9RPPc9k9LbyBv6H0DwVg==", + "requires": { + "type-fest": "^0.8.1" + } + }, + "ansi-regex": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==" + }, + "cli-cursor": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz", + "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==", + "requires": { + "restore-cursor": "^3.1.0" + } + }, "doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -5391,38 +5499,162 @@ "esutils": "^2.0.2" } }, + "emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + }, "eslint-scope": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz", - "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz", + "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==", "requires": { "esrecurse": "^4.1.0", "estraverse": "^4.1.1" } }, + "figures": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/figures/-/figures-3.1.0.tgz", + "integrity": "sha512-ravh8VRXqHuMvZt/d8GblBeqDMkdJMBdv/2KntFH+ra5MXkO7nxNKpzQ3n6QD/2da1kH0aWmNISdvhM7gl2gVg==", + "requires": { + "escape-string-regexp": "^1.0.5" + } + }, + "glob-parent": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz", + "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==", + "requires": { + "is-glob": "^4.0.1" + } + }, + "globals": { + "version": "12.3.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-12.3.0.tgz", + "integrity": "sha512-wAfjdLgFsPZsklLJvOBUBmzYE8/CwhEqSBEMRXA3qxIiNtyqvjYurAtIfDh6chlEPUfmTY3MnZh5Hfh4q0UlIw==", + "requires": { + "type-fest": "^0.8.1" + } + }, "ignore": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==" }, "import-fresh": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.1.0.tgz", - "integrity": "sha512-PpuksHKGt8rXfWEr9m9EHIpgyyaltBy8+eF6GJM0QCAxMgxCfucMF3mjecK2QsJr0amJW7gTqh5/wht0z2UhEQ==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz", + "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==", "requires": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, + "inquirer": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.0.tgz", + "integrity": "sha512-rSdC7zelHdRQFkWnhsMu2+2SO41mpv2oF2zy4tMhmiLWkcKbOAs87fWAJhVXttKVwhdZvymvnuM95EyEXg2/tQ==", + "requires": { + "ansi-escapes": "^4.2.1", + "chalk": "^2.4.2", + "cli-cursor": "^3.1.0", + "cli-width": "^2.0.0", + "external-editor": "^3.0.3", + "figures": "^3.0.0", + "lodash": "^4.17.15", + "mute-stream": "0.0.8", + "run-async": "^2.2.0", + "rxjs": "^6.4.0", + "string-width": "^4.1.0", + "strip-ansi": "^5.1.0", + "through": "^2.3.6" + } + }, + "is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==" + }, + "mimic-fn": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", + "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==" + }, + "mute-stream": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", + "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==" + }, + "onetime": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz", + "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==", + "requires": { + "mimic-fn": "^2.1.0" + } + }, + "optionator": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz", + "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==", + "requires": { + "deep-is": "~0.1.3", + "fast-levenshtein": "~2.0.6", + "levn": "~0.3.0", + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2", + "word-wrap": "~1.2.3" + } + }, "resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" }, - "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" + "restore-cursor": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz", + "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==", + "requires": { + "onetime": "^5.1.0", + "signal-exit": "^3.0.2" + } + }, + "string-width": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz", + "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==", + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.0" + }, + "dependencies": { + "strip-ansi": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", + "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", + "requires": { + "ansi-regex": "^5.0.0" + } + } + } + }, + "strip-ansi": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "requires": { + "ansi-regex": "^4.1.0" + }, + "dependencies": { + "ansi-regex": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" + } + } } } }, @@ -5447,9 +5679,9 @@ } }, "eslint-config-prettier": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-3.6.0.tgz", - "integrity": "sha512-ixJ4U3uTLXwJts4rmSVW/lMXjlGwCijhBJHk8iVqKKSifeI0qgFEfWl8L63isfc8Od7EiBALF6BX3jKLluf/jQ==", + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.7.0.tgz", + "integrity": "sha512-FamQVKM3jjUVwhG4hEMnbtsq7xOIDm+SY5iBPfR8gKsJoAB2IQnNF+bk1+8Fy44Nq7PPJaLvkRxILYdJWoguKQ==", "requires": { "get-stdin": "^6.0.0" } @@ -5539,11 +5771,11 @@ } }, "eslint-plugin-html": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-5.0.5.tgz", - "integrity": "sha512-v/33i3OD0fuXcRXexVyXXBOe4mLBLBQoF1UO1Uy9D+XLq4MC8K45GcQKfqjC/FnHAHp3pYUjpHHktYNCtShGmg==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-6.0.0.tgz", + "integrity": "sha512-PQcGippOHS+HTbQCStmH5MY1BF2MaU8qW/+Mvo/8xTa/ioeMXdSP+IiaBw2+nh0KEMfYQKuTz1Zo+vHynjwhbg==", "requires": { - "htmlparser2": "^3.10.0" + "htmlparser2": "^3.10.1" } }, "eslint-plugin-import": { @@ -5580,28 +5812,35 @@ } }, "eslint-plugin-jest": { - "version": "22.5.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-22.5.1.tgz", - "integrity": "sha512-c3WjZR/HBoi4GedJRwo2OGHa8Pzo1EbSVwQ2HFzJ+4t2OoYM7Alx646EH/aaxZ+9eGcPiq0FT0UGkRuFFx2FHg==" + "version": "23.0.5", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-23.0.5.tgz", + "integrity": "sha512-etxXrWsFWzxsrxKwJnFC38uppH/vlJ3oF7Wmp/cxedqxRIxVhXup8e5y5MmtVXelevgxrgA1QS1vo8j889iK5Q==", + "requires": { + "@typescript-eslint/experimental-utils": "^2.5.0" + } }, "eslint-plugin-jsdoc": { - "version": "8.7.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-8.7.0.tgz", - "integrity": "sha512-4UzO2Yw+5s1DOfQCTaasUx8Ng/h6/nTtrO3gGiCD086pOAcDFkbVHKdGrGnGuXd90MPDE9bHD92xJ5ke3cMrRA==", + "version": "18.1.5", + "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-18.1.5.tgz", + "integrity": "sha512-dfq1YA0z2WaosgbEX3QPf37TDUcrfcRRjJ0HBgJYuA4XIV2ICe7dFxhJ8halIlKL4VNhUZ5GMKO1r0CPRvBN0g==", "requires": { - "comment-parser": "^0.5.5", + "comment-parser": "^0.7.0", "debug": "^4.1.1", - "flat-map-polyfill": "^0.3.8", - "jsdoctypeparser": "4.0.0", - "lodash": "^4.17.11" + "jsdoctypeparser": "^6.0.0", + "lodash": "^4.17.15", + "object.entries-ponyfill": "^1.0.1", + "regextras": "^0.6.1", + "semver": "^6.3.0", + "spdx-expression-parse": "^3.0.0" } }, "eslint-plugin-json": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-json/-/eslint-plugin-json-1.4.0.tgz", - "integrity": "sha512-CECvgRAWtUzuepdlPWd+VA7fhyF9HT183pZnl8wQw5x699Mk/MbME/q8xtULBfooi3LUbj6fToieNmsvUcDxWA==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-json/-/eslint-plugin-json-2.0.1.tgz", + "integrity": "sha512-IxKZIlMyBn0tvxlBj2viW0N/UBuoey1oYpV+SNVuNFmy4xsNuwgeoOjzEeFDnVXL0FpIo7UbQSeZ+lfh2D/nLQ==", "requires": { - "vscode-json-languageservice": "^3.2.1" + "lodash": "^4.17.15", + "vscode-json-languageservice": "^3.3.5" } }, "eslint-plugin-jsx-a11y": { @@ -5631,9 +5870,9 @@ } }, "eslint-plugin-no-autofix": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/eslint-plugin-no-autofix/-/eslint-plugin-no-autofix-0.0.2.tgz", - "integrity": "sha512-wS4fYYhGGz+/lLzBoafg3pxrPBQJ91PV39nLn36+SZqDYdBsXrCbgg1Y4dRJXfP/xeCrbZkxdNs54OIBnM4icw==", + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-no-autofix/-/eslint-plugin-no-autofix-0.0.3.tgz", + "integrity": "sha512-OSAwH3OqM16xQIq2fkmfG+f8U3zcsD+tBRghARPEayCwCsIcK6m2BGKEQlNXm65hQy/UEjPYsu8FOu7d6iiMxg==", "requires": { "eslint-rule-composer": "^0.3.0" } @@ -5710,13 +5949,20 @@ "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==" }, "espree": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/espree/-/espree-5.0.1.tgz", - "integrity": "sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/espree/-/espree-6.1.2.tgz", + "integrity": "sha512-2iUPuuPP+yW1PZaMSDM9eyVf8D5P0Hi8h83YtZ5bPc/zHYjII5khoixIUTMO794NOY8F/ThF1Bo8ncZILarUTA==", "requires": { - "acorn": "^6.0.7", - "acorn-jsx": "^5.0.0", - "eslint-visitor-keys": "^1.0.0" + "acorn": "^7.1.0", + "acorn-jsx": "^5.1.0", + "eslint-visitor-keys": "^1.1.0" + }, + "dependencies": { + "acorn": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz", + "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==" + } } }, "esprima": { @@ -6302,11 +6548,6 @@ } } }, - "flat-map-polyfill": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/flat-map-polyfill/-/flat-map-polyfill-0.3.8.tgz", - "integrity": "sha512-ZfmD5MnU7GglUEhiky9C7yEPaNq1/wh36RDohe+Xr3nJVdccwHbdTkFIYvetcdsoAckUKT51fuf44g7Ni5Doyg==" - }, "flatted": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.1.tgz", @@ -8981,9 +9222,9 @@ "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=" }, "jsdoctypeparser": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/jsdoctypeparser/-/jsdoctypeparser-4.0.0.tgz", - "integrity": "sha512-Bh6AW8eJ1bVdofhYUuqgFOVo0FE9qII+a+Go+juEnAfaDS5lZAiIqBAFm9gDu80OqBcQ1UI3v/8cP+3D5IGVww==" + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/jsdoctypeparser/-/jsdoctypeparser-6.0.0.tgz", + "integrity": "sha512-61VtBXLkHfOFSIdp/VDVNMksxK0ID0cPTNvxDR92tPA6K7r2AX0OcJegYxhJIwtpWKU4p3D9L3U02hhlP1kQLQ==" }, "jsdom": { "version": "11.12.0", @@ -9308,6 +9549,11 @@ "lodash._reinterpolate": "^3.0.0" } }, + "lodash.unescape": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/lodash.unescape/-/lodash.unescape-4.0.1.tgz", + "integrity": "sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw=" + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -10100,6 +10346,11 @@ "has": "^1.0.3" } }, + "object.entries-ponyfill": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/object.entries-ponyfill/-/object.entries-ponyfill-1.0.1.tgz", + "integrity": "sha1-Kavfd8v70mVm3RqiTp2I9lQz0lY=" + }, "object.fromentries": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.1.tgz", @@ -11534,9 +11785,9 @@ "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=" }, "prettier": { - "version": "1.18.2", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.18.2.tgz", - "integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==" + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", + "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==" }, "prettier-linter-helpers": { "version": "1.0.0", @@ -12254,6 +12505,11 @@ "unicode-match-property-value-ecmascript": "^1.1.0" } }, + "regextras": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/regextras/-/regextras-0.6.1.tgz", + "integrity": "sha512-EzIHww9xV2Kpqx+corS/I7OBmf2rZ0pKKJPsw5Dc+l6Zq1TslDmtRIP9maVn3UH+72MIXmn8zzDgP07ihQogUA==" + }, "regjsgen": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.1.tgz", @@ -13488,9 +13744,9 @@ "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=" }, "strip-json-comments": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", - "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=" + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz", + "integrity": "sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==" }, "style-loader": { "version": "1.0.0", @@ -14070,6 +14326,14 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz", "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==" }, + "tsutils": { + "version": "3.17.1", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz", + "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==", + "requires": { + "tslib": "^1.8.1" + } + }, "tty-browserify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", @@ -14101,6 +14365,11 @@ "prelude-ls": "~1.1.2" } }, + "type-fest": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", + "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==" + }, "type-is": { "version": "1.6.18", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", @@ -14371,6 +14640,11 @@ "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz", "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==" }, + "v8-compile-cache": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz", + "integrity": "sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==" + }, "validate-npm-package-license": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", @@ -14418,20 +14692,26 @@ "dev": true }, "vscode-json-languageservice": { - "version": "3.4.3", - "resolved": "https://registry.npmjs.org/vscode-json-languageservice/-/vscode-json-languageservice-3.4.3.tgz", - "integrity": "sha512-SRIy75K4/6H1vmMYVsxYwynFUNMOEzIhTy+Pm6D24JHTquwMe7rx/35X75u2sw65e46ZP67izyrJ6ahaAi8UjQ==", + "version": "3.4.7", + "resolved": "https://registry.npmjs.org/vscode-json-languageservice/-/vscode-json-languageservice-3.4.7.tgz", + "integrity": "sha512-y3MN2+/yph3yoIHGmHu4ScYpm285L58XVvfGkd49xTQzLja4apxSbwzsYcP9QsqS0W7KuvoyiPhqksiudoMwjg==", "requires": { "jsonc-parser": "^2.2.0", - "vscode-languageserver-types": "^3.15.0-next.5", + "vscode-languageserver-textdocument": "^1.0.0-next.4", + "vscode-languageserver-types": "^3.15.0-next.6", "vscode-nls": "^4.1.1", "vscode-uri": "^2.1.0" } }, + "vscode-languageserver-textdocument": { + "version": "1.0.0-next.5", + "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.0-next.5.tgz", + "integrity": "sha512-1jp/zAidN/bF/sqPimhBX1orH5G4rzRw63k75TesukJDuxm8yW79ECStWbDSy41BHGOwSGN4M69QFvhancSr5A==" + }, "vscode-languageserver-types": { - "version": "3.15.0-next.5", - "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.15.0-next.5.tgz", - "integrity": "sha512-7hrELhTeWieUgex3+6692KjCkcmO/+V/bFItM5MHGcBotzwmjEuXjapLLYTYhIspuJ1ibRSik5MhX5YwLpsPiw==" + "version": "3.15.0-next.9", + "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.15.0-next.9.tgz", + "integrity": "sha512-Rl/8qJ6932nrHCdPn+9y0x08uLVQaSLRG+U4JzhyKpWU4eJbVaDRoAcz1Llj7CErJGbPr6kdBvShPy5fRfR+Uw==" }, "vscode-nls": { "version": "4.1.1", @@ -14923,6 +15203,11 @@ "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=" }, + "word-wrap": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", + "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==" + }, "wordwrap": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", diff --git a/packages/react-scripts/scripts/utils/frontierInit.js b/packages/react-scripts/scripts/utils/frontierInit.js index 9407bf5a4e2..25045a1ff00 100644 --- a/packages/react-scripts/scripts/utils/frontierInit.js +++ b/packages/react-scripts/scripts/utils/frontierInit.js @@ -29,7 +29,7 @@ function installFrontierDependencies(appPath, appName, ownPath) { '@fs/zion-style-normalize@1', '@fs/zion-subnav@1', '@fs/zion-user@2', - '@fs/zion-ui@1', + '@fs/zion-ui@3', 'formik@1', 'i18next@17', 'react-i18next@10', @@ -51,7 +51,7 @@ function installFrontierDependencies(appPath, appName, ownPath) { '@fs/eslint-config-frontier-react@3', '@fs/babel-preset-frontier@2', '@fs/storybook-addons@1', - '@fs/zion-testing-library@1', + '@fs/zion-testing-library@2', '@fs/zion-style-normalize@1', 'eslint@6', 'i18next-scanner@2', diff --git a/packages/react-scripts/template-hf/src/setupProxy.js b/packages/react-scripts/template-hf/src/setupProxy.js index 05084e95592..34589e5fb74 100644 --- a/packages/react-scripts/template-hf/src/setupProxy.js +++ b/packages/react-scripts/template-hf/src/setupProxy.js @@ -11,7 +11,7 @@ const setupServer = require('../server') // put any custom proxies here, see https://www.familysearch.org/frontier/docs/develop/proxies const customProxies = [] -module.exports = app => { +module.exports = (app) => { // Sets up local proxies for XHR calls. // e.g. /service/tree/tf => https://beta.familysearch.org/service/tree/tf // beta above comes from your .env file diff --git a/packages/react-scripts/template-typescript/src/setupProxy.js b/packages/react-scripts/template-typescript/src/setupProxy.js index d3269c3c6c6..e3e9aef124b 100644 --- a/packages/react-scripts/template-typescript/src/setupProxy.js +++ b/packages/react-scripts/template-typescript/src/setupProxy.js @@ -2,6 +2,6 @@ // docs here: https://github.com/fs-webdev/exo#proxy const setProxies = require('@fs/react-scripts/proxy/setupProxy') -module.exports = app => { +module.exports = (app) => { setProxies(app) } diff --git a/packages/react-scripts/template/.storybook/config.js b/packages/react-scripts/template/.storybook/config.js index 60cb8cb7ddb..0509340b898 100644 --- a/packages/react-scripts/template/.storybook/config.js +++ b/packages/react-scripts/template/.storybook/config.js @@ -24,7 +24,7 @@ const baseCss = css` addDecorator(withKnobs) addDecorator(withA11y) addDecorator(addReadme) -addDecorator(storyFn => ( +addDecorator((storyFn) => ( diff --git a/packages/react-scripts/template/.storybook/middleware.js b/packages/react-scripts/template/.storybook/middleware.js index 2b629dfd4c0..d481c80cfa2 100644 --- a/packages/react-scripts/template/.storybook/middleware.js +++ b/packages/react-scripts/template/.storybook/middleware.js @@ -2,7 +2,7 @@ require('dotenv') const setupProxy = require('@fs/react-scripts/proxy/setupProxy') const customProxies = require('../src/setupProxy').customProxies -module.exports = router => { +module.exports = (router) => { setupProxy(router, customProxies) router.get('/dev-env', (req, res) => { diff --git a/packages/react-scripts/template/.storybook/webpack.config.js b/packages/react-scripts/template/.storybook/webpack.config.js index 1deeec139b0..dd0303b23e5 100644 --- a/packages/react-scripts/template/.storybook/webpack.config.js +++ b/packages/react-scripts/template/.storybook/webpack.config.js @@ -21,7 +21,7 @@ module.exports = async ({ config }) => { //ability to turn off HMR with an envar if (process.env.DISABLE_HMR === 'true') { - config.entry = config.entry.filter(singleEntry => !singleEntry.includes('/webpack-hot-middleware/')) + config.entry = config.entry.filter((singleEntry) => !singleEntry.includes('/webpack-hot-middleware/')) } return config @@ -37,7 +37,7 @@ function isNotStorybookBabelLoader(rule) { } function printRules(config) { - config.module.rules.forEach(rule => { + config.module.rules.forEach((rule) => { console.log('rule.test: ', rule.test) console.log('rule.include: ', rule.include) console.log('rule.exclude: ', rule.exclude) diff --git a/packages/react-scripts/template/src/components/example/ArtifactsCard.js b/packages/react-scripts/template/src/components/example/ArtifactsCard.js index 04298213432..e3ff5b297fc 100644 --- a/packages/react-scripts/template/src/components/example/ArtifactsCard.js +++ b/packages/react-scripts/template/src/components/example/ArtifactsCard.js @@ -1,12 +1,14 @@ import React from 'react' import PropTypes from 'prop-types' -import { Card, CardActions, CardContent, CardMedia } from '@fs/zion-ui' -import IconButton from '@fs/zion-ui/icon-button' +import { Card, CardActions, CardContent, CardMedia, IconButton, TypeBlock, colors } from '@fs/zion-ui' +import { Body1, Caption } from '@fs/zion-ui/type' +import { css } from '@emotion/core' import { SocialLike, ArrowChevron } from '@fs/zion-icon' import axios from '@fs/zion-axios' +import { boolAttr } from '@fs/zion-frontend-friends' // Custom hook for fetching artifacts from the the memory service -const useArtifacts = cisId => { +const useArtifacts = (cisId) => { // Handles dispatched actions // Take an action type, applies state changes and returns new state const reducer = (state, { type, ...data }) => { @@ -36,12 +38,12 @@ const useArtifacts = cisId => { .get( `/service/memories/presentation/patrons/${cisId}/persons?numTaggedPersonArtifacts=3&includeTaggedPersons=true&includeEmptyPersons=false&includeHistory=false` ) - .then(response => response.data.filter(a => a.featuredImages && a.featuredImages.length > 0)) - .then(artifacts => { + .then((response) => response.data.filter((a) => a.featuredImages && a.featuredImages.length > 0)) + .then((artifacts) => { // Success! Dispatch action with results dispatch({ type: 'SUCCESS', artifacts }) }) - .catch(error => dispatch({ type: 'ERROR', error })) // Dispatch Error, update state + .catch((error) => dispatch({ type: 'ERROR', error })) // Dispatch Error, update state }, [cisId]) return [state] @@ -57,11 +59,11 @@ const ArtifactsCard = ({ cisId, likeButtonPressed }) => { // Event handlers const handleNextClick = () => { - setSelectedIndex(currentIndex => currentIndex + 1) + setSelectedIndex((currentIndex) => currentIndex + 1) } const handlePreviousClick = () => { - setSelectedIndex(currentIndex => currentIndex - 1) + setSelectedIndex((currentIndex) => currentIndex - 1) } const handleToggleLiked = () => { @@ -69,7 +71,7 @@ const ArtifactsCard = ({ cisId, likeButtonPressed }) => { likeButtonPressed() // Update internal state - setLiked(current => { + setLiked((current) => { current[selectedIndex] = !current[selectedIndex] return current }) @@ -77,15 +79,27 @@ const ArtifactsCard = ({ cisId, likeButtonPressed }) => { // Helper functions for rendering function renderLoading() { - return Loading ... + return ( + + + + ) } function renderError() { - return An error has occured + return ( + + + + ) } function renderNoArtifacts() { - return There are no artifacts to display. + return ( + + There are no artifacts to display + + ) } function renderArtifacts() { @@ -97,31 +111,57 @@ const ArtifactsCard = ({ cisId, likeButtonPressed }) => { <> -

{selectedArtifact.name}

+ + {featuredImage.title} - - - - - - - - - + + + ) } return ( - + {error && renderError()} {loading ? renderLoading() : renderArtifacts()} ) } +const ToggleIconButton = ({ pressed = false, ...props }) => { + const buttonStyle = css` + &[pressed] { + svg { + fill: ${colors.link.visited}; + } + } + ` + return ( +
+ +
+ ) +} + ArtifactsCard.propTypes = { /** User is needed to obtain artifacts from their family history from memory service. */ user: PropTypes.shape({ diff --git a/packages/react-scripts/template/src/components/example/Example.stories.js b/packages/react-scripts/template/src/components/example/Example.stories.js index 74ce29a5c08..2f1c1cae45a 100644 --- a/packages/react-scripts/template/src/components/example/Example.stories.js +++ b/packages/react-scripts/template/src/components/example/Example.stories.js @@ -4,7 +4,7 @@ import ExamplePageComponent from './ExamplePage' import LearnReactCardComponent from './LearnReactCard' import ZionCardComponent from './ZionCard' import NotSignedInCardComponent from './NotSignedInCard' -import SignedInCardReadme from './SignedInCard.md' +import UserCardComponent from './UserCard' export default { title: 'ExamplePage', @@ -14,16 +14,7 @@ export const ExamplePage = () => export const LearnReactCard = () => -export const SignedInCard = () => null - -SignedInCard.story = { - name: 'Signed In Card', - parameters: { - readme: { - content: SignedInCardReadme, - }, - }, -} +export const UserCard = () => export const NotSignedInCard = () => diff --git a/packages/react-scripts/template/src/components/example/ExamplePage.js b/packages/react-scripts/template/src/components/example/ExamplePage.js index 7fbf8da42d8..b25383d5fa0 100644 --- a/packages/react-scripts/template/src/components/example/ExamplePage.js +++ b/packages/react-scripts/template/src/components/example/ExamplePage.js @@ -1,13 +1,13 @@ import React from 'react' import { useUser } from '@fs/zion-user' -import { Grid, Cell } from '@fs/zion-ui' +import { Grid, Cell, TypeBlock } from '@fs/zion-ui' import FrontierDocsCard from './FrontierDocsCard' import ZionCard from './ZionCard' import LearnReactCard from './LearnReactCard' import NotSignedInCard from './NotSignedInCard' import ArtifactsCard from './ArtifactsCard' import UserCard from './UserCard' -import FormCard from './FormCard/FormCard' +import FormCard from './FormCard' // Hook to generate a random color const useRandomColor = () => { @@ -40,7 +40,7 @@ const ExamplePage = () => { // Event handlers function likeButtonPressed() { - setLikeButtonPressedCount(currentCount => currentCount + 1) + setLikeButtonPressedCount((currentCount) => currentCount + 1) } function handleLogoAnimationDurationChange(duration) { @@ -51,7 +51,7 @@ const ExamplePage = () => { {/* Row 1 */} -

Welcome to your new Frontier Application

+ {/* Row 2 */} @@ -72,19 +72,22 @@ const ExamplePage = () => { - - - + { + + + + } {/* Row 4 */} - + + { likeButtonPressed={likeButtonPressed} /> - - + diff --git a/packages/react-scripts/template/src/components/example/FormCard.js b/packages/react-scripts/template/src/components/example/FormCard.js new file mode 100644 index 00000000000..bb13bbc6aac --- /dev/null +++ b/packages/react-scripts/template/src/components/example/FormCard.js @@ -0,0 +1,142 @@ +import React from 'react' +import { css } from '@emotion/core' +import { Button, Card, CardContent, TextField, ZionForm, Autosuggest, TypeBlock, Checkbox, colors } from '@fs/zion-ui' +import InputRow from '@fs/zion-ui/input-row' +import * as Yup from 'yup' + +const FormCard = () => { + const [data, setData] = React.useState() + + const handleFormSubmit = (formData) => { + setData(formData) + } + + const handleStartOver = () => setData(null) + + return ( + + + {data ? ( + + ) : ( + + )} + + + ) +} + +const InputForm = ({ handleFormSubmit }) => { + // Create a list of options for the autosuggest form element + const emotions = ['joy', 'surprise', 'glee', 'astonishment', 'thirst', 'surprise'] + const emotionOptions = emotions.map((emotion, idx) => ({ id: idx, primaryText: emotion })) + + // Yup is a 3rd party library for validating + // objects. It has a similar api to prop-types. + // Docs here: https://www.npmjs.com/package/yup + const validationSchema = Yup.object().shape({ + adjective1: Yup.string() + .matches(/ing$/, 'must end with "ing"') + .required(), + pluralNoun3: Yup.string() + .min(3) + .max(10) + .required(), + + pluralNoun1: Yup.string().required(), + emotion1: Yup.string().required(), + pluralNoun2: Yup.string().required(), + verb1: Yup.string().required(), + verb2: Yup.string().required(), + verb3: Yup.string().required(), + timePeriod1: Yup.string().required(), + }) + + const defaultValues = { + adjective1: 'inspiring', + pluralNoun1: 'experiences', + emotion1: emotionOptions[0], + pluralNoun2: 'people', + pluralNoun3: 'families', + verb1: 'discover', + verb2: 'gather', + verb3: 'connect', + timePeriod1: 'future', + } + return ( + <> + + { + handleFormSubmit(formData) + }} + initialValues={defaultValues} + validationSchema={validationSchema} + mustTouchToError + render={({ values, errors, ...props }) => ( + <> + + + + + + + + + + + + {values.debug && 
{JSON.stringify({ errors, values }, null, 2)}
} + + + + + + + )} + /> + + ) +} + +const PurposeStatement = ({ + handleStartOver, + data: { adjective1, pluralNoun1, emotion1, pluralNoun2, pluralNoun3, verb1, verb2, verb3, timePeriod1 }, +}) => { + const containerCss = css` + margin-top: 15px; + margin-bottom: 15px; + text-transform: uppercase; + font-size: 20px; + color: ${colors.text.secondary}; + ` + + return ( + <> + + +
+ We create {adjective1} {pluralNoun1} that bring {emotion1.primaryText} to all {pluralNoun2} as they {verb1},{' '} + {verb2} and {verb3} their {pluralNoun3} - past, present and {timePeriod1}. +
+ + + ) +} + +// Use React.memo() to keep our component from re-rendering if the props haven't changed +// https://reactjs.org/docs/react-api.html#reactmemo +// https://egghead.io/lessons/react-prevent-unnecessary-component-rerenders-with-react-memo +export default React.memo(FormCard) diff --git a/packages/react-scripts/template/src/components/example/FormCard/EditData.js b/packages/react-scripts/template/src/components/example/FormCard/EditData.js deleted file mode 100644 index 942ddd6694e..00000000000 --- a/packages/react-scripts/template/src/components/example/FormCard/EditData.js +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react' -import { Form, Field, ErrorMessage } from 'formik' -import { Grid, Cell } from '@fs/zion-ui/grid' -import { TextField, Checkbox, FormControlLabel } from '@fs/zion-ui' - -export default function Edit({ values, errors, touched }) { - return ( -
- - - {/* Field comes from formik. In helps with controlling your input (https://reactjs.org/docs/forms.html#controlled-components) - So within the field render prop, are the onChange and value props that are passed to TextField. */} - - {({ field }) => ( - <> - {/* TextField is a zion component for text inputs and textareas. */} - - {/* ErrorMessage is a formik component to help with rendering error messages */} -

{msg}

} /> - - )} - - - - - {({ field }) => ( - <> - -

{msg}

} /> - - )} - - - - - {({ field }) => ( - <> - -

{msg}

} /> - - )} - - - - - {({ field }) => ( - <> - -

{msg}

} /> - - )} - - - - - {({ field }) => ( - <> - -

{msg}

} /> - - )} - - - -
- - {({ field }) => ( - <> - } label="Debug Formik" /> - - )} - -
- - - {/* This section is helpful to understand a little about what formik is doing to the values and errors in the ui. */} - {values.debug && 
{JSON.stringify({ errors, values }, null, 2)}
} -
- ) -} diff --git a/packages/react-scripts/template/src/components/example/FormCard/FormCard.js b/packages/react-scripts/template/src/components/example/FormCard/FormCard.js deleted file mode 100644 index cde559539a1..00000000000 --- a/packages/react-scripts/template/src/components/example/FormCard/FormCard.js +++ /dev/null @@ -1,159 +0,0 @@ -import React, { useState, lazy } from 'react' -import { Button, Card, CardActions, CardContent } from '@fs/zion-ui' -import { Formik } from 'formik' -import * as Yup from 'yup' -import { useCache } from '@fs/zion-cache' -import ListData from './ListData' - -// lazy importing EditData, which is depending on whether I'm in editing mode or not. -const EditData = lazy(() => import('./EditData')) - -// This is a zion-cache config object. Docs: https://beta.familysearch.org/frontier/zion/?path=/story/utilities-cache--cache-class-api -const cache = { dbName: 'formik', storeName: 'example' } -const key = 'example' - -// This is the shape of the data in our form. -// Below, we'll use this same shape for validation -// and formik will use this shape when managing the form. -const initialValue = { - username: '', - password: '', - food: '', - email: '', - age: undefined, - debug: false, -} -const FormCard = () => { - // useCache is a hook to persist a piece of - // data in zion-cache. You pass it the zion-cache - // config, the key where the data is to be stored - // and an optional initialValue. The api is meant - // to mimick useState. - const [cachedData, setCachedData] = useCache({ - cache, - key, - initialValue, - }) - const [isEditing, setIsEditing] = useState(false) - - // Yup is a 3rd party library for validating - // objects. It has a similar api to prop-types. - // Docs here: https://www.npmjs.com/package/yup - const validationSchema = Yup.object().shape({ - username: Yup.string() - .min(4, 'Must be at least 4 characters long.') - .max(15, 'Must be less than 15 characters') - .required('Username is required'), - password: Yup.string() - .min(8, 'Must be at least 8 characters') - .max(50, 'Too Long!') - .required('Password is required'), - email: Yup.string().email('Please enter a valid email'), - age: Yup.number() - .min(8) - .max(65), - food: Yup.string().max(50), - }) - - return ( - - {/* wait for cachedData to exist since formik - will take use that object for it's dirty and - validation checking - - Formik is a library to help tame forms in react. - Docs: https://jaredpalmer.com/formik/ - */} - {cachedData ? ( - { - setCachedData(values) - actions.setSubmitting(false) - setIsEditing(false) - }} - > - {/* formik gives you render props to access values, errors and helper functions - to deal with your form. */} - {({ values, errors, touched, handleSubmit, isValid, isDirty, resetForm }) => ( - <> - -

Forms in React

-

- We recommend Formik. It's really helpful to watch - the author's video to - understand the why. -

-

Example Form

- - {/* isEditing is a simple boolean state that is toggled by a button below. - - Errors and values from formik are passed into the EditData component. */} - {isEditing ? ( - - ) : ( - - )} - - - {isEditing ? ( - <> - - - - ) : ( - <> - - - - )} - - - )} - - ) : ( - 'Loading...' - )} - - ) -} - -// Use React.memo() to keep our component from re-rendering if the props havent changed -// https://reactjs.org/docs/react-api.html#reactmemo -// https://egghead.io/lessons/react-prevent-unnecessary-component-rerenders-with-react-memo -export default React.memo(FormCard) diff --git a/packages/react-scripts/template/src/components/example/FormCard/ListData.js b/packages/react-scripts/template/src/components/example/FormCard/ListData.js deleted file mode 100644 index d44bd2eaca1..00000000000 --- a/packages/react-scripts/template/src/components/example/FormCard/ListData.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react' -import { List, ListItem, ListItemText } from '@fs/zion-ui/list' - -export default function ListData({ data }) { - // All the components used in this component come from zion. - // This component is just for listing the data that comes from the form. - return ( - - - - - - - - - - - - - - - - - - ) -} diff --git a/packages/react-scripts/template/src/components/example/FrontierDocsCard.js b/packages/react-scripts/template/src/components/example/FrontierDocsCard.js index 0203284d992..7bd9205de39 100644 --- a/packages/react-scripts/template/src/components/example/FrontierDocsCard.js +++ b/packages/react-scripts/template/src/components/example/FrontierDocsCard.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import { Button, Card, CardActions, CardContent, CardActionArea } from '@fs/zion-ui' +import { Button, Card, CardActions, CardContent, CardActionArea, TypeBlock } from '@fs/zion-ui' +import { Body1 } from '@fs/zion-ui/type' import { useTranslation } from 'react-i18next' import Logo from './Logo' @@ -10,13 +11,13 @@ const FrontierDocsCard = ({ logoColor, animationDuration, handleLogoClick }) => return ( -

{t('getting.started.title', 'Getting Started')}

-

- {t( + + /> -

{t('getting.started.learnmore', 'Ready to learn more? Visit the frontier docs.')}

+ {t('getting.started.learnmore', 'Ready to learn more? Visit the frontier docs.')} - diff --git a/packages/react-scripts/template/src/components/example/LearnReactCard.js b/packages/react-scripts/template/src/components/example/LearnReactCard.js index 456c440b330..078b501f597 100644 --- a/packages/react-scripts/template/src/components/example/LearnReactCard.js +++ b/packages/react-scripts/template/src/components/example/LearnReactCard.js @@ -1,23 +1,16 @@ import React from 'react' -import { Button, Card, CardMedia, CardActions, CardContent } from '@fs/zion-ui' +import { Button, Card, CardMedia, CardActions, CardContent, TypeBlock } from '@fs/zion-ui' import ReactImage from './reactjs.jpg' const LearnReactCard = () => ( - + -

Learn React

+ - - + diff --git a/packages/react-scripts/template/src/components/example/Logo.js b/packages/react-scripts/template/src/components/example/Logo.js index 9fc5b0b8f57..6dd0626ca10 100644 --- a/packages/react-scripts/template/src/components/example/Logo.js +++ b/packages/react-scripts/template/src/components/example/Logo.js @@ -28,8 +28,8 @@ const Logo = ({ color = 'black', animationDuration = 20 }) => { const [svgContent, setSvgContent] = React.useState() React.useEffect(() => { - fetch(logo).then(response => { - response.text().then(content => setSvgContent(content)) + fetch(logo).then((response) => { + response.text().then((content) => setSvgContent(content)) }) }) diff --git a/packages/react-scripts/template/src/components/example/NotSignedInCard.js b/packages/react-scripts/template/src/components/example/NotSignedInCard.js index b8e919efa94..39e63736a22 100644 --- a/packages/react-scripts/template/src/components/example/NotSignedInCard.js +++ b/packages/react-scripts/template/src/components/example/NotSignedInCard.js @@ -6,7 +6,7 @@ const NotSignedInCard = ({ user: { userLoading } }) => ( {userLoading ?

User loading ...

:

You must sign in to see this content

} - diff --git a/packages/react-scripts/template/src/components/example/UserCard.js b/packages/react-scripts/template/src/components/example/UserCard.js index 15356a7058a..1f02ca8e9a4 100644 --- a/packages/react-scripts/template/src/components/example/UserCard.js +++ b/packages/react-scripts/template/src/components/example/UserCard.js @@ -1,28 +1,12 @@ import React from 'react' import PropTypes from 'prop-types' import { css } from '@emotion/core' -import { - Button, - Dialog, - DialogTitle, - Avatar, - Card, - CardActions, - CardContent, - CardHeader, - List, - ListItem, - ListItemText, - ListItemIcon, - TextField, - TypeBlock, - useOpener, -} from '@fs/zion-ui' +import { Button, Card, CardActions, CardContent, List, ListItem, TextField, TypeBlock, useOpener } from '@fs/zion-ui' import { ViewerContrastMore, SocialLike, MediaFastForward } from '@fs/zion-icon' import axios from '@fs/zion-axios' // Hook for fetching a users portrait -const usePersonPortrait = personId => { +const usePersonPortrait = (personId) => { const reducer = (state, { type, response }) => { switch (type) { case 'FETCHING': @@ -44,15 +28,15 @@ const usePersonPortrait = personId => { React.useEffect(() => { axios .get(`/service/memories/tps/persons/${personId}/portrait`) - .then(response => dispatch({ type: 'SUCCESS', response })) - .catch(response => dispatch({ type: 'ERROR', response })) + .then((response) => dispatch({ type: 'SUCCESS', response })) + .catch((response) => dispatch({ type: 'ERROR', response })) }, [personId]) return [state] } // Hook for fetchting a users details -const usePersonDetails = personId => { +const usePersonDetails = (personId) => { const reducer = (state, { type, response }) => { switch (type) { case 'FETCHING': @@ -70,8 +54,8 @@ const usePersonDetails = personId => { React.useEffect(() => { axios .get(`/service/tree/tf/person/CURRENT`) - .then(response => dispatch({ type: 'SUCCESS', response })) - .catch(response => dispatch({ type: 'ERROR', response })) + .then((response) => dispatch({ type: 'SUCCESS', response })) + .catch((response) => dispatch({ type: 'ERROR', response })) }, [personId]) return [state] @@ -87,76 +71,43 @@ const UserCard = ({ const dialogOpener = useOpener() const [{ portraitUrl }] = usePersonPortrait(user.personId) const [{ details }] = usePersonDetails(user.personId) - const { personId, cisId, gender, displayName, contactName } = user + // const { personId, cisId, gender, displayName, contactName } = user + const { displayName, contactName } = user return details ? ( - } title={displayName} subheader={contactName} /> + - - - - - - - - - - - - - - - - - handleLogoAnimationDurationChange(e.target.value)} - /> - + + ( + + )} + /> + handleLogoAnimationDurationChange(e.target.value)} + /> + } + /> - - - - - - - - - - - - - - - - - - - - - - + diff --git a/packages/react-scripts/template/src/components/example/ZionCard.js b/packages/react-scripts/template/src/components/example/ZionCard.js index 76f1ce058c7..01a8bee9799 100644 --- a/packages/react-scripts/template/src/components/example/ZionCard.js +++ b/packages/react-scripts/template/src/components/example/ZionCard.js @@ -1,21 +1,19 @@ import React from 'react' -import { Button, Card, CardMedia, CardActions, CardContent } from '@fs/zion-ui' +import { Button, Card, CardMedia, CardActions, CardContent, TypeBlock } from '@fs/zion-ui' import ZionImage from './zion.jpg' const ZionCard = () => ( - + -

Zion

-

Zion is the place to go to find reusable components for your FamilySearch application.

+ - - + + ) diff --git a/packages/react-scripts/template/src/serviceWorker.js b/packages/react-scripts/template/src/serviceWorker.js index 13c3f4f2485..b6d77b2be83 100644 --- a/packages/react-scripts/template/src/serviceWorker.js +++ b/packages/react-scripts/template/src/serviceWorker.js @@ -55,7 +55,7 @@ export function register(config) { function registerValidSW(swUrl, config) { navigator.serviceWorker .register(swUrl) - .then(registration => { + .then((registration) => { registration.onupdatefound = () => { const installingWorker = registration.installing if (installingWorker == null) { @@ -91,7 +91,7 @@ function registerValidSW(swUrl, config) { } } }) - .catch(error => { + .catch((error) => { console.error('Error during service worker registration:', error) }) } @@ -99,12 +99,12 @@ function registerValidSW(swUrl, config) { function checkValidServiceWorker(swUrl, config) { // Check if the service worker can be found. If it can't reload the page. fetch(swUrl) - .then(response => { + .then((response) => { // Ensure service worker exists, and that we really are getting a JS file. const contentType = response.headers.get('content-type') if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) { // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { + navigator.serviceWorker.ready.then((registration) => { registration.unregister().then(() => { window.location.reload() }) @@ -121,7 +121,7 @@ function checkValidServiceWorker(swUrl, config) { export function unregister() { if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { + navigator.serviceWorker.ready.then((registration) => { registration.unregister() }) } diff --git a/packages/react-scripts/template/src/setupProxy.js b/packages/react-scripts/template/src/setupProxy.js index 98dcdb422c6..6fdd63a64a9 100644 --- a/packages/react-scripts/template/src/setupProxy.js +++ b/packages/react-scripts/template/src/setupProxy.js @@ -7,7 +7,7 @@ const setProxies = require('@fs/react-scripts/proxy/setupProxy') // Make setProxies() available in other files -module.exports = app => { +module.exports = (app) => { // Sets up local proxies for XHR calls. // e.g. /service/tf => https://beta.familysearch.org/service/tf // beta above comes from your .env file