@translatehub/react 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,77 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
+import { TranslateHubConfig } from '@translatehub/core';
+
+interface TranslationContextValue {
+    /** Текущий язык */
+    lang: string;
+    /** Сменить язык */
+    setLang: (lang: string) => void;
+    /** Получить перевод по ключу с опциональной интерполяцией */
+    t: (key: string, params?: Record<string, string | number>) => string;
+    /** true пока переводы грузятся */
+    loading: boolean;
+    /** Ошибка загрузки (если есть) */
+    error: Error | null;
+}
+interface TranslationProviderProps extends TranslateHubConfig {
+    /** Язык по умолчанию */
+    defaultLang: string;
+    /** Список доступных языков (для LanguageSwitcher) */
+    languages?: string[];
+    /** Показывать ключ вместо пустой строки при отсутствии перевода */
+    fallbackToKey?: boolean;
+    children: ReactNode;
+}
+declare function TranslationProvider({ children, defaultLang, fallbackToKey, ...clientConfig }: TranslationProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Основной хук для доступа к переводам.
+ *
+ * @example
+ * const { t, lang, setLang } = useTranslation();
+ * return <h1>{t('page.title')}</h1>;
+ */
+declare function useTranslation(): TranslationContextValue;
+interface TProps {
+    /** Ключ перевода */
+    k: string;
+    /** Параметры интерполяции: {name}, {count} и т.д. */
+    params?: Record<string, string | number>;
+}
+/**
+ * Декларативный компонент перевода.
+ *
+ * @example
+ * <T k="cart.empty.message" />
+ * <T k="greeting" params={{ name: 'Артём' }} />
+ */
+declare function T({ k, params }: TProps): React.ReactElement;
+interface LanguageSwitcherProps {
+    /** Список языков для отображения */
+    languages: string[];
+    /** CSS-класс обёртки */
+    className?: string;
+}
+/**
+ * Готовый переключатель языка — рендерит кнопки/ссылки для смены локали.
+ *
+ * @example
+ * <LanguageSwitcher languages={['ru', 'en', 'de']} />
+ */
+declare function LanguageSwitcher({ languages, className }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element;
+/**
+ * HOC для class-компонентов (альтернатива хуку).
+ *
+ * @example
+ * class MyComponent extends React.Component<WithTranslationProps> {
+ *   render() { return <div>{this.props.t('key')}</div>; }
+ * }
+ * export default withTranslation(MyComponent);
+ */
+interface WithTranslationProps {
+    t: (key: string, params?: Record<string, string | number>) => string;
+    lang: string;
+}
+declare function withTranslation<P extends WithTranslationProps>(Component: React.ComponentType<P>): (props: Omit<P, keyof WithTranslationProps>) => react_jsx_runtime.JSX.Element;
+
+export { LanguageSwitcher, type LanguageSwitcherProps, T, type TProps, TranslationProvider, type TranslationProviderProps, type WithTranslationProps, useTranslation, withTranslation };

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
+import { TranslateHubConfig } from '@translatehub/core';
+
+interface TranslationContextValue {
+    /** Текущий язык */
+    lang: string;
+    /** Сменить язык */
+    setLang: (lang: string) => void;
+    /** Получить перевод по ключу с опциональной интерполяцией */
+    t: (key: string, params?: Record<string, string | number>) => string;
+    /** true пока переводы грузятся */
+    loading: boolean;
+    /** Ошибка загрузки (если есть) */
+    error: Error | null;
+}
+interface TranslationProviderProps extends TranslateHubConfig {
+    /** Язык по умолчанию */
+    defaultLang: string;
+    /** Список доступных языков (для LanguageSwitcher) */
+    languages?: string[];
+    /** Показывать ключ вместо пустой строки при отсутствии перевода */
+    fallbackToKey?: boolean;
+    children: ReactNode;
+}
+declare function TranslationProvider({ children, defaultLang, fallbackToKey, ...clientConfig }: TranslationProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Основной хук для доступа к переводам.
+ *
+ * @example
+ * const { t, lang, setLang } = useTranslation();
+ * return <h1>{t('page.title')}</h1>;
+ */
+declare function useTranslation(): TranslationContextValue;
+interface TProps {
+    /** Ключ перевода */
+    k: string;
+    /** Параметры интерполяции: {name}, {count} и т.д. */
+    params?: Record<string, string | number>;
+}
+/**
+ * Декларативный компонент перевода.
+ *
+ * @example
+ * <T k="cart.empty.message" />
+ * <T k="greeting" params={{ name: 'Артём' }} />
+ */
+declare function T({ k, params }: TProps): React.ReactElement;
+interface LanguageSwitcherProps {
+    /** Список языков для отображения */
+    languages: string[];
+    /** CSS-класс обёртки */
+    className?: string;
+}
+/**
+ * Готовый переключатель языка — рендерит кнопки/ссылки для смены локали.
+ *
+ * @example
+ * <LanguageSwitcher languages={['ru', 'en', 'de']} />
+ */
+declare function LanguageSwitcher({ languages, className }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element;
+/**
+ * HOC для class-компонентов (альтернатива хуку).
+ *
+ * @example
+ * class MyComponent extends React.Component<WithTranslationProps> {
+ *   render() { return <div>{this.props.t('key')}</div>; }
+ * }
+ * export default withTranslation(MyComponent);
+ */
+interface WithTranslationProps {
+    t: (key: string, params?: Record<string, string | number>) => string;
+    lang: string;
+}
+declare function withTranslation<P extends WithTranslationProps>(Component: React.ComponentType<P>): (props: Omit<P, keyof WithTranslationProps>) => react_jsx_runtime.JSX.Element;
+
+export { LanguageSwitcher, type LanguageSwitcherProps, T, type TProps, TranslationProvider, type TranslationProviderProps, type WithTranslationProps, useTranslation, withTranslation };

package/dist/index.js

@@ -0,0 +1,134 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  LanguageSwitcher: () => LanguageSwitcher,
+  T: () => T,
+  TranslationProvider: () => TranslationProvider,
+  useTranslation: () => useTranslation,
+  withTranslation: () => withTranslation
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_core = require("@translatehub/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TranslationContext = (0, import_react.createContext)(null);
+function TranslationProvider({
+  children,
+  defaultLang,
+  fallbackToKey = true,
+  ...clientConfig
+}) {
+  const [client] = (0, import_react.useState)(() => new import_core.TranslateHubClient(clientConfig));
+  const [lang, setLangState] = (0, import_react.useState)(defaultLang);
+  const [translations, setTranslations] = (0, import_react.useState)({});
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [error, setError] = (0, import_react.useState)(null);
+  const loadLang = (0, import_react.useCallback)(
+    async (targetLang) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const data = await client.getTranslations(targetLang);
+        setTranslations(data);
+      } catch (e) {
+        setError(e instanceof Error ? e : new Error(String(e)));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client]
+  );
+  (0, import_react.useEffect)(() => {
+    loadLang(lang);
+  }, [lang, loadLang]);
+  const setLang = (0, import_react.useCallback)(
+    (newLang) => {
+      setLangState(newLang);
+    },
+    []
+  );
+  const t = (0, import_react.useCallback)(
+    (key, params) => {
+      const value = translations[key];
+      if (value === void 0) return fallbackToKey ? key : "";
+      return params ? (0, import_core.interpolate)(value, params) : value;
+    },
+    [translations, fallbackToKey]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TranslationContext.Provider, { value: { lang, setLang, t, loading, error }, children });
+}
+function useTranslation() {
+  const ctx = (0, import_react.useContext)(TranslationContext);
+  if (!ctx) {
+    throw new Error("useTranslation must be used inside <TranslationProvider>");
+  }
+  return ctx;
+}
+function T({ k, params }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: t(k, params) });
+}
+var LANG_LABELS = {
+  ru: "\u0420\u0443\u0441\u0441\u043A\u0438\u0439",
+  en: "English",
+  de: "Deutsch",
+  fr: "Fran\xE7ais",
+  es: "Espa\xF1ol",
+  zh: "\u4E2D\u6587",
+  ja: "\u65E5\u672C\u8A9E",
+  ar: "\u0627\u0644\u0639\u0631\u0628\u064A\u0629"
+};
+function LanguageSwitcher({ languages, className }) {
+  const { lang, setLang } = useTranslation();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: { display: "flex", gap: "8px" }, children: languages.map((l) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      onClick: () => setLang(l),
+      disabled: l === lang,
+      style: {
+        padding: "4px 10px",
+        borderRadius: "6px",
+        border: "1px solid #DEE2E6",
+        background: l === lang ? "#2D6ADF" : "#fff",
+        color: l === lang ? "#fff" : "#212529",
+        cursor: l === lang ? "default" : "pointer",
+        fontWeight: l === lang ? 600 : 400
+      },
+      children: LANG_LABELS[l] ?? l.toUpperCase()
+    },
+    l
+  )) });
+}
+function withTranslation(Component) {
+  return function WrappedComponent(props) {
+    const { t, lang } = useTranslation();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, t, lang });
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LanguageSwitcher,
+  T,
+  TranslationProvider,
+  useTranslation,
+  withTranslation
+});

