sanity-plugin-internationalized-array 1.1.2 → 1.2.0

package/src/components/{InternationalizedArrayInput.tsx → InternationalizedArray.tsx}

@@ -1,61 +1,45 @@
 import React, {useCallback, useMemo} from 'react'
 import {
-  ArrayOfObjectsInputProps,
-  ArrayOfObjectsItem,
-  unset,
   insert,
   set,
   setIfMissing,
-} from 'sanity/form'
-import {
-  Text,
-  Box,
-  Button,
-  Flex,
-  Grid,
-  Label,
-  MenuButton,
-  Stack,
-  useToast,
-  Menu,
-  MenuItem,
-} from '@sanity/ui'
-import {AddIcon, RemoveIcon, RestoreIcon} from '@sanity/icons'
+  ArrayOfObjectsItemMember,
+  ArrayOfObjectsItem,
+  ArrayOfObjectsInputProps,
+} from 'sanity'
+import {Button, Grid, Stack, useToast} from '@sanity/ui'
+import {AddIcon, RestoreIcon} from '@sanity/icons'
 
 import {Language, Value, ArraySchemaWithLanguageOptions} from '../types'
-import {Table, TableCell, TableRow} from './Table'
 import Feedback from './Feedback'
-import {getToneFromValidation} from './getToneFromValidation'
 
-export type InternationalizedArrayInputProps = ArrayOfObjectsInputProps<
+export type InternationalizedArrayProps = ArrayOfObjectsInputProps<
   Value,
   ArraySchemaWithLanguageOptions
 >
 
