muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

fixed typos

Browse source
This commit is contained in:
muerwre 2019-08-02 18:43:24 +07:00
parent 6066c91060
commit 840af25df4
17 changed files with 438 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

266
package-lock.json generated
View file

@ -2525,6 +2525,42 @@
} }
} }
}, },
"@fimbul/bifrost": {
"version": "0.17.0",
"resolved": "https://registry.npmjs.org/@fimbul/bifrost/-/bifrost-0.17.0.tgz",
"integrity": "sha512-gVTkJAOef5HtN6LPmrtt5fAUmBywwlgmObsU3FBhPoNeXPLaIl2zywXkJEtvvVLQnaFmtff3x+wIj5lHRCDE3Q==",
"requires": {
"@fimbul/ymir": "^0.17.0",
"get-caller-file": "^2.0.0",
"tslib": "^1.8.1",
"tsutils": "^3.5.0"
},
"dependencies": {
"get-caller-file": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
},
"tsutils": {
"version": "3.14.1",
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.14.1.tgz",
"integrity": "sha512-kiuZzD1uUA5DxGj/uxbde+ymp6VVdAxdzOIlAFbYKrPyla8/uiJ9JLBm1QsPhOm4Muj0/+cWEDP99yoCUcSl6Q==",
"requires": {
"tslib": "^1.8.1"
}
}
}
},
"@fimbul/ymir": {
"version": "0.17.0",
"resolved": "https://registry.npmjs.org/@fimbul/ymir/-/ymir-0.17.0.tgz",
"integrity": "sha512-xMXM9KTXRLHLVS6dnX1JhHNEkmWHcAVCQ/4+DA1KKwC/AFnGHzu/7QfQttEPgw3xplT+ILf9e3i64jrFwB3JtA==",
"requires": {
"inversify": "^5.0.0",
"reflect-metadata": "^0.1.12",
"tslib": "^1.8.1"
}
},
"@hot-loader/react-dom": { "@hot-loader/react-dom": {
"version": "16.8.1", "version": "16.8.1",
"resolved": "https://registry.npmjs.org/@hot-loader/react-dom/-/react-dom-16.8.1.tgz", "resolved": "https://registry.npmjs.org/@hot-loader/react-dom/-/react-dom-16.8.1.tgz",
@ -2954,7 +2990,6 @@
"version": "1.0.10", "version": "1.0.10",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
"dev": true,
"requires": { "requires": {
"sprintf-js": "~1.0.2" "sprintf-js": "~1.0.2"
} }
@ -5080,7 +5115,6 @@
"version": "1.9.1", "version": "1.9.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
"integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==", "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==",
"dev": true,
"requires": { "requires": {
"color-name": "^1.1.1" "color-name": "^1.1.1"
} }
@ -5088,8 +5122,7 @@
"color-name": { "color-name": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
"dev": true
}, },
"color-string": { "color-string": {
"version": "0.3.0", "version": "0.3.0",
@ -5128,8 +5161,7 @@
"commander": { "commander": {
"version": "2.15.1", "version": "2.15.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
"integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==", "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag=="
"dev": true
}, },
"commondir": { "commondir": {
"version": "1.0.1", "version": "1.0.1",
@ -6567,8 +6599,7 @@
"diff": { "diff": {
"version": "3.5.0", "version": "3.5.0",
"resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
"integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==", "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA=="
"dev": true
}, },
"diffie-hellman": { "diffie-hellman": {
"version": "5.0.3", "version": "5.0.3",
@ -7304,8 +7335,7 @@
"esutils": { "esutils": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
"dev": true
}, },
"etag": { "etag": {
"version": "1.8.1", "version": "1.8.1",
@ -8728,8 +8758,7 @@
"has-flag": { "has-flag": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
"dev": true
}, },
"has-symbols": { "has-symbols": {
"version": "1.0.0", "version": "1.0.0",
@ -9432,6 +9461,11 @@
"loose-envify": "^1.0.0" "loose-envify": "^1.0.0"
} }
}, },
"inversify": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/inversify/-/inversify-5.0.1.tgz",
"integrity": "sha512-Ieh06s48WnEYGcqHepdsJUIJUXpwH5o5vodAX+DK2JA/gjy4EbEcQZxw+uFfzysmKjiLXGYwNG3qDZsKVMcINQ=="
},
"invert-kv": { "invert-kv": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz", "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
@ -11967,8 +12001,7 @@
"path-parse": { "path-parse": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz",
"integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=", "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME="
"dev": true
}, },
"path-to-regexp": { "path-to-regexp": {
"version": "1.7.0", "version": "1.7.0",
@ -13907,6 +13940,11 @@
} }
} }
}, },
"reflect-metadata": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
"integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
},
"regenerate": { "regenerate": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@ -14235,7 +14273,6 @@
"version": "1.7.1", "version": "1.7.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz",
"integrity": "sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==", "integrity": "sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==",
"dev": true,
"requires": { "requires": {
"path-parse": "^1.0.5" "path-parse": "^1.0.5"
} }
@ -15274,8 +15311,7 @@
"sprintf-js": { "sprintf-js": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
"dev": true
}, },
"sshpk": { "sshpk": {
"version": "1.14.1", "version": "1.14.1",
@ -16120,8 +16156,200 @@
"tslib": { "tslib": {
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
"integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==", "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
"dev": true },
"tslint": {
"version": "5.18.0",
"resolved": "https://registry.npmjs.org/tslint/-/tslint-5.18.0.tgz",
"integrity": "sha512-Q3kXkuDEijQ37nXZZLKErssQVnwCV/+23gFEMROi8IlbaBG6tXqLPQJ5Wjcyt/yHPKBC+hD5SzuGaMora+ZS6w==",
"requires": {
"@babel/code-frame": "^7.0.0",
"builtin-modules": "^1.1.1",
"chalk": "^2.3.0",
"commander": "^2.12.1",
"diff": "^3.2.0",
"glob": "^7.1.1",
"js-yaml": "^3.13.1",
"minimatch": "^3.0.4",
"mkdirp": "^0.5.1",
"resolve": "^1.3.2",
"semver": "^5.3.0",
"tslib": "^1.8.0",
"tsutils": "^2.29.0"
},
"dependencies": {
"@babel/code-frame": {
"version": "7.5.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
"integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
"requires": {
"@babel/highlight": "^7.0.0"
}
},
"@babel/highlight": {
"version": "7.5.0",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.5.0.tgz",
"integrity": "sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==",
"requires": {
"chalk": "^2.0.0",
"esutils": "^2.0.2",
"js-tokens": "^4.0.0"
}
},
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"requires": {
"color-convert": "^1.9.0"
}
},
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
}
},
"esprima": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
},
"js-yaml": {
"version": "3.13.1",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
"integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
"requires": {
"argparse": "^1.0.7",
"esprima": "^4.0.0"
}
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"tslint-config-airbnb": {
"version": "5.11.1",
"resolved": "https://registry.npmjs.org/tslint-config-airbnb/-/tslint-config-airbnb-5.11.1.tgz",
"integrity": "sha512-hkaittm2607vVMe8eotANGN1CimD5tor7uoY3ypg2VTtEcDB/KGWYbJOz58t8LI4cWSyWtgqYQ5F0HwKxxhlkQ==",
"requires": {
"tslint-consistent-codestyle": "^1.14.1",
"tslint-eslint-rules": "^5.4.0",
"tslint-microsoft-contrib": "~5.2.1"
}
},
"tslint-consistent-codestyle": {
"version": "1.15.1",
"resolved": "https://registry.npmjs.org/tslint-consistent-codestyle/-/tslint-consistent-codestyle-1.15.1.tgz",
"integrity": "sha512-38Y3Dz4zcABe/PlPAQSGNEWPGVq0OzcIQR7SEU6dNujp/SgvhxhJOhIhI9gY4r0I3/TNtvVQwARWor9O9LPZWg==",
"requires": {
"@fimbul/bifrost": "^0.17.0",
"tslib": "^1.7.1",
"tsutils": "^2.29.0"
}
},
"tslint-eslint-rules": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/tslint-eslint-rules/-/tslint-eslint-rules-5.4.0.tgz",
"integrity": "sha512-WlSXE+J2vY/VPgIcqQuijMQiel+UtmXS+4nvK4ZzlDiqBfXse8FAvkNnTcYhnQyOTW5KFM+uRRGXxYhFpuBc6w==",
"requires": {
"doctrine": "0.7.2",
"tslib": "1.9.0",
"tsutils": "^3.0.0"
},
"dependencies": {
"doctrine": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
"integrity": "sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=",
"requires": {
"esutils": "^1.1.6",
"isarray": "0.0.1"
}
},
"esutils": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz",
"integrity": "sha1-wBzKqa5LiXxtDD4hCuUvPHqEQ3U="
},
"tslib": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
"integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ=="
},
"tsutils": {
"version": "3.14.1",
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.14.1.tgz",
"integrity": "sha512-kiuZzD1uUA5DxGj/uxbde+ymp6VVdAxdzOIlAFbYKrPyla8/uiJ9JLBm1QsPhOm4Muj0/+cWEDP99yoCUcSl6Q==",
"requires": {
"tslib": "^1.8.1"
}
}
}
},
"tslint-microsoft-contrib": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/tslint-microsoft-contrib/-/tslint-microsoft-contrib-5.2.1.tgz",
"integrity": "sha512-PDYjvpo0gN9IfMULwKk0KpVOPMhU6cNoT9VwCOLeDl/QS8v8W2yspRpFFuUS7/c5EIH/n8ApMi8TxJAz1tfFUA==",
"requires": {
"tsutils": "^2.27.2 <2.29.0"
},
"dependencies": {
"tsutils": {
"version": "2.28.0",
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.28.0.tgz",
"integrity": "sha512-bh5nAtW0tuhvOJnx1GLRn5ScraRLICGyJV5wJhtRWOLsxW70Kk5tZtpK3O/hW6LDnqKS9mlUMPZj9fEMJ0gxqA==",
"requires": {
"tslib": "^1.8.1"
}
}
}
},
"tslint-react": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/tslint-react/-/tslint-react-4.0.0.tgz",
"integrity": "sha512-9fNE0fm9zNDx1+b6hgy8rgDN2WsQLRiIrn3+fbqm0tazBVF6jiaCFAITxmU+WSFWYE03Xhp1joCircXOe1WVAQ==",
"requires": {
"tsutils": "^3.9.1"
},
"dependencies": {
"tsutils": {
"version": "3.14.1",
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.14.1.tgz",
"integrity": "sha512-kiuZzD1uUA5DxGj/uxbde+ymp6VVdAxdzOIlAFbYKrPyla8/uiJ9JLBm1QsPhOm4Muj0/+cWEDP99yoCUcSl6Q==",
"requires": {
"tslib": "^1.8.1"
}
}
}
},
"tslint-react-hooks": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tslint-react-hooks/-/tslint-react-hooks-2.2.1.tgz",
"integrity": "sha512-bqIg2uZe+quJMfSOGc4OOZ4awo6TP1ejGDGS6IKg2WIrS0XnWfhUJ99i3B8rUpnZhuD4vRSvyYIbXPUmEqQxxQ=="
},
"tsutils": {
"version": "2.29.0",
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
"integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
"requires": {
"tslib": "^1.8.1"
}
}, },
"tt-react-custom-scrollbars": { "tt-react-custom-scrollbars": {
"version": "4.2.1-tt2", "version": "4.2.1-tt2",

4
package.json
View file

@ -90,6 +90,10 @@
"sass-resources-loader": "^2.0.0", "sass-resources-loader": "^2.0.0",
"scrypt": "^6.0.3", "scrypt": "^6.0.3",
"throttle-debounce": "^2.1.0", "throttle-debounce": "^2.1.0",
"tslint": "^5.18.0",
"tslint-config-airbnb": "^5.11.1",
"tslint-react": "^4.0.0",
"tslint-react-hooks": "^2.2.1",
"tt-react-custom-scrollbars": "latest" "tt-react-custom-scrollbars": "latest"
} }
} }

