@sanity/hierarchical-document-list 2.1.2 → 3.0.0

package/src/hooks/useAllItems.ts

@@ -1,119 +0,0 @@
-import * as React from 'react'
-import {SanityDocument, useClient} from 'sanity'
-import {AllItems, TreeInputOptions} from '../types'
-import {isDraft, unprefixId} from '../utils/idUtils'
-
-function getDeskFilter({referenceTo, referenceOptions}: TreeInputOptions): {
-  filter: string
-  params: Record<string, unknown>
-} {
-  const filterParts: string[] = ['_type in $docTypes']
-
-  if (referenceOptions?.filter) {
-    filterParts.push(referenceOptions.filter)
-  }
-
-  return {
-    filter: filterParts.join(' && '),
-    params: {
-      ...(referenceOptions?.filterParams || {}),
-      docTypes: referenceTo.map((schemaType) => schemaType)
-    }
-  }
-}
-
-type Status = 'loading' | 'success' | 'error'
-
-type ACTIONTYPE =
-  | {type: 'addOrEditItem'; item: SanityDocument}
-  | {type: 'removeItem'; itemId: string}
-  | {type: 'setInitialData'; items: SanityDocument[]}
-
-function updateItemInState(state: AllItems, item: SanityDocument): AllItems {
-  const newState = {...state}
-  const publishedId = unprefixId(item._id)
-  newState[publishedId] = {
-    ...(newState[publishedId] || {}),
-    [isDraft(item._id) ? 'draft' : 'published']: item
-  }
-  return newState
-}
-
-function allItemsReducer(state: AllItems, action: ACTIONTYPE): AllItems {
-  if (action.type === 'addOrEditItem' && action.item?._id) {
-    return updateItemInState(state, action.item)
-  }
-
-  if (action.type === 'removeItem') {
-    const publishedId = unprefixId(action.itemId)
-    return {
-      ...state,
-      [publishedId]: isDraft(action.itemId)
-        ? // If a draft, keep only published
-          {
-            published: state[publishedId]?.published
-          }
-        : {
-            draft: state[publishedId]?.draft
-          }
-    }
-  }
-
-  if (action.type === 'setInitialData') {
-    return action.items.reduce(updateItemInState, {} as AllItems)
-  }
-  return state
-}
-
-export default function useAllItems(options: TreeInputOptions): {
-  status: Status
-  allItems: AllItems
-} {
-  const client = useClient({
-    apiVersion: '2021-09-01'
-  })
-  const [status, setStatus] = React.useState<Status>('loading')
-  const [allItems, dispatch] = React.useReducer(allItemsReducer, {})
-
-  function handleListener(event: any) {
-    if (event.type !== 'mutation') {
-      return
-    }
-
-    if (event.result) {
-      dispatch({type: 'addOrEditItem', item: event.result})
-    } else {
-      dispatch({type: 'removeItem', itemId: event.documentId})
-    }
-  }
-
-  function handleFirstLoad(items: SanityDocument[]) {
-    dispatch({type: 'setInitialData', items})
-    setStatus('success')
-  }
-
-  React.useEffect(() => {
-    const {filter, params} = getDeskFilter(options)
-    const query = `*[${filter}] {
-      _id,
-      _type,
-      _updatedAt,
-    }`
-    client
-      .fetch<SanityDocument[]>(query, params)
-      .then(handleFirstLoad)
-      .catch(() => {
-        setStatus('error')
-      })
-
-    const listener = client.listen(query, params).subscribe(handleListener)
-    return () => {
-      listener.unsubscribe()
-    }
-  }, [])
-
-  return {
-    status,
-    allItems
-  }
-}

package/src/hooks/useLocalTree.ts

@@ -1,40 +0,0 @@
-import * as React from 'react'
-import {AllItems, LocalTreeItem, StoredTreeItem, VisibilityMap} from '../types'
-import {dataToEditorTree} from '../utils/treeData'
-
-/**
- * Enhances tree data with information on:
- *   - `expanded` - native property of react-sortable-tree to determine collapsing & expanding of a node's children
- *   - `draftId` & `publishedId` - refer to LocalTreeItem's type annotations
- *
- * Doesn't modify the main tree or has side-effects on data.
- * Has the added benefit of being local to the user, so external changes won't affect local visibility.
- */
-export default function useLocalTree({
-  tree,
-  allItems,
-}: {
-  tree: StoredTreeItem[]
-  allItems: AllItems
-}): {
-  handleVisibilityToggle: (data: any) => void
-  localTree: LocalTreeItem[]
-} {
-  const [visibilityMap, setVisibilityMap] = React.useState<VisibilityMap>({})
-
-  function handleVisibilityToggle(data: any) {
-    setVisibilityMap({
-      ...visibilityMap,
-      [data.node._key]: data.expanded,
-    })
-  }
-
-  return {
-    localTree: dataToEditorTree({
-      tree,
-      allItems,
-      visibilityMap,
-    }),
-    handleVisibilityToggle,
-  }
-}

