@sanity/document-internationalization 1.0.0 → 1.0.1

package/src/language-select/hooks/useLanguages.ts

@@ -0,0 +1,37 @@
+import {SanityDocument} from '@sanity/client'
+import {useCallback, useEffect, useState} from 'react'
+import {useEditState} from 'sanity'
+import {ILanguageObject} from '../../types'
+import {getLanguagesFromOption, useSanityClient, ApplyConfigResult} from '../../utils'
+
+export function useLanguages(
+  config: ApplyConfigResult,
+  document: SanityDocument
+): [boolean, ILanguageObject[]] {
+  const client = useSanityClient()
+  const {draft, published} = useEditState(document._id.replace(/^drafts\./, ''), document._type)
+  const [pending, setPending] = useState(false)
+  const [languages, setLanguages] = useState<ILanguageObject[]>([])
+
+  const loadOrReloadLanguages = useCallback(async () => {
+    const shouldReload =
+      languages.length === 0 || (config.shouldReload && config.shouldReload(draft ?? published))
+    if (shouldReload) {
+      setPending(true)
+      const languageObjects = await getLanguagesFromOption(
+        client,
+        config,
+        config.languages,
+        draft ?? published
+      )
+      setLanguages(languageObjects)
+      setPending(false)
+    }
+  }, [client, config, draft, published, languages])
+
+  useEffect(() => {
+    loadOrReloadLanguages()
+  }, [draft, published, languages, config, loadOrReloadLanguages])
+
+  return [pending, languages]
+}

package/src/language-select/hooks/useListeningQuery.ts

@@ -0,0 +1,66 @@
+import {useEffect, useState, useRef} from 'react'
+import {catchError, distinctUntilChanged} from 'rxjs/operators'
+import isEqual from 'react-fast-compare'
+import {useDocumentStore} from 'sanity'
+
+type Params = Record<string, string | number | boolean | string[]>
+
+interface ListenQueryOptions {
+  tag?: string
+  apiVersion?: string
+}
+
+type ReturnShape = {
+  loading: boolean
+  error: boolean
+  data: any
+}
+
+type Observable = {
+  unsubscribe: () => void
+}
+
+const DEFAULT_PARAMS = {}
+const DEFAULT_OPTIONS = {apiVersion: `v2022-05-09`}
+
+export function useListeningQuery(
+  query: string,
+  params: Params = DEFAULT_PARAMS,
+  options: ListenQueryOptions = DEFAULT_OPTIONS
+): ReturnShape {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+  const [data, setData] = useState(null)
+  const subscription = useRef<null | Observable>(null)
+
+  const documentStore = useDocumentStore()
+
+  useEffect(() => {
+    if (query) {
+      subscription.current = documentStore
+        .listenQuery(query, params, options)
+        .pipe(
+          distinctUntilChanged(isEqual),
+          catchError((err) => {
+            console.error(err)
+            setError(err)
+            setLoading(false)
+            setData(null)
+
+            return err
+          })
+        )
+        .subscribe((documents) => {
+          setData((current) => (isEqual(current, documents) ? current : documents))
+          setLoading(false)
+          setError(false)
+        })
+    }
+
+    return () => {
+      return subscription.current ? subscription.current.unsubscribe() : undefined
+    }
+  }, [query, params, options])
+
+  return {loading, error, data}
+}

package/src/structure/IDefaultDocumentNodeStructureProps.ts

@@ -0,0 +1,4 @@
+export interface IDefaultDocumentNodeStructureProps {
+  documentId: string
+  schemaType: string
+}

package/src/structure/components/MaintenanceTab/MaintenanceTab.tsx

@@ -0,0 +1,13 @@
+import React, {forwardRef, Ref, VoidFunctionComponent} from 'react'
+import {Ti18nConfig} from '../../../types'
+import {MaintenanceTabContent} from './MaintenanceTabContent'
+
+export interface MaintenanceTabProps {
+  config: Ti18nConfig
+}
+
+export function createMaintenanceTabComponent(props: MaintenanceTabProps): VoidFunctionComponent {
+  return forwardRef(function MaintenanceTab(p: any, ref: Ref<HTMLInputElement>) {
+    return <MaintenanceTabContent {...props} ref={ref} />
+  })
+}

package/src/structure/components/MaintenanceTab/MaintenanceTabContent.tsx

