@madebywild/sanity-link-field 0.0.1

package/README.md

@@ -0,0 +1 @@
+# @madebywild/sanity-link-field

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import { type FieldOptions, type InternalLinksQueryResult, type PluginConfig, typeName } from "./types";
+declare function buildLinkPreview({ type, customText, internalUri, internalTitle, externalUrl, email, phone, fileName, }: {
+    type?: string;
+    customText?: string;
+    internalUri?: string;
+    internalTitle?: string;
+    externalUrl?: string;
+    email?: string;
+    phone?: string;
+    fileName?: string;
+}): {
+    title: string;
+    subtitle: string | undefined;
+    media: () => import("react/jsx-runtime").JSX.Element;
+} | {
+    title: string;
+    media: () => import("react/jsx-runtime").JSX.Element;
+    subtitle?: undefined;
+};
+declare const wildSanityLinkFieldPlugin: import("sanity").Plugin<PluginConfig>;
+export { wildSanityLinkFieldPlugin, buildLinkPreview, typeName, type FieldOptions, type InternalLinksQueryResult, type PluginConfig, };

package/dist/index.js

@@ -0,0 +1,180 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { requiredIf, visibleIf } from "@madebywild/sanity-utils";
+import { defineField, definePlugin, defineType } from "sanity";
+import { LinkInput } from "./input";
+import { typeName } from "./types";
+const visibleIfType = visibleIf("type");
+const requiredIfType = requiredIf("type");
+function buildLinkPreview({ type, customText, internalUri, internalTitle, externalUrl, email, phone, fileName, }) {
+    switch (type) {
+        case "internal": {
+            return {
+                title: customText ?? internalTitle ?? "Internal Link",
+                subtitle: internalUri,
+                media: () => _jsx(_Fragment, { children: "\uD83D\uDCC4" }),
+            };
+        }
+        case "external":
+            return {
+                title: customText ?? "External Link",
+                subtitle: externalUrl,
+                media: () => _jsx(_Fragment, { children: "\uD83C\uDF0D" }),
+            };
+        case "email":
+            return {
+                title: customText ?? "Email Link",
+                subtitle: email,
+                media: () => _jsx(_Fragment, { children: "\uD83D\uDCE7" }),
+            };
+        case "phone":
+            return {
+                title: customText ?? "Phone Link",
+                subtitle: phone,
+                media: () => _jsx(_Fragment, { children: "\u260E\uFE0F" }),
+            };
+        case "file":
+            return {
+                title: customText ?? "File Link",
+                subtitle: fileName,
+                media: () => _jsx(_Fragment, { children: "\uD83D\uDCC3" }),
+            };
+        default:
+            return {
+                title: customText ?? "Empty Link",
+                media: () => _jsx(_Fragment, { children: "\u26D3\uFE0F\u200D\uD83D\uDCA5" }),
+            };
+    }
+}
+const wildSanityLinkFieldPlugin = definePlugin((config) => {
+    return {
+        name: "@madebywild/sanity-link-field",
+        schema: {
+            types: [
+                defineType({
+                    name: typeName,
+                    type: "object",
+                    title: "Link",
+                    description: "Link to an internal page, external URL and more.",
+                    icon: () => _jsx(_Fragment, { children: "\uD83D\uDD17" }),
+                    components: {
+                        input: (props) => _jsx(LinkInput, { config: config, ...props }),
+                    },
+                    fields: [
+                        defineField({
+                            name: "type",
+                            type: "string",
+                            title: "Link Type",
+                            options: {
+                                layout: "dropdown",
+                                list: [
+                                    { title: "📄 Internal Link", value: "internal" },
+                                    { title: "🌍 External Link", value: "external" },
+                                    { title: "📧 Email", value: "email" },
+                                    { title: "☎️ Phone", value: "phone" },
+                                    { title: "📃 File", value: "file" },
+                                ],
+                            },
+                        }),
+                        defineField({
+                            name: "external",
+                            type: "url",
+                            title: "External Link",
+                            ...visibleIfType("external"),
+                            ...requiredIfType("external"),
+                        }),
+                        defineField({
+                            name: "email",
+                            type: "string",
+                            title: "Email",
+                            ...visibleIfType("email"),
+                            ...requiredIfType("email"),
+                        }),
+                        defineField({
+                            name: "phone",
+                            type: "string",
+                            title: "Phone",
+                            ...visibleIfType("phone"),
+                            ...requiredIfType("phone"),
+                        }),
+                        defineField({
+                            name: "file",
+                            type: "file",
+                            title: "File",
+                            ...visibleIfType("file"),
+                            ...requiredIfType("file"),
+                        }),
+                        defineField({
+                            name: "canDownload",
+                            type: "boolean",
+                            title: "Downloadable",
+                            initialValue: true,
+                            description: "The file will be downloaded when the link is clicked.",
+                            options: { layout: "switch" },
+                            ...visibleIfType("file"),
+                            ...requiredIfType("file"),
+                        }),
+                        defineField({
+                            name: "internal",
+                            type: "object",
+                            title: "Internal Link",
+                            description: "Select a page and an optional section target.",
+                            ...visibleIfType("internal"),
+                            ...requiredIfType("internal"),
+                            options: {
+                                collapsed: false,
+                                collapsible: false,
+                            },
+                            fields: [
+                                defineField({
+                                    type: "reference",
+                                    weak: true,
+                                    name: "link",
+                                    title: "Page",
+                                    // Note: The custom input component will augment this and add more types.
+                                    // We need to keep at least one type here for Sanity to not complain.
+                                    to: config.internalLinkSchemaTypes ?? [{ type: "page" }],
+                                }),
+                                defineField({
+                                    type: "string",
+                                    name: "sectionTarget",
+                                    title: "Section Target",
+                                }),
+                            ],
+                        }),
+                        defineField({
+                            name: "customText",
+                            type: "string",
+                            title: "Custom text",
+                            description: "Will take precedence over inferred text.",
+                        }),
+                        defineField({
+                            name: "openInNewTab",
+                            type: "boolean",
+                            title: "Open in new tab",
+                            description: "Open the link in a new tab.",
+                            initialValue: false,
+                            options: { layout: "switch" },
+                            ...visibleIfType(["external", "internal"]),
+                        }),
+                    ],
+                    preview: {
+                        select: {
+                            type: "type",
+                            email: "email",
+                            phone: "phone",
+                            customText: "customText",
+                            fileName: "file.asset.originalFilename",
+                            externalUrl: "external",
+                            internalUri: "internal.uri.current",
+                            internalTitle: "internal.title",
+                        },
+                        prepare: (props) => {
+                            return buildLinkPreview(props);
+                        },
+                    },
+                }),
+            ],
+        },
+    };
+});
+export { wildSanityLinkFieldPlugin, buildLinkPreview, typeName, };

