gt-sanity 0.0.6 → 1.0.0

package/src/components/page/BatchProgress.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Flex, Text, Spinner } from '@sanity/ui';
+
+interface BatchProgressProps {
+  isActive: boolean;
+  current: number;
+  total: number;
+  operationName: string;
+}
+
+export const BatchProgress: React.FC<BatchProgressProps> = ({
+  isActive,
+  current,
+  total,
+  operationName,
+}) => {
+  if (!isActive) return null;
+
+  return (
+    <Flex justify='center' align='center' gap={3}>
+      <Spinner size={1} />
+      <Text size={1}>
+        {operationName} {current} of {total}...
+      </Text>
+    </Flex>
+  );
+};

package/src/components/page/ImportAllDialog.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Box, Button, Dialog, Flex, Stack, Text } from '@sanity/ui';
+import { useTranslations } from '../TranslationsProvider';
+
+interface ImportAllDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ImportAllDialog: React.FC<ImportAllDialogProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const { documents, handleImportAll } = useTranslations();
+
+  const handleConfirm = async () => {
+    onClose();
+    await handleImportAll();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      header='Confirm Import'
+      id='import-all-dialog'
+      onClose={onClose}
+      footer={
+        <Box padding={3}>
+          <Flex gap={2}>
+            <Button text='Cancel' mode='ghost' onClick={onClose} />
+            <Button text='Import All' tone='critical' onClick={handleConfirm} />
+          </Flex>
+        </Box>
+      }
+    >
+      <Box padding={4}>
+        <Stack space={3}>
+          <Text>
+            Are you sure you want to import translations for all{' '}
+            {documents.length} documents?
+          </Text>
+          <Text size={1} muted>
+            This will download and apply translated content to your documents.
+            Note that this will overwrite any existing translations!
+          </Text>
+        </Stack>
+      </Box>
+    </Dialog>
+  );
+};

package/src/components/page/ImportMissingDialog.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Box, Button, Dialog, Flex, Stack, Text } from '@sanity/ui';
+import { useTranslations } from '../TranslationsProvider';
+
+interface ImportMissingDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ImportMissingDialog: React.FC<ImportMissingDialogProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const { handleImportMissing } = useTranslations();
+
+  const handleConfirm = async () => {
+    onClose();
+    await handleImportMissing();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      header='Confirm Import Missing'
+      id='import-missing-dialog'
+      onClose={onClose}
+      footer={
+        <Box padding={3}>
+          <Flex gap={2}>
+            <Button text='Cancel' mode='ghost' onClick={onClose} />
+            <Button
+              text='Import Missing'
+              tone='primary'
+              onClick={handleConfirm}
+            />
+          </Flex>
+        </Box>
+      }
+    >
+      <Box padding={4}>
+        <Stack space={3}>
+          <Text>
+            Import only the missing translations (translations that are ready
+            but haven't been imported to Sanity yet)?
+          </Text>
+          <Text size={1} muted>
+            This will check existing translation metadata and only import
+            translations that don't already exist in your dataset.
+          </Text>
+        </Stack>
+      </Box>
+    </Dialog>
+  );
+};

package/src/components/page/TranslateAllDialog.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Box, Button, Dialog, Flex, Stack, Text } from '@sanity/ui';
+import { useTranslations } from '../TranslationsProvider';
+
+interface TranslateAllDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const TranslateAllDialog: React.FC<TranslateAllDialogProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const { documents, handleTranslateAll } = useTranslations();
+
+  const handleConfirm = async () => {
+    onClose();
+    await handleTranslateAll();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      header='Confirm Translation'
+      id='translate-all-dialog'
+      onClose={onClose}
+      footer={
+        <Box padding={3}>
+          <Flex gap={2}>
+            <Button text='Cancel' mode='ghost' onClick={onClose} />
+            <Button
+              text='Translate All'
+              tone='critical'
+              onClick={handleConfirm}
+            />
+          </Flex>
+        </Box>
+      }
+    >
+      <Box padding={4}>
+        <Stack space={3}>
+          <Text>
+            Are you sure you want to create translations for all{' '}
+            {documents.length} documents?
+          </Text>
+          <Text size={1} muted>
+            This will submit all documents to General Translation for
+            processing.
+          </Text>
+        </Stack>
+      </Box>
+    </Dialog>
+  );
+};

package/src/components/page/TranslationsTable.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Box, Card, Stack, Text, Flex, Spinner } from '@sanity/ui';
+import { LanguageStatus } from '../shared/LanguageStatus';
+import { useTranslations } from '../TranslationsProvider';
+
+export const TranslationsTable: React.FC = () => {
+  const {
+    documents,
+    locales,
+    loadingDocuments,
+    translationStatuses,
+    downloadStatus,
+    importedTranslations,
+    handleImportDocument,
+  } = useTranslations();
+
+  if (loadingDocuments) {
+    return (
+      <Flex align='center' justify='center' padding={4}>
+        <Spinner />
+      </Flex>
+    );
+  }
+
+  return (
+    <Box style={{ maxHeight: '60vh', overflowY: 'auto' }}>
+      <Stack space={2}>
+        {documents.map((document) => (
+          <Card key={document._id} 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>
+  );
+};