@@ -0,0 +1,259 @@
+import React, {forwardRef, Ref, useCallback, useState} from 'react'
+import {useSchema} from 'sanity'
+import {Box, Button, Card, Code, Container, Dialog, Flex, Grid, Stack, Text} from '@sanity/ui'
+import {Transaction} from '@sanity/client'
+import styled from 'styled-components'
+import {UiMessages} from '../../../constants'
+import {MaintenanceTabTypeSelector} from '../MaintenanceTabTypeSelector'
+import {useDocumentsInformation} from '../../hooks'
+import {MaintenanceTabResult} from '../MaintenanceTabResult'
+import {
+  fixBaseDocumentRefs,
+  fixBaseLanguageMismatch,
+  fixIdStructureMismatchDocuments,
+  fixLanguageFields,
+  fixOrphanedDocuments,
+  fixTranslationRefs,
+} from '../../utils'
+import {Ti18nConfig} from '../../../types'
+import {useSanityClient} from '../../../utils'
+import {useConfig} from '../../../hooks'
+
+const StyledCodeCard = styled(Card)`
+  grid-column-start: 1;
+  grid-row-start: 1;
+`
+
+const StyledCode = styled(Code)`
+  word-break: break-word;
+  white-space: break-spaces;
+`
+
+const StyledDownloadCodeFlex = styled(Flex)`
+  grid-column-start: 1;
+  grid-row-start: 1;
+`
+
+export interface MaintenanceTabContentProps {
+  config: Ti18nConfig
+}
+
+export const MaintenanceTabContent = forwardRef(function MaintenanceTabContent(
+  {config: pluginConfig}: MaintenanceTabContentProps,
+  ref: Ref<HTMLInputElement>
+) {
+  const [selectedSchema, setSelectedSchema] = useState('')
+  const client = useSanityClient()
+  const {
+    pending,
+    setPending,
+    documents,
+    baseDocuments,
+    translatedDocuments,
+    documentsSummaryInformation,
+    fetchInformation,
+  } = useDocumentsInformation(pluginConfig, selectedSchema)
+  const [pendingTransactions, setPendingTransactions] = useState<Transaction[] | null>(null)
+  const schemaRegistry = useSchema()
+  const config = useConfig(pluginConfig, selectedSchema)
+
+  const onSchemaTypeChange = useCallback((schemaName: string) => setSelectedSchema(schemaName), [])
+
+  const handleOpen = useCallback(() => setSelectedSchema(''), [])
+
+  const handleFixIdStructureMismatchDocuments = useCallback(() => {
+    setPendingTransactions(
+      fixIdStructureMismatchDocuments(client, config, selectedSchema, documents)
+    )
+  }, [client, config, selectedSchema, documents])
+
+  const handleFixMissingLanguageFields = useCallback(() => {
+    setPendingTransactions([fixLanguageFields(client, config, schemaRegistry, documents)])
+  }, [client, schemaRegistry, config, documents])
+
+  const handleFixTranslationRefs = useCallback(() => {
+    setPendingTransactions(fixTranslationRefs(client, config, baseDocuments, translatedDocuments))
+  }, [client, config, baseDocuments, translatedDocuments])
+
+  const handleFixBaseDocumntRefs = useCallback(() => {
+    setPendingTransactions([fixBaseDocumentRefs(client, config, translatedDocuments)])
+  }, [client, config, translatedDocuments])
+
+  const handleFixOrphanDocuments = useCallback(() => {
+    setPendingTransactions([
+      fixOrphanedDocuments(client, config, baseDocuments, translatedDocuments),
+    ])
+  }, [client, config, baseDocuments, translatedDocuments])
+
+  const handleFixReferenceBehaviorMismatch = useCallback(() => {
+    setPendingTransactions(fixTranslationRefs(client, config, baseDocuments, translatedDocuments))
+  }, [client, config, baseDocuments, translatedDocuments])
+
+  const handleFixBaseLanguageMismatch = useCallback(async () => {
+    setPendingTransactions([await fixBaseLanguageMismatch(client, config, baseDocuments)])
+  }, [client, config, baseDocuments])
+
+  const handleDownloadCode = useCallback(() => {
+    if (pendingTransactions) {
+      const json = JSON.stringify(
+        pendingTransactions.map((transaction) => transaction.toJSON()),
+        null,
+        2
+      )
+      const blob = new Blob([json], {
+        type: 'application/json',
+      })
+
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = 'transactions.json'
+      a.style.display = 'none'
+      document.body.appendChild(a)
+      a.click()
+      URL.revokeObjectURL(url)
+    }
+  }, [pendingTransactions])
+
+  const handleCancelPendingTransaction = useCallback(() => {
+    setPendingTransactions(null)
+  }, [setPendingTransactions])
+
+  const handleConfirmPendingTransaction = useCallback(async () => {
+    setPending(true)
+    try {
+      // run all transactions
+      if (pendingTransactions) {
+        await pendingTransactions.reduce<Promise<void>>(async (prev, transaction) => {
+          await prev
+          await transaction.commit()
+        }, Promise.resolve())
+        await fetchInformation(selectedSchema)
+        setPendingTransactions(null)
+      }
+    } catch (err) {
+      console.error(err)
+      // @TODO show error
+    } finally {
+      setPending(false)
+    }
+  }, [setPending, fetchInformation, selectedSchema, pendingTransactions])
+
+  return (
+    <Container width={1}>
+      <Stack space={2}>
+        <Box padding={4}>
+          <MaintenanceTabTypeSelector
+            value={selectedSchema}
+            onChange={onSchemaTypeChange}
+            onOpen={handleOpen}
+            ref={ref}
+          />
+        </Box>
+        {!!selectedSchema && (
+          <Box paddingX={4}>
+            <Stack space={2}>
+              <MaintenanceTabResult
+                pending={pending}
+                count={documentsSummaryInformation.idStructureMismatch.length}
+                labelName="idStructureMismatch"
+                onClick={handleFixIdStructureMismatchDocuments}
+              />
+              <MaintenanceTabResult
+                pending={pending}
+                count={documentsSummaryInformation.missingLanguageField.length}
+                labelName="missingLanguageField"
+                onClick={handleFixMissingLanguageFields}
+              />
+              <MaintenanceTabResult
+                pending={pending}
+                count={documentsSummaryInformation.missingDocumentRefs.length}
+                labelName="missingDocumentRefs"
+                onClick={handleFixTranslationRefs}
+              />
+              <MaintenanceTabResult
+                pending={pending}
+                count={documentsSummaryInformation.missingBaseDocumentRefs.length}
+                labelName="missingBaseDocumentRefs"
+                onClick={handleFixBaseDocumntRefs}
+              />
+              <MaintenanceTabResult
+                pending={pending}
+                count={documentsSummaryInformation.orphanDocuments.length}
+                labelName="orphanDocuments"
+                onClick={handleFixOrphanDocuments}
+              />
+              <MaintenanceTabResult
+                pending={pending}
+                count={documentsSummaryInformation.referenceBehaviorMismatch.length}
+                labelName="referenceBehaviorMismatch"
+                onClick={handleFixReferenceBehaviorMismatch}
+              />
+              <MaintenanceTabResult
+                pending={pending}
+                count={documentsSummaryInformation.baseLanguageMismatch.length}
+                labelName="baseLanguageMismatch"
+                onClick={handleFixBaseLanguageMismatch}
+              />
+            </Stack>
+          </Box>
+        )}
+      </Stack>
+      {!!pendingTransactions?.length && (
+        <Dialog
+          id="confirm-pending-transactions"
+          width={2}
+          header={UiMessages.translationsMaintenance.pendingTransactionDialog.header}
+          onClose={handleCancelPendingTransaction}
+          footer={
+            <Flex padding={3} justify="flex-end">
+              <Grid autoFlow="column" autoCols="auto" gap={2}>
+                <Button
+                  tone="default"
+                  loading={pending}
+                  disabled={pending}
+                  text={UiMessages.translationsMaintenance.pendingTransactionDialog.cancel}
+                  onClick={handleCancelPendingTransaction}
+                />
+                <Button
+                  tone="critical"
+                  loading={pending}
+                  disabled={pending}
+                  text={UiMessages.translationsMaintenance.pendingTransactionDialog.confirm}
+                  onClick={handleConfirmPendingTransaction}
+                />
+              </Grid>
+            </Flex>
+          }
+        >
+          <Stack padding={3} space={3}>
+            <Card padding={3} radius={2} shadow={1} tone="caution">
+              <Text size={2}>
+                {UiMessages.translationsMaintenance.pendingTransactionDialog.caution}
+              </Text>
+            </Card>
+            <Grid cols={1}>
+              <StyledCodeCard padding={3} radius={2} shadow={1} tone="default">
+                <StyledCode language="json">
+                  {JSON.stringify(
+                    pendingTransactions.map((transaction) => transaction.toJSON()),
+                    null,
+                    2
+                  )}
+                </StyledCode>
+              </StyledCodeCard>
+              <StyledDownloadCodeFlex
+                padding={2}
+                justify="flex-end"
+                align="flex-start"
+                onClick={handleDownloadCode}
+              >
+                <Button text="Download" />
+              </StyledDownloadCodeFlex>
+            </Grid>
+          </Stack>
+        </Dialog>
+      )}
+    </Container>
+  )
+})

