gt-sanity 0.0.5 → 1.0.0

package/src/components/NewTask.tsx

@@ -1,249 +0,0 @@
-import React, {
-  useState,
-  useContext,
-  ChangeEvent,
-  useCallback,
-  useEffect,
-} from 'react';
-import styled from 'styled-components';
-import {
-  Button,
-  Box,
-  Flex,
-  Grid,
-  Select,
-  Stack,
-  Switch,
-  Text,
-  useToast,
-} from '@sanity/ui';
-
-import { TranslationContext } from './TranslationContext';
-import { TranslationLocale } from '../types';
-
-type Props = {
-  locales: TranslationLocale[];
-  refreshTask: () => Promise<void>;
-};
-
-type LocaleCheckboxProps = {
-  locale: TranslationLocale;
-  toggle: (locale: string, checked: boolean) => void;
-  checked: boolean;
-};
-
-const WrapText = styled(Box)`
-  white-space: normal;
-`;
-
-const LocaleCheckbox = ({ locale, toggle, checked }: LocaleCheckboxProps) => {
-  const onClick = useCallback(
-    () => toggle(locale.localeId, !checked),
-    [locale, toggle, checked]
-  );
-
-  return (
-    <Button
-      mode='ghost'
-      onClick={onClick}
-      disabled={locale.enabled === false}
-      style={{ cursor: `pointer` }}
-      radius={2}
-    >
-      <Flex align='center' gap={3}>
-        <Switch
-          style={{ pointerEvents: `none` }}
-          disabled={locale.enabled === false}
-          onChange={onClick}
-          checked={checked}
-        />
-        <WrapText>
-          <Text size={1} weight='semibold'>
-            {locale.description}
-          </Text>
-        </WrapText>
-      </Flex>
-    </Button>
-  );
-};
-
-export const NewTask = ({ locales, refreshTask }: Props) => {
-  const possibleLocales = locales.filter((locale) => locale.enabled !== false);
-  // Lets just stick to the canonical document id for keeping track of
-  // translations
-  const [selectedLocales, setSelectedLocales] = useState<React.ReactNode[]>(
-    locales
-      .filter((locale) => locale.enabled !== false)
-      .map((locale) => locale.localeId)
-  );
-
-  useEffect(() => {
-    setSelectedLocales(
-      locales
-        .filter((locale) => locale.enabled !== false)
-        .map((locale) => locale.localeId)
-    );
-  }, [locales]);
-
-  const [selectedWorkflowUid, setSelectedWorkflowUid] = useState<string>();
-  const [isBusy, setIsBusy] = useState(false);
-
-  const context = useContext(TranslationContext);
-  const toast = useToast();
-
-  const toggleLocale = useCallback(
-    (locale: string, selected: boolean) => {
-      if (!selected) {
-        setSelectedLocales(selectedLocales.filter((l) => l !== locale));
-      } else if (!selectedLocales.includes(locale)) {
-        setSelectedLocales([...selectedLocales, locale]);
-      }
-    },
-    [selectedLocales, setSelectedLocales]
-  );
-
-  const createTask = useCallback(() => {
-    if (!context) {
-      toast.push({
-        title: 'Unable to create task: missing context',
-        status: 'error',
-        closable: true,
-      });
-      return;
-    }
-
-    setIsBusy(true);
-
-    context
-      .exportForTranslation(context.documentInfo)
-      .then((serialized) =>
-        context.adapter.createTask(
-          context.documentInfo,
-          serialized,
-          selectedLocales as string[],
-          context.secrets,
-          selectedWorkflowUid,
-          context.callbackUrl
-        )
-      )
-      .then(() => {
-        toast.push({
-          title: 'Job successfully created',
-          status: 'success',
-          closable: true,
-        });
-
-        /** Reset form fields */
-        setSelectedLocales([]);
-        setSelectedWorkflowUid('');
-
-        /** Update task data in TranslationView */
-        refreshTask();
-      })
-      .catch((err) => {
-        let errorMsg;
-        if (err instanceof Error) {
-          errorMsg = err.message;
-        } else {
-          errorMsg = err ? String(err) : null;
-        }
-
-        toast.push({
-          title: `Error creating translation job`,
-          description: errorMsg,
-          status: 'error',
-          closable: true,
-        });
-      })
-      .finally(() => {
-        setIsBusy(false);
-      });
-  }, [context, selectedLocales, selectedWorkflowUid, toast, refreshTask]);
-
-  const onClick = useCallback(() => {
-    setSelectedLocales(
-      possibleLocales.length === selectedLocales.length
-        ? // Disable all
-          []
-        : // Enable all
-          locales
-            .filter((locale) => locale.enabled !== false)
-            .map((locale) => locale.localeId)
-    );
-  }, [possibleLocales, selectedLocales, setSelectedLocales, locales]);
-
-  const onToggle = useCallback(
-    (locale: string, checked: boolean) => {
-      toggleLocale(locale, checked);
-    },
-    [toggleLocale]
-  );
-
-  const onWorkflowChange = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => {
-      setSelectedWorkflowUid(e.target.value);
-    },
-    [setSelectedWorkflowUid]
-  );
-
-  return (
-    <Stack paddingTop={4} space={4}>
-      <Text as='h2' weight='semibold' size={2}>
-        Generate New Translations
-      </Text>
-      <Stack space={3}>
-        <Flex align='center' justify='space-between'>
-          <Text weight='semibold' size={1}>
-            {possibleLocales.length === 1 ? `Select locale` : `Select locales`}
-          </Text>
-
-          <Button
-            fontSize={1}
-            padding={2}
-            text='Toggle All'
-            onClick={onClick}
-          />
-        </Flex>
-
-        <Grid columns={[1, 1, 2, 3]} gap={1}>
-          {(locales || []).map((l) => (
-            <LocaleCheckbox
-              key={l.localeId}
-              locale={l}
-              toggle={onToggle}
-              checked={selectedLocales.includes(l.localeId)}
-            />
-          ))}
-        </Grid>
-      </Stack>
-
-      {context?.workflowOptions && context.workflowOptions.length > 0 && (
-        <Stack space={3}>
-          <Text weight='semibold' size={1} as='label' htmlFor='workflow-select'>
-            Select translation workflow
-          </Text>
-          <Grid columns={[1, 1, 2]}>
-            <Select id='workflowSelect' onChange={onWorkflowChange}>
-              <option>Default locale workflows</option>
-              {context.workflowOptions.map((w) => (
-                <option
-                  key={`workflow-opt-${w.workflowUid}`}
-                  value={w.workflowUid}
-                >
-                  {w.workflowName}
-                </option>
-              ))}
-            </Select>
-          </Grid>
-        </Stack>
-      )}
-
-      <Button
-        onClick={createTask}
-        disabled={isBusy || !selectedLocales.length}
-        tone='positive'
-        text={isBusy ? 'Queueing translations...' : 'Generate Translations'}
-      />
-    </Stack>
-  );
-};

package/src/components/TaskView.tsx

@@ -1,255 +0,0 @@
-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,19 +0,0 @@
-import React from 'react';
-import { GTSerializedDocument } from '../types';
-import { Adapter, GTFile, Secrets, WorkflowIdentifiers } from '../types';
-
-export type ContextProps = {
-  documentInfo: GTFile;
-  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,82 +0,0 @@
-/**
- * Add cleanup function to cancel async tasks
- */
-
-import { useCallback, useContext, useEffect, useState } from 'react';
-import { Stack, useToast } from '@sanity/ui';
-import { TranslationContext } from './TranslationContext';
-
-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();
-
-  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]);
-
-  return (
-    <Stack space={6}>
-      <NewTask locales={locales} refreshTask={refreshTask} />
-      {task && (
-        <TaskView task={task} locales={locales} refreshTask={refreshTask} />
-      )}
-    </Stack>
-  );
-};