sanity-plugin-internationalized-array 3.2.2 → 4.0.0

package/src/components/InternationalizedArray.tsx

@@ -1,286 +0,0 @@
-import {AddIcon} from '@sanity/icons'
-import {useLanguageFilterStudioContext} from '@sanity/language-filter'
-import {Button, Card, Stack, Text, useToast} from '@sanity/ui'
-import type React from 'react'
-import {useCallback, useEffect, useMemo} from 'react'
-import {
-  type ArrayOfObjectsInputProps,
-  ArrayOfObjectsItem,
-  type ArraySchemaType,
-  MemberItemError,
-  set,
-  setIfMissing,
-  useFormValue,
-} from 'sanity'
-import {useDocumentPane} from 'sanity/structure'
-
-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'
-
-export type InternationalizedArrayProps = ArrayOfObjectsInputProps<
-  Value,
-  ArraySchemaType
->
-
-export default function InternationalizedArray(
-  props: InternationalizedArrayProps
-): React.ReactElement {
-  const {
-    members,
-    value,
-    schemaType,
-    onChange,
-    readOnly: documentReadOnly,
-  } = props
-
-  const readOnly =
-    typeof schemaType.readOnly === 'boolean' ? schemaType.readOnly : false
-  const toast = useToast()
-
-  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(
-    async (
-      param?: React.MouseEvent<HTMLButtonElement, MouseEvent> | string[]
-    ) => {
-      if (!filteredLanguages?.length) {
-        return
-      }
-
-      const addLanguageKeys: string[] = Array.isArray(param)
-        ? param
-        : ([param?.currentTarget?.value].filter(Boolean) as string[])
-
-      const patches = createAddLanguagePatches({
-        addLanguageKeys,
-        schemaType,
-        languages,
-        filteredLanguages,
-        value,
-      })
-
-      onChange([setIfMissing([]), ...patches])
-    },
-    [filteredLanguages, languages, onChange, schemaType, value]
-  )
-
-  const {isDeleting} = useDocumentPane()
-
-  const addedLanguages = members.map(({key}) => key)
-  const hasAddedDefaultLanguages = defaultLanguages
-    .filter((language) => languages.find((l) => l.id === language))
-    .every((language) => addedLanguages.includes(language))
-
-  useEffect(() => {
-    if (!isDeleting && !hasAddedDefaultLanguages) {
-      const languagesToAdd = defaultLanguages
-        .filter((language) => !addedLanguages.includes(language))
-        .filter((language) => languages.find((l) => l.id === language))
-      // Account for strict mode by scheduling the update
-      const timeout = setTimeout(() => {
-        if (!documentReadOnly) handleAddLanguage(languagesToAdd)
-      })
-      return () => clearTimeout(timeout)
-    }
-    return undefined
-  }, [
-    isDeleting,
-    hasAddedDefaultLanguages,
-    handleAddLanguage,
-    defaultLanguages,
-    addedLanguages,
-    languages,
-    documentReadOnly,
-  ])
-
-  // NOTE: This is reordering and re-setting the whole array, it could be surgical
-  const handleRestoreOrder = useCallback(() => {
-    if (!value?.length || !languages?.length) {
-      return
-    }
-
-    // Create a new value array in the correct order
-    // This would also strip out values that don't have a language as the key
-    const updatedValue = value
-      .reduce((acc, v) => {
-        const newIndex = languages.findIndex((l) => l.id === v?._key)
-
-        if (newIndex > -1) {
-          acc[newIndex] = v
-        }
-
-        return acc
-      }, [] as Value[])
-      .filter(Boolean)
-
-    if (value?.length !== updatedValue.length) {
-      toast.push({
-        title: 'There was an error reordering languages',
-        status: 'warning',
-      })
-    }
-
-    onChange(set(updatedValue))
-  }, [toast, languages, onChange, value])
-
-  const allKeysAreLanguages = useMemo(() => {
-    if (!value?.length || !languages?.length) {
-      return true
-    }
-
-    return value?.every((v) => languages.find((l) => l?.id === v?._key))
-  }, [value, languages])
-
-  // Check languages are in the correct order
-  const languagesInUse = useMemo(
-    () =>
-      languages && languages.length > 1
-        ? languages.filter((l) => value?.find((v) => v._key === l.id))
-        : [],
-    [languages, value]
-  )
-
-  const languagesOutOfOrder = useMemo(() => {
-    if (!value?.length || !languagesInUse.length) {
-      return []
-    }
-
-    return value
-      .map((v, vIndex) =>
-        vIndex === languagesInUse.findIndex((l) => l.id === v._key) ? null : v
-      )
-      .filter(Boolean)
-  }, [value, languagesInUse])
-
-  const languagesAreValid = useMemo(
-    () =>
-      !languages?.length ||
-      (languages?.length && languages.every((item) => item.id && item.title)),
-    [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
-  const fieldHasMembers = members?.length > 0
-
-  return (
-    <Stack space={2}>
-      {fieldHasMembers ? (
-        <>
-          {filteredMembers.map((member) => {
-            if (member.kind === 'item') {
-              return (
-                <ArrayOfObjectsItem
-                  {...props}
-                  key={member.key}
-                  member={member}
-                />
-              )
-            }
-
-            return <MemberItemError key={member.key} member={member} />
-          })}
-        </>
-      ) : 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={createAddAllTitle(value, filteredLanguages)}
-              onClick={handleAddLanguage}
-            />
-          ) : null}
-        </Stack>
-      ) : null}
-    </Stack>
-  )
-}

