Merge branch 'master' into feat/fix_table_text

Author: noomorph

.github/workflows/ci.yml

@@ -106,7 +106,7 @@ jobs:
           BASE_URL: /${{ steps.pr_number.outputs.pr }}/
         run: |
           npm run generateDictionary
-          npx webpack
+          npx webpack --config webpack.config.prod.js
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3

.github/workflows/update-dictionary.yml

@@ -33,4 +33,4 @@ jobs:
         env:
           CLOUDFLARE_ZONE: ${{ secrets.CF_ZONE_ID }}
           CLOUDFLARE_TOKEN: ${{ secrets.CF_AUTH_TOKEN }}
-          PURGE_URLS: '["https://interslavic-dictionary.com/data.txt"]'
+          PURGE_URLS: '["https://interslavic-dictionary.com/data/*"]'

.gitignore

@@ -4,4 +4,4 @@
 /node_modules
 
 .DS_Store
-/static/data.txt
+/static/data/*

README.md

@@ -1,7 +1,7 @@
 <h1>
   <img src="src/components/Header/images/logo-icon.svg" alt="Logo" height="32" width="48">
   Interslavic language dictionary
-  <a href='https://coveralls.io/github/scherebedov/interslavic?branch=master'><img src='https://coveralls.io/repos/github/scherebedov/interslavic/badge.svg?branch=master' alt='Coverage Status' /></a>
+  <a href='https://coveralls.io/github/sonic16x/interslavic?branch=master'><img src='https://coveralls.io/repos/github/scherebedov/interslavic/badge.svg?branch=master' alt='Coverage Status' /></a>
 </h1>
 
 [https://interslavic-dictionary.com](https://interslavic-dictionary.com)  

package-lock.json

@@ -1,17 +1,17 @@
 {
   "name": "interslavic",
-  "version": "1.2.1",
+  "version": "1.5.0",
   "license": "MIT",
   "description": "Interslavic dictionary",
   "author": "Sergey Cherebedov",
   "scripts": {
     "start": "npm run dev",
     "test": "jest --logHeapUsage --coverage",
-    "dev": "cross-env NODE_ENV=development webpack-dev-server",
+    "dev": "cross-env NODE_ENV=development webpack serve --config webpack.config.dev.js --progress",
     "lint": "tslint -c tslint.json '{src,tests}/**/*.{ts,tsx}' -t stylish --fix",
     "updateTestSnapshot": "ts-node -r tsconfig-paths/register ./tests/updateTestSnapshot.ts",
     "generateDictionary": "ts-node -r tsconfig-paths/register ./src/services/generateDictionary.ts",
