@roxxel/payload-multilang 0.0.1

package/README.md

@@ -0,0 +1,165 @@
+# @roxxel/payload-multilang
+
+Polylang-style document localization for Payload CMS
+
+Plugin lets editors manage each translation as its own Payload document.
+
+## Install
+
+```bash
+pnpm add @roxxel/payload-multilang
+```
+
+## Quick Start
+
+Add the plugin to `payload.config.ts` and list the collections or globals that should be localized.
+
+```ts
+import { buildConfig } from 'payload'
+import { payloadMultilang } from '@roxxel/payload-multilang'
+
+export default buildConfig({
+  localization: false,
+  plugins: [
+    payloadMultilang({
+      collections: {
+        posts: {
+          synchronizedFields: ['featuredImage', 'author'],
+        },
+      },
+      globals: {
+        'site-settings': {
+          label: 'Settings translations',
+        },
+      },
+      languages: [
+        {
+          code: 'en',
+          flagLabel: 'EN',
+          isDefault: true,
+          locale: 'en_US',
+          name: 'English',
+          order: 0,
+        },
+        {
+          code: 'uk',
+          flagLabel: 'UK',
+          locale: 'uk_UA',
+          name: 'Ukrainian',
+          order: 1,
+        },
+      ],
+    }),
+  ],
+})
+```
+
+In the Payload admin panel, enabled collections get:
+
+- a language selector in the document sidebar
+- translation status/actions for each configured language
+- a `Translations` edit view for creating, connecting, and disconnecting translations
+- a language filter and translation shortcuts in the collection list
+
+Enabled globals get one tab per configured language.
+
+## Admin UI
+
+Collection lists include a language filter and translation shortcuts for each configured language.
+
+<img src="./docs/assets/admin-ui/collection-list-language-shortcuts.png" alt="Payload collection list with language filter and translation shortcut columns" width="100%">
+
+Document edit views show the current language, linked translations, and quick actions for opening or creating missing translations.
+
+<img src="./docs/assets/admin-ui/english-post-translations.png" alt="English post edit view showing linked Ukrainian translation action in the language sidebar" width="100%">
+
+<img src="./docs/assets/admin-ui/ukrainian-post-translations.png" alt="Ukrainian post edit view showing linked English translation action in the language sidebar" width="100%">
+
+## Query by Language
+
+Use `withLanguage` when querying localized collections.
+
+```ts
+import { withLanguage } from '@roxxel/payload-multilang'
+
+const posts = await payload.find({
+  collection: 'posts',
+  where: withLanguage({
+    language: 'uk',
+    where: {
+      _status: {
+        equals: 'published',
+      },
+    },
+  }),
+})
+```
+
+## Translation Helpers
+
+```ts
+import {
+  findGlobalByLanguage,
+  getDocumentTranslation,
+  getDocumentTranslations,
+  getLanguages,
+  updateGlobalByLanguage,
+  withLanguage,
+} from '@roxxel/payload-multilang'
+```
+
+Common examples:
+
+```ts
+const languages = await getLanguages()
+
+const state = await getDocumentTranslations({
+  collection: 'posts',
+  id: post.id,
+})
+
+const ukrainianPost = await getDocumentTranslation({
+  collection: 'posts',
+  id: post.id,
+  language: 'uk',
+})
+
+const settings = await findGlobalByLanguage({
+  slug: 'site-settings',
+  language: 'uk',
+})
+
+await updateGlobalByLanguage({
+  slug: 'site-settings',
+  language: 'uk',
+  data: {
+    title: 'Localized title',
+  },
+})
+```
+
+## Documentation
+
+- [Configuration](./docs/configuration.md)
+- [Developer Usage](./docs/usage.md)
+- [Helper API](./docs/helpers.md)
+
+## Development
+
+The `./dev` app uses SQLite. By default it writes `dev/payload.dev.sqlite`; tests use isolated temporary SQLite files under `/tmp`.
+
+```bash
+pnpm install
+pnpm run generate:types
+pnpm run test:int
+pnpm run test:e2e
+pnpm run build
+```
+
+## License
+
+MIT
+
+## Notice
+
+This plugin was built entirely by an LLM.

package/dist/components/LanguageListToolbar.d.ts

