@sanity/document-internationalization 1.0.0 → 1.0.2

package/package.json

@@ -1,19 +1,41 @@
 {
   "name": "@sanity/document-internationalization",
-  "version": "1.0.0",
-  "description": "Create unique translations of a document based on its language, joined by a shared reference document.",
-  "author": "Simeon Griggs <simeon@sanity.io>",
+  "version": "1.0.2",
+  "description": "Provides document level translations for Sanity Studio",
+  "keywords": [
+    "sanity",
+    "cms",
+    "headless",
+    "realtime",
+    "content",
+    "sanity-plugin",
+    "i18n",
+    "localization"
+  ],
+  "homepage": "https://github.com/sanity-io/document-internationalization#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-io/document-internationalization/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:sanity-io/document-internationalization.git"
+  },
   "license": "MIT",
-  "source": "./src/index.ts",
-  "main": "./lib/cjs/index.js",
-  "module": "./lib/esm/index.js",
-  "types": "./lib/types/index.d.ts",
+  "author": "Sanity.io <hello@sanity.io>",
   "exports": {
     ".": {
-      "require": "./lib/cjs/index.js",
-      "default": "./lib/esm/index.js"
-    }
+      "types": "./lib/src/index.d.ts",
+      "source": "./src/index.ts",
+      "import": "./lib/index.esm.js",
+      "require": "./lib/index.js",
+      "default": "./lib/index.esm.js"
+    },
+    "./package.json": "./package.json"
   },
+  "main": "./lib/index.js",
+  "module": "./lib/index.esm.js",
+  "source": "./src/index.ts",
+  "types": "./lib/src/index.d.ts",
   "files": [
     "src",
     "lib",
@@ -21,54 +43,88 @@
     "sanity.json"
   ],
   "scripts": {
+    "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
+    "build": "pkg-utils build --strict",
     "clean": "rimraf lib",
-    "lint": "eslint .",
-    "prebuild": "npm run clean && plugin-kit verify-package --silent",
-    "build": "parcel build --no-cache",
-    "watch": "parcel watch",
+    "compile": "tsc --noEmit",
+    "eslint": "eslint --ext=.js,.jsx,.mjs,.ts,.tsx --quiet",
     "link-watch": "plugin-kit link-watch",
-    "prepublishOnly": "npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/sanity-io/document-internationalization"
+    "lint": "eslint .",
+    "lint:fix": "eslint . --quiet --fix",
+    "prepare": "husky install",
+    "prepublishOnly": "npm run build",
+    "watch": "pkg-utils watch"
   },
-  "engines": {
-    "node": ">=14.0.0"
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint:fix"
+    }
   },
   "dependencies": {
-    "@sanity/icons": "^1.3.6",
-    "@sanity/incompatible-plugin": "^1.0.1",
-    "@sanity/ui": "^0.38.2",
+    "@cprecioso/country-flag-emoji": "^1.0.0",
+    "@sanity/color": "^2.1.20",
+    "@sanity/icons": "^2.0.0",
+    "@sanity/incompatible-plugin": "^1.0.4",
     "@sanity/uuid": "^3.0.1",
-    "sanity-plugin-internationalized-array": "^1.1.0",
-    "sanity-plugin-utils": "^0.0.1"
+    "@sanity/ui": "^1.0.0",
+    "html-react-parser": "^1.4.12",
+    "just-omit": "^2.0.1",
+    "just-safe-get": "^4.0.1",
+    "just-split": "^3.0.1",
+    "pinst": "^2.1.6",
+    "react-fast-compare": "^3.2.0",
+    "react-twemoji": "^0.5.0",
+    "twemoji": "^14.0.2"
   },
   "devDependencies": {
-    "@parcel/packager-ts": "^2.7.0",
-    "@parcel/transformer-typescript-types": "^2.7.0",
-    "@sanity/plugin-kit": "^1.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
-    "eslint": "^8.23.0",
+    "@commitlint/cli": "^17.2.0",
+    "@commitlint/config-conventional": "^17.2.0",
+    "@sanity/pkg-utils": "^1.17.2",
+    "@sanity/plugin-kit": "^2.1.5",
+    "@sanity/semantic-release-preset": "^2.0.2",
+    "@types/lodash": "^4.14.179",
+    "@types/react": "^18",
+    "@types/react-router": "^5.1.11",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/resize-observer-browser": "^0.1.5",
+    "@types/styled-components": "^5.1.20",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-es5": "^1.5.0",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "parcel": "^2.7.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "lodash": "^4.17.21",
     "prettier": "^2.7.1",
-    "react": "^17.0.0 || ^18.0.0",
+    "prettier-plugin-packagejson": "^2.3.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router": "^5.1.0",
+    "react-router-dom": "^5.1.0",
     "rimraf": "^3.0.2",
-    "sanity": "^3.0.0-dev-preview.15",
-    "typescript": "^4.8.3"
+    "rxjs": "^6.6.0",
+    "sanity": "^3.0.0",
+    "styled-components": "^5.3.1",
+    "typescript": "^4.8.4"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0",
-    "sanity": "dev-preview"
+    "lodash": "^4.0.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router": "^5.0.0",
+    "react-router-dom": "^5.0.0",
+    "rxjs": "^6.0.0",
+    "sanity": "^3.0.0",
+    "styled-components": "^5.0.0"
   },