-    "build": "cross-env NODE_ENV=production webpack"
+    "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js"
   },
   "jest": {
     "transform": {
@@ -41,62 +41,62 @@
   },
   "main": "",
   "pre-commit": [
-    "lint",
-    "test"
+    "lint"
   ],
   "dependencies": {
-    "classnames": "^2.2.6",
-    "lodash": "^4.17.19",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-redux": "^7.2.0",
-    "redux": "^4.0.5"
+    "@ag-grid-community/client-side-row-model": "^25.2.0",
+    "@ag-grid-community/core": "^25.2.0",
+    "classnames": "^2.3.1",
+    "lodash": "^4.17.21",
+    "node-fetch": "^2.6.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
+    "redux": "^4.1.0"
   },
   "devDependencies": {
-    "@svgr/webpack": "^5.4.0",
-    "@types/classnames": "^2.2.10",
+    "@svgr/webpack": "^5.5.0",
     "@types/dialog-polyfill": "^0.5.0",
-    "@types/jest": "^24.9.1",
-    "@types/lodash": "^4.14.152",
-    "@types/node": "^11.15.14",
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "16.0.9",
-    "@types/request": "^2.48.5",
-    "acorn": "^6.4.1",
-    "autoprefixer": "^9.8.0",
+    "@types/jest": "^26.0.23",
+    "@types/lodash": "^4.14.168",
+    "@types/node": "^15.0.1",
+    "@types/node-fetch": "^2.5.10",
+    "@types/react": "^17.0.4",
+    "@types/react-dom": "17.0.3",
+    "@types/react-redux": "^7.1.16",
+    "acorn": "^8.2.4",
+    "autoprefixer": "^10.2.5",
     "clean-webpack-plugin": "^3.0.0",
-    "concurrently": "^4.1.2",
-    "copy-webpack-plugin": "^5.1.1",
+    "concurrently": "^6.0.2",
+    "copy-webpack-plugin": "^8.1.1",
     "coveralls": "^3.1.0",
-    "cross-env": "^5.1.1",
-    "css-loader": "^0.28.7",
-    "cssnano": "^4.1.10",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "^1.1.5",
-    "html-webpack-plugin": "^3.2.0",
-    "jest": "^24.9.0",
-    "jsdom": "8.5.0",
-    "node-sass": "^4.14.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "postcss-loader": "^3.0.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.4",
+    "css-minimizer-webpack-plugin": "^2.0.0",
+    "cssnano": "^5.0.2",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "jest": "^26.6.3",
+    "jsdom": "16.5.3",
+    "mini-css-extract-plugin": "^1.6.0",
+    "node-sass": "^5.0.0",
+    "postcss-loader": "^5.2.0",
     "pre-commit": "^1.2.2",
     "react-transform-hmr": "^1.0.4",
     "request": "^2.88.2",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.0",
-    "ts-jest": "^24.3.0",
-    "ts-loader": "^5.3.3",
-    "ts-node": "^8.10.1",
+    "sass-loader": "^11.0.1",
+    "style-loader": "^2.0.0",
+    "ts-jest": "^26.5.5",
+    "ts-loader": "^9.1.1",
+    "ts-node": "^9.1.1",
     "tsconfig-paths": "^3.9.0",
-    "tslint": "^5.14.0",
-    "tslint-react": "^4.0.0",
-    "typescript": "^3.9.3",
-    "typings": "^2.1.1",
-    "url-loader": "^0.6.2",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-hot-middleware": "^2.20.0",
+    "tslint": "^5.20.1",
+    "tslint-react": "^4.1.0",
+    "typescript": "^4.2.4",
+    "webpack": "^5.36.2",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-hot-middleware": "^2.25.0",
     "write-file-webpack-plugin": "^4.5.1"
   }
 }

package.json

@@ -0,0 +1,42 @@
+@mixin changeState {
+  transition:
+          transform var(--animation-duration) linear,
+          margin var(--animation-duration) linear,
+          background-color var(--animation-duration) linear;
+}
+
+@mixin custom-text {
+  span {
+    &.p {
+      color: #9C27B0;
+    }
+
+    &.r {
+      color: #f44336;
+    }
+
+    &.g {
+      color: #4CAF50;
+    }
+
+    &.b {
+      color: #3F51B5;
+    }
+
+    &.s {
+      color: #9E9E9E;
+    }
+
+    &.k {
+      color: #a0522d;
+    }
+
+    &.B {
+      font-weight: bold;
+    }
+
+    &.i {
+      font-style: italic;
+    }
+  }
+}

src/_mixins.scss

@@ -22,6 +22,8 @@ export enum ActionTypes {
     SET_NOTIFICATION = 'SET_NOTIFICATION',
     CHANGE_CARD_VIEW = 'CHANGE_CARD_VIEW',
     CHANGE_ORDER_OF_CASES = 'CHANGE_ORDER_OF_CASES',
+    DICTIONARY_LANGUAGES = 'DICTIONARY_LANGUAGES',
+    TOGGLE_PAGE = 'TOGGLE_PAGE',
 }
 
 export function langAction(data: {from: string, to: string}) {
@@ -167,3 +169,17 @@ export function changeOrderOfCases(data) {
         data,
     };
 }
+
+export function changeDictionaryLangAction(data) {
+    return {
+        type: ActionTypes.DICTIONARY_LANGUAGES,
+        data,
+    };
+}
+
+export function togglePage(data) {
+    return {
+        type: ActionTypes.TOGGLE_PAGE,
+        data,
+    };
+}