@@ -0,0 +1,6 @@
+import '../styles/admin.css';
+type Props = {
+    collectionSlug: string;
+};
+export declare const LanguageListToolbar: ({ collectionSlug }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/LanguageListToolbar.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConfig, useRouteTransition } from '@payloadcms/ui';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation.js';
+import { useMemo } from 'react';
+import '../styles/admin.css';
+import { getCollectionFieldNames, getConfiguredLanguagesFromConfig } from './config.js';
+export const LanguageListToolbar = ({ collectionSlug })=>{
+    const { config } = useConfig();
+    const pathname = usePathname();
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const { isTransitioning, startRouteTransition } = useRouteTransition();
+    const languages = getConfiguredLanguagesFromConfig(config);
+    const fieldNames = useMemo(()=>getCollectionFieldNames({
+            collectionSlug,
+            config
+        }), [
+        collectionSlug,
+        config
+    ]);
+    const languageParam = `where[${fieldNames.language}][equals]`;
+    const currentLanguage = searchParams.get(languageParam) || '';
+    if (!languages.length) {
+        return null;
+    }
+    const handleLanguageChange = (language)=>{
+        const nextParams = new URLSearchParams(searchParams.toString());
+        if (language) {
+            nextParams.set(languageParam, language);
+        } else {
+            nextParams.delete(languageParam);
+        }
+        nextParams.set('page', '1');
+        const query = nextParams.toString();
+        const href = query ? `${pathname}?${query}` : pathname;
+        startRouteTransition(()=>{
+            router.push(href);
+        });
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: "payload-multilang-toolbar",
+        "data-testid": "multilang-list-toolbar",
+        children: /*#__PURE__*/ _jsx("label", {
+            className: "payload-multilang-toolbar__select",
+            children: /*#__PURE__*/ _jsxs("select", {
+                "aria-label": "Language",
+                disabled: isTransitioning,
+                onChange: (event)=>handleLanguageChange(event.target.value),
+                value: currentLanguage,
+                children: [
+                    /*#__PURE__*/ _jsx("option", {
+                        value: "",
+                        children: "All languages"
+                    }),
+                    languages.map((language)=>/*#__PURE__*/ _jsxs("option", {
+                            value: language.code,
+                            children: [
+                                language.flagLabel ? `${language.flagLabel} ` : '',
+                                language.name
+                            ]
+                        }, language.code))
+                ]
+            })
+        })
+    });
+};
+
+//# sourceMappingURL=LanguageListToolbar.js.map