package/src/components/InternationalizedArrayContext.tsx

@@ -1,136 +0,0 @@
-import {useLanguageFilterStudioContext} from '@sanity/language-filter'
-import {Stack} from '@sanity/ui'
-import equal from 'fast-deep-equal'
-import type React from 'react'
-import {createContext, useContext, useDeferredValue, useMemo} from 'react'
-import {type ObjectInputProps, useClient, useWorkspace} from 'sanity'
-import {useDocumentPane} from 'sanity/structure'
-import {suspend} from 'suspend-react'
-
-import {createCacheKey, setFunctionCache} from '../cache'
-import {CONFIG_DEFAULT} from '../constants'
-import type {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(): InternationalizedArrayContextProps {
-  return useContext(InternationalizedArrayContext)
-}
-
-type InternationalizedArrayProviderProps = ObjectInputProps & {
-  internationalizedArray: Required<PluginConfig>
-}
-
-export function InternationalizedArrayProvider(
-  props: InternationalizedArrayProviderProps
-): React.ReactElement {
-  const {internationalizedArray} = props
-
-  const client = useClient({apiVersion: internationalizedArray.apiVersion})
-  const workspace = useWorkspace()
-  const {formState} = useDocumentPane()
-  const deferredDocument = useDeferredValue(formState?.value)
-  const selectedValue = useMemo(
-    () => getSelectedValue(internationalizedArray.select, deferredDocument),
-    [internationalizedArray.select, deferredDocument]
-  )
-
-  // Use a stable workspace identifier to prevent unnecessary re-renders
-  const workspaceId = useMemo(() => {
-    // Use workspace name if available, otherwise create a stable hash
-    if (workspace?.name) {
-      return workspace.name
-    }
-    // Create a stable hash from workspace properties that matter for caching
-    const workspaceKey = {
-      name: workspace?.name,
-      title: workspace?.title,
-      // Add other stable properties as needed
-    }
-    return JSON.stringify(workspaceKey)
-  }, [workspace])
-
-  // Memoize the cache key to prevent expensive JSON.stringify calls
-  const cacheKey = useMemo(
-    () => createCacheKey(selectedValue, workspaceId),
-    [selectedValue, workspaceId]
-  )
-
-  // 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') {
-            const result = await internationalizedArray.languages(
-              client,
-              selectedValue
-            )
-            // Populate function cache for use outside React context
-            setFunctionCache(
-              internationalizedArray.languages,
-              selectedValue,
-              result,
-              workspaceId
-            )
-            return result
-          }
-          return internationalizedArray.languages
-        },
-        cacheKey,
-        {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')
-  const context = useMemo(
-    () => ({...internationalizedArray, languages, filteredLanguages}),
-    [filteredLanguages, internationalizedArray, languages]
-  )
-
-  return (
-    <InternationalizedArrayContext.Provider value={context}>
-      {showDocumentButtons ? (
-        <Stack space={5}>
-          <DocumentAddButtons value={props.value} />
-          {props.renderDefault(props)}
-        </Stack>
-      ) : (
-        props.renderDefault(props)
-      )}
-    </InternationalizedArrayContext.Provider>
-  )
-}

package/src/components/InternationalizedField.tsx

@@ -1,57 +0,0 @@
-import type {ReactNode} from 'react'
-import {useMemo} from 'react'
-import {type FieldProps} from 'sanity'
-
-import {useInternationalizedArrayContext} from './InternationalizedArrayContext'
-
-export default function InternationalizedField(props: FieldProps): ReactNode {
-  const {languages} = useInternationalizedArrayContext()
-
-  // hide titles for 'value' fields within valid language entries
-  const customProps = useMemo(() => {
-    const pathSegment = props.path.slice(0, -1)[1]
-    const languageId =
-      typeof pathSegment === 'object' && '_key' in pathSegment
-        ? pathSegment._key
-        : undefined
-    const hasValidLanguageId = languageId
-      ? languages.some((l) => l.id === languageId)
-      : false
-    const shouldHideTitle =
-      props.title?.toLowerCase() === 'value' && hasValidLanguageId
-
-    return {
-      ...props,
-      title: shouldHideTitle ? '' : props.title,
-    }
-  }, [props, languages])
-
-  if (!customProps.schemaType.name.startsWith('internationalizedArray')) {
-    return customProps.renderDefault(customProps)
-  }
-
-  // Show reference field selector if there's a value
-  if (customProps.schemaType.name === 'reference' && customProps.value) {
-    return customProps.renderDefault({
-      ...customProps,
-      title: '',
-      level: 0, // Reset the level to avoid nested styling
-    })
-  }
-
-  // For basic field types, we can use children to keep the simple input
-  if (
-    customProps.schemaType.name === 'string' ||
-    customProps.schemaType.name === 'number' ||
-    customProps.schemaType.name === 'text'
-  ) {
-    return customProps.children
-  }
-
-  // For complex fields (like markdown), we need to use renderDefault
-  // to get all the field's functionality
-  return customProps.renderDefault({
-    ...customProps,
-    level: 0, // Reset the level to avoid nested styling
-  })
-}