sanity-plugin-internationalized-array 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-internationalized-array",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Store localized fields in an array to save on attributes",
   "keywords": [
     "sanity",

package/src/components/AddButtons.tsx

@@ -0,0 +1,39 @@
+import {AddIcon} from '@sanity/icons'
+import {Button, Grid} from '@sanity/ui'
+import React from 'react'
+
+import {MAX_COLUMNS} from '../constants'
+import {Language, Value} from '../types'
+
+type AddButtonsProps = {
+  languages: Language[]
+  readOnly: boolean
+  value: Value[] | undefined
+  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+}
+
+export default function AddButtons(props: AddButtonsProps) {
+  const {languages, readOnly, value, onClick} = props
+
+  return languages.length > 0 ? (
+    <Grid columns={Math.min(languages.length, MAX_COLUMNS)} gap={2}>
+      {languages.map((language) => (
+        <Button
+          key={language.id}
+          tone="primary"
+          mode="ghost"
+          fontSize={1}
+          disabled={
+            readOnly ||
+            Boolean(value?.find((item) => item._key === language.id))
+          }
+          text={language.id.toUpperCase()}
+          // Only show plus icon if there's one row or less
+          icon={languages.length > MAX_COLUMNS ? undefined : AddIcon}
+          value={language.id}
+          onClick={onClick}
+        />
+      ))}
+    </Grid>
+  ) : null
+}

package/src/components/DocumentAddButtons.tsx

@@ -0,0 +1,112 @@
+import {Box, Stack, Text, useToast} from '@sanity/ui'
+import React, {useCallback, useMemo} from 'react'
+import {
+  insert,
+  isSanityDocument,
+  ObjectSchemaType,
+  PatchEvent,
+  setIfMissing,
+} from 'sanity'
+import {useDocumentPane} from 'sanity/desk'
+
+import {createValueSchemaTypeName} from '../utils/createValueSchemaTypeName'
+import AddButtons from './AddButtons'
+import {useInternationalizedArrayContext} from './InternationalizedArrayContext'
+
+type DocumentAddButtonsProps = {
+  schemaType: ObjectSchemaType
+  value: Record<string, any> | undefined
+}
+
+export default function DocumentAddButtons(props: DocumentAddButtonsProps) {
+  const {filteredLanguages} = useInternationalizedArrayContext()
+  const {fields} = props.schemaType
+  const value = isSanityDocument(props.value) ? props.value : undefined
+
+  const toast = useToast()
+  const {onChange} = useDocumentPane()
+
+  // Find every internationalizedArray field at the document root
+  // TODO: This should be a recursive search through nested fields
+  const internationalizedArrayFields = useMemo(
+    () =>
+      fields.filter((field) =>
+        field.type.name.startsWith('internationalizedArray')
+      ),
+    [fields]
+  )
+
+  const handleDocumentButtonClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      const languageId = event.currentTarget.value
+      if (!languageId) {
+        toast.push({
+          status: 'error',
+          title: 'No language selected',
+        })
+        return
+      }
+
+      if (internationalizedArrayFields.length === 0) {
+        toast.push({
+          status: 'error',
+          title: 'No internationalizedArray fields found in document root',
+        })
+        return
+      }
+
+      // Find every internationalizedArray field that is empty for the selected language
+      const emptyLanguageFields = internationalizedArrayFields.filter(
+        (field) => {
+          const fieldValue = value?.[field.name]
+          const fieldValueLanguage =
+            fieldValue && Array.isArray(fieldValue)
+              ? fieldValue.find((v) => v._key === languageId)
+              : undefined
+
+          return !fieldValueLanguage
+        }
+      )
+
+      // Write a new patch for each empty field
+      const patches = emptyLanguageFields
+        .map((field) => {
+          const fieldKey = field.name
+
+          return [
+            setIfMissing([], [fieldKey]),
+            insert(
+              [
+                {
+                  _key: languageId,
+                  _type: createValueSchemaTypeName(field.type),
+                },
+              ],
+              'after',
+              [fieldKey, -1]
+            ),
+          ]
+        })
+        .flat()
+
+      onChange(PatchEvent.from(patches))
+    },
+    [internationalizedArrayFields, onChange, toast, value]
+  )
+
+  return (
+    <Stack space={3}>
+      <Box>
+        <Text size={1} weight="semibold">
+          Add translation to internationalized fields
+        </Text>
+      </Box>
+      <AddButtons
+        languages={filteredLanguages}
+        readOnly={false}
+        value={undefined}
+        onClick={handleDocumentButtonClick}
+      />
+    </Stack>
+  )
+}

package/src/components/InternationalizedArray.tsx

@@ -1,6 +1,6 @@
 import {AddIcon} from '@sanity/icons'
 import {useLanguageFilterStudioContext} from '@sanity/language-filter'
