@sanity/document-internationalization 4.1.1 → 5.0.1

package/src/components/DeleteTranslationDialog/index.tsx

@@ -1,111 +0,0 @@
-import {Card, Flex, Spinner, Stack, Text} from '@sanity/ui'
-import {useEffect, useMemo} from 'react'
-import type {SanityDocument} from 'sanity'
-import {useListeningQuery} from 'sanity-plugin-utils'
-
-import DocumentPreview from './DocumentPreview'
-import {separateReferences} from './separateReferences'
-
-type DeleteTranslationDialogProps = {
-  doc: SanityDocument
-  documentId: string
-  setTranslations: (translations: SanityDocument[]) => void
-}
-
-export default function DeleteTranslationDialog(
-  props: DeleteTranslationDialogProps
-) {
-  const {doc, documentId, setTranslations} = props
-
-  // Get all references and check if any of them are translations metadata
-  const {data, loading} = useListeningQuery<SanityDocument[]>(
-    `*[references($id)]{_id, _type}`,
-    {params: {id: documentId}, initialValue: []}
-  )
-  const {translations, otherReferences} = useMemo(
-    () => separateReferences(data as SanityDocument[] | null),
-    [data]
-  )
-
-  useEffect(() => {
-    setTranslations(translations)
-  }, [setTranslations, translations])
-
-  if (loading) {
-    return (
-      <Flex padding={4} align="center" justify="center">
-        <Spinner />
-      </Flex>
-    )
-  }
-
-  return (
-    <Stack space={4}>
-      {translations && translations.length > 0 ? (
-        <Text>
-          This document is a language-specific version which other translations
-          depend on.
-        </Text>
-      ) : (
-        <Text>This document does not have connected translations.</Text>
-      )}
-      <Card border padding={3}>
-        <Stack space={4}>
-          <Text size={1} weight="semibold">
-            {translations && translations.length > 0 ? (
-              <>Before this document can be deleted</>
-            ) : (
-              <>This document can now be deleted</>
-            )}
-          </Text>
-          <DocumentPreview value={doc} type={doc._type} />
-          {translations && translations.length > 0 ? (
-            <>
-              <Card borderTop />
-              <Text size={1} weight="semibold">
-                The reference in{' '}
-                {translations.length === 1
-                  ? `this translations document`
-                  : `these translations documents`}{' '}
-                must be removed
-              </Text>
-              {translations.map((translation) => (
-                <DocumentPreview
-                  key={translation._id}
-                  value={translation}
-                  type={translation._type}
-                />
-              ))}
-            </>
-          ) : null}
-          {otherReferences && otherReferences.length > 0 ? (
-            <>
-              <Card borderTop />
-              <Text size={1} weight="semibold">
-                {otherReferences.length === 1
-                  ? `There is an additional reference`
-                  : `There are additional references`}{' '}
-                to this document
-              </Text>
-              {otherReferences.map((reference) => (
-                <DocumentPreview
-                  key={reference._id}
-                  value={reference}
-                  type={reference._type}
-                />
-              ))}
-            </>
-          ) : null}
-        </Stack>
-      </Card>
-      {otherReferences.length === 0 ? (
-        <Text>This document has no other references.</Text>
-      ) : (
-        <Text>
-          You may not be able to delete this document because other documents
-          refer to it.
-        </Text>
-      )}
-    </Stack>
-  )
-}

package/src/components/DeleteTranslationDialog/separateReferences.ts

@@ -1,23 +0,0 @@
-import type {SanityDocument} from 'sanity'
-
-import {METADATA_SCHEMA_NAME} from '../../constants'
-
-export function separateReferences(data: SanityDocument[] | null = []): {
-  translations: SanityDocument[]
-  otherReferences: SanityDocument[]
-} {
-  const translations: SanityDocument[] = []
-  const otherReferences: SanityDocument[] = []
-
-  if (data && data.length > 0) {
-    data.forEach((doc) => {
-      if (doc._type === METADATA_SCHEMA_NAME) {
-        translations.push(doc)
-      } else {
-        otherReferences.push(doc)
-      }
-    })
-  }
-
-  return {translations, otherReferences}
-}

package/src/components/DeleteTranslationFooter.tsx

