gt-sanity 0.0.6 → 1.0.0

package/src/components/TaskView.tsx

@@ -1,257 +0,0 @@
-// adapted from https://github.com/sanity-io/sanity-translations-tab. See LICENSE.md for more details.
-
-import { useCallback, useContext, useState, useEffect } from 'react';
-import { Box, Button, Flex, Text, Stack, useToast, Switch } from '@sanity/ui';
-import {
-  ArrowTopRightIcon,
-  DownloadIcon,
-  CheckmarkCircleIcon,
-} from '@sanity/icons';
-
-import { TranslationContext } from './TranslationContext';
-import { TranslationLocale, TranslationTask } from '../types';
-import { LanguageStatus } from './LanguageStatus';
-
-type JobProps = {
-  task: TranslationTask;
-  locales: TranslationLocale[];
-  refreshTask: () => Promise<void>;
-};
-
-const getLocale = (
-  localeId: string,
-  locales: TranslationLocale[]
-): TranslationLocale | undefined =>
-  locales.find((l) => l.localeId === localeId);
-
-export const TaskView = ({ task, locales, refreshTask }: JobProps) => {
-  const context = useContext(TranslationContext);
-  const toast = useToast();
-
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [autoRefresh, setAutoRefresh] = useState(true);
-  const [isBusy, setIsBusy] = useState(false);
-  const [autoImport, setAutoImport] = useState(true);
-  const [importedFiles, setImportedFiles] = useState<Set<string>>(new Set());
-
-  const importFile = useCallback(
-    async (localeId: string) => {
-      if (!context) {
-        toast.push({
-          title:
-            'Missing context, unable to import translation. Try refreshing or clicking away from this tab and back.',
-          status: 'error',
-          closable: true,
-        });
-        return;
-      }
-
-      const locale = getLocale(localeId, locales);
-      const localeTitle = locale?.description || localeId;
-
-      try {
-        const translation = await context.adapter.getTranslation(
-          task.document,
-          localeId,
-          context.secrets
-        );
-
-        const sanityId = context.localeIdAdapter
-          ? await context.localeIdAdapter(localeId)
-          : localeId;
-
-        await context.importTranslation(sanityId, translation);
-
-        setImportedFiles((prev) => new Set([...prev, localeId]));
-
-        toast.push({
-          title: `Imported ${localeTitle} translation`,
-          status: 'success',
-          closable: true,
-        });
-      } catch (err) {
-        let errorMsg;
-        if (err instanceof Error) {
-          errorMsg = err.message;
-        } else {
-          errorMsg = err ? String(err) : null;
-        }
-
-        toast.push({
-          title: `Error getting ${localeTitle} translation`,
-          description: errorMsg,
-          status: 'error',
-          closable: true,
-        });
-      }
-    },
-    [locales, context, task.document, toast]
-  );
-
-  const checkAndImportCompletedFiles = useCallback(async () => {
-    if (!autoImport || isBusy) return;
-
-    const completedFiles = task.locales.filter(
-      (locale) =>
-        (locale.progress || 0) >= 100 && !importedFiles.has(locale.localeId)
-    );
-
-    if (completedFiles.length === 0) return;
-
-    setIsBusy(true);
-    try {
-      for (const locale of completedFiles) {
-        await importFile(locale.localeId);
-      }
-    } finally {
-      setIsBusy(false);
-    }
-  }, [autoImport, isBusy, task.locales, importedFiles, importFile]);
-
-  const handleRefreshClick = useCallback(async () => {
-    if (isRefreshing) return;
-    setIsRefreshing(true);
-    await refreshTask();
-    await checkAndImportCompletedFiles();
-    setIsRefreshing(false);
-  }, [refreshTask, setIsRefreshing, checkAndImportCompletedFiles]);
-
-  const handleImportAll = useCallback(async () => {
-    if (isBusy) return;
-    setIsBusy(true);
-
-    try {
-      const filesToImport = task.locales.filter(
-        (locale) => !importedFiles.has(locale.localeId)
-      );
-      for (const locale of filesToImport) {
-        await importFile(locale.localeId);
-      }
-    } finally {
-      setIsBusy(false);
-    }
-  }, [task.locales, importFile, isBusy, importedFiles]);
-
-  useEffect(() => {
-    if (!autoRefresh || importedFiles.size === task.locales.length) return;
-
-    const interval = setInterval(async () => {
-      await handleRefreshClick();
-    }, 5000);
-
-    return () => clearInterval(interval);
-  }, [
-    handleRefreshClick,
-    autoRefresh,
-    importedFiles.size,
-    task.locales.length,
-  ]);
-
-  useEffect(() => {
-    checkAndImportCompletedFiles();
-  }, [checkAndImportCompletedFiles, task.locales]);
-
-  useEffect(() => {
-    setImportedFiles((prev) => {
-      const newSet = new Set<string>();
-      for (const localeId of prev) {
-        if (task.locales.some((locale) => locale.localeId === localeId)) {
-          newSet.add(localeId);
-        }
-      }
-      return newSet;
-    });
-  }, [task.locales]);
-
-  return (
-    <Stack space={4}>
-      <Flex align='center' justify='space-between'>
-        <Text as='h2' weight='semibold' size={2}>
-          Translation Progress
-        </Text>
-
-        <Flex gap={3} align='center'>
-          <Flex gap={2} align='center'>
-            <Text size={1}>Auto-refresh</Text>
-            <Switch
-              checked={autoRefresh}
-              onChange={() => setAutoRefresh(!autoRefresh)}
-            />
-          </Flex>
-          {task.linkToVendorTask && (
-            <Button
-              as='a'
-              text='View Job'
-              iconRight={ArrowTopRightIcon}
-              href={task.linkToVendorTask}
-              target='_blank'
-              rel='noreferrer noopener'
-              fontSize={1}
-              padding={2}
-              mode='bleed'
-            />
-          )}
-          <Button
-            fontSize={1}
-            padding={2}
-            text='Refresh Status'
-            onClick={handleRefreshClick}
-            disabled={isRefreshing}
-          />
-        </Flex>
-      </Flex>
-
-      <Box>
-        {task.locales.map((localeTask) => {
-          const reportPercent = localeTask.progress || 0;
-          const locale = getLocale(localeTask.localeId, locales);
-          return (
-            <LanguageStatus
-              key={[task.document.documentId, localeTask.localeId].join('.')}
-              importFile={async () => {
-                await importFile(localeTask.localeId);
-              }}
-              title={locale?.description || localeTask.localeId}
-              progress={reportPercent}
-              isImported={importedFiles.has(localeTask.localeId)}
-            />
-          );
-        })}
-      </Box>
-      <Stack space={3}>
-        <Flex gap={3} align='center' justify='space-between'>
-          <Flex gap={2} align='center'>
-            <Button
-              mode='ghost'
-              onClick={handleImportAll}
-              text={isBusy ? 'Importing...' : 'Import All'}
-              icon={isBusy ? null : DownloadIcon}
-              disabled={isBusy || importedFiles.size === task.locales.length}
-            />
-            {importedFiles.size === task.locales.length &&
-              task.locales.length > 0 && (
-                <Flex gap={2} align='center' style={{ color: 'green' }}>
-                  <CheckmarkCircleIcon />
-                  <Text size={1}>All translations imported</Text>
-                </Flex>
-              )}
-            {importedFiles.size > 0 &&
-              importedFiles.size < task.locales.length && (
-                <Text size={1} style={{ color: '#666' }}>
-                  {importedFiles.size}/{task.locales.length} imported
-                </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={isBusy}
-            />
-          </Flex>
-        </Flex>
-      </Stack>
-    </Stack>
-  );
-};

package/src/components/TranslationContext.tsx

@@ -1,24 +0,0 @@
-// adapted from https://github.com/sanity-io/sanity-translations-tab. See LICENSE.md for more details.
-
-import React from 'react';
-import { SanityDocument } from 'sanity';
-import { GTSerializedDocument } from '../types';
-import { Adapter, GTFile, Secrets, WorkflowIdentifiers } from '../types';
-
-export type ContextProps = {
-  documentInfo: GTFile;
-  document: SanityDocument;
-  languageField: string;
-  adapter: Adapter;
-  importTranslation: (languageId: string, document: string) => Promise<void>;
-  exportForTranslation: (documentInfo: GTFile) => Promise<GTSerializedDocument>;
-  secrets: Secrets;
-  workflowOptions?: WorkflowIdentifiers[];
-  localeIdAdapter?: (id: string) => string | Promise<string>;
-  callbackUrl?: string;
-  mergeWithTargetLocale?: boolean;
-};
-
-export const TranslationContext = React.createContext<ContextProps | null>(
-  null
-);

package/src/components/TranslationView.tsx

@@ -1,114 +0,0 @@
-// adapted from https://github.com/sanity-io/sanity-translations-tab. See LICENSE.md for more details.
-
-/**
- * Add cleanup function to cancel async tasks
- */
-
-import { useCallback, useContext, useEffect, useState, useMemo } from 'react';
-import { Stack, useToast, Text, Card } from '@sanity/ui';
-import { TranslationContext } from './TranslationContext';
-import { gtConfig } from '../adapter/core';
-
-import { NewTask } from './NewTask';
-import { TaskView } from './TaskView';
-import { TranslationTask, TranslationLocale } from '../types';
-
-export const TranslationView = () => {
-  const [locales, setLocales] = useState<TranslationLocale[]>([]);
-  const [task, setTask] = useState<TranslationTask | null>(null);
-
-  const context = useContext(TranslationContext);
-  const toast = useToast();
-
-  // Extract the current document's language from the language field
-  const currentDocumentLanguage = useMemo(() => {
-    if (!context?.document || !context?.languageField) return null;
-
-    // Get the language from the document's language field
-    const documentLanguage = context.document[context.languageField];
-
-    // If no language field is set, assume it's the source language
-    return documentLanguage || gtConfig.getSourceLocale();
-  }, [context?.document, context?.languageField]);
-
-  // Only show translation components if we're on a source language document
-  const shouldShowTranslationComponents = useMemo(() => {
-    if (!currentDocumentLanguage) return false;
-    return currentDocumentLanguage === gtConfig.getSourceLocale();
-  }, [currentDocumentLanguage]);
-
-  useEffect(() => {
-    async function fetchData() {
-      if (!context) {
-        toast.push({
-          title: 'Unable to load translation data: missing context',
-          status: 'error',
-          closable: true,
-        });
-        return;
-      }
-
-      const locales = await context.adapter.getLocales(context.secrets);
-      setLocales(locales);
-      try {
-        const task = await context?.adapter.getTranslationTask(
-          context.documentInfo,
-          context.secrets
-        );
-        setTask(task);
-      } catch (err) {
-        let errorMsg;
-        if (err instanceof Error) {
-          errorMsg = err.message;
-        } else {
-          errorMsg = err ? String(err) : null;
-        }
-
-        // Hacky bypass for when a document is not yet translated and has never been uploaded
-        if (errorMsg?.toLowerCase().includes('no source file found')) {
-          return;
-        }
-
-        toast.push({
-          title: `Error creating translation job`,
-          description: errorMsg,
-          status: 'error',
-          closable: true,
-        });
-      }
-    }
-
-    fetchData();
-  }, [context, toast]);
-
-  const refreshTask = useCallback(async () => {
-    const task = await context?.adapter.getTranslationTask(
-      context.documentInfo,
-      context.secrets
-    );
-    if (task) {
-      setTask(task);
-    }
-  }, [context, setTask]);
-
-  // 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>{gtConfig.getSourceLocale()}</code> documents.
-        </Text>
-      </Card>
-    );
-  }
-
-  return (
-    <Stack space={6}>
-      <NewTask locales={locales} refreshTask={refreshTask} />
-      {task && (
-        <TaskView task={task} locales={locales} refreshTask={refreshTask} />
-      )}
-    </Stack>
-  );
-};

