@srothgan/sanity-plugin-autocomplete-input 3.0.0

package/README.md

@@ -0,0 +1,121 @@
+# @srothgan/sanity-plugin-autocomplete-input
+
+[![npm version](https://img.shields.io/npm/v/@srothgan/sanity-plugin-autocomplete-input)](https://www.npmjs.com/package/@srothgan/sanity-plugin-autocomplete-input)
+[![Original Repository](https://img.shields.io/badge/original-LiamMartens%2Fsanity--plugin--autocomplete--input-blue)](https://github.com/LiamMartens/sanity-plugin-autocomplete-input)
+
+![example](https://raw.githubusercontent.com/LiamMartens/sanity-plugin-autocomplete-input/main/docs/img/example.gif)
+
+This plugin is similar to the [Autocomplete Tags Plugin](https://www.sanity.io/plugins/autocomplete-tags), but it acts as a single text input as opposed to an array of tags. The input can also be customized to change the autocomplete options.
+
+**Successor to [sanity-plugin-autocomplete-input](https://github.com/LiamMartens/sanity-plugin-autocomplete-input)**  
+Original by [@LiamMartens](https://github.com/LiamMartens) (last updated 2023).  
+This maintained fork adds Sanity v4 & v5 compatibility and modern tooling.
+
+> **Note**: A PR with these changes was submitted to the original repository.  
+> If the original becomes active again, this fork may redirect users back.
+
+## Compatibility
+
+- **v3.x:** Sanity Studio v4 & v5 (Node.js v20.19+, React 18 or 19)
+  - Fully compatible with both Sanity v4 and v5
+  - Supports React 18 (Sanity v4) and React 19 (Sanity v5)
+- **v2.x:** Sanity Studio v3 (Node.js v18+, React 18)
+- **v1.x:** Sanity Studio v2
+
+## Installation
+
+```
+npm install --save @srothgan/sanity-plugin-autocomplete-input
+```
+
+or
+
+```
+yarn add @srothgan/sanity-plugin-autocomplete-input
+```
+
+## Usage
+
+Add it as a plugin in sanity.config.ts (or .js):
+
+```js
+import { autocompletInput } from "@srothgan/sanity-plugin-autocomplete-input";
+
+export default defineConfig({
+  // ...
+  plugins: [autocompletInput()],
+});
+```
+
+You can just use it as a schema type. To customize the autocomplete list you have 3 options:
+
+1. Specify the `autocompleteFieldPath` option, which the plugin will use to look for documents with the same field path to aggregate the option values.
+2. Manually specify options in the schema option
+3. Specify your own GROQ query returning a `[{ "value": "foobar" }]` format (you can use a `transform` function if this is not achievable using GROQ only)
+
+```javascript
+export default {
+  fields: [
+    {
+      name: "autocomplete-input",
+      type: "autocomplete",
+      options: {
+        // specify field path
+        autocompleteFieldPath: "title",
+        // this option can be used to disable using "new" values
+        disableNew: false,
+        // manually specify options
+        options: [{ value: "Option 1" }, { value: "Option 2" }],
+        // specify custom groq query
+        groq: {
+          query: '*[_type == $type] { "value": title }',
+          params: {
+            type: "page",
+          },
+          transform: (values) => values,
+        },
+      },
+    },
+  ],
+};
+```
+
+### Advanced GROQ parameters
+
+It is also possible to refer to the current parent value (for a top-level field this would be the current document) by passing a function to the `params` option:
+
+```javascript
+export default {
+  fields: [
+    {
+      name: "autocomplete-input",
+      type: "autocomplete",
+      options: {
+        groq: {
+          query: "*[_id != $docId]",
+          params: (parent) => ({
+            docId: parent?._id,
+          }),
+        },
+      },
+    },
+  ],
+};
+```
+
+## Differences from Original
+
+This maintained fork includes the following enhancements:
+
+### Updated Dependencies
+- **Sanity v4 & v5 Support**: Fully compatible with both Sanity Studio v4 and v5
+- **React 18 & 19 Support**: Works with React 18 (Sanity v4) and React 19 (Sanity v5)
+- **Modern Build Tooling**: Migrated from Babel to SWC for faster builds
+- **TypeScript 5.3**: Updated to latest TypeScript with improved type safety
+
+### Maintained & Active
+- Regular dependency updates for security and compatibility
+- Active issue tracking and bug fixes
+- Community-driven improvements
+
+All original functionality and API remain unchanged for seamless migration.

package/lib/AutoCompleteInput.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { StringInputProps, StringSchemaType } from "sanity";
+import type { InputOptions } from "./types";
+export type AutocompleteSchemaType = Omit<StringSchemaType, "options"> & {
+    options?: StringSchemaType["options"] & InputOptions;
+};
+export type InputProps = StringInputProps<AutocompleteSchemaType>;
+export declare const AutoCompleteInput: (props: InputProps) => React.JSX.Element;

package/lib/AutoCompleteInput.js

@@ -0,0 +1,87 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import get from "just-safe-get";
+import compact from "just-compact";
+import unique from "just-unique";
+import { Autocomplete, Text, Card } from "@sanity/ui";
+import { PatchEvent, set, unset, useClient, useFormValue } from "sanity";
+export const AutoCompleteInput = (props)=>{
+    const { id, schemaType, value, validationError, readOnly, onChange } = props;
+    const sanityClient = useClient();
+    const documentValue = useFormValue([]);
+    const [loading, setLoading] = useState(false);
+    const [query, setQuery] = React.useState("");
+    const [options, setOptions] = React.useState([]);
+    const canCreateNew = schemaType.options?.disableNew !== true;
+    const optionsList = useMemo(()=>{
+        const uniqueOptions = unique(options.map(({ value })=>value), false, true);
+        const queryInOptions = uniqueOptions.find((value)=>value === query);
+        if (!queryInOptions && canCreateNew) {
+            return [
+                ...uniqueOptions.map((value)=>({
+                        value
+                    })),
+                {
+                    value: query,
+                    isNew: true
+                }
+            ];
+        }
+        return uniqueOptions.map((value)=>({
+                value
+            }));
+    }, [
+        query,
+        options,
+        canCreateNew
+    ]);
+    const handleQueryChange = useCallback((query)=>{
+        setQuery(query ?? '');
+    }, []);
+    const handleChange = useCallback((value)=>{
+        onChange(PatchEvent.from(value ? set(value) : unset()));
+    }, [
+        onChange
+    ]);
+    useEffect(()=>{
+        if (schemaType.options?.options) {
+            setLoading(false);
+            setOptions(schemaType.options.options);
+        } else {
+            const path = schemaType.options?.autocompleteFieldPath ?? "title";
+            const { query, transform, params = {} } = schemaType.options?.groq || {
+                query: `*[defined(${path})] { "value": ${path} }`
+            };
+            const resolvedParams = typeof params === "function" ? params(documentValue) : params;
+            sanityClient.fetch(query, resolvedParams).then((results)=>{
+                if (Array.isArray(results)) {
+                    const transformedResults = transform ? transform(results) : results;
+                    const compactedValues = compact(transformedResults.map((doc)=>get(doc, "value")));
+                    setLoading(false);
+                    setOptions(compactedValues.map((value)=>({
+                            value: String(value)
+                        })));
+                }
+            });
+        }
+    }, [
+        query,
+        schemaType.options
+    ]);
+    return /*#__PURE__*/ React.createElement(Autocomplete, {
+        id: id,
+        readOnly: readOnly ?? false,
+        customValidity: validationError,
+        loading: loading,
+        disabled: loading,
+        options: optionsList,
+        value: value ?? "",
+        onChange: handleChange,
+        onQueryChange: handleQueryChange,
+        renderOption: (option)=>/*#__PURE__*/ React.createElement(Card, {
+                as: "button",
+                padding: 3,
+                tone: option.isNew ? "primary" : "default",
+                shadow: 1
+            }, option.isNew ? canCreateNew && /*#__PURE__*/ React.createElement(Text, null, 'Create new option "', option.value, '"') : /*#__PURE__*/ React.createElement(Text, null, option.value))
+    });
+};

package/lib/index.d.ts

@@ -0,0 +1 @@
+export declare const autocompletInput: import("sanity").Plugin<void>;

package/lib/index.js

@@ -0,0 +1,10 @@
+import { definePlugin } from "sanity";
+import { autocompleteString } from "./schemas/autocompleteString";
+export const autocompletInput = definePlugin({
+    name: "sanity-plugin-autocomplete-input",
+    schema: {
+        types: [
+            autocompleteString
+        ]
+    }
+});

package/lib/schemas/autocompleteString.d.ts

@@ -0,0 +1,20 @@
+import { StringDefinition } from "sanity";
+import type { InputOptions } from "../types";
+declare const typeName: "autocomplete";
+/**
+ * @public
+ */
+export interface AutocompleteStringDefinition extends Omit<StringDefinition, "type" | "fields" | "options"> {
+    type: typeof typeName;
+    options?: InputOptions;
+}
+declare module "@sanity/types" {
+    interface IntrinsicDefinitions {
+        autocomplete: AutocompleteStringDefinition;
+    }
+}
+export declare const autocompleteString: {
+    type: "string";
+    name: "autocomplete";
+} & Omit<StringDefinition, "preview">;
+export {};

package/lib/schemas/autocompleteString.js

@@ -0,0 +1,11 @@
+import { defineType } from "sanity";
+import { AutoCompleteInput } from "../AutoCompleteInput";
+const typeName = "autocomplete";
+export const autocompleteString = defineType({
+    name: typeName,
+    type: "string",
+    title: "Autocomplete",
+    components: {
+        input: AutoCompleteInput
+    }
+});

package/lib/src/AutoCompleteInput.js

@@ -0,0 +1,87 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import get from "just-safe-get";
+import compact from "just-compact";
+import unique from "just-unique";
+import { Autocomplete, Text, Card } from "@sanity/ui";
+import { PatchEvent, set, unset, useClient, useFormValue } from "sanity";
+export const AutoCompleteInput = (props)=>{
+    const { id, schemaType, value, validationError, readOnly, onChange } = props;
+    const sanityClient = useClient();
+    const documentValue = useFormValue([]);
+    const [loading, setLoading] = useState(false);
+    const [query, setQuery] = React.useState("");
+    const [options, setOptions] = React.useState([]);
+    const canCreateNew = schemaType.options?.disableNew !== true;
+    const optionsList = useMemo(()=>{
+        const uniqueOptions = unique(options.map(({ value })=>value), false, true);
+        const queryInOptions = uniqueOptions.find((value)=>value === query);
+        if (!queryInOptions && canCreateNew) {
+            return [
+                ...uniqueOptions.map((value)=>({
+                        value
+                    })),
+                {
+                    value: query,
+                    isNew: true
+                }
+            ];
+        }
+        return uniqueOptions.map((value)=>({
+                value
+            }));
+    }, [
+        query,
+        options,
+        canCreateNew
+    ]);
+    const handleQueryChange = useCallback((query)=>{
+        setQuery(query ?? '');
+    }, []);
+    const handleChange = useCallback((value)=>{
+        onChange(PatchEvent.from(value ? set(value) : unset()));
+    }, [
+        onChange
+    ]);
+    useEffect(()=>{
+        if (schemaType.options?.options) {
+            setLoading(false);
+            setOptions(schemaType.options.options);
+        } else {
+            const path = schemaType.options?.autocompleteFieldPath ?? "title";
+            const { query, transform, params = {} } = schemaType.options?.groq || {
+                query: `*[defined(${path})] { "value": ${path} }`
+            };
+            const resolvedParams = typeof params === "function" ? params(documentValue) : params;
+            sanityClient.fetch(query, resolvedParams).then((results)=>{
+                if (Array.isArray(results)) {
+                    const transformedResults = transform ? transform(results) : results;
+                    const compactedValues = compact(transformedResults.map((doc)=>get(doc, "value")));
+                    setLoading(false);
+                    setOptions(compactedValues.map((value)=>({
+                            value: String(value)
+                        })));
+                }
+            });
+        }
+    }, [
+        query,
+        schemaType.options
+    ]);
+    return /*#__PURE__*/ React.createElement(Autocomplete, {
+        id: id,
+        readOnly: readOnly ?? false,
+        customValidity: validationError,
+        loading: loading,
+        disabled: loading,
+        options: optionsList,
+        value: value ?? "",
+        onChange: handleChange,
+        onQueryChange: handleQueryChange,
+        renderOption: (option)=>/*#__PURE__*/ React.createElement(Card, {
+                as: "button",
+                padding: 3,
+                tone: option.isNew ? "primary" : "default",
+                shadow: 1
+            }, option.isNew ? canCreateNew && /*#__PURE__*/ React.createElement(Text, null, 'Create new option "', option.value, '"') : /*#__PURE__*/ React.createElement(Text, null, option.value))
+    });
+};

package/lib/src/index.js

@@ -0,0 +1,10 @@
+import { definePlugin } from "sanity";
+import { autocompleteString } from "./schemas/autocompleteString";
+export const autocompletInput = definePlugin({
+    name: "sanity-plugin-autocomplete-input",
+    schema: {
+        types: [
+            autocompleteString
+        ]
+    }
+});

package/lib/src/schemas/autocompleteString.js

@@ -0,0 +1,11 @@
+import { defineType } from "sanity";
+import { AutoCompleteInput } from "../AutoCompleteInput";
+const typeName = "autocomplete";
+export const autocompleteString = defineType({
+    name: typeName,
+    type: "string",
+    title: "Autocomplete",
+    components: {
+        input: AutoCompleteInput
+    }
+});

package/lib/src/types/InputOptions.js

@@ -0,0 +1 @@
+export { };

package/lib/src/types/Option.js

@@ -0,0 +1 @@
+export { };

package/lib/src/types/index.js

@@ -0,0 +1 @@
+export { };

package/lib/types/InputOptions.d.ts

@@ -0,0 +1,11 @@
+import type { Option } from "./Option";
+export type InputOptions<Parent = Record<string, unknown>, Params = Record<string, unknown>> = {
+    autocompleteFieldPath?: string;
+    disableNew?: boolean;
+    options?: Option[];
+    groq?: {
+        query: string;
+        params?: Params | ((parent?: Parent) => Params);
+        transform?: (result: unknown) => Option[];
+    };
+};

package/lib/types/InputOptions.js

@@ -0,0 +1 @@
+export { };

package/lib/types/Option.d.ts

@@ -0,0 +1,3 @@
+export type Option = {
+    value: string;
+};

package/lib/types/Option.js

@@ -0,0 +1 @@
+export { };

package/lib/types/index.d.ts

@@ -0,0 +1,2 @@
+export type { InputOptions } from "./InputOptions";
+export type { Option } from "./Option";

package/lib/types/index.js

@@ -0,0 +1 @@
+export { };

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@srothgan/sanity-plugin-autocomplete-input",
+  "version": "3.0.0",
+  "license": "MIT",
+  "type": "module",
+  "types": "./lib/index.d.ts",
+  "module": "./lib/index.js",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
+    }
+  },
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "files": [
+    "lib"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/srothgan/srothgan-sanity-plugin-autocomplete-input"
+  },
+  "bugs": {
+    "url": "https://github.com/srothgan/srothgan-sanity-plugin-autocomplete-input/issues"
+  },
+  "author": {
+    "name": "Simon Rothgang",
+    "email": "simonrothgang@gmail.com"
+  },
+  "contributors": [
+    {
+      "name": "Liam Martens",
+      "email": "liam@freighter.studio",
+      "url": "https://github.com/LiamMartens"
+    }
+  ],
+  "keywords": ["sanity-plugin", "autocomplete", "v4", "v5", "maintained", "input", "sanity-v5"],
+  "devDependencies": {
+    "@sanity/ui": "^3.1.11",
+    "@swc/cli": "^0.7.9",
+    "@swc/core": "^1.3.99",
+    "@types/node": "^20.19.0",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "sanity": "^5.1.0",
+    "styled-components": "^6.1.19",
+    "typescript": "~5.3.2"
+  },
+  "dependencies": {
+    "just-compact": "^3.2.0",
+    "just-pick": "^4.2.0",
+    "just-safe-get": "^4.2.0",
+    "just-unique": "^4.2.0",
+    "npm-run-all": "^4.1.5"
+  },
+  "scripts": {
+    "build:js": "swc ./src -d ./lib --strip-leading-paths",
+    "build:types": "tsc -p .",
+    "build": "run-p build:*"
+  }
+}