@sanity/hierarchical-document-list 1.1.0 → 2.0.0

package/src/types.ts

@@ -0,0 +1,148 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,28 @@
+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

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

package/src/utils/gradientPatchAdapter.ts

@@ -0,0 +1,43 @@
+// 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

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

package/src/utils/injectNodeTypeInPatches.ts

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,26 @@
+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
+}

package/src/utils/throwError.ts

@@ -0,0 +1,9 @@
+const ERROR_MESSAGES = {
+  invalidDocumentId: 'Please add a documentId to your tree',
+  invalidDocumentType: 'Please add a valid documentType to createHierarchicalSchemas',
+  invalidReferenceTo: "Missing valid 'referenceTo' value",
+}
+
+export default function throwError(message: keyof typeof ERROR_MESSAGES, extraContext = ''): void {
+  throw new Error(`[hierarchical input] ${ERROR_MESSAGES[message]} ${extraContext}`)
+}

package/src/utils/treeData.tsx

@@ -0,0 +1,119 @@
+import {TreeItem} from '@nosferatu500/react-sortable-tree'
+import {randomKey} from '@sanity/util/content'
+import {SanityDocument} from 'sanity'
+import DocumentInNode from '../components/DocumentInNode'
+import NodeActions from '../components/NodeActions'
+import {
+  AllItems,
+  DocumentPair,
+  EnhancedTreeItem,
+  LocalTreeItem,
+  NodeProps,
+  StoredTreeItem,
+  VisibilityMap
+} from '../types'
+import flatDataToTree from './flatDataToTree'
+import {INTERNAL_NODE_TYPE, INTERNAL_NODE_VALUE_TYPE} from './injectNodeTypeInPatches'
+
+export const dataToEditorTree = ({
+  tree,
+  allItems,
+  visibilityMap
+}: {
+  tree: StoredTreeItem[]
+  allItems: AllItems
+  visibilityMap: VisibilityMap
+}): LocalTreeItem[] => {
+  const itemsWithTitle = tree
+    .filter((item) => item?.value?.reference?._ref)
+    .map((item) => {
+      const refId = item.value?.reference?._ref
+      const docPair = refId ? allItems[refId] : undefined
+      const draftDoc = docPair?.draft
+      const publishedDoc = docPair?.published
+
+      const enhancedItem: LocalTreeItem = {
+        ...item,
+        expanded: visibilityMap[item._key] !== false,
+        draftId: draftDoc?._id,
+        publishedId: publishedDoc?._id,
+        draftUpdatedAt: draftDoc?._updatedAt,
+        publishedUpdatedAt: publishedDoc?._updatedAt
+      }
+
+      return {
+        ...enhancedItem,
+        title: (nodeProps: NodeProps) => (
+          <DocumentInNode item={enhancedItem} action={<NodeActions nodeProps={nodeProps} />} />
+        ),
+        children: []
+      }
+    })
+  return flatDataToTree(itemsWithTitle)
+}
+
+const documentPairToNode = (doc?: DocumentPair): EnhancedTreeItem | undefined => {
+  if (!doc?.published?._id) {
+    return undefined
+  }
+
+  return {
+    _key: randomKey(12),
+    _type: INTERNAL_NODE_TYPE,
+    draftId: doc.draft?._id,
+    draftUpdatedAt: doc.draft?._updatedAt,
+    publishedId: doc.published._id,
+    publishedUpdatedAt: doc.published?._updatedAt,
+    value: {
+      _type: INTERNAL_NODE_VALUE_TYPE,
+      reference: {
+        _ref: doc.published._id,
+        _type: 'reference',
+        _weak: true
+      },
+      docType: doc.published._type
+    }
+  }
+}
+
+export const flatTree = (tree: TreeItem[]): TreeItem[] => {
+  return tree.reduce((flattened, item) => {
+    const {children, ...node} = item
+    return [...flattened, node, ...(Array.isArray(children) ? flatTree(children) : [])]
+  }, [] as TreeItem[])
+}
+
+export interface FetchData {
+  mainTree?: LocalTreeItem[]
+  allItems?: SanityDocument[]
+}
+
+export const getUnaddedItems = (data: {
+  allItems: AllItems
+  tree: StoredTreeItem[]
+}): EnhancedTreeItem[] => {
+  if (!data.tree) {
+    return Object.entries(data.allItems)
+      .map((value) => documentPairToNode(value[1]))
+      .filter(Boolean) as EnhancedTreeItem[]
+  }
+
+  return Object.entries(data.allItems)
+    .filter(
+      ([publishedId]) =>
+        publishedId &&
+        // unadded items shouldn't be in the tree
+        !data.tree.some((treeItem) => treeItem?.value?.reference?._ref === publishedId)
+    )
+    .map(([, documentPair]) => documentPairToNode(documentPair))
+    .filter(Boolean) as EnhancedTreeItem[]
+}
+
+export function normalizeNodeForStorage(item: LocalTreeItem): StoredTreeItem {
+  return {
+    _key: item._key,
+    _type: item._type || INTERNAL_NODE_TYPE,
+    value: item.value,
+    parent: item.parent
+  }
+}

