sanity-plugin-internationalized-array 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Simeon Griggs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,79 @@
+# sanity-plugin-internationalized-array
+
+A helper function that renders a custom input component for writing localised fields of content into an array.
+
+**This an early proof-of-concept and should not yet be used without thorough testing.**
+
+![2022-07-13 12 53 29](https://user-images.githubusercontent.com/9684022/178729823-cbb1059f-4ae0-4ab0-900d-4f22b030c1d1.gif)
+
+## Installation
+
+```
+sanity install internationalized-array
+```
+
+Add an array to your schema by importing the helper function.
+
+```js
+import {internationalizedArray} from 'sanity-plugin-internationalized-array'
+
+// ./src/schema/person.js
+export default {
+  name: 'person',
+  title: 'Person',
+  type: 'document',
+  fields: [
+    // ...all your other fields
+    internationalizedArray({
+      name: 'greeting' // required
+      type: 'string' // required: string | text | number | boolean
+      languages: [
+        {id: 'en', title: 'English'},
+        {id: 'fr', title: 'French'},
+      ] // required, must be an array of objects
+      showNativeInput: false // optional: just for debugging
+    })
+  ]
+}
+```
+
+This will create an Array field where `string` fields can be added with the name `title`. The custom input contains buttons which will add new array items with the language as the `_key` value. Data returned from this array will look like this:
+
+```json
+"greeting": [
+  { "_key": "en", "value": "hello" },
+  { "_key": "fr", "value": "bonjour" },
+]
+```
+
+Using GROQ filters you can query for a specific language key like so:
+
+```js
+*[_type == "person"] {
+  "greeting": greeting[_key == "en"][0].value
+}
+```
+
+### Why store localised field data like this?
+
+The most popular way to store translated content is in an object using the method prescribed in [@sanity/language-filter](https://www.npmjs.com/package/@sanity/language-filter). This works well and creates tidy object structures, but also create a unique field path for every unique field name, multiplied by the number of languages in your dataset.
+
+For most people, this won't become an issue. On a very large dataset with a lot of languages, the [Attribute Limit](https://www.sanity.io/docs/attribute-limit) can become a concern.
+
+An object with the same content as above would look like this:
+
+```json
+"greeting" {
+  "en": "hello",
+  "fr": "bonjour"
+}
+```
+
+This creates three unique query paths. The array created by this plugin creates four.
+
+However, every language added to the object increases the number of attributes. Where the array method is limited only by the amount of data you can store in your dataset (heaps!).
+
+## License
+
+MIT © Simeon Griggs
+See LICENSE

package/lib/LanguageArray/ValueInput.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ValueInput;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FormBuilderInput = require("@sanity/form-builder/lib/FormBuilderInput");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ValueInput(props) {
+  return /*#__PURE__*/_react.default.createElement(_FormBuilderInput.FormBuilderInput, props);
+}
+//# sourceMappingURL=ValueInput.js.map

package/lib/LanguageArray/ValueInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueInput.js","names":["ValueInput","props"],"sources":["../../src/LanguageArray/ValueInput.tsx"],"sourcesContent":["import React from 'react'\nimport {FormBuilderInput} from '@sanity/form-builder/lib/FormBuilderInput'\n\nexport default function ValueInput(props) {\n  return <FormBuilderInput {...props} />\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEe,SAASA,UAAT,CAAoBC,KAApB,EAA2B;EACxC,oBAAO,6BAAC,kCAAD,EAAsBA,KAAtB,CAAP;AACD"}

package/lib/LanguageArray/index.js

@@ -0,0 +1,243 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _sanityPluginNrknoOddUtils = require("@nrk/sanity-plugin-nrkno-odd-utils");
+
+var _ui = require("@sanity/ui");
+
+var _formBuilder = require("part:@sanity/form-builder");
+
+var _PatchEvent = require("@sanity/form-builder/PatchEvent");
+
+var _icons = require("@sanity/icons");
+
+var _components = require("@sanity/base/components");
+
+var _presence = require("@sanity/base/presence");
+
+var _ValueInput = _interopRequireDefault(require("./ValueInput"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var schemaExample = {
+  name: 'title',
+  type: 'localisedArray',
+  options: {
+    languages: [{
+      id: 'en',
+      title: 'English'
+    }, {
+      id: 'no',
+      title: 'Norsk'
+    }]
+  }
+};
+var DEFAULT_OPTIONS = {
+  languages: [],
+  showNativeInput: false
+};
+var LanguageArrayWrapper = /*#__PURE__*/(0, _react.forwardRef)(function CustomComponent(props, ref) {
+  var _type$options;
+
+  var onChange = props.onChange,
+      onBlur = props.onBlur,
+      readOnly = props.readOnly,
+      presence = props.presence,
+      markers = props.markers;
+  var value = props === null || props === void 0 ? void 0 : props.value; // IMPORTANT: leaving out will cause the browser to lock up in an infinite loop
+
+  var type = (0, _sanityPluginNrknoOddUtils.useUnsetInputComponent)(props.type);
+  var options = (_type$options = type === null || type === void 0 ? void 0 : type.options) !== null && _type$options !== void 0 ? _type$options : DEFAULT_OPTIONS;
+  var languages = options.languages,
+      showNativeInput = options.showNativeInput;
+  var handleAddLanguage = (0, _react.useCallback)(languageId => {
+    // Create new items
+    var newItems = languageId ? // Just one for this language
+    [{
+      _key: languageId
+    }] : // Or one for every missing language
+    languages.filter(language => value !== null && value !== void 0 && value.length ? !value.find(v => v._key === language.id) : true).map(language => ({
+      _key: language.id
+    })); // Insert new items in the correct order
+
+    var languagesInUse = value !== null && value !== void 0 && value.length ? value.map(v => v) : [];
+    var insertions = newItems.map(item => {
+      // What's the original index of this language?
+      var languageIndex = languages.findIndex(l => item._key === l.id); // What languages are there beyond that index?
+
+      var remainingLanguages = languages.slice(languageIndex + 1); // So what is the index in the current value array of the next language in the language array?
+
+      var 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
+      (0, _PatchEvent.insert)([item], 'after', [nextLanguageIndex]) : // Next language found, insert before that
+      (0, _PatchEvent.insert)([item], 'before', [nextLanguageIndex]);
+    });
+    onChange(_PatchEvent.PatchEvent.from((0, _PatchEvent.setIfMissing)([]), ...insertions));
+  }, [languages, onChange, value]);
+  var handleUnsetByKey = (0, _react.useCallback)(_key => {
+    onChange(_PatchEvent.PatchEvent.from((0, _PatchEvent.unset)([{
+      _key
+    }])));
+  }, [onChange]);
+  var handleInnerValueChange = (0, _react.useCallback)((patchEvent, _key) => {
+    var _patchEvent$patches$;
+
+    var inputValue = (_patchEvent$patches$ = patchEvent.patches[0]) === null || _patchEvent$patches$ === void 0 ? void 0 : _patchEvent$patches$.value;
+    var inputPath = [{
+      _key
+    }, "value"];
+    onChange(_PatchEvent.PatchEvent.from(inputValue ? (0, _PatchEvent.set)(inputValue, inputPath) : (0, _PatchEvent.unset)(inputPath)));
+  }, [onChange]); // TODO: This is lazy, reordering and re-setting the whole array – it should be surgical
+
+  var handleRestoreOrder = (0, _react.useCallback)(() => {
+    // Create a new value array in the correct order
+    var updatedValue = value.reduce((acc, v) => {
+      var newIndex = languages.findIndex(l => l.id === v._key);
+      acc[newIndex] = v;
+      return acc;
+    }, []);
+    onChange(_PatchEvent.PatchEvent.from((0, _PatchEvent.unset)(), (0, _PatchEvent.set)(updatedValue)));
+  }, [languages, onChange, value]); // Check languages are in the correct order
+
+  var languagesOutOfOrder = (0, _react.useMemo)(() => {
+    if (!(value !== null && value !== void 0 && value.length)) {
+      return [];
+    }
+
+    var 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]); // Check options are supplied and valid
+
+  var languagesAreValid = (0, _react.useMemo)(() => (languages === null || languages === void 0 ? void 0 : languages.length) && languages.every(item => item.id && item.title), [languages]);
+
+  if (!languagesAreValid) {
+    return /*#__PURE__*/_react.default.createElement(_ui.Card, {
+      tone: "caution",
+      border: true,
+      radius: 2,
+      padding: 3
+    }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+      space: 4
+    }, /*#__PURE__*/_react.default.createElement(_ui.Text, null, "An array of language objects must be passed into the ", /*#__PURE__*/_react.default.createElement("code", null, type.name), " field as options, each with an ", /*#__PURE__*/_react.default.createElement("code", null, "id"), " and ", /*#__PURE__*/_react.default.createElement("code", null, "title"), " field. Example:"), /*#__PURE__*/_react.default.createElement(_ui.Card, {
+      padding: 2,
+      border: true,
+      radius: 2
+    }, /*#__PURE__*/_react.default.createElement(_ui.Code, {
+      size: 1,
+      language: "javascript"
+    }, JSON.stringify(schemaExample, null, 2)))));
+  }
+
+  var validationMarkers = markers !== null && markers !== void 0 && markers.length ? markers.filter(mark => mark.type === "validation") : [];
+  var invalidKeys = validationMarkers.map(mark => mark.path).flat().map(item => item._key);
+  return /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+    space: 2
+  }, (value === null || value === void 0 ? void 0 : value.length) > 0 ? /*#__PURE__*/_react.default.createElement(_ui.Card, {
+    padding: 1,
+    border: true,
+    radius: 1
+  }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+    space: 1
+  }, value.map(item => {
+    var _type$of;
+
+    return /*#__PURE__*/_react.default.createElement(_ui.Card, {
+      paddingY: 1,
+      paddingX: 2,
+      key: item._key,
+      tone: // TODO: Move this logic somewhere else
+      invalidKeys.includes(item._key) ? "critical" : undefined || languagesOutOfOrder.find(l => l._key === item._key) ? "caution" : undefined
+    }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
+      gap: 3,
+      align: "center"
+    }, (type === null || type === void 0 ? void 0 : (_type$of = type.of) === null || _type$of === void 0 ? void 0 : _type$of.length) > 0 && (type === null || type === void 0 ? void 0 : type.of.map(subType => {
+      var _subType$fields;
+
+      return /*#__PURE__*/_react.default.createElement(_ui.Flex, {
+        key: subType.name,
+        flex: 1,
+        align: "center",
+        gap: 2
+      }, (subType === null || subType === void 0 ? void 0 : (_subType$fields = subType.fields) === null || _subType$fields === void 0 ? void 0 : _subType$fields.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.Box, null, /*#__PURE__*/_react.default.createElement(_ui.Label, null, item._key)), /*#__PURE__*/_react.default.createElement(_ui.Box, {
+        flex: 1
+      }, subType.fields.map(subTypeField => /*#__PURE__*/_react.default.createElement(_ValueInput.default, {
+        key: subTypeField.name,
+        onChange: patchEvent => handleInnerValueChange(patchEvent, item._key),
+        onBlur: onBlur // We don't want the array item to open onFocus
+        ,
+        onFocus: () => null,
+        path: [{
+          _key: item._key
+        }, subTypeField.name],
+        parent: item,
+        readOnly: readOnly,
+        type: subTypeField,
+        value: item.value,
+        level: props.level + 1,
+        markers: []
+      })))) : null);
+    })), (presence === null || presence === void 0 ? void 0 : presence.length) > 0 ? /*#__PURE__*/_react.default.createElement(_presence.FieldPresence, {
+      maxAvatars: 1,
+      presence: presence
+    }) : null, invalidKeys.includes(item._key) ? /*#__PURE__*/_react.default.createElement(_components.FormFieldValidationStatus, {
+      __unstable_markers: validationMarkers
+    }) : null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+      mode: "ghost",
+      icon: _icons.RemoveIcon,
+      tone: "critical",
+      onClick: () => handleUnsetByKey(item._key)
+    })));
+  }))) : null, languagesOutOfOrder.length > 0 ? /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    tone: "caution",
+    disabled: languagesOutOfOrder.length > languages.length,
+    icon: _icons.RestoreIcon,
+    onClick: () => handleRestoreOrder(),
+    text: "Restore order of languages"
+  }) : null, languages.length > 0 ? /*#__PURE__*/_react.default.createElement(_ui.Stack, {
+    space: 2
+  }, /*#__PURE__*/_react.default.createElement(_ui.Grid, {
+    columns: Math.min(languages.length, 5),
+    gap: 2
+  }, languages.map(language => /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    key: language.id,
+    tone: "primary",
+    mode: "ghost",
+    fontSize: 1,
+    disabled: readOnly || (value === null || value === void 0 ? void 0 : value.find(item => item._key === language.id)),
+    text: language.id.toUpperCase(),
+    icon: _icons.AddIcon,
+    onClick: () => handleAddLanguage(language.id)
+  }))), /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    tone: "primary",
+    mode: "ghost",
+    disabled: readOnly || (value === null || value === void 0 ? void 0 : value.length) >= (languages === null || languages === void 0 ? void 0 : languages.length),
+    text: value !== null && value !== void 0 && value.length ? "Add missing languages" : "Add all languages",
+    onClick: () => handleAddLanguage()
+  })) : null, showNativeInput ? /*#__PURE__*/_react.default.createElement(_sanityPluginNrknoOddUtils.NestedFormBuilder, _extends({}, props, {
+    type: type
+  })) : null);
+});
+
+var _default = (0, _formBuilder.withDocument)(LanguageArrayWrapper);
+
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/LanguageArray/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["schemaExample","name","type","options","languages","id","title","DEFAULT_OPTIONS","showNativeInput","LanguageArrayWrapper","forwardRef","CustomComponent","props","ref","onChange","onBlur","readOnly","presence","markers","value","useUnsetInputComponent","handleAddLanguage","useCallback","languageId","newItems","_key","filter","language","length","find","v","map","languagesInUse","insertions","item","languageIndex","findIndex","l","remainingLanguages","slice","nextLanguageIndex","r","push","splice","insert","PatchEvent","from","setIfMissing","handleUnsetByKey","unset","handleInnerValueChange","patchEvent","inputValue","patches","inputPath","set","handleRestoreOrder","updatedValue","reduce","acc","newIndex","languagesOutOfOrder","useMemo","vIndex","Boolean","languagesAreValid","every","JSON","stringify","validationMarkers","mark","invalidKeys","path","flat","includes","undefined","of","subType","fields","subTypeField","level","RemoveIcon","RestoreIcon","Math","min","toUpperCase","AddIcon","withDocument"],"sources":["../../src/LanguageArray/index.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, useMemo} from 'react'\nimport {useUnsetInputComponent, NestedFormBuilder} from '@nrk/sanity-plugin-nrkno-odd-utils'\nimport {Code, Text, Card, Label, Flex, Box, Stack, Button, Grid} from '@sanity/ui'\nimport {withDocument} from 'part:@sanity/form-builder'\nimport {PatchEvent, setIfMissing, insert, unset, set} from '@sanity/form-builder/PatchEvent'\nimport {AddIcon, RemoveIcon, RestoreIcon} from '@sanity/icons'\nimport {FormFieldValidationStatus} from '@sanity/base/components'\nimport {FieldPresence} from '@sanity/base/presence'\n\nimport ValueInput from './ValueInput'\n\nconst schemaExample = {\n  name: 'title',\n  type: 'localisedArray',\n  options: {\n    languages: [\n      {id: 'en', title: 'English'},\n      {id: 'no', title: 'Norsk'},\n    ],\n  },\n}\n\ntype Value = {\n  _key: string\n  value?: string\n}\n\ntype Language = {\n  id: string\n  title: string\n}\n\ntype Options = {\n  languages: Language[]\n  showNativeInput: boolean\n}\n\nconst DEFAULT_OPTIONS = {\n  languages: [],\n  showNativeInput: false,\n}\n\nconst LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {\n  const {onChange, onBlur, readOnly, presence, markers} = props\n  const value: Value[] = props?.value\n\n  // IMPORTANT: leaving out will cause the browser to lock up in an infinite loop\n  const type = useUnsetInputComponent(props.type)\n  const options: Options = type?.options ?? DEFAULT_OPTIONS\n  const {languages, showNativeInput} = options\n\n  const handleAddLanguage = useCallback(\n    (languageId?: string) => {\n      // Create new items\n      const newItems = languageId\n        ? // Just one for this language\n          [{_key: languageId}]\n        : // Or one for every missing language\n          languages\n            .filter((language) =>\n              value?.length ? !value.find((v) => v._key === language.id) : true\n            )\n            .map((language) => ({_key: language.id}))\n\n      // Insert new items in the correct order\n      const languagesInUse = value?.length ? value.map((v) => v) : []\n\n      const insertions = newItems.map((item) => {\n        // What's the original index of this language?\n        const languageIndex = languages.findIndex((l) => item._key === l.id)\n\n        // What languages are there beyond that index?\n        const remainingLanguages = languages.slice(languageIndex + 1)\n\n        // So what is the index in the current value array of the next language in the language array?\n        const nextLanguageIndex = languagesInUse.findIndex((l) =>\n          remainingLanguages.find((r) => r.id === l._key)\n        )\n\n        // Keep local state up to date incase multiple insertions are being made\n        if (nextLanguageIndex < 0) {\n          languagesInUse.push(item)\n        } else {\n          languagesInUse.splice(nextLanguageIndex, 0, item)\n        }\n\n        return nextLanguageIndex < 0\n          ? // No next language (-1), add to end of array\n            insert([item], 'after', [nextLanguageIndex])\n          : // Next language found, insert before that\n            insert([item], 'before', [nextLanguageIndex])\n      })\n\n      onChange(PatchEvent.from(setIfMissing([]), ...insertions))\n    },\n    [languages, onChange, value]\n  )\n\n  const handleUnsetByKey = useCallback(\n    (_key) => {\n      onChange(PatchEvent.from(unset([{_key}])))\n    },\n    [onChange]\n  )\n\n  const handleInnerValueChange = useCallback(\n    (patchEvent: PatchEvent, _key: string) => {\n      const inputValue = patchEvent.patches[0]?.value\n      const inputPath = [{_key}, `value`]\n\n      onChange(PatchEvent.from(inputValue ? set(inputValue, inputPath) : unset(inputPath)))\n    },\n    [onChange]\n  )\n\n  // TODO: This is lazy, reordering and re-setting the whole array – it should be surgical\n  const handleRestoreOrder = useCallback(() => {\n    // Create a new value array in the correct order\n    const updatedValue = value.reduce((acc, v) => {\n      const newIndex = languages.findIndex((l) => l.id === v._key)\n\n      acc[newIndex] = v\n\n      return acc\n    }, [])\n\n    onChange(PatchEvent.from(unset(), set(updatedValue)))\n  }, [languages, onChange, value])\n\n  // Check languages are in the correct order\n  const languagesOutOfOrder = useMemo(() => {\n    if (!value?.length) {\n      return []\n    }\n\n    const languagesInUse = languages.filter((l) => value.find((v) => v._key === l.id))\n\n    return value\n      .map((v, vIndex) => (vIndex === languagesInUse.findIndex((l) => l.id === v._key) ? null : v))\n      .filter(Boolean)\n  }, [value, languages])\n\n  // Check options are supplied and valid\n  const languagesAreValid = useMemo(\n    () => languages?.length && languages.every((item) => item.id && item.title),\n    [languages]\n  )\n\n  if (!languagesAreValid) {\n    return (\n      <Card tone=\"caution\" border radius={2} padding={3}>\n        <Stack space={4}>\n          <Text>\n            An array of language objects must be passed into the <code>{type.name}</code> field as\n            options, each with an <code>id</code> and <code>title</code> field. Example:\n          </Text>\n          <Card padding={2} border radius={2}>\n            <Code size={1} language=\"javascript\">\n              {JSON.stringify(schemaExample, null, 2)}\n            </Code>\n          </Card>\n        </Stack>\n      </Card>\n    )\n  }\n\n  const validationMarkers = markers?.length\n    ? markers.filter((mark) => mark.type === `validation`)\n    : []\n  const invalidKeys = validationMarkers\n    .map((mark) => mark.path)\n    .flat()\n    .map((item) => item._key)\n\n  return (\n    <Stack space={2}>\n      {/* Loop over the values */}\n      {value?.length > 0 ? (\n        <Card padding={1} border radius={1}>\n          <Stack space={1}>\n            {value.map((item) => (\n              <Card\n                paddingY={1}\n                paddingX={2}\n                key={item._key}\n                tone={\n                  // TODO: Move this logic somewhere else\n                  invalidKeys.includes(item._key)\n                    ? `critical`\n                    : undefined || languagesOutOfOrder.find((l) => l._key === item._key)\n                    ? `caution`\n                    : undefined\n                }\n              >\n                <Flex gap={3} align=\"center\">\n                  {/* To render each individual field in this type */}\n                  {type?.of?.length > 0 &&\n                    type?.of.map((subType) => (\n                      <Flex key={subType.name} flex={1} align=\"center\" gap={2}>\n                        {subType?.fields?.length > 0 ? (\n                          <>\n                            <Box>\n                              <Label>{item._key}</Label>\n                            </Box>\n                            <Box flex={1}>\n                              {/* There _should_ only be one field */}\n                              {subType.fields.map((subTypeField) => (\n                                <ValueInput\n                                  key={subTypeField.name}\n                                  onChange={(patchEvent) =>\n                                    handleInnerValueChange(patchEvent, item._key)\n                                  }\n                                  onBlur={onBlur}\n                                  // We don't want the array item to open onFocus\n                                  onFocus={() => null}\n                                  path={[{_key: item._key}, subTypeField.name]}\n                                  parent={item}\n                                  readOnly={readOnly}\n                                  type={subTypeField}\n                                  value={item.value}\n                                  level={props.level + 1}\n                                  markers={[]}\n                                />\n                              ))}\n                            </Box>\n                          </>\n                        ) : null}\n                      </Flex>\n                    ))}\n                  {presence?.length > 0 ? (\n                    <FieldPresence maxAvatars={1} presence={presence} />\n                  ) : null}\n                  {invalidKeys.includes(item._key) ? (\n                    <FormFieldValidationStatus __unstable_markers={validationMarkers} />\n                  ) : null}\n                  <Button\n                    mode=\"ghost\"\n                    icon={RemoveIcon}\n                    tone=\"critical\"\n                    onClick={() => handleUnsetByKey(item._key)}\n                  />\n                </Flex>\n              </Card>\n            ))}\n          </Stack>\n        </Card>\n      ) : null}\n\n      {languagesOutOfOrder.length > 0 ? (\n        <Button\n          tone=\"caution\"\n          disabled={languagesOutOfOrder.length > languages.length}\n          icon={RestoreIcon}\n          onClick={() => handleRestoreOrder()}\n          text=\"Restore order of languages\"\n        />\n      ) : null}\n\n      {languages.length > 0 ? (\n        <Stack space={2}>\n          {/* No more than 5 columns */}\n          <Grid columns={Math.min(languages.length, 5)} gap={2}>\n            {languages.map((language) => (\n              <Button\n                key={language.id}\n                tone=\"primary\"\n                mode=\"ghost\"\n                fontSize={1}\n                disabled={readOnly || value?.find((item) => item._key === language.id)}\n                text={language.id.toUpperCase()}\n                icon={AddIcon}\n                onClick={() => handleAddLanguage(language.id)}\n              />\n            ))}\n          </Grid>\n          <Button\n            tone=\"primary\"\n            mode=\"ghost\"\n            disabled={readOnly || value?.length >= languages?.length}\n            text={value?.length ? `Add missing languages` : `Add all languages`}\n            onClick={() => handleAddLanguage()}\n          />\n        </Stack>\n      ) : null}\n\n      {showNativeInput ? <NestedFormBuilder {...props} type={type} /> : null}\n    </Stack>\n  )\n})\n\nexport default withDocument(LanguageArrayWrapper)\n"],"mappings":"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"}

