gt-sanity 0.0.6 → 1.0.1

package/src/components/shared/BaseTranslationWrapper.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  ThemeProvider,
+  ToastProvider,
+  Box,
+  Card,
+  Flex,
+  Spinner,
+  Text,
+} from '@sanity/ui';
+import { buildTheme } from '@sanity/ui/theme';
+import { useSecrets } from '../../hooks/useSecrets';
+import { Secrets } from '../../types';
+import { pluginConfig } from '../../adapter/core';
+
+const theme = buildTheme();
+
+interface BaseTranslationWrapperProps {
+  children: React.ReactNode;
+  secretsNamespace?: string;
+  padding?: number;
+  showContainer?: boolean;
+}
+
+export const BaseTranslationWrapper: React.FC<BaseTranslationWrapperProps> = ({
+  children,
+  secretsNamespace = pluginConfig.getSecretsNamespace(),
+  padding = 4,
+  showContainer = true,
+}) => {
+  const { loading: loadingSecrets, secrets } =
+    useSecrets<Secrets>(secretsNamespace);
+
+  const content = (
+    <>
+      {loadingSecrets && (
+        <Flex padding={5} align='center' justify='center'>
+          <Spinner />
+        </Flex>
+      )}
+
+      {!loadingSecrets && !secrets && (
+        <Box padding={padding}>
+          <Card tone='caution' padding={[2, 3, 4, 4]} shadow={1} radius={2}>
+            <Text>
+              Can't find secrets for your translation service. Did you load them
+              into this dataset?
+            </Text>
+          </Card>
+        </Box>
+      )}
+
+      {!loadingSecrets && secrets && children}
+    </>
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <ToastProvider paddingY={7}>
+        {showContainer ? <Box padding={padding}>{content}</Box> : content}
+      </ToastProvider>
+    </ThemeProvider>
+  );
+};
+
+export interface UseTranslationSecretsResult {
+  loadingSecrets: boolean;
+  secrets: Secrets | null;
+}
+
+export const useTranslationSecrets = (
+  secretsNamespace?: string
+): UseTranslationSecretsResult => {
+  const { loading: loadingSecrets, secrets } = useSecrets<Secrets>(
+    secretsNamespace || 'translationService.secrets'
+  );
+
+  return {
+    loadingSecrets,
+    secrets,
+  };
+};

package/src/components/shared/LocaleCheckbox.tsx

@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import { Button, Flex, Switch, Box, Text } from '@sanity/ui';
+import styled from 'styled-components';
+import { TranslationLocale } from '../../types';
+
+const WrapText = styled(Box)`
+  white-space: normal;
+`;
+
+type LocaleCheckboxProps = {
+  locale: TranslationLocale;
+  toggle: (locale: string, shouldEnable: boolean) => void;
+  checked: boolean;
+};
+
+export const LocaleCheckbox = ({
+  locale,
+  toggle,
+  checked,
+}: LocaleCheckboxProps) => {
+  const onClick = useCallback(
+    () => toggle(locale.localeId, !checked),
+    [locale.localeId, toggle, checked]
+  );
+
+  return (
+    <Button
+      mode='ghost'
+      onClick={onClick}
+      style={{ cursor: 'pointer' }}
+      radius={2}
+    >
+      <Flex align='center' gap={3}>
+        <Switch
+          style={{ pointerEvents: 'none' }}
+          onChange={onClick}
+          checked={checked}
+        />
+        <WrapText>
+          <Text size={1} weight='semibold'>
+            {locale.description}
+          </Text>
+        </WrapText>
+      </Flex>
+    </Button>
+  );
+};