31
src/components/flow/TestGrid/index.tsx
View file

@ -1,38 +1,45 @@
import * as React from 'react'; import * as React from 'react';
import { Cell } from "~/components/flow/Cell"; import { Cell } from '~/components/flow/Cell';
import { range } from 'ramda'; import { range } from 'ramda';
import * as styles from './styles.scss'; import * as styles from './styles.scss';
export const TestGrid = () => ( export const TestGrid = () => (
<div className={styles.grid_test}> <div>
<div style={{ <div
gridRow: '1 / 2', style={{
gridColumn: '1 / -1', // gridRow: "1 / 2",
background: 'green', // gridColumn: "1 / -1",
background: '#222222',
borderRadius: 6,
height: 300,
marginBottom: 4,
display: 'flex',
}} }}
> >
HERO HERO
</div> </div>
<div style={{ <div className={styles.grid_test}>
<div
style={{
gridRow: '2 / 4', gridRow: '2 / 4',
gridColumn: '-2 / -1', gridColumn: '-2 / -1',
background: 'blue', background: '#090909',
borderRadius: 4,
}} }}
> >
STAMP STAMP
</div> </div>
{ {range(1, 20).map(el => (
range(1,20).map(el => (
<Cell <Cell
width={Math.floor(Math.random() * 3)} width={Math.floor(Math.random() * 3)}
height={Math.floor(Math.random() * 3)} height={Math.floor(Math.random() * 3)}
title={`Cell ${el}`} title={`Cell ${el}`}
key={el} key={el}
/> />
)) ))}
} </div>
</div> </div>
); );

