@smartcat/sanity-plugin 1.0.0 → 1.1.0

package/src/templates/core.ts

@@ -0,0 +1,55 @@
+import type {SmartcatTemplatesResponse} from '../smartcat/types'
+import {SETTINGS_DOC_ID} from '../lib/constants'
+
+/**
+ * Refreshes the cached Smartcat project-template list onto the `smartcat.settings`
+ * singleton. Run by the thin `smartcat-templates` Function when the browser bumps
+ * `templatesRequestedAt` (on Studio init or when a create dialog opens).
+ *
+ * Dependency-free (no DOM, no @sanity/* runtime) so it bundles into the Function.
+ */
+
+/** Minimal structural subset of @sanity/client used by the templates refresh. */
+export interface SanityLikeClient {
+  patch(id: string): {
+    set(attrs: Record<string, unknown>): {commit(): Promise<unknown>}
+  }
+}
+
+/** Structural subset of SmartcatClient the templates refresh needs. */
+export interface SmartcatTemplatesClient {
+  getTemplates(): Promise<SmartcatTemplatesResponse>
+}
+
+export interface RunTemplatesSyncOptions {
+  sanity: SanityLikeClient
+  smartcat: SmartcatTemplatesClient
+  /** `_id` of the settings singleton (defaults to the fixed id). */
+  settingsId?: string
+  now?: () => string
+}
+
+/** Sanitizes a template id into a stable, Sanity-safe array `_key`. */
+function keyify(value: string): string {
+  return value.replace(/[^a-zA-Z0-9_-]/g, '-') || 'x'
+}
+
+/**
+ * Fetches templates from Smartcat and writes them (sorted by name) to the
+ * settings singleton, stamping `templatesSyncedAt`. Always writes the timestamp —
+ * even for an empty list — so the cache reads as initialized.
+ */
+export async function runTemplatesSync(
+  options: RunTemplatesSyncOptions,
+): Promise<{count: number}> {
+  const {sanity, smartcat, settingsId = SETTINGS_DOC_ID, now = () => new Date().toISOString()} = options
+
+  const {templates} = await smartcat.getTemplates()
+  const value = [...(templates ?? [])]
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .map((t) => ({_key: keyify(t.id), id: t.id, name: t.name}))
+
+  await sanity.patch(settingsId).set({templates: value, templatesSyncedAt: now()}).commit()
+
+  return {count: value.length}
+}

package/src/templates/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Public entry for the `./templates` subpath, consumed by the thin
+ * `smartcat-templates` Function.
+ */
+export * from './core'

package/src/templates/templates.test.ts

@@ -0,0 +1,50 @@
+import {describe, it, expect, vi} from 'vitest'
+import {runTemplatesSync} from './core'
+
+function fakeSanity() {
+  const sets: Record<string, unknown>[] = []
+  const client = {
+    patch: (_id: string) => ({
+      set: (attrs: Record<string, unknown>) => {
+        sets.push(attrs)
+        return {commit: () => Promise.resolve(undefined)}
+      },
+    }),
+  }
+  return {client, sets}
+}
+
+describe('runTemplatesSync', () => {
+  it('caches templates sorted by name with stable keys and a sync timestamp', async () => {
+    const {client: sanity, sets} = fakeSanity()
+    const smartcat = {
+      getTemplates: vi.fn().mockResolvedValue({
+        templates: [
+          {id: 'b-2', name: 'Translate file (2x review)'},
+          {id: 'a-1', name: 'AI + Human'},
+        ],
+      }),
+    }
+
+    const {count} = await runTemplatesSync({sanity, smartcat, now: () => 'T'})
+
+    expect(count).toBe(2)
+    expect(sets.at(-1)).toEqual({
+      templates: [
+        {_key: 'a-1', id: 'a-1', name: 'AI + Human'},
+        {_key: 'b-2', id: 'b-2', name: 'Translate file (2x review)'},
+      ],
+      templatesSyncedAt: 'T',
+    })
+  })
+
+  it('marks the cache initialized even when no templates exist', async () => {
+    const {client: sanity, sets} = fakeSanity()
+    const smartcat = {getTemplates: vi.fn().mockResolvedValue({templates: []})}
+
+    const {count} = await runTemplatesSync({sanity, smartcat, now: () => 'T'})
+
+    expect(count).toBe(0)
+    expect(sets.at(-1)).toEqual({templates: [], templatesSyncedAt: 'T'})
+  })
+})

