diff --git a/.eslintcache b/.eslintcache index 3a6ccfd..2ea2fd2 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx":"6","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"7","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx":"8","/home/blobt/Documents/dev/node/study_react_ts/src/components/ContextText.tsx":"9"},{"size":500,"mtime":1608887700017,"results":"10","hashOfConfig":"11"},{"size":425,"mtime":1608882568140,"results":"12","hashOfConfig":"11"},{"size":683,"mtime":1609139788949,"results":"13","hashOfConfig":"11"},{"size":627,"mtime":1609135687431,"results":"14","hashOfConfig":"11"},{"size":1138,"mtime":1609126836504,"results":"15","hashOfConfig":"11"},{"size":777,"mtime":1608947625775,"results":"16","hashOfConfig":"11"},{"size":535,"mtime":1608965352064,"results":"17","hashOfConfig":"11"},{"size":485,"mtime":1608970157307,"results":"18","hashOfConfig":"11"},{"size":314,"mtime":1609140023568,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"46l3t",{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"33"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"33"},{"filePath":"36","messages":"37","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["40","41"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx",["42"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx",[],["43","44"],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["45","46"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/ContextText.tsx",[],{"ruleId":"47","replacedBy":"48"},{"ruleId":"49","replacedBy":"50"},{"ruleId":"51","severity":1,"message":"52","line":13,"column":8,"nodeType":"53","endLine":13,"endColumn":10,"suggestions":"54"},{"ruleId":"47","replacedBy":"55"},{"ruleId":"49","replacedBy":"56"},{"ruleId":"51","severity":1,"message":"57","line":14,"column":8,"nodeType":"58","endLine":14,"endColumn":12},{"ruleId":"51","severity":1,"message":"59","line":14,"column":8,"nodeType":"58","endLine":14,"endColumn":12,"suggestions":"60"},"no-native-reassign",["61"],"no-negated-in-lhs",["62"],"react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array.","ArrayExpression",["63"],["61"],["62"],"React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.","Identifier","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.",["64"],"no-global-assign","no-unsafe-negation",{"desc":"65","fix":"66"},{"desc":"67","fix":"68"},"Update the dependencies array to be: [data]",{"range":"69","text":"70"},"Update the dependencies array to be: [url]",{"range":"71","text":"72"},[280,282],"[data]",[415,419],"[url]"] \ No newline at end of file +[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx":"6","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"7","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx":"8"},{"size":508,"mtime":1609414907652,"results":"9","hashOfConfig":"10"},{"size":425,"mtime":1608882568140,"results":"11","hashOfConfig":"10"},{"size":273,"mtime":1609509849169,"results":"12","hashOfConfig":"10"},{"size":627,"mtime":1609135687431,"results":"13","hashOfConfig":"10"},{"size":1138,"mtime":1609126836504,"results":"14","hashOfConfig":"10"},{"size":777,"mtime":1608947625775,"results":"15","hashOfConfig":"10"},{"size":535,"mtime":1608965352064,"results":"16","hashOfConfig":"10"},{"size":485,"mtime":1608970157307,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"46l3t",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"31"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"31"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["36","37"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx",["38"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx",[],["39","40"],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["41","42"],{"ruleId":"43","replacedBy":"44"},{"ruleId":"45","replacedBy":"46"},{"ruleId":"47","severity":1,"message":"48","line":13,"column":8,"nodeType":"49","endLine":13,"endColumn":10,"suggestions":"50"},{"ruleId":"43","replacedBy":"51"},{"ruleId":"45","replacedBy":"52"},{"ruleId":"47","severity":1,"message":"53","line":14,"column":8,"nodeType":"54","endLine":14,"endColumn":12},{"ruleId":"47","severity":1,"message":"55","line":14,"column":8,"nodeType":"54","endLine":14,"endColumn":12,"suggestions":"56"},"no-native-reassign",["57"],"no-negated-in-lhs",["58"],"react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array.","ArrayExpression",["59"],["57"],["58"],"React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.","Identifier","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.",["60"],"no-global-assign","no-unsafe-negation",{"desc":"61","fix":"62"},{"desc":"63","fix":"64"},"Update the dependencies array to be: [data]",{"range":"65","text":"66"},"Update the dependencies array to be: [url]",{"range":"67","text":"68"},[280,282],"[data]",[415,419],"[url]"] \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 8696b56..ffaa06b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3573,6 +3573,14 @@ "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==", "optional": true }, + "block-stream": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", + "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=", + "requires": { + "inherits": "~2.0.0" + } + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -5403,11 +5411,6 @@ "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz", "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==" }, - "env-paths": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.0.tgz", - "integrity": "sha512-6u0VYSCo/OW6IoD5WCLLy9JUGARbamfSavcNXry/eu8aHVFei6CD3Sw+VGX5alea1i9pgPHW0mbu6Xj0uBh7gA==" - }, "errno": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", @@ -6857,6 +6860,27 @@ "integrity": "sha512-bTLYHSeC0UH/EFXS9KqWnXuOl/wHK5Z/d+ghd5AsFMYN7wIGkUCOJyzy88+wJKkZPGON8u4Z9f6U4FdgURE9qA==", "optional": true }, + "fstream": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz", + "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==", + "requires": { + "graceful-fs": "^4.1.2", + "inherits": "~2.0.0", + "mkdirp": ">=0.5 0", + "rimraf": "2" + }, + "dependencies": { + "rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", + "requires": { + "glob": "^7.1.3" + } + } + } + }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -7640,6 +7664,11 @@ "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=" }, + "in-publish": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz", + "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==" + }, "indent-string": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", @@ -10503,28 +10532,45 @@ "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==" }, "node-gyp": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-7.1.2.tgz", - "integrity": "sha512-CbpcIo7C3eMu3dL1c3d0xw449fHIGALIJsRP4DDPHpyiW8vcriNY7ubh9TE4zEKfSxscY7PjeFnshE7h75ynjQ==", + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz", + "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==", "requires": { - "env-paths": "^2.2.0", - "glob": "^7.1.4", - "graceful-fs": "^4.2.3", - "nopt": "^5.0.0", - "npmlog": "^4.1.2", - "request": "^2.88.2", - "rimraf": "^3.0.2", - "semver": "^7.3.2", - "tar": "^6.0.2", - "which": "^2.0.2" + "fstream": "^1.0.0", + "glob": "^7.0.3", + "graceful-fs": "^4.1.2", + "mkdirp": "^0.5.0", + "nopt": "2 || 3", + "npmlog": "0 || 1 || 2 || 3 || 4", + "osenv": "0", + "request": "^2.87.0", + "rimraf": "2", + "semver": "~5.3.0", + "tar": "^2.0.0", + "which": "1" }, "dependencies": { - "which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "rimraf": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", "requires": { - "isexe": "^2.0.0" + "glob": "^7.1.3" + } + }, + "semver": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", + "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=" + }, + "tar": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz", + "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==", + "requires": { + "block-stream": "*", + "fstream": "^1.0.12", + "inherits": "2" } } } @@ -10631,21 +10677,22 @@ "integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==" }, "node-sass": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-5.0.0.tgz", - "integrity": "sha512-opNgmlu83ZCF792U281Ry7tak9IbVC+AKnXGovcQ8LG8wFaJv6cLnRlc6DIHlmNxWEexB5bZxi9SZ9JyUuOYjw==", + "version": "4.14.1", + "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz", + "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==", "requires": { "async-foreach": "^0.1.3", "chalk": "^1.1.1", - "cross-spawn": "^7.0.3", + "cross-spawn": "^3.0.0", "gaze": "^1.0.0", "get-stdin": "^4.0.1", "glob": "^7.0.3", + "in-publish": "^2.0.0", "lodash": "^4.17.15", "meow": "^3.7.0", "mkdirp": "^0.5.1", "nan": "^2.13.2", - "node-gyp": "^7.1.0", + "node-gyp": "^3.8.0", "npmlog": "^4.0.0", "request": "^2.88.0", "sass-graph": "2.2.5", @@ -10676,33 +10723,23 @@ } }, "cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz", + "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=", "requires": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" + "lru-cache": "^4.0.1", + "which": "^1.2.9" } }, - "path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==" - }, - "shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "lru-cache": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", + "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", "requires": { - "shebang-regex": "^3.0.0" + "pseudomap": "^1.0.2", + "yallist": "^2.1.2" } }, - "shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==" - }, "strip-ansi": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", @@ -10716,20 +10753,17 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" }, - "which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "requires": { - "isexe": "^2.0.0" - } + "yallist": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", + "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=" } } }, "nopt": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz", - "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==", + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz", + "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=", "requires": { "abbrev": "1" } @@ -11035,6 +11069,25 @@ "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz", "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=" }, + "os-homedir": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=" + }, + "os-tmpdir": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=" + }, + "osenv": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", + "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", + "requires": { + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" + } + }, "p-each-series": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz", @@ -12526,6 +12579,11 @@ "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=" }, + "pseudomap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", + "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=" + }, "psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", diff --git a/package.json b/package.json index 6da6d1f..b540cca 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "@types/react": "^16.14.2", "@types/react-dom": "^16.9.10", "axios": "^0.21.1", - "node-sass": "^5.0.0", + "node-sass": "^4.14.1", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.1", diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.tsx b/src/App.tsx index 63f04c6..cad2d41 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,32 +1,14 @@ -import React from 'react'; -import './App.css'; -import ContextTest from './components/ContextText'; +import React from 'react'; -//使用context传递以下数据 -interface IThemePropos { - [key: string]: { color: string; background: string; } -} - -const themes: IThemePropos = { - 'light': { - color: '#000', - background: '#eee' - }, - 'dark': { - color: '#fff', - background: '#222' - } -} - -//创建一个context，并导出 -export const ThemesContext = React.createContext(themes.light); const App: React.FC = () => { return ( -
- - - +
+

