@uxf/core-react 11.72.3 → 11.74.1

package/README.md

@@ -7,7 +7,7 @@
 
 Conditionally hide some jsx content.
 ```tsx
-const { Hide } from "@uxf/core-react/components/hide";
+import { Hide } from "@uxf/core-react/components/hide";
 
 <Hide when={SOME_CONDITION}>
     ...some content
@@ -18,7 +18,7 @@ const { Hide } from "@uxf/core-react/components/hide";
 
 Conditionally show some jsx content.
 ```tsx
-const { Show } from "@uxf/core-react/components/show";
+import { Show } from "@uxf/core-react/components/show";
 
 <Show when={SOME_CONDITION}>
     ...some content
@@ -31,7 +31,7 @@ Polyfill for custom css variable `--viewport-height` to mimic functionality of b
 
 Add component to react app root (eg. `_app.tsx`).
 ```tsx
-const { ViewportHeightPolyfill } from "@uxf/core-react/components/viewport-height-polyfill";
+import { ViewportHeightPolyfill } from "@uxf/core-react/components/viewport-height-polyfill";
 
 <ViewportHeightPolyfill />
 ```
@@ -394,3 +394,73 @@ import { twScreens } from "@generated/tw-tokens/tw-screens";
 
 const isDesktop = useMediaQuery(`(min-width: ${twScreens.sm})`);
 ```
+
+## Translations
+
+Provides a translation system that can be used in both single-language and multi-language projects.
+
+### Single-language projects
+
+For single-language projects, use the `TranslationsProvider` context and `createDefaultT` function to provide translations for the packages you use:
+
+```tsx
+import { TranslationsProvider } from "@uxf/core-react/translations";
+import { createDefaultT } from "@uxf/core-react/translations/create-default-t";
+
+// Import translations for packages you use
+import uiTranslations from "@uxf/ui/translations/cs.json";
+import formTranslations from "@uxf/form/translations/cs.json";
+
+// Create a translation function for your language
+const t = createDefaultT({
+    ...uiTranslations,
+    ...formTranslations
+});
+
+// Provide the translation function to your app
+function App() {
+  return (
+    <TranslationsProvider value={t}>
+      {/* Your app content */}
+    </TranslationsProvider>
+  );
+}
+```
+
+### Multi-language projects
+
+For multi-language projects, use the `TranslationsProvider` context with a translation function from your preferred translation library (e.g., next-translate):
+
+```tsx
+import { TranslationsProvider } from "@uxf/core-react/translations";
+import useTranslation from "next-translate/useTranslation"; // Or any other translation library
+
+function App() {
+  // Get the translation function from your translation library
+  const { t } = useTranslation();
+
+  return (
+    <TranslationsProvider value={t}>
+      {/* Your app content */}
+    </TranslationsProvider>
+  );
+}
+```
+
+### Using translations in components
+
+To use translations in your components, use the `useUxfTranslation` hook:
+
+```tsx
+import { useUxfTranslation } from "@uxf/core-react/translations";
+
+function MyComponent() {
+  const t = useUxfTranslation();
+
+  return (
+    <div>
+      {t("form:validation.required")}
+    </div>
+  );
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/core-react",
-    "version": "11.72.3",
+    "version": "11.74.1",
     "description": "UXF Core",
     "author": "UX Fans s.r.o",
     "license": "MIT",

package/translations/create-default-t.d.ts

@@ -0,0 +1,2 @@
+import type { TranslationFunction } from "./types";
+export declare function createDefaultT(translationObject: Record<string, any>): TranslationFunction;

package/translations/create-default-t.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDefaultT = createDefaultT;
+const replace_variables_1 = require("./replace-variables");
+const resolve_plural_key_1 = require("./resolve-plural-key");
+function createDefaultT(translationObject) {
+    return function (key, options) {
+        const pckg = key.split(":");
+        const path = pckg[1].split(".");
+        let translation = key;
+        try {
+            // eslint-disable-next-line
+            // @ts-ignore
+            translation = path.reduce((acc, k) => acc[k], translationObject[pckg[0]]);
+            if (options) {
+                const pluralKey = (0, resolve_plural_key_1.resolvePluralKey)(options.count);
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (pluralKey && typeof translation === "object" && translation[pluralKey]) {
+                    translation = translation[pluralKey];
+                }
+                translation = (0, replace_variables_1.replaceVariables)(translation, options);
+            }
+        }
+        catch {
+            // eslint-disable-next-line no-console
+            console.warn(`Can't find translation for key: "${key}"`);
+        }
+        return translation;
+    };
+}

package/translations/create-dev-t.d.ts

@@ -0,0 +1,2 @@
+import type { SupportedLanguages, TranslationFunction } from "./types";
+export declare function createDevT(locale: SupportedLanguages, translationObject: Record<string, any>): TranslationFunction;

package/translations/create-dev-t.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDevT = createDevT;
+const replace_variables_1 = require("./replace-variables");
+const resolve_plural_key_1 = require("./resolve-plural-key");
+function createDevT(locale, translationObject) {
+    return function (key, options) {
+        const pckg = key.split(":");
+        const path = pckg[1].split(".");
+        // eslint-disable-next-line
+        // @ts-ignore
+        let translation = path.reduce((acc, k) => acc[k], translationObject[pckg[0]])[locale];
+        if (options) {
+            const pluralKey = (0, resolve_plural_key_1.resolvePluralKey)(options.count);
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if (pluralKey && typeof translation === "object" && translation[pluralKey]) {
+                translation = translation[pluralKey];
+            }
+            translation = (0, replace_variables_1.replaceVariables)(translation, options);
+        }
+        return translation;
+    };
+}

package/translations/index.d.ts

@@ -0,0 +1,2 @@
+export declare const TranslationsProvider: import("react").Provider<import("./types").TranslationFunction>;
+export declare function useUxfTranslation(): import("./types").TranslationFunction;

package/translations/index.js

@@ -0,0 +1,11 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TranslationsProvider = void 0;
+exports.useUxfTranslation = useUxfTranslation;
+const react_1 = require("react");
+const translationsContext = (0, react_1.createContext)((key) => key);
+exports.TranslationsProvider = translationsContext.Provider;
+function useUxfTranslation() {
+    return (0, react_1.useContext)(translationsContext);
+}

package/translations/replace-variables.d.ts

@@ -0,0 +1 @@
+export declare function replaceVariables(translation: string, options: Record<string, any>): string;

package/translations/replace-variables.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceVariables = replaceVariables;
+function replaceVariables(translation, options) {
+    return Object.keys(options).reduce((result, variable) => result.replace(new RegExp(`{{${variable}}}`, "g"), options[variable]), translation);
+}

package/translations/resolve-plural-key.d.ts

@@ -0,0 +1,2 @@
+import type { SupportedPluralKeywords } from "./types";
+export declare function resolvePluralKey(count: number | undefined): SupportedPluralKeywords | null;

package/translations/resolve-plural-key.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolvePluralKey = resolvePluralKey;
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+function resolvePluralKey(count) {
+    if ((0, is_nil_1.isNil)(count)) {
+        return null;
+    }
+    if (count === 0) {
+        return "zero";
+    }
+    if (count === 1) {
+        return "one";
+    }
+    if (count <= 4) {
+        return "few";
+    }
+    return "many";
+}

package/translations/types.d.ts

@@ -0,0 +1,4 @@
+export type SupportedLanguages = "cs" | "sk" | "en" | "de";
+export type SupportedPluralKeywords = "0" | "zero" | "one" | "few" | "many" | "other";
+export type TranslationFunction = (key: string, options?: Record<string, any>) => string;
+export type TranslationsContextValue = TranslationFunction;

package/translations/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });