sanity-plugin-internationalized-array 0.0.7 → 1.1.0

package/migrations/transformObjectToArray.js

@@ -1,94 +0,0 @@
-/* eslint-disable no-console */
-import sanityClient from 'part:@sanity/base/client'
-
-const client = sanityClient.withConfig({apiVersion: `2022-07-14`})
-
-// Run this script with: `sanity exec --with-user-token migrations/transformObjectToArray.js`
-
-// This example shows how you may write a migration script that migrates an internationalized object
-// To an internationalized array
-
-// Transforms fields from:
-// "greeting" {
-//   "en": "hello",
-//   "fr": "bonjour"
-// }
-
-// To:
-// "greeting": [
-//   { "_key": "en", "value": "hello" },
-//   { "_key": "fr", "value": "bonjour" },
-// ]
-
-// This will migrate documents in batches of 100 and continue patching until no more documents are
-// returned from the query.
-//
-// This script can safely be run, even if documents are being concurrently modified by others.
-// If a document gets modified in the time between fetch => submit patch, this script will fail,
-// but can safely be re-run multiple times until it eventually runs out of documents to migrate.
-
-// A few things to note:
-// - This script will exit if any of the mutations fail due to a revision mismatch (which means the
-//   document was edited between fetch => update)
-// - The query must eventually return an empty set, or else this script will continue indefinitely
-
-// Fetching documents that matches the precondition for the migration.
-// NOTE: This query should eventually return an empty set of documents to mark the migration
-// as complete
-
-const TYPE = `presenter`
-const FIELD_NAME = `title`
-
-const fetchDocuments = () =>
-  client.fetch(
-    `*[_type == $type 
-        && defined(${FIELD_NAME}) 
-        && count(${FIELD_NAME}) == null
-    ][0...100] {_id, _rev, ${FIELD_NAME}}`,
-    {type: TYPE}
-  )
-
-const buildPatches = (docs) =>
-  docs.map((doc) => ({
-    id: doc._id,
-    patch: {
-      set: {
-        // Convert existing object to array
-        [FIELD_NAME]: Object.keys(doc[FIELD_NAME])
-          .filter((key) => key !== '_type')
-          .map((key) => ({
-            _key: key,
-            value: doc[FIELD_NAME][key],
-          })),
-      },
-      // this will cause the migration to fail if any of the documents has been
-      // modified since it was fetched.
-      ifRevisionID: doc._rev,
-    },
-  }))
-
-const createTransaction = (patches) =>
-  patches.reduce((tx, patch) => tx.patch(patch.id, patch.patch), client.transaction())
-
-const commitTransaction = (tx) => tx.commit()
-
-const migrateNextBatch = async () => {
-  const documents = await fetchDocuments()
-  const patches = buildPatches(documents)
-  if (patches.length === 0) {
-    console.log('No more documents to migrate!')
-    return null
-  }
-  console.log(
-    `Migrating batch:\n %s`,
-    patches.map((patch) => `${patch.id} => ${JSON.stringify(patch.patch)}`).join('\n')
-  )
-  const transaction = createTransaction(patches)
-  await commitTransaction(transaction)
-  return migrateNextBatch()
-}
-
-migrateNextBatch().catch((err) => {
-  console.error(err)
-  process.exit(1)
-})

package/src/LanguageArray/ValueInput.tsx

@@ -1,6 +0,0 @@
-import React from 'react'
-import {FormBuilderInput} from '@sanity/form-builder/lib/FormBuilderInput'
-
-export default function ValueInput(props) {
-  return <FormBuilderInput {...props} />
-}

package/src/LanguageArray/index.tsx