-  "bugs": {
-    "url": "https://github.com/sanity-io/document-internationalization/issues"
-  },
-  "homepage": "https://github.com/sanity-io/document-internationalization#readme"
+  "engines": {
+    "node": ">=14"
+  }
 }

package/src/actions/DeleteWithi18nAction.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import {TrashIcon} from '@sanity/icons'
+import {useDocumentOperation, useEditState, useSyncState} from 'sanity'
+import {ConfirmDeleteDialog} from 'sanity/desk'
+import {useToast} from '@sanity/ui'
+import type {DocumentActionComponent, DocumentActionDescription} from 'sanity'
+import {IEditState, IUseDocumentOperationResult, Ti18nConfig} from '../types'
+import {getBaseIdFromId, getTranslationsFor, useSanityClient} from '../utils'
+import {UiMessages} from '../constants'
+import {useConfig} from '../hooks'
+
+/**
+ * This code is mostly taken from the defualt DeleteAction provided by Sanity
+ */
+const DISABLED_REASON_TITLE = {
+  NOTHING_TO_DELETE: "This document doesn't yet exist or is already deleted",
+}
+
+export function createDeleteAction(pluginConfig: Ti18nConfig): DocumentActionComponent {
+  return function DeleteWith18nAction({id, type, onComplete}): DocumentActionDescription {
+    const toast = useToast()
+    const client = useSanityClient()
+    const config = useConfig(pluginConfig, type)
+    const baseDocumentId = React.useMemo(() => getBaseIdFromId(id), [id])
+    const baseDocumentEditState = useEditState(baseDocumentId, type) as IEditState
+    const syncState = useSyncState(id, type)
+    const baseDocumentSyncState = useSyncState(baseDocumentId, type)
+    const {delete: deleteOp} = useDocumentOperation(id, type) as IUseDocumentOperationResult
+    const [isDeleting, setIsDeleting] = React.useState(false)
+    const [isConfirmDialogOpen, setConfirmDialogOpen] = React.useState(false)
+
+    const onHandle = React.useCallback(() => {
+      setConfirmDialogOpen(true)
+    }, [])
+
+    const onDialogCancel = React.useCallback(() => {
+      setConfirmDialogOpen(false)
+      if (onComplete) onComplete()
+    }, [onComplete])
+
+    const onDialogConfirm = React.useCallback(async () => {
+      try {
+        setIsDeleting(true)
+        setConfirmDialogOpen(false)
+
+        if (baseDocumentEditState.draft || baseDocumentEditState.published) {
+          const baseTransaction = client.transaction()
+          if (baseDocumentEditState.draft) {
+            baseTransaction.delete(`drafts.${baseDocumentId}`)
+          }
+          if (baseDocumentEditState.published) {
+            baseTransaction.patch(baseDocumentId, {
+              unset: [config.fieldNames.references],
+            })
+          }
+          await baseTransaction.commit()
+        }
+
+        const translatedDocuments = await getTranslationsFor(client, config, baseDocumentId, true)
+        const translationsTransaction = client.transaction()
+        translatedDocuments.forEach((doc) => {
+          translationsTransaction.delete(doc._id)
+        })
+        await translationsTransaction.commit()
+
+        deleteOp.execute()
+        if (onComplete) onComplete()
+      } catch (err) {
+        toast.push({
+          closable: true,
+          status: 'error',
+          title: (err as Error).toString(),
+        })
+      } finally {
+        setIsDeleting(true)
+      }
+    }, [
+      toast,
+      config,
+      client,
+      baseDocumentId,
+      baseDocumentEditState.draft,
+      baseDocumentEditState.published,
+      deleteOp,
+      onComplete,
+    ])
+
+    return {
+      onHandle,
+      tone: 'critical',
+      icon: TrashIcon,
+      disabled:
+        isDeleting ||
+        Boolean(deleteOp.disabled) ||
+        syncState.isSyncing ||
+        baseDocumentSyncState.isSyncing,
+      shortcut: 'CTRL+ALT+D',
+      title:
+        (deleteOp.disabled &&
+          DISABLED_REASON_TITLE[deleteOp.disabled as keyof typeof DISABLED_REASON_TITLE]) ||
+        '',
+      label: isDeleting ? UiMessages.deleteAll.deleting : UiMessages.deleteAll.buttonTitle,
+      dialog: isConfirmDialogOpen && {
+        type: 'dialog',
+        onClose: onComplete,
+        content: (
+          <ConfirmDeleteDialog
+            action="delete"
+            id={id}
+            type={type}
+            onCancel={onDialogCancel}
+            onConfirm={onDialogConfirm}
+          />
+        ),
+      },
+    }
+  }
+}