package/src/structure/components/MaintenanceTab/index.ts

@@ -0,0 +1 @@
+export * from './MaintenanceTab'

package/src/structure/components/MaintenanceTabResult/MaintenanceTabResult.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import {Box, Button, Card, Flex, Text} from '@sanity/ui'
+import {UiMessages} from '../../../constants/UiMessages'
+
+type Props = React.PropsWithChildren<{
+  pending?: boolean
+  count: number
+  labelName?: keyof typeof UiMessages['translationsMaintenance']
+  onClick?: (event: React.SyntheticEvent<HTMLButtonElement, Event>) => void
+}>
+
+export const MaintenanceTabResult: React.FC<Props> = ({
+  pending,
+  count,
+  labelName,
+  children,
+  onClick,
+}) => {
+  return (
+    <Card padding={3} radius={2} shadow={1} tone={count > 0 ? `caution` : `default`}>
+      <Flex align="center">
+        <Box flex={1}>
+          <Text muted={count <= 0}>
+            <span>{count}</span>
+            <span>&nbsp;</span>
+            <span>
+              {labelName ? String(UiMessages.translationsMaintenance[labelName]) : children}
+            </span>
+          </Text>
+        </Box>
+
+        {count > 0 && (
+          <Button
+            padding={2}
+            fontSize={2}
+            disabled={pending}
+            onClick={onClick}
+            text={UiMessages.translationsMaintenance.fix}
+          />
+        )}
+      </Flex>
+    </Card>
+  )
+}

