diff --git a/packages/next/src/pages/Account/Default/Settings/index.tsx b/packages/next/src/pages/Account/Default/Settings/index.tsx index be95258582..3a900375d9 100644 --- a/packages/next/src/pages/Account/Default/Settings/index.tsx +++ b/packages/next/src/pages/Account/Default/Settings/index.tsx @@ -18,6 +18,7 @@ export const Settings: React.FC<{ return (

{t('general:payloadSettings')}

+
)} diff --git a/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.ts b/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.ts index 4feae54848..e01f02da4f 100644 --- a/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.ts +++ b/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/types.ts @@ -1,4 +1,4 @@ -import type { i18n } from 'i18next' +import type { I18n } from '@payloadcms/translations' import type { LexicalEditor } from 'lexical' import type { MutableRefObject } from 'react' import type React from 'react' @@ -7,7 +7,7 @@ export class SlashMenuOption { // Icon for display Icon: () => Promise - displayName?: (({ i18n }: { i18n: i18n }) => string) | string + displayName?: (({ i18n }: { i18n: I18n }) => string) | string // Used for class names and, if displayName is not provided, for display. key: string // TBD @@ -23,7 +23,7 @@ export class SlashMenuOption { key: string, options: { Icon: () => Promise - displayName?: (({ i18n }: { i18n: i18n }) => string) | string + displayName?: (({ i18n }: { i18n: I18n }) => string) | string keyboardShortcut?: string keywords?: Array onSelect: ({ editor, queryString }: { editor: LexicalEditor; queryString: string }) => void @@ -47,7 +47,7 @@ export class SlashMenuOption { export class SlashMenuGroup { // Used for class names and, if displayName is not provided, for display. - displayName?: (({ i18n }: { i18n: i18n }) => string) | string + displayName?: (({ i18n }: { i18n: I18n }) => string) | string key: string options: Array } diff --git a/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/index.tsx b/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/index.tsx index 95826c1382..55dee2bbd1 100644 --- a/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/index.tsx +++ b/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/index.tsx @@ -2,10 +2,10 @@ import type { TextNode } from 'lexical' import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' +import { useTranslation } from '@payloadcms/ui' import { useCallback, useMemo, useState } from 'react' import * as React from 'react' import * as ReactDOM from 'react-dom' -import { useTranslation } from 'react-i18next' import type { SlashMenuGroup, SlashMenuOption } from './LexicalTypeaheadMenuPlugin/types' @@ -28,7 +28,7 @@ function SlashMenuItem({ onMouseEnter: () => void option: SlashMenuOption }) { - const { i18n } = useTranslation('fields') + const { i18n } = useTranslation() let className = `${baseClass}__item ${baseClass}__item-${option.key}` if (isSelected) { @@ -87,7 +87,7 @@ export function SlashMenuPlugin({ const [editor] = useLexicalComposerContext() const [queryString, setQueryString] = useState(null) const { editorConfig } = useEditorConfigContext() - const { i18n } = useTranslation('fields') + const { i18n } = useTranslation() const checkForTriggerMatch = useMenuTriggerMatch('/', { minLength: 0, diff --git a/packages/richtext-slate/package.json b/packages/richtext-slate/package.json index a3978d9965..0e75896941 100644 --- a/packages/richtext-slate/package.json +++ b/packages/richtext-slate/package.json @@ -18,10 +18,10 @@ }, "dependencies": { "@faceless-ui/modal": "2.0.1", - "i18next": "22.5.1", + "@payloadcms/translations": "workspace:^", + "@payloadcms/ui": "workspace:^", "is-hotkey": "0.2.0", "react": "18.2.0", - "react-i18next": "11.18.6", "slate": "0.91.4", "slate-history": "0.86.0", "slate-hyperscript": "0.81.3", diff --git a/packages/richtext-slate/src/field/RichText.tsx b/packages/richtext-slate/src/field/RichText.tsx index c1f9b2a2e0..2bd3133db0 100644 --- a/packages/richtext-slate/src/field/RichText.tsx +++ b/packages/richtext-slate/src/field/RichText.tsx @@ -4,12 +4,17 @@ import type { BaseEditor, BaseOperation } from 'slate' import type { HistoryEditor } from 'slate-history' import type { ReactEditor } from 'slate-react' +import { getTranslation } from '@payloadcms/translations' +import { + Error, + FieldDescription, + Label, + useEditDepth, + useField, + useTranslation, +} from '@payloadcms/ui' import isHotkey from 'is-hotkey' -import { Error, FieldDescription, Label, useField, withCondition } from 'payload/components/forms' -import { useEditDepth } from 'payload/components/utilities' -import { getTranslation } from 'payload/utilities' import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' -import { useTranslation } from 'react-i18next' import { Node, Element as SlateElement, Text, Transforms, createEditor } from 'slate' import { withHistory } from 'slate-history' import { Editable, Slate, withReact } from 'slate-react' diff --git a/packages/richtext-slate/src/field/elements/link/Button/index.tsx b/packages/richtext-slate/src/field/elements/link/Button/index.tsx index f8adcc1f5e..2bff3cf74f 100644 --- a/packages/richtext-slate/src/field/elements/link/Button/index.tsx +++ b/packages/richtext-slate/src/field/elements/link/Button/index.tsx @@ -1,20 +1,20 @@ 'use client' -import type { Fields } from 'payload/types' +import type { Fields } from '@payloadcms/ui' import { useModal } from '@faceless-ui/modal' -import { useDrawerSlug } from 'payload/components/elements' -import { reduceFieldsToValues } from 'payload/components/forms' import { buildStateFromSchema, + reduceFieldsToValues, useAuth, useConfig, useDocumentInfo, + useDrawerSlug, useLocale, -} from 'payload/components/utilities' + useTranslation, +} from '@payloadcms/ui' import { sanitizeFields } from 'payload/config' import React, { Fragment, useState } from 'react' -import { useTranslation } from 'react-i18next' import { Editor, Range, Transforms } from 'slate' import { ReactEditor, useSlate } from 'slate-react' @@ -73,7 +73,7 @@ export const LinkButton: React.FC<{ const { code: locale } = useLocale() const [initialState, setInitialState] = useState({}) - const { i18n, t } = useTranslation(['upload', 'general']) + const { i18n, t } = useTranslation() const editor = useSlate() const config = useConfig() diff --git a/packages/richtext-slate/src/field/elements/link/Element/index.tsx b/packages/richtext-slate/src/field/elements/link/Element/index.tsx index 58411417f6..cdaeefe4f3 100644 --- a/packages/richtext-slate/src/field/elements/link/Element/index.tsx +++ b/packages/richtext-slate/src/field/elements/link/Element/index.tsx @@ -1,23 +1,26 @@ 'use client' -import type { Fields } from 'payload/types' +import type { Fields } from '@payloadcms/ui' import type { HTMLAttributes } from 'react' import { useModal } from '@faceless-ui/modal' -import { Button, Popup } from 'payload/components' -import { useDrawerSlug } from 'payload/components/elements' -import { reduceFieldsToValues } from 'payload/components/forms' +import { getTranslation } from '@payloadcms/translations' import { + Button, + Popup, + Translation, buildStateFromSchema, + reduceFieldsToValues, useAuth, useConfig, useDocumentInfo, + useDrawerSlug, useLocale, -} from 'payload/components/utilities' + useTranslation, +} from '@payloadcms/ui' import { sanitizeFields } from 'payload/config' -import { deepCopyObject, getTranslation } from 'payload/utilities' +import { deepCopyObject } from 'payload/utilities' import React, { useCallback, useEffect, useState } from 'react' -import { Trans, useTranslation } from 'react-i18next' import { Editor, Node, Transforms } from 'slate' import { ReactEditor, useSlate } from 'slate-react' @@ -73,7 +76,7 @@ export const LinkElement: React.FC<{ const config = useConfig() const { user } = useAuth() const { code: locale } = useLocale() - const { i18n, t } = useTranslation('fields') + const { i18n, t } = useTranslation() const { closeModal, openModal, toggleModal } = useModal() const [renderModal, setRenderModal] = useState(false) const [renderPopup, setRenderPopup] = useState(false) @@ -155,26 +158,30 @@ export const LinkElement: React.FC<{ render={() => (
{element.linkType === 'internal' && element.doc?.relationTo && element.doc?.value && ( - ( + + {children} + + ), + }} i18nKey="fields:linkedTo" - values={{ + t={t} + variables={{ label: getTranslation( config.collections.find(({ slug }) => slug === element.doc.relationTo)?.labels ?.singular, i18n, ), }} - > - - label - - + /> )} {(element.linkType === 'custom' || !element.linkType) && ( = ({ handleModalSubmit, initialState, }) => { - const { t } = useTranslation('fields') + const { t } = useTranslation() return ( - + = ({ } const LinkSubmit: React.FC = () => { - const { t } = useTranslation('fields') + const { t } = useTranslation() const ref = useRef(null) const editDepth = useEditDepth() diff --git a/packages/richtext-slate/src/field/elements/relationship/Button/Fields/index.tsx b/packages/richtext-slate/src/field/elements/relationship/Button/Fields/index.tsx index f0c9bed1ac..60ff6aa815 100644 --- a/packages/richtext-slate/src/field/elements/relationship/Button/Fields/index.tsx +++ b/packages/richtext-slate/src/field/elements/relationship/Button/Fields/index.tsx @@ -1,11 +1,14 @@ 'use client' -import { RelationshipComponent } from 'payload/components/fields/Relationship' -import { SelectComponent } from 'payload/components/fields/Select' -import { useFormFields } from 'payload/components/forms' -import { useAuth, useConfig } from 'payload/components/utilities' +import { + RelationshipComponent, + SelectComponent, + useAuth, + useConfig, + useFormFields, + useTranslation, +} from '@payloadcms/ui' import React, { Fragment, useEffect, useState } from 'react' -import { useTranslation } from 'react-i18next' const createOptions = (collections, permissions) => collections.reduce((options, collection) => { @@ -28,7 +31,7 @@ const createOptions = (collections, permissions) => const RelationshipFields = () => { const { collections } = useConfig() const { permissions } = useAuth() - const { t } = useTranslation('fields') + const { t } = useTranslation() const [options, setOptions] = useState(() => createOptions(collections, permissions)) const relationTo = useFormFields(([fields]) => fields.relationTo?.value as string) @@ -39,10 +42,15 @@ const RelationshipFields = () => { return ( - + {relationTo && ( = ({ enabledCollectionSlugs }) => { - const { t } = useTranslation('fields') + const { t } = useTranslation() const editor = useSlate() const [selectedCollectionSlug, setSelectedCollectionSlug] = useState( () => enabledCollectionSlugs[0], @@ -72,7 +71,7 @@ const RelationshipButton: React.FC = ({ enabledCollectionSlugs }) => { onClick={() => { // do nothing }} - tooltip={t('addRelationship')} + tooltip={t('fields:addRelationship')} > diff --git a/packages/richtext-slate/src/field/elements/relationship/Element/index.tsx b/packages/richtext-slate/src/field/elements/relationship/Element/index.tsx index a59dfc6a48..6fa96dd986 100644 --- a/packages/richtext-slate/src/field/elements/relationship/Element/index.tsx +++ b/packages/richtext-slate/src/field/elements/relationship/Element/index.tsx @@ -2,13 +2,16 @@ import type { HTMLAttributes } from 'react' -import { Button } from 'payload/components' -import { useDocumentDrawer, useListDrawer } from 'payload/components/elements' -import { usePayloadAPI } from 'payload/components/hooks' -import { useConfig } from 'payload/components/utilities' -import { getTranslation } from 'payload/utilities' +import { getTranslation } from '@payloadcms/translations' +import { + Button, + useConfig, + useDocumentDrawer, + useListDrawer, + usePayloadAPI, + useTranslation, +} from '@payloadcms/ui' import React, { useCallback, useReducer, useState } from 'react' -import { useTranslation } from 'react-i18next' import { Transforms } from 'slate' import { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react' @@ -53,7 +56,7 @@ const Element: React.FC = (props) => { ) const selected = useSelected() const focused = useFocused() - const { i18n, t } = useTranslation(['fields', 'general']) + const { i18n, t } = useTranslation() const editor = useSlateStatic() const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0) const [{ data }, { setParams }] = usePayloadAPI( @@ -141,7 +144,7 @@ const Element: React.FC = (props) => { >

- {t('labelRelationship', { + {t('fields:labelRelationship', { label: getTranslation(relatedCollection.labels.singular, i18n), })}

@@ -165,7 +168,7 @@ const Element: React.FC = (props) => { // do nothing }} round - tooltip={t('swapRelationship')} + tooltip={t('fields:swapRelationship')} />
diff --git a/packages/translations/src/build.ts b/packages/translations/src/build.ts index 1711b9bd65..d396c46ace 100644 --- a/packages/translations/src/build.ts +++ b/packages/translations/src/build.ts @@ -135,6 +135,7 @@ const clientTranslationKeys = [ 'fields:searchForBlock', 'fields:selectFieldsToEdit', 'fields:showAll', + 'fields:swapRelationship', 'fields:uploadNewLabel', 'general:aboutToDeleteCount', diff --git a/packages/translations/src/utilities/init.ts b/packages/translations/src/utilities/init.ts index 0dc5fa99c4..b88d950fc4 100644 --- a/packages/translations/src/utilities/init.ts +++ b/packages/translations/src/utilities/init.ts @@ -50,7 +50,11 @@ export const getTranslationString = ({ return undefined }, translations) - return translation + if (!translation) { + console.log('key not found: ', key) + } + + return translation || key } /** @@ -65,14 +69,22 @@ const replaceVars = ({ vars, }: { translationString: string - vars: Record + vars: { + [key: string]: any + } }) => { - return Object.keys(vars).reduce((acc, varKey) => { - if (acc) { - return acc.replace(`{{${varKey}}}`, vars[varKey]) - } - return acc - }, translationString) + const parts = translationString.split(/({{.*?}})/) + + return parts + .map((part) => { + if (part.startsWith('{{') && part.endsWith('}}')) { + const placeholder = part.substring(2, part.length - 2).trim() + return vars[placeholder] || part + } else { + return part + } + }) + .join('') } /** diff --git a/packages/ui/src/elements/DeleteDocument/index.tsx b/packages/ui/src/elements/DeleteDocument/index.tsx index 2fe431c86c..e604f90f63 100644 --- a/packages/ui/src/elements/DeleteDocument/index.tsx +++ b/packages/ui/src/elements/DeleteDocument/index.tsx @@ -16,6 +16,7 @@ import { Button } from '../Button' import * as PopupList from '../Popup/PopupButtonList' import './index.scss' import { useRouter } from 'next/navigation' +import { Translation } from '../Translation' const baseClass = 'delete-document' @@ -112,18 +113,17 @@ const DeleteDocument: React.FC = (props) => {

{t('general:confirmDeletion')}

- {t('general:aboutToDelete', { - label: getTranslation(singularLabel, i18n), - title: titleToRender, - })} - {/* - aboutToDelete - {titleToRender} - */} + i18nKey="general:aboutToDelete" + variables={{ + label: getTranslation(singularLabel, i18n), + title: titleToRender, + }} + elements={{ + '1': ({ children }) => , + }} + />

= ({ onChange, className, mimeTypes }) => />

- {t('general:or')} {t('dragAndDrop')} + {t('general:or')} {t('upload:dragAndDrop')}

) diff --git a/packages/ui/src/elements/EditUpload/index.tsx b/packages/ui/src/elements/EditUpload/index.tsx index 1a8b9d679e..c53d9dc48f 100644 --- a/packages/ui/src/elements/EditUpload/index.tsx +++ b/packages/ui/src/elements/EditUpload/index.tsx @@ -1,6 +1,6 @@ import { useModal } from '@faceless-ui/modal' import React, { useRef, useState } from 'react' -import { useTranslation } from 'react-i18next' +import { useTranslation } from '../../providers/Translation' import ReactCrop, { type Crop as CropType } from 'react-image-crop' import 'react-image-crop/dist/ReactCrop.css' @@ -34,7 +34,7 @@ export const EditUpload: React.FC<{ showFocalPoint?: boolean }> = ({ fileName, fileSrc, imageCacheTag, showCrop, showFocalPoint }) => { const { closeModal } = useModal() - const { t } = useTranslation(['general', 'upload']) + const { t } = useTranslation() const { formQueryParams, setFormQueryParams } = useFormQueryParams() const { uploadEdits } = formQueryParams || {} const [crop, setCrop] = useState({ @@ -117,7 +117,7 @@ export const EditUpload: React.FC<{
diff --git a/packages/ui/src/elements/Translation/index.tsx b/packages/ui/src/elements/Translation/index.tsx new file mode 100644 index 0000000000..b4bd7cc792 --- /dev/null +++ b/packages/ui/src/elements/Translation/index.tsx @@ -0,0 +1,44 @@ +import * as React from 'react' +import { TFunction } from '@payloadcms/translations' + +const RecursiveTranslation: React.FC<{ + translationString: string + elements?: Record> +}> = ({ translationString, elements }) => { + const regex = /(<[^>]+>.*?<\/[^>]+>)/g + const sections = translationString.split(regex) + + return ( + + {sections.map((section, index) => { + const Element = elements?.[index.toString()] + if (Element) { + const regex = new RegExp(`<${index}>(.*?)<\/${index}>`, 'g') + const children = section.replace(regex, (_, group) => group) + return ( + + + + ) + } + return section + })} + + ) +} + +type TranslationProps = { + i18nKey: string + variables?: Record + elements?: Record> + t: TFunction +} +export const Translation: React.FC = ({ elements, variables, i18nKey, t }) => { + let stringWithVariables = t(i18nKey, variables || {}) + + if (!elements) { + return stringWithVariables + } + + return +} diff --git a/packages/ui/src/exports/elements.ts b/packages/ui/src/exports/elements.ts index 9cb03e53d0..257ee588da 100644 --- a/packages/ui/src/exports/elements.ts +++ b/packages/ui/src/exports/elements.ts @@ -32,4 +32,6 @@ export { useListDrawer } from '../elements/ListDrawer' export { useDocumentDrawer } from '../elements/DocumentDrawer' export { ShimmerEffect } from '../elements/ShimmerEffect' export { useDrawerSlug } from '../elements/Drawer/useDrawerSlug' +export { default as Popup } from '../elements/Popup' // export { useThumbnail } from '../elements/Upload' +export { Translation } from '../elements/Translation' diff --git a/packages/ui/src/hooks/useTitle.tsx b/packages/ui/src/hooks/useTitle.tsx index de6d8db731..8a58259300 100644 --- a/packages/ui/src/hooks/useTitle.tsx +++ b/packages/ui/src/hooks/useTitle.tsx @@ -3,7 +3,7 @@ import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/t import { useFormFields } from '../forms/Form/context' import { formatDocTitle } from '../utilities/formatDocTitle' -import { useTranslation } from 'react-i18next' +import { useTranslation } from '../providers/Translation' import { getTranslation } from '@payloadcms/translations' const useTitle = (args: { diff --git a/packages/ui/src/providers/Translation/index.tsx b/packages/ui/src/providers/Translation/index.tsx index 8b8e73a1c2..7b599d4478 100644 --- a/packages/ui/src/providers/Translation/index.tsx +++ b/packages/ui/src/providers/Translation/index.tsx @@ -11,15 +11,15 @@ export type LanguageOptions = { }[] const Context = createContext<{ - t: (key: string, vars?: Record) => string + t: (key: string, vars?: Record) => string i18n: I18n languageOptions: LanguageOptions }>({ - t: () => '', + t: (key) => key, i18n: { language: 'en', fallbackLanguage: 'en', - t: () => '', + t: (key) => key, }, languageOptions: undefined, }) @@ -36,7 +36,7 @@ export const TranslationProvider: React.FC<{ fallbackLang: ClientConfig['i18n']['fallbackLanguage'] languageOptions: LanguageOptions }> = ({ children, translations, lang, fallbackLang, languageOptions }) => { - const nextT = (key: string, vars?: Record): string => + const nextT = (key: string, vars?: Record): string => t({ key, vars, diff --git a/packages/ui/src/views/List/Cell/cellTypes.spec.tsx b/packages/ui/src/views/List/Cell/cellTypes.spec.tsx index a831d3d6d9..a23d30cb4e 100644 --- a/packages/ui/src/views/List/Cell/cellTypes.spec.tsx +++ b/packages/ui/src/views/List/Cell/cellTypes.spec.tsx @@ -13,7 +13,7 @@ jest.mock('../../../../utilities/Config', () => ({ useConfig: () => ({ admin: { dateFormat: 'MMMM do yyyy, h:mm a' } }), })) -jest.mock('react-i18next', () => ({ +jest.mock('../../../../providers/Translation', () => ({ useTranslation: () => ({ t: (string) => string }), })) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5da410a9b3..d69ceca119 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1245,9 +1245,6 @@ importers: deep-equal: specifier: 2.2.3 version: 2.2.3 - i18next: - specifier: 22.5.1 - version: 22.5.1 lexical: specifier: 0.12.5 version: 0.12.5 @@ -1263,9 +1260,6 @@ importers: react-error-boundary: specifier: ^4.0.11 version: 4.0.11(react@18.2.0) - react-i18next: - specifier: 11.18.6 - version: 11.18.6(i18next@22.5.1)(react-dom@18.2.0)(react@18.2.0) ts-essentials: specifier: 7.0.3 version: 7.0.3(typescript@5.2.2) @@ -1288,18 +1282,18 @@ importers: '@faceless-ui/modal': specifier: 2.0.1 version: 2.0.1(react-dom@18.2.0)(react@18.2.0) - i18next: - specifier: 22.5.1 - version: 22.5.1 + '@payloadcms/translations': + specifier: workspace:^ + version: link:../translations + '@payloadcms/ui': + specifier: workspace:^ + version: link:../ui is-hotkey: specifier: 0.2.0 version: 0.2.0 react: specifier: 18.2.0 version: 18.2.0 - react-i18next: - specifier: 11.18.6 - version: 11.18.6(i18next@22.5.1)(react-dom@18.2.0)(react@18.2.0) slate: specifier: 0.91.4 version: 0.91.4