src/actions/index.ts

@@ -1,5 +1,3 @@
-@import "src/index";
-
 .about-page {
   width: 100%;
   height: 100%;
@@ -13,6 +11,10 @@
     display: block;
   }
 
+  .no-wrap {
+    white-space: nowrap;
+  }
+
   &__container {
     max-width: 1024px;
     margin: 0 auto;

src/components/About/index.scss

@@ -1,12 +1,21 @@
-import { worksheetUrl } from 'consts';
-import * as React from 'react';
+import { tablesData } from 'consts';
+
 import { t } from 'translations';
 import './index.scss';
+import { getTablePublicUrl } from 'utils/getTablePublicUrl';
+
+function boldify(s: string): React.ReactNode {
+    const fragments = s.split('**');
+    return fragments.map((substr, index) => {
+      return index % 2 === 0 ? substr : <b>{substr}</b>;
+    });
+}
 
 export const About: React.FC =
     () => {
+        const worksheetUrl = getTablePublicUrl(tablesData[0].spreadsheetId, tablesData[0].sheetId);
         const email = '[email protected]';
-        const github = 'https://github.com/scherebedov/interslavic';
+        const github = 'https://github.com/sonic16x/interslavic';
         const source = 'http://steen.free.fr/interslavic';
         let version = `v${VERSION}`;
         const trimmedBaseUrl = BASE_URL.replace('/', '');
@@ -30,7 +39,7 @@ export const About: React.FC =
                         <h6>{t('aboutDeveloper')}</h6>
                         <div className={'about-page__author'}>
                             {t('aboutAuthorSergeyCherebedov')}:
-                            <a target={'_blank'} href={'https://github.com/scherebedov'}>GitHub</a>
+                            <a target={'_blank'} href={'https://github.com/sonic16x'}>GitHub</a>
                             <a target={'_blank'} href={'https://www.linkedin.com/in/scherebedov/'}>LinkedIn</a>
                             <a target={'_blank'} href={'https://www.facebook.com/profile.php?id=100009366550621'}>Facebook</a>
                             <a target={'_blank'} href={`email:${email}`}>{email}</a>

src/components/About/index.tsx

@@ -0,0 +1,25 @@
+.button {
+  background: var(--primary-color);
+  color: #fff;
+  border-radius: var(--border-radius-m);
+  padding: 5px 10px;
+  border: none;
+  outline: none;
+  box-shadow: var(--shadow);
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &-m {
+    font-size: var(--text-m);
+    line-height: var(--text-m-line);
+  }
+
+  &.disabled {
+    pointer-events: none;
+    opacity: .7;
+  }
+}

src/components/Button/Button.scss

@@ -0,0 +1,45 @@
+import './Button.scss';
+import classNames from 'classnames';
+
+interface IButtonProps {
+    size?: 'S' | 'M' | 'L';
+    href?: string;
+    target?: string;
+    onClick?: () => void;
+    title: string;
+    disabled?: boolean;
+}
+
+export const Button = (
+    {
+        size = 'M',
+        href,
+        target,
+        onClick,
+        title,
+        disabled,
+    }: IButtonProps,
+) => {
+    if (href) {
+        return (
+            <a
+                className={classNames(['button', `button-${size.toLowerCase()}`], { disabled })}
+                href={href}
+                target={target}
+                onClick={onClick}
+            >
+                {title}
+            </a>
+        );
+    }
+
+    return (
+        <button
+            className={classNames(['button', `button-${size.toLowerCase()}`], { disabled })}
+            onClick={onClick}
+            disabled={disabled}
+        >
+            {title}
+        </button>
+    );
+};

src/components/Button/Button.tsx

@@ -1,5 +1,3 @@
-@import "src/index";
-
 .card {
   border: var(--border);
   border-radius: var(--border-radius-m);

src/components/Card/index.scss

@@ -1,4 +1,4 @@
-import * as React from 'react';
+
 import './index.scss';
 import classNames from 'classnames';