@@ -1,28 +0,0 @@
-import {Button, Grid} from '@sanity/ui'
-
-type DeleteTranslationFooterProps = {
-  translations: unknown[]
-  onClose: () => void
-  onProceed: () => void
-}
-
-export default function DeleteTranslationFooter(
-  props: DeleteTranslationFooterProps
-) {
-  const {translations, onClose, onProceed} = props
-
-  return (
-    <Grid columns={2} gap={2}>
-      <Button text="Cancel" onClick={onClose} mode="ghost" />
-      <Button
-        text={
-          translations && translations.length > 0
-            ? `Unset translation reference`
-            : `Delete document`
-        }
-        onClick={onProceed}
-        tone="critical"
-      />
-    </Grid>
-  )
-}

package/src/components/DocumentInternationalizationContext.tsx

@@ -1,47 +0,0 @@
-import {useContext} from 'react'
-import {createContext} from 'react'
-import {type LayoutProps, useClient, useWorkspace} from 'sanity'
-import {suspend} from 'suspend-react'
-
-import {DEFAULT_CONFIG} from '../constants'
-import type {PluginConfig, PluginConfigContext} from '../types'
-
-const DocumentInternationalizationContext =
-  createContext<PluginConfigContext>(DEFAULT_CONFIG)
-
-export function useDocumentInternationalizationContext() {
-  return useContext(DocumentInternationalizationContext)
-}
-
-type DocumentInternationalizationProviderProps = LayoutProps & {
-  pluginConfig: Required<PluginConfig>
-}
-
-/**
- * This Provider wraps the Studio and provides the DocumentInternationalization context to document actions and components.
- */
-export function DocumentInternationalizationProvider(
-  props: DocumentInternationalizationProviderProps
-) {
-  const {pluginConfig} = props
-
-  const client = useClient({apiVersion: pluginConfig.apiVersion})
-  const workspace = useWorkspace()
-  const supportedLanguages = Array.isArray(pluginConfig.supportedLanguages)
-    ? pluginConfig.supportedLanguages
-    : // eslint-disable-next-line require-await
-      suspend(async () => {
-        if (typeof pluginConfig.supportedLanguages === 'function') {
-          return pluginConfig.supportedLanguages(client)
-        }
-        return pluginConfig.supportedLanguages
-      }, [workspace])
-
-  return (
-    <DocumentInternationalizationContext.Provider
-      value={{...pluginConfig, supportedLanguages}}
-    >
-      {props.renderDefault(props)}
-    </DocumentInternationalizationContext.Provider>
-  )
-}

package/src/components/DocumentInternationalizationMenu.tsx

