fbt-inline-translations 0.2.0 → 0.3.1

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (C) 2022 Swiftyper (https://swiftyper.sk)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -1,4 +1,4 @@
-# 👽 Inline translations for FBT
+# 👽 Inline Translations for FBT
 
 The extension serves to effectively translate your application using inline translations so that you can view strings you are
 translating in context.
@@ -6,29 +6,45 @@ If you right-click on the underlined string, the translation dialog appears and
 
 You can make translations available to your translators, users, or the entire community and make your product multilingual.
 
-**Translations can also be approved by your trusted translator(s).**
+❇️ **Translations can also be approved by your trusted translator(s).**
+
+## 👀 Preview
 
 ![Demo of FBT inline translating](https://raw.githubusercontent.com/swiftyper-sk/fbt-inline-translations/main/images/demo.gif)
 
 
-## ℹ️ Usage notes
+## ℹ️ Prerequisites
 
-- this library requires FBT for PHP:
+This library requires one of the following FBT frameworks:
   - [FBT for Laravel (v5.5+)](https://github.com/richardDobron/laravel-fbt)
   - [FBT for PHP (v7.0+)](https://github.com/richardDobron/fbt)
+  - [FBT for JavaScript](https://github.com/facebook/fbt)
+  - [FBTee for JavaScript](https://github.com/nkzw-tech/fbtee)
 
-## 📦 Installing
+## ✨ Key Features
 
-```
+- 📝 **Inline**: translating for real-time context
+- 📚 **Glossary**: support for consistent terminology
+- 👍 **Voting**: on translation options
+- 🔄 **Variations**: for dynamic content
+- 🌙 **Dark Mode**: to match your theme
+
+## 📦 Installation
+
+⚠️ **React 15 or higher is required.**
+
+Install the plugin using npm or yarn:
+
+```bash
 npm install fbt-inline-translations
+# or
+yarn add fbt-inline-translations
 ```
 
-### How to add polyfills in Webpack 5
+### 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
@@ -63,29 +79,75 @@ module.exports = {
 
 and
 
-```cmd
+```shell
 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. 
+Restart the Dev Server and the error will be gone.
+
+## Instructions for JavaScript Version of FBT Package
+
+Copy file [fbt/InlineFbtResult.js](fbt/InlineFbtResult.js) to your project.
+
+Register custom `getFbtResult` hook:
+
+```javascript
+import { init } from "fbt";
+import FbtResult from "fbt/lib/FbtResult";
+import InlineFbtResult from "./InlineFbtResult";
+
+let inlineMode = 'NO_INLINE';
+
+if (true) { // enable inline translations
+    inlineMode = 'TRANSLATION';
+}
+
+init({
+  hooks: {
+    // ...
+    getFbtResult: (input) => {
+      if (inlineMode && inlineMode !== 'NO_INLINE') {
+        return new InlineFbtResult(
+          input.contents,
+          inlineMode,
+          input.patternString,
+          input.patternHash,
+        );
+      }
+
+      return new FbtResult(input.contents, input.errorListener);
+    },
+  },
+  // ...
+});
+```
 
 ## 🔧 Configuration
 
-Register your FBT project on [Swiftyper Translations](https://translations.swiftyper.sk)
+Register your FBT project on [Swiftyper Translations](https://translations.swiftyper.sk).
 
 
-### Non-React usage
+| **Option**    | **Type** | **Description**                                           |
+|---------------|----------|-----------------------------------------------------------|
+| `apiKey`      | string   | API key for authenticating with the translation service.  |
+| `locale`      | string   | Locale setting for translations (e.g., `en_US`, `de_DE`). |
+| `contributor` | string   | Contributor email for authentication.                     |
+| `darkMode`    | boolean  | Dark mode theme.                                          |
 
-Add this code to your page:
+## ⚡️ Quick Start
+
+### Non-React Usage
+
+Include the following code snippet in your HTML page:
 
 ```html
 <div id="inline-translator"></div>
 
 <script src="https://cdn.jsdelivr.net/npm/fbt-inline-translations/dist/bundle.js"></script>
 <script>
-    swiftyperInlineTranslations({
+    swiftyperInlineTranslations.default({
         token: 'YOUR_API_KEY_HERE',
         locale: 'sk_SK', // translation locale
         contributor: 'contributor@email.com', // contributor must be invited
@@ -94,11 +156,11 @@ Add this code to your page:
 </script>
 ```
 
-### React usage
+### React Usage
 
 In your application, wrap your `App` component. We recommend adding it around your root component in the `index.js` file.
 
-```js
+```javascript
 // src/index.js
 
 import ReactDOM from 'react-dom';
@@ -115,4 +177,18 @@ ReactDOM.render(
   </FbtInlineTranslationsWrapper>,
   document.getElementById('root')
 );
-```
+```
+
+## 🧪 Testing
+
+```bash
+npm run start
+```
+
+## 🌟 Contributing
+
+We welcome contributions! If you'd like to help improve this project, feel free to open an issue or submit a pull request.
+
+## 📜 License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.