@smartcat/sanity-plugin 1.0.0 → 1.1.0

package/src/tool/ProjectsView.tsx

@@ -0,0 +1,208 @@
+import {useCallback, useEffect, useState} from 'react'
+import {useClient, useRelativeTime} from 'sanity'
+import {
+  Box,
+  Button,
+  Card,
+  Dialog,
+  Flex,
+  Heading,
+  Label,
+  Spinner,
+  Stack,
+  Text,
+  TextInput,
+  useToast,
+} from '@sanity/ui'
+import {AddIcon, TranslateIcon} from '@sanity/icons'
+import {API_VERSION, TRANSLATION_PROJECT_TYPE} from '../lib/constants'
+import {PROJECTS_QUERY, type ProjectListItem} from './data'
+import {StatusBadge} from './StatusBadge'
+import {WorkflowSelect} from './WorkflowSelect'
+import {useTemplates} from './useTemplates'
+import {useWorkflowSelection} from './useWorkflowSelection'
+
+interface ProjectsViewProps {
+  sourceLanguage: string
+  onOpenProject: (id: string) => void
+}
+
+/** A single project row. Extracted so `useRelativeTime` can run per row. */
+function ProjectRow({project: p, onOpen}: {project: ProjectListItem; onOpen: (id: string) => void}) {
+  const createdAgo = useRelativeTime(p._createdAt, {useTemporalPhrase: true})
+  return (
+    <Card
+      padding={3}
+      radius={2}
+      shadow={1}
+      as="button"
+      onClick={() => onOpen(p._id)}
+      style={{cursor: 'pointer', textAlign: 'left', width: '100%'}}
+    >
+      <Flex align="center" gap={3}>
+        <Box style={{width: 110}}>
+          <Text size={1} muted title={new Date(p._createdAt).toLocaleString()}>
+            {createdAgo}
+          </Text>
+        </Box>
+        <Box style={{width: 100}}>
+          <StatusBadge status={p.status} />
+        </Box>
+        <Box>
+          <TranslateIcon />
+        </Box>
+        <Box flex={1}>
+          <Text weight="semibold">{p.name}</Text>
+        </Box>
+        <Text size={1} muted>
+          {p.count} item{p.count === 1 ? '' : 's'}
+        </Text>
+      </Flex>
+    </Card>
+  )
+}
+
+export function ProjectsView({sourceLanguage, onOpenProject}: ProjectsViewProps) {
+  const client = useClient({apiVersion: API_VERSION})
+  const toast = useToast()
+  const [projects, setProjects] = useState<ProjectListItem[] | null>(null)
+  const [creating, setCreating] = useState(false)
+  const [newName, setNewName] = useState('')
+  const [busy, setBusy] = useState(false)
+  const {templates, loaded, requestRefresh} = useTemplates()
+  const [workflow, setWorkflow] = useWorkflowSelection(creating, templates, loaded)
+
+  // Refresh the template list each time the create dialog opens.
+  useEffect(() => {
+    if (creating) requestRefresh()
+  }, [creating, requestRefresh])
+
+  const load = useCallback(() => {
+    return client
+      .fetch<ProjectListItem[]>(PROJECTS_QUERY)
+      .then(setProjects)
+      .catch((err) => toast.push({status: 'error', title: 'Failed to load projects', description: String(err)}))
+  }, [client, toast])
+
+  // Initial load + live updates.
+  useEffect(() => {
+    load()
+    const sub = client
+      .listen(PROJECTS_QUERY, {}, {visibility: 'query'})
+      .subscribe({next: () => load(), error: () => {}})
+    return () => sub.unsubscribe()
+  }, [client, load])
+
+  const handleCreate = useCallback(async () => {
+    const name = newName.trim()
+    if (!name) return
+    setBusy(true)
+    try {
+      const created = await client.create({
+        _type: TRANSLATION_PROJECT_TYPE,
+        name,
+        status: 'draft',
+        sourceLanguage,
+        workflow,
+        items: [],
+      })
+      toast.push({status: 'success', title: `Created “${name}”`})
+      setCreating(false)
+      setNewName('')
+      onOpenProject(created._id)
+    } catch (err) {
+      toast.push({status: 'error', title: 'Failed to create project', description: String(err)})
+    } finally {
+      setBusy(false)
+    }
+  }, [newName, workflow, client, sourceLanguage, toast, onOpenProject])
+
+  return (
+    <Stack space={4}>
+      <Flex align="center" justify="space-between">
+        <Heading size={2}>Translation projects</Heading>
+        <Button icon={AddIcon} text="New project" tone="primary" onClick={() => setCreating(true)} />
+      </Flex>
+
+      {projects === null ? (
+        <Flex align="center" justify="center" padding={5}>
+          <Spinner muted />
+        </Flex>
+      ) : projects.length === 0 ? (
+        <Card padding={5} radius={2} tone="transparent" border>
+          <Stack space={3}>
+            <Text muted align="center">
+              No translation projects yet.
+            </Text>
+            <Flex justify="center">
+              <Button icon={AddIcon} text="Create your first project" onClick={() => setCreating(true)} />
+            </Flex>
+          </Stack>
+        </Card>
+      ) : (
+        <Stack space={2}>
+          {projects.map((p) => (
+            <ProjectRow key={p._id} project={p} onOpen={onOpenProject} />
+          ))}
+        </Stack>
+      )}
+
+      {creating && (
+        <Dialog
+          id="create-project"
+          header="New translation project"
+          onClose={() => {
+            setCreating(false)
+            setNewName('')
+          }}
+          width={1}
+        >
+          <Box padding={4}>
+            <Stack space={4}>
+              <Stack space={3}>
+                <Label size={1}>Project name</Label>
+                <TextInput
+                  value={newName}
+                  placeholder="e.g. Spring campaign"
+                  autoFocus
+                  onChange={(e) => setNewName(e.currentTarget.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleCreate()
+                  }}
+                  disabled={busy}
+                />
+              </Stack>
+              <Stack space={3}>
+                <Label size={1}>Workflow</Label>
+                <WorkflowSelect
+                  value={workflow}
+                  onChange={setWorkflow}
+                  templates={templates}
+                  disabled={busy}
+                />
+              </Stack>
+              <Flex justify="flex-end" gap={2}>
+                <Button
+                  mode="bleed"
+                  text="Cancel"
+                  onClick={() => {
+                    setCreating(false)
+                    setNewName('')
+                  }}
+                  disabled={busy}
+                />
+                <Button
+                  tone="primary"
+                  text="Create"
+                  onClick={handleCreate}
+                  loading={busy}
+                  disabled={!newName.trim() || !workflow}
+                />
+              </Flex>
+            </Stack>
+          </Box>
+        </Dialog>
+      )}
+    </Stack>
+  )
+}