package/src/tool/Dashboard.tsx

@@ -0,0 +1,46 @@
+import {useCallback} from 'react'
+import {useRouter, useRouterState} from 'sanity/router'
+import {Box, Container} from '@sanity/ui'
+import {ProjectsView} from './ProjectsView'
+import {ProjectView} from './ProjectView'
+import type {ResolvedSmartcatConfig} from '../lib/resolveConfig'
+
+/**
+ * Builds the dashboard component for the Translations tool.
+ * Uses the tool router to switch between the projects list and a project detail
+ * view, so the selected project is reflected in the URL (deep-linkable).
+ */
+export function createDashboardComponent(config: ResolvedSmartcatConfig) {
+  const {sourceLanguage, languages, translatableTypes, documentI18nLanguageField, fieldI18nLanguageField} =
+    config
+
+  return function Dashboard() {
+    const router = useRouter()
+    const projectId = useRouterState(
+      useCallback((state) => (state.projectId as string | undefined) ?? null, []),
+    )
+
+    const openProject = useCallback((id: string) => router.navigate({projectId: id}), [router])
+    const goBack = useCallback(() => router.navigate({}), [router])
+
+    return (
+      <Box padding={4} height="fill" overflow="auto">
+        <Container width={2}>
+          {projectId ? (
+            <ProjectView
+              projectId={projectId}
+              onBack={goBack}
+              languages={languages}
+              sourceLanguage={sourceLanguage}
+              translatableTypes={translatableTypes}
+              documentI18nLanguageField={documentI18nLanguageField}
+              fieldI18nLanguageField={fieldI18nLanguageField}
+            />
+          ) : (
+            <ProjectsView sourceLanguage={sourceLanguage} onOpenProject={openProject} />
+          )}
+        </Container>
+      </Box>
+    )
+  }
+}

package/src/tool/ItemProgress.tsx