@@ -1,235 +0,0 @@
-import {TranslateIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Popover,
-  Stack,
-  Text,
-  TextInput,
-  useClickOutside,
-} from '@sanity/ui'
-import {uuid} from '@sanity/uuid'
-import {type FormEvent, useCallback, useMemo, useState} from 'react'
-import {useEditState} from 'sanity'
-
-import {useTranslationMetadata} from '../hooks/useLanguageMetadata'
-import type {DocumentInternationalizationMenuProps} from '../types'
-import {useDocumentInternationalizationContext} from './DocumentInternationalizationContext'
-import LanguageManage from './LanguageManage'
-import LanguageOption from './LanguageOption'
-import LanguagePatch from './LanguagePatch'
-import Warning from './Warning'
-
-export function DocumentInternationalizationMenu(
-  props: DocumentInternationalizationMenuProps
-) {
-  const {documentId} = props
-  const schemaType = props.schemaType
-  const {languageField, supportedLanguages} =
-    useDocumentInternationalizationContext()
-
-  // Search filter query
-  const [query, setQuery] = useState(``)
-  const handleQuery = useCallback((event: FormEvent<HTMLInputElement>) => {
-    if (event.currentTarget.value) {
-      setQuery(event.currentTarget.value)
-    } else {
-      setQuery(``)
-    }
-  }, [])
-
-  // UI Handlers
-  const [open, setOpen] = useState(false)
-  const handleClick = useCallback(() => setOpen((o) => !o), [])
-  const [button, setButton] = useState<HTMLElement | null>(null)
-  const [popover, setPopover] = useState<HTMLElement | null>(null)
-  const handleClickOutside = useCallback(() => setOpen(false), [])
-  useClickOutside(handleClickOutside, [button, popover])
-
-  // Get metadata from content lake
-  const {data, loading, error} = useTranslationMetadata(documentId)
-  const metadata = Array.isArray(data) && data.length ? data[0] : null
-
-  // Optimistically set a metadata ID for a newly created metadata document
-  // Cannot rely on generated metadata._id from useTranslationMetadata
-  // As the document store might not have returned it before creating another translation
-  const metadataId = useMemo(() => {
-    if (loading) {
-      return null
-    }
-
-    // Once created, these two values should be the same anyway
-    return metadata?._id ?? uuid()
-  }, [loading, metadata?._id])
-
-  // Duplicate a new language version from the most recent version of this document
-  const {draft, published} = useEditState(documentId, schemaType.name)
-  const source = draft || published
-
-  // Check for data issues
-  const documentIsInOneMetadataDocument = useMemo(() => {
-    return Array.isArray(data) && data.length <= 1
-  }, [data])
-  const sourceLanguageId = source?.[languageField] as string | undefined
-  const sourceLanguageIsValid = supportedLanguages.some(
-    (l) => l.id === sourceLanguageId
-  )
-  const allLanguagesAreValid = useMemo(() => {
-    const valid = supportedLanguages.every((l) => l.id && l.title)
-    if (!valid) {
-      console.warn(
-        `Not all languages are valid. It should be an array of objects with an "id" and "title" property. Or a function that returns an array of objects with an "id" and "title" property.`,
-        supportedLanguages
-      )
-    }
-
-    return valid
-  }, [supportedLanguages])
-
-  const content = (
-    <Box padding={1}>
-      {error ? (
-        <Card tone="critical" padding={1}>
-          <Text>There was an error returning translations metadata</Text>
-        </Card>
-      ) : (
-        <Stack space={1}>
-          <LanguageManage
-            id={metadata?._id}
-            documentId={documentId}
-            metadataId={metadataId}
-            schemaType={schemaType}
-            sourceLanguageId={sourceLanguageId}
-          />
-          {supportedLanguages.length > 4 ? (
-            <TextInput
-              onChange={handleQuery}
-              value={query}
-              placeholder="Filter languages"
-            />
-          ) : null}
-          {supportedLanguages.length > 0 ? (
-            <>
-              {/* Once metadata is loaded, there may be issues */}
-              {loading ? null : (
-                <>
-                  {/* Not all languages are valid */}
-                  {data && documentIsInOneMetadataDocument ? null : (
-                    <Warning>
-                      {/* TODO: Surface these documents to the user */}
-                      This document has been found in more than one Translations
-                      Metadata documents
-                    </Warning>
-                  )}
-                  {/* Not all languages are valid */}
-                  {allLanguagesAreValid ? null : (
-                    <Warning>
-                      Not all language objects are valid. See the console.
-                    </Warning>
-                  )}
-                  {/* Current document has no language field */}
-                  {sourceLanguageId ? null : (
-                    <Warning>
-                      Choose a language to apply to{' '}
-                      <strong>this Document</strong>
-                    </Warning>
-                  )}
-                  {/* Current document has an invalid language field */}
-                  {sourceLanguageId && !sourceLanguageIsValid ? (
-                    <Warning>
-                      Select a supported language. Current language value:{' '}
-                      <code>{sourceLanguageId}</code>
-                    </Warning>
-                  ) : null}
-                </>
-              )}
-              {supportedLanguages
-                .filter((language) => {
-                  if (query) {
-                    return language.title
-                      .toLowerCase()
-                      .includes(query.toLowerCase())
-                  }
-                  return true
-                })
-                .map((language) =>
-                  !loading && sourceLanguageId && sourceLanguageIsValid ? (
-                    // Button to duplicate this document to a new translation
-                    // And either create or update the metadata document
-                    <LanguageOption
-                      key={language.id}
-                      language={language}
-                      schemaType={schemaType}
-                      documentId={documentId}
-                      disabled={loading || !allLanguagesAreValid}
-                      current={language.id === sourceLanguageId}
-                      metadata={metadata}
-                      metadataId={metadataId}
-                      source={source}
-                      sourceLanguageId={sourceLanguageId}
-                    />
-                  ) : (
-                    // Button to set a language field on *this* document
-                    <LanguagePatch
-                      key={language.id}
-                      source={source}
-                      language={language}
-                      // Only allow language patch change to:
-                      // - Keys not in metadata
-                      // - The key of this document in the metadata
-                      disabled={
-                        (loading ||
-                          !allLanguagesAreValid ||
-                          metadata?.translations
-                            .filter((t) => t?.value?._ref !== documentId)
-                            .some((t) => t._key === language.id)) ??
-                        false
-                      }
-                    />
-                  )
-                )}
-            </>
-          ) : null}
-        </Stack>
-      )}
-    </Box>
-  )
-
-  const issueWithTranslations =
-    !loading && sourceLanguageId && !sourceLanguageIsValid
-
-  if (!documentId) {
-    return null
-  }
-
-  if (!schemaType || !schemaType.name) {
-    return null
-  }
-
-  return (
-    <Popover
-      animate
-      constrainSize
-      content={content}
-      open={open}
-      portal
-      ref={setPopover}
-      overflow="auto"
-      tone="default"
-    >
-      <Button
-        text="Translations"
-        mode="bleed"
-        disabled={!source}
-        tone={
-          !source || loading || !issueWithTranslations ? undefined : `caution`
-        }
-        icon={TranslateIcon}
-        onClick={handleClick}
-        ref={setButton}
-        selected={open}
-      />
-    </Popover>
-  )
-}