package/src/actions/DuplicateWithi18nAction.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import {CopyIcon} from '@sanity/icons'
+import {useDocumentOperation} from 'sanity'
+import {useToast} from '@sanity/ui'
+import {uuid} from '@sanity/uuid'
+import type {DocumentActionComponent, DocumentActionDescription} from 'sanity'
+import {
+  buildDocId,
+  getBaseIdFromId,
+  getLanguageFromDocument,
+  getTranslationsFor,
+  useSanityClient,
+} from '../utils'
+import {IUseDocumentOperationResult, Ti18nConfig} from '../types'
+import {UiMessages} from '../constants'
+import {useConfig} from '../hooks'
+
+/**
+ * This code is mostly taken from the default DuplicateAction provided by Sanity
+ */
+
+const DISABLED_REASON_TITLE = {
+  NOTHING_TO_DUPLICATE: "This document doesn't yet exist so there's nothing to duplicate",
+}
+
+export function createDuplicateAction(pluginConfig: Ti18nConfig): DocumentActionComponent {
+  return ({id, type, draft, published}): DocumentActionDescription => {
+    const toast = useToast()
+    const client = useSanityClient()
+    const config = useConfig(pluginConfig, type)
+    const baseDocumentId = getBaseIdFromId(id)
+    const {duplicate: duplicateOp} = useDocumentOperation(id, type) as IUseDocumentOperationResult
+    const [isDuplicating, setDuplicating] = React.useState(false)
+
+    const onDuplicate = React.useCallback(async () => {
+      setDuplicating(true)
+      try {
+        const dupeId = uuid()
+        const translations = await getTranslationsFor(client, config, baseDocumentId)
+        const transaction = client.transaction()
+        transaction.create({
+          ...(draft ?? published),
+          _id: dupeId,
+          _type: type,
+        })
+        translations.forEach((t) => {
+          const isDraft = t._id.startsWith('drafts.')
+          const newId = buildDocId(config, dupeId, getLanguageFromDocument(t, config))
+          transaction.create({
+            ...t,
+            _id: isDraft ? `drafts.${newId}` : newId,
+          })
+        })
+        await transaction.commit()
+      } catch (err) {
+        console.error(err)
+        toast.push({
+          description: (err as Error).message,
+        })
+      }
+      setDuplicating(false)
+    }, [client, config, toast, baseDocumentId, type, draft, published])
+
+    return {
+      icon: CopyIcon,
+      disabled: Boolean(duplicateOp.disabled) || isDuplicating,
+      title:
+        (duplicateOp.disabled &&
+          DISABLED_REASON_TITLE[duplicateOp.disabled as keyof typeof DISABLED_REASON_TITLE]) ||
+        '',
+      label: isDuplicating
+        ? UiMessages.duplicateAll.duplicating
+        : UiMessages.duplicateAll.buttonTitle,
+      onHandle: onDuplicate,
+    }
+  }
+}

