sanity-plugin-internationalized-array 1.1.1 → 1.2.0

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/createFieldName.ts

@@ -1,15 +1,15 @@
-export function camelCase(string: string) {
+export function camelCase(string: string): string {
   return string.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
 }
 
-export function titleCase(string: string) {
+export function titleCase(string: string): string {
   return string
     .split(` `)
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
     .join(` `)
 }
 
-export function pascalCase(string: string) {
+export function pascalCase(string: string): string {
   return titleCase(camelCase(string))
 }
 

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,9 +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},
-    of: [defineField({name: objectName, type: objectName})],
+    // TODO: Resolve this typing issue with the inner object
+    // @ts-ignore
+    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,16 @@ 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: [
       typeof type === `string`
         ? // Define a basic field if all we have is the string name
@@ -25,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 & {