package/src/components/shared/SingleDocumentView.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Stack, Box, Card, Text, Flex, Spinner } from '@sanity/ui';
+import { LanguageStatus } from './LanguageStatus';
+import { useTranslations } from '../TranslationsProvider';
+import { pluginConfig } from '../../adapter/core';
+
+export const SingleDocumentView: React.FC = () => {
+  const {
+    documents,
+    locales,
+    loadingDocuments,
+    translationStatuses,
+    downloadStatus,
+    importedTranslations,
+    handleImportDocument,
+  } = useTranslations();
+
+  // Get the first (and only) document in single document mode
+  const document = documents[0];
+
+  if (loadingDocuments) {
+    return (
+      <Flex align='center' justify='center' padding={4}>
+        <Spinner />
+      </Flex>
+    );
+  }
+
+  if (!document) {
+    return (
+      <Card padding={4} tone='caution'>
+        <Text>No document found</Text>
+      </Card>
+    );
+  }
+
+  // Check if this is a source language document
+  const currentDocumentLanguage =
+    document[pluginConfig.getLanguageField()] || pluginConfig.getSourceLocale();
+  const shouldShowTranslationComponents =
+    currentDocumentLanguage === pluginConfig.getSourceLocale();
+
+  if (!shouldShowTranslationComponents) {
+    return (
+      <Card padding={4} tone='neutral' border>
+        <Text size={1} muted>
+          Translation tools are only available for{' '}
+          <code>{pluginConfig.getSourceLocale()}</code> documents.
+        </Text>
+      </Card>
+    );
+  }
+
+  return (
+    <Box>
+      <Stack space={4}>
+        <Card shadow={1} padding={3}>
+          <Stack space={3}>
+            <Flex justify='space-between' align='flex-start'>
+              <Box flex={1}>
+                <Text weight='semibold' size={1}>
+                  {document._id?.replace('drafts.', '') || document._id}
+                </Text>
+                <Text size={0} muted style={{ marginTop: '2px' }}>
+                  {document._type}
+                </Text>
+              </Box>
+            </Flex>
+
+            <Stack space={2}>
+              {locales.length > 0 ? (
+                locales
+                  .filter((locale) => locale.enabled !== false)
+                  .map((locale) => {
+                    const documentId =
+                      document._id?.replace('drafts.', '') || document._id;
+                    const key = `${documentId}:${locale.localeId}`;
+                    const status = translationStatuses.get(key);
+                    const isDownloaded = downloadStatus.downloaded.has(key);
+                    const isImported = importedTranslations.has(key);
+
+                    return (
+                      <LanguageStatus
+                        key={`${document._id}-${locale.localeId}`}
+                        title={locale.description || locale.localeId}
+                        progress={status?.progress || 0}
+                        isImported={isImported || isDownloaded}
+                        importFile={async () => {
+                          await handleImportDocument(
+                            documentId,
+                            locale.localeId
+                          );
+                        }}
+                      />
+                    );
+                  })
+              ) : (
+                <Text size={1} muted>
+                  No locales configured
+                </Text>
+              )}
+            </Stack>
+          </Stack>
+        </Card>
+      </Stack>
+    </Box>
+  );
+};

package/src/components/tab/TranslationView.tsx