package/dist/input.d.ts

@@ -0,0 +1,6 @@
+import type { ObjectInputProps } from "sanity";
+import type { PluginConfig } from "./types";
+declare function LinkInput(props: ObjectInputProps & {
+    config: PluginConfig;
+}): import("react/jsx-runtime").JSX.Element;
+export { LinkInput };

package/dist/input.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AsyncAutocomplete } from "@madebywild/sanity-utils";
+import { Box, Card, Flex, Stack, Text } from "@sanity/ui";
+import * as changeCase from "change-case";
+import * as React from "react";
+import { MemberField, set, unset, useClient } from "sanity";
+function useFieldMember(members, fieldName) {
+    return React.useMemo(() => members.find((member) => member.kind === "field" && member.name === fieldName), [members, fieldName]);
+}
+function InternalLinkInput({ config, value, onChange, }) {
+    const linkQuery = config.internalLinkQuery;
+    const queryTransformer = config.internalLinkTransformer;
+    const client = useClient({ apiVersion: "2025-10-21" });
+    const [items, setItems] = React.useState([]);
+    const selectedItem = items.find((_) => _.value === value?.link?._ref);
+    React.useEffect(() => {
+        client
+            .fetch(linkQuery)
+            .then(queryTransformer)
+            .then((items) => items.sort((a, b) => a.label.localeCompare(b.label)))
+            .then(setItems);
+    }, [client, linkQuery, queryTransformer]);
+    return (_jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(AsyncAutocomplete, { placeholder: "Select page", defaultValue: value?.link?._ref, listItems: items, onChange: (value) => {
+                    const next = value ? set({ _ref: value, _type: "reference" }, ["link"]) : unset(["link"]);
+                    return onChange(next);
+                }, renderValue: (value, opt) => {
+                    return opt?.label ? changeCase.capitalCase(opt.label) : value;
+                }, renderOption: ({ label, uri }) => {
+                    return (_jsx(Card, { as: "button", children: _jsxs(Flex, { flex: 1, padding: 3, gap: 2, direction: "column", children: [_jsx(Text, { size: 2, children: changeCase.capitalCase(label) }), _jsx(Text, { size: 0, muted: true, children: uri })] }) }));
+                } }), selectedItem?.sections?.length ? (_jsx(AsyncAutocomplete, { placeholder: "Select section", defaultValue: value?.sectionTarget, listItems: selectedItem?.sections, onChange: (value) => {
+                    const next = value ? set(value, ["sectionTarget"]) : unset(["sectionTarget"]);
+                    return onChange(next);
+                }, renderValue: (value, opt) => {
+                    return opt?.label ? changeCase.capitalCase(opt.label) : value;
+                }, renderOption: ({ label }) => {
+                    return (_jsx(Card, { as: "button", children: _jsx(Box, { flex: 1, padding: 3, children: _jsx(Text, { size: 2, children: changeCase.capitalCase(label) }) }) }));
+                } })) : null] }));
+}
+function LinkInput(props) {
+    const options = props.schemaType.options;
+    const typeFieldMember = useFieldMember(props.members, "type");
+    const externalFieldMember = useFieldMember(props.members, "external");
+    const emailFieldMember = useFieldMember(props.members, "email");
+    const phoneFieldMember = useFieldMember(props.members, "phone");
+    const fileFieldMember = useFieldMember(props.members, "file");
+    const canDownloadFieldMember = useFieldMember(props.members, "canDownload");
+    const internalFieldMember = useFieldMember(props.members, "internal");
+    const customTextFieldMember = useFieldMember(props.members, "customText");
+    const openInNewTabFieldMember = useFieldMember(props.members, "openInNewTab");
+    return (_jsxs(Stack, { space: 4, children: [typeFieldMember && _jsx(MemberField, { member: typeFieldMember, ...props }), externalFieldMember && _jsx(MemberField, { member: externalFieldMember, ...props }), emailFieldMember && _jsx(MemberField, { member: emailFieldMember, ...props }), phoneFieldMember && _jsx(MemberField, { member: phoneFieldMember, ...props }), fileFieldMember && _jsx(MemberField, { member: fileFieldMember, ...props }), canDownloadFieldMember && _jsx(MemberField, { member: canDownloadFieldMember, ...props }), internalFieldMember && _jsx(InternalLinkInput, { ...props }), !options?.noCustomText && customTextFieldMember && _jsx(MemberField, { member: customTextFieldMember, ...props }), openInNewTabFieldMember && _jsx(MemberField, { member: openInNewTabFieldMember, ...props })] }));
+}
+export { LinkInput };