package/src/components/LanguageManage.tsx

@@ -1,108 +0,0 @@
-import {CogIcon} from '@sanity/icons'
-import {Box, Button, Stack, Text, Tooltip} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-import {type ObjectSchemaType, useClient} from 'sanity'
-
-import {METADATA_SCHEMA_NAME} from '../constants'
-import {useOpenInNewPane} from '../hooks/useOpenInNewPane'
-import {createReference} from '../utils/createReference'
-import {useDocumentInternationalizationContext} from './DocumentInternationalizationContext'
-
-type LanguageManageProps = {
-  id?: string
-  metadataId?: string | null
-  schemaType: ObjectSchemaType
-  documentId: string
-  sourceLanguageId?: string
-}
-
-export default function LanguageManage(props: LanguageManageProps) {
-  const {id, metadataId, schemaType, documentId, sourceLanguageId} = props
-  const open = useOpenInNewPane(id, METADATA_SCHEMA_NAME)
-  const openCreated = useOpenInNewPane(metadataId, METADATA_SCHEMA_NAME)
-  const {allowCreateMetaDoc, apiVersion, weakReferences} =
-    useDocumentInternationalizationContext()
-  const client = useClient({apiVersion})
-  const [userHasClicked, setUserHasClicked] = useState(false)
-
-  const canCreate = !id && Boolean(metadataId) && allowCreateMetaDoc
-
-  const handleClick = useCallback(() => {
-    if (!id && metadataId && sourceLanguageId) {
-      /* Disable button while this request is pending */
-      setUserHasClicked(true)
-
-      // handle creation of meta document
-      const transaction = client.transaction()
-
-      const sourceReference = createReference(
-        sourceLanguageId,
-        documentId,
-        schemaType.name,
-        !weakReferences
-      )
-      const newMetadataDocument = {
-        _id: metadataId,
-        _type: METADATA_SCHEMA_NAME,
-        schemaTypes: [schemaType.name],
-        translations: [sourceReference],
-      }
-
-      transaction.createIfNotExists(newMetadataDocument)
-
-      transaction
-        .commit()
-        .then(() => {
-          setUserHasClicked(false)
-          openCreated()
-        })
-        .catch((err) => {
-          console.error(err)
-          setUserHasClicked(false)
-        })
-    } else {
-      open()
-    }
-  }, [
-    id,
-    metadataId,
-    sourceLanguageId,
-    client,
-    documentId,
-    schemaType.name,
-    weakReferences,
-    openCreated,
-    open,
-  ])
-
-  const disabled =
-    (!id && !canCreate) || (canCreate && !sourceLanguageId) || userHasClicked
-
-  return (
-    <Tooltip
-      animate
-      content={
-        <Box padding={2}>
-          <Text muted size={1}>
-            Document has no other translations
-          </Text>
-        </Box>
-      }
-      fallbackPlacements={['right', 'left']}
-      placement="top"
-      portal
-      disabled={Boolean(id) || canCreate}
-    >
-      <Stack>
-        <Button
-          disabled={disabled}
-          mode="ghost"
-          text="Manage Translations"
-          icon={CogIcon}
-          loading={userHasClicked}
-          onClick={handleClick}
-        />
-      </Stack>
-    </Tooltip>
-  )
-}