sanity-plugin-internationalized-array 1.7.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-internationalized-array",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Store localized fields in an array to save on attributes",
   "keywords": [
     "sanity",
@@ -83,7 +83,7 @@
     "react-dom": "^18",
     "react-is": "^18",
     "rimraf": "^4.1.2",
-    "sanity": "^3.3.1",
+    "sanity": "^3.14.1",
     "semantic-release": "^20.1.0",
     "typescript": "^4.9.5"
   },

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,31 +1,28 @@
 import {AddIcon} from '@sanity/icons'
 import {useLanguageFilterStudioContext} from '@sanity/language-filter'
-import {Button, Grid, Stack, useToast} from '@sanity/ui'
-import equal from 'fast-deep-equal'
-import React, {useCallback, useDeferredValue, useEffect, useMemo} from 'react'
+import {Button, Card, Grid, Stack, Text, useToast} from '@sanity/ui'
+import React, {useCallback, useEffect, useMemo} from 'react'
 import {
   ArrayOfObjectsInputProps,
   ArrayOfObjectsItem,
-  insert,
+  ArraySchemaType,
   set,
   setIfMissing,
-  useClient,
-  useFormBuilder,
   useFormValue,
 } from 'sanity'
-import {suspend} from 'suspend-react'
 
-import {namespace, version} from '../cache'
 import {MAX_COLUMNS} from '../constants'
-import type {ArraySchemaWithLanguageOptions, Value} from '../types'
+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 {getSelectedValue} from './getSelectedValue'
-// TODO: Move this provider to the root component
-import {LanguageProvider} from './languageContext'
+import {useInternationalizedArrayContext} from './InternationalizedArrayContext'
 
 export type InternationalizedArrayProps = ArrayOfObjectsInputProps<
   Value,