package/lib/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _internationalizedArray = require("./internationalizedArray");
+
+var _default = _internationalizedArray.internationalizedArray;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["internationalizedArray"],"sources":["../src/index.ts"],"sourcesContent":["import {internationalizedArray} from './internationalizedArray'\n\nexport default internationalizedArray\n"],"mappings":";;;;;;;AAAA;;eAEeA,8C"}

package/lib/internationalizedArray.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.internationalizedArray = internationalizedArray;
+
+var _LanguageArray = _interopRequireDefault(require("./LanguageArray"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function internationalizedArray(config) {
+  var _config$name = config.name,
+      name = _config$name === void 0 ? "title" : _config$name,
+      _config$type = config.type,
+      type = _config$type === void 0 ? "string" : _config$type,
+      _config$languages = config.languages,
+      languages = _config$languages === void 0 ? [] : _config$languages,
+      _config$showNativeInp = config.showNativeInput,
+      showNativeInput = _config$showNativeInp === void 0 ? false : _config$showNativeInp;
+  return {
+    name,
+    type: 'array',
+    inputComponent: _LanguageArray.default,
+    options: {
+      languages,
+      showNativeInput
+    },
+    of: [{
+      type: 'object',
+      fields: [{
+        name: 'value',
+        type
+      }],
+      preview: {
+        select: {
+          title: 'value',
+          key: '_key'
+        },
+
+        prepare(_ref) {
+          var title = _ref.title,
+              key = _ref.key;
+          return {
+            title,
+            subtitle: key.toUpperCase()
+          };
+        }
+
+      }
+    }],
+    validation: Rule => Rule.max(languages.length).custom((value, context) => {
+      var languages = context.type.options.languages;
+      var nonLanguageKeys = value !== null && value !== void 0 && 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
+          }))
+        };
+      } // Ensure there's no duplicate `language` fields
+
+
+      var valuesByLanguage = value !== null && value !== void 0 && value.length ? value.filter(item => Boolean(item === null || item === void 0 ? void 0 : item._key)).reduce((acc, cur) => {
+        if (acc[cur._key]) {
+          return _objectSpread(_objectSpread({}, acc), {}, {
+            [cur._key]: [...acc[cur._key], cur]
+          });
+        }
+
+        return _objectSpread(_objectSpread({}, acc), {}, {
+          [cur._key]: [cur]
+        });
+      }, {}) : {};
+      var duplicateValues = Object.values(valuesByLanguage).filter(item => (item === null || item === void 0 ? void 0 : 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;
+    })
+  };
+}
+//# sourceMappingURL=internationalizedArray.js.map