package/dist/components/LanguageListToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/LanguageListToolbar.tsx"],"sourcesContent":["'use client'\n\nimport { useConfig, useRouteTransition } from '@payloadcms/ui'\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation.js'\nimport { useMemo } from 'react'\n\nimport '../styles/admin.css'\nimport { getCollectionFieldNames, getConfiguredLanguagesFromConfig } from './config.js'\n\ntype Props = {\n  collectionSlug: string\n}\n\nexport const LanguageListToolbar = ({ collectionSlug }: Props) => {\n  const { config } = useConfig()\n  const pathname = usePathname()\n  const router = useRouter()\n  const searchParams = useSearchParams()\n  const { isTransitioning, startRouteTransition } = useRouteTransition()\n  const languages = getConfiguredLanguagesFromConfig(config)\n  const fieldNames = useMemo(\n    () => getCollectionFieldNames({ collectionSlug, config }),\n    [collectionSlug, config],\n  )\n  const languageParam = `where[${fieldNames.language}][equals]`\n  const currentLanguage = searchParams.get(languageParam) || ''\n\n  if (!languages.length) {\n    return null\n  }\n\n  const handleLanguageChange = (language: string) => {\n    const nextParams = new URLSearchParams(searchParams.toString())\n\n    if (language) {\n      nextParams.set(languageParam, language)\n    } else {\n      nextParams.delete(languageParam)\n    }\n\n    nextParams.set('page', '1')\n\n    const query = nextParams.toString()\n    const href = query ? `${pathname}?${query}` : pathname\n\n    startRouteTransition(() => {\n      router.push(href)\n    })\n  }\n\n  return (\n    <div className=\"payload-multilang-toolbar\" data-testid=\"multilang-list-toolbar\">\n      <label className=\"payload-multilang-toolbar__select\">\n        <select\n          aria-label=\"Language\"\n          disabled={isTransitioning}\n          onChange={(event) => handleLanguageChange(event.target.value)}\n          value={currentLanguage}\n        >\n          <option value=\"\">All languages</option>\n          {languages.map((language) => (\n            <option key={language.code} value={language.code}>\n              {language.flagLabel ? `${language.flagLabel} ` : ''}\n              {language.name}\n            </option>\n          ))}\n        </select>\n      </label>\n    </div>\n  )\n}\n"],"names":["useConfig","useRouteTransition","usePathname","useRouter","useSearchParams","useMemo","getCollectionFieldNames","getConfiguredLanguagesFromConfig","LanguageListToolbar","collectionSlug","config","pathname","router","searchParams","isTransitioning","startRouteTransition","languages","fieldNames","languageParam","language","currentLanguage","get","length","handleLanguageChange","nextParams","URLSearchParams","toString","set","delete","query","href","push","div","className","data-testid","label","select","aria-label","disabled","onChange","event","target","value","option","map","code","flagLabel","name"],"mappings":"AAAA;;AAEA,SAASA,SAAS,EAAEC,kBAAkB,QAAQ,iBAAgB;AAC9D,SAASC,WAAW,EAAEC,SAAS,EAAEC,eAAe,QAAQ,qBAAoB;AAC5E,SAASC,OAAO,QAAQ,QAAO;AAE/B,OAAO,sBAAqB;AAC5B,SAASC,uBAAuB,EAAEC,gCAAgC,QAAQ,cAAa;AAMvF,OAAO,MAAMC,sBAAsB,CAAC,EAAEC,cAAc,EAAS;IAC3D,MAAM,EAAEC,MAAM,EAAE,GAAGV;IACnB,MAAMW,WAAWT;IACjB,MAAMU,SAAST;IACf,MAAMU,eAAeT;IACrB,MAAM,EAAEU,eAAe,EAAEC,oBAAoB,EAAE,GAAGd;IAClD,MAAMe,YAAYT,iCAAiCG;IACnD,MAAMO,aAAaZ,QACjB,IAAMC,wBAAwB;YAAEG;YAAgBC;QAAO,IACvD;QAACD;QAAgBC;KAAO;IAE1B,MAAMQ,gBAAgB,CAAC,MAAM,EAAED,WAAWE,QAAQ,CAAC,SAAS,CAAC;IAC7D,MAAMC,kBAAkBP,aAAaQ,GAAG,CAACH,kBAAkB;IAE3D,IAAI,CAACF,UAAUM,MAAM,EAAE;QACrB,OAAO;IACT;IAEA,MAAMC,uBAAuB,CAACJ;QAC5B,MAAMK,aAAa,IAAIC,gBAAgBZ,aAAaa,QAAQ;QAE5D,IAAIP,UAAU;YACZK,WAAWG,GAAG,CAACT,eAAeC;QAChC,OAAO;YACLK,WAAWI,MAAM,CAACV;QACpB;QAEAM,WAAWG,GAAG,CAAC,QAAQ;QAEvB,MAAME,QAAQL,WAAWE,QAAQ;QACjC,MAAMI,OAAOD,QAAQ,GAAGlB,SAAS,CAAC,EAAEkB,OAAO,GAAGlB;QAE9CI,qBAAqB;YACnBH,OAAOmB,IAAI,CAACD;QACd;IACF;IAEA,qBACE,KAACE;QAAIC,WAAU;QAA4BC,eAAY;kBACrD,cAAA,KAACC;YAAMF,WAAU;sBACf,cAAA,MAACG;gBACCC,cAAW;gBACXC,UAAUxB;gBACVyB,UAAU,CAACC,QAAUjB,qBAAqBiB,MAAMC,MAAM,CAACC,KAAK;gBAC5DA,OAAOtB;;kCAEP,KAACuB;wBAAOD,OAAM;kCAAG;;oBAChB1B,UAAU4B,GAAG,CAAC,CAACzB,yBACd,MAACwB;4BAA2BD,OAAOvB,SAAS0B,IAAI;;gCAC7C1B,SAAS2B,SAAS,GAAG,GAAG3B,SAAS2B,SAAS,CAAC,CAAC,CAAC,GAAG;gCAChD3B,SAAS4B,IAAI;;2BAFH5B,SAAS0B,IAAI;;;;;AAStC,EAAC"}

package/dist/components/LanguageMetabox.d.ts

@@ -0,0 +1,2 @@
+import '../styles/admin.css';
+export declare const LanguageMetabox: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/LanguageMetabox.js

