From 840af25df4e8ba068ce2a1518d06932d28ecbba8 Mon Sep 17 00:00:00 2001 From: muerwre Date: Fri, 2 Aug 2019 18:43:24 +0700 Subject: [PATCH] fixed typos --- package-lock.json | 266 ++++++++++++++++-- package.json | 4 + src/components/flow/TestGrid/index.tsx | 45 +-- .../dialogs/ExampleDialog/index.tsx | 18 +- src/containers/dialogs/LoginDialog/index.tsx | 27 +- .../dialogs/LoginDialog/styles.scss | 4 +- src/containers/dialogs/Modal/index.tsx | 24 +- src/containers/dialogs/ScrollDialog/index.tsx | 11 +- .../dialogs/ScrollDialog/styles.scss | 26 +- .../examples/HorizontalExample/index.tsx | 18 +- src/redux/modal/constants.ts | 20 +- src/redux/modal/reducer.ts | 10 +- src/redux/types.ts | 10 +- src/styles/global.scss | 21 +- src/styles/variables.scss | 19 +- src/utils/hooks.ts | 12 +- tslint.json | 28 ++ 17 files changed, 438 insertions(+), 125 deletions(-) create mode 100644 tslint.json diff --git a/package-lock.json b/package-lock.json index 45787a04..224de817 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { "version": "16.8.1", "resolved": "https://registry.npmjs.org/@hot-loader/react-dom/-/react-dom-16.8.1.tgz", @@ -2954,7 +2990,6 @@ "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", - "dev": true, "requires": { "sprintf-js": "~1.0.2" } @@ -5080,7 +5115,6 @@ "version": "1.9.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz", "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==", - "dev": true, "requires": { "color-name": "^1.1.1" } @@ -5088,8 +5122,7 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" }, "color-string": { "version": "0.3.0", @@ -5128,8 +5161,7 @@ "commander": { "version": "2.15.1", "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz", - "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==", - "dev": true + "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==" }, "commondir": { "version": "1.0.1", @@ -6567,8 +6599,7 @@ "diff": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", - "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==", - "dev": true + "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==" }, "diffie-hellman": { "version": "5.0.3", @@ -7304,8 +7335,7 @@ "esutils": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", - "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", - "dev": true + "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=" }, "etag": { "version": "1.8.1", @@ -8728,8 +8758,7 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" }, "has-symbols": { "version": "1.0.0", @@ -9432,6 +9461,11 @@ "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": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz", @@ -11967,8 +12001,7 @@ "path-parse": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz", - "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=", - "dev": true + "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=" }, "path-to-regexp": { "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": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -14235,7 +14273,6 @@ "version": "1.7.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz", "integrity": "sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==", - "dev": true, "requires": { "path-parse": "^1.0.5" } @@ -15274,8 +15311,7 @@ "sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", - "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", - "dev": true + "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" }, "sshpk": { "version": "1.14.1", @@ -16120,8 +16156,200 @@ "tslib": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz", - "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==", - "dev": true + "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==" + }, + "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": { "version": "4.2.1-tt2", diff --git a/package.json b/package.json index cfdc226f..a252d778 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,10 @@ "sass-resources-loader": "^2.0.0", "scrypt": "^6.0.3", "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" } } diff --git a/src/components/flow/TestGrid/index.tsx b/src/components/flow/TestGrid/index.tsx index d3a54fe4..7de2d366 100644 --- a/src/components/flow/TestGrid/index.tsx +++ b/src/components/flow/TestGrid/index.tsx @@ -1,38 +1,45 @@ import * as React from 'react'; -import { Cell } from "~/components/flow/Cell"; +import { Cell } from '~/components/flow/Cell'; import { range } from 'ramda'; import * as styles from './styles.scss'; export const TestGrid = () => ( -
-
+
HERO
-
- STAMP -
+
+
+ STAMP +
- { - range(1,20).map(el => ( + {range(1, 20).map(el => ( - )) - } + ))} +
); diff --git a/src/containers/dialogs/ExampleDialog/index.tsx b/src/containers/dialogs/ExampleDialog/index.tsx index 17159d07..1b8d120a 100644 --- a/src/containers/dialogs/ExampleDialog/index.tsx +++ b/src/containers/dialogs/ExampleDialog/index.tsx @@ -1,12 +1,12 @@ -import React, { FC } from "react"; -import { ScrollDialog } from "../ScrollDialog"; -import { IDialogProps } from "~/redux/modal/constants"; -import { useCloseOnEscape } from "~/utils/hooks"; -import { Group } from "~/components/containers/Group"; -import { InputText } from "~/components/input/InputText"; -import { Button } from "../../../components/input/Button/index"; -import { Padder } from "~/components/containers/Padder"; -import * as styles from "~/containers/examples/HorizontalExample/styles.scss"; +import React, { FC } from 'react'; +import { ScrollDialog } from '../ScrollDialog'; +import { IDialogProps } from '~/redux/modal/constants'; +import { useCloseOnEscape } from '~/utils/hooks'; +import { Group } from '~/components/containers/Group'; +import { InputText } from '~/components/input/InputText'; +import { Button } from '../../../components/input/Button/index'; +import { Padder } from '~/components/containers/Padder'; +import * as styles from '~/containers/examples/HorizontalExample/styles.scss'; type IProps = IDialogProps & {}; diff --git a/src/containers/dialogs/LoginDialog/index.tsx b/src/containers/dialogs/LoginDialog/index.tsx index e913bf69..04520f9a 100644 --- a/src/containers/dialogs/LoginDialog/index.tsx +++ b/src/containers/dialogs/LoginDialog/index.tsx @@ -1,17 +1,17 @@ -import React, { FC, useState } from "react"; -import { ScrollDialog } from "../ScrollDialog"; -import { IDialogProps } from "~/redux/modal/constants"; -import { useCloseOnEscape } from "~/utils/hooks"; -import { Group } from "~/components/containers/Group"; -import { InputText } from "~/components/input/InputText"; -import { Button } from "../../../components/input/Button/index"; -import { Padder } from "~/components/containers/Padder"; -import * as styles from "./styles.scss"; +import React, { FC, useState } from 'react'; +import { ScrollDialog } from '../ScrollDialog'; +import { IDialogProps } from '~/redux/modal/constants'; +import { useCloseOnEscape } from '~/utils/hooks'; +import { Group } from '~/components/containers/Group'; +import { InputText } from '~/components/input/InputText'; +import { Button } from '../../../components/input/Button/index'; +import { Padder } from '~/components/containers/Padder'; +import * as styles from './styles.scss'; type IProps = IDialogProps & {}; const LoginDialog: FC = ({ onRequestClose }) => { - const [username, setUserName] = useState(""); - const [password, setPassword] = useState(""); + const [username, setUserName] = useState(''); + const [password, setPassword] = useState(''); const title =
title
; @@ -30,6 +30,11 @@ const LoginDialog: FC = ({ onRequestClose }) => {
+

РЕШИТЕЛЬНО ВОЙТИ

+ +
+
+ diff --git a/src/containers/dialogs/LoginDialog/styles.scss b/src/containers/dialogs/LoginDialog/styles.scss index 73eedaf9..f416c025 100644 --- a/src/containers/dialogs/LoginDialog/styles.scss +++ b/src/containers/dialogs/LoginDialog/styles.scss @@ -1,6 +1,8 @@ .wrap { display: flex; - align-items: center; + align-items: flex-start; justify-content: center; min-height: 400px; + padding: 20px; + margin: auto; } diff --git a/src/containers/dialogs/Modal/index.tsx b/src/containers/dialogs/Modal/index.tsx index 63ba3c29..2bfc3aca 100644 --- a/src/containers/dialogs/Modal/index.tsx +++ b/src/containers/dialogs/Modal/index.tsx @@ -1,16 +1,16 @@ -import React, { Attributes, FC, useCallback } from "react"; -import * as styles from "./styles.scss"; -import { IState } from "~/redux/store"; -import * as ACTIONS from "~/redux/modal/actions"; -import { connect } from "react-redux"; -import { DIALOG_CONTENT, IDialogProps } from "~/redux/modal/constants"; -import ReactDOM from "react-dom"; +import React, { Attributes, FC, useCallback } from 'react'; +import * as styles from './styles.scss'; +import { IState } from '~/redux/store'; +import * as ACTIONS from '~/redux/modal/actions'; +import { connect } from 'react-redux'; +import { DIALOG_CONTENT, IDialogProps } from '~/redux/modal/constants'; +import ReactDOM from 'react-dom'; const mapStateToProps = ({ modal }: IState) => ({ ...modal }); const mapDispatchToProps = { modalSetShown: ACTIONS.modalSetShown, modalSetDialog: ACTIONS.modalSetDialog, - modalShowDialog: ACTIONS.modalShowDialog + modalShowDialog: ACTIONS.modalShowDialog, }; type IProps = typeof mapDispatchToProps & ReturnType & {}; @@ -20,7 +20,7 @@ const ModalUnconnected: FC = ({ modalSetDialog, modalShowDialog, is_shown, - dialog + dialog, }) => { const onRequestClose = useCallback(() => { modalSetShown(false); @@ -37,19 +37,19 @@ const ModalUnconnected: FC = ({
{React.createElement(DIALOG_CONTENT[dialog], { onRequestClose, - onDialogChange: modalShowDialog + onDialogChange: modalShowDialog, } as IDialogProps)}
, - document.body + document.body, ); }; const Modal = connect( mapStateToProps, - mapDispatchToProps + mapDispatchToProps, )(ModalUnconnected); export { ModalUnconnected, Modal }; diff --git a/src/containers/dialogs/ScrollDialog/index.tsx b/src/containers/dialogs/ScrollDialog/index.tsx index 06824c34..fd4b3268 100644 --- a/src/containers/dialogs/ScrollDialog/index.tsx +++ b/src/containers/dialogs/ScrollDialog/index.tsx @@ -21,7 +21,6 @@ const ScrollDialog: FC = ({ children, title, buttons, - size = "medium", width = 800, top_sticky, top_sticky_offset, @@ -61,7 +60,7 @@ const ScrollDialog: FC = ({
@@ -84,6 +83,14 @@ const ScrollDialog: FC = ({
)} + {!title && ( +
+
+
+
+
+ )} + {!!buttons && (
diff --git a/src/containers/dialogs/ScrollDialog/styles.scss b/src/containers/dialogs/ScrollDialog/styles.scss index 0005eea1..80e9bf6c 100644 --- a/src/containers/dialogs/ScrollDialog/styles.scss +++ b/src/containers/dialogs/ScrollDialog/styles.scss @@ -50,6 +50,13 @@ z-index: 2; } +.top { + .wrap { + display: flex; + align-items: flex-end; + } +} + .bottom { bottom: 15px; top: auto; @@ -94,5 +101,22 @@ .children { 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; + } } diff --git a/src/containers/examples/HorizontalExample/index.tsx b/src/containers/examples/HorizontalExample/index.tsx index 520b4cf4..45ce0935 100644 --- a/src/containers/examples/HorizontalExample/index.tsx +++ b/src/containers/examples/HorizontalExample/index.tsx @@ -1,12 +1,12 @@ -import React, { FC } from "react"; -import { Card } from "~/components/containers/Card"; -import * as styles from "./styles.scss"; -import {Padder} from "~/components/containers/Padder"; -import {Group} from "~/components/containers/Group"; -import {InputText} from "~/components/input/InputText"; -import {Button} from "~/components/input/Button"; -import {Filler} from "~/components/containers/Filler"; -import {Icon} from "~/components/input/Icon"; +import React, { FC } from 'react'; +import { Card } from '~/components/containers/Card'; +import * as styles from './styles.scss'; +import { Padder } from '~/components/containers/Padder'; +import { Group } from '~/components/containers/Group'; +import { InputText } from '~/components/input/InputText'; +import { Button } from '~/components/input/Button'; +import { Filler } from '~/components/containers/Filler'; +import { Icon } from '~/components/input/Icon'; interface IProps {} diff --git a/src/redux/modal/constants.ts b/src/redux/modal/constants.ts index 204e1d78..eacf9b11 100644 --- a/src/redux/modal/constants.ts +++ b/src/redux/modal/constants.ts @@ -1,22 +1,22 @@ -import { ValueOf } from "~/redux/types"; -import { HorizontalExample } from "~/containers/examples/HorizontalExample"; -import { ExampleDialog } from "~/containers/dialogs/ExampleDialog"; -import { LoginDialog } from "~/containers/dialogs/LoginDialog"; +import { ValueOf } from '~/redux/types'; +import { HorizontalExample } from '~/containers/examples/HorizontalExample'; +import { ExampleDialog } from '~/containers/dialogs/ExampleDialog'; +import { LoginDialog } from '~/containers/dialogs/LoginDialog'; export const MODAL_ACTIONS = { - SET_SHOWN: "MODAL.SET_SHOWN", - SET_DIALOG: "SET_DIALOG", - SHOW_DIALOG: "SHOW_DIALOG" + SET_SHOWN: 'MODAL.SET_SHOWN', + SET_DIALOG: 'SET_DIALOG', + SHOW_DIALOG: 'SHOW_DIALOG', }; export const DIALOGS = { - TEST: "TEST", - LOGIN: "LOGIN" + TEST: 'TEST', + LOGIN: 'LOGIN', }; export const DIALOG_CONTENT = { [DIALOGS.TEST]: ExampleDialog, - [DIALOGS.LOGIN]: LoginDialog + [DIALOGS.LOGIN]: LoginDialog, }; export interface IDialogProps { diff --git a/src/redux/modal/reducer.ts b/src/redux/modal/reducer.ts index 3bbf6b41..f6b830c1 100644 --- a/src/redux/modal/reducer.ts +++ b/src/redux/modal/reducer.ts @@ -1,7 +1,7 @@ -import { MODAL_HANDLERS } from "~/redux/modal/handlers"; -import { createReducer } from "~/utils/reducer"; -import { DIALOGS } from "~/redux/modal/constants"; -import { ValueOf } from "~/redux/types"; +import { MODAL_HANDLERS } from '~/redux/modal/handlers'; +import { createReducer } from '~/utils/reducer'; +import { DIALOGS } from '~/redux/modal/constants'; +import { ValueOf } from '~/redux/types'; export interface IModalState { is_shown: boolean; @@ -10,7 +10,7 @@ export interface IModalState { const INITIAL_STATE: IModalState = { is_shown: true, - dialog: DIALOGS.LOGIN + dialog: DIALOGS.LOGIN, }; export default createReducer(INITIAL_STATE, MODAL_HANDLERS); diff --git a/src/redux/types.ts b/src/redux/types.ts index 42b5e01a..6aa2ca05 100644 --- a/src/redux/types.ts +++ b/src/redux/types.ts @@ -1,10 +1,10 @@ -import { DetailedHTMLProps, InputHTMLAttributes } from "react"; -import { DIALOGS } from "~/redux/modal/constants"; +import { DetailedHTMLProps, InputHTMLAttributes } from 'react'; +import { DIALOGS } from '~/redux/modal/constants'; -export type ITag = { +export interface ITag { title: string; - feature?: "red" | "blue" | "green" | "olive" | "black"; -}; + feature?: 'red' | 'blue' | 'green' | 'olive' | 'black'; +} export type IInputTextProps = DetailedHTMLProps< InputHTMLAttributes, diff --git a/src/styles/global.scss b/src/styles/global.scss index 1f26482c..17e5f698 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -9,14 +9,15 @@ body { min-height: 100vh; background: url("http://vault48.org/pixmaps/texture.jpg"); 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; font-size: 16px; fill: white; stroke: white; &::before { - content: ''; + content: ""; position: absolute; height: 400px; width: 100%; @@ -43,9 +44,15 @@ body { :global(.spc) { height: $spc; - &:global(.double) { height: $spc * 2; } - &:global(.quadro) { height: $spc * 4; } - &:global(.sixty) { height: $spc * 6; } + &:global(.double) { + height: $spc * 2; + } + &:global(.quadro) { + height: $spc * 4; + } + &:global(.sixty) { + height: $spc * 6; + } } :global(.padded) { @@ -62,7 +69,6 @@ body { // background: $content_bg_color; } - :global(.head_container) { //background: $main_bg_color; } @@ -71,3 +77,6 @@ body { height: 40px; } +:global(h2) { + font: $font_24_bold; +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 44ffe0cd..37ac0fe2 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,4 +1,4 @@ -@import 'colors'; +@import "colors"; $cell: 256px; $content_width: 1100px; @@ -25,7 +25,9 @@ $medium: 500; $light: 300; $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_24_bold: $bold 24px $font; @@ -54,7 +56,7 @@ $shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0 $shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0.98) 0 1px; $comment_shadow: $shadow_depth_2; -$node_shadow: transparentize(black, 0.8) 1px 2px; +$node_shadow: transparentize(black, 0.8) 1px 2px; $tag_height: 22px; @@ -63,18 +65,15 @@ $input_shadow_error: inset $red 0 0 0 1px; $input_shadow_filled: $input_shadow; @mixin outer_shadow() { - box-shadow: inset transparentize(white, 0.95) 0 1px, - transparentize(black, 0.8) 0 3px; + box-shadow: inset transparentize(white, 0.95) 0 1px, transparentize(black, 0.8) 0 3px; } @mixin inner_shadow() { - box-shadow: inset transparentize(white, 0.95) 0 -1px, - inset transparentize(black, 0.5) 0 1px; + box-shadow: inset transparentize(white, 0.95) 0 -1px, inset transparentize(black, 0.5) 0 1px; } @mixin input_shadow() { - box-shadow: inset transparentize(white, 0.92) 0 -1px, - inset transparentize(black, 0.8) 0 1px; + box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px; } @mixin modal_mixin() { @@ -90,7 +89,7 @@ $input_shadow_filled: $input_shadow; position: $position; &::after { - content: ' '; + content: " "; position: absolute; bottom: 0; left: 0; diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts index f66d9442..3f698660 100644 --- a/src/utils/hooks.ts +++ b/src/utils/hooks.ts @@ -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) => { const onEscape = useCallback( event => { - if (event.key !== "Escape") return; + if (event.key !== 'Escape') return; if ( ignore_inputs && - (event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA") + (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') ) return; onRequestClose(); }, - [onRequestClose] + [onRequestClose], ); useEffect(() => { - window.addEventListener("keyup", onEscape); + window.addEventListener('keyup', onEscape); return () => { - window.removeEventListener("keyup", onEscape); + window.removeEventListener('keyup', onEscape); }; }, [onEscape]); }; diff --git a/tslint.json b/tslint.json new file mode 100644 index 00000000..7718f5f7 --- /dev/null +++ b/tslint.json @@ -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": [] +}