fbt-inline-translations 0.1.5 → 0.2.0

package/README.md

@@ -23,6 +23,54 @@ You can make translations available to your translators, users, or the entire co
 npm install fbt-inline-translations
 ```
 
+### How to add polyfills in Webpack 5
+
+Errors in the terminal will give hints on how to add the required polyfill.
+
+**Example for path module:**
+
+In your Webpack config:
+
+```javascript
+module.exports = {
+  resolve: {
+    // ...
+    fallback: {
+      "buffer": require.resolve("buffer/"),
+      "url": require.resolve("url/"),
+      "path": require.resolve("path-browserify"),
+      "http": require.resolve("stream-http"),
+      "https": require.resolve("https-browserify"),
+    },
+
+    alias: {
+      process: "process/browser",
+    },
+
+    plugins: [
+      // Work around for Buffer is undefined:
+      // https://github.com/webpack/changelog-v5/issues/10
+      new webpack.ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+      }),
+      new webpack.ProvidePlugin({
+        process: 'process/browser',
+      }),
+    ],
+  },
+};
+```
+
+and
+
+```cmd
+npm install buffer url path-browserify stream-http https-browserify --save-dev
+# you may need to clear your cache after this change
+rm -fr node_modules/.cache
+```
+
+Restart the Dev Server and the error will be gone. 
+
 ## 🔧 Configuration
 
 Register your FBT project on [Swiftyper Translations](https://translations.swiftyper.sk)
@@ -44,4 +92,27 @@ Add this code to your page:
         darkMode: false, // dark mode also depends on html class 'tw-dark'
     })
 </script>
+```
+
+### React usage
+
+In your application, wrap your `App` component. We recommend adding it around your root component in the `index.js` file.
+
+```js
+// src/index.js
+
+import ReactDOM from 'react-dom';
+import { FbtInlineTranslationsWrapper } from 'fbt-inline-translations';
+
+ReactDOM.render(
+  <FbtInlineTranslationsWrapper
+    token={'YOUR_API_KEY_HERE'}
+    locale={"sk_SK"} // translation locale
+    contributor={"contributor@email.com"} // contributor must be invited
+    darkMode={false} // dark mode also depends on html class 'tw-dark'
+  >
+    <App />
+  </FbtInlineTranslationsWrapper>,
+  document.getElementById('root')
+);
 ```

package/lib/@types/Phrase.d.ts

@@ -1,16 +1,16 @@
 import { Translation } from './Translation';
