sanity-plugin-internationalized-array 1.6.2 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-internationalized-array",
-  "version": "1.6.2",
+  "version": "1.8.0",
   "description": "Store localized fields in an array to save on attributes",
   "keywords": [
     "sanity",
@@ -51,6 +51,7 @@
   "dependencies": {
     "@sanity/icons": "^2.2.2",
     "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/language-filter": "^3.1.2",
     "@sanity/ui": "^1.2.2",
     "fast-deep-equal": "^3.1.3",
     "lodash.get": "^4.4.2",
@@ -82,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"
   },
@@ -97,7 +98,8 @@
   },
   "sanityPlugin": {
     "verifyPackage": {
-      "eslintImports": false
+      "eslintImports": false,
+      "dependencies": false
     }
   }
 }

package/src/components/InternationalizedArray.tsx

@@ -1,117 +1,121 @@
 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 {useCallback, useDeferredValue, useEffect, useMemo} from 'react'
+import React, {useCallback, useEffect, useMemo} from 'react'
 import {
   ArrayOfObjectsInputProps,
   ArrayOfObjectsItem,
-  ArrayOfObjectsItemMember,
-  insert,
+  ArraySchemaType,
   set,
   setIfMissing,
-  useClient,
-  useFormBuilder,
+  useFormValue,
 } from 'sanity'
-import {suspend} from 'suspend-react'
 
-import {namespace, version} from '../cache'
-import type {ArraySchemaWithLanguageOptions, Value} from '../types'
+import {MAX_COLUMNS} from '../constants'
+import type {Value} from '../types'
+import {checkAllLanguagesArePresent} from '../utils/checkAllLanguagesArePresent'
+import {createAddAllTitle} from '../utils/createAddAllTitle'
+import {createAddLanguagePatches} from '../utils/createAddLanguagePatches'
 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(
   props: InternationalizedArrayProps
 ) {
   const {members, value, schemaType, onChange} = props
+
   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} = 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} =