package/lib/internationalizedArray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internationalizedArray.js","names":["internationalizedArray","config","name","type","languages","showNativeInput","inputComponent","LanguageArray","options","of","fields","preview","select","title","key","prepare","subtitle","toUpperCase","validation","Rule","max","length","custom","value","context","nonLanguageKeys","filter","item","find","language","_key","id","message","paths","map","valuesByLanguage","Boolean","reduce","acc","cur","duplicateValues","Object","values","flat"],"sources":["../src/internationalizedArray.ts"],"sourcesContent":["import {ArrayConfig, Value} from './types'\nimport LanguageArray from './LanguageArray'\n\nexport function internationalizedArray(config: ArrayConfig) {\n  const {name = `title`, type = `string`, languages = [], showNativeInput = false} = config\n\n  return {\n    name,\n    type: 'array',\n    inputComponent: LanguageArray,\n    options: {\n      languages,\n      showNativeInput,\n    },\n    of: [\n      {\n        type: 'object',\n        fields: [{name: 'value', type}],\n        preview: {\n          select: {title: 'value', key: '_key'},\n          prepare({title, key}) {\n            return {\n              title,\n              subtitle: key.toUpperCase(),\n            }\n          },\n        },\n      },\n    ],\n    validation: (Rule) =>\n      Rule.max(languages.length).custom((value: Value[], context) => {\n        const {languages} = context.type.options\n\n        const nonLanguageKeys = value?.length\n          ? value.filter((item) => !languages.find((language) => item._key === language.id))\n          : []\n\n        if (nonLanguageKeys.length) {\n          return {\n            message: `Array item keys must be valid languages registered to the field type`,\n            paths: nonLanguageKeys.map((item) => ({_key: item._key})),\n          }\n        }\n\n        // Ensure there's no duplicate `language` fields\n        const valuesByLanguage = value?.length\n          ? value\n              .filter((item) => Boolean(item?._key))\n              .reduce((acc, cur) => {\n                if (acc[cur._key]) {\n                  return {...acc, [cur._key]: [...acc[cur._key], cur]}\n                }\n\n                return {\n                  ...acc,\n                  [cur._key]: [cur],\n                }\n              }, {})\n          : {}\n\n        const duplicateValues = Object.values(valuesByLanguage)\n          .filter((item) => item?.length > 1)\n          .flat()\n\n        if (duplicateValues.length) {\n          return {\n            message: 'There can only be one field per language',\n            paths: duplicateValues.map((item) => ({_key: item._key})),\n          }\n        }\n\n        return true\n      }),\n  }\n}\n"],"mappings":"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"}

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../src/types.ts"],"sourcesContent":["export type ArrayConfig = Options & {\n  name: string\n  type: 'string' | 'number' | 'boolean' | 'text'\n}\n\nexport type Value = {\n  _key: string\n  value?: string\n}\n\nexport type Language = {\n  id: string\n  title: string\n}\n\nexport type Options = {\n  languages: Language[]\n  showNativeInput: boolean\n}\n"],"mappings":""}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "sanity-plugin-internationalized-array",
+  "version": "0.0.1",
+  "description": "Store localised fields in an array to save on attributes",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "sanipack build",
+    "verify": "sanipack verify",
+    "watch": "sanipack build --watch",
+    "_postinstall": "husky install",
+    "prepublishOnly": "pinst --disable && sanipack build && sanipack verify",
+    "postpublish": "pinst --enable",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint:fix"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/sanity-io/sanity-plugin-internationalized-array.git"
+  },
+  "keywords": [
+    "sanity",
+    "sanity-plugin"
+  ],
+  "author": "Sanity.io <hello@sanity.io>",
+  "license": "MIT",
+  "dependencies": {
+    "@nrk/sanity-plugin-nrkno-odd-utils": "^1.0.11",
+    "@sanity/icons": "^1.3.1",
+    "@sanity/ui": "^0.37.12"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "@sanity/eslint-config-studio": "^2.0.0",
+    "eslint": "8.19.0",
+    "eslint-config-prettier": "^8.5.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",
+    "prettier": "^2.7.1",
+    "sanipack": "^2.1.0",
+    "typescript": "^4.7.4"
+  },
+  "bugs": {
+    "url": "https://github.com/sanity-io/sanity-plugin-internationalized-array/issues"
+  },
+  "homepage": "https://github.com/sanity-io/sanity-plugin-internationalized-array#readme"
+}

package/sanity.json

@@ -0,0 +1,7 @@
+{
+  "paths": {
+    "source": "./src",
+    "compiled": "./lib"
+  },
+  "parts": []
+}

package/src/LanguageArray/ValueInput.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import {FormBuilderInput} from '@sanity/form-builder/lib/FormBuilderInput'
+
+export default function ValueInput(props) {
+  return <FormBuilderInput {...props} />
+}

package/src/LanguageArray/index.tsx

@@ -0,0 +1,291 @@
+import React, {forwardRef, useCallback, useMemo} from 'react'
+import {useUnsetInputComponent, NestedFormBuilder} from '@nrk/sanity-plugin-nrkno-odd-utils'
+import {Code, Text, Card, Label, Flex, Box, Stack, Button, Grid} from '@sanity/ui'
+import {withDocument} from 'part:@sanity/form-builder'
+import {PatchEvent, setIfMissing, insert, unset, set} from '@sanity/form-builder/PatchEvent'
+import {AddIcon, RemoveIcon, RestoreIcon} from '@sanity/icons'
+import {FormFieldValidationStatus} from '@sanity/base/components'
+import {FieldPresence} from '@sanity/base/presence'
+
+import ValueInput from './ValueInput'
+
+const schemaExample = {
+  name: 'title',
+  type: 'localisedArray',
+  options: {
+    languages: [
+      {id: 'en', title: 'English'},
+      {id: 'no', title: 'Norsk'},
+    ],
+  },
+}
+
+type Value = {
+  _key: string
+  value?: string
+}
+
+type Language = {
+  id: string
+  title: string
+}
+
+type Options = {
+  languages: Language[]
+  showNativeInput: boolean
+}
+
+const DEFAULT_OPTIONS = {
+  languages: [],
+  showNativeInput: false,
+}
+
+const LanguageArrayWrapper = forwardRef(function CustomComponent(props, ref) {
+  const {onChange, onBlur, readOnly, presence, markers} = props
+  const value: Value[] = props?.value
+
+  // IMPORTANT: leaving out will cause the browser to lock up in an infinite loop
+  const type = useUnsetInputComponent(props.type)
+  const options: Options = type?.options ?? DEFAULT_OPTIONS
+  const {languages, showNativeInput} = 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(PatchEvent.from(setIfMissing([]), ...insertions))
+    },
+    [languages, onChange, value]
+  )
+
+  const handleUnsetByKey = useCallback(
+    (_key) => {
+      onChange(PatchEvent.from(unset([{_key}])))
+    },
+    [onChange]
+  )
+
+  const handleInnerValueChange = useCallback(
+    (patchEvent: PatchEvent, _key: string) => {
+      const inputValue = patchEvent.patches[0]?.value
+      const inputPath = [{_key}, `value`]
+
+      onChange(PatchEvent.from(inputValue ? set(inputValue, inputPath) : unset(inputPath)))
+    },
+    [onChange]
+  )
+
+  // TODO: This is lazy, reordering and re-setting the whole array – it should be surgical
+  const handleRestoreOrder = useCallback(() => {
+    // Create a new value array in the correct order
+    const updatedValue = value.reduce((acc, v) => {
+      const newIndex = languages.findIndex((l) => l.id === v._key)
+
+      acc[newIndex] = v
+
+      return acc
+    }, [])
+
+    onChange(PatchEvent.from(unset(), set(updatedValue)))
+  }, [languages, onChange, value])
+
+  // 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])
+
+  // Check options are supplied and valid
+  const languagesAreValid = useMemo(
+    () => languages?.length && languages.every((item) => item.id && item.title),
+    [languages]
+  )
+
+  if (!languagesAreValid) {
+    return (
+      <Card tone="caution" border radius={2} padding={3}>
+        <Stack space={4}>
+          <Text>
+            An array of language objects must be passed into the <code>{type.name}</code> field as
+            options, 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>
+    )
+  }
+
+  const validationMarkers = markers?.length
+    ? markers.filter((mark) => mark.type === `validation`)
+    : []
+  const invalidKeys = validationMarkers
+    .map((mark) => mark.path)
+    .flat()
+    .map((item) => item._key)
+
+  return (
+    <Stack space={2}>
+      {/* Loop over the values */}
+      {value?.length > 0 ? (
+        <Card padding={1} border radius={1}>
+          <Stack space={1}>
+            {value.map((item) => (
+              <Card
+                paddingY={1}
+                paddingX={2}
+                key={item._key}
+                tone={
+                  // TODO: Move this logic somewhere else
+                  invalidKeys.includes(item._key)
+                    ? `critical`
+                    : undefined || languagesOutOfOrder.find((l) => l._key === item._key)
+                    ? `caution`
+                    : undefined
+                }
+              >
+                <Flex gap={3} align="center">
+                  {/* To render each individual field in this type */}
+                  {type?.of?.length > 0 &&
+                    type?.of.map((subType) => (
+                      <Flex key={subType.name} flex={1} align="center" gap={2}>
+                        {subType?.fields?.length > 0 ? (
+                          <>
+                            <Box>
+                              <Label>{item._key}</Label>
+                            </Box>
+                            <Box flex={1}>
+                              {/* There _should_ only be one field */}
+                              {subType.fields.map((subTypeField) => (
+                                <ValueInput
+                                  key={subTypeField.name}
+                                  onChange={(patchEvent) =>
+                                    handleInnerValueChange(patchEvent, item._key)
+                                  }
+                                  onBlur={onBlur}
+                                  // We don't want the array item to open onFocus
+                                  onFocus={() => null}
+                                  path={[{_key: item._key}, subTypeField.name]}
+                                  parent={item}
+                                  readOnly={readOnly}
+                                  type={subTypeField}
+                                  value={item.value}
+                                  level={props.level + 1}
+                                  markers={[]}
+                                />
+                              ))}
+                            </Box>
+                          </>
+                        ) : null}
+                      </Flex>
+                    ))}
+                  {presence?.length > 0 ? (
+                    <FieldPresence maxAvatars={1} presence={presence} />
+                  ) : null}
+                  {invalidKeys.includes(item._key) ? (
+                    <FormFieldValidationStatus __unstable_markers={validationMarkers} />
+                  ) : null}
+                  <Button
+                    mode="ghost"
+                    icon={RemoveIcon}
+                    tone="critical"
+                    onClick={() => handleUnsetByKey(item._key)}
+                  />
+                </Flex>
+              </Card>
+            ))}
+          </Stack>
+        </Card>
+      ) : null}
+
+      {languagesOutOfOrder.length > 0 ? (
+        <Button
+          tone="caution"
+          disabled={languagesOutOfOrder.length > languages.length}
+          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 || 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?.length >= languages?.length}
+            text={value?.length ? `Add missing languages` : `Add all languages`}
+            onClick={() => handleAddLanguage()}
+          />
+        </Stack>
+      ) : null}
+
+      {showNativeInput ? <NestedFormBuilder {...props} type={type} /> : null}
+    </Stack>
+  )
+})
+
+export default withDocument(LanguageArrayWrapper)