18
src/containers/dialogs/ExampleDialog/index.tsx
View file

@ -1,12 +1,12 @@
import React, { FC } from "react"; import React, { FC } from 'react';
import { ScrollDialog } from "../ScrollDialog"; import { ScrollDialog } from '../ScrollDialog';
import { IDialogProps } from "~/redux/modal/constants"; import { IDialogProps } from '~/redux/modal/constants';
import { useCloseOnEscape } from "~/utils/hooks"; import { useCloseOnEscape } from '~/utils/hooks';
import { Group } from "~/components/containers/Group"; import { Group } from '~/components/containers/Group';
import { InputText } from "~/components/input/InputText"; import { InputText } from '~/components/input/InputText';
import { Button } from "../../../components/input/Button/index"; import { Button } from '../../../components/input/Button/index';
import { Padder } from "~/components/containers/Padder"; import { Padder } from '~/components/containers/Padder';
import * as styles from "~/containers/examples/HorizontalExample/styles.scss"; import * as styles from '~/containers/examples/HorizontalExample/styles.scss';
type IProps = IDialogProps & {}; type IProps = IDialogProps & {};

27
src/containers/dialogs/LoginDialog/index.tsx
View file

@ -1,17 +1,17 @@
import React, { FC, useState } from "react"; import React, { FC, useState } from 'react';
import { ScrollDialog } from "../ScrollDialog"; import { ScrollDialog } from '../ScrollDialog';
import { IDialogProps } from "~/redux/modal/constants"; import { IDialogProps } from '~/redux/modal/constants';
import { useCloseOnEscape } from "~/utils/hooks"; import { useCloseOnEscape } from '~/utils/hooks';
import { Group } from "~/components/containers/Group"; import { Group } from '~/components/containers/Group';
import { InputText } from "~/components/input/InputText"; import { InputText } from '~/components/input/InputText';
import { Button } from "../../../components/input/Button/index"; import { Button } from '../../../components/input/Button/index';
import { Padder } from "~/components/containers/Padder"; import { Padder } from '~/components/containers/Padder';
import * as styles from "./styles.scss"; import * as styles from './styles.scss';
type IProps = IDialogProps & {}; type IProps = IDialogProps & {};
const LoginDialog: FC<IProps> = ({ onRequestClose }) => { const LoginDialog: FC<IProps> = ({ onRequestClose }) => {
const [username, setUserName] = useState(""); const [username, setUserName] = useState('');
const [password, setPassword] = useState(""); const [password, setPassword] = useState('');
const title = <div>title</div>; const title = <div>title</div>;
@ -30,6 +30,11 @@ const LoginDialog: FC<IProps> = ({ onRequestClose }) => {
<Padder> <Padder>
<div className={styles.wrap}> <div className={styles.wrap}>
<Group> <Group>
<h2>РЕШИТЕЛЬНО ВОЙТИ</h2>
<div />
<div />
<InputText title="Логин" handler={setUserName} value={username} /> <InputText title="Логин" handler={setUserName} value={username} />
<InputText title="Пароль" handler={setPassword} value={password} /> <InputText title="Пароль" handler={setPassword} value={password} />
</Group> </Group>

4
src/containers/dialogs/LoginDialog/styles.scss
View file

@ -1,6 +1,8 @@
.wrap { .wrap {
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: center;
min-height: 400px; min-height: 400px;
padding: 20px;
margin: auto;
} }

24
src/containers/dialogs/Modal/index.tsx
View file

@ -1,16 +1,16 @@
import React, { Attributes, FC, useCallback } from "react"; import React, { Attributes, FC, useCallback } from 'react';
import * as styles from "./styles.scss"; import * as styles from './styles.scss';
import { IState } from "~/redux/store"; import { IState } from '~/redux/store';
import * as ACTIONS from "~/redux/modal/actions"; import * as ACTIONS from '~/redux/modal/actions';
import { connect } from "react-redux"; import { connect } from 'react-redux';
import { DIALOG_CONTENT, IDialogProps } from "~/redux/modal/constants"; import { DIALOG_CONTENT, IDialogProps } from '~/redux/modal/constants';
import ReactDOM from "react-dom"; import ReactDOM from 'react-dom';
const mapStateToProps = ({ modal }: IState) => ({ ...modal }); const mapStateToProps = ({ modal }: IState) => ({ ...modal });
const mapDispatchToProps = { const mapDispatchToProps = {
modalSetShown: ACTIONS.modalSetShown, modalSetShown: ACTIONS.modalSetShown,
modalSetDialog: ACTIONS.modalSetDialog, modalSetDialog: ACTIONS.modalSetDialog,
modalShowDialog: ACTIONS.modalShowDialog modalShowDialog: ACTIONS.modalShowDialog,
}; };
type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {}; type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {};
@ -20,7 +20,7 @@ const ModalUnconnected: FC<IProps> = ({
modalSetDialog, modalSetDialog,
modalShowDialog, modalShowDialog,
is_shown, is_shown,
dialog dialog,
}) => { }) => {
const onRequestClose = useCallback(() => { const onRequestClose = useCallback(() => {
modalSetShown(false); modalSetShown(false);
@ -37,19 +37,19 @@ const ModalUnconnected: FC<IProps> = ({
<div className={styles.content_padder}> <div className={styles.content_padder}>
{React.createElement(DIALOG_CONTENT[dialog], { {React.createElement(DIALOG_CONTENT[dialog], {
onRequestClose, onRequestClose,
onDialogChange: modalShowDialog onDialogChange: modalShowDialog,
} as IDialogProps)} } as IDialogProps)}
</div> </div>
</div> </div>
</div> </div>
</div>, </div>,
document.body document.body,
); );
}; };
const Modal = connect( const Modal = connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps,
)(ModalUnconnected); )(ModalUnconnected);
export { ModalUnconnected, Modal }; export { ModalUnconnected, Modal };

11
src/containers/dialogs/ScrollDialog/index.tsx
View file

@ -21,7 +21,6 @@ const ScrollDialog: FC<IProps> = ({
children, children,
title, title,
buttons, buttons,
size = "medium",
width = 800, width = 800,
top_sticky, top_sticky,
top_sticky_offset, top_sticky_offset,
@ -61,7 +60,7 @@ const ScrollDialog: FC<IProps> = ({
<div <div
className={classNames(styles.content, { className={classNames(styles.content, {
has_buttons: !!buttons, has_buttons: !!buttons,
has_title: !!title has_title: true
})} })}
style={{ flexBasis: width }} style={{ flexBasis: width }}
> >
@ -84,6 +83,14 @@ const ScrollDialog: FC<IProps> = ({
</div> </div>
)} )}
{!title && (
<div className={styles.top}>
<div className={styles.wrap} style={{ flexBasis: width }}>
<div className={styles.top_cap} />
</div>
</div>
)}
{!!buttons && ( {!!buttons && (
<div className={styles.bottom}> <div className={styles.bottom}>
<div className={styles.wrap} style={{ flexBasis: width }}> <div className={styles.wrap} style={{ flexBasis: width }}>

26
src/containers/dialogs/ScrollDialog/styles.scss
View file

@ -50,6 +50,13 @@
z-index: 2; z-index: 2;
} }
.top {
.wrap {
display: flex;
align-items: flex-end;
}
}
.bottom { .bottom {
bottom: 15px; bottom: 15px;
top: auto; top: auto;
@ -94,5 +101,22 @@
.children { .children {
background: $content_bg; background: $content_bg;
radius: $radius; border-radius: $radius;
}
.top_cap {
height: $radius;
background: $content_bg;
border-radius: $radius $radius 0 0;
flex: 1;
position: relative;
&::after {
position: absolute;
content: " ";
width: 100%;
height: $gap;
background: linear-gradient($content_bg, transparentize($content_bg, 1));
bottom: -$gap;
}
} }

18
src/containers/examples/HorizontalExample/index.tsx
View file

@ -1,12 +1,12 @@
import React, { FC } from "react"; import React, { FC } from 'react';
import { Card } from "~/components/containers/Card"; import { Card } from '~/components/containers/Card';
import * as styles from "./styles.scss"; import * as styles from './styles.scss';
import {Padder} from "~/components/containers/Padder"; import { Padder } from '~/components/containers/Padder';
import {Group} from "~/components/containers/Group"; import { Group } from '~/components/containers/Group';
import {InputText} from "~/components/input/InputText"; import { InputText } from '~/components/input/InputText';
import {Button} from "~/components/input/Button"; import { Button } from '~/components/input/Button';
import {Filler} from "~/components/containers/Filler"; import { Filler } from '~/components/containers/Filler';
import {Icon} from "~/components/input/Icon"; import { Icon } from '~/components/input/Icon';
interface IProps {} interface IProps {}

20
src/redux/modal/constants.ts
View file

@ -1,22 +1,22 @@
import { ValueOf } from "~/redux/types"; import { ValueOf } from '~/redux/types';
import { HorizontalExample } from "~/containers/examples/HorizontalExample"; import { HorizontalExample } from '~/containers/examples/HorizontalExample';
import { ExampleDialog } from "~/containers/dialogs/ExampleDialog"; import { ExampleDialog } from '~/containers/dialogs/ExampleDialog';
import { LoginDialog } from "~/containers/dialogs/LoginDialog"; import { LoginDialog } from '~/containers/dialogs/LoginDialog';
export const MODAL_ACTIONS = { export const MODAL_ACTIONS = {
SET_SHOWN: "MODAL.SET_SHOWN", SET_SHOWN: 'MODAL.SET_SHOWN',
SET_DIALOG: "SET_DIALOG", SET_DIALOG: 'SET_DIALOG',
SHOW_DIALOG: "SHOW_DIALOG" SHOW_DIALOG: 'SHOW_DIALOG',
}; };
export const DIALOGS = { export const DIALOGS = {
TEST: "TEST", TEST: 'TEST',
LOGIN: "LOGIN" LOGIN: 'LOGIN',
}; };
export const DIALOG_CONTENT = { export const DIALOG_CONTENT = {
[DIALOGS.TEST]: ExampleDialog, [DIALOGS.TEST]: ExampleDialog,
[DIALOGS.LOGIN]: LoginDialog [DIALOGS.LOGIN]: LoginDialog,
}; };
export interface IDialogProps { export interface IDialogProps {

10
src/redux/modal/reducer.ts
View file

@ -1,7 +1,7 @@
import { MODAL_HANDLERS } from "~/redux/modal/handlers"; import { MODAL_HANDLERS } from '~/redux/modal/handlers';
import { createReducer } from "~/utils/reducer"; import { createReducer } from '~/utils/reducer';
import { DIALOGS } from "~/redux/modal/constants"; import { DIALOGS } from '~/redux/modal/constants';
import { ValueOf } from "~/redux/types"; import { ValueOf } from '~/redux/types';
export interface IModalState { export interface IModalState {
is_shown: boolean; is_shown: boolean;
@ -10,7 +10,7 @@ export interface IModalState {
const INITIAL_STATE: IModalState = { const INITIAL_STATE: IModalState = {
is_shown: true, is_shown: true,
dialog: DIALOGS.LOGIN dialog: DIALOGS.LOGIN,
}; };
export default createReducer(INITIAL_STATE, MODAL_HANDLERS); export default createReducer(INITIAL_STATE, MODAL_HANDLERS);

10
src/redux/types.ts
View file

@ -1,10 +1,10 @@
import { DetailedHTMLProps, InputHTMLAttributes } from "react"; import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
import { DIALOGS } from "~/redux/modal/constants"; import { DIALOGS } from '~/redux/modal/constants';
export type ITag = { export interface ITag {
title: string; title: string;
feature?: "red" | "blue" | "green" | "olive" | "black"; feature?: 'red' | 'blue' | 'green' | 'olive' | 'black';
}; }
export type IInputTextProps = DetailedHTMLProps< export type IInputTextProps = DetailedHTMLProps<
InputHTMLAttributes<HTMLInputElement>, InputHTMLAttributes<HTMLInputElement>,

21
src/styles/global.scss
View file

@ -9,14 +9,15 @@ body {
min-height: 100vh; min-height: 100vh;
background: url("http://vault48.org/pixmaps/texture.jpg"); background: url("http://vault48.org/pixmaps/texture.jpg");
color: $main_text_color; color: $main_text_color;
font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-size: 16px; font-size: 16px;
fill: white; fill: white;
stroke: white; stroke: white;
&::before { &::before {
content: ''; content: "";
position: absolute; position: absolute;
height: 400px; height: 400px;
width: 100%; width: 100%;
@ -43,9 +44,15 @@ body {
:global(.spc) { :global(.spc) {
height: $spc; height: $spc;
&:global(.double) { height: $spc * 2; } &:global(.double) {
&:global(.quadro) { height: $spc * 4; } height: $spc * 2;
&:global(.sixty) { height: $spc * 6; } }
&:global(.quadro) {
height: $spc * 4;
}
&:global(.sixty) {
height: $spc * 6;
}
} }
:global(.padded) { :global(.padded) {
@ -62,7 +69,6 @@ body {
// background: $content_bg_color; // background: $content_bg_color;
} }
:global(.head_container) { :global(.head_container) {
//background: $main_bg_color; //background: $main_bg_color;
} }
@ -71,3 +77,6 @@ body {
height: 40px; height: 40px;
} }
:global(h2) {
font: $font_24_bold;
}

17
src/styles/variables.scss
View file

@ -1,4 +1,4 @@
@import 'colors'; @import "colors";
$cell: 256px; $cell: 256px;
$content_width: 1100px; $content_width: 1100px;
@ -25,7 +25,9 @@ $medium: 500;
$light: 300; $light: 300;
$extra_light: 200; $extra_light: 200;
$font: Montserrat, -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"; $font: Montserrat, -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";
$font_48_semibold: $semibold 48px $font; $font_48_semibold: $semibold 48px $font;
$font_24_bold: $bold 24px $font; $font_24_bold: $bold 24px $font;
@ -63,18 +65,15 @@ $input_shadow_error: inset $red 0 0 0 1px;
$input_shadow_filled: $input_shadow; $input_shadow_filled: $input_shadow;
@mixin outer_shadow() { @mixin outer_shadow() {
box-shadow: inset transparentize(white, 0.95) 0 1px, box-shadow: inset transparentize(white, 0.95) 0 1px, transparentize(black, 0.8) 0 3px;
transparentize(black, 0.8) 0 3px;
} }
@mixin inner_shadow() { @mixin inner_shadow() {
box-shadow: inset transparentize(white, 0.95) 0 -1px, box-shadow: inset transparentize(white, 0.95) 0 -1px, inset transparentize(black, 0.5) 0 1px;
inset transparentize(black, 0.5) 0 1px;
} }
@mixin input_shadow() { @mixin input_shadow() {
box-shadow: inset transparentize(white, 0.92) 0 -1px, box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px;
inset transparentize(black, 0.8) 0 1px;
} }
@mixin modal_mixin() { @mixin modal_mixin() {
@ -90,7 +89,7 @@ $input_shadow_filled: $input_shadow;
position: $position; position: $position;
&::after { &::after {
content: ' '; content: " ";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;

12
src/utils/hooks.ts
View file

@ -1,24 +1,24 @@
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from 'react';
export const useCloseOnEscape = (onRequestClose: () => void, ignore_inputs = false) => { export const useCloseOnEscape = (onRequestClose: () => void, ignore_inputs = false) => {
const onEscape = useCallback( const onEscape = useCallback(
event => { event => {
if (event.key !== "Escape") return; if (event.key !== 'Escape') return;
if ( if (
ignore_inputs && ignore_inputs &&
(event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA") (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA')
) )
return; return;
onRequestClose(); onRequestClose();
}, },
[onRequestClose] [onRequestClose],
); );
useEffect(() => { useEffect(() => {
window.addEventListener("keyup", onEscape); window.addEventListener('keyup', onEscape);
return () => { return () => {
window.removeEventListener("keyup", onEscape); window.removeEventListener('keyup', onEscape);
}; };
}, [onEscape]); }, [onEscape]);
}; };

28
tslint.json Normal file
View file

@ -0,0 +1,28 @@
{
"defaultSeverity": "error",
"extends": ["tslint-config-airbnb", "tslint-react", "tslint:recommended", "tslint-react-hooks"],
"jsRules": {},
"rules": {
"quotemark": [true, "single", "jsx-double"],
"react-hooks-nesting": "error",
"ordered-imports": false,
"import-name": false,
"object-literal-sort-keys": false,
"no-console": [true, "warning"],
"arrow-parens": [true, "ban-single-arg-parens"],
"ter-arrow-parens": [true, "as-needed"],
"curly": false,
"variable-name": [true, "ban-keywords", "allow-snake-case", "allow-pascal-case"],
"no-var-requires": false,
"no-nested-ternary": true,
"jsx-key": true,
"jsx-self-close": true,
"jsx-wrap-multiline": true,
"jsx-alignment": true,
"jsx-curly-spacing": [true, "never"],
"jsx-equals-spacing": [true, "never"],
"jsx-no-multiline-js": false,
"jsx-boolean-value": false
},
"rulesDirectory": []
}