@@ -0,0 +1,275 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast, useConfig, useDocumentInfo, useField, useRouteTransition } from '@payloadcms/ui';
+import { useRouter } from 'next/navigation.js';
+import { formatAdminURL } from 'payload/shared';
+import { useEffect, useMemo, useState } from 'react';
+import '../styles/admin.css';
+import { getCollectionFieldNames, getConfiguredLanguagesFromConfig, getDefaultLanguageFromConfig } from './config.js';
+const PenIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
+        "aria-hidden": "true",
+        className: "payload-multilang-pen-icon",
+        fill: "none",
+        height: "16",
+        viewBox: "0 0 16 16",
+        width: "16",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M9.9 2.6 13.4 6 5.7 13.7 2.2 14.4 2.9 10.9 9.9 2.6Z",
+                stroke: "currentColor",
+                strokeLinejoin: "round",
+                strokeWidth: "1.4"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M8.8 3.9 12.1 7.2",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeWidth: "1.4"
+            })
+        ]
+    });
+const getDocumentID = (doc)=>{
+    const id = doc?.id;
+    return typeof id === 'number' || typeof id === 'string' ? id : undefined;
+};
+const isSameDocumentID = (left, right)=>left !== undefined && right !== undefined && String(left) === String(right);
+export const LanguageMetabox = ()=>{
+    const { config } = useConfig();
+    const { collectionSlug, id } = useDocumentInfo();
+    const router = useRouter();
+    const { isTransitioning, startRouteTransition } = useRouteTransition();
+    const fieldNames = useMemo(()=>getCollectionFieldNames({
+            collectionSlug,
+            config
+        }), [
+        collectionSlug,
+        config
+    ]);
+    const languageField = useField({
+        path: fieldNames.language
+    });
+    const languages = getConfiguredLanguagesFromConfig(config);
+    const defaultLanguage = getDefaultLanguageFromConfig(config);
+    const [busyLanguage, setBusyLanguage] = useState();
+    const [translationState, setTranslationState] = useState();
+    const groupField = useField({
+        path: fieldNames.group
+    });
+    const docID = typeof id === 'number' || typeof id === 'string' ? id : undefined;
+    const groupValue = groupField.value;
+    const isCreation = !docID;
+    const localizedLanguageCodes = useMemo(()=>new Set(Object.keys(translationState?.translations || {})), [
+        translationState?.translations
+    ]);
+    const configuredLanguageCodes = useMemo(()=>new Set(languages.map((language)=>language.code)), [
+        languages
+    ]);
+    const availableCreationLanguage = useMemo(()=>languages.find((language)=>!localizedLanguageCodes.has(language.code)), [
+        languages,
+        localizedLanguageCodes
+    ]);
+    const preferredCreationLanguage = (defaultLanguage && !localizedLanguageCodes.has(defaultLanguage.code) ? defaultLanguage : availableCreationLanguage)?.code || '';
+    useEffect(()=>{
+        if (isCreation) {
+            if (!preferredCreationLanguage) {
+                if (languageField.value && localizedLanguageCodes.has(languageField.value)) {
+                    languageField.setValue('');
+                }
+                return;
+            }
+            if (!languageField.value || localizedLanguageCodes.has(languageField.value)) {
+                languageField.setValue(preferredCreationLanguage);
+            }
+            return;
+        }
+        if (languageField.value && !configuredLanguageCodes.has(languageField.value)) {
+            languageField.setValue('');
+        }
+    }, [
+        configuredLanguageCodes,
+        isCreation,
+        languageField,
+        localizedLanguageCodes,
+        preferredCreationLanguage
+    ]);
+    useEffect(()=>{
+        if (!collectionSlug || !docID && !groupValue) {
+            setTranslationState(undefined);
+            return;
+        }
+        const loadState = async ()=>{
+            const query = docID ? `id=${encodeURIComponent(String(docID))}` : `group=${encodeURIComponent(groupValue)}`;
+            const response = await fetch(formatAdminURL({
+                apiRoute: config.routes.api,
+                path: `/${collectionSlug}/multilang/state?${query}`
+            }), {
+                credentials: 'include'
+            });
+            if (!response.ok) {
+                return;
+            }
+            const result = await response.json();
+            setTranslationState(result);
+        };
+        void loadState();
+    }, [
+        collectionSlug,
+        config.routes.api,
+        docID,
+        groupValue
+    ]);
+    const selectedLanguageCode = isCreation ? languageField.value || preferredCreationLanguage : languageField.value && configuredLanguageCodes.has(languageField.value) ? languageField.value : '';
+    const selectedLanguage = languages.find((language)=>language.code === selectedLanguageCode);
+    const persistedLanguage = !isCreation ? translationState?.language : undefined;
+    const hasAssignedConfiguredLanguage = Boolean(!isCreation && (translationState ? persistedLanguage && configuredLanguageCodes.has(persistedLanguage) : selectedLanguage));
+    const collectionAdminURL = (documentID)=>formatAdminURL({
+            adminRoute: config.routes.admin,
+            path: `/collections/${collectionSlug}/${documentID}`
+        });
+    const navigateToTranslation = (documentID)=>{
+        startRouteTransition(()=>{
+            router.push(collectionAdminURL(documentID));
+        });
+    };
+    const createTranslation = async (targetLanguage)=>{
+        if (!collectionSlug || !docID) {
+            toast.error('Save the document before creating translations.');
+            return;
+        }
+        setBusyLanguage(targetLanguage);
+        const response = await fetch(formatAdminURL({
+            apiRoute: config.routes.api,
+            path: `/${collectionSlug}/multilang/create`
+        }), {
+            body: JSON.stringify({
+                sourceId: docID,
+                targetLanguage
+            }),
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            method: 'POST'
+        });
+        setBusyLanguage(undefined);
+        if (!response.ok) {
+            const result = await response.json().catch(()=>undefined);
+            toast.error(result?.message || 'Translation could not be created.');
+            return;
+        }
+        const result = await response.json();
+        if (result.doc?.id) {
+            startRouteTransition(()=>{
+                router.push(collectionAdminURL(result.doc.id));
+            });
+        }
+    };
+    return /*#__PURE__*/ _jsxs("section", {
+        className: "payload-multilang-metabox",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "payload-multilang-metabox__header",
+                children: /*#__PURE__*/ _jsx("h3", {
+                    children: "Language"
+                })
+            }),
+            /*#__PURE__*/ _jsxs("label", {
+                className: "payload-multilang-field",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        children: "Language"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "payload-multilang-language-select",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "payload-multilang-language-select__flag",
+                                children: selectedLanguage?.flagLabel || '--'
+                            }),
+                            /*#__PURE__*/ _jsxs("select", {
+                                disabled: hasAssignedConfiguredLanguage,
+                                onChange: (event)=>languageField.setValue(event.target.value),
+                                value: selectedLanguageCode,
+                                children: [
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "",
+                                        children: "Unassigned"
+                                    }),
+                                    languages.map((language)=>{
+                                        const isCurrent = selectedLanguageCode === language.code;
+                                        const isLocalized = localizedLanguageCodes.has(language.code);
+                                        const disabled = isCreation || !hasAssignedConfiguredLanguage ? isLocalized && !isCurrent : true;
+                                        return /*#__PURE__*/ _jsxs("option", {
+                                            disabled: disabled,
+                                            value: language.code,
+                                            children: [
+                                                language.flagLabel ? `${language.flagLabel} ` : '',
+                                                language.name
+                                            ]
+                                        }, language.code);
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "payload-multilang-translations",
+                "data-testid": "multilang-sidebar-translations",
+                children: [
+                    /*#__PURE__*/ _jsx("h4", {
+                        children: "Translations"
+                    }),
+                    languages.map((language)=>{
+                        const translation = translationState?.translations[language.code];
+                        const translationID = typeof translation?.id === 'number' || typeof translation?.id === 'string' ? translation.id : undefined;
+                        const isCurrent = isSameDocumentID(translationID, docID);
+                        const isUnavailableForCreate = isCreation && Boolean(translationID) && selectedLanguageCode !== language.code;
+                        return /*#__PURE__*/ _jsxs("div", {
+                            className: "payload-multilang-translation-row",
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "payload-multilang-translation-row__flag",
+                                    children: language.flagLabel || language.code.toUpperCase()
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "payload-multilang-translation-row__name",
+                                    children: language.name
+                                }),
+                                isCurrent ? /*#__PURE__*/ _jsx("span", {
+                                    className: "payload-multilang-translation-row__current",
+                                    children: "Current"
+                                }) : isUnavailableForCreate ? /*#__PURE__*/ _jsx("span", {
+                                    className: "payload-multilang-translation-row__current",
+                                    children: "Localized"
+                                }) : translationID ? /*#__PURE__*/ _jsx("button", {
+                                    "aria-label": `Edit ${language.name} translation`,
+                                    className: "payload-multilang-link-button",
+                                    disabled: isTransitioning,
+                                    onClick: ()=>navigateToTranslation(translationID),
+                                    type: "button",
+                                    children: /*#__PURE__*/ _jsx(PenIcon, {})
+                                }) : /*#__PURE__*/ _jsx("button", {
+                                    "aria-label": `Create ${language.name} translation`,
+                                    className: "payload-multilang-icon-button",
+                                    disabled: !docID || busyLanguage === language.code || isTransitioning,
+                                    onClick: ()=>void createTranslation(language.code),
+                                    type: "button",
+                                    children: "+"
+                                })
+                            ]
+                        }, language.code);
+                    }),
+                    !docID ? /*#__PURE__*/ _jsx("div", {
+                        className: "payload-multilang-muted",
+                        children: "Save before adding translations."
+                    }) : null
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=LanguageMetabox.js.map

package/dist/components/LanguageMetabox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/LanguageMetabox.tsx"],"sourcesContent":["'use client'\n\nimport { toast, useConfig, useDocumentInfo, useField, useRouteTransition } from '@payloadcms/ui'\nimport { useRouter } from 'next/navigation.js'\nimport { formatAdminURL } from 'payload/shared'\nimport { useEffect, useMemo, useState } from 'react'\n\nimport '../styles/admin.css'\nimport type { TranslationState } from '../types.js'\nimport {\n  getCollectionFieldNames,\n  getConfiguredLanguagesFromConfig,\n  getDefaultLanguageFromConfig,\n} from './config.js'\n\nconst PenIcon = () => (\n  <svg\n    aria-hidden=\"true\"\n    className=\"payload-multilang-pen-icon\"\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M9.9 2.6 13.4 6 5.7 13.7 2.2 14.4 2.9 10.9 9.9 2.6Z\"\n      stroke=\"currentColor\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"1.4\"\n    />\n    <path d=\"M8.8 3.9 12.1 7.2\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeWidth=\"1.4\" />\n  </svg>\n)\n\nconst getDocumentID = (doc: Record<string, unknown> | undefined): number | string | undefined => {\n  const id = doc?.id\n\n  return typeof id === 'number' || typeof id === 'string' ? id : undefined\n}\n\nconst isSameDocumentID = (\n  left: number | string | undefined,\n  right: number | string | undefined,\n): boolean => left !== undefined && right !== undefined && String(left) === String(right)\n\nexport const LanguageMetabox = () => {\n  const { config } = useConfig()\n  const { collectionSlug, id } = useDocumentInfo()\n  const router = useRouter()\n  const { isTransitioning, startRouteTransition } = useRouteTransition()\n  const fieldNames = useMemo(\n    () => getCollectionFieldNames({ collectionSlug, config }),\n    [collectionSlug, config],\n  )\n  const languageField = useField<string>({ path: fieldNames.language })\n  const languages = getConfiguredLanguagesFromConfig(config)\n  const defaultLanguage = getDefaultLanguageFromConfig(config)\n  const [busyLanguage, setBusyLanguage] = useState<string>()\n  const [translationState, setTranslationState] = useState<TranslationState>()\n  const groupField = useField<string>({ path: fieldNames.group })\n  const docID = typeof id === 'number' || typeof id === 'string' ? id : undefined\n  const groupValue = groupField.value\n  const isCreation = !docID\n  const localizedLanguageCodes = useMemo(\n    () => new Set(Object.keys(translationState?.translations || {})),\n    [translationState?.translations],\n  )\n  const configuredLanguageCodes = useMemo(\n    () => new Set(languages.map((language) => language.code)),\n    [languages],\n  )\n  const availableCreationLanguage = useMemo(\n    () => languages.find((language) => !localizedLanguageCodes.has(language.code)),\n    [languages, localizedLanguageCodes],\n  )\n  const preferredCreationLanguage =\n    (defaultLanguage && !localizedLanguageCodes.has(defaultLanguage.code)\n      ? defaultLanguage\n      : availableCreationLanguage\n    )?.code || ''\n\n  useEffect(() => {\n    if (isCreation) {\n      if (!preferredCreationLanguage) {\n        if (languageField.value && localizedLanguageCodes.has(languageField.value)) {\n          languageField.setValue('')\n        }\n\n        return\n      }\n\n      if (!languageField.value || localizedLanguageCodes.has(languageField.value)) {\n        languageField.setValue(preferredCreationLanguage)\n      }\n\n      return\n    }\n\n    if (\n      languageField.value &&\n      !configuredLanguageCodes.has(languageField.value)\n    ) {\n      languageField.setValue('')\n    }\n  }, [\n    configuredLanguageCodes,\n    isCreation,\n    languageField,\n    localizedLanguageCodes,\n    preferredCreationLanguage,\n  ])\n\n  useEffect(() => {\n    if (!collectionSlug || (!docID && !groupValue)) {\n      setTranslationState(undefined)\n      return\n    }\n\n    const loadState = async () => {\n      const query = docID\n        ? `id=${encodeURIComponent(String(docID))}`\n        : `group=${encodeURIComponent(groupValue!)}`\n\n      const response = await fetch(\n        formatAdminURL({\n          apiRoute: config.routes.api,\n          path: `/${collectionSlug}/multilang/state?${query}`,\n        }),\n        {\n          credentials: 'include',\n        },\n      )\n\n      if (!response.ok) {\n        return\n      }\n\n      const result = (await response.json()) as TranslationState\n      setTranslationState(result)\n    }\n\n    void loadState()\n  }, [collectionSlug, config.routes.api, docID, groupValue])\n\n  const selectedLanguageCode = isCreation\n    ? languageField.value || preferredCreationLanguage\n    : languageField.value && configuredLanguageCodes.has(languageField.value)\n      ? languageField.value\n      : ''\n  const selectedLanguage = languages.find((language) => language.code === selectedLanguageCode)\n  const persistedLanguage = !isCreation ? translationState?.language : undefined\n  const hasAssignedConfiguredLanguage = Boolean(\n    !isCreation &&\n      (translationState\n        ? persistedLanguage && configuredLanguageCodes.has(persistedLanguage)\n        : selectedLanguage),\n  )\n\n  const collectionAdminURL = (documentID: number | string) =>\n    formatAdminURL({\n      adminRoute: config.routes.admin,\n      path: `/collections/${collectionSlug}/${documentID}`,\n    })\n\n  const navigateToTranslation = (documentID: number | string) => {\n    startRouteTransition(() => {\n      router.push(collectionAdminURL(documentID))\n    })\n  }\n\n  const createTranslation = async (targetLanguage: string) => {\n    if (!collectionSlug || !docID) {\n      toast.error('Save the document before creating translations.')\n      return\n    }\n\n    setBusyLanguage(targetLanguage)\n\n    const response = await fetch(\n      formatAdminURL({\n        apiRoute: config.routes.api,\n        path: `/${collectionSlug}/multilang/create`,\n      }),\n      {\n        body: JSON.stringify({\n          sourceId: docID,\n          targetLanguage,\n        }),\n        credentials: 'include',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        method: 'POST',\n      },\n    )\n\n    setBusyLanguage(undefined)\n\n    if (!response.ok) {\n      const result = (await response.json().catch(() => undefined)) as\n        { message?: string } | undefined\n      toast.error(result?.message || 'Translation could not be created.')\n      return\n    }\n\n    const result = (await response.json()) as {\n      doc?: { id?: number | string }\n    }\n\n    if (result.doc?.id) {\n      startRouteTransition(() => {\n        router.push(collectionAdminURL(result.doc!.id!))\n      })\n    }\n  }\n\n  return (\n    <section className=\"payload-multilang-metabox\">\n      <div className=\"payload-multilang-metabox__header\">\n        <h3>Language</h3>\n      </div>\n\n      <label className=\"payload-multilang-field\">\n        <span>Language</span>\n        <div className=\"payload-multilang-language-select\">\n          <span className=\"payload-multilang-language-select__flag\">\n            {selectedLanguage?.flagLabel || '--'}\n          </span>\n          <select\n            disabled={hasAssignedConfiguredLanguage}\n            onChange={(event) => languageField.setValue(event.target.value)}\n            value={selectedLanguageCode}\n          >\n            <option value=\"\">Unassigned</option>\n            {languages.map((language) => {\n              const isCurrent = selectedLanguageCode === language.code\n              const isLocalized = localizedLanguageCodes.has(language.code)\n              const disabled =\n                isCreation || !hasAssignedConfiguredLanguage\n                  ? isLocalized && !isCurrent\n                  : true\n\n              return (\n                <option disabled={disabled} key={language.code} value={language.code}>\n                  {language.flagLabel ? `${language.flagLabel} ` : ''}\n                  {language.name}\n                </option>\n              )\n            })}\n          </select>\n        </div>\n      </label>\n\n      <div className=\"payload-multilang-translations\" data-testid=\"multilang-sidebar-translations\">\n        <h4>Translations</h4>\n        {languages.map((language) => {\n          const translation = translationState?.translations[language.code]\n          const translationID =\n            typeof translation?.id === 'number' || typeof translation?.id === 'string'\n              ? translation.id\n              : undefined\n          const isCurrent = isSameDocumentID(translationID, docID)\n          const isUnavailableForCreate =\n            isCreation && Boolean(translationID) && selectedLanguageCode !== language.code\n\n          return (\n            <div className=\"payload-multilang-translation-row\" key={language.code}>\n              <span className=\"payload-multilang-translation-row__flag\">\n                {language.flagLabel || language.code.toUpperCase()}\n              </span>\n              <span className=\"payload-multilang-translation-row__name\">{language.name}</span>\n              {isCurrent ? (\n                <span className=\"payload-multilang-translation-row__current\">Current</span>\n              ) : isUnavailableForCreate ? (\n                <span className=\"payload-multilang-translation-row__current\">Localized</span>\n              ) : translationID ? (\n                <button\n                  aria-label={`Edit ${language.name} translation`}\n                  className=\"payload-multilang-link-button\"\n                  disabled={isTransitioning}\n                  onClick={() => navigateToTranslation(translationID)}\n                  type=\"button\"\n                >\n                  <PenIcon />\n                </button>\n              ) : (\n                <button\n                  aria-label={`Create ${language.name} translation`}\n                  className=\"payload-multilang-icon-button\"\n                  disabled={!docID || busyLanguage === language.code || isTransitioning}\n                  onClick={() => void createTranslation(language.code)}\n                  type=\"button\"\n                >\n                  +\n                </button>\n              )}\n            </div>\n          )\n        })}\n        {!docID ? (\n          <div className=\"payload-multilang-muted\">Save before adding translations.</div>\n        ) : null}\n      </div>\n    </section>\n  )\n}\n"],"names":["toast","useConfig","useDocumentInfo","useField","useRouteTransition","useRouter","formatAdminURL","useEffect","useMemo","useState","getCollectionFieldNames","getConfiguredLanguagesFromConfig","getDefaultLanguageFromConfig","PenIcon","svg","aria-hidden","className","fill","height","viewBox","width","xmlns","path","d","stroke","strokeLinejoin","strokeWidth","strokeLinecap","getDocumentID","doc","id","undefined","isSameDocumentID","left","right","String","LanguageMetabox","config","collectionSlug","router","isTransitioning","startRouteTransition","fieldNames","languageField","language","languages","defaultLanguage","busyLanguage","setBusyLanguage","translationState","setTranslationState","groupField","group","docID","groupValue","value","isCreation","localizedLanguageCodes","Set","Object","keys","translations","configuredLanguageCodes","map","code","availableCreationLanguage","find","has","preferredCreationLanguage","setValue","loadState","query","encodeURIComponent","response","fetch","apiRoute","routes","api","credentials","ok","result","json","selectedLanguageCode","selectedLanguage","persistedLanguage","hasAssignedConfiguredLanguage","Boolean","collectionAdminURL","documentID","adminRoute","admin","navigateToTranslation","push","createTranslation","targetLanguage","error","body","JSON","stringify","sourceId","headers","method","catch","message","section","div","h3","label","span","flagLabel","select","disabled","onChange","event","target","option","isCurrent","isLocalized","name","data-testid","h4","translation","translationID","isUnavailableForCreate","toUpperCase","button","aria-label","onClick","type"],"mappings":"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"}

package/dist/components/TranslationActionsClient.d.ts

@@ -0,0 +1,10 @@
+import '../styles/admin.css';
+import type { MultilangLanguage, TranslationState } from '../types.js';
+type Props = {
+    collectionSlug: string;
+    docID: number | string;
+    languages: MultilangLanguage[];
+    state: TranslationState;
+};
+export declare const TranslationActionsClient: ({ collectionSlug, docID, languages, state, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};