-  ArraySchemaWithLanguageOptions
+  ArraySchemaType
 >
 
 export default function InternationalizedArray(
@@ -35,30 +32,15 @@ export default function InternationalizedArray(
 
   const readOnly =
     typeof schemaType.readOnly === 'boolean' ? schemaType.readOnly : false
-  const {options} = schemaType
   const toast = useToast()
-  const {value: document} = useFormBuilder()
-  const deferredDocument = useDeferredValue(document)
-  const selectedValue = useMemo(
-    () => getSelectedValue(options.select, deferredDocument),
-    [options.select, deferredDocument]
-  )
 
-  const {apiVersion, defaultLanguages} = options
-  const client = useClient({apiVersion})
-  const languages = Array.isArray(options.languages)
-    ? options.languages
-    : suspend(
-        // eslint-disable-next-line require-await
-        async () => {
-          if (typeof options.languages === 'function') {
-            return options.languages(client, selectedValue)
-          }
-          return options.languages
-        },
-        [version, namespace, selectedValue],
-        {equal}
-      )
+  const {
+    languages,
+    filteredLanguages,
+    defaultLanguages,
+    buttonAddAll,
+    buttonLocations,
+  } = useInternationalizedArrayContext()
 
   // Support updating the UI if languageFilter is installed
   const {selectedLanguageIds, options: languageFilterOptions} =
@@ -96,74 +78,27 @@ export default function InternationalizedArray(
     [languageFilterEnabled, members, languageFilterOptions, selectedLanguageIds]
   )
 
-  const filteredLanguages = useMemo(
-    () =>
-      languageFilterEnabled
-        ? languages.filter((language) =>
-            selectedLanguageIds.includes(language.id)
-          )
-        : languages,
-    [languageFilterEnabled, languages, selectedLanguageIds]
-  )
-
   const handleAddLanguage = useCallback(
     (param?: React.MouseEvent<HTMLButtonElement, MouseEvent> | string[]) => {
       if (!filteredLanguages?.length) {
         return
       }
 
-      const languageIds: string[] = Array.isArray(param)
+      const addLanguageKeys: string[] = Array.isArray(param)
         ? param
         : ([param?.currentTarget?.value].filter(Boolean) as string[])
-      const itemBase = {_type: `${schemaType.name}Value`}
-
-      // Create new items
-      const newItems =
-        Array.isArray(languageIds) && languageIds.length > 0
-          ? // Just one for this language
-            languageIds.map((id) => ({...itemBase, _key: id}))
-          : // Or one for every missing language
-            filteredLanguages
-              .filter((language) =>
-                value?.length
-                  ? !value.find((v) => v._key === language.id)
-                  : true
-              )
-              .map((language) => ({...itemBase, _key: language.id}))
-
-      // Insert new items in the correct order
-      const languagesInUse = value?.length ? value.map((v) => v) : []
-
-      const insertions = newItems.map((item) => {
-        // What's the original index of this language?
-        const languageIndex = languages.findIndex((l) => item._key === l.id)
-
-        // What languages are there beyond that index?
-        const remainingLanguages = languages.slice(languageIndex + 1)
 
-        // So what is the index in the current value array of the next language in the language array?
-        const nextLanguageIndex = languagesInUse.findIndex((l) =>
-          // eslint-disable-next-line max-nested-callbacks
-          remainingLanguages.find((r) => r.id === l._key)
-        )
-
-        // Keep local state up to date incase multiple insertions are being made
-        if (nextLanguageIndex < 0) {
-          languagesInUse.push(item)
-        } else {
-          languagesInUse.splice(nextLanguageIndex, 0, item)
-        }
-
-        return nextLanguageIndex < 0
-          ? // No next language (-1), add to end of array
-            insert([item], 'after', [nextLanguageIndex])
-          : // Next language found, insert before that
-            insert([item], 'before', [nextLanguageIndex])
+      const patches = createAddLanguagePatches({
+        addLanguageKeys,
+        schemaType,
+        languages,
+        filteredLanguages,
+        value,
       })
 
-      onChange([setIfMissing([]), ...insertions])
+      onChange([setIfMissing([]), ...patches])
     },
-    [filteredLanguages, onChange, schemaType.name, value]
+    [filteredLanguages, languages, onChange, schemaType, value]
   )
 
   // Create default fields if the document is not yet created
@@ -255,100 +190,76 @@ export default function InternationalizedArray(
   }, [languagesOutOfOrder, allKeysAreLanguages, handleRestoreOrder])
 
   // compare value keys with possible languages
-  const allLanguagesArePresent = useMemo(() => {
-    const filteredLanguageIds = filteredLanguages.map((l) => l.id)
-    const languagesInUseIds = value ? value.map((v) => v._key) : []
-
-    return (
-      languagesInUseIds.length === filteredLanguageIds.length &&
-      languagesInUseIds.every((l) => filteredLanguageIds.includes(l))
-    )
-  }, [filteredLanguages, value])
+  const allLanguagesArePresent = useMemo(
+    () => checkAllLanguagesArePresent(filteredLanguages, value),
+    [filteredLanguages, value]
+  )
 
   if (!languagesAreValid) {
     return <Feedback />
   }
 
+  const addButtonsAreVisible =
+    // Plugin was configured to display buttons here (default!)
+    buttonLocations.includes('field') &&
+    // There's at least one language visible
+    filteredLanguages?.length > 0 &&
+    // Not every language has a value yet
+    !allLanguagesArePresent
+  const fieldHasMembers = members?.length > 0
+
   return (
-    <LanguageProvider value={{languages: filteredLanguages}}>
-      <Stack space={2}>
-        {members?.length > 0 ? (
-          <>
-            {filteredMembers.map((member) => {
-              if (member.kind === 'item') {
-                return (
-                  <ArrayOfObjectsItem
-                    key={member.key}
-                    member={member}
-                    renderItem={props.renderItem}
-                    renderField={props.renderField}
-                    renderInput={props.renderInput}
-                    renderPreview={props.renderPreview}
-                  />
-                )
-              }
-
-              return null
-            })}
-          </>
-        ) : null}
-
-        {/* Show buttons if languages are configured */}
-        {/* Hide them if all languages have values */}
-        {filteredLanguages?.length > 0 && !allLanguagesArePresent ? (
-          <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}
+    <Stack space={2}>
+      {fieldHasMembers ? (
+        <>
+          {filteredMembers.map((member) => {
+            if (member.kind === 'item') {
+              return (
+                <ArrayOfObjectsItem
+                  key={member.key}
+                  member={member}
+                  renderItem={props.renderItem}
+                  renderField={props.renderField}
+                  renderInput={props.renderInput}
+                  renderPreview={props.renderPreview}
+                />
+              )
+            }
+
+            return null
+          })}
+        </>
+      ) : 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}>
+          <AddButtons
+            languages={filteredLanguages}
+            value={value}
+            readOnly={readOnly}
+            onClick={handleAddLanguage}
+          />
+          {buttonAddAll ? (
             <Button
               tone="primary"
               mode="ghost"
               disabled={readOnly || allLanguagesArePresent}
               icon={AddIcon}
-              text={
-                // eslint-disable-next-line no-nested-ternary
-                value?.length
-                  ? `Add missing ${
-                      filteredLanguages.length - value.length === 1
-                        ? `language`
-                        : `languages`
-                    }`
-                  : filteredLanguages.length === 1
-                  ? `Add ${filteredLanguages[0].title} Field`
-                  : `Add all languages`
-              }
+              text={createAddAllTitle(value, filteredLanguages)}
               onClick={handleAddLanguage}
             />
-          </Stack>
-        ) : null}
-      </Stack>
-    </LanguageProvider>
+          ) : null}
+        </Stack>
+      ) : null}
+    </Stack>
   )
 }