package/src/hooks/useTreeOperations.ts

@@ -1,25 +0,0 @@
-import * as React from 'react'
-import useAllItems from './useAllItems'
-import useTreeOperationsProvider from './useTreeOperationsProvider'
-
-type ContextValue = ReturnType<typeof useTreeOperationsProvider> & {
-  allItemsStatus: ReturnType<typeof useAllItems>['status']
-}
-
-function placeholder() {
-  // no-op
-}
-
-export const TreeOperationsContext = React.createContext<ContextValue>({
-  addItem: placeholder,
-  duplicateItem: placeholder,
-  removeItem: placeholder,
-  handleMovedNode: placeholder,
-  moveItemDown: placeholder,
-  moveItemUp: placeholder,
-  allItemsStatus: 'loading',
-})
-
-export default function useTreeOperations(): ContextValue {
-  return React.useContext(TreeOperationsContext)
-}

package/src/hooks/useTreeOperationsProvider.ts

@@ -1,86 +0,0 @@
-import {PatchEvent, PathSegment, prefixPath, setIfMissing} from 'sanity'
-import {LocalTreeItem, NodeProps} from '../types'
-import {
-  HandleMovedNode,
-  HandleMovedNodeData,
-  getAddItemPatch,
-  getDuplicateItemPatch,
-  getMoveItemPatch,
-  getMovedNodePatch,
-  getRemoveItemPatch
-} from '../utils/treePatches'
-
-export default function useTreeOperationsProvider(props: {
-  patchPrefix?: PathSegment
-  onChange: (patch: PatchEvent) => void
-  localTree: LocalTreeItem[]
-}): {
-  handleMovedNode: HandleMovedNode
-  addItem: (item: LocalTreeItem) => void
-  duplicateItem: (nodeProps: NodeProps) => void
-  removeItem: (nodeProps: NodeProps) => void
-  moveItemUp: (nodeProps: NodeProps) => void
-  moveItemDown: (nodeProps: NodeProps) => void
-} {
-  const {localTree} = props
-
-  function runPatches(patches: any) {
-    const finalPatches = [
-      // Ensure tree array exists before any operation
-      setIfMissing([]),
-      ...(patches || [])
-    ]
-    let patchEvent = PatchEvent.from(finalPatches)
-    if (props.patchPrefix) {
-      patchEvent = PatchEvent.from(
-        finalPatches.map((patch) => prefixPath(patch, props.patchPrefix as PathSegment))
-      )
-    }
-    props.onChange(patchEvent)
-  }
-
-  function handleMovedNode(data: HandleMovedNodeData & {node: LocalTreeItem}) {
-    runPatches(getMovedNodePatch(data))
-  }
-
-  function addItem(item: LocalTreeItem) {
-    runPatches(getAddItemPatch(item))
-  }
-
-  function duplicateItem(nodeProps: NodeProps & {node: LocalTreeItem}) {
-    runPatches(getDuplicateItemPatch(nodeProps))
-  }
-
-  function removeItem(nodeProps: NodeProps) {
-    runPatches(getRemoveItemPatch(nodeProps))
-  }
-
-  function moveItemUp(nodeProps: NodeProps) {
-    runPatches(
-      getMoveItemPatch({
-        nodeProps,
-        localTree,
-        direction: 'up'
-      })
-    )
-  }
-
-  function moveItemDown(nodeProps: NodeProps) {
-    runPatches(
-      getMoveItemPatch({
-        nodeProps,
-        localTree,
-        direction: 'down'
-      })
-    )
-  }
-
-  return {
-    handleMovedNode,
-    addItem,
-    removeItem,
-    moveItemUp,
-    moveItemDown,
-    duplicateItem
-  }
-}

package/src/index.ts

@@ -1,25 +0,0 @@
-import {definePlugin} from 'sanity'
-import {default as createDeskHierarchy, type TreeProps} from './createDeskHierarchy'
-import {default as createHierarchicalSchemas} from './createHierarchicalSchemas'
-import {default as hierarchyTree} from './schemas/hierarchy.tree'
-import {default as flatDataToTree} from './utils/flatDataToTree'
-
-export {createDeskHierarchy, createHierarchicalSchemas, flatDataToTree, hierarchyTree, TreeProps}
-
-/**
- * Usage in `sanity.config.ts` (or .js)
- *
- * ```ts
- * import {defineConfig} from 'sanity'
- * import {hierarchicalDocumentList} from '@sanity/hierarchical-document-list'
- *
- * export default defineConfig({
- *   // ...
- *   plugins: [hierarchicalDocumentList()],
- * })
- * ```
- */
-
-export const hierarchicalDocumentList = definePlugin({
-  name: 'sanity-plugin-hierarchical-document-list'
-})