package/src/actions/PublishWithi18nAction.ts

@@ -0,0 +1,118 @@
+import * as React from 'react'
+
+import {useToast} from '@sanity/ui'
+import {CheckmarkIcon, PublishIcon} from '@sanity/icons'
+import {useDocumentOperation, useEditState, useSyncState, useValidationStatus} from 'sanity'
+import type {DocumentActionComponent, DocumentActionDescription} from 'sanity'
+import {getBaseIdFromId, updateIntlFieldsForDocument, useSanityClient} from '../utils'
+import {ReferenceBehavior, UiMessages} from '../constants'
+import {IEditState, IUseDocumentOperationResult, Ti18nConfig} from '../types'
+import {useConfig, useDelayedFlag} from '../hooks'
+
+export function createPublishAction(pluginConfig: Ti18nConfig): DocumentActionComponent {
+  return ({type, id, onComplete}): DocumentActionDescription => {
+    const toast = useToast()
+    const client = useSanityClient()
+    const config = useConfig(pluginConfig, type)
+    const baseDocumentId = getBaseIdFromId(id)
+    const updatingIntlFieldsPromiseRef = React.useRef<Promise<void> | null>(null)
+    const [publishState, setPublishState] = React.useState<'publishing' | 'published' | null>(null)
+    const [updatingIntlFields, setUpdatingIntlFields] = React.useState(false)
+    const {draft, published} = useEditState(id, type) as IEditState
+    const baseDocumentEditState = useEditState(baseDocumentId, type) as IEditState
+    const {publish} = useDocumentOperation(id, type) as IUseDocumentOperationResult
+    const {isValidating, validation} = useValidationStatus(id, type)
+    const syncState = useSyncState(id, type)
+    const baseDocumentSyncState = useSyncState(baseDocumentId, type)
+    const disabled = useDelayedFlag(
+      !!(
+        publishState === 'published' ||
+        publishState === 'publishing' ||
+        updatingIntlFields ||
+        publish.disabled ||
+        syncState.isSyncing ||
+        baseDocumentSyncState.isSyncing ||
+        isValidating ||
+        validation.some((marker) => marker.level === 'error')
+      )
+    )
+
+    const label = React.useMemo(() => {
+      if (publishState === 'publishing') return UiMessages.publishing
+      if (updatingIntlFields) return UiMessages.updatingIntlFields
+      return UiMessages.publish
+    }, [publishState, updatingIntlFields])
+
+    const doUpdateIntlFields = React.useCallback(async () => {
+      setUpdatingIntlFields(true)
+      try {
+        const document = draft || published
+        if (document) {
+          await updateIntlFieldsForDocument(
+            client,
+            config,
+            document,
+            baseDocumentEditState.published
+          )
+        }
+
+        toast.push({
+          closable: true,
+          status: 'success',
+          title: UiMessages.intlFieldsUpdated,
+        })
+      } catch (err) {
+        console.error(err)
+        toast.push({
+          closable: true,
+          status: 'error',
+          title: (err as Error).toString(),
+        })
+      }
+      setUpdatingIntlFields(false)
+    }, [toast, draft, published, client, baseDocumentEditState.published, config])
+
+    const onHandle = React.useCallback(() => {
+      setPublishState('publishing')
+      const isTranslation = id !== baseDocumentId
+      if (
+        isTranslation &&
+        !baseDocumentEditState.published &&
+        config.referenceBehavior === ReferenceBehavior.STRONG
+      ) {
+        throw new Error(UiMessages.errors.baseDocumentNotPublished)
+      } else {
+        publish.execute()
+      }
+    }, [id, baseDocumentId, publish, config, baseDocumentEditState.published])
+
+    React.useEffect(() => {
+      const didPublish = publishState === 'publishing' && !draft
+
+      const nextState = didPublish ? 'published' : null
+      const delay = didPublish ? 200 : 4000
+      const timer = setTimeout(() => {
+        setPublishState(nextState)
+      }, delay)
+      return () => clearTimeout(timer)
+    }, [publishState, draft])
+
+    React.useEffect(() => {
+      if (publishState === 'published') {
+        if (!updatingIntlFieldsPromiseRef.current) {
+          updatingIntlFieldsPromiseRef.current = doUpdateIntlFields()
+            .then(() => onComplete && onComplete())
+            .finally(() => (updatingIntlFieldsPromiseRef.current = null))
+        }
+      }
+    }, [publishState, onComplete, doUpdateIntlFields])
+
+    return {
+      disabled,
+      label,
+      icon: publishState === 'published' ? CheckmarkIcon : PublishIcon,
+      shortcut: disabled ? null : 'Ctrl+Alt+P',
+      onHandle,
+    }
+  }
+}

