@sanity/hierarchical-document-list 0.1.0-next.1

package/lib/utils/treePatches.d.ts

@@ -0,0 +1,13 @@
+import { FullTree, NodeData, NodeRendererProps, OnMovePreviousAndNextLocation, TreeItem } from 'react-sortable-tree';
+import { SanityTreeItem } from '../types';
+export declare type HandleMovedNodeData = Omit<NodeData & FullTree & OnMovePreviousAndNextLocation, 'prevPath' | 'prevTreeIndex' | 'path' | 'treeIndex'>;
+export declare type HandleMovedNode = (moveData: HandleMovedNodeData) => void;
+export declare function getAddItemPatch(item: SanityTreeItem): unknown[];
+export declare function getDuplicateItemPatch(nodeProps: NodeRendererProps): unknown[];
+export declare function getRemoveItemPatch({ node }: Pick<NodeRendererProps, 'node'>): unknown[];
+export declare function getMovedNodePatch(data: HandleMovedNodeData): unknown[];
+export declare function getMoveItemPatch({ nodeProps: { node, treeIndex, parentNode }, localTree, direction }: {
+    nodeProps: NodeRendererProps;
+    localTree: TreeItem[];
+    direction: 'up' | 'down';
+}): unknown[];

package/lib/utils/treePatches.js

@@ -0,0 +1,133 @@
+import * as Patch from '@sanity/form-builder/lib/patch/patches';
+import { randomKey } from '@sanity/util/content';
+import { getFlatDataFromTree } from 'react-sortable-tree';
+import getAdjescentNodes from './getAdjescentNodes';
+import moveItemInArray from './moveItemInArray';
+import { normalizeNodeForStorage } from './treeData';
+export function getAddItemPatch(item) {
+    const normalizedNode = normalizeNodeForStorage(item);
+    return [
+        // Add the node to the end of the tree
+        Patch.insert([normalizedNode], 'after', [-1])
+    ];
+}
+export function getDuplicateItemPatch(nodeProps) {
+    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 }) {
+    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) {
+    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
+                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) {
+    if (!Array.isArray(node.children)) {
+        return [];
+    }
+    return node.children
+        .reduce((keyPaths, child) => [...keyPaths, child._key, ...getChildrenPaths(child)], [])
+        .filter(Boolean);
+}
+export function getMoveItemPatch({ nodeProps: { node, treeIndex, parentNode }, localTree, direction = 'up' }) {
+    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({
+        array: flatTree,
+        fromIndex: treeIndex,
+        toIndex: nextTreeIndex
+    });
+    const { leadingNode, followingNode } = getAdjescentNodes({
+        flatTree: nextFlatTree,
+        node,
+        treeIndex: nextTreeIndex
+    });
+    const normalizedNode = normalizeNodeForStorage(node);
+    console.log(`Move ${direction}`, {
+        node,
+        treeIndex,
+        parentNode,
+        nextFlatTree,
+        flatTree,
+        localTree,
+        leadingSibling: leadingNode,
+        followingSibling: followingNode
+    });
+    // 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/lib/utils/useAllItems.d.ts

@@ -0,0 +1,7 @@
+import { AllItems, TreeInputOptions } from '../types';
+declare type Status = 'loading' | 'success' | 'error';
+export default function useAllItems(options: TreeInputOptions): {
+    status: Status;
+    allItems: AllItems;
+};
+export {};

package/lib/utils/useAllItems.js

@@ -0,0 +1,92 @@
+import sanityClient from 'part:@sanity/base/client';
+import React from 'react';
+import { isDraft, unprefixId } from './idUtils';
+const client = sanityClient.withConfig({
+    apiVersion: '2021-09-01'
+});
+function getDeskFilter({ referenceTo, referenceOptions }) {
+    const filterParts = ['_type in $docTypes'];
+    if (referenceOptions?.filter) {
+        filterParts.push(referenceOptions.filter);
+    }
+    return {
+        filter: filterParts.join(' && '),
+        params: {
+            ...(referenceOptions?.filterParams || {}),
+            docTypes: referenceTo.map((schemaType) => schemaType)
+        }
+    };
+}
+function updateItemInState(state, item) {
+    const newState = { ...state };
+    const publishedId = unprefixId(item._id);
+    newState[publishedId] = {
+        ...(newState[publishedId] || {}),
+        [isDraft(item._id) ? 'draft' : 'published']: item
+    };
+    return newState;
+}
+function allItemsReducer(state, action) {
+    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, {});
+    }
+    return state;
+}
+export default function useAllItems(options) {
+    const [status, setStatus] = React.useState('loading');
+    const [allItems, dispatch] = React.useReducer(allItemsReducer, {});
+    function handleListener(event) {
+        if (event.type !== 'mutation') {
+            return;
+        }
+        if (event.result) {
+            dispatch({ type: 'addOrEditItem', item: event.result });
+        }
+        else {
+            dispatch({ type: 'removeItem', itemId: event.documentId });
+        }
+    }
+    function handleFirstLoad(items) {
+        dispatch({ type: 'setInitialData', items });
+        setStatus('success');
+    }
+    React.useEffect(() => {
+        const { filter, params } = getDeskFilter(options);
+        const query = `*[${filter}] {
+      _id,
+      _type,
+      _updatedAt,
+    }`;
+        client
+            .fetch(query, params)
+            .then(handleFirstLoad)
+            .catch(() => {
+            setStatus('error');
+        });
+        const listener = client.listen(query, params).subscribe(handleListener);
+        return () => {
+            listener.unsubscribe();
+        };
+    }, []);
+    return {
+        status,
+        allItems
+    };
+}

