gt-sanity 0.0.5

package/src/adapter/core.ts

@@ -0,0 +1,44 @@
+import { GT } from 'generaltranslation';
+import { libraryDefaultLocale } from 'generaltranslation/internal';
+import type { Secrets } from '../types';
+
+export const gt = new GT();
+
+export function overrideConfig(secrets: Secrets | null) {
+  gt.setConfig({
+    ...(secrets?.project && { projectId: secrets?.project }),
+    ...(secrets?.secret && { apiKey: secrets?.secret }),
+  });
+}
+
+export class GTConfig {
+  sourceLocale: string;
+  locales: string[];
+  private static instance: GTConfig;
+  constructor(sourceLocale: string, locales: string[]) {
+    this.sourceLocale = sourceLocale;
+    this.locales = locales;
+  }
+
+  static getInstance() {
+    if (!this.instance) {
+      this.instance = new GTConfig(gt.sourceLocale || libraryDefaultLocale, []);
+    }
+    return this.instance;
+  }
+
+  setSourceLocale(sourceLocale: string) {
+    this.sourceLocale = sourceLocale;
+  }
+  getSourceLocale() {
+    return this.sourceLocale;
+  }
+
+  setLocales(locales: string[]) {
+    this.locales = locales;
+  }
+  getLocales() {
+    return this.locales;
+  }
+}
+export const gtConfig = GTConfig.getInstance();

package/src/adapter/createTask.ts

@@ -0,0 +1,41 @@
+import type { Adapter, GTFile, GTSerializedDocument, Secrets } from '../types';
+import { getTranslationTask } from './getTranslationTask';
+import { gt, overrideConfig } from './core';
+import { libraryDefaultLocale } from 'generaltranslation/internal';
+
+// note: this function is used to create a new translation task
+// uploads files & calls the getTranslationTask function
+export const createTask: Adapter['createTask'] = async (
+  documentInfo: GTFile,
+  serializedDocument: GTSerializedDocument,
+  localeIds: string[],
+  secrets: Secrets | null,
+  workflowUid?: string,
+  callbackUrl?: string
+) => {
+  const fileName = `sanity-${documentInfo.documentId}`;
+  overrideConfig(secrets);
+  const uploadResult = await gt.uploadSourceFiles(
+    [
+      {
+        source: {
+          content: serializedDocument.content,
+          fileName,
+          fileId: documentInfo.documentId,
+          fileFormat: 'HTML',
+          locale: gt.sourceLocale || libraryDefaultLocale,
+          versionId: documentInfo.versionId || undefined,
+        },
+      },
+    ],
+    {
+      sourceLocale: gt.sourceLocale || libraryDefaultLocale,
+    }
+  );
+  const enqueueResult = await gt.enqueueFiles(uploadResult.uploadedFiles, {
+    sourceLocale: gt.sourceLocale || libraryDefaultLocale,
+    targetLocales: localeIds,
+  });
+  const task = await getTranslationTask(documentInfo, secrets);
+  return task;
+};

package/src/adapter/getLocales.ts

@@ -0,0 +1,13 @@
+import type { Adapter, Secrets } from '../types';
+import { gt, gtConfig } from './core';
+
+// note: this function is used to get the available locales for a project
+export const getLocales: Adapter['getLocales'] = async (
+  secrets: Secrets | null
+) => {
+  return gtConfig.getLocales().map((locale: string) => ({
+    localeId: locale,
+    description: gt.getLocaleProperties(locale).name,
+    enabled: true,
+  }));
+};

package/src/adapter/getTranslation.ts

@@ -0,0 +1,20 @@
+import type { Adapter, GTFile, Secrets } from '../types';
+import { gt, overrideConfig } from './core';
+
+// note: downloads the translation for a given task and locale
+export const getTranslation: Adapter['getTranslation'] = async (
+  documentInfo: GTFile,
+  localeId: string,
+  secrets: Secrets | null
+) => {
+  if (!secrets) {
+    return '';
+  }
+  overrideConfig(secrets);
+  const text = await gt.downloadTranslatedFile({
+    fileId: documentInfo.documentId,
+    versionId: documentInfo.versionId || undefined,
+    locale: localeId,
+  });
+  return text;
+};

package/src/adapter/getTranslationTask.ts