@@ -0,0 +1,379 @@
+// adapted from https://github.com/sanity-io/sanity-translations-tab. See LICENSE.md for more details.
+
+/**
+ * Add cleanup function to cancel async tasks
+ */
+
+import { useMemo, useState, useCallback, useEffect } from 'react';
+import {
+  Stack,
+  Text,
+  Card,
+  Button,
+  Grid,
+  Box,
+  Flex,
+  Switch,
+  Tooltip,
+} from '@sanity/ui';
+import { pluginConfig } from '../../adapter/core';
+import { useTranslations } from '../TranslationsProvider';
+import { LanguageStatus } from '../shared/LanguageStatus';
+import { LocaleCheckbox } from '../shared/LocaleCheckbox';
+import { DownloadIcon, LinkIcon } from '@sanity/icons';
+
+export const TranslationView = () => {
+  const {
+    documents,
+    locales,
+    translationStatuses,
+    isBusy,
+    handleTranslateAll,
+    handleImportDocument,
+    handleRefreshAll,
+    isRefreshing,
+    importedTranslations,
+    setLocales,
+    handlePatchDocumentReferences,
+  } = useTranslations();
+
+  const [autoImport, setAutoImport] = useState(false);
+  const [isImporting, setIsImporting] = useState(false);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+
+  // Get the single document (first document in single document mode)
+  const document = documents[0];
+
+  // Extract the current document's language from the language field
+  const currentDocumentLanguage = useMemo(() => {
+    if (!document) return null;
+
+    // Get the language from the document's language field
+    const languageField = pluginConfig.getLanguageField();
+    const documentLanguage = document[languageField];
+
+    // If no language field is set, assume it's the source language
+    return documentLanguage || pluginConfig.getSourceLocale();
+  }, [document]);
+
+  // Only show translation components if we're on a source language document
+  const shouldShowTranslationComponents = useMemo(() => {
+    if (!currentDocumentLanguage) return false;
+    return currentDocumentLanguage === pluginConfig.getSourceLocale();
+  }, [currentDocumentLanguage]);
+
+  // Get available locales (excluding source locale)
+  const availableLocales = useMemo(() => {
+    const sourceLocale = pluginConfig.getSourceLocale();
+    return locales.filter(
+      (locale) => locale.enabled !== false && locale.localeId !== sourceLocale
+    );
+  }, [locales]);
+
+  // Get document ID for status tracking
+  const documentId = useMemo(() => {
+    if (!document) return null;
+    return document._id?.replace('drafts.', '') || document._id;
+  }, [document]);
+
+  // Auto import functionality
+  const checkAndImportCompletedTranslations = useCallback(async () => {
+    if (!autoImport || isImporting || !documentId) return;
+
+    const completedTranslations = availableLocales.filter((locale) => {
+      const key = `${documentId}:${locale.localeId}`;
+      const status = translationStatuses.get(key);
+      return (
+        (status?.progress || 0) >= 100 &&
+        status?.isReady &&
+        !importedTranslations.has(key)
+      );
+    });
+
+    if (completedTranslations.length === 0) return;
+
+    setIsImporting(true);
+    try {
+      for (const locale of completedTranslations) {
+        await handleImportDocument(documentId, locale.localeId);
+      }
+    } finally {
+      setIsImporting(false);
+    }
+  }, [
+    autoImport,
+    isImporting,
+    documentId,
+    availableLocales,
+    translationStatuses,
+    importedTranslations,
+    handleImportDocument,
+  ]);
+
+  const handleImportAll = useCallback(async () => {
+    if (isImporting || !documentId) return;
+
+    setIsImporting(true);
+    try {
+      const readyTranslations = availableLocales.filter((locale) => {
+        const key = `${documentId}:${locale.localeId}`;
+        const status = translationStatuses.get(key);
+        return status?.isReady && !importedTranslations.has(key);
+      });
+
+      for (const locale of readyTranslations) {
+        await handleImportDocument(documentId, locale.localeId);
+      }
+    } finally {
+      setIsImporting(false);
+    }
+  }, [
+    isImporting,
+    documentId,
+    availableLocales,
+    translationStatuses,
+    importedTranslations,
+    handleImportDocument,
+  ]);
+
+  // Check for completed translations on status updates
+  useEffect(() => {
+    checkAndImportCompletedTranslations();
+  }, [checkAndImportCompletedTranslations]);
+
+  // Auto refresh functionality
+  useEffect(() => {
+    if (!autoRefresh || !documentId || availableLocales.length === 0) return;
+
+    const interval = setInterval(async () => {
+      await handleRefreshAll();
+      await checkAndImportCompletedTranslations();
+    }, 10000);
+
+    return () => clearInterval(interval);
+  }, [
+    autoRefresh,
+    documentId,
+    availableLocales.length,
+    handleRefreshAll,
+    checkAndImportCompletedTranslations,
+  ]);
+
+  useEffect(() => {
+    const initialRefresh = async () => {
+      await handleRefreshAll();
+      await checkAndImportCompletedTranslations();
+    };
+    initialRefresh();
+  }, []);
+
+  // Locale toggle functionality
+  const toggleLocale = useCallback(
+    (localeId: string, shouldEnable: boolean) => {
+      const updatedLocales = locales.map((locale) =>
+        locale.localeId === localeId
+          ? { ...locale, enabled: shouldEnable }
+          : locale
+      );
+      setLocales(updatedLocales);
+    },
+    [locales, setLocales]
+  );
+
+  const toggleAllLocales = useCallback(() => {
+    const sourceLocale = pluginConfig.getSourceLocale();
+    const nonSourceLocales = locales.filter(
+      (locale) => locale.localeId !== sourceLocale
+    );
+    const allEnabled = nonSourceLocales.every(
+      (locale) => locale.enabled === true || locale.enabled === undefined
+    );
+
+    const updatedLocales = locales.map((locale) =>
+      locale.localeId === sourceLocale
+        ? locale // Don't change source locale
+        : { ...locale, enabled: !allEnabled }
+    );
+    setLocales(updatedLocales);
+  }, [locales, setLocales]);
+
+  // Show message if we're not on a source language document
+  if (!shouldShowTranslationComponents) {
+    return (
+      <Card padding={4} tone='neutral' border>
+        <Text size={1} muted>
+          Translation tools are only available for{' '}
+          <code>{pluginConfig.getSourceLocale()}</code> documents.
+        </Text>
+      </Card>
+    );
+  }
+
+  return (
+    <Stack space={6} padding={4}>
+      {/* Generate Translations Section */}
+      <Stack space={4}>
+        <Text as='h2' weight='semibold' size={2}>
+          Generate Translations
+        </Text>
+
+        {/* Locale Selection */}
+        <Stack space={3}>
+          <Flex align='center' justify='space-between'>
+            <Text weight='semibold' size={1}>
+              {availableLocales.length === 1
+                ? 'Select locale'
+                : 'Select locales'}
+            </Text>
+            <Button
+              fontSize={1}
+              padding={2}
+              text='Toggle All'
+              onClick={toggleAllLocales}
+            />
+          </Flex>
+
+          <Grid columns={[1, 1, 2, 3]} gap={1}>
+            {locales
+              .filter(
+                (locale) => locale.localeId !== pluginConfig.getSourceLocale()
+              )
+              .map((locale) => (
+                <LocaleCheckbox
+                  key={locale.localeId}
+                  locale={locale}
+                  toggle={toggleLocale}
+                  checked={
+                    locale.enabled === true || locale.enabled === undefined
+                  }
+                />
+              ))}
+          </Grid>
+        </Stack>
+
+        <Button
+          onClick={() => {
+            setAutoImport(true);
+            handleTranslateAll();
+          }}
+          disabled={isBusy || !availableLocales.length}
+          tone='positive'
+          text={isBusy ? 'Creating translations...' : 'Generate Translations'}
+        />
+      </Stack>
+
+      {/* Translation Status Section */}
+      {documentId && availableLocales.length > 0 && (
+        <Stack space={4}>
+          <Flex align='center' justify='space-between'>
+            <Text as='h2' weight='semibold' size={2}>
+              Translation Status
+            </Text>
+            <Flex gap={3} align='center'>
+              <Flex gap={2} align='center'>
+                <Text size={1}>Auto-refresh</Text>
+                <Switch
+                  checked={autoRefresh}
+                  onChange={() => setAutoRefresh(!autoRefresh)}
+                />
+              </Flex>
+              <Button
+                fontSize={1}
+                padding={2}
+                text='Refresh Status'
+                onClick={handleRefreshAll}
+                disabled={isRefreshing}
+              />
+            </Flex>
+          </Flex>
+
+          <Box>
+            {availableLocales.map((locale) => {
+              const key = `${documentId}:${locale.localeId}`;
+              const status = translationStatuses.get(key);
+              const progress = status?.progress || 0;
+              const isImported = importedTranslations.has(key);
+
+              return (
+                <LanguageStatus
+                  key={key}
+                  title={locale.description}
+                  progress={progress}
+                  isImported={isImported}
+                  importFile={async () => {
+                    if (!isImported && status?.isReady) {
+                      await handleImportDocument(documentId, locale.localeId);
+                    }
+                  }}
+                />
+              );
+            })}
+          </Box>
+
+          {/* Import Controls */}
+          <Stack space={3}>
+            <Flex gap={3} align='center' justify='space-between'>
+              <Flex gap={2} align='center'>
+                <Button
+                  mode='ghost'
+                  onClick={handleImportAll}
+                  text={isImporting ? 'Importing...' : 'Import All'}
+                  icon={DownloadIcon}
+                  disabled={
+                    isImporting ||
+                    availableLocales.every((locale) => {
+                      const key = `${documentId}:${locale.localeId}`;
+                      const status = translationStatuses.get(key);
+                      return !status?.isReady || importedTranslations.has(key);
+                    })
+                  }
+                />
+                <Text size={1} muted>
+                  Imported{' '}
+                  {
+                    availableLocales.filter((locale) => {
+                      const key = `${documentId}:${locale.localeId}`;
+                      return importedTranslations.has(key);
+                    }).length
+                  }
+                  /
+                  {
+                    availableLocales.filter((locale) => {
+                      const key = `${documentId}:${locale.localeId}`;
+                      const status = translationStatuses.get(key);
+                      return status?.isReady;
+                    }).length
+                  }
+                </Text>
+              </Flex>
+              <Flex gap={2} align='center' style={{ whiteSpace: 'nowrap' }}>
+                <Text size={1}>Auto-import when complete</Text>
+                <Switch
+                  checked={autoImport}
+                  onChange={() => setAutoImport(!autoImport)}
+                  disabled={isImporting}
+                />
+              </Flex>
+            </Flex>
+
+            <Flex justify='flex-start'>
+              <Tooltip
+                placement='top'
+                content={`Replaces references to ${pluginConfig.getSourceLocale()} documents in this document with the corresponding translated document reference`}
+              >
+                <Button
+                  mode='ghost'
+                  tone='caution'
+                  onClick={handlePatchDocumentReferences}
+                  text={isBusy ? 'Patching...' : 'Patch Document References'}
+                  icon={isBusy ? null : LinkIcon}
+                  disabled={isBusy}
+                />
+              </Tooltip>
+            </Flex>
+          </Stack>
+        </Stack>
+      )}
+    </Stack>
+  );
+};