-export declare type TableJSFBTTreeLeaf = {
+export type TableJSFBTTreeLeaf = {
     desc: string;
     hash?: string;
     text: string;
     tokenAliases?: string;
     outerTokenName?: string;
 };
-export declare type TableJSFBTTreeBranch = {
+export type TableJSFBTTreeBranch = {
     [key: number]: TableJSFBTTree;
 };
-export declare type TableJSFBTTree = TableJSFBTTreeLeaf | TableJSFBTTreeBranch;
-export declare type JSFBTMetaEntry = {
+export type TableJSFBTTree = TableJSFBTTreeLeaf | TableJSFBTTreeBranch;
+export type JSFBTMetaEntry = {
     type: string;
     singular?: boolean;
     token?: string;
@@ -22,11 +22,11 @@ export declare type JSFBTMetaEntry = {
 } | {
     range: string[];
 };
-export declare type TableJSFBT = {
+export type TableJSFBT = {
     t: TableJSFBTTree;
     m: JSFBTMetaEntry[];
 };
-export declare type Phrase = {
+export type Phrase = {
     id: number;
     parent_id: number | null;
     object: string;
@@ -42,7 +42,20 @@ export declare type Phrase = {
     project: string;
     created_at: string;
     translations: Translation[];
+    glossary: Term[];
     locale: {
         name: string;
     };
 };
+export type Term = {
+    id: number;
+    object: string;
+    hash: string;
+    translation: Translation;
+    text: string;
+    description: string;
+    translatable: boolean;
+    case_insensitive: boolean;
+    part_of_speech: string;
+    created_at: string;
+};

package/lib/@types/SwiftyperContextType.d.ts

@@ -1,4 +1,4 @@
-export declare type SwiftyperContextType = {
+export type SwiftyperContextType = {
     token: string;
     locale: string;
     contributor: string;

package/lib/@types/Translation.d.ts

@@ -1,4 +1,4 @@
-export declare type Translation = {
+export type Translation = {
     id: number;
     voted: boolean;
     phrase_id: number;

package/lib/App.css

@@ -0,0 +1,444 @@
+/* @tailwind base; */
+
+.tw-relative {
+  position: relative;
+}
+
+.tw-m-0 {
+  margin: 0px;
+}
+
+.tw-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.tw-mt-3 {
+  margin-top: 0.75rem;
+}
+
+.tw-mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.tw-mt-4 {
+  margin-top: 1rem;
+}
+
+.tw-mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.tw-mt-2 {
+  margin-top: 0.5rem;
+}
+
+.tw-ml-3 {
+  margin-left: 0.75rem;
+}
+
+.tw-mt-1 {
+  margin-top: 0.25rem;
+}
+
+.tw-mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.tw-mb-0 {
+  margin-bottom: 0px;
+}
+
+.tw-box-border {
+  box-sizing: border-box;
+}
+
+.tw-block {
+  display: block;
+}
+
+.tw-flex {
+  display: flex;
+}
+
+.tw-inline-flex {
+  display: inline-flex;
+}
+
+.tw-h-12 {
+  height: 3rem;
+}
+
+.tw-h-6 {
+  height: 1.5rem;
+}
+
+.tw-w-full {
+  width: 100%;
+}
+
+.tw-w-12 {
+  width: 3rem;
+}
+
+.tw-w-6 {
+  width: 1.5rem;
+}
+
+.tw-min-w-\[20px\] {
+  min-width: 20px;
+}
+
+.tw-max-w-lg {
+  max-width: 32rem;
+}
+
+.tw-resize-y {
+  resize: vertical;
+}
+
+.tw-list-inside {
+  list-style-position: inside;
+}
+
+.tw-list-none {
+  list-style-type: none;
+}
+
+.tw-items-center {
+  align-items: center;
+}
+
+.tw-justify-end {
+  justify-content: flex-end;
+}
+
+.tw-justify-center {
+  justify-content: center;
+}
+
+.tw-gap-2 {
+  gap: 0.5rem;
+}
+
+.tw-gap-1\.5 {
+  gap: 0.375rem;
+}
+
+.tw-gap-1 {
+  gap: 0.25rem;
+}
+
+.tw-divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
+.tw-divide-solid > :not([hidden]) ~ :not([hidden]) {
+  border-style: solid;
+}
+
+.tw-divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-divide-opacity));
+}
+
+.tw-overflow-auto {
+  overflow: auto;
+}
+
+.tw-break-words {
+  overflow-wrap: break-word;
+}
+
+.tw-rounded-md {
+  border-radius: 0.375rem;
+}
+
+.tw-rounded-full {
+  border-radius: 9999px;
+}
+
+.tw-border-0 {
+  border-width: 0px;
+}
+
+.tw-border {
+  border-width: 1px;
+}
+
+.tw-border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.\!tw-border-red-500 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity)) !important;
+}
+
+.tw-border-transparent {
+  border-color: transparent;
+}
+
+.tw-bg-transparent {
+  background-color: transparent;
+}
+
+.tw-bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
+.tw-bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
+.tw-p-3 {
+  padding: 0.75rem;
+}
+
+.tw-p-0 {
+  padding: 0px;
+}
+
+.tw-py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.tw-px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.tw-text-center {
+  text-align: center;
+}
+
+.tw-text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.tw-text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.tw-text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.tw-text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.tw-font-medium {
+  font-weight: 500;
+}
+
+.tw-leading-6 {
+  line-height: 1.5rem;
+}
+
+.tw-text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
+.tw-text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.tw-text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
+
+.tw-text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.tw-text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.tw-text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
+.tw-text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.tw-shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.tw-outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+#inline-translator * {
+  font-family: 'Roboto', sans-serif;
+}
+
+.tw-dark #inline-translator .rodal-close:hover:before,
+.tw-dark #inline-translator .rodal-close:hover:after {
+  background: #fff;
+}
+
+#inline-translator .loader {
+  border: 5px solid #bebebe;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.intlInlineMode_normal {
+  font-style: normal;
+}
+
+.intlInlineMode_translatable,
+.intlInlineMode_approvable,
+.intlInlineMode_reportable {
+  background: none;
+  font-style: normal;
+  padding: 0px;
+  width: auto;
+}
+
+.intlInlineMode_reportable {
+  border-bottom: 1px solid #f99;
+}
+
+.intlInlineMode_translatable,
+.intlInlineMode_approvable {
+  border-bottom: 1px solid #999;
+}
+
+.intlInlineMode_translatable:hover,
+.intlInlineMode_approvable:hover,
+.intlInlineMode_reportable:hover {
+  background-color: #fcc;
+  border-top: 1px solid #ccc;
+  cursor: help;
+}
+
+.hover\:tw-cursor-pointer:hover {
+  cursor: pointer;
+}
+
+.hover\:tw-cursor-help:hover {
+  cursor: help;
+}
+
+.hover\:tw-bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
+.focus\:\!tw-border-blue-500:focus {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity)) !important;
+}
+
+.focus\:tw-outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:tw-ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:\!tw-ring-blue-500:focus {
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)) !important;
+}
+
+.focus\:tw-ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
+.focus\:tw-ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+.tw-dark .dark\:tw-divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-divide-opacity));
+}
+
+.tw-dark .dark\:tw-border-gray-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-border-opacity));
+}
+
+.tw-dark .dark\:tw-bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.tw-dark .dark\:tw-bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.tw-dark .dark\:tw-text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.tw-dark .dark\:tw-text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.tw-dark .dark\:tw-text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.tw-dark .dark\:tw-text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+@media (min-width: 640px) {
+  .sm\:tw-mt-5 {
+    margin-top: 1.25rem;
+  }
+
+  .sm\:tw-text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}

