Merge pull request #1 from geekdada/dev

Author: geekdada

.babelrc

@@ -1,26 +1,28 @@
 {
   "presets": [
-    "@babel/preset-typescript",
-    "react-app"
-  ],
-  "plugins": [
-    "babel-plugin-transform-inline-environment-variables",
-    "babel-plugin-macros",
     [
-      "@emotion/babel-plugin-jsx-pragmatic",
+      "@babel/preset-env",
       {
-        "export": "jsx",
-        "import": "__cssprop",
-        "module": "@emotion/react"
+        "useBuiltIns": "entry",
+        "corejs": "3.8.2"
       }
     ],
+    "@babel/preset-typescript",
     [
-      "@babel/plugin-transform-react-jsx",
-      {
-        "pragma": "__cssprop",
-        "pragmaFrag": "React.Fragment"
-      }
-    ],
+      "@babel/preset-react",
+      { "runtime": "automatic", "importSource": "@emotion/react" }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "babel-plugin-transform-inline-environment-variables",
+    "babel-plugin-macros",
+    ["@emotion/babel-plugin", {
+      "sourceMap": true,
+      "autoLabel": "dev-only",
+      "labelFormat": "[local]",
+      "cssPropOptimization": true
+    }],
     "react-hot-loader/babel"
   ]
 }

.browserslistrc

@@ -0,0 +1 @@
+last 10 Chrome versions

CHANGELOG.md