-export default function InternationalizedArrayInput(props: InternationalizedArrayInputProps) {
+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 languages: Language[] = useMemo(() => options?.languages ?? [], [options])
-  const valueLanguageKeys = useMemo(
-    () => value?.map((v) => v._key).filter((key) => languages.find((l) => l.id === key)) ?? [],
-    [languages, value]
-  )
 
   const handleAddLanguage = useCallback(
     (languageId?: string) => {
+      const itemBase = {_type: `${schemaType.name}Value`}
+
       // Create new items
       const newItems = languageId
         ? // Just one for this language
-          [{_key: languageId}]
+          [{...itemBase, _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}))
+            .map((language) => ({...itemBase, _key: language.id}))
 
       // Insert new items in the correct order
       const languagesInUse = value?.length ? value.map((v) => v) : []
@@ -92,13 +76,6 @@ export default function InternationalizedArrayInput(props: InternationalizedArra
     [languages, onChange, value]
   )
 
-  const handleUnsetByKey = useCallback(
-    (_key: string) => {
-      onChange(unset([{_key}]))
-    },
-    [onChange]
-  )
-
   // TODO: This is lazy, reordering and re-setting the whole array – it could be surgical
   const handleRestoreOrder = useCallback(() => {
     if (!value?.length) {
@@ -119,7 +96,7 @@ export default function InternationalizedArrayInput(props: InternationalizedArra
       }, [] as Value[])
       .filter(Boolean)
 
-    if (value.length !== updatedValue.length) {
+    if (value?.length !== updatedValue.length) {
       toast.push({
         title: 'There was an error reordering languages',
         status: 'warning',
@@ -134,33 +111,16 @@ export default function InternationalizedArrayInput(props: InternationalizedArra
   }, [value, languages])
 
   // Check languages are in the correct order
+  const languagesInUse = languages.filter((l) => value?.find((v) => v._key === l.id))
   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])
-
-  const handleKeyChange = useCallback(
-    (config: {from: string; to: string; index: number}) => {
-      if (!value) {
-        return
-      }
-
-      const {from, to, index} = config
-      const currentValue = value.find((v) => v._key === from)
-      const newValue = {...currentValue, _key: to}
-
-      // TODO: Make sure this gets the correct language index, currently replaces-in-place
-      onChange([insert([newValue], 'after', [index]), unset([{_key: from}])])
-    },
-    [onChange, value]
-  )
+  }, [value, languagesInUse])
 
   const languagesAreValid = useMemo(
     () =>
@@ -175,77 +135,27 @@ export default function InternationalizedArrayInput(props: InternationalizedArra
   return (
     <Stack space={2}>
       {members?.length > 0 ? (
-        <Table>
-          <tbody>
-            {members.map((member, memberIndex) =>
-              member.kind === 'item' ? (
-                <TableRow
+        <>
+          {/* TODO: Resolve type for ArrayOfObjectsItemMember */}
+          {/* @ts-ignore */}
+          {members.map((member: ArrayOfObjectsItemMember) => {
+            if (member.kind === 'item') {
+              return (
+                <ArrayOfObjectsItem
                   key={member.key}
-                  tone={
-                    member?.item?.validation?.length > 0
-                      ? getToneFromValidation(member.item.validation)
-                      : undefined
-                  }
-                >
-                  <TableCell style={{verticalAlign: 'bottom'}}>
-                    <Box paddingY={3} paddingRight={2}>
-                      {valueLanguageKeys.includes(member.key) ? (
-                        <Label muted size={1}>
-                          {member.key}
-                        </Label>
-                      ) : (
-                        <MenuButton
-                          button={<Button fontSize={1} text={`Change "${member.key}"`} />}
-                          id={`${member.key}-change-key`}
-                          menu={
-                            <Menu>
-                              {languages.map((language) => (
-                                <MenuItem
-                                  disabled={valueLanguageKeys.includes(language.id)}
-                                  fontSize={1}
-                                  key={language.id}
-                                  text={language.id.toLocaleUpperCase()}
-                                  onClick={() =>
-                                    handleKeyChange({
-                                      from: member.key,
-                                      to: language.id,
-                                      index: memberIndex,
-                                    })
-                                  }
-                                />
-                              ))}
-                            </Menu>
-                          }
-                          placement="right"
-                          popover={{portal: true}}
-                        />
-                      )}
-                    </Box>
-                  </TableCell>
-                  <TableCell paddingRight={2} style={{width: `100%`}}>
-                    {/* This renders the entire field default with title */}
-                    <ArrayOfObjectsItem {...props} member={member} />
-                  </TableCell>
-                  <TableCell style={{verticalAlign: 'bottom'}}>
-                    <Flex align="center" justify="flex-end" gap={3}>
-                      <Button
-                        mode="ghost"
-                        icon={RemoveIcon}
-                        tone="critical"
-                        disabled={typeof readOnly === 'boolean' ? readOnly : false}
-                        onClick={() => handleUnsetByKey(member.key)}
-                      />
-                    </Flex>
-                  </TableCell>
-                </TableRow>
-              ) : (
-                <Text>Error</Text>
+                  member={member}
+                  renderItem={props.renderItem}
+                  renderField={props.renderField}
+                  renderInput={props.renderInput}
+                  renderPreview={props.renderPreview}
+                />
               )
-            )}
-          </tbody>
-        </Table>
-      ) : null}
+            }
 
+            return null
+          })}
+        </>
+      ) : null}
       {languagesOutOfOrder.length > 0 && allKeysAreLanguages ? (
         <Button
           tone="caution"
@@ -255,7 +165,9 @@ export default function InternationalizedArrayInput(props: InternationalizedArra
         />
       ) : null}
 
-      {languages?.length > 0 ? (
+      {/* Show buttons if languages are configured */}
+      {/* Hide them once languages have values */}
+      {languages?.length > 0 && languagesInUse.length < languages.length ? (
         <Stack space={2}>
           {/* No more than 5 columns */}
           <Grid columns={Math.min(languages.length, 5)} gap={2}>
@@ -277,7 +189,11 @@ export default function InternationalizedArrayInput(props: InternationalizedArra
             mode="ghost"
             disabled={readOnly || (value && value?.length >= languages?.length)}
             icon={AddIcon}
-            text={value?.length ? `Add missing languages` : `Add all languages`}
+            text={
+              value?.length
+                ? `Add missing ${languages.length - value.length === 1 ? `language` : `languages`}`
+                : `Add all languages`
+            }
             onClick={() => handleAddLanguage()}
           />
         </Stack>

package/src/components/InternationalizedInput.tsx

@@ -0,0 +1,108 @@
+import {ObjectItemProps, useFormValue} from 'sanity'
+import React, {useCallback, useMemo} from 'react'
+import {unset, set} from 'sanity'
+import {Box, Button, Flex, Label, MenuButton, Menu, MenuItem, Card} from '@sanity/ui'
+import {RemoveIcon} from '@sanity/icons'
+
+import {Language} from '../types'
+import {getToneFromValidation} from './getToneFromValidation'
+
+type InternationalizedValue = {
+  _type: string
+  _key: string
+  value: string
+}
+
+export default function InternationalizedInput(props: ObjectItemProps<InternationalizedValue>) {
+  const parentValue = useFormValue(props.path.slice(0, -1)) as InternationalizedValue[]
+
+  const inlineProps = {
+    ...props.inputProps,
+    // This is the magic that makes inline editing work
+    members: props.inputProps.members.filter((m) => m.kind === 'field' && m.name === 'value'),
+    // This just overrides the type
+    // TODO: Remove this as it shouldn't be necessary
+    value: props.value as InternationalizedValue,
+  }
+
+  const {validation, value, onChange, readOnly} = inlineProps
+
+  // The parent array contains the languages from the plugin config
+  // TODO: fix TS support for overloading options
+  const languages: Language[] = useMemo(
+    // @ts-ignore
+    () => props?.parentSchemaType?.options?.languages ?? [],
+    // @ts-ignore
+    [props?.parentSchemaType?.options?.languages]
+  )
+  const languageKeysInUse = useMemo(() => parentValue?.map((v) => v._key) ?? [], [parentValue])
+  const keyIsValid = languages.find((l) => l.id === value._key)
+
+  // Changes the key of this item, ideally to a valid language
+  const handleKeyChange = useCallback(
+    (languageId: string) => {
+      if (!value || !languages.find((l) => l.id === languageId)) {
+        return
+      }
+
+      onChange([set(languageId, ['_key'])])
+    },
+    [onChange, value, languages]
+  )
+
+  // Removes this item from the array
+  const handleUnset = useCallback(() => {
+    onChange(unset())
+  }, [onChange])
+
+  return (
+    <Card tone={getToneFromValidation(validation)}>
+      <Flex align="flex-end" gap={1}>
+        <Card tone="inherit">
+          <Box paddingY={3} paddingRight={2}>
+            {keyIsValid ? (
+              <Label muted size={1}>
+                {value._key}
+              </Label>
+            ) : (
+              <MenuButton
+                button={<Button fontSize={1} text={`Change "${value._key}"`} />}
+                id={`${value._key}-change-key`}
+                menu={
+                  <Menu>
+                    {languages.map((language) => (
+                      <MenuItem
+                        // TODO: Prevent changing to a key that already exists in the array
+                        disabled={languageKeysInUse.includes(language.id)}
+                        fontSize={1}
+                        key={language.id}
+                        text={language.id.toLocaleUpperCase()}
+                        onClick={() => handleKeyChange(language.id)}
+                      />
+                    ))}
+                  </Menu>
+                }
+                placement="right"
+                popover={{portal: true}}
+              />
+            )}
+          </Box>
+        </Card>
+
+        <Card paddingRight={2} flex={1} tone="inherit">
+          {props.inputProps.renderInput(props.inputProps)}
+        </Card>
+
+        <Card tone="inherit">
+          <Button
+            mode="ghost"
+            icon={RemoveIcon}
+            tone="critical"
+            disabled={readOnly}
+            onClick={handleUnset}
+          />
+        </Card>
+      </Flex>
+    </Card>
+  )
+}

package/src/components/getToneFromValidation.ts

@@ -1,9 +1,9 @@
-import {NodeValidation} from 'sanity/form'
 import {CardTone} from '@sanity/ui'
+import {FormNodeValidation} from 'sanity'
 
-export function getToneFromValidation(validations: NodeValidation[]): CardTone {
-  if (!validations.length) {
-    return `default`
+export function getToneFromValidation(validations: FormNodeValidation[]): CardTone | undefined {
+  if (!validations?.length) {
+    return undefined
   }
 
   const validationLevels = validations.map((v) => v.level)
@@ -14,5 +14,5 @@ export function getToneFromValidation(validations: NodeValidation[]): CardTone {
     return `caution`
   }
 
-  return `default`
+  return undefined
 }

package/src/plugin.tsx

@@ -1,4 +1,4 @@
-import {createPlugin} from 'sanity'
+import {definePlugin} from 'sanity'
 import {PluginConfig} from './types'
 import array from './schema/array'
 import object from './schema/object'
@@ -8,7 +8,7 @@ const CONFIG_DEFAULT = {
   fieldTypes: [],
 }
 
-export const internationalizedArray = createPlugin<PluginConfig>((config = CONFIG_DEFAULT) => {
+export const internationalizedArray = definePlugin<PluginConfig>((config = CONFIG_DEFAULT) => {
   const {languages, fieldTypes} = {...CONFIG_DEFAULT, ...config}
 
   return {

package/src/schema/array.ts

@@ -1,15 +1,15 @@
-import {defineField, Rule, Schema} from 'sanity'
+import {defineField, FieldDefinition, Rule} from 'sanity'
 
 import {createFieldName} from '../components/createFieldName'
-import InternationalizedArrayInput from '../components/InternationalizedArrayInput'
+import InternationalizedArray from '../components/InternationalizedArray'
 import {Language, Value} from '../types'
 
 type ArrayFactoryConfig = {
   languages: Language[]
-  type: string | Schema.FieldDefinition
+  type: string | FieldDefinition
 }
 
-export default (config: ArrayFactoryConfig): Schema.FieldDefinition<'array'> => {
+export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
   const {languages, type} = config
   const typeName = typeof type === `string` ? type : type.name
   const arrayName = createFieldName(typeName)
@@ -19,11 +19,20 @@ export default (config: ArrayFactoryConfig): Schema.FieldDefinition<'array'> =>
     name: arrayName,
     title: 'Internationalized array',
     type: 'array',
-    components: {input: InternationalizedArrayInput},
+    // TODO: Resolve this typing issue with the outer component
+    // @ts-ignore
+    components: {
+      input: InternationalizedArray,
+    },
     options: {languages},
-    // TODO: Address this typing issue with the inner object
+    // TODO: Resolve this typing issue with the inner object
     // @ts-ignore
-    of: [defineField({name: objectName, type: objectName})],
+    of: [
+      defineField({
+        name: objectName,
+        type: objectName,
+      }),
+    ],
     validation: (rule: Rule) =>
       rule.max(languages?.length).custom<Value[]>((value, context) => {
         const {languages: contextLanguages}: {languages: Language[]} = context?.type?.options ?? {}

package/src/schema/object.ts

@@ -1,12 +1,13 @@
-import {defineField, Schema} from 'sanity'
+import {defineField, FieldDefinition} from 'sanity'
 
 import {createFieldName} from '../components/createFieldName'
+import InternationalizedInput from '../components/InternationalizedInput'
 
 type ObjectFactoryConfig = {
-  type: string | Schema.FieldDefinition
+  type: string | FieldDefinition
 }
 
-export default (config: ObjectFactoryConfig): Schema.FieldDefinition<'object'> => {
+export default (config: ObjectFactoryConfig): FieldDefinition<'object'> => {
   const {type} = config
   const typeName = typeof type === `string` ? type : type.name
   const objectName = createFieldName(typeName, true)
@@ -15,6 +16,14 @@ export default (config: ObjectFactoryConfig): Schema.FieldDefinition<'object'> =
     name: objectName,
     title: `Internationalized array ${type}`,
     type: 'object',
+    // TODO: Resolve this typing issue with the return type
+    // @ts-ignore
+    components: {
+      // item: InternationalizedInputWrapper,
+      // TODO: Resolve this typing issue with the outer component
+      // @ts-ignore
+      item: InternationalizedInput,
+    },
     // TODO: Address this typing issue with the inner object
     // @ts-ignore
     fields: [
@@ -27,5 +36,11 @@ export default (config: ObjectFactoryConfig): Schema.FieldDefinition<'object'> =
         : // Pass in the configured options, but overwrite the name
           {...type, name: 'value'},
     ],
+    preview: {
+      select: {
+        title: 'value',
+        subtitle: '_key',
+      },
+    },
   })
 }

package/src/types.ts

@@ -1,4 +1,4 @@
-import {Rule, ArraySchemaType, Schema} from 'sanity'
+import {Rule, ArraySchemaType, RuleTypeConstraint} from 'sanity'
 
 export type Language = {
   id: string
@@ -26,7 +26,7 @@ export type Value = {
 
 export type PluginConfig = {
   languages: Language[]
-  fieldTypes: (string | Schema.FieldDefinition)[]
+  fieldTypes: (string | RuleTypeConstraint)[]
 }
 
 export type ArraySchemaWithLanguageOptions = ArraySchemaType & {