package/src/tool/StatusBadge.tsx

@@ -0,0 +1,33 @@
+import {Badge, type BadgeTone} from '@sanity/ui'
+import type {TranslationProjectStatus} from '../types'
+import {STATUS_OPTIONS} from '../schema/translationProject'
+
+// Badge color is a UI-only concern (no schema equivalent), so it lives here.
+const TONES: Record<TranslationProjectStatus, BadgeTone> = {
+  draft: 'default',
+  queued: 'caution',
+  sent: 'primary',
+  translating: 'primary',
+  importing: 'caution',
+  downloaded: 'primary',
+  completed: 'positive',
+  error: 'critical',
+}
+
+// Display titles come from the schema's STATUS_OPTIONS — the single source.
+const LABELS: Record<string, string> = Object.fromEntries(
+  STATUS_OPTIONS.map((o) => [o.value, o.title]),
+)
+
+/** Display label for a project status (from the schema's status titles). */
+export function statusLabel(status: TranslationProjectStatus): string {
+  return LABELS[status] ?? status
+}
+
+export function StatusBadge({status}: {status: TranslationProjectStatus}) {
+  return (
+    <Badge tone={TONES[status] ?? 'default'} fontSize={0} padding={2} radius={2}>
+      {statusLabel(status)}
+    </Badge>
+  )
+}

package/src/tool/StudioInit.tsx

@@ -0,0 +1,42 @@
+import {useEffect, useRef} from 'react'
+import {useClient, type LayoutProps} from 'sanity'
+import {API_VERSION, SETTINGS_DOC_ID, SETTINGS_TYPE} from '../lib/constants'
+import {isRefreshInFlight} from './useTemplates'
+
+interface SettingsDoc {
+  templatesRequestedAt?: string
+  templatesSyncedAt?: string
+}
+
+const INIT_QUERY = `*[_id == $id][0]{templatesRequestedAt, templatesSyncedAt}`
+
+/**
+ * Studio layout wrapper. On first load it bootstraps the template cache *only if
+ * it has never been initialized* — i.e. no `templatesSyncedAt` and no request
+ * already in flight. Routine freshness is handled by the create dialogs; this
+ * just seeds an empty cache the very first time the Studio runs.
+ */
+export function StudioInit(props: LayoutProps) {
+  const client = useClient({apiVersion: API_VERSION})
+  const didRun = useRef(false)
+
+  useEffect(() => {
+    if (didRun.current) return
+    didRun.current = true
+    client
+      .fetch<SettingsDoc | null>(INIT_QUERY, {id: SETTINGS_DOC_ID})
+      .then((s) => {
+        // Skip if already initialized, or a fresh request is still in flight.
+        // A stale request (older than the window) falls through and re-bumps.
+        if (s?.templatesSyncedAt || isRefreshInFlight(s)) return
+        return client
+          .transaction()
+          .createIfNotExists({_id: SETTINGS_DOC_ID, _type: SETTINGS_TYPE})
+          .patch(SETTINGS_DOC_ID, (p) => p.set({templatesRequestedAt: new Date().toISOString()}))
+          .commit({visibility: 'async'})
+      })
+      .catch(() => {})
+  }, [client])
+
+  return props.renderDefault(props)
+}

package/src/tool/WorkflowSelect.tsx

