diff --git a/packages/next/src/pages/Account/Default/index.tsx b/packages/next/src/pages/Account/Default/index.tsx index 26da2b0d3e..9e6628ddab 100644 --- a/packages/next/src/pages/Account/Default/index.tsx +++ b/packages/next/src/pages/Account/Default/index.tsx @@ -56,7 +56,7 @@ export const DefaultAccount: React.FC = (props) => { return ( - {/* */} + {/* */} {/* */}

{t('general:welcome')}

-

{t('beginCreateFirstUser')}

+

{t('authentication:beginCreateFirstUser')}

-}): Promise => - meta({ - title: i18n.t('forgotPassword'), - description: i18n.t('forgotPassword'), - keywords: i18n.t('forgotPassword'), +}): Promise => { + const t = getNextT({ + config: await config, + }) + + return meta({ + title: t('authentication:forgotPassword'), + description: t('authentication:forgotPassword'), + keywords: t('authentication:forgotPassword'), config, }) +} export const ForgotPassword: React.FC<{ config: Promise @@ -39,7 +44,7 @@ export const ForgotPassword: React.FC<{ // setHasSubmitted(true) // }, // () => { - // toast.error(t('emailNotValid')) + // toast.error(i18n.t('authentication:emailNotValid')) // }, // ) // } @@ -68,8 +73,8 @@ export const ForgotPassword: React.FC<{ // if (hasSubmitted) { // return ( // - //

{t('emailSent')}

- //

{t('checkYourEmailForPasswordReset')}

+ //

{i18n.t('authentication:emailSent')}

+ //

{i18n.t('authentication:checkYourEmailForPasswordReset')}

// // ) // } @@ -81,30 +86,17 @@ export const ForgotPassword: React.FC<{ // handleResponse={handleResponse} method="POST" > -

- Forgot Password - {/* {t('forgotPassword')} */} -

-

- Enter your email address and we will send you a link to reset your password. - {/* {t('forgotPasswordEmailInstructions')} */} -

+

{i18n.t('authentication:forgotPassword')}

+

{i18n.t('authentication:forgotPasswordEmailInstructions')}

- - Submit - {/* {t('general:submit')} */} - + {i18n.t('general:submit')} - - Back to Login - {/* {t('backToLogin')} */} - + {i18n.t('authentication:backToLogin')} ) } diff --git a/packages/next/src/pages/Logout/LogoutClient.tsx b/packages/next/src/pages/Logout/LogoutClient.tsx index a6528be90e..fcab7bc578 100644 --- a/packages/next/src/pages/Logout/LogoutClient.tsx +++ b/packages/next/src/pages/Logout/LogoutClient.tsx @@ -1,7 +1,7 @@ 'use client' import React, { Fragment, useEffect } from 'react' import { useAuth } from '../../../../ui/src/providers/Auth' -import { Button } from '@payloadcms/ui' +import { Button, useTranslation } from '@payloadcms/ui' export const LogoutClient: React.FC<{ inactivity?: boolean @@ -11,8 +11,8 @@ export const LogoutClient: React.FC<{ const { inactivity, adminRoute, redirect } = props const [isLoggingOut, setIsLoggingOut] = React.useState(undefined) - const [hasLoggedOut, setHasLoggedOut] = React.useState(undefined) - const { logOut, user } = useAuth() + const { logOut } = useAuth() + const { t } = useTranslation() useEffect(() => { if (!isLoggingOut) { @@ -24,18 +24,8 @@ export const LogoutClient: React.FC<{ if (isLoggingOut) { return ( - {inactivity && ( -

- Logged Out Due To Inactivity - {/* {t('loggedOutInactivity')} */} -

- )} - {!inactivity && ( -

- Logged Out Successfully - {/* {t('loggedOutSuccessfully')} */} -

- )} + {inactivity &&

{t('authentication:loggedOutInactivity')}

} + {!inactivity &&

{t('authentication:loggedOutSuccessfully')}

} ) } + // TODO(i18n): needs translation in all languages return Logging Out... } diff --git a/packages/next/src/pages/Logout/index.tsx b/packages/next/src/pages/Logout/index.tsx index 2a150150ee..061eb3c493 100644 --- a/packages/next/src/pages/Logout/index.tsx +++ b/packages/next/src/pages/Logout/index.tsx @@ -3,10 +3,10 @@ import React from 'react' import { MinimalTemplate, Button } from '@payloadcms/ui' import { meta } from '../../utilities/meta' import './index.scss' -import i18n from 'i18next' import { Metadata } from 'next' import { SanitizedConfig } from 'payload/types' import { LogoutClient } from './LogoutClient' +import { getNextT } from '../../utilities/getNextT' const baseClass = 'logout' @@ -14,13 +14,18 @@ export const generateMetadata = async ({ config, }: { config: Promise -}): Promise => - meta({ - title: i18n.t('logout'), - description: `${i18n.t('logoutUser')}`, - keywords: `${i18n.t('logout')}`, +}): Promise => { + const t = getNextT({ + config: await config, + }) + + return meta({ + title: t('authentication:logout'), + description: `${t('authentication:logoutUser')}`, + keywords: `${t('authentication:logout')}`, config, }) +} export const Logout: React.FC<{ inactivity?: boolean diff --git a/packages/next/src/pages/NotFound/index.tsx b/packages/next/src/pages/NotFound/index.tsx index 4879f9d42c..fde0822a13 100644 --- a/packages/next/src/pages/NotFound/index.tsx +++ b/packages/next/src/pages/NotFound/index.tsx @@ -1,7 +1,7 @@ 'use client' import React from 'react' -import { Button, Gutter, useStepNav, useConfig } from '@payloadcms/ui' +import { Button, Gutter, useStepNav, useConfig, useTranslation } from '@payloadcms/ui' // import Meta from '../../utilities/Meta' import './index.scss' @@ -13,6 +13,7 @@ const NotFound: React.FC<{ const { marginTop } = props const { setStepNav } = useStepNav() + const { t } = useTranslation() const { routes: { admin }, @@ -21,7 +22,7 @@ const NotFound: React.FC<{ // useEffect(() => { // setStepNav([ // { - // label: t('notFound'), + // label: t('general:notFound'), // }, // ]) // }, [setStepNav, t]) @@ -33,22 +34,15 @@ const NotFound: React.FC<{ .join(' ')} > {/* */} -

- Nothing Found - {/* {t('nothingFound')} */} -

-

- Sorry, we couldn't find what you were looking for. - {/* {t('sorryNotFound')} */} -

+

{t('general:nothingFound')}

+

{t('general:sorryNotFound')}

 diff --git a/packages/next/src/pages/ResetPassword/index.tsx b/packages/next/src/pages/ResetPassword/index.tsx index 2f765189e6..c98f3cbba1 100644 --- a/packages/next/src/pages/ResetPassword/index.tsx +++ b/packages/next/src/pages/ResetPassword/index.tsx @@ -14,9 +14,9 @@ import './index.scss' import { SanitizedConfig } from 'payload/types' import Link from 'next/link' import { initPage } from '../../utilities/initPage' -import i18n from 'i18next' import { Metadata } from 'next' import { meta } from '../../utilities/meta' +import { getNextT } from '../../utilities/getNextT' const baseClass = 'reset-password' @@ -24,19 +24,24 @@ export const generateMetadata = async ({ config, }: { config: Promise -}): Promise => - meta({ - title: i18n.t('resetPassword'), - description: i18n.t('resetPassword'), - keywords: i18n.t('resetPassword'), +}): Promise => { + const t = getNextT({ + config: await config, + }) + + return meta({ + title: t('authentication:resetPassword'), + description: t('authentication:resetPassword'), + keywords: t('authentication:resetPassword'), config, }) +} export const ResetPassword: React.FC<{ config: Promise token: string }> = async ({ config: configPromise, token }) => { - const { config, user } = await initPage({ configPromise }) + const { config, user, i18n } = await initPage({ configPromise }) const { admin: { logoutRoute, user: userSlug }, @@ -50,7 +55,7 @@ export const ResetPassword: React.FC<{ // history.push(`${admin}`) // } else { // history.push(`${admin}/login`) - // toast.success(t('general:updatedSuccessfully'), { autoClose: 3000 }) + // toast.success(i18n.t('general:updatedSuccessfully'), { autoClose: 3000 }) // } // } @@ -58,10 +63,7 @@ export const ResetPassword: React.FC<{ return (
-

- Already Logged In - {/* {t('alreadyLoggedIn')} */} -

+

{i18n.t('authentication:alreadyLoggedIn')}


 @@ -84,8 +85,7 @@ export const ResetPassword: React.FC<{ return (
- Reset Password - {/*

{t('resetPassword')}

*/} +

{i18n.t('authentication:resetPassword')}

- - Reset Password - {/* {t('resetPassword')} */} - + {i18n.t('authentication:resetPassword')}
diff --git a/packages/next/src/pages/Unauthorized/UnauthorizedClient.tsx b/packages/next/src/pages/Unauthorized/UnauthorizedClient.tsx new file mode 100644 index 0000000000..8eb2336cad --- /dev/null +++ b/packages/next/src/pages/Unauthorized/UnauthorizedClient.tsx @@ -0,0 +1,18 @@ +'use client' +import React from 'react' +import { Button, useTranslation } from '@payloadcms/ui' + +export const UnauthorizedClient: React.FC<{ logoutRoute: string }> = ({ logoutRoute }) => { + const { t } = useTranslation() + + return ( + <> +

{t('error:unauthorized')}

+

{t('error:notAllowedToAccessPage')}

+
+ + + ) +} diff --git a/packages/next/src/pages/Unauthorized/index.tsx b/packages/next/src/pages/Unauthorized/index.tsx index d0ff762d7a..b3f0957f20 100644 --- a/packages/next/src/pages/Unauthorized/index.tsx +++ b/packages/next/src/pages/Unauthorized/index.tsx @@ -1,22 +1,28 @@ import React from 'react' -import { MinimalTemplate, Button } from '@payloadcms/ui' +import { MinimalTemplate } from '@payloadcms/ui' import { SanitizedConfig } from 'payload/types' import { meta } from '../../utilities/meta' import { Metadata } from 'next' -import i18n from 'i18next' +import { getNextT } from '../../utilities/getNextT' +import { UnauthorizedClient } from './UnauthorizedClient' export const generateMetadata = async ({ config, }: { config: Promise -}): Promise => - meta({ - title: i18n.t('error:unauthorized'), - description: i18n.t('error:unauthorized'), - keywords: i18n.t('error:unauthorized'), +}): Promise => { + const t = getNextT({ + config: await config, + }) + + return meta({ + title: t('error:unauthorized'), + description: t('error:unauthorized'), + keywords: t('error:unauthorized'), config, }) +} export const Unauthorized: React.FC<{ config: Promise @@ -30,19 +36,7 @@ export const Unauthorized: React.FC<{ return ( -

- Unauthorized - {/* {t('error:unauthorized')} */} -

-

- Not Allowed - {/* {t('error:notAllowedToAccessPage')} */} -

-
- + ) } diff --git a/packages/next/src/pages/Verify/index.tsx b/packages/next/src/pages/Verify/index.tsx index 92614b8c85..2b755ff9f1 100644 --- a/packages/next/src/pages/Verify/index.tsx +++ b/packages/next/src/pages/Verify/index.tsx @@ -6,8 +6,8 @@ import { initPage } from '../../utilities/initPage' import { SanitizedConfig } from 'payload/types' import { redirect } from 'next/navigation' import { Metadata } from 'next' -import i18n from 'i18next' import { meta } from '../../utilities/meta' +import { getNextT } from '../../utilities/getNextT' const baseClass = 'verify' @@ -15,13 +15,18 @@ export const generateMetadata = async ({ config, }: { config: Promise -}): Promise => - meta({ - description: i18n.t('verifyUser'), - keywords: i18n.t('verify'), - title: i18n.t('verify'), +}): Promise => { + const t = getNextT({ + config: await config, + }) + + return meta({ + description: t('authentication:verifyUser'), + keywords: t('authentication:verify'), + title: t('authentication:verify'), config, }) +} export const Verify: React.FC<{ config: Promise @@ -30,7 +35,7 @@ export const Verify: React.FC<{ config: configPromise, // token }) => { - const { config, user } = await initPage({ configPromise }) + const { config, user, i18n } = await initPage({ configPromise }) const { admin: { user: userSlug }, @@ -60,10 +65,9 @@ export const Verify: React.FC<{ } const getText = () => { - return 'Verify' - // if (verifyResult?.status === 200) return t('verifiedSuccessfully') - // if (verifyResult?.status === 202) return t('alreadyActivated') - // return t('unableToVerify') + if (verifyResult?.status === 200) return i18n.t('authentication:verifiedSuccessfully') + if (verifyResult?.status === 202) return i18n.t('authentication:alreadyActivated') + return i18n.t('authentication:unableToVerify') } return ( @@ -74,8 +78,7 @@ export const Verify: React.FC<{

{getText()}

{verifyResult?.status === 200 && ( )} diff --git a/packages/next/src/pages/Version/Default/index.tsx b/packages/next/src/pages/Version/Default/index.tsx index 7fcccf2d94..32a25591d7 100644 --- a/packages/next/src/pages/Version/Default/index.tsx +++ b/packages/next/src/pages/Version/Default/index.tsx @@ -9,6 +9,7 @@ import fieldComponents from '../RenderFieldsToDiff/fields' import Restore from '../Restore' import './index.scss' import { mostRecentVersionOption } from '../shared' +import { getTranslation } from '@payloadcms/translations' const baseClass = 'view-version' @@ -52,8 +53,7 @@ export const DefaultVersionView: React.FC = ({ docLabel = mostRecentDoc[useAsTitle] } } else { - docLabel = 'Untitled' - // docLabel = `[${t('general:untitled')}]` + docLabel = `[${i18n.t('general:untitled')}]` } } else { docLabel = mostRecentDoc.id @@ -62,9 +62,7 @@ export const DefaultVersionView: React.FC = ({ nav = [ { - label: - typeof collectionConfig.labels.plural === 'string' ? collectionConfig.labels.plural : '', // TODO: fix this (see below) - // label: getTranslation(collectionConfig.labels.plural, i18n), + label: getTranslation(collectionConfig.labels.plural, i18n), url: `${admin}/collections/${collectionConfig.slug}`, }, { @@ -139,10 +137,9 @@ export const DefaultVersionView: React.FC = ({

- Version Created On - {/* {t('versionCreatedOn', { - version: t(doc?.autosave ? 'autosavedVersion' : 'version'), - })} */} + {i18n.t('versionCreatedOn', { + version: i18n.t(doc?.autosave ? 'autosavedVersion' : 'version'), + })}

{formattedCreatedAt}

@@ -184,6 +181,9 @@ export const DefaultVersionView: React.FC = ({ : [] } version={doc?.version} + i18n={i18n} + locale={locale} + config={config} /> )} diff --git a/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Iterable/index.tsx b/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Iterable/index.tsx index e5b000a0a7..384506f486 100644 --- a/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Iterable/index.tsx +++ b/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Iterable/index.tsx @@ -20,6 +20,8 @@ const Iterable: React.FC = ({ locales, permissions, version, + i18n, + config, }) => { const versionRowCount = Array.isArray(version) ? version.length : 0 const comparisonRowCount = Array.isArray(comparison) ? comparison.length : 0 @@ -30,8 +32,7 @@ const Iterable: React.FC = ({ {field.label && ( )} {maxRows > 0 && ( @@ -48,8 +49,7 @@ const Iterable: React.FC = ({ subFields = [ { name: 'blockType', - label: 'Block Type', // TODO: i18n - // label: t('fields:blockType'), + label: i18n.t('fields:blockType'), type: 'text', }, ] @@ -86,6 +86,9 @@ const Iterable: React.FC = ({ )} locales={locales} version={versionRow} + i18n={i18n} + locale={locale} + config={config} />
) @@ -94,12 +97,11 @@ const Iterable: React.FC = ({ )} {maxRows === 0 && (
- No rows found - {/* {t('noRowsFound', { + {i18n.t('noRowsFound', { label: field.labels?.plural ? getTranslation(field.labels?.plural, i18n) - : t('general:rows'), - })} */} + : i18n.t('general:rows'), + })}
)} diff --git a/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Nested/index.tsx b/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Nested/index.tsx index 292d5ee3d1..80165fbc81 100644 --- a/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Nested/index.tsx +++ b/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Nested/index.tsx @@ -19,17 +19,15 @@ const Nested: React.FC = ({ locales, permissions, version, + i18n, + config, }) => { - // const { i18n } = useTranslation() - return (
{field.label && ( )}
= ({ fields={field.fields} locales={locales} version={version} + i18n={i18n} + locale={locale} + config={config} />
diff --git a/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Relationship/index.tsx b/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Relationship/index.tsx index e250a22165..850500a102 100644 --- a/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Relationship/index.tsx +++ b/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Relationship/index.tsx @@ -1,8 +1,6 @@ -'use client' import React from 'react' import { getTranslation } from '@payloadcms/translations' import ReactDiffViewer from 'react-diff-viewer-continued' -import { useTranslation } from '@payloadcms/ui' import type { RelationshipField, SanitizedCollectionConfig } from 'payload/types' import type { Props } from '../types' @@ -10,7 +8,6 @@ import type { Props } from '../types' import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/types' import Label from '../../Label' import { diffStyles } from '../styles' -import { useConfig, useLocale } from '@payloadcms/ui' import './index.scss' @@ -72,14 +69,13 @@ const Relationship: React.FC = ({ comparison, field, version, + i18n, + locale, + config: { collections }, }) => { - const { collections } = useConfig() - const { i18n, t } = useTranslation() - const { code: locale } = useLocale() - let placeholder = '' - if (version === comparison) placeholder = `[${t('general:noValue')}]` + if (version === comparison) placeholder = `[${i18n.t('general:noValue')}]` let versionToRender = version let comparisonToRender = comparison diff --git a/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Select/index.tsx b/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Select/index.tsx index 7b8f7d31ce..dc90e0194a 100644 --- a/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Select/index.tsx +++ b/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Select/index.tsx @@ -1,6 +1,4 @@ -import type { i18n as Ii18n } from 'i18next' - -import { getTranslation } from '@payloadcms/translations' +import { getTranslation, I18n } from '@payloadcms/translations' import React from 'react' import { DiffMethod } from 'react-diff-viewer-continued' @@ -34,31 +32,21 @@ const getOptionsToRender = ( const getTranslatedOptions = ( options: (OptionObject | string)[] | OptionObject | string, - i18n: Ii18n, + i18n: I18n, ): string => { if (Array.isArray(options)) { - return ( - options - // TODO: fix this - // @ts-ignore-next-line - .map((option) => (typeof option === 'string' ? option : getTranslation(option.label, i18n))) - .join(', ') - ) + return options + .map((option) => (typeof option === 'string' ? option : getTranslation(option.label, i18n))) + .join(', ') } - // TODO: fix this - // @ts-ignore-next-line + return typeof options === 'string' ? options : getTranslation(options.label, i18n) } -const Select: React.FC = ({ comparison, diffMethod, field, locale, version }) => { +const Select: React.FC = ({ comparison, diffMethod, field, locale, version, i18n }) => { let placeholder = '' - // const { i18n, t } = useTranslation('general') - const t = (key: string) => key // TODO - const i18n = { - options: {}, - } as Ii18n // TODO - if (version === comparison) placeholder = `[${t('noValue')}]` + if (version === comparison) placeholder = `[${i18n.t('general:noValue')}]` const comparisonToRender = typeof comparison !== 'undefined' @@ -73,8 +61,6 @@ const Select: React.FC = ({ comparison, diffMethod, field, locale, versio
= ({ locales, permissions, version, + i18n, + config, + locale, }) => (
@@ -29,6 +32,9 @@ const Tabs: React.FC = ({ locales={locales} permissions={permissions} version={version?.[tab.name]} + i18n={i18n} + config={config} + locale={locale} /> ) } @@ -42,6 +48,9 @@ const Tabs: React.FC = ({ key={i} locales={locales} version={version} + i18n={i18n} + config={config} + locale={locale} /> ) })} diff --git a/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Text/index.tsx b/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Text/index.tsx index 7b85c22528..bc92cb6c97 100644 --- a/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Text/index.tsx +++ b/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Text/index.tsx @@ -17,12 +17,11 @@ const Text: React.FC = ({ isRichText = false, locale, version, + i18n, }) => { let placeholder = '' - const t = (key: string) => key // TODO - const i18n = {} // TODO - if (version === comparison) placeholder = `[${t('noValue')}]` + if (version === comparison) placeholder = `[${i18n.t('general:noValue')}]` let versionToRender = version let comparisonToRender = comparison @@ -37,8 +36,7 @@ const Text: React.FC = ({ > @@ -12,8 +14,10 @@ export type Props = { field: any fieldComponents: FieldComponents isRichText?: boolean - locale?: string + locale: string locales?: string[] permissions?: Record version: any + i18n: I18n + config: SanitizedConfig } diff --git a/packages/next/src/pages/Version/RenderFieldsToDiff/index.tsx b/packages/next/src/pages/Version/RenderFieldsToDiff/index.tsx index 2c87198359..b8e3b1d248 100644 --- a/packages/next/src/pages/Version/RenderFieldsToDiff/index.tsx +++ b/packages/next/src/pages/Version/RenderFieldsToDiff/index.tsx @@ -18,6 +18,9 @@ const RenderFieldsToDiff: React.FC = ({ fields, locales, version, + i18n, + locale, + config, }) => { return (
@@ -60,6 +63,8 @@ const RenderFieldsToDiff: React.FC = ({ locales={locales} permissions={subFieldPermissions} version={versionLocaleValue} + i18n={i18n} + config={config} />
@@ -80,6 +85,9 @@ const RenderFieldsToDiff: React.FC = ({ locales={locales} permissions={subFieldPermissions} version={versionValue} + i18n={i18n} + locale={locale} + config={config} />
) @@ -96,6 +104,9 @@ const RenderFieldsToDiff: React.FC = ({ key={i} locales={locales} version={version} + i18n={i18n} + locale={locale} + config={config} /> ) } @@ -112,6 +123,9 @@ const RenderFieldsToDiff: React.FC = ({ locales={locales} permissions={fieldPermissions} version={version} + i18n={i18n} + locale={locale} + config={config} /> ) } diff --git a/packages/next/src/pages/Version/RenderFieldsToDiff/types.ts b/packages/next/src/pages/Version/RenderFieldsToDiff/types.ts index d97b852715..7f58f0d843 100644 --- a/packages/next/src/pages/Version/RenderFieldsToDiff/types.ts +++ b/packages/next/src/pages/Version/RenderFieldsToDiff/types.ts @@ -1,6 +1,7 @@ import type { FieldPermissions } from 'payload/auth' -import type { Field } from 'payload/types' +import type { Field, SanitizedConfig } from 'payload/types' import type { FieldComponents } from './fields/types' +import type { I18n } from '@payloadcms/translations' export type Props = { comparison: Record @@ -9,4 +10,7 @@ export type Props = { fields: Field[] locales: string[] version: Record + i18n: I18n + config: SanitizedConfig + locale: string } diff --git a/packages/next/src/pages/Versions/index.tsx b/packages/next/src/pages/Versions/index.tsx index decf548b35..0b1775cc4c 100644 --- a/packages/next/src/pages/Versions/index.tsx +++ b/packages/next/src/pages/Versions/index.tsx @@ -6,12 +6,13 @@ import { PerPage, Table, SetDocumentStepNav as SetStepNav, + EditViewProps, } from '@payloadcms/ui' import { buildVersionColumns } from './columns' import './index.scss' -import { EditViewProps } from '@payloadcms/ui' import { notFound } from 'next/navigation' +import { getTranslation } from '@payloadcms/translations' const baseClass = 'versions' @@ -58,7 +59,7 @@ export const VersionsView: React.FC = async (props) => { } docURL = `${serverURL}${api}/${slug}/${id}` - // entityLabel = getTranslation(collectionConfig.labels.singular, i18n) + entityLabel = getTranslation(collectionConfig.labels.singular, i18n) editURL = `${admin}/collections/${collectionSlug}/${id}` } @@ -85,7 +86,7 @@ export const VersionsView: React.FC = async (props) => { } docURL = `${serverURL}${api}/globals/${globalSlug}` - // entityLabel = getTranslation(globalConfig.label, i18n) + entityLabel = getTranslation(globalConfig.label, i18n) editURL = `${admin}/globals/${globalSlug}` } @@ -108,24 +109,28 @@ export const VersionsView: React.FC = async (props) => { globalSlug={globalConfig?.slug} id={id} isEditing - view="Versions" // TODO; i18n pluralLabel={collectionConfig?.labels?.plural} - // view={t('versions')} + view={i18n.t('version:versions')} /> {/* */}
{/* */} {versionCount === 0 && ( -
{/* {t('noFurtherVersionsFound')} */}
+
+ {i18n.t('version:noFurtherVersionsFound')} +
)} {versionCount > 0 && ( - {/*
- {t(versionCount === 1 ? 'versionCount_one' : 'versionCount_many', { - count: versionCount, - })} -
*/} +
+ {i18n.t( + versionCount === 1 ? 'version:versionCount_one' : 'version:versionCount_many', + { + count: versionCount, + }, + )} +
= async (props) => { {versionsData.totalPages > 1 && versionsData.totalPages !== versionsData.page ? versionsData.limit * versionsData.page : versionsData.totalDocs}{' '} - {/* {t('of')} {versionsData.totalDocs} */} + {i18n.t('general:of')} {versionsData.totalDocs} maxRows) { - return t('validation:requiresNoMoreThan', { count: maxRows, label: t('rows') }) + return t('validation:requiresNoMoreThan', { count: maxRows, label: t('general:rows') }) } if (required && !arrayLength) { - return t('validation:requiresAtLeast', { count: 1, label: t('row') }) + return t('validation:requiresAtLeast', { count: 1, label: t('general:row') }) } return true @@ -218,11 +218,11 @@ export const number: Validate = ( const numberValue = parseFloat(number as unknown as string) if (typeof max === 'number' && numberValue > max) { - return t('validation:greaterThanMax', { label: t('value'), max, value }) + return t('validation:greaterThanMax', { label: t('general:value'), max, value }) } if (typeof min === 'number' && numberValue < min) { - return t('validation:lessThanMin', { label: t('value'), min, value }) + return t('validation:lessThanMin', { label: t('general:value'), min, value }) } } @@ -382,11 +382,19 @@ export const relationship: Validate = async if (Array.isArray(value) && value.length > 0) { if (minRows && value.length < minRows) { - return t('validation:lessThanMin', { label: t('rows'), min: minRows, value: value.length }) + return t('validation:lessThanMin', { + label: t('general:rows'), + min: minRows, + value: value.length, + }) } if (maxRows && value.length > maxRows) { - return t('validation:greaterThanMax', { label: t('rows'), max: maxRows, value: value.length }) + return t('validation:greaterThanMax', { + label: t('general:rows'), + max: maxRows, + value: value.length, + }) } } diff --git a/packages/ui/src/elements/DocumentControls/index.tsx b/packages/ui/src/elements/DocumentControls/index.tsx index d38575ddd2..caf58c18f8 100644 --- a/packages/ui/src/elements/DocumentControls/index.tsx +++ b/packages/ui/src/elements/DocumentControls/index.tsx @@ -74,16 +74,12 @@ export const DocumentControls: React.FC<{ {collectionConfig && !isEditing && !isAccountView && (

  • - Creating new{' '} - {typeof collectionConfig?.labels?.singular === 'string' - ? collectionConfig.labels.singular - : 'Doc'} - {/* {t('creatingNewLabel', { + {i18n.t('creatingNewLabel', { label: typeof collectionConfig?.labels?.singular === 'string' ? collectionConfig.labels.singular : 'document', - })} */} + })}

    • )} @@ -123,7 +119,7 @@ export const DocumentControls: React.FC<{ data?.updatedAt ? formatDate(data?.updatedAt, dateFormat, i18n.language) : '' } > -

    {/* {t('lastModified')}:  */}

    +

    {i18n.t('general:lastModified')}: 

    {data?.updatedAt && (

    {formatDate(data.updatedAt, dateFormat, i18n.language)} @@ -138,7 +134,7 @@ export const DocumentControls: React.FC<{ data?.createdAt ? formatDate(data?.createdAt, dateFormat, i18n.language) : '' } > -

    {/* {t('created')}:  */}

    +

    {i18n.t('general:created')}: 

    {data?.createdAt && (

    {formatDate(data?.createdAt, dateFormat, i18n.language)} @@ -213,8 +209,7 @@ export const DocumentControls: React.FC<{ id="action-create" to={`${adminRoute}/collections/${collectionConfig?.slug}/create`} > - Create New - {/* {t('createNew')} */} + {i18n.t('general:createNew')} {!collectionConfig?.admin?.disableDuplicate && isEditing && ( = (props) => { - const { className, fieldTypes, forceRender, margins, data, user, state } = props + const { className, fieldTypes, forceRender, margins, data, user, state, i18n } = props if ('fields' in props) { + if (!i18n) { + console.error('Need to implement i18n when calling RenderFields') + } + return (

    = (props) => { return (
    - {/* {t('error:noMatchedField', { - label: fieldAffectsData(field) - ? getTranslation(field.label || field.name, i18n) - : field.path, - })} */} + {i18n + ? i18n.t('error:noMatchedField', { + label: fieldAffectsData(field) + ? getTranslation(field.label || field.name, i18n) + : field.path, + }) + : 'Need to implement i18n when calling RenderFields'}
    ) })} diff --git a/packages/ui/src/forms/RenderFields/types.ts b/packages/ui/src/forms/RenderFields/types.ts index aae917d94c..6cf1e0baa2 100644 --- a/packages/ui/src/forms/RenderFields/types.ts +++ b/packages/ui/src/forms/RenderFields/types.ts @@ -3,6 +3,7 @@ import type { Document, Field, FieldWithPath } from 'payload/types' import type { ReducedField } from './filterFields' import { Fields } from '../Form/types' import { FieldTypes } from 'payload/config' +import { I18n } from '@payloadcms/translations' export type Props = { className?: string @@ -18,6 +19,7 @@ export type Props = { } | FieldPermissions readOnly?: boolean + i18n?: I18n } & ( | { // Fields to be filtered by the component diff --git a/packages/ui/src/views/Edit/index.tsx b/packages/ui/src/views/Edit/index.tsx index 3b939b3a85..423b8f4784 100644 --- a/packages/ui/src/views/Edit/index.tsx +++ b/packages/ui/src/views/Edit/index.tsx @@ -5,7 +5,7 @@ import Form from '../../forms/Form' import { OperationProvider } from '../../providers/OperationProvider' import './index.scss' -// import { getTranslation } from 'payload/utilities' +// import { getTranslation } from '@payloadcms/translations' import { DocumentControls } from '../../elements/DocumentControls' import { DocumentFields } from '../../elements/DocumentFields' import { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving' @@ -114,12 +114,12 @@ export const DefaultEditView: React.FC = async (props) => { /> {/* = (props) => { useAsTitle, } = {}, fields, - labels: { plural: pluralLabel }, + labels: { plural: pluralLabel, singular: singularLabel } = {}, slug: collectionSlug, }, customHeader, @@ -104,15 +104,15 @@ export const DefaultList: React.FC = (props) => { {customHeader && customHeader} {!customHeader && ( -

    {typeof pluralLabel === 'string' ? pluralLabel : pluralLabel['en']}

    - {/*

    {getTranslation(pluralLabel, i18n)}

    */} +

    {getTranslation(pluralLabel, i18n)}

    {hasCreatePermission && ( - Create New - {/* {t('createNew')} */} + {i18n.t('general:createNew')} )} {/* {!smallBreak && ( @@ -152,11 +152,10 @@ export const DefaultList: React.FC = (props) => { )} {data.docs && data.docs.length === 0 && (
    - {/*

    {t('noResults', { label: getTranslation(pluralLabel, i18n) })}

    */} +

    {i18n.t('general:noResults', { label: getTranslation(pluralLabel, i18n) })}

    {hasCreatePermission && newDocumentURL && ( )}
    @@ -184,7 +183,7 @@ export const DefaultList: React.FC = (props) => { {data.totalPages > 1 && data.totalPages !== data.page ? data.limit * data.page : data.totalDocs}{' '} - {/* {t('of')} {data.totalDocs} */} + {i18n.t('general:of')} {data.totalDocs}