package/src/schemas/hierarchy.tree.ts

@@ -1,19 +0,0 @@
-import {defineType} from 'sanity'
-
-export default defineType({
-  name: 'hierarchy.tree',
-  title: 'Hierarchical tree',
-  type: 'document',
-  // The plugin needs to define a `schemaType` with liveEdit enabled so that
-  // `useDocumentOperation` in TreeDeskStructure.tsx doesn't create drafts at every patch.
-  liveEdit: true,
-  // Let's avoid defining the actual hierarchical field, else GraphQL users won't be able to deploy schemas
-  fields: [
-    {
-      name: 'unusedField',
-      title: 'Unused field',
-      type: 'string',
-      hidden: true,
-    },
-  ],
-})

package/src/types.ts

@@ -1,148 +0,0 @@
-import {TreeItem} from '@nosferatu500/react-sortable-tree'
-import {ArraySchemaType, ObjectSchemaType, SanityDocument} from 'sanity'
-import {INTERNAL_NODE_TYPE, INTERNAL_NODE_VALUE_TYPE} from './utils/injectNodeTypeInPatches'
-
-interface SanityReference {
-  _type: 'reference'
-  _ref: string
-  _weak?: boolean
-}
-
-/**
- * Objects saved to tree documents in Sanity's Content Lake
- */
-export interface StoredTreeItem {
-  _key: string
-  _type: typeof INTERNAL_NODE_TYPE | string
-  value?: {
-    _type: typeof INTERNAL_NODE_VALUE_TYPE | string
-    reference?: SanityReference
-    docType?: string
-  }
-  /**
-   * _key of parent node
-   */
-  parent?: string | null
-}
-
-/**
- * Tree items enhanced locally in the client with info from `allItems` and `visibilityMap`.
- * `allItems` stop here and never become LocalTreeItems as they aren't added to react-sortable-tree.
- *
- * See `useLocalTree.ts` and `dataToEditorTree()`.
- */
-export interface EnhancedTreeItem extends StoredTreeItem {
-  expanded?: boolean | undefined
-  /**
-   * Used by DocumentInNode to render the preview for drafts if they exist.
-   * Also informs document status icons.
-   */
-  draftId?: string
-  draftUpdatedAt?: string
-  /**
-   * If not present, DocumentInNode will show up an error for invalid document.
-   *  - undefined `publishedId` could mean the document is either deleted, or it doesn't match GROQ filters anymore
-   */
-  publishedId?: string
-  publishedUpdatedAt?: string
-}
-
-/**
- * Tree items as found in the sortable tree itself.
- */
-export type LocalTreeItem = EnhancedTreeItem & Pick<TreeItem, 'title' | 'children'>
-
-export interface TreeInputOptions {
-  /**
-   * What document types this hierarchy can refer to.
-   * Similar to the `to` property of the [reference field](https://www.sanity.io/docs/reference-type).
-   */
-  referenceTo: string[]
-
-  /**
-   * Used to provide fine-grained filtering for documents.
-   */
-  referenceOptions?: {
-    /**
-     * Static filter to apply to tree document queries.
-     */
-    filter?: string
-    /**
-     * Parameters / variables to pass to the GROQ query ran to fetch documents.
-     */
-    filterParams?: Record<string, unknown>
-  }
-
-  /**
-   * How deep should editors be allowed to nest items.
-   */
-  maxDepth?: number
-
-  /**
-   * Schema type for your hierarchical documents.
-   * Refer to documentation on how to provide these schemas in your studio.
-   *
-   * Defautlt: 'hierarchy.tree' - this schema is bundled with the plugin
-   */
-  documentType?: string
-}
-
-export interface TreeFieldSchema
-  extends Omit<ArraySchemaType, 'of' | 'type' | 'inputComponent' | 'jsonType'> {
-  options: ArraySchemaType['options'] & TreeInputOptions
-}
-
-export interface TreeNodeObjectSchema
-  extends Omit<ObjectSchemaType, 'name' | 'fields' | 'type' | 'inputComponent' | 'jsonType'> {
-  options: ObjectSchemaType['options'] & TreeInputOptions
-}
-
-export interface TreeDeskStructureProps extends TreeInputOptions {
-  /**
-   * _id of the document that will hold the tree data.
-   */
-  documentId: string
-
-  /**
-   * (Optional)
-   * Key for the field representing the hierarchical tree inside the document.
-   * `tree` by default.
-   */
-  fieldKeyInDocument?: string
-}
-
-export interface DocumentPair {
-  draft?: SanityDocument
-  published?: SanityDocument
-}
-
-export interface AllItems {
-  [publishedId: string]: DocumentPair | undefined
-}
-
-type DocumentOperation<Payload = unknown> = {
-  execute?: (payload?: Payload) => void
-  disabled?: boolean | string
-}
-
-export interface DocumentOperations {
-  patch?: DocumentOperation<unknown[]>
-  commit?: DocumentOperation
-  del?: DocumentOperation
-  delete?: DocumentOperation
-  discardChanges?: DocumentOperation
-  duplicate?: DocumentOperation
-  restore?: DocumentOperation
-  unpublish?: DocumentOperation
-  publish?: DocumentOperation
-}
-
-export interface VisibilityMap {
-  [_key: string]: boolean
-}
-
-export interface NodeProps {
-  node: LocalTreeItem
-}
-
-export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>