package/dist/index.mjs

@@ -0,0 +1,111 @@
+// src/index.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState
+} from "react";
+import { TranslateHubClient, interpolate } from "@translatehub/core";
+import { Fragment, jsx } from "react/jsx-runtime";
+var TranslationContext = createContext(null);
+function TranslationProvider({
+  children,
+  defaultLang,
+  fallbackToKey = true,
+  ...clientConfig
+}) {
+  const [client] = useState(() => new TranslateHubClient(clientConfig));
+  const [lang, setLangState] = useState(defaultLang);
+  const [translations, setTranslations] = useState({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const loadLang = useCallback(
+    async (targetLang) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const data = await client.getTranslations(targetLang);
+        setTranslations(data);
+      } catch (e) {
+        setError(e instanceof Error ? e : new Error(String(e)));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client]
+  );
+  useEffect(() => {
+    loadLang(lang);
+  }, [lang, loadLang]);
+  const setLang = useCallback(
+    (newLang) => {
+      setLangState(newLang);
+    },
+    []
+  );
+  const t = useCallback(
+    (key, params) => {
+      const value = translations[key];
+      if (value === void 0) return fallbackToKey ? key : "";
+      return params ? interpolate(value, params) : value;
+    },
+    [translations, fallbackToKey]
+  );
+  return /* @__PURE__ */ jsx(TranslationContext.Provider, { value: { lang, setLang, t, loading, error }, children });
+}
+function useTranslation() {
+  const ctx = useContext(TranslationContext);
+  if (!ctx) {
+    throw new Error("useTranslation must be used inside <TranslationProvider>");
+  }
+  return ctx;
+}
+function T({ k, params }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(Fragment, { children: t(k, params) });
+}
+var LANG_LABELS = {
+  ru: "\u0420\u0443\u0441\u0441\u043A\u0438\u0439",
+  en: "English",
+  de: "Deutsch",
+  fr: "Fran\xE7ais",
+  es: "Espa\xF1ol",
+  zh: "\u4E2D\u6587",
+  ja: "\u65E5\u672C\u8A9E",
+  ar: "\u0627\u0644\u0639\u0631\u0628\u064A\u0629"
+};
+function LanguageSwitcher({ languages, className }) {
+  const { lang, setLang } = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className, style: { display: "flex", gap: "8px" }, children: languages.map((l) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => setLang(l),
+      disabled: l === lang,
+      style: {
+        padding: "4px 10px",
+        borderRadius: "6px",
+        border: "1px solid #DEE2E6",
+        background: l === lang ? "#2D6ADF" : "#fff",
+        color: l === lang ? "#fff" : "#212529",
+        cursor: l === lang ? "default" : "pointer",
+        fontWeight: l === lang ? 600 : 400
+      },
+      children: LANG_LABELS[l] ?? l.toUpperCase()
+    },
+    l
+  )) });
+}
+function withTranslation(Component) {
+  return function WrappedComponent(props) {
+    const { t, lang } = useTranslation();
+    return /* @__PURE__ */ jsx(Component, { ...props, t, lang });
+  };
+}
+export {
+  LanguageSwitcher,
+  T,
+  TranslationProvider,
+  useTranslation,
+  withTranslation
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@translatehub/react",
+  "version": "1.0.0",
+  "description": "React components and hooks for TranslateHub localization",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "dependencies": {
+    "@translatehub/core": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.2"
+  },
+  "keywords": ["react", "i18n", "localization", "translatehub"],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/artemryskal/translate-hub.git",
+    "directory": "sdk/react"
+  },
+  "homepage": "https://translate-hub.ru"
+}