package/dist/types.d.ts

@@ -0,0 +1,27 @@
+import type { ObjectDefinition, ObjectOptions, ReferenceTo } from "sanity";
+export type InternalLinksQueryResult = {
+    label: string;
+    value: string;
+    uri?: string;
+    sections?: {
+        label: string;
+        value: string;
+    }[];
+}[];
+export type PluginConfig = {
+    internalLinkQuery: string;
+    internalLinkSchemaTypes?: ReferenceTo;
+    internalLinkTransformer: <QueryRes = unknown>(queryRes: QueryRes) => InternalLinksQueryResult;
+};
+export type FieldOptions = ObjectOptions & {
+    noCustomText?: boolean;
+};
+export declare const typeName: "wild.link";
+declare module "sanity" {
+    interface IntrinsicDefinitions {
+        [typeName]: Omit<ObjectDefinition, "type" | "fields"> & {
+            type: typeof typeName;
+            options?: FieldOptions;
+        };
+    }
+}

package/dist/types.js

@@ -0,0 +1 @@
+export const typeName = "wild.link";

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@madebywild/sanity-link-field",
+  "type": "module",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clear": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@madebywild/sanity-utils": "*",
+    "change-case": "^5.4.4"
+  },
+  "peerDependencies": {
+    "sanity": "^4.17",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "sanity": "^4.17",
+    "react": "^19",
+    "react-dom": "^19",
+    "typescript": "^5.9",
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
+  }
+}