sanity-plugin-internationalized-array 0.0.5 → 1.0.0

package/src/components/Feedback.tsx

@@ -0,0 +1,27 @@
+import {Text, Card, Stack, Code} from '@sanity/ui'
+import React from 'react'
+
+const schemaExample = {
+  languages: [
+    {id: 'en', title: 'English'},
+    {id: 'no', title: 'Norsk'},
+  ],
+}
+
+export default function Feedback() {
+  return (
+    <Card tone="caution" border radius={2} padding={3}>
+      <Stack space={4}>
+        <Text>
+          An array of language objects must be passed into the <code>internationalizedArray</code>{' '}
+          helper function, 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>
+  )
+}

package/src/components/InternationalizedArrayInput.tsx

@@ -0,0 +1,220 @@
+import React, {useCallback, useMemo} from 'react'
+import {
+  PatchEvent,
+  ArrayOfObjectsInputProps,
+  MemberItem,
+  unset,
+  insert,
+  set,
+  setIfMissing,
+  FormFieldValidationStatus,
+} from 'sanity/form'
+import {Box, Button, Flex, Grid, Label, Stack} from '@sanity/ui'
+
+import {Language, Value, ArraySchemaWithLanguageOptions} from '../types'
+import {Table, TableCell, TableRow} from './Table'
+import {AddIcon, RemoveIcon, RestoreIcon} from '@sanity/icons'
+import Feedback from './Feedback'
+import {getToneFromValidation} from './getToneFromValidation'
+
+export type InternationalizedArrayInputProps = ArrayOfObjectsInputProps<
+  Value,
+  ArraySchemaWithLanguageOptions
+>
+
+export default function InternationalizedArrayInput(props: InternationalizedArrayInputProps) {
+  const {members, value, schemaType, onChange} = props
+  const readOnly = typeof schemaType.readOnly === 'boolean' ? schemaType.readOnly : false
+  const {options} = schemaType
+
+  const languages: Language[] = useMemo(() => options?.languages ?? [], [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([setIfMissing([]), ...insertions])
+    },
+    [languages, onChange, value]
+  )
+
+  const handleUnsetByKey = useCallback(
+    (_key) => {
+      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) {
+      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) {
+          acc[newIndex] = v
+        }
+
+        return acc
+      }, [] as Value[])
+      .filter(Boolean)
+
+    onChange(set(updatedValue))
+  }, [languages, onChange, value])
+
+  const allKeysAreLanguages = useMemo(() => {
+    return value?.every((v) => languages.find((l) => l?.id === v?._key))
+  }, [value, languages])
+
+  // 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])
+
+  const languagesAreValid = useMemo(
+    () => languages?.length && languages.every((item) => item.id && item.title),
+    [languages]
+  )
+
+  if (!languagesAreValid) {
+    return <Feedback />
+  }
+
+  return (
+    <Stack space={2}>
+      {members?.length > 0 ? (
+        <Table>
+          <tbody>
+            {members.map((member) => (
+              <TableRow
+                key={member.key}
+                tone={
+                  member?.item?.validation?.length > 0
+                    ? getToneFromValidation(member.item.validation)
+                    : undefined
+                }
+              >
+                <TableCell style={{verticalAlign: 'bottom'}}>
+                  <Box paddingY={3} paddingRight={2}>
+                    <Label muted size={1}>
+                      {member.key}
+                    </Label>
+                  </Box>
+                </TableCell>
+                <TableCell paddingRight={2} style={{width: `100%`}}>
+                  <MemberItem {...props} member={member} />
+                </TableCell>
+                <TableCell style={{verticalAlign: 'bottom'}}>
+                  <Flex align="center" justify="flex-end" gap={3}>
+                    {/* Possibly unncessary, validation shows up in <MemberItem /> */}
+                    {member.item.validation.length > 0 ? (
+                      <Box paddingLeft={2}>
+                        <FormFieldValidationStatus validation={member.item.validation} />
+                      </Box>
+                    ) : null}
+                    <Button
+                      mode="ghost"
+                      icon={RemoveIcon}
+                      tone="critical"
+                      disabled={typeof readOnly === 'boolean' ? readOnly : false}
+                      onClick={() => handleUnsetByKey(member.key)}
+                    />
+                  </Flex>
+                </TableCell>
+              </TableRow>
+            ))}
+          </tbody>
+        </Table>
+      ) : null}
+
+      {languagesOutOfOrder.length > 0 && allKeysAreLanguages ? (
+        <Button
+          tone="caution"
+          icon={RestoreIcon}
+          onClick={() => handleRestoreOrder()}
+          text="Restore order of languages"
+        />
+      ) : null}
+
+      {value && value.length < languages.length ? (
+        <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 || Boolean(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 && value?.length >= languages?.length)}
+            icon={AddIcon}
+            text={value?.length ? `Add missing languages` : `Add all languages`}
+            onClick={() => handleAddLanguage()}
+          />
+        </Stack>
+      ) : null}
+    </Stack>
+  )
+}

