adds Translation component and removes more react-i18next

2024-01-16 09:36:35 -05:00
parent 0bc7c452c3
commit 13313028b5
43 changed files with 292 additions and 211 deletions
--- 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",
--- 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'
--- 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<Fields>({})

-  const { i18n, t } = useTranslation(['upload', 'general'])
+  const { i18n, t } = useTranslation()
  const editor = useSlate()
  const config = useConfig()

--- 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={() => (
            <div className={`${baseClass}__popup`}>
              {element.linkType === 'internal' && element.doc?.relationTo && element.doc?.value && (
-                <Trans
+                <Translation
+                  elements={{
+                    '0': ({ children }) => (
+                      <a
+                        className={`${baseClass}__link-label`}
+                        href={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}
+                        rel="noreferrer"
+                        target="_blank"
+                        title={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}
+                      >
+                        {children}
+                      </a>
+                    ),
+                  }}
                  i18nKey="fields:linkedTo"
-                  values={{
+                  t={t}
+                  variables={{
                    label: getTranslation(
                      config.collections.find(({ slug }) => slug === element.doc.relationTo)?.labels
                        ?.singular,
                      i18n,
                    ),
                  }}
-                >
-                  <a
-                    className={`${baseClass}__link-label`}
-                    href={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}
-                    rel="noreferrer"
-                    target="_blank"
-                    title={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}
-                  >
-                    label
-                  </a>
-                </Trans>
+                />
              )}
              {(element.linkType === 'custom' || !element.linkType) && (
                <a
--- a/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.tsx
+++ b/packages/richtext-slate/src/field/elements/link/LinkDrawer/index.tsx
@@ -1,12 +1,16 @@
 'use client'

-import { Drawer } from 'payload/components/elements'
-import { Form, FormSubmit, RenderFields } from 'payload/components/forms'
-import { fieldTypes } from 'payload/components/forms'
+import {
+  Drawer,
+  Form,
+  FormSubmit,
+  RenderFields,
+  fieldTypes,
+  useEditDepth,
+  useTranslation,
+} from '@payloadcms/ui'
 import { useHotkey } from 'payload/components/hooks'
-import { useEditDepth } from 'payload/components/utilities'
 import React, { useRef } from 'react'
-import { useTranslation } from 'react-i18next'

 import type { Props } from './types'

@@ -20,10 +24,10 @@ export const LinkDrawer: React.FC<Props> = ({
  handleModalSubmit,
  initialState,
 }) => {
-  const { t } = useTranslation('fields')
+  const { t } = useTranslation()

  return (
-    <Drawer className={baseClass} slug={drawerSlug} title={t('editLink')}>
+    <Drawer className={baseClass} slug={drawerSlug} title={t('fields:editLink')}>
      <Form fields={fieldSchema} initialState={initialState} onSubmit={handleModalSubmit}>
        <RenderFields
          fieldSchema={fieldSchema}
@@ -38,7 +42,7 @@ export const LinkDrawer: React.FC<Props> = ({
 }

 const LinkSubmit: React.FC = () => {
-  const { t } = useTranslation('fields')
+  const { t } = useTranslation()
  const ref = useRef<HTMLButtonElement>(null)
  const editDepth = useEditDepth()

--- 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<string>(([fields]) => fields.relationTo?.value as string)
@@ -39,10 +42,15 @@ const RelationshipFields = () => {

  return (
    <Fragment>
-      <SelectComponent label={t('relationTo')} name="relationTo" options={options} required />
+      <SelectComponent
+        label={t('fields:relationTo')}
+        name="relationTo"
+        options={options}
+        required
+      />
      {relationTo && (
        <RelationshipComponent
-          label={t('relatedDocument')}
+          label={t('fields:relatedDocument')}
          name="value"
          relationTo={relationTo}
          required
--- a/packages/richtext-slate/src/field/elements/relationship/Button/index.tsx
+++ b/packages/richtext-slate/src/field/elements/relationship/Button/index.tsx
@@ -1,8 +1,7 @@
 'use client'

-import { useListDrawer } from 'payload/components/elements'
+import { useListDrawer, useTranslation } from '@payloadcms/ui'
 import React, { Fragment, useCallback, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { ReactEditor, useSlate } from 'slate-react'

 import RelationshipIcon from '../../../icons/Relationship'
@@ -33,7 +32,7 @@ type Props = {
  path: string
 }
 const RelationshipButton: React.FC<Props> = ({ 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<Props> = ({ enabledCollectionSlugs }) => {
          onClick={() => {
            // do nothing
          }}
-          tooltip={t('addRelationship')}
+          tooltip={t('fields:addRelationship')}
        >
          <RelationshipIcon />
        </ElementButton>
--- 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> = (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> = (props) => {
    >
      <div className={`${baseClass}__wrap`}>
        <p className={`${baseClass}__label`}>
-          {t('labelRelationship', {
+          {t('fields:labelRelationship', {
            label: getTranslation(relatedCollection.labels.singular, i18n),
          })}
        </p>
@@ -165,7 +168,7 @@ const Element: React.FC<Props> = (props) => {
              // do nothing
            }}
            round
-            tooltip={t('swapRelationship')}
+            tooltip={t('fields:swapRelationship')}
          />
        </ListDrawerToggler>
        <Button
--- a/packages/richtext-slate/src/field/elements/upload/Button/index.tsx
+++ b/packages/richtext-slate/src/field/elements/upload/Button/index.tsx
@@ -1,8 +1,7 @@
 'use client'

-import { useListDrawer } from 'payload/components/elements'
+import { useListDrawer, useTranslation } from '@payloadcms/ui'
 import React, { Fragment, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
 import { ReactEditor, useSlate } from 'slate-react'

 import UploadIcon from '../../../icons/Upload'
@@ -34,7 +33,7 @@ type ButtonProps = {
 }

 const UploadButton: React.FC<ButtonProps> = ({ enabledCollectionSlugs }) => {
-  const { t } = useTranslation(['upload', 'general'])
+  const { t } = useTranslation()
  const editor = useSlate()

  const [ListDrawer, ListDrawerToggler, { closeDrawer }] = useListDrawer({
--- a/packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx
+++ b/packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx
@@ -3,19 +3,23 @@
 import type { SanitizedCollectionConfig } from 'payload/types'

 import { useModal } from '@faceless-ui/modal'
-import { Drawer } from 'payload/components/elements'
-import { Form, FormSubmit, RenderFields, fieldTypes } from 'payload/components/forms'
+import { getTranslation } from '@payloadcms/translations'
 import {
+  Drawer,
+  Form,
+  FormSubmit,
+  RenderFields,
  buildStateFromSchema,
+  fieldTypes,
  useAuth,
  useConfig,
  useDocumentInfo,
  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 { useTranslation } from 'react-i18next'
 import { Transforms } from 'slate'
 import { ReactEditor, useSlateStatic } from 'slate-react'

--- a/packages/richtext-slate/src/field/elements/upload/Element/index.tsx
+++ b/packages/richtext-slate/src/field/elements/upload/Element/index.tsx
@@ -3,19 +3,20 @@
 import type { SanitizedCollectionConfig } from 'payload/types'
 import type { HTMLAttributes } from 'react'

-import { Button } from 'payload/components'
+import { getTranslation } from '@payloadcms/translations'
 import {
+  Button,
  DrawerToggler,
+  FileGraphic,
+  useConfig,
  useDocumentDrawer,
  useDrawerSlug,
  useListDrawer,
-} from 'payload/components/elements'
-import { FileGraphic } from 'payload/components/graphics'
-import { usePayloadAPI, useThumbnail } from 'payload/components/hooks'
-import { useConfig } from 'payload/components/utilities'
-import { getTranslation } from 'payload/utilities'
+  usePayloadAPI,
+  useThumbnail,
+  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'

@@ -54,7 +55,7 @@ const Element: React.FC<ElementProps> = (props) => {
    routes: { api },
    serverURL,
  } = useConfig()
-  const { i18n, t } = useTranslation('fields')
+  const { i18n, t } = useTranslation()
  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0)
  const [relatedCollection, setRelatedCollection] = useState<SanitizedCollectionConfig>(() =>
    collections.find((coll) => coll.slug === relationTo),
@@ -187,7 +188,7 @@ const Element: React.FC<ElementProps> = (props) => {
                    // do nothing
                  }}
                  round
-                  tooltip={t('swapUpload')}
+                  tooltip={t('fields:swapUpload')}
                />
              </ListDrawerToggler>
              <Button
@@ -200,7 +201,7 @@ const Element: React.FC<ElementProps> = (props) => {
                  removeUpload()
                }}
                round
-                tooltip={t('removeUpload')}
+                tooltip={t('fields:removeUpload')}
              />
            </div>
          </div>