package/src/components/tab/TranslationsTab.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SanityDocument } from 'sanity';
+import { BaseTranslationWrapper } from '../shared/BaseTranslationWrapper';
+import { TranslationsProvider } from '../TranslationsProvider';
+import { TranslationView } from './TranslationView';
+
+type TranslationTabProps = {
+  document: {
+    displayed: SanityDocument;
+  };
+};
+
+const TranslationTab = (props: TranslationTabProps) => {
+  const { displayed } = props.document;
+
+  return (
+    <BaseTranslationWrapper showContainer={false}>
+      <TranslationsProvider singleDocument={displayed}>
+        <TranslationView />
+      </TranslationsProvider>
+    </BaseTranslationWrapper>
+  );
+};
+
+export default TranslationTab;

package/src/configuration/baseDocumentLevelConfig/documentLevelPatch.ts

@@ -1,7 +1,7 @@
 // adapted from https://github.com/sanity-io/sanity-translations-tab. See LICENSE.md for more details.
 
 import { SanityClient, SanityDocument, SanityDocumentLike } from 'sanity';
-import { BaseDocumentMerger } from 'sanity-naive-html-serializer';
+import { BaseDocumentMerger } from '../../serialization';
 
 import { findLatestDraft } from '../utils/findLatestDraft';
 import { findDocumentAtRevision } from '../utils/findDocumentAtRevision';