package/src/components/Table.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import styled, {css} from 'styled-components'
+import {Box, BoxProps, Card, CardProps} from '@sanity/ui'
+
+// Wrappers required because of bug with passing down "as" prop
+// https://github.com/styled-components/styled-components/issues/2449
+
+// Table
+const TableWrapper = (props = {}) => {
+  return <Box as="table" {...props} />
+}
+
+const StyledTable = styled(TableWrapper)(
+  () =>
+    css`
+      display: table;
+      width: 100%;
+
+      &:not([hidden]) {
+        display: table;
+      }
+    `
+)
+
+type TableProps = BoxProps & {
+  children: React.ReactNode
+  style?: React.CSSProperties
+}
+
+export function Table(props: TableProps) {
+  const {children, ...rest} = props
+
+  return <StyledTable {...rest}>{children}</StyledTable>
+}
+
+// Row
+const RowWrapper = (props = {}) => {
+  return <Card as="tr" {...props} />
+}
+
+const StyledRow = styled(RowWrapper)(
+  () =>
+    css`
+      display: table-row;
+
+      &:not([hidden]) {
+        display: table-row;
+      }
+    `
+)
+
+type TableRowProps = CardProps & {
+  children: React.ReactNode
+  style?: React.CSSProperties
+}
+
+export function TableRow(props: TableRowProps) {
+  const {children, ...rest} = props
+
+  return <StyledRow {...rest}>{children}</StyledRow>
+}
+
+// Cell
+const CellWrapper = (props = {}) => {
+  return <Box as="td" {...props} />
+}
+
+const StyledCell = styled(CellWrapper)(
+  () =>
+    css`
+      display: table-cell;
+
+      &:not([hidden]) {
+        display: table-cell;
+      }
+    `
+)
+
+type TableCellProps = BoxProps & {
+  children: React.ReactNode
+  style?: React.CSSProperties
+}
+
+export function TableCell(props: TableCellProps) {
+  const {children, ...rest} = props
+
+  return <StyledCell {...rest}>{children}</StyledCell>
+}

package/src/components/getToneFromValidation.ts

@@ -0,0 +1,18 @@
+import {NodeValidation} from 'sanity/form'
+import {CardTone} from '@sanity/ui'
+
+export function getToneFromValidation(validations: NodeValidation[]): CardTone {
+  if (!validations.length) {
+    return `default`
+  }
+
+  const validationLevels = validations.map((v) => v.level)
+
+  if (validationLevels.includes('error')) {
+    return `critical`
+  } else if (validationLevels.includes('warning')) {
+    return `caution`
+  }
+
+  return `default`
+}

package/src/index.tsx

@@ -0,0 +1,51 @@
+export * from './internationalizedArray'
+
+/**
+ * Because of the complexity of the field, there's no utility currently to using the plugin framework
+ * We need to register:
+ * - an array field which
+ * - only has a single object field with
+ * - a single inner field and
+ * - an array of languages
+ * ...this is easier with a helper function
+ */
+
+// import React from 'react'
+// import {createPlugin} from 'sanity'
+
+// import InternationalizedArrayInput from './components/InternationalizedArrayInput'
+// import {PluginConfig} from './types'
+
+// const CONFIG_DEFAULT = {languages: []}
+
+// export const internationalizedArray = createPlugin<PluginConfig>((config = CONFIG_DEFAULT) => {
+//   return {
+//     name: 'sanity-plugin-internationalized-array',
+//     form: {
+//       renderInput: (inputProps: unknown, next: unknown) => {
+//         if (
+//           config.languages.length &&
+//           inputProps?.schemaType?.jsonType === 'array' &&
+//           inputProps?.schemaType?.options.i18n === true
+//         ) {
+//           if (inputProps.schemaType.of.length > 1) {
+//             return <div>Cannot have more than one field type in the array</div>
+//           }
+
+//           if (inputProps.schemaType.of[0].jsonType !== 'object') {
+//             return <div>Single Field in the Array must be an object</div>
+//           }
+
+//           if (inputProps.schemaType.of[0].fields[0].name !== 'value') {
+//             return <div>Single Field in the Object must be named `value`</div>
+//           }
+
+//           console.log({inputProps})
+//           return <InternationalizedArrayInput inputProps={inputProps} {...config} />
+//         }
+
+//         return null
+//       },
+//     },
+//   }
+// })