@@ -0,0 +1,41 @@
+import {Select} from '@sanity/ui'
+import type {SmartcatTemplate} from '../smartcat/types'
+import {STANDARD_WORKFLOW_OPTIONS, TEMPLATE_PREFIX} from '../lib/workflow'
+
+interface WorkflowSelectProps {
+  value: string
+  onChange: (value: string) => void
+  templates: SmartcatTemplate[]
+  disabled?: boolean
+}
+
+/**
+ * Workflow picker for new projects: cached Smartcat templates grouped under
+ * "Templates", followed by the standard presets under "Standard workflows".
+ * Templates are expected pre-sorted by name (see `useTemplates`).
+ */
+export function WorkflowSelect({value, onChange, templates, disabled}: WorkflowSelectProps) {
+  return (
+    <Select value={value} onChange={(e) => onChange(e.currentTarget.value)} disabled={disabled}>
+      <option value="" disabled>
+        Select a workflow…
+      </option>
+      {templates.length > 0 && (
+        <optgroup label="Templates">
+          {templates.map((t) => (
+            <option key={t.id} value={`${TEMPLATE_PREFIX}${t.id}`}>
+              {t.name}
+            </option>
+          ))}
+        </optgroup>
+      )}
+      <optgroup label="Standard workflows">
+        {STANDARD_WORKFLOW_OPTIONS.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </optgroup>
+    </Select>
+  )
+}

package/src/tool/data.ts

@@ -0,0 +1,86 @@
+import {TRANSLATION_PROJECT_TYPE} from '../lib/constants'
+import {ITEM_ID, ITEM_ID_FROM_SUBQUERY, itemDocDeref} from '../lib/projectItems'
+import type {TranslationProjectStatus} from '../types'
+import type {DocProgress} from '../progress/core'
+
+/** A row in the projects list. */
+export interface ProjectListItem {
+  _id: string
+  name: string
+  status: TranslationProjectStatus
+  count: number
+  _createdAt: string
+  _updatedAt: string
+}
+
+/** A resolved item inside a project. */
+export interface ProjectItemRef {
+  _key: string
+  /** Published id of the added document, normalized across old (`_ref`) and new (`docId`) items. */
+  docId: string
+  /**
+   * Whether the published version is the translation source (vs the draft),
+   * decided and stored when the item was added. Drives the Draft/Published pill
+   * and which version the export serializes. Null on legacy items (pre-flag).
+   */
+  sourceIsPublished: boolean | null
+  doc: {_id: string; _type: string} | null
+  /** Locale variants linked via translation.metadata: language -> variant doc id. */
+  translations: {language: string; id: string}[] | null
+}
+
+/** A single project with its resolved items. */
+export interface ProjectDetail {
+  _id: string
+  name: string
+  status: TranslationProjectStatus
+  sourceLanguage: string | null
+  targetLanguages: string[] | null
+  smartcatProjectId: string | null
+  smartcatProjectUrl: string | null
+  lastError: string | null
+  /** JSON-encoded LogLine[] from the most recent Function run. */
+  functionLog: string | null
+  /** Targets the last download run deferred (size/time caps) — drives auto-continue. */
+  importRemaining: number | null
+  items: ProjectItemRef[] | null
+  progress: DocProgress[] | null
+  progressSyncedAt: string | null
+}
+
+export const PROJECTS_QUERY = `*[_type == "${TRANSLATION_PROJECT_TYPE}"] | order(_createdAt desc){
+  _id,
+  name,
+  status,
+  _createdAt,
+  _updatedAt,
+  "count": count(items)
+}`
+
+export const PROJECT_DETAIL_QUERY = `*[_id == $id][0]{
+  _id,
+  name,
+  status,
+  sourceLanguage,
+  targetLanguages,
+  smartcatProjectId,
+  smartcatProjectUrl,
+  lastError,
+  functionLog,
+  importRemaining,
+  progressSyncedAt,
+  items[]{
+    _key,
+    "docId": ${ITEM_ID},
+    sourceIsPublished,
+    "doc": ${itemDocDeref('{_id, _type}')},
+    "translations": *[_type == "translation.metadata" && references(${ITEM_ID_FROM_SUBQUERY})][0]
+      .translations[]{language, "id": value._ref}
+  },
+  progress[]{
+    _key,
+    sourceDocId,
+    title,
+    targets[]{_key, language, smartcatDocumentId, stages, complete, imported, syncedAt}
+  }
+}`

package/src/tool/index.ts

@@ -0,0 +1,19 @@
+import {route} from 'sanity/router'
+import {TranslateIcon} from '@sanity/icons'
+import type {Tool} from 'sanity'
+import {createDashboardComponent} from './Dashboard'
+import type {ResolvedSmartcatConfig} from '../lib/resolveConfig'
+
+/** Tool name; also the URL segment used to deep-link into the tool. */
+export const TRANSLATION_TOOL_NAME = 'translation-projects'
+
+/** Builds the "Translations" Studio tool (top-nav dashboard). */
+export function createTranslationsTool(config: ResolvedSmartcatConfig): Tool {
+  return {
+    name: TRANSLATION_TOOL_NAME,
+    title: 'Translation Projects',
+    icon: TranslateIcon,
+    component: createDashboardComponent(config),
+    router: route.create('/', [route.create('/project/:projectId')]),
+  }
+}