sanity-plugin-internationalized-array 1.6.0 → 1.6.2

package/package.json

@@ -1,27 +1,27 @@
 {
   "name": "sanity-plugin-internationalized-array",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "Store localized fields in an array to save on attributes",
   "keywords": [
     "sanity",
     "sanity-plugin"
   ],
-  "homepage": "https://github.com/SimeonGriggs/sanity-plugin-internationalized-array#readme",
+  "homepage": "https://github.com/sanity-io/sanity-plugin-internationalized-array#readme",
   "bugs": {
-    "url": "https://github.com/SimeonGriggs/sanity-plugin-internationalized-array/issues"
+    "url": "https://github.com/sanity-io/sanity-plugin-internationalized-array/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git@github.com:SimeonGriggs/sanity-plugin-internationalized-array.git"
+    "url": "git@github.com:sanity-io/sanity-plugin-internationalized-array.git"
   },
   "license": "MIT",
-  "author": "Simeon Griggs <simeon@sanity.io>",
+  "author": "Sanity.io <hello@sanity.io>",
   "exports": {
     ".": {
-      "types": "./lib/src/index.d.ts",
+      "types": "./lib/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./lib/index.esm.js",
       "require": "./lib/index.js",
+      "import": "./lib/index.esm.js",
       "default": "./lib/index.esm.js"
     },
     "./package.json": "./package.json"
@@ -29,63 +29,75 @@
   "main": "./lib/index.js",
   "module": "./lib/index.esm.js",
   "source": "./src/index.ts",
-  "types": "./lib/src/index.d.ts",
+  "types": "./lib/index.d.ts",
   "files": [
-    "src",
     "lib",
-    "v2-incompatible.js",
-    "sanity.json"
+    "sanity.json",
+    "src",
+    "v2-incompatible.js"
   ],
   "scripts": {
     "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
-    "build": "pkg-utils build",
+    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
     "clean": "rimraf lib",
+    "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "prepare": "husky install",
-    "prepublishOnly": "npm run build",
-    "watch": "pkg-utils watch"
+    "prepublishOnly": "run-s build",
+    "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
-    "@sanity/icons": "^2.0.0",
+    "@sanity/icons": "^2.2.2",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^1.0.0",
+    "@sanity/ui": "^1.2.2",
     "fast-deep-equal": "^3.1.3",
     "lodash.get": "^4.4.2",
     "suspend-react": "^0.0.8"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.3.0",
-    "@commitlint/config-conventional": "^17.3.0",
-    "@sanity/pkg-utils": "^1.18.0",
-    "@sanity/plugin-kit": "^2.1.17",
-    "@sanity/semantic-release-preset": "^2.0.2",
-    "@types/lodash.get": "^4.4.7",
+    "@commitlint/cli": "^17.4.4",
+    "@commitlint/config-conventional": "^17.4.4",
+    "@sanity/pkg-utils": "^2.2.4",
+    "@sanity/plugin-kit": "^3.1.4",
+    "@sanity/semantic-release-preset": "^4.0.1",
+    "@types/react": "^18.0.27",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/parser": "^5.51.0",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-config-sanity": "^6.0.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^8.0.2",
-    "lint-staged": "^13.0.4",
-    "prettier": "^2.8.0",
-    "prettier-plugin-packagejson": "^2.3.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.4",
+    "prettier-plugin-packagejson": "^2.4.2",
     "react": "^18",
-    "rimraf": "^3.0.2",
-    "sanity": "3.0.0-rc.3",
-    "styled-components": "^5.3.6",
-    "typescript": "^4.9.3"
+    "react-dom": "^18",
+    "react-is": "^18",
+    "rimraf": "^4.1.2",
+    "sanity": "^3.3.1",
+    "semantic-release": "^20.1.0",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
+    "@sanity/ui": "^1.2.2",
     "react": "^18",
-    "sanity": "dev-preview || 3.0.0-rc.3 || ^3.0.0",
-    "styled-components": "^5.2"
+    "sanity": "^3.0.0",
+    "styled-components": "^5.3.6"
   },
   "engines": {
     "node": ">=14"
+  },
+  "sanityPlugin": {
+    "verifyPackage": {
+      "eslintImports": false
+    }
   }
 }

package/src/cache.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 
 import * as suspend from 'suspend-react'
+
 import type {Language} from './types'
 
 export const namespace = 'sanity-plugin-internationalized-array'

package/src/components/Feedback.tsx

@@ -1,5 +1,4 @@
-import {Text, Card, Stack, Code} from '@sanity/ui'
-import React from 'react'
+import {Card, Code, Stack, Text} from '@sanity/ui'
 
 const schemaExample = {
   languages: [
@@ -13,8 +12,9 @@ export default function Feedback() {
     <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:
+          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">

package/src/components/InternationalizedArray.tsx

@@ -1,34 +1,37 @@
-import React, {useCallback, useDeferredValue, useEffect, useMemo} from 'react'
+import {AddIcon} from '@sanity/icons'
+import {Button, Grid, Stack, useToast} from '@sanity/ui'
+import equal from 'fast-deep-equal'
+import {useCallback, useDeferredValue, useEffect, useMemo} from 'react'
 import {
+  ArrayOfObjectsInputProps,
+  ArrayOfObjectsItem,
+  ArrayOfObjectsItemMember,
   insert,
   set,
   setIfMissing,
-  ArrayOfObjectsItemMember,
-  ArrayOfObjectsItem,
-  ArrayOfObjectsInputProps,
   useClient,
   useFormBuilder,
 } from 'sanity'
-import {Button, Grid, Stack, useToast} from '@sanity/ui'
-import {AddIcon} from '@sanity/icons'
 import {suspend} from 'suspend-react'
-import equal from 'fast-deep-equal'
 
-import type {Value, ArraySchemaWithLanguageOptions} from '../types'
+import {namespace, version} from '../cache'
+import type {ArraySchemaWithLanguageOptions, Value} from '../types'
 import Feedback from './Feedback'
+import {getSelectedValue} from './getSelectedValue'
 // TODO: Move this provider to the root component
 import {LanguageProvider} from './languageContext'
-import {namespace, version} from '../cache'
-import {getSelectedValue} from './getSelectedValue'
 
 export type InternationalizedArrayProps = ArrayOfObjectsInputProps<
   Value,
   ArraySchemaWithLanguageOptions
 >
 
-export default function InternationalizedArray(props: InternationalizedArrayProps) {
+export default function InternationalizedArray(
+  props: InternationalizedArrayProps
+) {
   const {members, value, schemaType, onChange} = props
-  const readOnly = typeof schemaType.readOnly === 'boolean' ? schemaType.readOnly : false
+  const readOnly =
+    typeof schemaType.readOnly === 'boolean' ? schemaType.readOnly : false
   const {options} = schemaType
   const toast = useToast()
   const {value: document} = useFormBuilder()
@@ -161,13 +164,16 @@ export default function InternationalizedArray(props: InternationalizedArrayProp
     }
 
     return value
-      .map((v, vIndex) => (vIndex === languagesInUse.findIndex((l) => l.id === v._key) ? null : v))
+      .map((v, vIndex) =>
+        vIndex === languagesInUse.findIndex((l) => l.id === v._key) ? null : v
+      )
       .filter(Boolean)
   }, [value, languagesInUse])
 
   const languagesAreValid = useMemo(
     () =>
-      !languages?.length || (languages?.length && languages.every((item) => item.id && item.title)),
+      !languages?.length ||
+      (languages?.length && languages.every((item) => item.id && item.title)),
     [languages]
   )
 
@@ -231,7 +237,10 @@ export default function InternationalizedArray(props: InternationalizedArrayProp
                     tone="primary"
                     mode="ghost"
                     fontSize={1}
-                    disabled={readOnly || Boolean(value?.find((item) => item._key === language.id))}
+                    disabled={
+                      readOnly ||
+                      Boolean(value?.find((item) => item._key === language.id))
+                    }
                     text={language.id.toUpperCase()}
                     icon={AddIcon}
                     onClick={() => handleAddLanguage(language.id)}
@@ -242,13 +251,17 @@ export default function InternationalizedArray(props: InternationalizedArrayProp
             <Button
               tone="primary"
               mode="ghost"
-              disabled={readOnly || (value && value?.length >= languages?.length)}
+              disabled={
+                readOnly || (value && value?.length >= languages?.length)
+              }
               icon={AddIcon}
               text={
                 // eslint-disable-next-line no-nested-ternary
                 value?.length
                   ? `Add missing ${
-                      languages.length - value.length === 1 ? `language` : `languages`
+                      languages.length - value.length === 1
+                        ? `language`
+                        : `languages`
                     }`
                   : languages.length === 1
                   ? `Add ${languages[0].title} Field`

package/src/components/InternationalizedInput.tsx

@@ -1,8 +1,18 @@
-import {ObjectItemProps, useFormValue} from 'sanity'
-import React, {useCallback, useMemo} from 'react'
-import {unset, set} from 'sanity'
-import {Button, Flex, Label, MenuButton, Menu, MenuItem, Card, Spinner, Stack} from '@sanity/ui'
 import {RemoveCircleIcon} from '@sanity/icons'
+import {
+  Button,
+  Card,
+  Flex,
+  Label,
+  Menu,
+  MenuButton,
+  MenuItem,
+  Spinner,
+  Stack,
+} from '@sanity/ui'
+import React, {useCallback, useMemo} from 'react'
+import {ObjectItemProps, useFormValue} from 'sanity'
+import {set, unset} from 'sanity'
 
 import {getToneFromValidation} from './getToneFromValidation'
 import {LanguageContext} from './languageContext'
@@ -13,13 +23,19 @@ type InternationalizedValue = {
   value: string
 }
 
-export default function InternationalizedInput(props: ObjectItemProps<InternationalizedValue>) {
-  const parentValue = useFormValue(props.path.slice(0, -1)) as InternationalizedValue[]
+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'),
+    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,
@@ -30,13 +46,22 @@ export default function InternationalizedInput(props: ObjectItemProps<Internatio
   // The parent array contains the languages from the plugin config
   const {languages} = React.useContext(LanguageContext)
 
-  const languageKeysInUse = useMemo(() => parentValue?.map((v) => v._key) ?? [], [parentValue])
-  const keyIsValid = languages?.length ? languages.find((l) => l.id === value._key) : false
+  const languageKeysInUse = useMemo(
+    () => parentValue?.map((v) => v._key) ?? [],
+    [parentValue]
+  )
+  const keyIsValid = languages?.length
+    ? languages.find((l) => l.id === value._key)
+    : false
 
   // Changes the key of this item, ideally to a valid language
   const handleKeyChange = useCallback(
     (languageId: string) => {
-      if (!value || !languages?.length || !languages.find((l) => l.id === languageId)) {
+      if (
+        !value ||
+        !languages?.length ||
+        !languages.find((l) => l.id === languageId)
+      ) {
         return
       }
 

package/src/components/Preload.tsx

@@ -1,8 +1,9 @@
-import {peek, preload} from '../cache'
 import {memo} from 'react'
-import type {PluginConfig} from '../types'
 import {useClient} from 'sanity'
 
+import {peek, preload} from '../cache'
+import type {PluginConfig} from '../types'
+
 export default memo(function Preload(
   props: Required<Pick<PluginConfig, 'apiVersion' | 'languages'>>
 ) {
@@ -10,7 +11,9 @@ export default memo(function Preload(
   if (!Array.isArray(peek({}))) {
     // eslint-disable-next-line require-await
     preload(async () =>
-      Array.isArray(props.languages) ? props.languages : props.languages(client, {})
+      Array.isArray(props.languages)
+        ? props.languages
+        : props.languages(client, {})
     )
   }
 

package/src/components/getSelectedValue.ts

@@ -19,7 +19,9 @@ export const getSelectedValue = (
     if (Array.isArray(value)) {
       // If there are references in the array, ensure they have `_ref` set, otherwise they are considered empty and can safely be ignored
       value = value.filter((item) =>
-        typeof item === 'object' ? item?._type === 'reference' && '_ref' in item : true
+        typeof item === 'object'
+          ? item?._type === 'reference' && '_ref' in item
+          : true
       )
     }
     selectedValue[key] = value

package/src/components/getToneFromValidation.ts

@@ -1,7 +1,9 @@
 import {CardTone} from '@sanity/ui'
 import {FormNodeValidation} from 'sanity'
 
-export function getToneFromValidation(validations: FormNodeValidation[]): CardTone | undefined {
+export function getToneFromValidation(
+  validations: FormNodeValidation[]
+): CardTone | undefined {
   if (!validations?.length) {
     return undefined
   }

package/src/plugin.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import {definePlugin} from 'sanity'
+
 import Preload from './components/Preload'
 import array from './schema/array'
 import object from './schema/object'
@@ -10,29 +10,38 @@ const CONFIG_DEFAULT: PluginConfig = {
   fieldTypes: [],
 }
 
-export const internationalizedArray = definePlugin<PluginConfig>((config = CONFIG_DEFAULT) => {
-  const {apiVersion = '2022-11-27', select, languages, fieldTypes} = {...CONFIG_DEFAULT, ...config}
+export const internationalizedArray = definePlugin<PluginConfig>(
+  (config = CONFIG_DEFAULT) => {
+    const {
+      apiVersion = '2022-11-27',
+      select,
+      languages,
+      fieldTypes,
+    } = {...CONFIG_DEFAULT, ...config}
 
-  return {
-    name: 'sanity-plugin-internationalized-array',
-    // If `languages` is a callback then let's preload it
-    studio: Array.isArray(languages)
-      ? undefined
-      : {
-          components: {
-            layout: (props) => (
-              <>
-                <Preload apiVersion={apiVersion} languages={languages} />
-                {props.renderDefault(props)}
-              </>
-            ),
+    return {
+      name: 'sanity-plugin-internationalized-array',
+      // If `languages` is a callback then let's preload it
+      studio: Array.isArray(languages)
+        ? undefined
+        : {
+            components: {
+              layout: (props) => (
+                <>
+                  <Preload apiVersion={apiVersion} languages={languages} />
+                  {props.renderDefault(props)}
+                </>
+              ),
+            },
           },
-        },
-    schema: {
-      types: [
-        ...fieldTypes.map((type) => array({type, apiVersion, select, languages})),
-        ...fieldTypes.map((type) => object({type})),
-      ],
-    },
+      schema: {
+        types: [
+          ...fieldTypes.map((type) =>
+            array({type, apiVersion, select, languages})
+          ),
+          ...fieldTypes.map((type) => object({type})),
+        ],
+      },
+    }
   }
-})
+)

package/src/schema/array.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import {defineField, type FieldDefinition, type Rule} from 'sanity'
-import {peek} from '../cache'
 
+import {peek} from '../cache'
 import {createFieldName} from '../components/createFieldName'
 import {getSelectedValue} from '../components/getSelectedValue'
 import InternationalizedArray from '../components/InternationalizedArray'
@@ -24,14 +24,12 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
     name: arrayName,
     title: 'Internationalized array',
     type: 'array',
-    // TODO: Resolve this typing issue with the outer component
-    // @ts-ignore
     components: {
       input: InternationalizedArray,
     },
     options: {apiVersion, select, languages},
     // TODO: Resolve this typing issue with the inner object
-    // @ts-ignore
+    // @ts-expect-error
     of: [
       defineField({
         ...(typeof type === 'string' ? {} : type),
@@ -47,7 +45,9 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
 
         const selectedValue = getSelectedValue(select, context.document)
         const client = context.getClient({apiVersion})
-        const contextLanguages: Language[] = Array.isArray(context?.type?.options?.languages)
+        const contextLanguages: Language[] = Array.isArray(
+          context?.type?.options?.languages
+        )
           ? context!.type!.options.languages
           : Array.isArray(peek(selectedValue))
           ? peek(selectedValue)
@@ -55,12 +55,17 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
 
         if (value && value.length > contextLanguages.length) {
           return `Cannot be more than ${
-            contextLanguages.length === 1 ? `1 item` : `${contextLanguages.length} items`
+            contextLanguages.length === 1
+              ? `1 item`
+              : `${contextLanguages.length} items`
           }`
         }
 
         const nonLanguageKeys = value?.length
-          ? value.filter((item) => !contextLanguages.find((language) => item._key === language.id))
+          ? value.filter(
+              (item) =>
+                !contextLanguages.find((language) => item._key === language.id)
+            )
           : []
         if (nonLanguageKeys.length) {
           return {

package/src/schema/object.ts

@@ -17,26 +17,20 @@ export default (config: ObjectFactoryConfig): FieldDefinition<'object'> => {
     name: objectName,
     title: `Internationalized array ${type}`,
     type: 'object',
-    // TODO: Resolve this typing issue with the return type
-    // @ts-ignore
     components: {
-      // TODO: Resolve this typing issue with the outer component
-      // @ts-ignore
       item: InternationalizedInput,
     },
     // TODO: Address this typing issue with the inner object
-    // @ts-ignore
+    // @ts-expect-error
     fields: [
       typeof type === `string`
         ? // Define a simple field if all we have is the name as a string
           defineField({
             name: 'value',
             type,
-            // TODO: Address this typing issue with components on a dynamic `type`
-            // @ts-ignore
             components: {
               // TODO: Address this typing issue with the inner object
-              // @ts-ignore
+              // @ts-expect-error
               field: InternationalizedField,
             },
           })

package/src/types.ts

@@ -1,4 +1,10 @@
-import type {Rule, ArraySchemaType, RuleTypeConstraint, SanityClient, FieldDefinition} from 'sanity'
+import type {
+  ArraySchemaType,
+  FieldDefinition,
+  Rule,
+  RuleTypeConstraint,
+  SanityClient,
+} from 'sanity'
 
 export type Language = {
   id: Intl.UnicodeBCP47LocaleIdentifier

package/src/components/Table.tsx

@@ -1,88 +0,0 @@
-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>
-}