@justanarthur/payload-plugin-translator 1.3.20 → 3.0.3

package/dist/client.js

@@ -0,0 +1,320 @@
+"use client";
+// src/client/components/CustomButton/CustomButtonWithTranslator.tsx
+import { PublishButton, SaveButton, useConfig as useConfig2, useDocumentInfo as useDocumentInfo2 } from "@payloadcms/ui";
+
+// src/client/providers/Translator/TranslatorProvider.tsx
+import {
+  toast,
+  useAllFormFields,
+  useConfig,
+  useDocumentInfo,
+  useForm,
+  useLocale,
+  useModal,
+  useServerFunctions,
+  useTranslation
+} from "@payloadcms/ui";
+import { reduceFieldsToValues } from "payload/shared";
+import { useEffect, useMemo, useState } from "react";
+
+// src/client/api/index.ts
+var createClient = ({ api, serverURL }) => {
+  const translate = async (args) => {
+    try {
+      const response = await fetch(`${serverURL}${api}/translator/translate`, {
+        body: JSON.stringify(args),
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        method: "POST"
+      });
+      if (!response.ok)
+        return { success: false };
+      return response.json();
+    } catch (e) {
+      if (e instanceof Error)
+        console.error(e.message);
+      return { success: false };
+    }
+  };
+  return {
+    translate
+  };
+};
+
+// src/client/providers/Translator/context.ts
+import { createContext, useContext } from "react";
+var TranslatorContext = createContext(null);
+var useTranslator = () => {
+  const context = useContext(TranslatorContext);
+  if (context === null)
+    throw new Error("useTranslator must be used within TranslatorProvider");
+  return context;
+};
+
+// src/client/providers/Translator/TranslatorProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var modalSlug = "translator-modal";
+var TranslatorProvider = ({ children }) => {
+  const [resolver, setResolver] = useState(null);
+  const [data, dispatch] = useAllFormFields();
+  const { getFormState } = useServerFunctions();
+  const { collectionSlug, getDocPreferences, globalSlug, id } = useDocumentInfo();
+  const { setModified } = useForm();
+  const modal = useModal();
+  const { t } = useTranslation();
+  const resolverT = (key) => {
+    if (!resolver)
+      return "";
+    return t(`plugin-translator:resolver_${resolver}_${key}`);
+  };
+  const locale = useLocale();
+  const {
+    config: {
+      admin: { custom },
+      localization,
+      routes: { api },
+      serverURL
+    }
+  } = useConfig();
+  const apiClient = createClient({ api, serverURL });
+  const resolverConfig = useMemo(() => {
+    if (!resolver)
+      return null;
+    const resolvers = custom?.translator?.resolvers || undefined;
+    if (!resolvers)
+      return null;
+    const resolverConfig2 = resolvers.find((each) => each.key === resolver);
+    return resolverConfig2 ?? null;
+  }, [custom, resolver]);
+  if (!localization)
+    throw new Error("Localization config is not provided and PluginTranslator is used");
+  const localesOptions = localization.locales.filter((each) => each.code !== locale.code);
+  const [localeToTranslateFrom, setLocaleToTranslateFrom] = useState("");
+  useEffect(() => {
+    const defaultFromOptions = localesOptions.find((each) => localization.defaultLocale === each.code);
+    if (defaultFromOptions)
+      setLocaleToTranslateFrom(defaultFromOptions.code);
+    setLocaleToTranslateFrom(localesOptions[0].code);
+  }, [locale, localesOptions, localization.defaultLocale]);
+  const closeTranslator = () => modal.closeModal(modalSlug);
+  const submit = async ({ emptyOnly }) => {
+    if (!resolver)
+      return;
+    const args = {
+      collectionSlug,
+      data: reduceFieldsToValues(data, true),
+      emptyOnly,
+      globalSlug,
+      id: id === null ? undefined : id,
+      locale: locale.code,
+      localeFrom: localeToTranslateFrom,
+      resolver
+    };
+    const result = await apiClient.translate(args);
+    if (!result.success) {
+      toast.error(resolverT("errorMessage"));
+      return;
+    }
+    const { state } = await getFormState({
+      collectionSlug,
+      data: result.translatedData,
+      docPermissions: {
+        fields: true,
+        update: true
+      },
+      docPreferences: await getDocPreferences(),
+      globalSlug,
+      locale: locale.code,
+      operation: "update",
+      renderAllFields: true,
+      schemaPath: collectionSlug || globalSlug || ""
+    });
+    if (state) {
+      dispatch({
+        state,
+        type: "REPLACE_STATE"
+      });
+      setModified(true);
+      toast.success(resolverT("successMessage"));
+    }
+    closeTranslator();
+  };
+  return /* @__PURE__ */ jsx(TranslatorContext.Provider, {
+    value: {
+      closeTranslator,
+      localeToTranslateFrom,
+      localesOptions,
+      modalSlug,
+      openTranslator: ({ resolverKey }) => {
+        setResolver(resolverKey);
+        modal.openModal(modalSlug);
+      },
+      resolver: resolverConfig,
+      resolverT,
+      setLocaleToTranslateFrom,
+      submit
+    },
+    children
+  });
+};
+
+// src/client/components/ResolverButton/ResolverButton.tsx
+import { Button, useTranslation as useTranslation2 } from "@payloadcms/ui";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ResolverButton = ({
+  resolver: { key: resolverKey }
+}) => {
+  const { openTranslator } = useTranslator();
+  const { t } = useTranslation2();
+  const handleClick = () => openTranslator({ resolverKey });
+  return /* @__PURE__ */ jsx2(Button, {
+    onClick: handleClick,
+    children: t(`plugin-translator:resolver_${resolverKey}_buttonLabel`)
+  });
+};
+// src/client/components/TranslatorModal/TranslatorModal.tsx
+import { Modal } from "@payloadcms/ui";
+
+// src/client/components/TranslatorModal/Content.tsx
+import { getTranslation as getTranslation2 } from "@payloadcms/translations";
+import { Button as Button2, Popup, PopupList, useTranslation as useTranslation4 } from "@payloadcms/ui";
+
+// src/client/components/LocaleLabel/LocaleLabel.tsx
+import { getTranslation } from "@payloadcms/translations";
+import { ChevronIcon, useTranslation as useTranslation3 } from "@payloadcms/ui";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var baseClass = "localizer-button";
+var LocaleLabel = ({ locale }) => {
+  const { i18n, t } = useTranslation3();
+  return /* @__PURE__ */ jsxs("div", {
+    "aria-label": t("general:locale"),
+    className: baseClass,
+    children: [
+      /* @__PURE__ */ jsx3("div", {
+        className: `${baseClass}__label`,
+        children: `${t("general:locale")}:`
+      }),
+      "  ",
+      /* @__PURE__ */ jsx3("span", {
+        className: `${baseClass}__current-label`,
+        children: `${getTranslation(locale.label, i18n)}`
+      }),
+      " ",
+      /* @__PURE__ */ jsx3(ChevronIcon, {
+        className: `${baseClass}__chevron`
+      })
+    ]
+  });
+};
+// src/client/components/TranslatorModal/Content.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Content = () => {
+  const {
+    localeToTranslateFrom: localeCodeToTranslateFrom,
+    localesOptions,
+    resolverT,
+    setLocaleToTranslateFrom,
+    submit
+  } = useTranslator();
+  const { i18n } = useTranslation4();
+  const localeToTranslateFrom = localesOptions.find((each) => each.code === localeCodeToTranslateFrom);
+  return /* @__PURE__ */ jsxs2("div", {
+    className: "translator__content",
+    children: [
+      /* @__PURE__ */ jsx4("h2", {
+        children: resolverT("modalTitle")
+      }),
+      localeToTranslateFrom && /* @__PURE__ */ jsx4(Popup, {
+        button: /* @__PURE__ */ jsx4(LocaleLabel, {
+          locale: localeToTranslateFrom
+        }),
+        horizontalAlign: "center",
+        render: ({ close }) => /* @__PURE__ */ jsx4(PopupList.ButtonGroup, {
+          children: localesOptions.map((option) => {
+            const label = getTranslation2(option.label, i18n);
+            return /* @__PURE__ */ jsxs2(PopupList.Button, {
+              active: option.code === localeCodeToTranslateFrom,
+              onClick: () => {
+                setLocaleToTranslateFrom(option.code);
+                close();
+              },
+              children: [
+                label,
+                label !== option.code && ` (${option.code})`
+              ]
+            }, option.code);
+          })
+        }),
+        verticalAlign: "bottom"
+      }),
+      /* @__PURE__ */ jsxs2("div", {
+        className: "translator__buttons",
+        children: [
+          /* @__PURE__ */ jsx4(Button2, {
+            onClick: () => submit({ emptyOnly: false }),
+            children: resolverT("submitButtonLabelFull")
+          }),
+          /* @__PURE__ */ jsx4(Button2, {
+            onClick: () => submit({ emptyOnly: true }),
+            children: resolverT("submitButtonLabelEmpty")
+          })
+        ]
+      })
+    ]
+  });
+};
+
+// src/client/components/TranslatorModal/TranslatorModal.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var TranslatorModal = () => {
+  const { closeTranslator, modalSlug: modalSlug2, resolver } = useTranslator();
+  if (!resolver)
+    return;
+  return /* @__PURE__ */ jsx5(Modal, {
+    className: "translator__modal",
+    slug: modalSlug2,
+    children: /* @__PURE__ */ jsxs3("div", {
+      className: "translator__wrapper",
+      children: [
+        /* @__PURE__ */ jsx5("button", {
+          "aria-label": "Close",
+          className: "translator__close",
+          onClick: closeTranslator
+        }),
+        /* @__PURE__ */ jsx5(Content, {})
+      ]
+    })
+  });
+};
+// src/client/components/CustomButton/CustomButtonWithTranslator.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+
+var CustomButtonWithTranslator = ({ type }) => {
+  const { config } = useConfig2();
+  const DefaultButton = type === "publish" ? PublishButton : SaveButton;
+  const { globalSlug, id } = useDocumentInfo2();
+  const resolvers = config.admin?.custom?.translator?.resolvers ?? [];
+  if (!id && !globalSlug)
+    return /* @__PURE__ */ jsx6(DefaultButton, {});
+  return /* @__PURE__ */ jsx6(TranslatorProvider, {
+    children: /* @__PURE__ */ jsxs4("div", {
+      className: "translator__custom-save-button",
+      children: [
+        /* @__PURE__ */ jsx6(TranslatorModal, {}),
+        resolvers.map((resolver) => /* @__PURE__ */ jsx6(ResolverButton, {
+          resolver
+        }, resolver.key)),
+        /* @__PURE__ */ jsx6(DefaultButton, {})
+      ]
+    })
+  });
+};
+
+// src/exports/client.ts
+var client_default = CustomButtonWithTranslator;
+export {
+  client_default as default,
+  CustomButtonWithTranslator
+};