package/src/utils/treePatches.ts

@@ -0,0 +1,171 @@
+import {
+  FlatDataItem,
+  FullTree,
+  getFlatDataFromTree,
+  NodeData,
+  TreeItem
+} from '@nosferatu500/react-sortable-tree'
+import {randomKey} from '@sanity/util/content'
+import * as Patch from 'sanity'
+import {LocalTreeItem, NodeProps} from '../types'
+import getAdjescentNodes from './getAdjescentNodes'
+import moveItemInArray from './moveItemInArray'
+import {normalizeNodeForStorage} from './treeData'
+
+export type HandleMovedNodeData = Omit<
+  NodeData & FullTree & any,
+  'prevPath' | 'prevTreeIndex' | 'path' | 'treeIndex' | 'node'
+> & {node: LocalTreeItem}
+
+export type HandleMovedNode = (moveData: HandleMovedNodeData) => void
+
+export function getAddItemPatch(item: LocalTreeItem): unknown[] {
+  const normalizedNode = normalizeNodeForStorage(item)
+
+  return [
+    // Add the node to the end of the tree
+    Patch.insert([normalizedNode], 'after', [-1])
+  ]
+}
+
+export function getDuplicateItemPatch(nodeProps: NodeProps): unknown[] {
+  const newItem = {
+    ...nodeProps.node,
+    _key: randomKey(12)
+  }
+  const normalizedNode = normalizeNodeForStorage(newItem)
+
+  return [
+    // Add duplicated node before the existing one
+    Patch.insert([normalizedNode], 'before', [{_key: nodeProps.node._key}])
+  ]
+}
+
+export function getRemoveItemPatch({node}: Pick<NodeProps, 'node'>): unknown[] {
+  const keyPath = {_key: node._key}
+  const children = getChildrenPaths(node)
+
+  return [
+    // 1. Unset the removed node
+    Patch.unset([keyPath]),
+
+    // 2. Unset its children
+    ...children.map((path) => Patch.unset([{_key: path}]))
+  ]
+}
+
+export function getMovedNodePatch(data: HandleMovedNodeData): unknown[] {
+  const {nextParentNode} = data
+  const keyPath = {_key: data.node._key}
+
+  // === REMOVING NODE FROM TREE ===
+  // `nextPath` will be null if the item is removed from tree
+  if (!Array.isArray(data.nextPath)) {
+    return getRemoveItemPatch({node: data.node})
+  }
+
+  const nextFlatTree = getFlatDataFromTree({
+    treeData: data.treeData,
+    getNodeKey: (t) => t.node._key
+  })
+  const normalizedNode = normalizeNodeForStorage(data.node)
+
+  const {leadingNode, followingNode} = getAdjescentNodes({
+    flatTree: nextFlatTree,
+    node: data.node,
+    treeIndex: data.nextTreeIndex
+  })
+
+  return [
+    // 1. Unset the moved node
+    // (will be ignored by Content Lake on new nodes with _key not yet in tree)
+    Patch.unset([keyPath]),
+
+    // 2. SIBLING-BASED PLACEMENT
+    // If we were to place solely based on nextTreeIndex, concurrent changes from other editors could put the new node in an unexpected position.
+    // Let's instead anchor it to the _key of the sibling coming before or after it.
+    leadingNode?.node?._key
+      ? // After the sibling before it
+        Patch.insert([normalizedNode], 'after', [{_key: leadingNode.node._key}])
+      : // Or before the sibling right after it, in case there's no leading sibling node
+        // prettier-ignore
+        Patch.insert([normalizedNode], 'before', [followingNode?.node?._key ? {_key: followingNode.node._key} : data.nextTreeIndex]),
+
+    // 3. Patch the new node with its new `parent`
+    nextParentNode
+      ? // If it has a parent node, set that parent's _key
+        Patch.set(nextParentNode._key, [keyPath, 'parent'])
+      : // Else remove the parent key entirely
+        Patch.unset([keyPath, 'parent'])
+  ]
+}
+
+function getChildrenPaths(node: TreeItem): string[] {
+  if (!Array.isArray(node.children)) {
+    return []
+  }
+
+  return node.children
+    .reduce(
+      (keyPaths, child) => [...keyPaths, child._key, ...getChildrenPaths(child)],
+      [] as string[]
+    )
+    .filter(Boolean)
+}
+
+export function getMoveItemPatch({
+  nodeProps: {node, treeIndex},
+  localTree,
+  direction = 'up'
+}: {
+  nodeProps: any
+  localTree: TreeItem[]
+  direction: 'up' | 'down'
+}): unknown[] {
+  const keyPath = {_key: node._key}
+
+  const nextTreeIndex = treeIndex + (direction === 'up' ? -1 : 1)
+
+  const flatTree = getFlatDataFromTree({
+    treeData: localTree,
+    getNodeKey: (t) => t.node._key
+  })
+  const nextFlatTree = moveItemInArray<FlatDataItem>({
+    array: flatTree,
+    fromIndex: treeIndex,
+    toIndex: nextTreeIndex
+  })
+  const {leadingNode, followingNode} = getAdjescentNodes({
+    flatTree: nextFlatTree,
+    node,
+    treeIndex: nextTreeIndex
+  })
+
+  const normalizedNode = normalizeNodeForStorage(node)
+
+  // When moving up, look at following node to figure out what is the next parent.
+  const nodeToInheritParent = direction === 'up' ? followingNode : leadingNode
+  const nextParentNode = nodeToInheritParent?.parentNode
+
+  return [
+    // 1. Unset the moved node
+    // (will be ignored by Content Lake on new nodes with _key not yet in tree)
+    Patch.unset([keyPath]),
+
+    // 2. SIBLING-BASED PLACEMENT
+    leadingNode?.node?._key
+      ? // After the sibling before it
+        Patch.insert([normalizedNode], 'after', [{_key: leadingNode.node._key}])
+      : // Or before the sibling right after it, in case there's no leading sibling node
+        Patch.insert([normalizedNode], 'before', [
+          followingNode?.node?._key ? {_key: followingNode.node._key} : nextTreeIndex
+        ]),
+
+    // 3. Patch the new node with its new `parent`
+    nextParentNode
+      ? // If it has a parent node, set that parent's _key
+        Patch.set(nextParentNode._key, [keyPath, 'parent'])
+      : // Else remove the parent key entirely
+        Patch.unset([keyPath, 'parent'])
+  ]
+}

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})

package/.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no -- commitlint --edit ""