+    useLanguageFilterStudioContext()
+  const documentType = useFormValue(['_type'])
+  const languageFilterEnabled =
+    typeof documentType === 'string' &&
+    languageFilterOptions.documentTypes.includes(documentType)
+
+  const filteredMembers = useMemo(
+    () =>
+      languageFilterEnabled
+        ? members.filter((member) => {
+            // This member is the outer object created by the plugin
+            // Satisfy TS
+            if (member.kind !== 'item') {
+              return false
+            }
+
+            // This is the inner "value" field member created by this plugin
+            const valueMember = member.item.members[0]
+
+            // Satisfy TS
+            if (valueMember.kind !== 'field') {
+              return false
+            }
+
+            return languageFilterOptions.filterField(
+              member.item.schemaType,
+              valueMember,
+              selectedLanguageIds
+            )
+          })
+        : members,
+    [languageFilterEnabled, members, languageFilterOptions, selectedLanguageIds]
+  )
 
   const handleAddLanguage = useCallback(
-    (languageId?: string) => {
-      if (!languages?.length) {
+    (param?: React.MouseEvent<HTMLButtonElement, MouseEvent> | string[]) => {
+      if (!filteredLanguages?.length) {
         return
       }
 
-      const itemBase = {_type: `${schemaType.name}Value`}
-
-      // Create new items
-      const newItems = languageId
-        ? // Just one for this language
-          [{...itemBase, _key: languageId}]
-        : // Or one for every missing language
-          languages
-            .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)
+      const addLanguageKeys: string[] = Array.isArray(param)
+        ? param
+        : ([param?.currentTarget?.value].filter(Boolean) as string[])
 
-        // 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])
     },
-    [languages, onChange, schemaType.name, value]
+    [filteredLanguages, languages, onChange, schemaType, value]
   )
 
-  // TODO: This is lazy, reordering and re-setting the whole array – it could be surgical
+  // Create default fields if the document is not yet created
+  const documentCreatedAt = useFormValue(['_createdAt'])
+
+  if (
+    // Array field is empty
+    !value &&
+    // Document form is in "not yet created" state
+    !documentCreatedAt &&
+    // Plugin config included default languages
+    defaultLanguages &&
+    defaultLanguages?.length > 0
+  ) {
+    handleAddLanguage(defaultLanguages)
+  }
+
+  // TODO: This is reordering and re-setting the whole array, it could be surgical
   const handleRestoreOrder = useCallback(() => {
     if (!value?.length || !languages?.length) {
       return
@@ -177,101 +181,96 @@ export default function InternationalizedArray(
     [languages]
   )
 
+  // Automatically restore order of fields
   useEffect(() => {
     if (languagesOutOfOrder.length > 0 && allKeysAreLanguages) {
       handleRestoreOrder()
     }
   }, [languagesOutOfOrder, allKeysAreLanguages, handleRestoreOrder])
 
+  // compare value keys with possible languages
+  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
+
   return (
-    <LanguageProvider value={{languages}}>
-      <Stack space={2}>
-        {members?.length > 0 ? (
-          <>
-            {/* TODO: Resolve type for ArrayOfObjectsItemMember */}
-            {/* @ts-ignore */}
-            {members.map((member: ArrayOfObjectsItemMember) => {
-              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}
-
-        {/* This now happens automatically */}
-        {/* {languagesOutOfOrder.length > 0 && allKeysAreLanguages ? (
-          <Button
-            tone="caution"
-            icon={RestoreIcon}
-            onClick={() => handleRestoreOrder()}
-            text="Restore order of languages"
-          />
-        ) : null} */}
-
-        {/* Show buttons if languages are configured */}
-        {/* Hide them if all languages have values */}
-        {languages?.length > 0 && languagesInUse.length < languages.length ? (
-          <Stack space={2}>
-            {/* Hide language-specific buttons if there's only one */}
-            {/* No more than 5 columns */}
-            {languages.length > 1 ? (
-              <Grid columns={Math.min(languages.length, 5)} 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()}
-                    icon={AddIcon}
-                    onClick={() => handleAddLanguage(language.id)}
-                  />
-                ))}
-              </Grid>
-            ) : null}
+    <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}
+
+      {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}
+          {buttonAddAll ? (
             <Button
               tone="primary"
               mode="ghost"
-              disabled={
-                readOnly || (value && value?.length >= languages?.length)
-              }
+              disabled={readOnly || allLanguagesArePresent}
               icon={AddIcon}
-              text={
-                // eslint-disable-next-line no-nested-ternary
-                value?.length
-                  ? `Add missing ${
-                      languages.length - value.length === 1
-                        ? `language`
-                        : `languages`
-                    }`
-                  : languages.length === 1
-                  ? `Add ${languages[0].title} Field`
-                  : `Add all languages`
-              }
-              onClick={() => handleAddLanguage()}
+              text={createAddAllTitle(value, filteredLanguages)}
+              onClick={handleAddLanguage}
             />
-          </Stack>
-        ) : null}
-      </Stack>
-    </LanguageProvider>
+          ) : null}
+        </Stack>
+      ) : null}
+    </Stack>
   )
 }

package/src/components/InternationalizedArrayContext.tsx

@@ -0,0 +1,91 @@
+import {useLanguageFilterStudioContext} from '@sanity/language-filter'
+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 {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])
+
+  return (
+    <InternationalizedArrayContext.Provider
+      value={{
+        ...internationalizedArray,
+        languages,
+        filteredLanguages,
+      }}
+    >
+      {props.renderDefault(props)}
+    </InternationalizedArrayContext.Provider>
+  )
+}

package/src/components/InternationalizedInput.tsx

@@ -15,7 +15,7 @@ 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} = React.useContext(LanguageContext)
+  const {languages} = useInternationalizedArrayContext()
 
   const languageKeysInUse = useMemo(
     () => parentValue?.map((v) => v._key) ?? [],
@@ -56,7 +56,9 @@ export default function InternationalizedInput(
 
   // Changes the key of this item, ideally to a valid language
   const handleKeyChange = useCallback(
-    (languageId: string) => {
+    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      const languageId = event?.currentTarget?.value
+
       if (
         !value ||
         !languages?.length ||
@@ -99,12 +101,13 @@ export default function InternationalizedInput(
                       fontSize={1}
                       key={language.id}
                       text={language.id.toLocaleUpperCase()}
-                      onClick={() => handleKeyChange(language.id)}
+                      value={language.id}
+                      // @ts-expect-error
+                      onClick={handleKeyChange}
                     />
                   ))}
                 </Menu>
               }
-              placement="right"
               popover={{portal: true}}
             />
           )}

package/src/constants.ts

@@ -0,0 +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,
+}