package/src/utils/flatDataToTree.ts

@@ -1,20 +0,0 @@
-import {getTreeFromFlatData} from '@nosferatu500/react-sortable-tree'
-import {StoredTreeItem} from '../types'
-
-interface TreeItemWithChildren extends StoredTreeItem {
-  children?: TreeItemWithChildren[]
-}
-
-export default function flatDataToTree(data: StoredTreeItem[]): TreeItemWithChildren[] {
-  return getTreeFromFlatData({
-    flatData: data.map((item) => ({
-      ...item,
-      // if parent: undefined, the tree won't be constructed
-      parent: item.parent || null,
-    })),
-    getKey: (item) => item._key,
-    getParentKey: (item) => item.parent,
-    // without rootKey, the tree won't be constructed
-    rootKey: null as any,
-  }) as TreeItemWithChildren[]
-}

package/src/utils/getAdjescentNodes.ts

@@ -1,30 +0,0 @@
-import {FlatDataItem, TreeItem} from '@nosferatu500/react-sortable-tree'
-
-/**
- * Gets adjescent non-children nodes of a given treeIndex.
- */
-export default function getAdjescentNodes({
-  flatTree,
-  node,
-  treeIndex,
-}: {
-  flatTree: FlatDataItem[]
-  node: TreeItem
-  treeIndex: number
-}): {
-  leadingNode?: FlatDataItem
-  followingNode?: FlatDataItem
-} {
-  const leadingNode = flatTree
-    .slice(0, treeIndex)
-    .reverse()
-    // Disregard children nodes - these include the current node's key in their `path` array
-    .find((item) => !item.path.includes(node._key))
-
-  const followingNode = flatTree.slice(treeIndex + 1).find((item) => !item.path.includes(node._key))
-
-  return {
-    leadingNode,
-    followingNode,
-  }
-}

package/src/utils/getCommonTreeProps.tsx

@@ -1,28 +0,0 @@
-import {ReactSortableTreeProps} from '@nosferatu500/react-sortable-tree/react-sortable-tree'
-import React from 'react'
-import NodeContentRenderer from '../components/NodeContentRenderer'
-import PlaceholderDropzone from '../components/PlaceholderDropzone'
-import TreeNodeRenderer from '../components/TreeNodeRenderer'
-// import {ROW_HEIGHT} from './getTreeHeight'
-
-export default function getCommonTreeProps({
-  placeholder
-}: {
-  placeholder: {
-    title: string
-    subtitle?: string
-  }
-}): Partial<ReactSortableTreeProps> {
-  return {
-    theme: {
-      nodeContentRenderer: NodeContentRenderer,
-      placeholderRenderer: (props: any) => <PlaceholderDropzone {...placeholder} {...props} />,
-      treeNodeRenderer: TreeNodeRenderer,
-      style: {height: '100%'},
-      innerStyle: undefined,
-      scaffoldBlockPxWidth: 44,
-      slideRegionSize: 100
-      // rowHeight: ROW_HEIGHT,
-    }
-  }
-}

package/src/utils/getTreeHeight.ts

@@ -1,8 +0,0 @@
-import {getVisibleNodeCount, TreeItem} from '@nosferatu500/react-sortable-tree'
-
-export default function getTreeHeight(treeData: TreeItem[], rowHeight: number): string {
-  const visibleNodeCount = getVisibleNodeCount({treeData})
-
-  // prettier-ignore
-  return `${50 + (rowHeight * visibleNodeCount)}px`
-}