Hello

+

Hello

+

Hello

+

Hello

+ aihomee
); } diff --git a/src/components/ContextText.tsx b/src/components/ContextText.tsx deleted file mode 100755 index f9d7823..0000000 --- a/src/components/ContextText.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { useContext } from 'react'; -import { ThemesContext } from '../App'; - - -const ContextTest: React.FC = () => { - - const theme = useContext(ThemesContext); - console.log(theme); - return ( - <> -

context text

- - ) -} - -export default ContextTest; \ No newline at end of file diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.tsx b/src/index.tsx index ef2edf8..f084805 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; +import './styles/index.scss'; import App from './App'; import reportWebVitals from './reportWebVitals'; diff --git a/src/styles/_reboot.scss b/src/styles/_reboot.scss index b1a2919..b0e54d7 100755 --- a/src/styles/_reboot.scss +++ b/src/styles/_reboot.scss @@ -1,4 +1,3 @@ - // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix // Reboot diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 1010999..78fd629 100755 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,5 +1,4 @@ -//中性色板 -$white: #fff !default; +$white: #fff !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; @@ -9,40 +8,49 @@ $gray-600: #6c757d !default; $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; -$black: #000 !default; - -//基础色板 -$blue: #0d6efd !default; -$indigo: #6610f2 !default; -$purple: #6f42c1 !default; -$pink: #d63384 !default; -$red: #dc3545 !default; -$orange: #fd7e14 !default; -$yellow: #fadb14 !default; -$green: #52c41a !default; -$teal: #20c997 !default; -$cyan: #17a2b8 !default; - -//系统色板 -$primary: $blue !default; -$secondary: $gray-600 !default; -$success: $green !default; -$info: $cyan !default; -$warning: $yellow !default; -$danger: $red !default; -$light: $gray-100 !default; -$dark: $gray-800 !default; - -//字体 -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", - sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;//主要字体 -$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;//等宽字体 +$black: #000 !default; + +$blue: #0d6efd !default; +$indigo: #6610f2 !default; +$purple: #6f42c1 !default; +$pink: #d63384 !default; +$red: #dc3545 !default; +$orange: #fd7e14 !default; +$yellow: #fadb14 !default; +$green: #52c41a !default; +$teal: #20c997 !default; +$cyan: #17a2b8 !default; + +$primary: $blue !default; +$secondary: $gray-600 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-100 !default; +$dark: $gray-800 !default; + +$theme-colors: +( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark +); + +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; // 字体大小 $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` $font-size-lg: $font-size-base * 1.25 !default; $font-size-sm: $font-size-base * .875 !default; +$font-size-root: null !default; // 字重 $font-weight-lighter: lighter !default; @@ -76,3 +84,205 @@ $body-bg: $white !default; $body-color: $gray-900 !default; $body-text-align: null !default; +// Spacing +$spacer: 1rem !default; + +$headings-margin-bottom: $spacer / 2 !default; +$headings-font-family: null !default; +$headings-font-style: null !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.2 !default; +$headings-color: null !default; + +// Paragraphs + +$paragraph-margin-bottom: 1rem !default; + +// 字体其他部分 heading list hr 等等 +$headings-margin-bottom: $spacer / 2 !default; +$headings-font-family: null !default; +$headings-font-style: null !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.2 !default; +$headings-color: null !default; + +$display1-size: 6rem !default; +$display2-size: 5.5rem !default; +$display3-size: 4.5rem !default; +$display4-size: 3.5rem !default; + +$display1-weight: 300 !default; +$display2-weight: 300 !default; +$display3-weight: 300 !default; +$display4-weight: 300 !default; +$display-line-height: $headings-line-height !default; + +$lead-font-size: $font-size-base * 1.25 !default; +$lead-font-weight: 300 !default; + +$small-font-size: .875em !default; + +$sub-sup-font-size: .75em !default; + +$text-muted: $gray-600 !default; + +$initialism-font-size: $small-font-size !default; + +$blockquote-small-color: $gray-600 !default; +$blockquote-small-font-size: $small-font-size !default; +$blockquote-font-size: $font-size-base * 1.25 !default; + +$hr-color: inherit !default; +$hr-height: 1px !default; +$hr-opacity: .25 !default; + +$legend-margin-bottom: .5rem !default; +$legend-font-size: 1.5rem !default; +$legend-font-weight: null !default; + +$mark-padding: .2em !default; + +$dt-font-weight: $font-weight-bold !default; + +$nested-kbd-font-weight: $font-weight-bold !default; + +$list-inline-padding: .5rem !default; + +$mark-bg: #fcf8e3 !default; + +$hr-margin-y: $spacer !default; + +// Code + +$code-font-size: $small-font-size !default; +$code-color: $pink !default; +$pre-color: null !default; + +// options 可配置选项 +$enable-pointer-cursor-for-buttons: true !default; + +// 边框 和 border radius + +$border-width: 1px !default; +$border-color: $gray-300 !default; + +$border-radius: .25rem !default; +$border-radius-lg: .3rem !default; +$border-radius-sm: .2rem !default; + +// 不同类型的 box shadow +$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; +$box-shadow: 0 .5rem 1rem rgba($black, .15) !default; +$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; +$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default; + +// 按钮 +// 按钮基本属性 +$btn-font-weight: 400; +$btn-padding-y: .375rem !default; +$btn-padding-x: .75rem !default; +$btn-font-family: $font-family-base !default; +$btn-font-size: $font-size-base !default; +$btn-line-height: $line-height-base !default; + +//不同大小按钮的 padding 和 font size +$btn-padding-y-sm: .25rem !default; +$btn-padding-x-sm: .5rem !default; +$btn-font-size-sm: $font-size-sm !default; + +$btn-padding-y-lg: .5rem !default; +$btn-padding-x-lg: 1rem !default; +$btn-font-size-lg: $font-size-lg !default; + +// 按钮边框 +$btn-border-width: $border-width !default; + +// 按钮其他 +$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; +$btn-disabled-opacity: .65 !default; + +// 链接按钮 +$btn-link-color: $link-color !default; +$btn-link-hover-color: $link-hover-color !default; +$btn-link-disabled-color: $gray-600 !default; + + +// 按钮 radius +$btn-border-radius: $border-radius !default; +$btn-border-radius-lg: $border-radius-lg !default; +$btn-border-radius-sm: $border-radius-sm !default; + +$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; + +// menu +$menu-border-width: $border-width !default; +$menu-border-color: $border-color !default; +$menu-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; +$menu-transition: color .15s ease-in-out, border-color .15s ease-in-out !default; + +// menu-item +$menu-item-padding-y: .5rem !default; +$menu-item-padding-x: 1rem !default; +$menu-item-active-color: $primary !default; +$menu-item-active-border-width: 2px !default; +$menu-item-disabled-color: $gray-600 !default; + +//sub-menu +//submenu +$submenu-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04); + +//input +$input-padding-y: $btn-padding-y !default; +$input-padding-x: $btn-padding-x !default; +$input-font-family: $btn-font-family !default; +$input-font-size: $btn-font-size !default; +$input-font-weight: $font-weight-base !default; +$input-line-height: $btn-line-height !default; + +$input-padding-y-sm: $btn-padding-y-sm !default; +$input-padding-x-sm: $btn-padding-x-sm !default; +$input-font-size-sm: $btn-font-size-sm !default; + +$input-padding-y-lg: $btn-padding-y-lg !default; +$input-padding-x-lg: $btn-padding-x-lg !default; +$input-font-size-lg: $btn-font-size-lg !default; + +$input-bg: $white !default; +$input-disabled-bg: $gray-200 !default; +$input-disabled-border-color: null !default; + +$input-color: $gray-700 !default; +$input-border-color: $gray-400 !default; +$input-border-width: $border-width !default; +$input-box-shadow: $box-shadow-inset !default; + +$input-border-radius: $border-radius !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; + +$input-focus-bg: $input-bg !default; +$input-focus-border-color: lighten($primary, 25%) !default; +$input-focus-width: .2rem !default; +$input-focus-color: $input-color !default; +$input-focus-shadow-color: rgba($primary, .25) !default; +$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-shadow-color !default; + +$input-placeholder-color: $gray-600 !default; +$input-plaintext-color: $body-color !default; + +$input-height-border: $input-border-width * 2 !default; + + +$input-transition: border-color .3s ease-in-out, box-shadow .3s ease-in-out !default; + +$input-group-addon-color: $input-color !default; +$input-group-addon-bg: $gray-200 !default; +$input-group-addon-border-color: $input-border-color !default; + +// Progress bars + +$progress-font-size: $font-size-base * .75 !default; +$progress-bg: $gray-200 !default; +$progress-border-radius: $border-radius !default; +$progress-bar-color: $white !default; +$progress-bar-transition: width .6s ease !default; \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100755 index 0000000..bb2296d --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,5 @@ +//config +@import "variables"; + +//layout +@import "reboot"; \ No newline at end of file