package/src/index.ts

@@ -0,0 +1,3 @@
+import {internationalizedArray} from './internationalizedArray'
+
+export default internationalizedArray

package/src/internationalizedArray.ts

@@ -0,0 +1,75 @@
+import {ArrayConfig, Value} from './types'
+import LanguageArray from './LanguageArray'
+
+export function internationalizedArray(config: ArrayConfig) {
+  const {name = `title`, type = `string`, languages = [], showNativeInput = false} = config
+
+  return {
+    name,
+    type: 'array',
+    inputComponent: LanguageArray,
+    options: {
+      languages,
+      showNativeInput,
+    },
+    of: [
+      {
+        type: 'object',
+        fields: [{name: 'value', type}],
+        preview: {
+          select: {title: 'value', key: '_key'},
+          prepare({title, key}) {
+            return {
+              title,
+              subtitle: key.toUpperCase(),
+            }
+          },
+        },
+      },
+    ],
+    validation: (Rule) =>
+      Rule.max(languages.length).custom((value: Value[], context) => {
+        const {languages} = context.type.options
+
+        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})),
+          }
+        }
+
+        // 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()
+
+        if (duplicateValues.length) {
+          return {
+            message: 'There can only be one field per language',
+            paths: duplicateValues.map((item) => ({_key: item._key})),
+          }
+        }
+
+        return true
+      }),
+  }
+}

package/src/types.ts

@@ -0,0 +1,19 @@
+export type ArrayConfig = Options & {
+  name: string
+  type: 'string' | 'number' | 'boolean' | 'text'
+}
+
+export type Value = {
+  _key: string
+  value?: string
+}
+
+export type Language = {
+  id: string
+  title: string
+}
+
+export type Options = {
+  languages: Language[]
+  showNativeInput: boolean
+}