package/src/utils/gradientPatchAdapter.ts

@@ -1,43 +0,0 @@
-// Adapted from @sanity/form-builder/src/sanity/utils/gradientPatchAdapter.ts
-import {arrayToJSONMatchPath} from '@sanity/mutator'
-
-type Patch = Record<string, any>
-
-type GradientPatch = Record<string, any>
-
-export function toGradient(patches: Patch[]): GradientPatch[] {
-  return patches.map(toGradientPatch)
-}
-
-function toGradientPatch(patch: Patch): GradientPatch {
-  const matchPath = arrayToJSONMatchPath(patch.path || [])
-  if (patch.type === 'insert') {
-    const {position, items} = patch
-    return {
-      insert: {
-        [position]: matchPath,
-        items: items,
-      },
-    }
-  }
-
-  if (patch.type === 'unset') {
-    return {
-      unset: [matchPath],
-    }
-  }
-
-  if (!patch.type) {
-    throw new Error(`Missing patch type in patch ${JSON.stringify(patch)}`)
-  }
-  if (matchPath) {
-    return {
-      [patch.type]: {
-        [matchPath]: patch.value,
-      },
-    }
-  }
-  return {
-    [patch.type]: patch.value,
-  }
-}

package/src/utils/idUtils.ts

@@ -1,7 +0,0 @@
-export function unprefixId(_id = ''): string {
-  return _id.replace('drafts.', '')
-}
-
-export function isDraft(_id = ''): boolean {
-  return _id.startsWith('drafts.')
-}

package/src/utils/injectNodeTypeInPatches.ts

@@ -1,60 +0,0 @@
-export function getSchemaTypeName(
-  documentType: string,
-  type: 'document' | 'node' | 'nodeValue' | 'array'
-): string {
-  switch (type) {
-    case 'document':
-      return documentType
-    case 'array':
-      return `${documentType}.array`
-    case 'node':
-      return `${documentType}.node`
-    case 'nodeValue':
-      return `${documentType}.nodeValue`
-    default:
-      return documentType
-  }
-}
-
-/**
- * Temporary value of nodes' `_type` before they are normalized and persisted as the user-defined choice.
- */
-export const DEFAULT_DOC_TYPE = 'hierarchy.tree'
-export const INTERNAL_NODE_TYPE = getSchemaTypeName(DEFAULT_DOC_TYPE, 'node')
-export const INTERNAL_NODE_VALUE_TYPE = getSchemaTypeName(DEFAULT_DOC_TYPE, 'nodeValue')
-export const INTERNAL_NODE_ARRAY_TYPE = getSchemaTypeName(DEFAULT_DOC_TYPE, 'array')
-
-/**
- * Barebones recursive utility to inject the desired nodeObjectType in patches generated in deeply nested components and utilities.
- */
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export default function injectNodeTypeInPatches(patchData: any, documentType: string): any {
-  if (Array.isArray(patchData)) {
-    return patchData.map((child) => injectNodeTypeInPatches(child, documentType))
-  }
-  if (typeof patchData === 'object' && patchData !== null) {
-    return Object.keys(patchData).reduce((newObject, key) => {
-      const value = patchData[key as keyof typeof patchData]
-
-      if (
-        key === '_type' &&
-        typeof value === 'string' &&
-        [INTERNAL_NODE_TYPE, INTERNAL_NODE_VALUE_TYPE].includes(value)
-      ) {
-        return {
-          ...newObject,
-          [key]: getSchemaTypeName(
-            documentType,
-            value === INTERNAL_NODE_TYPE ? 'node' : 'nodeValue'
-          ),
-        }
-      }
-
-      return {
-        ...newObject,
-        [key]: injectNodeTypeInPatches(value, documentType),
-      }
-    }, {})
-  }
-  return patchData
-}

package/src/utils/moveItemInArray.ts

@@ -1,26 +0,0 @@
-export default function moveItemInArray<ItemType = unknown>({
-  array,
-  fromIndex,
-  toIndex,
-}: {
-  array: ItemType[]
-  fromIndex: number
-  toIndex: number
-}): ItemType[] {
-  if (fromIndex === toIndex) {
-    return array
-  }
-
-  const newArray = [...array]
-
-  const target = newArray[fromIndex]
-  const inc = toIndex < fromIndex ? -1 : 1
-
-  for (let i = fromIndex; i !== toIndex; i += inc) {
-    newArray[i] = newArray[i + inc]
-  }
-
-  newArray[toIndex] = target
-
-  return newArray
-}