package/src/components/InternationalizedArrayContext.tsx

@@ -0,0 +1,106 @@
+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'
+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
+// But with languages resolved and filtered languages updated base on @sanity/language-filter
+
+type InternationalizedArrayContextProps = Required<PluginConfig> & {
+  languages: Language[]
+  filteredLanguages: Language[]
+}
+
+export const InternationalizedArrayContext =
+  createContext<InternationalizedArrayContextProps>({
+    ...CONFIG_DEFAULT,
+    languages: [],
+    filteredLanguages: [],
+  })
+
+export function useInternationalizedArrayContext() {
+  return useContext(InternationalizedArrayContext)
+}
+
+type InternationalizedArrayProviderProps = ObjectInputProps & {
+  internationalizedArray: Required<PluginConfig>
+}
+
+export function InternationalizedArrayProvider(
+  props: InternationalizedArrayProviderProps
+) {
+  const {internationalizedArray} = props
+
+  const client = useClient({apiVersion: internationalizedArray.apiVersion})
+  const {value: document} = useFormBuilder()
+  const deferredDocument = useDeferredValue(document)
+  const selectedValue = useMemo(
+    () => getSelectedValue(internationalizedArray.select, deferredDocument),
+    [internationalizedArray.select, deferredDocument]
+  )
+
+  // Fetch or return languages
+  const languages = Array.isArray(internationalizedArray.languages)
+    ? internationalizedArray.languages
+    : suspend(
+        // eslint-disable-next-line require-await
+        async () => {
+          if (typeof internationalizedArray.languages === 'function') {
+            return internationalizedArray.languages(client, selectedValue)
+          }
+          return internationalizedArray.languages
+        },
+        [version, namespace],
+        {equal}
+      )
+
+  // Filter out some languages if language filter is enabled
+  const {selectedLanguageIds, options: languageFilterOptions} =
+    useLanguageFilterStudioContext()
+
+  const filteredLanguages = useMemo(() => {
+    const documentType = deferredDocument ? deferredDocument._type : undefined
+    const languageFilterEnabled =
+      typeof documentType === 'string' &&
+      languageFilterOptions.documentTypes.includes(documentType)
+
+    return languageFilterEnabled
+      ? languages.filter((language) =>
+          selectedLanguageIds.includes(language.id)
+        )
+      : languages
+  }, [deferredDocument, languageFilterOptions, languages, selectedLanguageIds])
+
+  const showDocumentButtons =
+    internationalizedArray.buttonLocations.includes('document')
+
+  return (
+    <InternationalizedArrayContext.Provider
+      value={{
+        ...internationalizedArray,
+        languages,
+        filteredLanguages,
+      }}
+    >
+      {showDocumentButtons ? (
+        <Stack space={5}>
+          <DocumentAddButtons
+            schemaType={props.schemaType}
+            value={props.value}
+          />
+          {props.renderDefault(props)}
+        </Stack>
+      ) : (
+        props.renderDefault(props)
+      )}
+    </InternationalizedArrayContext.Provider>
+  )
+}

package/src/components/InternationalizedInput.tsx

@@ -10,12 +10,12 @@ import {
   Spinner,
   Stack,
 } from '@sanity/ui'
-import React, {useCallback, useContext, useMemo} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {ObjectItemProps, useFormValue} from 'sanity'
 import {set, unset} from 'sanity'
 
 import {getToneFromValidation} from './getToneFromValidation'
-import {LanguageContext} from './languageContext'
+import {useInternationalizedArrayContext} from './InternationalizedArrayContext'
 
 type InternationalizedValue = {
   _type: string
@@ -44,7 +44,7 @@ export default function InternationalizedInput(
   const {validation, value, onChange, readOnly} = inlineProps
 
   // The parent array contains the languages from the plugin config
-  const {languages} = useContext(LanguageContext)
+  const {languages} = useInternationalizedArrayContext()
 
   const languageKeysInUse = useMemo(
     () => parentValue?.map((v) => v._key) ?? [],

package/src/constants.ts

@@ -1 +1,13 @@
+import {PluginConfig} from './types'
+
 export const MAX_COLUMNS = 7
+
+export const CONFIG_DEFAULT: Required<PluginConfig> = {
+  languages: [],
+  select: {},
+  defaultLanguages: [],
+  fieldTypes: [],
+  apiVersion: '2022-11-27',
+  buttonLocations: ['field'],
+  buttonAddAll: true,
+}