@@ -1,3 +1,63 @@
+# [0.2.0-5](https://github.com/geekdada/a-translator-chrome-extension/compare/v0.2.0-4...v0.2.0-5) (2021-01-22)
+
+
+### Bug Fixes
+
+* use chinese ([b3b6188](https://github.com/geekdada/a-translator-chrome-extension/commit/b3b61880af68cae845f4c83f12f23c503b49f3b2))
+
+
+### Features
+
+* add config for hover button ([477de29](https://github.com/geekdada/a-translator-chrome-extension/commit/477de29b86033267db3acb95f042bdbbc1425786))
+* add context menus ([ccf87a5](https://github.com/geekdada/a-translator-chrome-extension/commit/ccf87a512664d45c236e0017ccd613ef39d8352e))
+* keyboard shortcuts ([c26cf83](https://github.com/geekdada/a-translator-chrome-extension/commit/c26cf83fc92225367cf676e736e773d66f7ed075))
+
+
+
+# [0.2.0-4](https://github.com/geekdada/a-translator-chrome-extension/compare/v0.2.0-3...v0.2.0-4) (2021-01-21)
+
+
+### Features
+
+* ocr text for translating ([72b58ed](https://github.com/geekdada/a-translator-chrome-extension/commit/72b58ede93a68032d2b4979e46ae32f35803a9ea))
+* turn off ocr tool when the selection is too small ([0e13070](https://github.com/geekdada/a-translator-chrome-extension/commit/0e130708c7c87d1e3e6929509e65abbccff3db8b))
+
+
+
+# [0.2.0-3](https://github.com/geekdada/a-translator-chrome-extension/compare/v0.2.0-2...v0.2.0-3) (2021-01-20)
+
+
+### Features
+
+* change target language directly in webpage ([fdb574b](https://github.com/geekdada/a-translator-chrome-extension/commit/fdb574b8210ce6914f64f2a8cfecdde13cdf7ad6))
+* retry button ([2b287d3](https://github.com/geekdada/a-translator-chrome-extension/commit/2b287d3fec67c01f25a8a8d7b57c3c0e02962b29))
+
+
+
+# [0.2.0-2](https://github.com/geekdada/a-translator-chrome-extension/compare/v0.2.0-1...v0.2.0-2) (2021-01-18)
+
+
+### Bug Fixes
+
+* conflict with emotion 10 application ([699948e](https://github.com/geekdada/a-translator-chrome-extension/commit/699948e1c1f93f43b4e939b4b4652213d1973423))
+* style typo ([4e46590](https://github.com/geekdada/a-translator-chrome-extension/commit/4e4659034f871b25ed7a64d24147eec04c542b6e))
+
+
+
+# [0.2.0-1](https://github.com/geekdada/a-translator-chrome-extension/compare/v0.2.0-0...v0.2.0-1) (2021-01-18)
+
+
+
+# [0.2.0-0](https://github.com/geekdada/a-translator-chrome-extension/compare/v0.1.6...v0.2.0-0) (2021-01-17)
+
+
+### Features
+
+* add polyfill for old browsers ([0e38a77](https://github.com/geekdada/a-translator-chrome-extension/commit/0e38a77ea2fe224ae5086d2930ce9d17cc89530a))
+* optimize string selection ([7ea8ac7](https://github.com/geekdada/a-translator-chrome-extension/commit/7ea8ac71fb88146e46b6608bc5eeacae659762ac))
+
+
+
 ## [0.1.6](https://github.com/geekdada/a-translator-chrome-extension/compare/v0.1.5...v0.1.6) (2021-01-10)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "a-translator-chrome-extension",
-  "version": "0.1.6",
+  "version": "0.2.0-5",
   "description": "A Chrome extension for A Translator",
   "license": "MIT",
   "repository": {
@@ -14,27 +14,28 @@
     "prettier": "prettier --write '**/*.{js,jsx,ts,tsx,css,html}'",
     "lint": "eslint --ext .ts,.tsx,.js,.jsx",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
+    "pub": "np --no-publish --no-release-draft",
     "version": "npm run changelog && git add ."
   },
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@babel/preset-env": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-angular": "^11.0.0",
     "@emotion/babel-plugin": "^11.1.2",
-    "@emotion/babel-plugin-jsx-pragmatic": "^0.1.5",
+    "@emotion/cache": "^11.1.3",
     "@emotion/css": "^11.1.3",
     "@emotion/react": "^11.1.4",
     "@emotion/server": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@hot-loader/react-dom": "^17.0.1",
     "@material-ui/core": "^4.11.2",
     "@tailwindcss/forms": "^0.2.1",
-    "@types/chrome": "0.0.127",
+    "@types/chrome": "0.0.128",
+    "@types/crypto-js": "^4.0.1",
     "@types/fs-extra": "^9.0.6",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^14",
@@ -43,6 +44,7 @@
     "@types/react": "^17.0.0",
     "@types/react-collapse": "^5.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-resizable": "^1.7.2",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
@@ -52,14 +54,14 @@
     "babel-loader": "^8.2.2",
     "babel-plugin-macros": "^3.0.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
-    "babel-preset-react-app": "^10.0.0",
     "chrome-call": "^4.0.1",
     "clean-webpack-plugin": "^3.0.0",
-    "clsx": "^1.1.1",
     "connect.io": "^3.1.3",
     "conventional-changelog-cli": "^2.1.1",
     "copy-webpack-plugin": "^6.4.0",
+    "core-js": "3",
     "cross-env": "^7.0.3",
+    "crypto-js": "^4.0.0",
     "css-loader": "^5.0.1",
     "dotenv": "^8.2.0",
     "eslint": "^7.16.0",
@@ -76,25 +78,29 @@
     "mini-css-extract-plugin": "^1.3.3",
     "node-sass": "^5.0.0",
     "notistack": "^1.0.3",
+    "np": "^7.2.0",
     "npm-run-all": "^4.1.5",
     "pino": "^6.9.0",
     "postcss": "^8.2.2",
     "postcss-import": "^14.0.0",
     "postcss-loader": "^4.1.0",
     "prettier": "^2.2.1",
     "process": "^0.11.10",
+    "query-string": "^6.13.8",
     "rangy": "^1.3.0",
     "react": "^17.0.1",
     "react-clipboard.js": "^2.0.16",
     "react-collapse": "^5.1.0",
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",
     "react-hot-loader": "^4.13.0",
+    "react-resizable": "^1.11.0",
     "react-scroll-to-bottom": "^4.1.0",
     "sass-loader": "^10.1.0",
     "scrollparent": "^2.0.1",
+    "semver": "^7.3.4",
     "smoothscroll-polyfill": "^0.4.4",
-    "source-map-loader": "^1.1.3",
+    "source-map-loader": "^2.0.0",
     "style-loader": "^2.0.0",
     "tailwindcss": "^2.0.2",
     "terser-webpack-plugin": "^5.0.3",

src/common/api.ts

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import qs from 'query-string'
 
 import { APIRegions, TranslateResult } from './types'
 
@@ -26,13 +27,24 @@ class Client {
   }
 
   async translate(text: string, targetLang: string): Promise<TranslateResult> {
-    const form = new FormData()
-
-    form.append('auth_key', this.apiToken)
-    form.append('target_lang', targetLang)
-    form.append('text', text)
-
-    return this.axios.post('/v2/translate', form).then((res) => res.data)
+    return this.axios
+      .post(
+        '/v2/translate',
+        qs.stringify({
+          auth_key: this.apiToken,
+          target_lang: targetLang,
+          split_sentences: '1',
+          preserve_formatting: '0',
+          text: text,
+        }),
+        {
+          headers: {
+            'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
+          },
+          responseType: 'json',
+        },
+      )
+      .then((res) => res.data)
   }
 
   private getAPI(): string {

src/common/constant.ts

@@ -0,0 +1,15 @@
+export const supportedLanguages = {
+  ZH: '中文',
+  'EN-US': 'English (American)',
+  'EN-GB': 'English (British)',
+  JA: '日本語',
+  DE: 'German',
+  FR: 'French',
+  ES: 'Spanish',
+  'PT-PT': 'Portuguese',
+  'PT-BR': 'Portuguese (Brazilian)',
+  IT: 'Italian',
+  NL: 'Dutch',
+  PL: 'Polish',
+  RU: 'Russian',
+}

src/common/logger.ts

@@ -16,7 +16,7 @@ const logger = pino({
       }
 
       const label = pino.levels.labels[level]
-      const logs: any[] = [`[ATE] [${label.toUpperCase()}] ${msg}`]
+      const logs: any[] = [`[ATE] [${label.toUpperCase()}] ${msg || ''}`]
       const method = getMethod(level)
       const extra = omit(o, ['msg', 'level', 'time', 'err'])
 

src/common/rangy.ts

@@ -0,0 +1,7 @@
+// @ts-ignore
+import * as rangy from 'rangy'
+// @ts-ignore
+import 'rangy/lib/rangy-classapplier'
+import 'rangy/lib/rangy-highlighter'
+
+export default rangy

src/common/types.ts

@@ -1,27 +1,21 @@
+import { supportedLanguages } from './constant'
+
 export interface Config {
   token: string
-  targetLang: SupportLanguages
+  targetLang: SupportLanguageKeys
   region: APIRegions
+  ocrSecretId?: string
+  ocrSecretKey?: string
+  hoverButton?: boolean
 }
 
-export type SupportLanguages =
-  | 'ZH'
-  | 'EN'
-  | 'JA'
-  | 'DE'
-  | 'FR'
-  | 'ES'
-  | 'PT'
-  | 'IT'
-  | 'NL'
-  | 'PL'
-  | 'RU'
+export type SupportLanguageKeys = keyof typeof supportedLanguages
 
 export type APIRegions = 'default' | 'global' | 'dev'
 
 export type TranslateResult = {
   translations: Array<{
-    detected_source_language: SupportLanguages
+    detected_source_language: SupportLanguageKeys
     text: string
   }>
 }

src/components/IconButton.tsx

@@ -5,7 +5,7 @@ import React, {
   ReactNode,
   Ref,
 } from 'react'
-import clsx from 'clsx'
+import tw from 'twin.macro'
 
 export interface BaseProps {
   children: ReactNode
@@ -26,8 +26,13 @@ const IconButton = forwardRef(function IconButton(
     <button
       {...props}
       ref={ref}
-      className={clsx(['ate_IconButton', props.className])}
-      onClick={handleClick}>
+      onClick={handleClick}
+      css={tw`
+        inline-flex justify-center items-center w-auto h-auto m-0 p-2
+        cursor-pointer text-center text-gray-800 no-underline rounded-md
+        border border-solid border-gray-800 bg-white hover:bg-gray-100 active:bg-gray-200
+        transition-colors ease-in-out duration-150
+      `}>
       {props.children}
     </button>
   )