@@ -9,7 +9,7 @@ import { createI18nDocAndPatchMetadata } from './helpers/createI18nDocAndPatchMe
 import { getOrCreateTranslationMetadata } from './helpers/getOrCreateTranslationMetadata';
 import { patchI18nDoc } from './helpers/patchI18nDoc';
 import type { GTFile } from '../../types';
-import { gtConfig } from '../../adapter/core';
+import { pluginConfig } from '../../adapter/core';
 
 export const documentLevelPatch = async (
   docInfo: GTFile,
@@ -17,10 +17,9 @@ export const documentLevelPatch = async (
   localeId: string,
   client: SanityClient,
   languageField: string = 'language',
-  mergeWithTargetLocale: boolean = false,
-  publish: boolean = false
+  mergeWithTargetLocale: boolean = false
 ): Promise<void> => {
-  const baseLanguage = gtConfig.getSourceLocale();
+  const baseLanguage = pluginConfig.getSourceLocale();
   //this is the document we use to merge with the translated fields
   let baseDoc: SanityDocument | null = null;
 
@@ -100,8 +99,7 @@ export const documentLevelPatch = async (
       baseDoc,
       merged,
       translatedFields,
-      client,
-      publish
+      client
     );
   }
   //otherwise, create a new document
@@ -114,8 +112,7 @@ export const documentLevelPatch = async (
       client,
       translationMetadata,
       docInfo.documentId,
-      languageField,
-      publish
+      languageField
     );
   }
 };