-import {Button, Grid, Stack, useToast} from '@sanity/ui'
+import {Button, Card, Grid, Stack, Text, useToast} from '@sanity/ui'
 import React, {useCallback, useEffect, useMemo} from 'react'
 import {
   ArrayOfObjectsInputProps,
@@ -16,6 +16,7 @@ import type {Value} from '../types'
 import {checkAllLanguagesArePresent} from '../utils/checkAllLanguagesArePresent'
 import {createAddAllTitle} from '../utils/createAddAllTitle'
 import {createAddLanguagePatches} from '../utils/createAddLanguagePatches'
+import AddButtons from './AddButtons'
 import Feedback from './Feedback'
 import {useInternationalizedArrayContext} from './InternationalizedArrayContext'
 
@@ -205,10 +206,11 @@ export default function InternationalizedArray(
     filteredLanguages?.length > 0 &&
     // Not every language has a value yet
     !allLanguagesArePresent
+  const fieldHasMembers = members?.length > 0
 
   return (
     <Stack space={2}>
-      {members?.length > 0 ? (
+      {fieldHasMembers ? (
         <>
           {filteredMembers.map((member) => {
             if (member.kind === 'item') {
@@ -229,36 +231,23 @@ export default function InternationalizedArray(
         </>
       ) : null}
 
+      {/* Give some feedback in the UI so the field doesn't look "missing" */}
+      {!addButtonsAreVisible && !fieldHasMembers ? (
+        <Card border tone="transparent" padding={3} radius={2}>
+          <Text size={1}>
+            This internationalized field currently has no translations.
+          </Text>
+        </Card>
+      ) : null}
+
       {addButtonsAreVisible ? (
         <Stack space={2}>
-          {/* Hide language-specific buttons if there's only one */}
-          {/* No more than 7 columns */}
-          {filteredLanguages.length > 1 ? (
-            <Grid
-              columns={Math.min(filteredLanguages.length, MAX_COLUMNS)}
-              gap={2}
-            >
-              {filteredLanguages.map((language) => (
-                <Button
-                  key={language.id}
-                  tone="primary"
-                  mode="ghost"
-                  fontSize={1}
-                  disabled={
-                    readOnly ||
-                    Boolean(value?.find((item) => item._key === language.id))
-                  }
-                  text={language.id.toUpperCase()}
-                  // Only show plus icon if there's one row or less
-                  icon={
-                    filteredLanguages.length > MAX_COLUMNS ? undefined : AddIcon
-                  }
-                  value={language.id}
-                  onClick={handleAddLanguage}
-                />
-              ))}
-            </Grid>
-          ) : null}
+          <AddButtons
+            languages={filteredLanguages}
+            value={value}
+            readOnly={readOnly}
+            onClick={handleAddLanguage}
+          />
           {buttonAddAll ? (
             <Button
               tone="primary"

package/src/components/InternationalizedArrayContext.tsx

@@ -1,4 +1,5 @@
 import {useLanguageFilterStudioContext} from '@sanity/language-filter'
+import {Stack} from '@sanity/ui'
 import equal from 'fast-deep-equal'
 import {createContext, useContext, useDeferredValue, useMemo} from 'react'
 import {ObjectInputProps, useClient, useFormBuilder} from 'sanity'
@@ -7,6 +8,7 @@ import {suspend} from 'suspend-react'
 import {namespace, version} from '../cache'
 import {CONFIG_DEFAULT} from '../constants'
 import {Language, PluginConfig} from '../types'
+import DocumentAddButtons from './DocumentAddButtons'
 import {getSelectedValue} from './getSelectedValue'
 
 // This provider makes the plugin config available to all components in the document form
@@ -77,6 +79,9 @@ export function InternationalizedArrayProvider(
       : languages
   }, [deferredDocument, languageFilterOptions, languages, selectedLanguageIds])
 
+  const showDocumentButtons =
+    internationalizedArray.buttonLocations.includes('document')
+
   return (
     <InternationalizedArrayContext.Provider
       value={{
@@ -85,7 +90,17 @@ export function InternationalizedArrayProvider(
         filteredLanguages,
       }}
     >
-      {props.renderDefault(props)}
+      {showDocumentButtons ? (
+        <Stack space={5}>
+          <DocumentAddButtons
+            schemaType={props.schemaType}
+            value={props.value}
+          />
+          {props.renderDefault(props)}
+        </Stack>
+      ) : (
+        props.renderDefault(props)
+      )}
     </InternationalizedArrayContext.Provider>
   )
 }

package/src/fieldActions/index.ts

@@ -28,7 +28,7 @@ const createTranslateFieldActions: (
     const disabled =
       value && Array.isArray(value)
         ? Boolean(value?.find((item) => item._key === language.id))
-        : true
+        : false
     const hidden = !filteredLanguages.some((f) => f.id === language.id)
 
     const {onChange} = useDocumentPane()
@@ -67,7 +67,7 @@ const AddMissingTranslationsFieldAction: (
   {languages, filteredLanguages}
 ) => {
   const value = useFormValue(fieldActionProps.path) as Value[]
-  const disabled = value.length === filteredLanguages.length
+  const disabled = value && value.length === filteredLanguages.length
   const hidden = checkAllLanguagesArePresent(filteredLanguages, value)
 
   const {onChange} = useDocumentPane()

package/src/types.ts

@@ -118,7 +118,7 @@ export type PluginConfig = {
    * Locations where the "+ EN" add language buttons are visible
    * @defaultValue ['field']
    * */
-  buttonLocations: ('field' | 'unstable__fieldAction')[]
+  buttonLocations: ('field' | 'unstable__fieldAction' | 'document')[]
   /**
    * Show or hide the "Add missing languages" button
    * @defaultValue true

package/src/utils/createAddLanguagePatches.ts

@@ -1,6 +1,7 @@
 import {FormInsertPatch, insert, Path, SchemaType} from 'sanity'
 
 import {Language, Value} from '../types'
+import {createValueSchemaTypeName} from './createValueSchemaTypeName'
 
 type AddConfig = {
   // New keys to add to the field
@@ -27,7 +28,7 @@ export function createAddLanguagePatches(config: AddConfig): FormInsertPatch[] {
     path = [],
   } = config
 
-  const itemBase = {_type: `${schemaType.name}Value`}
+  const itemBase = {_type: createValueSchemaTypeName(schemaType)}
 
   // Create new items
   const newItems =

package/src/utils/createValueSchemaTypeName.ts

@@ -0,0 +1,5 @@
+import {SchemaType} from 'sanity'
+
+export function createValueSchemaTypeName(schemaType: SchemaType): string {
+  return `${schemaType.name}Value`
+}