@@ -0,0 +1,176 @@
+import {Badge, Box, Button, Flex, Inline, Stack, Text, useTheme_v2, Card} from '@sanity/ui'
+import {LaunchIcon} from '@sanity/icons'
+import {useIntentLink} from 'sanity/router'
+import {targetPercent, type DocProgress, type TargetProgress} from '../progress/core'
+import type {SmartcatLanguage} from '../types'
+
+/** Readable name for a language id, falling back to the id itself. */
+export function languageTitle(languages: SmartcatLanguage[], id: string): string {
+  return languages.find((l) => l.id === id)?.title || id
+}
+
+/** Locale variants for an item: language id -> Sanity variant document id. */
+export interface VariantLinks {
+  type: string
+  byLanguage: Record<string, string>
+}
+
+/** Icon-only link that opens a language variant document in the Studio. */
+function OpenVariantInStudio({id, type}: {id: string; type: string}) {
+  const {onClick, href} = useIntentLink({intent: 'edit', params: {id, type}})
+  return (
+    <Button
+      as="a"
+      href={href}
+      onClick={onClick}
+      mode="bleed"
+      icon={LaunchIcon}
+      title="Open this language version in Studio"
+      fontSize={0}
+      padding={1}
+    />
+  )
+}
+
+/**
+ * Smartcat editor URL for a target document. Host comes from the project's
+ * Smartcat URL; the file guid and numeric language id are the two halves of the
+ * target document id (`<fileGuid>_<langNum>`).
+ */
+function editorUrl(projectUrl: string | null | undefined, smartcatDocumentId?: string): string | null {
+  if (!projectUrl || !smartcatDocumentId) return null
+  let origin: string
+  try {
+    origin = new URL(projectUrl).origin
+  } catch {
+    return null
+  }
+  const sep = smartcatDocumentId.lastIndexOf('_')
+  if (sep < 0) return null
+  const fileGuid = smartcatDocumentId.slice(0, sep)
+  const langNum = smartcatDocumentId.slice(sep + 1)
+  return `${origin}/open-editor/${fileGuid}?targetLanguageId=${langNum}`
+}
+
+/**
+ * A thin track with a vivid fill whose width reflects the actual percentage.
+ * Uses the design system's solid button colors (the same vivid blue/green used on
+ * primary/positive buttons) rather than the muted Card surface tones — green once
+ * the target is complete, blue while in progress.
+ */
+function ProgressBar({percent, complete}: {percent: number; complete: boolean}) {
+  const {color} = useTheme_v2()
+  const pct = Math.max(0, Math.min(100, percent))
+  const fill = (complete ? color.button.default.positive : color.button.default.primary).enabled.bg
+  return (
+    <Card tone="transparent" border radius={3} style={{height: 10, overflow: 'hidden'}}>
+      <div
+        style={{
+          width: `${pct}%`,
+          height: '100%',
+          background: fill,
+          borderRadius: 'inherit',
+          transition: 'width 0.3s ease',
+        }}
+      />
+    </Card>
+  )
+}
+
+function TargetRow({
+  target,
+  languages,
+  smartcatProjectUrl,
+  variants,
+}: {
+  target: TargetProgress
+  languages: SmartcatLanguage[]
+  smartcatProjectUrl?: string | null
+  variants?: VariantLinks
+}) {
+  const percent = targetPercent(target.stages)
+  const href = editorUrl(smartcatProjectUrl, target.smartcatDocumentId)
+  const label = languageTitle(languages, target.language)
+  const variantId = variants?.byLanguage[target.language]
+  return (
+    <Stack space={2}>
+      <Flex align="center" gap={3}>
+        <Box style={{width: 150, flex: 'none'}}>
+          <Flex align="center" gap={1}>
+            <Text size={1} weight="medium">
+              {href ? (
+                <a
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  title="Open document in Smartcat editor"
+                >
+                  {label}
+                </a>
+              ) : (
+                label
+              )}
+            </Text>
+            {variantId && variants && <OpenVariantInStudio id={variantId} type={variants.type} />}
+          </Flex>
+        </Box>
+        <Box flex={1}>
+          <ProgressBar percent={percent} complete={target.complete} />
+        </Box>
+        <Box style={{width: 38, flex: 'none'}}>
+          <Text size={1} muted align="right">
+            {percent}%
+          </Text>
+        </Box>
+        <Box style={{width: 72, flex: 'none'}}>
+          {target.imported ? (
+            <Badge tone="positive" fontSize={0} padding={2}>
+              imported
+            </Badge>
+          ) : target.complete ? (
+            <Badge tone="primary" fontSize={0} padding={2}>
+              ready
+            </Badge>
+          ) : null}
+        </Box>
+      </Flex>
+      {target.stages.length > 0 && (
+        <Inline space={3} style={{paddingLeft: 162}}>
+          {target.stages.map((stage) => (
+            <Text key={stage.name} size={0} muted>
+              {stage.name}: {stage.percent}%
+            </Text>
+          ))}
+        </Inline>
+      )}
+    </Stack>
+  )
+}
+
+/** Per-language, per-stage progress for a single project item. */
+export function ItemProgress({
+  doc,
+  languages,
+  smartcatProjectUrl,
+  variants,
+}: {
+  doc: DocProgress
+  languages: SmartcatLanguage[]
+  smartcatProjectUrl?: string | null
+  variants?: VariantLinks
+}) {
+  if (!doc.targets || doc.targets.length === 0) return null
+  return (
+    <Stack space={3} paddingTop={1}>
+      {doc.targets.map((target) => (
+        <TargetRow
+          key={target._key}
+          target={target}
+          languages={languages}
+          smartcatProjectUrl={smartcatProjectUrl}
+          variants={variants}
+        />
+      ))}
+    </Stack>
+  )
+}