package/src/actions/index.ts

@@ -0,0 +1,42 @@
+import {type DocumentActionsContext, type DocumentActionComponent} from 'sanity'
+import {Ti18nConfig, Ti18nSchema} from '../types'
+import {getBaseIdFromId} from '../utils'
+import {createPublishAction} from './PublishWithi18nAction'
+import {createDeleteAction} from './DeleteWithi18nAction'
+import {createDuplicateAction} from './DuplicateWithi18nAction'
+
+export {createPublishAction, createDeleteAction, createDuplicateAction}
+
+export const resolveActions = (
+  prev: DocumentActionComponent[],
+  {schema, schemaType, documentId}: DocumentActionsContext,
+  pluginConfig: Ti18nConfig
+): DocumentActionComponent[] => {
+  const type: Ti18nSchema = schema.get(schemaType) as Ti18nSchema
+  const isI18n = type && type.i18n
+  const isBase = documentId === getBaseIdFromId(documentId)
+  let actions = prev
+
+  if (isI18n) {
+    actions = actions.map((Action) => {
+      const isPublishAction = Action.action === 'publish'
+      const isDeleteAction = Action.action === 'delete'
+
+      if (isPublishAction) {
+        return createPublishAction(pluginConfig)
+      }
+
+      if (isDeleteAction && isBase) {
+        return createDeleteAction(pluginConfig)
+      }
+
+      return Action
+    })
+
+    if (isBase) {
+      actions.push(createDuplicateAction(pluginConfig))
+    }
+  }
+
+  return actions
+}

package/src/badges/LanguageBadge.tsx

@@ -0,0 +1,22 @@
+import {DocumentBadgeComponent} from 'sanity'
+import {useConfig} from '../hooks'
+import {getLanguageFromDocument} from '../utils'
+import {Ti18nConfig} from '../types'
+
+export function createLanguageBadge(pluginConfig: Ti18nConfig): DocumentBadgeComponent {
+  const LanguageBadge: DocumentBadgeComponent = (props) => {
+    const config = useConfig(pluginConfig, props.type)
+    const doc = props.draft || props.published
+    const lang = doc ? getLanguageFromDocument(doc, config) : null
+    if (lang) {
+      return {
+        label: lang,
+        color: 'success',
+      }
+    }
+
+    return null
+  }
+
+  return LanguageBadge
+}

package/src/constants/I18nDelimiter.ts

@@ -0,0 +1 @@
+export const I18nDelimiter = '__i18n_'

package/src/constants/I18nPrefix.ts

@@ -0,0 +1 @@
+export const I18nPrefix = 'i18n'

package/src/constants/IdStructure.ts

@@ -0,0 +1,4 @@
+export enum IdStructure {
+  SUBPATH = 'subpath',
+  DELIMITER = 'delimiter',
+}