From 09cadb4c31d19f4b8d7e97e47fe6f0be53b7d1d7 Mon Sep 17 00:00:00 2001 From: Marcus Forsberg Date: Mon, 22 Apr 2024 08:49:55 +0200 Subject: [PATCH] fix: adjust types throughout and add missing ones --- .../{LinkField.tsx => LinkInput.tsx} | 18 +++------ src/components/LinkTypeInput.tsx | 4 +- src/index.ts | 5 +++ src/linkField.tsx | 11 +++--- src/types.ts | 37 ++++++++++++++++--- 5 files changed, 51 insertions(+), 24 deletions(-) rename src/components/{LinkField.tsx => LinkInput.tsx} (88%) diff --git a/src/components/LinkField.tsx b/src/components/LinkInput.tsx similarity index 88% rename from src/components/LinkField.tsx rename to src/components/LinkInput.tsx index 26fd249..c9268be 100644 --- a/src/components/LinkField.tsx +++ b/src/components/LinkInput.tsx @@ -1,14 +1,9 @@ import {Box, Flex, Stack, Text} from '@sanity/ui' -import { - type FieldMember, - FormFieldValidationStatus, - ObjectInputMember, - type ObjectInputProps, -} from 'sanity' +import {type FieldMember, FormFieldValidationStatus, ObjectInputMember} from 'sanity' import styled from 'styled-components' import {isCustomLink} from '../helpers/typeGuards' -import {CustomLinkType, LinkValue} from '../types' +import {LinkInputProps} from '../types' const ValidationErrorWrapper = styled(Box)` contain: size; @@ -22,13 +17,13 @@ const FullWidthStack = styled(Stack)` ` /** - * Custom field component for the link object. + * Custom input component for the link object. * Nicely renders the type and link fields next to each other, with the * description and any validation errors for the link field below them. * * The rest of the fields ("blank" and "advanced") are rendered as usual. */ -export function LinkField(props: ObjectInputProps & {customLinkTypes: CustomLinkType[]}) { +export function LinkInput(props: LinkInputProps) { const [textField, typeField, linkField, ...otherFields] = props.members as FieldMember[] const {options} = props.schemaType @@ -41,9 +36,8 @@ export function LinkField(props: ObjectInputProps & {customLinkTypes: CustomLink const description = // If a custom link type is used, use its description if it has one. - props.value && isCustomLink(props.value as LinkValue) - ? props.customLinkTypes.find((type) => type.value === (props.value as LinkValue).type) - ?.description + props.value && isCustomLink(props.value) + ? props.customLinkTypes.find((type) => type.value === props.value?.type)?.description : // Fallback to the description of the current link type field. linkFieldDescription diff --git a/src/components/LinkTypeInput.tsx b/src/components/LinkTypeInput.tsx index 8eca8ec..816c704 100644 --- a/src/components/LinkTypeInput.tsx +++ b/src/components/LinkTypeInput.tsx @@ -4,7 +4,7 @@ import {AtSignIcon, GlobeIcon, LinkIcon, PhoneIcon} from 'lucide-react' import {set, type StringInputProps} from 'sanity' import styled from 'styled-components' -import {CustomLinkType, LinkFieldOptions, LinkType} from '../types' +import {CustomLinkType, LinkFieldPluginOptions, LinkType} from '../types' const defaultLinkTypes: LinkType[] = [ {title: 'Internal', value: 'internal', icon: LinkIcon}, @@ -40,7 +40,7 @@ export function LinkTypeInput({ linkableSchemaTypes, }: StringInputProps & { customLinkTypes?: CustomLinkType[] - linkableSchemaTypes: LinkFieldOptions['linkableSchemaTypes'] + linkableSchemaTypes: LinkFieldPluginOptions['linkableSchemaTypes'] }) { const linkTypes = [ // Disable internal links if not enabled for any schema types diff --git a/src/index.ts b/src/index.ts index 2ca2183..6ce1c53 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,12 +8,17 @@ export { } from './helpers/typeGuards' export {linkField} from './linkField' export type { + CustomizableLink, CustomLink, CustomLinkType, CustomLinkTypeOptions, EmailLink, ExternalLink, InternalLink, + LinkFieldOptions, + LinkFieldPluginOptions, + LinkInputProps, + LinkSchemaType, LinkType, LinkValue, PhoneLink, diff --git a/src/linkField.tsx b/src/linkField.tsx index 87286e2..2035fa3 100644 --- a/src/linkField.tsx +++ b/src/linkField.tsx @@ -1,16 +1,16 @@ import {defineField, definePlugin, defineType, type ObjectInputProps} from 'sanity' import {CustomLinkInput} from './components/CustomLinkInput' -import {LinkField} from './components/LinkField' +import {LinkInput} from './components/LinkInput' import {LinkTypeInput} from './components/LinkTypeInput' import {isCustomLink} from './helpers/typeGuards' -import type {LinkFieldOptions, LinkValue} from './types' +import type {LinkFieldPluginOptions, LinkValue} from './types' /** * A plugin that adds a custom Link field for creating internal and external links, * as well as `mailto` and `tel`-links, all using the same intuitive UI. * - * @param options - Options for the plugin. See {@link LinkFieldOptions} + * @param options - Options for the plugin. See {@link LinkFieldPluginOptions} * * @example Minimal example * ```ts @@ -41,7 +41,7 @@ import type {LinkFieldOptions, LinkValue} from './types' *}); * ``` */ -export const linkField = definePlugin( +export const linkField = definePlugin( ({ linkableSchemaTypes = ['page'], descriptions = { @@ -248,7 +248,8 @@ export const linkField = definePlugin( : []), ], components: { - input: (props: ObjectInputProps) => LinkField({customLinkTypes, ...props}), + input: (props: ObjectInputProps) => + LinkInput({customLinkTypes, ...props, value: props.value as LinkValue}), }, } diff --git a/src/types.ts b/src/types.ts index 502f636..7979a50 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,5 +1,5 @@ import {ComponentType} from 'react' -import type {CurrentUser, Path, SanityDocument} from 'sanity' +import type {CurrentUser, ObjectInputProps, ObjectSchemaType, Path, SanityDocument} from 'sanity' export interface CustomizableLink { parameters?: string @@ -67,12 +67,13 @@ export interface CustomLinkType extends LinkType { } /** - * Options for the link field plugin + * Global options for the link field plugin * * @todo: Should be overridable on the field level */ -export interface LinkFieldOptions { - /** An array of schema types that should be allowed in internal links. +export interface LinkFieldPluginOptions { + /** + * An array of schema types that should be allowed in internal links. * @defaultValue ['page'] */ linkableSchemaTypes: string[] @@ -90,7 +91,8 @@ export interface LinkFieldOptions { anchor?: string } - /** Whether the user should be able to set custom URL parameters for internal and external links. + /** + * Whether the user should be able to set custom URL parameters for internal and external links. * @defaultValue true */ enableLinkParameters?: boolean @@ -136,3 +138,28 @@ export interface LinkFieldOptions { */ customLinkTypes?: CustomLinkType[] } + +/** + * Options for an individual link field + */ +export interface LinkFieldOptions { + /** + * Whether the link should include an optional field for setting the link text/label. + * @defaultValue false + */ + enableText?: boolean + + /** + * The label for the text input field, if enabled using the `enableText` option. + * @defaultValue Text + */ + textLabel?: string +} + +export type LinkSchemaType = Omit & { + options?: LinkFieldOptions +} + +export type LinkInputProps = ObjectInputProps & { + customLinkTypes: CustomLinkType[] +}