package/lib/utils/useLocalTree.d.ts

@@ -0,0 +1,17 @@
+import { OnVisibilityToggleData, TreeItem } from 'react-sortable-tree';
+import { AllItems, SanityTreeItem } from '../types';
+/**
+ * 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 SanityTreeItem'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: SanityTreeItem[];
+    allItems: AllItems;
+}): {
+    handleVisibilityToggle: (data: OnVisibilityToggleData) => void;
+    localTree: TreeItem[];
+};

package/lib/utils/useLocalTree.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { dataToEditorTree } from './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 SanityTreeItem'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 }) {
+    const [visibilityMap, setVisibilityMap] = React.useState({});
+    function handleVisibilityToggle(data) {
+        setVisibilityMap({
+            ...visibilityMap,
+            [data.node._key]: data.expanded
+        });
+    }
+    return {
+        localTree: dataToEditorTree({
+            tree,
+            allItems,
+            visibilityMap
+        }),
+        handleVisibilityToggle
+    };
+}

package/lib/utils/useTreeOperations.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import useAllItems from './useAllItems';
+import useTreeOperationsProvider from './useTreeOperationsProvider';
+declare type ContextValue = ReturnType<typeof useTreeOperationsProvider> & {
+    allItemsStatus: ReturnType<typeof useAllItems>['status'];
+};
+export declare const TreeOperationsContext: React.Context<ContextValue>;
+export default function useTreeOperations(): ContextValue;
+export {};

package/lib/utils/useTreeOperations.js

@@ -0,0 +1,16 @@
+import React from 'react';
+function placeholder() {
+    // no-op
+}
+export const TreeOperationsContext = React.createContext({
+    addItem: placeholder,
+    duplicateItem: placeholder,
+    removeItem: placeholder,
+    handleMovedNode: placeholder,
+    moveItemDown: placeholder,
+    moveItemUp: placeholder,
+    allItemsStatus: 'loading'
+});
+export default function useTreeOperations() {
+    return React.useContext(TreeOperationsContext);
+}

package/lib/utils/useTreeOperationsProvider.d.ts

@@ -0,0 +1,15 @@
+import { NodeRendererProps, TreeItem } from 'react-sortable-tree';
+import { SanityTreeItem } from '../types';
+import { HandleMovedNode } from './treePatches';
+export default function useTreeOperationsProvider(props: {
+    patchPrefix?: string;
+    onChange: (patch: unknown) => void;
+    localTree: TreeItem[];
+}): {
+    handleMovedNode: HandleMovedNode;
+    addItem: (item: SanityTreeItem) => void;
+    duplicateItem: (nodeProps: NodeRendererProps) => void;
+    removeItem: (nodeProps: NodeRendererProps) => void;
+    moveItemUp: (nodeProps: NodeRendererProps) => void;
+    moveItemDown: (nodeProps: NodeRendererProps) => void;
+};

package/lib/utils/useTreeOperationsProvider.js

@@ -0,0 +1,52 @@
+import * as Patch from '@sanity/form-builder/lib/patch/patches';
+import PatchEvent from '@sanity/form-builder/PatchEvent';
+import { getAddItemPatch, getDuplicateItemPatch, getMovedNodePatch, getMoveItemPatch, getRemoveItemPatch } from './treePatches';
+export default function useTreeOperationsProvider(props) {
+    const { localTree } = props;
+    function runPatches(patches) {
+        const finalPatches = [
+            // Ensure tree array exists before any operation
+            Patch.setIfMissing([]),
+            ...(patches || [])
+        ];
+        let patchEvent = PatchEvent.from(finalPatches);
+        if (props.patchPrefix) {
+            patchEvent = PatchEvent.from(finalPatches.map((patch) => Patch.prefixPath(patch, props.patchPrefix)));
+        }
+        props.onChange(patchEvent);
+    }
+    function handleMovedNode(data) {
+        runPatches(getMovedNodePatch(data));
+    }
+    function addItem(item) {
+        runPatches(getAddItemPatch(item));
+    }
+    function duplicateItem(nodeProps) {
+        runPatches(getDuplicateItemPatch(nodeProps));
+    }
+    function removeItem(nodeProps) {
+        runPatches(getRemoveItemPatch(nodeProps));
+    }
+    function moveItemUp(nodeProps) {
+        runPatches(getMoveItemPatch({
+            nodeProps,
+            localTree,
+            direction: 'up'
+        }));
+    }
+    function moveItemDown(nodeProps) {
+        runPatches(getMoveItemPatch({
+            nodeProps,
+            localTree,
+            direction: 'down'
+        }));
+    }
+    return {
+        handleMovedNode,
+        addItem,
+        removeItem,
+        moveItemUp,
+        moveItemDown,
+        duplicateItem
+    };
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@sanity/hierarchical-document-list",
+  "version": "0.1.0-next.1",
+  "author": "Sanity <hello@sanity.io>",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sanity-io/hierarchical-document-list.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sanity-io/hierarchical-document-list/issues"
+  },
+  "homepage": "https://github.com/sanity-io/hierarchical-document-list#readme",
+  "scripts": {
+    "dev": "tsc -w -d",
+    "build": "tsc -d",
+    "format": "prettier src -w",
+    "lint": "eslint src"
+  },
+  "devDependencies": {
+    "@types/assert": "^1.5.6",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-sortable-tree": "^0.3.14",
+    "@types/styled-components": "^5.1.21",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
+    "eslint": "^8.7.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-sanity": "^5.1.0",
+    "prettier": "^2.5.1",
+    "styled-components": "^5.3.3",
+    "typescript": "^4.5.5"
+  },
+  "type": "module",
+  "dependencies": {
+    "@sanity/base": ">= 2.25.0",
+    "@sanity/color": "^2.1.6",
+    "@sanity/desk-tool": ">= 2.25.0",
+    "@sanity/form-builder": "^2.25.0",
+    "@sanity/icons": ">= 1.2.0",
+    "@sanity/ui": ">= 0.37.0",
+    "assert": "^2.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-sortable-tree": "^2.8.0"
+  },
+  "peerDependencies": {
+    "@sanity/base": ">= 2.25.0",
+    "@sanity/desk-tool": ">= 2.25.0",
+    "styled-components": ">= 5.2.0"
+  }
+}

package/sanity.json

@@ -0,0 +1,12 @@
+{
+  "paths": {
+    "source": "./src",
+    "compiled": "./lib"
+  },
+  "parts": [
+    {
+      "implements": "part:@sanity/base/schema-type",
+      "path": "hierarchy.tree.js"
+    }
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "outDir": "lib"
+  },
+  "include": ["./src"]
+}