package/src/structure/components/MaintenanceTabResult/index.ts

@@ -0,0 +1 @@
+export * from './MaintenanceTabResult'

package/src/structure/components/MaintenanceTabTypeSelector/MaintenanceTabTypeSelector.tsx

@@ -0,0 +1,56 @@
+import React, {forwardRef, Ref, useMemo} from 'react'
+import {Autocomplete, Card, Stack, Text} from '@sanity/ui'
+import {EarthGlobeIcon} from '@sanity/icons'
+import {useSchema, DefaultPreview as Preview} from 'sanity'
+import {Ti18nSchema} from '../../../types'
+import {UiMessages} from '../../../constants'
+
+type PreviewMedia = React.ComponentProps<typeof Preview>['media']
+type Props = {
+  value: string
+  onChange: (value: string) => void
+  onOpen: () => void
+}
+
+export const MaintenanceTabTypeSelector = forwardRef(function MaintenanceTabTypeSelector(
+  {value, onChange, onOpen}: Props,
+  ref: Ref<HTMLInputElement>
+) {
+  const schema = useSchema()
+  const i18nSchemas = useMemo(
+    () => schema._original?.types.filter((s: unknown) => !!(s as Ti18nSchema).i18n),
+    [schema]
+  )
+
+  return (
+    <Stack space={4}>
+      <Text>{UiMessages.translationsMaintenance.selectSchemaPlaceholder}</Text>
+      <Card>
+        <Autocomplete
+          ref={ref}
+          fontSize={[2, 2, 3]}
+          icon={EarthGlobeIcon}
+          id="i18n-schema-selector"
+          options={i18nSchemas?.map((option) => ({
+            value: option.name,
+            payload: option,
+          }))}
+          value={value}
+          placeholder="Search"
+          openButton={{onClick: () => onOpen}}
+          onChange={onChange}
+          renderValue={(v, option) => option?.payload.title || v}
+          renderOption={({payload}) => (
+            <Card padding={2} radius={2} as="button">
+              <Preview
+                layout="default"
+                title={payload.title}
+                media={payload.icon as PreviewMedia}
+              />
+            </Card>
+          )}
+        />
+      </Card>
+    </Stack>
+  )
+})

package/src/structure/components/MaintenanceTabTypeSelector/index.ts

@@ -0,0 +1 @@
+export * from './MaintenanceTabTypeSelector'

package/src/structure/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useDocumentsInformation'

package/src/structure/hooks/useDocumentsInformation.ts