@@ -0,0 +1,31 @@
+import type { Adapter, GTFile, Secrets } from '../types';
+import { gt, overrideConfig } from './core';
+
+// note: this function is used to get the status of a current translation task
+export const getTranslationTask: Adapter['getTranslationTask'] = async (
+  documentInfo: GTFile,
+  secrets: Secrets | null
+) => {
+  if (!documentInfo.documentId || !secrets) {
+    return {
+      document: documentInfo,
+      locales: [],
+    };
+  }
+  overrideConfig(secrets);
+  const task = await gt.querySourceFile({
+    fileId: documentInfo.documentId,
+    versionId: documentInfo.versionId || undefined,
+  });
+
+  return {
+    document: {
+      documentId: task.sourceFile.fileId,
+      versionId: task.sourceFile.versionId,
+    },
+    locales: task.translations.map((translation) => ({
+      localeId: translation.locale,
+      progress: translation.completedAt ? 100 : 0,
+    })),
+  };
+};

package/src/adapter/index.ts

@@ -0,0 +1,13 @@
+import type { Adapter } from '../types';
+
+import { getLocales } from './getLocales';
+import { getTranslationTask } from './getTranslationTask';
+import { getTranslation } from './getTranslation';
+import { createTask } from './createTask';
+
+export const GTAdapter: Adapter = {
+  getLocales,
+  getTranslationTask,
+  createTask,
+  getTranslation,
+};

package/src/components/LanguageStatus.tsx

@@ -0,0 +1,65 @@
+import { useCallback, useState } from 'react';
+import { Flex, Card, Text, Grid, Box, Button } from '@sanity/ui';
+import { DownloadIcon, CheckmarkCircleIcon } from '@sanity/icons';
+import ProgressBar from './ProgressBar';
+
+type LanguageStatusProps = {
+  title: string;
+  progress: number;
+  importFile: () => Promise<void>;
+  isImported?: boolean;
+};
+
+export const LanguageStatus = ({
+  title,
+  progress,
+  importFile,
+  isImported = false,
+}: LanguageStatusProps) => {
+  const [isBusy, setIsBusy] = useState(false);
+
+  const handleImport = useCallback(async () => {
+    setIsBusy(true);
+    try {
+      await importFile();
+    } finally {
+      setIsBusy(false);
+    }
+  }, [importFile, setIsBusy]);
+
+  return (
+    <Card shadow={1}>
+      <Grid columns={5} gap={3} padding={3}>
+        <Flex columnStart={1} columnEnd={3} align='center'>
+          <Text weight='bold' size={1}>
+            {title}
+          </Text>
+        </Flex>
+        {typeof progress === 'number' ? (
+          <Flex columnStart={3} columnEnd={5} align='center'>
+            <ProgressBar progress={progress} />
+          </Flex>
+        ) : null}
+        <Box columnStart={5} columnEnd={6}>
+          {isImported ? (
+            <Flex align='center' justify='center' style={{ color: 'green' }}>
+              <CheckmarkCircleIcon />
+              <Text size={1} style={{ marginLeft: '4px' }}>
+                Imported
+              </Text>
+            </Flex>
+          ) : (
+            <Button
+              style={{ width: `100%` }}
+              mode='ghost'
+              onClick={handleImport}
+              text={isBusy ? 'Importing...' : 'Import'}
+              icon={isBusy ? null : DownloadIcon}
+              disabled={isBusy || !progress || progress < 100}
+            />
+          )}
+        </Box>
+      </Grid>
+    </Card>
+  );
+};

package/src/components/NewTask.tsx

@@ -0,0 +1,249 @@
+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/ProgressBar.tsx

@@ -0,0 +1,38 @@
+import { Card, Flex, Label } from '@sanity/ui';
+
+export default function ProgressBar({ progress }: { progress: number }) {
+  if (typeof progress === 'undefined') {
+    console.warn('No progress prop passed to ProgressBar');
+    return null;
+  }
+
+  return (
+    <Card border radius={2} style={{ width: `100%`, position: `relative` }}>
+      <Flex
+        style={{
+          position: `absolute`,
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+          zIndex: 1,
+        }}
+        align='center'
+        justify='center'
+      >
+        <Label size={1}>{progress}%</Label>
+      </Flex>
+      <Card
+        style={{
+          width: '100%',
+          transform: `scaleX(${progress / 100})`,
+          transformOrigin: 'left',
+          transition: 'transform .2s ease',
+          boxSizing: 'border-box',
+        }}
+        padding={2}
+        tone='positive'
+      />
+    </Card>
+  );
+}