package/src/components/TranslationsTab.tsx

@@ -1,181 +0,0 @@
-// adapted from https://github.com/sanity-io/sanity-translations-tab. See LICENSE.md for more details.
-
-import { useMemo } from 'react';
-import { SanityDocument, useSchema } from 'sanity';
-import { randomKey } from '@sanity/util/content';
-import {
-  ThemeProvider,
-  ToastProvider,
-  Stack,
-  Text,
-  Layer,
-  Box,
-  Card,
-  Flex,
-  Spinner,
-} from '@sanity/ui';
-
-import { TranslationContext } from './TranslationContext';
-import { TranslationView } from './TranslationView';
-import { useClient } from '../hooks/useClient';
-import { useSecrets } from '../hooks/useSecrets';
-import { GTFile, Secrets, TranslationsTabConfigOptions } from '../types';
-
-type TranslationTabProps = {
-  document: {
-    displayed: SanityDocument;
-  };
-  options: TranslationsTabConfigOptions;
-};
-
-const TranslationTab = (props: TranslationTabProps) => {
-  const { displayed } = props.document;
-  const client = useClient();
-  const schema = useSchema();
-
-  const documentId =
-    displayed && displayed._id
-      ? (displayed._id.split('drafts.').pop() as string)
-      : '';
-
-  const revisionId = displayed && displayed._rev ? displayed._rev : undefined;
-
-  const { errors, importTranslation, exportForTranslation } = useMemo(() => {
-    const { serializationOptions, languageField, mergeWithTargetLocale } =
-      props.options;
-    const ctx = {
-      client,
-      schema,
-    };
-
-    const allErrors = [];
-
-    const importTranslationFunc = props.options.importTranslation;
-    if (!importTranslationFunc) {
-      allErrors.push({
-        key: randomKey(12),
-        text: (
-          <>
-            You need to provide an <code>importTranslation</code> function. See
-            documentation.
-          </>
-        ),
-      });
-    }
-
-    const contextImportTranslation = (localeId: string, doc: string) => {
-      return importTranslationFunc(
-        { documentId, versionId: revisionId },
-        localeId,
-        doc,
-        ctx,
-        serializationOptions,
-        languageField,
-        mergeWithTargetLocale
-      );
-    };
-
-    const exportTranslationFunc = props.options.exportForTranslation;
-    if (!exportTranslationFunc) {
-      allErrors.push({
-        key: randomKey(12),
-        text: (
-          <>
-            You need to provide an <code>exportForTranslation</code> function.
-            See documentation.
-          </>
-        ),
-      });
-    }
-
-    const contextExportForTranslation = (docInfo: GTFile) => {
-      return exportTranslationFunc(
-        docInfo,
-        ctx,
-        serializationOptions,
-        languageField
-      );
-    };
-
-    return {
-      errors: allErrors,
-      importTranslation: contextImportTranslation,
-      exportForTranslation: contextExportForTranslation,
-    };
-  }, [props.options, documentId, revisionId, client, schema]);
-
-  const { loading, secrets } = useSecrets<Secrets>(
-    `${props.options.secretsNamespace || 'translationService'}.secrets`
-  );
-
-  const hasErrors = errors.length > 0;
-
-  if (loading || !secrets) {
-    return (
-      <ThemeProvider>
-        <Flex padding={5} align='center' justify='center'>
-          <Spinner />
-        </Flex>
-      </ThemeProvider>
-    );
-  } else if (!secrets) {
-    return (
-      <ThemeProvider>
-        <Box padding={4}>
-          <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>
-      </ThemeProvider>
-    );
-  }
-  return (
-    <ThemeProvider>
-      <Box padding={4}>
-        <Layer>
-          <ToastProvider paddingY={7}>
-            {hasErrors && (
-              <Stack space={3}>
-                {errors.map((error) => (
-                  <Card
-                    key={error.key}
-                    tone='caution'
-                    padding={[2, 3, 4, 4]}
-                    shadow={1}
-                    radius={2}
-                  >
-                    <Text>{error.text}</Text>
-                  </Card>
-                ))}
-              </Stack>
-            )}
-            {!hasErrors && (
-              <TranslationContext.Provider
-                value={{
-                  documentInfo: { documentId, versionId: revisionId },
-                  document: displayed,
-                  languageField: props.options.languageField || 'language',
-                  secrets,
-                  importTranslation,
-                  exportForTranslation,
-                  adapter: props.options.adapter,
-                  workflowOptions: props.options.workflowOptions,
-                  localeIdAdapter: props.options.localeIdAdapter,
-                  callbackUrl: props.options.callbackUrl,
-                  mergeWithTargetLocale: props.options.mergeWithTargetLocale,
-                }}
-              >
-                <TranslationView />
-              </TranslationContext.Provider>
-            )}
-          </ToastProvider>
-        </Layer>
-      </Box>
-    </ThemeProvider>
-  );
-};
-
-export default TranslationTab;