sanity-plugin-internationalized-array 0.0.7 → 1.1.0

package/package.json

@@ -1,57 +1,71 @@
 {
   "name": "sanity-plugin-internationalized-array",
-  "version": "0.0.7",
-  "description": "Store localised fields in an array to save on attributes",
-  "main": "lib/index.js",
+  "version": "1.1.0",
+  "description": "Store localized fields in an array to save on attributes",
+  "author": "Simeon Griggs <simeon@sanity.io>",
+  "license": "MIT",
+  "source": "./src/index.ts",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./lib/cjs/index.js",
+      "default": "./lib/esm/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "v2-incompatible.js",
+    "sanity.json"
+  ],
   "scripts": {
-    "build": "sanipack build",
-    "verify": "sanipack verify",
-    "watch": "sanipack build --watch",
-    "_postinstall": "husky install",
-    "prepublishOnly": "pinst --disable && sanipack build && sanipack verify",
-    "postpublish": "pinst --enable",
+    "clean": "rimraf lib",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint:fix"
-    }
+    "prebuild": "npm run clean && plugin-kit verify-package --silent",
+    "build": "parcel build --no-cache",
+    "watch": "parcel watch",
+    "link-watch": "plugin-kit link-watch",
+    "prepublishOnly": "npm run build"
   },
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/SimeonGriggs/sanity-plugin-internationalized-array.git"
   },
-  "keywords": [
-    "sanity",
-    "sanity-plugin"
-  ],
-  "author": "Sanity.io <hello@sanity.io>",
-  "license": "MIT",
+  "engines": {
+    "node": ">=14.0.0"
+  },
   "dependencies": {
     "@sanity/icons": "^1.3.1",
-    "@sanity/ui": "^0.37.9",
+    "@sanity/incompatible-plugin": "^0.0.1-studio-v3.1",
+    "@sanity/ui": "^0.37.12",
+    "sanity-plugin-utils": "^0.0.1",
     "styled-components": "^5.3.5"
   },
-  "peerDependencies": {
-    "@sanity/base": "^2.30.1",
-    "@sanity/desk-tool": "^2.30.1",
-    "@sanity/form-builder": "^2.30.1",
-    "@sanity/util": "^2.29.5",
-    "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
-  },
   "devDependencies": {
-    "@sanity/eslint-config-studio": "^2.0.0",
-    "eslint": "8.19.0",
+    "@parcel/packager-ts": "^2.6.2",
+    "@parcel/transformer-typescript-types": "^2.6.2",
+    "@sanity/plugin-kit": "^0.1.0-v3-studio.1",
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
+    "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-config-sanity": "6.0.0",
+    "eslint-config-sanity": "^6.0.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
-    "husky": "^8.0.1",
-    "pinst": "^3.0.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "parcel": "^2.6.2",
     "prettier": "^2.7.1",
-    "sanipack": "^2.1.0",
-    "typescript": "^4.7.4"
+    "react": "^17.0.0 || ^18.0.0",
+    "rimraf": "^3.0.2",
+    "sanity": "2.29.5-purple-unicorn.856",
+    "typescript": "4.7.4"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "sanity": "purple-unicorn"
   },
   "bugs": {
     "url": "https://github.com/SimeonGriggs/sanity-plugin-internationalized-array/issues"

package/sanity.json

@@ -1,7 +1,8 @@
 {
-  "paths": {
-    "source": "./src",
-    "compiled": "./lib"
-  },
-  "parts": []
-}
+  "parts": [
+    {
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
+    }
+  ]
+}

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,222 @@
+import React, {useCallback, useMemo} from 'react'
+import {
+  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) =>
+          // eslint-disable-next-line max-nested-callbacks
+          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: 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) {
+      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?.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%`}}>
+                  {/* This renders the entire field default with title */}
+                  <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}
+
+      {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 || 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/createFieldName.ts

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

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

@@ -1,3 +1 @@
-import {internationalizedArray as helperFunction} from './internationalizedArray'
-
-export const internationalizedArray = (config) => helperFunction(config)
+export {internationalizedArray} from './plugin'

package/src/plugin.tsx

@@ -0,0 +1,23 @@
+import {createPlugin} from 'sanity'
+import {PluginConfig} from './types'
+import array from './schema/array'
+import object from './schema/object'
+
+const CONFIG_DEFAULT = {
+  languages: [],
+  fieldTypes: [],
+}
+
+export const internationalizedArray = createPlugin<PluginConfig>((config = CONFIG_DEFAULT) => {
+  const {languages, fieldTypes} = {...CONFIG_DEFAULT, ...config}
+
+  return {
+    name: 'sanity-plugin-internationalized-array',
+    schema: {
+      types: [
+        ...fieldTypes.map((type) => array({type, languages})),
+        ...fieldTypes.map((type) => object({type})),
+      ],
+    },
+  }
+})

package/src/schema/array.ts

@@ -0,0 +1,69 @@
+import {defineField, Rule, Schema} from 'sanity'
+
+import {createFieldName} from '../components/createFieldName'
+import InternationalizedArrayInput from '../components/InternationalizedArrayInput'
+import {Language, Value} from '../types'
+
+type ArrayFactoryConfig = {
+  languages: Language[]
+  type: string | Schema.FieldDefinition
+}
+
+export default (config: ArrayFactoryConfig): Schema.FieldDefinition<'array'> => {
+  const {languages, type} = config
+  const typeName = typeof type === `string` ? type : type.name
+  const arrayName = createFieldName(typeName)
+  const objectName = createFieldName(typeName, true)
+
+  return defineField({
+    name: arrayName,
+    title: 'Internationalized array',
+    type: 'array',
+    components: {input: InternationalizedArrayInput},
+    options: {languages},
+    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 ?? {}
+        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
+        type KeyedValues = {
+          [key: string]: Value[]
+        }
+
+        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
+      }),
+  })
+}

package/src/schema/object.ts

@@ -0,0 +1,29 @@
+import {defineField, Schema} from 'sanity'
+
+import {createFieldName} from '../components/createFieldName'
+
+type ObjectFactoryConfig = {
+  type: string | Schema.FieldDefinition
+}
+
+export default (config: ObjectFactoryConfig): Schema.FieldDefinition<'object'> => {
+  const {type} = config
+  const typeName = typeof type === `string` ? type : type.name
+  const objectName = createFieldName(typeName, true)
+
+  return defineField({
+    name: objectName,
+    title: `Internationalized array ${type}`,
+    type: 'object',
+    fields: [
+      typeof type === `string`
+        ? // Define a basic field if all we have is the string name
+          defineField({
+            name: 'value',
+            type,
+          })
+        : // Pass in the configured options, but overwrite the name
+          {...type, name: 'value'},
+    ],
+  })
+}

package/src/types.ts

@@ -1,13 +1,22 @@
-import {Rule} from '@sanity/types'
+import {Rule, ArraySchemaType, Schema} from 'sanity'
 
-export type ArrayConfig = Options & {
+export type Language = {
+  id: string
+  title: string
+}
+
+export type AllowedType = 'string' | 'number' | 'boolean' | 'text' | 'reference'
+
+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[]
+  field?: {[key: string]: any; options: {[key: string]: any}}
 }
 
 export type Value = {
@@ -15,12 +24,13 @@ export type Value = {
   value?: string
 }
 
-export type Language = {
-  id: string
-  title: string
+export type PluginConfig = {
+  languages: Language[]
+  fieldTypes: (string | Schema.FieldDefinition)[]
 }
 
-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,
+})