VKUI 4 and Typescript

.babelrc

@@ -1,6 +1,7 @@
 {
 	"presets": [
 		"@babel/preset-env",
-		"@babel/preset-react"
+		"@babel/preset-react",
+		"@babel/preset-typescript"
 	]
 }

.eslintrc

@@ -0,0 +1,43 @@
+{
+    "rules": {
+        "@typescript-eslint/ban-ts-ignore": ["off"],
+        "@typescript-eslint/camelcase": ["off"],
+        "@typescript-eslint/explicit-function-return-type": ["off"],
+        "@typescript-eslint/interface-name-prefix": ["off"],
+        "@typescript-eslint/no-explicit-any": ["off"],
+        "@typescript-eslint/no-unused-expressions": ["off"],
+        "@typescript-eslint/no-var-requires": ["off"],
+        "no-use-before-define": "off",
+        "@typescript-eslint/no-use-before-define": ["error"],
+        "comma-dangle": ["error", "always-multiline"],
+        "no-async-promise-executor": ["off"],
+        "no-empty-pattern": ["off"],
+        "no-undef": ["error"],
+        "no-var": ["error"],
+        "object-curly-spacing": ["error", "always"],
+        "quotes": ["error", "double", { "allowTemplateLiterals": true }],
+        "semi": ["error", "always"],
+        "spaced-comment": ["off"],
+        "no-prototype-builtins": ["off"],
+        "sort-keys": ["off"],
+        "space-before-function-paren": ["off"],
+        "indent": [2, "tab"],
+        "no-tabs": 0
+    },
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+        "standard",
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": ["prettier", "@typescript-eslint"]
+}

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 1.0.0 (Sep 4th, 2020)
+
+Changes:
+  - Update VK libs
+  - Add typescript
+  - !BREAKING CHANGE! Change custom text props
+
 ## 0.1.1 (Sep 4th, 2020)
 
 Changes:

README.md

@@ -58,8 +58,8 @@ You can passed options for component:
 
 | Name          | Type     | Description | Default |
 |---------------|----------|-------------|---------|
-|`title`        | string   | Modal title | 'No internet'|
-|`caption`      | string   | Modal description  | 'Checking the network cables, modem and router.' |
+|`header`       | string   | Modal title | 'No internet'|
+|`subHeader`    | string   | Modal description  | 'Checking the network cables, modem and router.' |
 |`actionText`   | string   | Button text | 'Try again' |
 |`onClose`      | function | Close modal function | **Required** |
 

build/types/NoConnectionModal.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface ConnectionDetectModalProps {
+    header?: string;
+    subHeader?: string;
+    actionText?: string;
+    onClose: () => void;
+}
+declare const ConnectionDetectModal: React.FC<ConnectionDetectModalProps>;
+export default ConnectionDetectModal;

build/types/assets/icon.d.ts

@@ -0,0 +1,2 @@
+declare const T_REX_ICON: string;
+export default T_REX_ICON;

build/types/useConnection.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @returns {boolean}
+ */
+declare const UseConnection: () => boolean;
+export default UseConnection;

custom.d.ts