package/src/internationalizedArray.ts

@@ -1,28 +1,47 @@
-import {ArrayConfig, Value} from './types'
-import LanguageArray from './LanguageArray'
+import {
+  CustomValidatorResult,
+  defineField,
+  FieldDefinition,
+  Rule,
+  SchemaType,
+  ValidationError,
+} from 'sanity'
 
-export function internationalizedArray(config: ArrayConfig) {
-  const {name = `title`, type = `string`, languages = [], showNativeInput = false} = config
+import InternationalizedArrayInput from './components/InternationalizedArrayInput'
+import {AllowedType, ArrayConfig, Language, Value} from './types'
 
-  return {
+const CONFIG_DEFAULT = {name: `title`, type: `string` as AllowedType, languages: []}
+
+export function internationalizedArray(config: ArrayConfig = CONFIG_DEFAULT): FieldDefinition {
+  const {name, type, languages} = config
+
+  const configValidation = Array.isArray(config?.validation)
+    ? config.validation
+    : [config?.validation]
+
+  return defineField({
     name,
     title: config?.title ?? undefined,
     group: config?.group ?? undefined,
     hidden: config?.hidden ?? undefined,
     readOnly: config?.readOnly ?? undefined,
     type: 'array',
-    inputComponent: LanguageArray,
-    options: {
-      languages,
-      showNativeInput,
-    },
+    components: {input: InternationalizedArrayInput},
+    options: {languages},
     of: [
       {
         type: 'object',
-        fields: [{name: 'value', type}],
+        fields: [
+          {
+            name: 'value',
+            type,
+          },
+        ],
         preview: {
           select: {title: 'value', key: '_key'},
-          prepare({title, key}) {
+          prepare(select) {
+            const {title, key} = select as Record<string, string>
+
             return {
               title,
               subtitle: key.toUpperCase(),
@@ -31,49 +50,62 @@ export function internationalizedArray(config: ArrayConfig) {
         },
       },
     ],
-    validation: (Rule) =>
-      Rule.max(languages.length).custom((value: Value[], context) => {
-        const {languages} = context.type.options
+    // @ts-ignore
+    validation: (rule: Rule) => {
+      const rules = [] as Rule[]
 
-        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})),
+      rules.push(
+        rule.custom<Value[]>((value, context) => {
+          const {languages: contextLanguages}: {languages: Language[]} =
+            context?.type?.options ?? {}
+          const nonLanguageKeys = value?.length
+            ? value.filter(
+                (item) => !contextLanguages.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()
+          // Ensure there's no duplicate `language` fields
+          type KeyedValues = {
+            [key: string]: Value[]
+          }
 
-        if (duplicateValues.length) {
-          return {
-            message: 'There can only be one field per language',
-            paths: duplicateValues.map((item) => ({_key: item._key})),
+          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],
+                  }
+                }, {} as KeyedValues)
+            : {}
+          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
+        })
+      )
 
-        return true
-      }),
-  }
+      if (languages?.length) {
+        rules.push(rule.max(languages.length))
+      }
+
+      return [...rules, ...configValidation].filter(Boolean)
+    },
+  })
 }

package/src/types.ts

@@ -1,10 +1,21 @@
-export type ArrayConfig = Options & {
+import {Rule, ArraySchemaType} from 'sanity'
+
+export type Language = {
+  id: string
+  title: string
+}
+
+export type AllowedType = 'string' | 'number' | 'boolean' | 'text'
+
+export type ArrayConfig = {
   name: string
-  type: 'string' | 'number' | 'boolean' | 'text'
+  type: AllowedType
+  languages: Language[]
   title?: string
   group?: string
   hidden?: boolean | (() => boolean)
   readOnly?: boolean | (() => boolean)
+  validation?: Rule | Rule[]
 }
 
 export type Value = {
@@ -12,12 +23,12 @@ export type Value = {
   value?: string
 }
 
-export type Language = {
-  id: string
-  title: string
+export type PluginConfig = {
+  languages: Language[]
 }
 
-export type Options = {
-  languages: Language[]
-  showNativeInput: boolean
+export type ArraySchemaWithLanguageOptions = ArraySchemaType & {
+  options: {
+    languages: Language[]
+  }
 }

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})