From b0ccfc3b8356fc32890c9decece9504e162299c6 Mon Sep 17 00:00:00 2001 From: Espen Hovlandsdal Date: Sun, 7 Aug 2022 19:07:06 -0700 Subject: [PATCH] fix(desk): correct prop typings for pane view components --- .../header/DocumentHeaderTabs.tsx | 2 +- .../src/desk/structureBuilder/Document.ts | 4 +- .../desk/structureBuilder/StructureNodes.ts | 24 ++++----- .../createStructureBuilder.ts | 6 +-- .../sanity/src/desk/structureBuilder/types.ts | 49 ++++++++++++------- .../structureBuilder/views/ComponentView.ts | 15 +++--- .../desk/structureBuilder/views/FormView.ts | 14 +++--- .../src/desk/structureBuilder/views/View.ts | 17 +++---- .../src/desk/structureBuilder/views/index.ts | 4 +- packages/sanity/src/desk/types.ts | 30 ++---------- 10 files changed, 78 insertions(+), 87 deletions(-) diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx index 4bd145c00e9..2406bd89117 100644 --- a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx +++ b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentHeaderTabs.tsx @@ -25,7 +25,7 @@ export function DocumentHeaderTabs() { } function DocumentHeaderTab(props: { - icon?: React.ComponentType + icon?: React.ComponentType | React.ReactNode id: string isActive: boolean label: React.ReactNode diff --git a/packages/sanity/src/desk/structureBuilder/Document.ts b/packages/sanity/src/desk/structureBuilder/Document.ts index 7d93de4840b..42f6c61c49e 100644 --- a/packages/sanity/src/desk/structureBuilder/Document.ts +++ b/packages/sanity/src/desk/structureBuilder/Document.ts @@ -4,9 +4,9 @@ import {ChildResolver} from './ChildResolver' import {SerializeOptions, Serializable, Child, DocumentNode, EditorNode} from './StructureNodes' import {SerializeError, HELP_URL} from './SerializeError' import {validateId} from './util/validateId' -import {View, ViewBuilder, maybeSerializeView} from './views/View' +import {ViewBuilder, maybeSerializeView} from './views/View' import {form} from './views' -import {StructureContext} from './types' +import type {StructureContext, View} from './types' const createDocumentChildResolver = ({resolveDocumentNode}: StructureContext): ChildResolver => diff --git a/packages/sanity/src/desk/structureBuilder/StructureNodes.ts b/packages/sanity/src/desk/structureBuilder/StructureNodes.ts index 988ccdbc616..d4d4dbf33b7 100644 --- a/packages/sanity/src/desk/structureBuilder/StructureNodes.ts +++ b/packages/sanity/src/desk/structureBuilder/StructureNodes.ts @@ -1,15 +1,15 @@ -import {DocumentListBuilder, DocumentList} from './DocumentList' -import {ListItemBuilder} from './ListItem' -import {ListBuilder, List} from './List' -import {MenuItemBuilder} from './MenuItem' -import {MenuItemGroupBuilder} from './MenuItemGroup' -import {Component, ComponentBuilder} from './Component' -import {DocumentListItemBuilder} from './DocumentListItem' -import {ChildResolver} from './ChildResolver' -import {DocumentTypeListBuilder} from './DocumentTypeList' -import {InitialValueTemplateItemBuilder} from './InitialValueTemplateItem' -import {DocumentBuilder} from './Document' -import {View} from './views/View' +import type {DocumentListBuilder, DocumentList} from './DocumentList' +import type {ListItemBuilder} from './ListItem' +import type {ListBuilder, List} from './List' +import type {MenuItemBuilder} from './MenuItem' +import type {MenuItemGroupBuilder} from './MenuItemGroup' +import type {Component, ComponentBuilder} from './Component' +import type {DocumentListItemBuilder} from './DocumentListItem' +import type {ChildResolver} from './ChildResolver' +import type {DocumentTypeListBuilder} from './DocumentTypeList' +import type {InitialValueTemplateItemBuilder} from './InitialValueTemplateItem' +import type {DocumentBuilder} from './Document' +import type {View} from './types' export interface StructureNode { id: string diff --git a/packages/sanity/src/desk/structureBuilder/createStructureBuilder.ts b/packages/sanity/src/desk/structureBuilder/createStructureBuilder.ts index 4732c3c72c5..d7ad01a96b3 100644 --- a/packages/sanity/src/desk/structureBuilder/createStructureBuilder.ts +++ b/packages/sanity/src/desk/structureBuilder/createStructureBuilder.ts @@ -1,5 +1,5 @@ import {uniqueId} from 'lodash' -import {SchemaType} from '@sanity/types' +import type {SchemaType} from '@sanity/types' import {isValidElementType} from 'react-is' import {Source, getConfigContextFromSource} from '../../config' import {getPublishedId} from '../../util' @@ -13,7 +13,7 @@ import {MenuItemBuilder, getOrderingMenuItemsForSchemaType, getOrderingMenuItem} import {ListItemBuilder} from './ListItem' import {MenuItemGroupBuilder} from './MenuItemGroup' import {DocumentListBuilder} from './DocumentList' -import {Divider} from './StructureNodes' +import type {Divider} from './StructureNodes' import {DocumentBuilder, documentFromEditor, documentFromEditorWithInitialValue} from './Document' import {ComponentInput, ComponentBuilder} from './Component' import {DocumentListItemBuilder} from './DocumentListItem' @@ -23,7 +23,7 @@ import { defaultInitialValueTemplateItems, menuItemsFromInitialValueTemplateItems, } from './InitialValueTemplateItem' -import { +import type { StructureBuilder, UserComponent, StructureContext, diff --git a/packages/sanity/src/desk/structureBuilder/types.ts b/packages/sanity/src/desk/structureBuilder/types.ts index d7a0ad93314..1f14a17e980 100644 --- a/packages/sanity/src/desk/structureBuilder/types.ts +++ b/packages/sanity/src/desk/structureBuilder/types.ts @@ -1,20 +1,33 @@ -import {SortOrdering} from '@sanity/types' -import {ConfigContext, Source} from '../../config' -import {InitialValueTemplateItem} from '../../templates' -import {ComponentBuilder, ComponentInput} from './Component' -import {DocumentBuilder, PartialDocumentNode} from './Document' -import {DocumentListInput, DocumentListBuilder} from './DocumentList' -import {DocumentListItemInput, DocumentListItemBuilder} from './DocumentListItem' -import {DocumentTypeListInput} from './DocumentTypeList' -import {InitialValueTemplateItemBuilder} from './InitialValueTemplateItem' -import {ListBuilder, ListInput} from './List' -import {ListItemBuilder, ListItemInput} from './ListItem' -import {MenuItem, MenuItemBuilder} from './MenuItem' -import {MenuItemGroup, MenuItemGroupBuilder} from './MenuItemGroup' -import {Divider, EditorNode} from './StructureNodes' -import {ComponentView, ComponentViewBuilder} from './views/ComponentView' -import {FormViewBuilder} from './views/FormView' -import {View} from './views/View' +import type {SanityDocument, SchemaType, SortOrdering} from '@sanity/types' +import type {ConfigContext, Source} from '../../config' +import type {InitialValueTemplateItem} from '../../templates' +import type {ComponentBuilder, ComponentInput} from './Component' +import type {DocumentBuilder, PartialDocumentNode} from './Document' +import type {DocumentListInput, DocumentListBuilder} from './DocumentList' +import type {DocumentListItemInput, DocumentListItemBuilder} from './DocumentListItem' +import type {DocumentTypeListInput} from './DocumentTypeList' +import type {InitialValueTemplateItemBuilder} from './InitialValueTemplateItem' +import type {ListBuilder, ListInput} from './List' +import type {ListItemBuilder, ListItemInput} from './ListItem' +import type {MenuItem, MenuItemBuilder} from './MenuItem' +import type {MenuItemGroup, MenuItemGroupBuilder} from './MenuItemGroup' +import type {Divider, EditorNode} from './StructureNodes' +import type {ComponentView, ComponentViewBuilder} from './views/ComponentView' +import type {FormView, FormViewBuilder} from './views/FormView' + +export type View = FormView | ComponentView + +export type UserViewComponent> = React.ComponentType<{ + document: { + draft: SanityDocument | null + displayed: Partial + historical: Partial | null + published: SanityDocument | null + } + documentId: string + options: TOptions + schemaType: SchemaType +}> export type UserComponent = React.ComponentType<{ child?: ComponentBuilder @@ -78,7 +91,7 @@ export interface StructureBuilder { orderingMenuItem: (ordering: SortOrdering) => MenuItemBuilder orderingMenuItemsForType: (type: string) => MenuItemBuilder[] view: { - form: (spec?: Partial) => FormViewBuilder + form: (spec?: Partial) => FormViewBuilder component: ( componentOrSpec?: Partial | React.ComponentType ) => ComponentViewBuilder diff --git a/packages/sanity/src/desk/structureBuilder/views/ComponentView.ts b/packages/sanity/src/desk/structureBuilder/views/ComponentView.ts index f723164bb5f..e6b6ba9e4c0 100644 --- a/packages/sanity/src/desk/structureBuilder/views/ComponentView.ts +++ b/packages/sanity/src/desk/structureBuilder/views/ComponentView.ts @@ -1,12 +1,13 @@ import {SerializeOptions} from '../StructureNodes' import {SerializeError, HELP_URL} from '../SerializeError' -import {UserComponent} from '../types' import {isRecord} from '../../../util' -import {View, GenericViewBuilder} from './View' +import type {UserViewComponent} from '../types' +import {BaseView, GenericViewBuilder} from './View' -export interface ComponentView extends View { - component: UserComponent - options: Record +export interface ComponentView> extends BaseView { + type: 'component' + component: UserViewComponent + options: TOptions } const isComponentSpec = (spec: unknown): spec is ComponentView => @@ -18,7 +19,7 @@ export class ComponentViewBuilder extends GenericViewBuilder< > { protected spec: Partial - constructor(componentOrSpec?: UserComponent | Partial) { + constructor(componentOrSpec?: UserViewComponent | Partial) { const spec = isComponentSpec(componentOrSpec) ? {...componentOrSpec} : {options: {}} super() @@ -33,7 +34,7 @@ export class ComponentViewBuilder extends GenericViewBuilder< } } - component(component: UserComponent): ComponentViewBuilder { + component(component: UserViewComponent): ComponentViewBuilder { return this.clone({component}) } diff --git a/packages/sanity/src/desk/structureBuilder/views/FormView.ts b/packages/sanity/src/desk/structureBuilder/views/FormView.ts index 74a21559677..83738e65c7f 100644 --- a/packages/sanity/src/desk/structureBuilder/views/FormView.ts +++ b/packages/sanity/src/desk/structureBuilder/views/FormView.ts @@ -1,9 +1,11 @@ import {SerializeOptions} from '../StructureNodes' -import {View, GenericViewBuilder} from './View' +import {BaseView, GenericViewBuilder} from './View' -export type FormView = View +export interface FormView extends BaseView { + type: 'form' +} -export class FormViewBuilder extends GenericViewBuilder, FormViewBuilder> { +export class FormViewBuilder extends GenericViewBuilder, FormViewBuilder> { protected spec: Partial constructor(spec?: Partial) { @@ -12,12 +14,10 @@ export class FormViewBuilder extends GenericViewBuilder, FormViewB } serialize(options: SerializeOptions = {path: []}): FormView { - const base = super.serialize(options) - const formView: FormView = { - ...base, + return { + ...super.serialize(options), type: 'form', } - return formView } clone(withSpec?: Partial): FormViewBuilder { diff --git a/packages/sanity/src/desk/structureBuilder/views/View.ts b/packages/sanity/src/desk/structureBuilder/views/View.ts index 43250e4fb21..d5004745957 100644 --- a/packages/sanity/src/desk/structureBuilder/views/View.ts +++ b/packages/sanity/src/desk/structureBuilder/views/View.ts @@ -4,16 +4,16 @@ import {HELP_URL, SerializeError} from '../SerializeError' import {validateId} from '../util/validateId' import {ComponentViewBuilder} from './ComponentView' import {FormViewBuilder} from './FormView' +import {View} from '../types' -export interface View { - type: string +export interface BaseView { id: string title: string icon?: React.ComponentType | React.ReactNode } -export abstract class GenericViewBuilder, ConcreteImpl> - implements Serializable +export abstract class GenericViewBuilder, ConcreteImpl> + implements Serializable { protected spec: TView = {} as TView @@ -41,7 +41,7 @@ export abstract class GenericViewBuilder, ConcreteIm return this.spec.icon } - serialize(options: SerializeOptions = {path: []}): View { + serialize(options: SerializeOptions = {path: []}): BaseView { const {id, title, icon} = this.spec if (!id) { throw new SerializeError( @@ -63,15 +63,14 @@ export abstract class GenericViewBuilder, ConcreteIm id: validateId(id, options.path, options.index), title, icon, - type: 'view', } } - abstract clone(withSpec?: Partial): ConcreteImpl + abstract clone(withSpec?: Partial): ConcreteImpl } -function isSerializable(view: View | Serializable): view is Serializable { - return typeof (view as Serializable).serialize === 'function' +function isSerializable(view: BaseView | Serializable): view is Serializable { + return typeof (view as Serializable).serialize === 'function' } export function maybeSerializeView( diff --git a/packages/sanity/src/desk/structureBuilder/views/index.ts b/packages/sanity/src/desk/structureBuilder/views/index.ts index c79d3084546..862736afbed 100644 --- a/packages/sanity/src/desk/structureBuilder/views/index.ts +++ b/packages/sanity/src/desk/structureBuilder/views/index.ts @@ -1,4 +1,4 @@ -import {UserComponent} from '../types' +import type {UserViewComponent} from '../types' import {ComponentView, ComponentViewBuilder} from './ComponentView' import {FormView, FormViewBuilder} from './FormView' @@ -8,5 +8,5 @@ export * from './View' export const form = (spec?: Partial): FormViewBuilder => new FormViewBuilder(spec) export const component = ( - componentOrSpec?: UserComponent | Partial + componentOrSpec?: UserViewComponent | Partial ): ComponentViewBuilder => new ComponentViewBuilder(componentOrSpec) diff --git a/packages/sanity/src/desk/types.ts b/packages/sanity/src/desk/types.ts index bb124250f58..73fe0dacbee 100644 --- a/packages/sanity/src/desk/types.ts +++ b/packages/sanity/src/desk/types.ts @@ -1,10 +1,12 @@ -import {SchemaType, SanityDocument} from '@sanity/types' +import {SchemaType} from '@sanity/types' import {Subscribable} from 'rxjs' import {GeneralPreviewLayoutKey} from '../components/previews' import {ConfigContext} from '../config' import {InitialValueTemplateItem} from '../templates' import { + ComponentView, DefaultDocumentNodeResolver, + FormView, StructureBuilder, StructureContext, UserComponent, @@ -171,31 +173,7 @@ export interface CustomComponentPaneNode extends BaseResolvedPaneNode<'component __preserveInstance?: boolean } -export type PaneView = - | { - id: string - type: 'form' - title: string - icon?: React.ComponentType - } - | { - id: string - type: 'component' - title: string - icon?: React.ComponentType - options?: TOptions - component?: React.ComponentType<{ - documentId: string - options?: TOptions - schemaType: SchemaType - document: { - draft: SanityDocument | null - displayed: Partial - historical: Partial | null - published: SanityDocument | null - } - }> - } +export type PaneView = FormView | ComponentView export interface DocumentPaneNode extends BaseResolvedPaneNode<'document'> { options: {