@@ -0,0 +1,110 @@
+import React from 'react'
+import {useConfig} from '../../hooks'
+import {I18nDelimiter, I18nPrefix, IdStructure, ReferenceBehavior} from '../../constants'
+import {ILanguageObject, ITranslationRef, Ti18nConfig, Ti18nDocument} from '../../types'
+import {
+  getBaseIdFromId,
+  getBaseLanguage,
+  getLanguagesFromOption,
+  useSanityClient,
+} from '../../utils'
+
+export const useDocumentsInformation = (pluginConfig: Ti18nConfig, schema: string) => {
+  const client = useSanityClient()
+  const config = useConfig(pluginConfig, schema)
+  const [pending, setPending] = React.useState(false)
+  const [documents, setDocuments] = React.useState<Ti18nDocument[]>([])
+  const [languages, setLanguages] = React.useState<ILanguageObject[]>([])
+  const baseDocuments = React.useMemo(() => {
+    if (config.idStructure === IdStructure.DELIMITER)
+      return documents.filter((d) => !d._id.includes(I18nDelimiter))
+    return documents.filter((d) => !d._id.startsWith(I18nPrefix))
+  }, [config, documents])
+  const translatedDocuments = React.useMemo(() => {
+    if (config.idStructure === IdStructure.DELIMITER)
+      return documents.filter((d) => d._id.includes(I18nDelimiter))
+    return documents.filter((d) => d._id.startsWith(I18nPrefix))
+  }, [config, documents])
+  const idStructureMismatchDocuments = React.useMemo(() => {
+    if (config.idStructure === IdStructure.DELIMITER)
+      return documents.filter((d) => d._id.startsWith(I18nPrefix))
+    return documents.filter((d) => d._id.includes(I18nDelimiter))
+  }, [config, documents])
+
+  const fetchInformation = React.useCallback(
+    async (selectedSchema: string) => {
+      setPending(true)
+      const [langs, result] = await Promise.all([
+        getLanguagesFromOption(client, config, config.languages),
+        client.fetch<Ti18nDocument[]>(`*[_type == $type && !(_id in path('drafts.**'))]`, {
+          type: selectedSchema,
+        }),
+      ])
+      setLanguages(langs)
+      setDocuments(result)
+      setPending(false)
+    },
+    [config, client]
+  )
+
+  const documentsSummaryInformation = React.useMemo(() => {
+    const base = getBaseLanguage(languages, config.base)
+    const basedocuments = baseDocuments
+    const translateddocuments = translatedDocuments
+    const langFieldName = config.fieldNames?.lang
+    const refsFieldName = config.fieldNames?.references
+    const baseRefFieldName = config.fieldNames?.baseReference
+    return {
+      idStructureMismatch: idStructureMismatchDocuments,
+      missingLanguageField: documents.filter((d) => !d[langFieldName]),
+      missingDocumentRefs: basedocuments.filter((d) => {
+        const docs = translateddocuments.filter((dx) => getBaseIdFromId(dx._id) === d._id)
+        const refsCount = (Object.values(d[refsFieldName] || []) as any[]).filter(
+          (ref) => ref._type === 'reference' && !!ref._ref
+        ).length
+        return refsCount != docs.length
+      }),
+      missingBaseDocumentRefs: translateddocuments.filter((d) => !d[baseRefFieldName]),
+      orphanDocuments: translateddocuments.filter((d) => {
+        const baseDoc = basedocuments.find((doc) => getBaseIdFromId(d._id) === doc._id)
+        if (baseDoc) return false
+        return true
+      }),
+      referenceBehaviorMismatch: basedocuments.filter((doc) => {
+        const refs: ITranslationRef[] = doc[refsFieldName] || []
+        if (config.referenceBehavior === ReferenceBehavior.DISABLED)
+          return Object.keys(refs).length > 0
+        if (config.referenceBehavior === ReferenceBehavior.WEAK)
+          return Object.values(refs).some((r) => !r._weak)
+        return Object.values(refs).some((r) => !!r._weak)
+      }),
+      baseLanguageMismatch: basedocuments.filter((doc) => {
+        return base?.id && doc[langFieldName] !== base.id
+      }),
+    }
+  }, [
+    config,
+    documents,
+    languages,
+    baseDocuments,
+    translatedDocuments,
+    idStructureMismatchDocuments,
+  ])
+
+  React.useEffect(() => {
+    if (schema) {
+      fetchInformation(schema)
+    }
+  }, [schema])
+
+  return {
+    pending,
+    setPending,
+    documents,
+    baseDocuments,
+    translatedDocuments,
+    idStructureMismatchDocuments,
+    documentsSummaryInformation,
+    fetchInformation,
+  }
+}