@@ -1,311 +0,0 @@
-import React, {forwardRef, useCallback, useMemo} from 'react'
-import {Code, Text, Card, Label, Box, Stack, Button, Grid, Flex} from '@sanity/ui'
-import {withDocument} from 'part:@sanity/form-builder'
-import {PatchEvent, setIfMissing, insert, unset, set} from '@sanity/form-builder/PatchEvent'
-import {AddIcon, RemoveIcon, RestoreIcon} from '@sanity/icons'
-import {FormFieldValidationStatus} from '@sanity/base/components'
-import {FieldPresence} from '@sanity/base/presence'
-import {FormBuilderInput} from '@sanity/form-builder/lib/FormBuilderInput'
-
-import ValueInput from './ValueInput'
-import {Table, TableCell, TableRow} from './Table'
-import {useUnsetInputComponent} from '../hooks/useUnsetInputComponent'
-
-const schemaExample = {
-  name: 'title',
-  type: 'localisedArray',
-  options: {
-    languages: [
-      {id: 'en', title: 'English'},
-      {id: 'no', title: 'Norsk'},
-    ],
-  },
-}
-
-type Value = {
-  _key: string
-  value?: string
-}
-
-type Language = {
-  id: string
-  title: string
-}
-
-type Options = {
-  languages: Language[]
-  showNativeInput: boolean
-}
-
-const DEFAULT_OPTIONS = {
-  languages: [],
-  showNativeInput: false,
-}
-
-const LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {
-  const {onChange, onBlur, readOnly, presence, markers} = props
-  const value: Value[] = props?.value
-
-  // IMPORTANT: leaving out will cause the browser to lock up in an infinite loop
-  const type = useUnsetInputComponent(props.type)
-  const options: Options = type?.options ?? DEFAULT_OPTIONS
-  const {languages, showNativeInput} = options
-
-  const handleAddLanguage = useCallback(
-    (languageId?: string) => {
-      // Create new items
-      const newItems = languageId
-        ? // Just one for this language
-          [{_key: languageId}]
-        : // Or one for every missing language
-          languages
-            .filter((language) =>
-              value?.length ? !value.find((v) => v._key === language.id) : true
-            )
-            .map((language) => ({_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) =>
-          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])
-      })
-
-      onChange(PatchEvent.from(setIfMissing([]), ...insertions))
-    },
-    [languages, onChange, value]
-  )
-
-  const handleUnsetByKey = useCallback(
-    (_key) => {
-      onChange(PatchEvent.from(unset([{_key}])))
-    },
-    [onChange]
-  )
-
-  const handleInnerValueChange = useCallback(
-    (patchEvent: PatchEvent, _key: string) => {
-      const inputValue = patchEvent.patches[0]?.value
-      const inputPath = [{_key}, `value`]
-
-      onChange(PatchEvent.from(inputValue ? set(inputValue, inputPath) : unset(inputPath)))
-    },
-    [onChange]
-  )
-
-  // TODO: This is lazy, reordering and re-setting the whole array – it should be surgical
-  const handleRestoreOrder = useCallback(() => {
-    // Create a new value array in the correct order
-    const updatedValue = value.reduce((acc, v) => {
-      const newIndex = languages.findIndex((l) => l.id === v._key)
-
-      acc[newIndex] = v
-
-      return acc
-    }, [])
-
-    onChange(PatchEvent.from(unset(), set(updatedValue)))
-  }, [languages, onChange, value])
-
-  // Check languages are in the correct order
-  const languagesOutOfOrder = useMemo(() => {
-    if (!value?.length) {
-      return []
-    }
-
-    const languagesInUse = languages.filter((l) => value.find((v) => v._key === l.id))
-
-    return value
-      .map((v, vIndex) => (vIndex === languagesInUse.findIndex((l) => l.id === v._key) ? null : v))
-      .filter(Boolean)
-  }, [value, languages])
-
-  // Check options are supplied and valid
-  const languagesAreValid = useMemo(
-    () => languages?.length && languages.every((item) => item.id && item.title),
-    [languages]
-  )
-
-  if (!languagesAreValid) {
-    return (
-      <Card tone="caution" border radius={2} padding={3}>
-        <Stack space={4}>
-          <Text>
-            An array of language objects must be passed into the <code>{type.name}</code> field as
-            options, each with an <code>id</code> and <code>title</code> field. Example:
-          </Text>
-          <Card padding={2} border radius={2}>
-            <Code size={1} language="javascript">
-              {JSON.stringify(schemaExample, null, 2)}
-            </Code>
-          </Card>
-        </Stack>
-      </Card>
-    )
-  }
-
-  const validationMarkers = markers?.length
-    ? markers.filter((mark) => mark.type === `validation`)
-    : []
-  const invalidKeys = validationMarkers
-    .map((mark) => mark.path)
-    .flat()
-    .map((item) => item._key)
-
-  return (
-    <Stack space={3}>
-      <Box>
-        <Text size={1} weight="bold">
-          {type?.title ?? type.name}
-        </Text>
-      </Box>
-      {/* Loop over the values */}
-      {value?.length > 0 ? (
-        <Card>
-          <Table>
-            <tbody>
-              {value.map((item) => (
-                <TableRow
-                  key={item._key}
-                  tone={
-                    // TODO: Move this logic somewhere else
-                    invalidKeys.includes(item._key)
-                      ? `critical`
-                      : undefined || languagesOutOfOrder.find((l) => l._key === item._key)
-                      ? `caution`
-                      : undefined
-                  }
-                >
-                  {/* To render each individual field in this type */}
-                  {type?.of?.length > 0 &&
-                    type?.of.map((subType) => (
-                      <>
-                        {subType?.fields?.length > 0 ? (
-                          <>
-                            <TableCell>
-                              <Box paddingRight={2}>
-                                <Label muted size={1}>
-                                  {item._key}
-                                </Label>
-                              </Box>
-                            </TableCell>
-                            <TableCell paddingRight={2} style={{width: `100%`}}>
-                              {/* There _should_ only be one field */}
-                              {subType.fields.map((subTypeField) => (
-                                <ValueInput
-                                  key={subTypeField.name}
-                                  onChange={(patchEvent) =>
-                                    handleInnerValueChange(patchEvent, item._key)
-                                  }
-                                  onBlur={onBlur}
-                                  // We don't want the array item to open onFocus
-                                  onFocus={() => null}
-                                  path={[{_key: item._key}, subTypeField.name]}
-                                  // focusPath={[{_key: item._key}, subTypeField.name]}
-                                  parent={item}
-                                  readOnly={readOnly}
-                                  type={subTypeField}
-                                  value={item.value}
-                                  level={props.level + 1}
-                                  markers={[]}
-                                  compareValue={props.compareValue}
-                                />
-                              ))}
-                            </TableCell>
-                          </>
-                        ) : null}
-                      </>
-                    ))}
-
-                  <TableCell>
-                    <Flex align="center" justify="flex-end" gap={3}>
-                      {presence?.length > 0 ? (
-                        <FieldPresence maxAvatars={1} presence={presence} />
-                      ) : null}
-                      {invalidKeys.includes(item._key) ? (
-                        <Box paddingLeft={2}>
-                          <FormFieldValidationStatus __unstable_markers={validationMarkers} />
-                        </Box>
-                      ) : null}
-                      <Button
-                        mode="ghost"
-                        icon={RemoveIcon}
-                        tone="critical"
-                        disabled={readOnly}
-                        onClick={() => handleUnsetByKey(item._key)}
-                      />
-                    </Flex>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </tbody>
-          </Table>
-        </Card>
-      ) : null}
-
-      {languagesOutOfOrder.length > 0 ? (
-        <Button
-          tone="caution"
-          disabled={languagesOutOfOrder.length > languages.length}
-          icon={RestoreIcon}
-          onClick={() => handleRestoreOrder()}
-          text="Restore order of languages"
-        />
-      ) : null}
-
-      {languages.length > 0 ? (
-        <Stack space={2}>
-          {/* No more than 5 columns */}
-          <Grid columns={Math.min(languages.length, 5)} gap={2}>
-            {languages.map((language) => (
-              <Button
-                key={language.id}
-                tone="primary"
-                mode="ghost"
-                fontSize={1}
-                disabled={readOnly || value?.find((item) => item._key === language.id)}
-                text={language.id.toUpperCase()}
-                icon={AddIcon}
-                onClick={() => handleAddLanguage(language.id)}
-              />
-            ))}
-          </Grid>
-          <Button
-            tone="primary"
-            mode="ghost"
-            disabled={readOnly || value?.length >= languages?.length}
-            icon={AddIcon}
-            text={value?.length ? `Add missing languages` : `Add all languages`}
-            onClick={() => handleAddLanguage()}
-          />
-        </Stack>
-      ) : null}
-
-      {showNativeInput ? <FormBuilderInput {...props} type={type} ref={ref} /> : null}
-    </Stack>
-  )
-})
-
-export default withDocument(LanguageArrayWrapper)

package/src/hooks/useUnsetInputComponent.tsx

@@ -1,17 +0,0 @@
-import React, {ReactNode} from 'react'
-
-export function useUnsetInputComponent(type: unknown, component?: ReactNode) {
-  return React.useMemo(() => unsetInputComponent(type, component), [type, component])
-}
-
-function unsetInputComponent(type, component) {
-  const t = {
-    ...type,
-    inputComponent: type.inputComponent === component ? undefined : type.inputComponent,
-  }
-  const typeOfType = t.type ? unsetInputComponent(t.type, component) : undefined
-  return {
-    ...t,
-    type: typeOfType,
-  }
-}

package/src/internationalizedArray.ts

@@ -1,84 +0,0 @@
-import {ArrayConfig, Value} from './types'
-import LanguageArray from './LanguageArray'
-
-export function internationalizedArray(config: ArrayConfig) {
-  const {name = `title`, type = `string`, languages = [], showNativeInput = false} = config
-  const configValidation = Array.isArray(config?.validation)
-    ? config.validation
-    : [config?.validation]
-
-  return {
-    name,
-    title: config?.title ?? undefined,
-    group: config?.group ?? undefined,
-    hidden: config?.hidden ?? undefined,
-    readOnly: config?.readOnly ?? undefined,
-    type: 'array',
-    inputComponent: LanguageArray,
-    options: {
-      languages,
-      showNativeInput,
-    },
-    of: [
-      {
-        type: 'object',
-        fields: [{name: 'value', type}],
-        preview: {
-          select: {title: 'value', key: '_key'},
-          prepare({title, key}) {
-            return {
-              title,
-              subtitle: key.toUpperCase(),
-            }
-          },
-        },
-      },
-    ],
-    validation: (Rule) => [
-      Rule.max(languages.length).custom((value: Value[], context) => {
-        const {languages} = context.type.options
-
-        const nonLanguageKeys = value?.length
-          ? value.filter((item) => !languages.find((language) => item._key === language.id))
-          : []
-
-        if (nonLanguageKeys.length) {
-          return {
-            message: `Array item keys must be valid languages registered to the field type`,
-            paths: nonLanguageKeys.map((item) => ({_key: item._key})),
-          }
-        }
-
-        // Ensure there's no duplicate `language` fields
-        const valuesByLanguage = value?.length
-          ? value
-              .filter((item) => Boolean(item?._key))
-              .reduce((acc, cur) => {
-                if (acc[cur._key]) {
-                  return {...acc, [cur._key]: [...acc[cur._key], cur]}
-                }
-
-                return {
-                  ...acc,
-                  [cur._key]: [cur],
-                }
-              }, {})
-          : {}
-
-        const duplicateValues = Object.values(valuesByLanguage)
-          .filter((item) => item?.length > 1)
-          .flat()
-
-        if (duplicateValues.length) {
-          return {
-            message: 'There can only be one field per language',
-            paths: duplicateValues.map((item) => ({_key: item._key})),
-          }
-        }
-
-        return true
-      }),
-      ...configValidation,
-    ],
-  }
-}