Skip to content

Commit

Permalink
Merge pull request #10 from Aspedm/feature/vkui4
Browse files Browse the repository at this point in the history
VKUI 4 and Typescript
  • Loading branch information
Aspedm committed Mar 14, 2021
2 parents 89cc089 + 3a6086e commit dcf7814
Show file tree
Hide file tree
Showing 19 changed files with 1,019 additions and 487 deletions.
3 changes: 2 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
"@babel/preset-react",
"@babel/preset-typescript"
]
}
43 changes: 43 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -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"]
}
21 changes: 0 additions & 21 deletions .eslintrc.yml

This file was deleted.

7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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:
Expand Down
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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** |

Expand Down
9 changes: 9 additions & 0 deletions build/types/NoConnectionModal.d.ts
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 2 additions & 0 deletions build/types/assets/icon.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
declare const T_REX_ICON: string;
export default T_REX_ICON;
5 changes: 5 additions & 0 deletions build/types/useConnection.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/**
* @returns {boolean}
*/
declare const UseConnection: () => boolean;
export default UseConnection;
9 changes: 9 additions & 0 deletions custom.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
declare module "*.svg" {
const content: any;
export default content;
}

declare module "\*.png" {
const content: string;
export default content;
}
38 changes: 24 additions & 14 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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",
Expand All @@ -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/"
Expand Down
13 changes: 10 additions & 3 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -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/**",
}),
Expand All @@ -16,7 +23,7 @@ const plugins = [

export default [
{
input: 'src/NoConnectionModal',
input: 'src/NoConnectionModal.tsx',
output: [
{
file: pkg.main,
Expand All @@ -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',
Expand Down
63 changes: 0 additions & 63 deletions src/NoConnectionModal.js

This file was deleted.

64 changes: 64 additions & 0 deletions src/NoConnectionModal.tsx
Original file line number Diff line number Diff line change
@@ -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;
3 changes: 0 additions & 3 deletions src/assets/icon.js

This file was deleted.

Loading

0 comments on commit dcf7814

Please sign in to comment.