package/lib/App.d.ts

@@ -3,8 +3,8 @@ import { Translation } from './@types/Translation';
 import 'rodal/lib/rodal.css';
 import 'typeface-roboto';
 import './App.css';
-declare type Props = {};
-declare type State = {
+type Props = {};
+type State = {
     visible: boolean;
     translation: Translation | null;
     hash: string | null;

package/lib/TranslationDialog.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Translation } from './@types/Translation';
+import './rodal.css';
+import 'typeface-roboto';
+import './App.css';
+type Props = {};
+type State = {
+    visible: boolean;
+    translation: Translation | null;
+    hash: string | null;
+    locale: string | null;
+};
+declare class TranslationDialog extends React.Component<Props, State> {
+    constructor(props: Props);
+    componentDidMount(): void;
+    openTranslationDialog(event: MouseEvent): void;
+    hide(): void;
+    render(): JSX.Element;
+}
+export default TranslationDialog;

package/lib/TranslationDialog.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import TranslationCard from './components/TranslationCard';
+import './rodal.css';
+import 'typeface-roboto';
+import './App.css';
+import Rodal from './components/Rodal';
+class TranslationDialog extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            visible: false,
+            translation: null,
+            hash: null,
+            locale: null,
+        };
+        this.hide = this.hide.bind(this);
+    }
+    componentDidMount() {
+        document.addEventListener('contextmenu', this.openTranslationDialog.bind(this));
+    }
+    openTranslationDialog(event) {
+        let parent = event.target;
+        while (parent) {
+            if (parent.classList.contains('intlInlineMode_normal') ||
+                parent.classList.contains('intlInlineMode_translatable') ||
+                parent.classList.contains('intlInlineMode_approvable') ||
+                parent.classList.contains('intlInlineMode_reportable')) {
+                const hash = parent.getAttribute('data-intl-hash');
+                const locale = parent.getAttribute('data-intl-locale');
+                this.setState({
+                    visible: true,
+                    hash,
+                    locale,
+                });
+                event.preventDefault();
+                return;
+            }
+            parent = parent.parentElement;
+        }
+    }
+    hide() {
+        this.setState({ visible: false });
+    }
+    render() {
+        const { hash } = this.state;
+        const { children } = this.props;
+        return (_jsxs(_Fragment, { children: [children, _jsx(Rodal, { customStyles: {
+                        height: 'auto',
+                        bottom: 'auto',
+                        top: 'auto',
+                    }, closeMaskOnClick: false, className: "tw-flex tw-items-center tw-overflow-auto", enterAnimation: " rodal-zoom-enter dark:tw-bg-gray-800 " // ugly hack
+                    , leaveAnimation: " rodal-fade-leave dark:tw-bg-gray-800 " // ugly hack
+                    , visible: this.state.visible, onClose: this.hide, children: _jsx(TranslationCard, { hash: hash, visible: this.state.visible, hide: this.hide }, hash) })] }));
+    }
+}
+export default TranslationDialog;

package/lib/components/Candidate.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Translation } from '../@types/Translation';
-declare type Props = {
+type Props = {
     candidate: Translation;
     onClick: (translation: string) => void;
     onVote: (id: number) => void;

package/lib/components/Composer.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
-declare type Props = {
+import { Term } from '../@types/Phrase';
+type Props = {
     hash: string;
+    glossary: Term[];
     translation: string | undefined;
     language: string;
     error: string | null;
@@ -9,5 +11,5 @@ declare type Props = {
     setTranslation: (translation: string) => void;
     onSubmit: (translation: string, hash: string) => void;
 };
-export default function Composer({ hash, translation, language, error, loading, hide, setTranslation, onSubmit, }: Props): JSX.Element;
+export default function Composer({ hash, glossary, translation, language, error, loading, hide, setTranslation, onSubmit, }: Props): JSX.Element;
 export {};