package/src/tool/LogPanel.tsx

@@ -0,0 +1,207 @@
+import {useEffect, useLayoutEffect, useRef, useState} from 'react'
+import {Box, Button, Card, Flex, Heading, Stack, Text, useTheme} from '@sanity/ui'
+import {CheckmarkIcon, CopyIcon} from '@sanity/icons'
+import type {LogLine, LogLevel} from '../lib/log'
+
+/** Flat, paste-friendly text for the whole log (indented lines + any values). */
+function logsToText(logs: LogLine[]): string {
+  return logs
+    .map((l) => {
+      const prefix = l.indent ? '  ' : ''
+      const detail = [
+        l.before !== undefined ? `before: ${l.before}` : null,
+        l.value !== undefined ? `${l.before !== undefined ? 'after' : 'value'}: ${l.value}` : null,
+        l.error !== undefined ? `error: ${l.error}` : null,
+      ]
+        .filter(Boolean)
+        .map((d) => `    ${d}`)
+        .join('\n')
+      return `${prefix}${l.message}${detail ? `\n${detail}` : ''}`
+    })
+    .join('\n')
+}
+
+const MONO = 'var(--font-family-mono, monospace)'
+const VALUE_BG = 'var(--card-code-bg-color, rgba(127,127,127,0.12))'
+
+/** Status glyph per level. Info/update have none — only success/error/skip are marked. */
+const GLYPH: Record<LogLevel, string> = {info: '', success: '✓', skip: '–', error: '✗', update: ''}
+
+/** Level → a theme-provided foreground colour (muted tone, good contrast in both themes). */
+function levelColor(theme: ReturnType<typeof useTheme>, level: LogLevel): string | undefined {
+  const muted = theme.sanity.color.muted
+  if (level === 'success') return muted.positive.enabled.fg
+  if (level === 'error') return muted.critical.enabled.fg
+  if (level === 'update') return muted.primary.enabled.fg
+  return undefined
+}
+
+/** Background for a value box: light red for errors, the neutral gray otherwise. */
+function valueBg(theme: ReturnType<typeof useTheme>, level: LogLevel): string {
+  return level === 'error' ? theme.sanity.color.muted.critical.enabled.bg : VALUE_BG
+}
+
+/** A value box; optional label (e.g. "Before"/"After") shown above the text. */
+function ValueBox({label, text, bg}: {label?: string; text: string; bg: string}) {
+  return (
+    <Box flex={1} padding={2} style={{background: bg, borderRadius: 3, minWidth: 0}}>
+      <Stack space={2}>
+        {label && (
+          <Text size={0} muted weight="semibold">
+            {label}
+          </Text>
+        )}
+        <Text size={0} style={{fontFamily: MONO, whiteSpace: 'pre-wrap'}}>
+          {text}
+        </Text>
+      </Stack>
+    </Box>
+  )
+}
+
+function LogRow({line}: {line: LogLine}) {
+  const theme = useTheme()
+  const [open, setOpen] = useState(false)
+  const hasDetail = line.value !== undefined || line.before !== undefined || line.error !== undefined
+  const toggle = hasDetail ? () => setOpen((v) => !v) : undefined
+  return (
+    <Box paddingLeft={line.indent ? 4 : 0}>
+      <Text
+        size={1}
+        muted={line.level === 'skip'}
+        onClick={toggle}
+        style={{
+          fontFamily: MONO,
+          whiteSpace: 'pre-wrap',
+          cursor: hasDetail ? 'pointer' : 'default',
+          color: levelColor(theme, line.level),
+        }}
+      >
+        {/* Triangle is part of the line text, pushing the message right. */}
+        {hasDetail && <span style={{opacity: 0.6, userSelect: 'none'}}>{open ? '▾' : '▸'} </span>}
+        {GLYPH[line.level] ? <span style={{opacity: 0.7}}>{GLYPH[line.level]} </span> : null}
+        {line.message}
+      </Text>
+      {hasDetail && open && (
+        <Box marginTop={1}>
+          <Stack space={2}>
+            {line.before !== undefined ? (
+              // Before/after side by side, two boxes with a gap.
+              <Flex gap={3} align="stretch">
+                <ValueBox label="Before" text={line.before} bg={valueBg(theme, line.level)} />
+                <ValueBox label="After" text={line.value ?? ''} bg={valueBg(theme, line.level)} />
+              </Flex>
+            ) : line.value !== undefined ? (
+              <ValueBox text={line.value} bg={valueBg(theme, line.level)} />
+            ) : null}
+            {line.error !== undefined && (
+              <ValueBox label="JSON error" text={line.error} bg={valueBg(theme, line.level)} />
+            )}
+          </Stack>
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+/**
+ * Live, collapsible log of the export/import flow. Collapsed by default. While
+ * expanded it auto-scrolls to the newest line only when the user is already at
+ * the bottom; once they scroll up to inspect, it stops following so the view
+ * doesn't jump out from under them.
+ */
+export function LogPanel({
+  logs,
+  expanded: expandedProp,
+  onExpandedChange,
+}: {
+  logs: LogLine[]
+  /** Controlled expansion; omit to let the panel manage its own (collapsed default). */
+  expanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
+}) {
+  const [internalExpanded, setInternalExpanded] = useState(false)
+  const expanded = expandedProp ?? internalExpanded
+  const setExpanded = (next: boolean) => {
+    onExpandedChange?.(next)
+    if (expandedProp === undefined) setInternalExpanded(next)
+  }
+  const [copied, setCopied] = useState(false)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const stickToBottom = useRef(true)
+  const copyTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => () => {
+    if (copyTimeout.current) clearTimeout(copyTimeout.current)
+  }, [])
+
+  const handleCopy = () => {
+    navigator.clipboard?.writeText(logsToText(logs))
+    setCopied(true)
+    if (copyTimeout.current) clearTimeout(copyTimeout.current)
+    copyTimeout.current = setTimeout(() => setCopied(false), 1500)
+  }
+
+  const handleScroll = () => {
+    const el = scrollRef.current
+    if (!el) return
+    stickToBottom.current = el.scrollHeight - el.scrollTop - el.clientHeight < 8
+  }
+
+  useLayoutEffect(() => {
+    const el = scrollRef.current
+    if (el && stickToBottom.current) el.scrollTop = el.scrollHeight
+  }, [logs, expanded])
+
+  return (
+    <Stack space={3}>
+      <Flex
+        align="center"
+        gap={2}
+        onClick={() => setExpanded(!expanded)}
+        style={{cursor: 'pointer', userSelect: 'none'}}
+      >
+        <Heading size={1}>
+          {expanded ? '▾' : '▸'} {logs.length > 0 ? `Log (${logs.length})` : 'Log'}
+        </Heading>
+      </Flex>
+
+      {expanded && (
+        <Card radius={2} border style={{position: 'relative'}}>
+          {logs.length === 0 ? (
+            <Box padding={3}>
+              <Text size={1} muted>
+                The log is empty — it will show the status of any send or import operation.
+              </Text>
+            </Box>
+          ) : (
+            <>
+              <Box style={{position: 'absolute', top: 6, right: 6, zIndex: 1}}>
+                <Button
+                  mode="ghost"
+                  padding={2}
+                  fontSize={1}
+                  icon={copied ? CheckmarkIcon : CopyIcon}
+                  tone={copied ? 'positive' : 'default'}
+                  onClick={handleCopy}
+                  title={copied ? 'Copied' : 'Copy log'}
+                />
+              </Box>
+              <div
+                ref={scrollRef}
+                onScroll={handleScroll}
+                style={{maxHeight: 320, overflowY: 'auto', padding: 12}}
+              >
+                <Stack space={2}>
+                  {logs.map((line, i) => (
+                    <LogRow key={i} line={line} />
+                  ))}
+                </Stack>
+              </div>
+            </>
+          )}
+        </Card>
+      )}
+    </Stack>
+  )
+}