package/dist/index.d.ts

@@ -1,11 +1,63 @@
-import type { Plugin } from 'payload';
-import { translateOperation } from './translate/operation';
-import type { TranslatorConfig } from './types';
-export { copyResolver } from './resolvers/copy';
-export { googleResolver } from './resolvers/google';
-export { libreResolver } from './resolvers/libreTranslate';
-export { openAIResolver } from './resolvers/openAI';
-export * from './resolvers/types';
-export { translateOperation };
-export declare const translator: (pluginConfig: TranslatorConfig) => Plugin;
-//# sourceMappingURL=index.d.ts.map
+import { Payload, PayloadRequest as PayloadRequest2 } from "payload";
+import { TypeWithID } from "payload";
+type Doc = Record<string, unknown> & TypeWithID;
+type TranslateArgs = {
+	collectionSlug?: string;
+	data?: Record<string, any>;
+	emptyOnly?: boolean;
+	globalSlug?: string;
+	id?: number | string;
+	locale: string;
+	localeFrom: string;
+	overrideAccess?: boolean;
+	resolver: string;
+	update?: boolean;
+};
+type TranslateResult = {
+	success: false;
+} | {
+	success: true;
+	translatedData: Record<string, any>;
+	dataFrom: Doc;
+};
+type TranslateOperationArgs = ({
+	payload: Payload;
+} | {
+	req: PayloadRequest2;
+}) & TranslateArgs;
+declare const translateOperation: (args: TranslateOperationArgs) => Promise<TranslateResult>;
+import { Plugin } from "payload";
+import { CollectionSlug, GlobalSlug } from "payload";
+import { PayloadRequest as PayloadRequest3 } from "payload";
+type TranslateResolverArgs = {
+	localeFrom: string;
+	localeTo: string;
+	req: PayloadRequest3;
+	texts: string[];
+};
+type TranslateResolverResponse = {
+	success: false;
+} | {
+	success: true;
+	translatedTexts: string[];
+};
+type TranslateResolver = {
+	key: string;
+	resolve: (args: TranslateResolverArgs) => Promise<TranslateResolverResponse> | TranslateResolverResponse;
+};
+type TranslatorConfig = {
+	collections: CollectionSlug[];
+	disabled?: boolean;
+	globals: GlobalSlug[];
+	resolvers: TranslateResolver[];
+	autoTranslate?: boolean;
+	_options?: {
+		additionalTraverseRichText?: (args: {
+			onText: (siblingData: Record<string, unknown>, attribute?: string) => void;
+			root: Record<string, unknown>;
+			siblingData?: Record<string, unknown>;
+		}) => void;
+	};
+};
+declare const translator: (pluginConfig: TranslatorConfig) => Plugin;
+export { translator, translateOperation, translator as default, TranslateResolverResponse, TranslateResolverArgs, TranslateResolver };