@@ -0,0 +1,9 @@
+declare module "*.svg" {
+    const content: any;
+    export default content;
+}
+
+declare module "\*.png" {
+    const content: string;
+    export default content;
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vkui-no-connection-modal",
-	"version": "0.1.1",
+	"version": "1.0.0",
 	"main": "lib/NoConnectionModal.js",
 	"module": "lib/NoConnectionModal.es.js",
 	"license": "UNLICENSED",
@@ -19,15 +19,15 @@
 		"build": "rollup --config",
 		"start:storybook": "start-storybook -p 6006 -c .storybook",
 		"build:storybook": "build-storybook --output-dir dist",
-		"format": "prettier ./src/*.js --write",
-		"lint": "eslint ./src/*.js",
+		"format": "prettier ./src/*.{ts,tsx} --write",
+		"lint": "eslint ./src/*.{ts,tsx}",
 		"prepublish": "yarn build"
 	},
 	"dependencies": {
-		"@vkontakte/icons": "^1.39.1",
-		"@vkontakte/vk-bridge": "^2.2.8",
-		"@vkontakte/vkui": "^3.12.5",
-		"prop-types": "^15.7.2"
+		"@vkontakte/icons": "^1.83.0",
+		"@vkontakte/vk-bridge": "^2.4.1",
+		"@vkontakte/vkjs": "^0.20.0",
+		"@vkontakte/vkui": "^4.3.0"
 	},
 	"peerDependencies": {
 		"react": "^16.13.1",
@@ -37,23 +37,33 @@
 		"@babel/core": "^7.9.0",
 		"@babel/preset-env": "^7.9.5",
 		"@babel/preset-react": "^7.9.4",
-		"@storybook/react": "^6.1.20",
+		"@babel/preset-typescript": "^7.13.0",
+		"@storybook/react": "^6.1.21",
+		"@typescript-eslint/eslint-plugin": "^4.17.0",
+		"@typescript-eslint/parser": "^4.17.0",
 		"babel-loader": "^8.1.0",
-		"eslint": "^6.8.0",
+		"eslint": "^7.22.0",
 		"eslint-config-airbnb": "18.1.0",
-		"eslint-config-prettier": "^6.11.0",
-		"eslint-plugin-import": "^2.20.2",
+		"eslint-config-prettier": "^8.1.0",
+		"eslint-config-standard": "^16.0.2",
+		"eslint-plugin-import": "^2.22.1",
 		"eslint-plugin-jsx-a11y": "^6.2.3",
-		"eslint-plugin-react": "^7.19.0",
+		"eslint-plugin-node": "^11.1.0",
+		"eslint-plugin-prettier": "^3.3.1",
+		"eslint-plugin-promise": "^4.3.1",
+		"eslint-plugin-react": "^7.22.0",
+		"eslint-plugin-standard": "^5.0.0",
 		"lint-staged": "^10.1.7",
 		"npm-run-all": "^4.1.5",
-		"prettier": "^2.0.5",
+		"prettier": "^2.2.1",
 		"react": "^16.13.1",
 		"react-dom": "^16.13.1",
 		"rollup": "^2.7.2",
 		"rollup-plugin-babel": "^4.4.0",
 		"rollup-plugin-peer-deps-external": "^2.2.2",
-		"rollup-plugin-terser": "^5.3.0"
+		"rollup-plugin-terser": "^5.3.0",
+		"rollup-plugin-typescript2": "^0.30.0",
+		"typescript": "^4.2.3"
 	},
 	"files": [
 		"lib/"

rollup.config.js

@@ -1,13 +1,20 @@
 import babel from 'rollup-plugin-babel';
 import { terser } from 'rollup-plugin-terser';
 import external from 'rollup-plugin-peer-deps-external';
+import typescript from 'rollup-plugin-typescript2';
 import pkg from "./package.json";
 
 const externals = ['@vkontakte/vkui'];
 const plugins = [
 	external({
 		includeDependencies: true,
 	}),
+	typescript({
+		useTsconfigDeclarationDir: true,
+		tsconfigOverride: {
+			exclude: ['**/*.stories.*'],
+		},
+	}),
 	babel({
 		exclude: "node_modules/**",
 	}),
@@ -16,7 +23,7 @@ const plugins = [
 
 export default [
 	{
-		input: 'src/NoConnectionModal',
+		input: 'src/NoConnectionModal.tsx',
 		output: [
 			{
 				file: pkg.main,
@@ -27,13 +34,13 @@ export default [
 				file: pkg.module,
 				format: 'es',
 				sourcemap: false,
-			}
+			},
 		],
 		external: externals,
 		plugins,
 	},
 	{
-		input: 'src/useConnection',
+		input: 'src/useConnection.ts',
 		output: [
 			{
 				file: 'lib/useConnection.js',

src/NoConnectionModal.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { ModalRoot, ModalCard, Spinner, Button } from "@vkontakte/vkui";
+import T_REX_ICON from "./assets/icon";
+
+export interface ConnectionDetectModalProps {
+	header?: string;
+	subHeader?: string;
+	actionText?: string;
+	onClose: () => void;
+}
+
+const MODAL_INFO_ID = "modal-root-info";
+
+const ConnectionDetectModal: React.FC<ConnectionDetectModalProps> = ({ header, subHeader, actionText, onClose }) => {
+	const [checkProgress, setCheckProgress] = useState(false);
+
+	/**
+	 * @returns {void}
+	 */
+	const checkConnection = (): void => {
+		const online: boolean = navigator.onLine;
+		setCheckProgress(true);
+
+		if (!online) {
+			const timeout = setTimeout(() => {
+				setCheckProgress(false);
+				clearTimeout(timeout);
+			}, 1000);
+
+			return;
+		}
+
+		return onClose();
+	};
+
+	return (
+		<ModalRoot activeModal={MODAL_INFO_ID} onClose={checkConnection}>
+			<ModalCard
+				id={MODAL_INFO_ID}
+				onClose={checkConnection}
+				icon={<img src={T_REX_ICON} alt="Trex" style={{ width: 160 }} />}
+				header={header}
+				subheader={subHeader}
+				actions={
+					<Button
+						size="l"
+						mode="primary"
+						onClick={() => checkConnection()}
+					>
+						{checkProgress ? <Spinner size="small" /> : actionText}
+					</Button>
+				}
+			/>
+		</ModalRoot>
+	);
+};
+
+ConnectionDetectModal.defaultProps = {
+	header: "No internet",
+	subHeader: "Checking the network cables, modem and router.",
+	actionText: "Try again",
+};
+
+export default ConnectionDetectModal;