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

package/lib/components/TreeEditorErrorBoundary.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useToast } from '@sanity/ui';
+import React from 'react';
+const ErrorToast = ({ error }) => {
+    const { push } = useToast();
+    React.useEffect(() => {
+        if (error?.title) {
+            push({
+                title: error.title,
+                description: error.description,
+                closable: true,
+                status: 'error',
+                id: 'hierarchical-error'
+            });
+        }
+    }, [error]);
+    return null;
+};
+class TreeEditorErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { error: undefined };
+    }
+    static getDerivedStateFromError(error) {
+        if (!error) {
+            return {
+                error: undefined
+            };
+        }
+        return {
+            error: {
+                title: 'Something went wrong'
+            }
+        };
+    }
+    render() {
+        return (_jsxs(React.Fragment, { children: [_jsx(ErrorToast, { error: this.state.error }, void 0), this.props.children] }, void 0));
+    }
+}
+export default TreeEditorErrorBoundary;

package/lib/components/TreeNodeRenderer.d.ts

@@ -0,0 +1,3 @@
+import { TreeRenderer } from 'react-sortable-tree';
+declare const TreeNodeRenderer: TreeRenderer;
+export default TreeNodeRenderer;

package/lib/components/TreeNodeRenderer.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import TreeNodeRendererScaffold from './TreeNodeRendererScaffold';
+/**
+ * To prevent expand buttons from overflowing on the left, we add a minimum left padding to all entries
+ */
+const BASE_LEFT_PADDING = 10;
+const NESTING_PADDING = 14;
+const TreeNodeRenderer = (props) => {
+    const { children, lowerSiblingCounts, connectDropTarget, isOver, draggedNode, canDrop } = props;
+    // Construct the scaffold representing the structure of the tree
+    const scaffoldBlockCount = lowerSiblingCounts.length;
+    return connectDropTarget(_jsxs("div", { style: props.style, children: [_jsx("div", { style: {
+                    // prettier-ignore
+                    paddingLeft: `${BASE_LEFT_PADDING + (NESTING_PADDING * scaffoldBlockCount)}px`
+                }, children: React.Children.map(children, (child) => React.cloneElement(child, {
+                    isOver,
+                    canDrop,
+                    draggedNode
+                })) }, void 0), _jsx(TreeNodeRendererScaffold, { ...props }, void 0)] }, void 0));
+};
+export default TreeNodeRenderer;

package/lib/components/TreeNodeRendererScaffold.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TreeRendererProps } from 'react-sortable-tree';
+declare const TreeNodeRendererScaffold: React.FC<TreeRendererProps>;
+export default TreeNodeRendererScaffold;

package/lib/components/TreeNodeRendererScaffold.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { blue } from '@sanity/color';
+import { createGlobalStyle } from 'styled-components';
+// Adapted from react-sortable-tree/src/tree-node.js
+const ScaffoldStyles = createGlobalStyle `
+  .rst__lineBlock,
+  .rst__absoluteLineBlock {
+    height: 100%;
+    position: relative;
+    display: inline-block;
+    --stroke-width: 3px;
+  }
+
+  .rst__absoluteLineBlock {
+    position: absolute;
+    top: 0;
+  }
+
+  /* Highlight line for pointing to dragged row destination
+   ========================================================================== */
+  /**
+ * +--+--+
+ * |  |  |
+ * |  |  |
+ * |  |  |
+ * +--+--+
+ */
+  .rst__highlightLineVertical {
+    z-index: 3;
+  }
+  .rst__highlightLineVertical::before {
+    position: absolute;
+    content: '';
+    background-color: ${blue[400].hex};
+    width: calc(var(--stroke-width) * 2);
+    margin-left: calc(var(--stroke-width) * -1);
+    left: 50%;
+    top: 0;
+    height: 100%;
+  }
+
+  @keyframes arrow-pulse {
+    0% {
+      transform: translate(0, 0);
+      opacity: 0;
+    }
+    30% {
+      transform: translate(0, 300%);
+      opacity: 1;
+    }
+    70% {
+      transform: translate(0, 700%);
+      opacity: 1;
+    }
+    100% {
+      transform: translate(0, 1000%);
+      opacity: 0;
+    }
+  }
+  .rst__highlightLineVertical::after {
+    content: '';
+    position: absolute;
+    height: 0;
+    margin-left: calc(var(--stroke-width) * -1);
+    left: 50%;
+    top: 0;
+    border-left: var(--stroke-width) solid transparent;
+    border-right: var(--stroke-width) solid transparent;
+    border-top: var(--stroke-width) solid white;
+    animation: arrow-pulse 1s infinite linear both;
+  }
+
+  /**
+ * +-----+
+ * |     |
+ * |  +--+
+ * |  |  |
+ * +--+--+
+ */
+  .rst__highlightTopLeftCorner::before {
+    z-index: 3;
+    content: '';
+    position: absolute;
+    border-top: solid calc(var(--stroke-width) * 2) ${blue[400].hex};
+    border-left: solid calc(var(--stroke-width) * 2) ${blue[400].hex};
+    box-sizing: border-box;
+    height: calc(50% + var(--stroke-width));
+    top: 50%;
+    margin-top: calc(var(--stroke-width) * -1);
+    right: 0;
+    width: calc(50% + var(--stroke-width));
+  }
+
+  /**
+ * +--+--+
+ * |  |  |
+ * |  |  |
+ * |  +->|
+ * +-----+
+ */
+  .rst__highlightBottomLeftCorner {
+    z-index: 3;
+  }
+  .rst__highlightBottomLeftCorner::before {
+    content: '';
+    position: absolute;
+    border-bottom: solid calc(var(--stroke-width) * 2) ${blue[400].hex};
+    border-left: solid calc(var(--stroke-width) * 2) ${blue[400].hex};
+    box-sizing: border-box;
+    height: calc(100% + var(--stroke-width));
+    top: 0;
+    right: calc(var(--stroke-width) * 3);
+    width: calc(50% - calc(var(--stroke-width) * 2));
+  }
+
+  .rst__highlightBottomLeftCorner::after {
+    content: '';
+    position: absolute;
+    height: 0;
+    right: 0;
+    top: 100%;
+    margin-top: calc(var(--stroke-width) * -3);
+    border-top: calc(var(--stroke-width) * 3) solid transparent;
+    border-bottom: calc(var(--stroke-width) * 3) solid transparent;
+    border-left: calc(var(--stroke-width) * 3) solid ${blue[400].hex};
+  }
+
+  .rst__unclickable {
+    pointer-events: none;
+    margin-top: -calc(var(--stroke-width) * 3);
+  }
+`;
+const TreeNodeRendererScaffold = (props) => {
+    const { lowerSiblingCounts, scaffoldBlockPxWidth, listIndex, swapDepth, swapFrom, swapLength, treeIndex } = props;
+    // Construct the scaffold representing the structure of the tree
+    const scaffold = lowerSiblingCounts.map((lowerSiblingCount, i) => {
+        if (lowerSiblingCount < 0 || treeIndex === listIndex || i !== swapDepth) {
+            return null;
+        }
+        // This row has been shifted, and is at the depth of
+        // the line pointing to the new destination
+        let highlightLineClass = '';
+        if (listIndex === (swapFrom || 0) + (swapLength || 0) - 1) {
+            // This block is on the bottom (target) line
+            // This block points at the target block (where the row will go when released)
+            highlightLineClass = 'rst__highlightBottomLeftCorner';
+        }
+        else if (treeIndex === swapFrom) {
+            // This block is on the top (source) line
+            highlightLineClass = 'rst__highlightTopLeftCorner';
+        }
+        else {
+            // This block is between the bottom and top
+            highlightLineClass = 'rst__highlightLineVertical';
+        }
+        const style = {
+            width: scaffoldBlockPxWidth,
+            left: scaffoldBlockPxWidth * i
+        };
+        return (_jsx("div", { style: style, className: `rst__unclickable rst__absoluteLineBlock ${highlightLineClass || ''}`, tabIndex: -1 }, i));
+    });
+    return (_jsxs(_Fragment, { children: [scaffold, _jsx(ScaffoldStyles, {}, void 0)] }, void 0));
+};
+export default TreeNodeRendererScaffold;

package/lib/createDeskHierarchy.d.ts

@@ -0,0 +1,10 @@
+import { TreeDeskStructureProps } from './types';
+interface TreeProps extends TreeDeskStructureProps {
+    /**
+     * Visible title above the tree.
+     * Also used as the label in the desk list item.
+     */
+    title: string;
+}
+export default function createDeskHierarchy(props: TreeProps): import("@sanity/structure/dist/dts/ListItem").ListItemBuilder;
+export {};

package/lib/createDeskHierarchy.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import S from '@sanity/desk-tool/structure-builder';
+import { AddIcon } from '@sanity/icons';
+import TreeDeskStructure from './TreeDeskStructure';
+const deskTreeValidator = (props) => {
+    const { documentId, referenceTo } = props;
+    if (typeof documentId !== 'string' && !documentId) {
+        throw new Error('[hierarchical input] Please add a documentId to your tree');
+    }
+    if (!Array.isArray(referenceTo)) {
+        throw new Error(`[hierarchical input] Missing valid 'referenceTo' in createDeskHierarchy (documentId "${documentId}")`);
+    }
+    return (deskProps) => _jsx(TreeDeskStructure, { ...deskProps, options: props }, void 0);
+};
+export default function createDeskHierarchy(props) {
+    const { documentId, referenceTo, referenceOptions } = props;
+    let mainList = (referenceTo?.length === 1
+        ? S.documentTypeList(referenceTo[0]).schemaType(referenceTo[0])
+        : S.documentList())
+        .id(documentId)
+        .menuItems((referenceTo || []).map((schemaType) => S.menuItem()
+        .intent({
+        type: 'create',
+        params: { type: schemaType, template: schemaType }
+    })
+        // @TODO: get the title for each schema type
+        .title(schemaType)
+        .icon(AddIcon)))
+        .canHandleIntent((intent, context) => {
+        if (intent === 'edit' && context.id === props.documentId) {
+            return true;
+        }
+        if (intent === 'create' && referenceTo.includes(context.type)) {
+            return true;
+        }
+        return false;
+    });
+    if (referenceOptions?.filter) {
+        mainList = mainList.filter(referenceOptions.filter);
+    }
+    if (referenceOptions?.filterParams) {
+        mainList = mainList.params(referenceOptions.filterParams);
+    }
+    return S.listItem()
+        .id(documentId)
+        .title(props.title || documentId)
+        .child(Object.assign(mainList.serialize(), {
+        type: 'component',
+        component: deskTreeValidator(props),
+        options: props
+    }, props.title ? { title: props.title } : {}));
+}

package/lib/createHierarchicalField.d.ts

@@ -0,0 +1,8 @@
+import { ArraySchemaType } from '@sanity/types';
+import React from 'react';
+import { TreeFieldSchema } from './types';
+export default function createHierarchicalField({ name, title, options, ...rest }: TreeFieldSchema): Omit<ArraySchemaType, 'type' | 'jsonType' | 'of'> & {
+    type: string;
+    inputComponent: React.FC<any>;
+    of: any[];
+};

package/lib/createHierarchicalField.js

@@ -0,0 +1,30 @@
+import TreeInputComponent from './TreeInputComponent';
+export default function createHierarchicalField({ name, title, options, ...rest }) {
+    if (!Array.isArray(options?.referenceTo)) {
+        throw new Error(`[hierarchical input] Missing valid options.referenceTo in createHierarchicalField (field of name "${name}")`);
+    }
+    return {
+        ...rest,
+        options,
+        name,
+        title,
+        type: 'array',
+        of: [
+            {
+                type: 'object',
+                fields: [
+                    { name: 'parent', type: 'string' },
+                    { name: 'nodeDocType', type: 'string' },
+                    {
+                        name: 'node',
+                        type: 'reference',
+                        weak: true,
+                        to: options.referenceTo.map((type) => ({ type })),
+                        options: options.referenceOptions
+                    }
+                ]
+            }
+        ],
+        inputComponent: TreeInputComponent
+    };
+}

package/lib/hiearchy.tree.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+declare const _default: {
+    name: string;
+    title: string;
+    type: string;
+    liveEdit: boolean;
+    fields: (Omit<import("@sanity/types/dist/dts").ArraySchemaType<unknown>, "type" | "of" | "jsonType"> & {
+        type: string;
+        inputComponent: import("react").FC<any>;
+        of: any[];
+    })[];
+    preview: {
+        select: {
+            id: string;
+            tree: string;
+        };
+        prepare({ id, tree }: {
+            id: string;
+            tree: unknown[];
+        }): Record<string, string>;
+    };
+};
+export default _default;

package/lib/hiearchy.tree.js

@@ -0,0 +1,28 @@
+import createHierarchicalField from './createHierarchicalField';
+export default {
+    name: 'hierarchy.tree',
+    title: 'Hierarchical tree',
+    type: 'document',
+    liveEdit: true,
+    fields: [
+        createHierarchicalField({
+            name: 'tree',
+            title: 'Tree',
+            options: {
+                referenceTo: ['document']
+            }
+        })
+    ],
+    preview: {
+        select: {
+            id: '_id',
+            tree: 'tree'
+        },
+        prepare({ id, tree }) {
+            return {
+                title: `Hierarchical documents (ID: ${id})`,
+                subtitle: `${tree?.length || 0} document(s) in its list.`
+            };
+        }
+    }
+};

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { default as createHierarchicalField } from './createHierarchicalField';
+export { default as createDeskHierarchy } from './createDeskHierarchy';
+export { default as flatDataToTree } from './utils/flatDataToTree';

package/lib/index.js

@@ -0,0 +1,3 @@
+export { default as createHierarchicalField } from './createHierarchicalField';
+export { default as createDeskHierarchy } from './createDeskHierarchy';
+export { default as flatDataToTree } from './utils/flatDataToTree';

package/lib/utils/flatDataToTree.d.ts

@@ -0,0 +1,6 @@
+import { SanityTreeItem } from '../types';
+interface TreeItemWithChildren extends SanityTreeItem {
+    children?: TreeItemWithChildren[];
+}
+export default function flatDataToTree(data: SanityTreeItem[]): TreeItemWithChildren[];
+export {};

package/lib/utils/flatDataToTree.js

@@ -0,0 +1,14 @@
+import { getTreeFromFlatData } from 'react-sortable-tree';
+export default function flatDataToTree(data) {
+    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
+    });
+}

package/lib/utils/getAdjescentNodes.d.ts

@@ -0,0 +1,12 @@
+import { FlatDataItem, TreeItem } from '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;
+};

package/lib/utils/getAdjescentNodes.js

@@ -0,0 +1,15 @@
+/**
+ * Gets adjescent non-children nodes of a given treeIndex.
+ */
+export default function getAdjescentNodes({ flatTree, node, treeIndex }) {
+    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/lib/utils/getCommonTreeProps.d.ts

@@ -0,0 +1,7 @@
+import { ReactSortableTreeProps } from 'react-sortable-tree';
+export default function getCommonTreeProps({ placeholder }: {
+    placeholder: {
+        title: string;
+        subtitle?: string;
+    };
+}): Partial<ReactSortableTreeProps>;

package/lib/utils/getCommonTreeProps.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 }) {
+    return {
+        theme: {
+            nodeContentRenderer: NodeContentRenderer,
+            placeholderRenderer: (props) => _jsx(PlaceholderDropzone, { ...placeholder, ...props }, void 0),
+            treeNodeRenderer: TreeNodeRenderer,
+            rowHeight: ROW_HEIGHT
+        }
+    };
+}

package/lib/utils/getTreeHeight.d.ts

@@ -0,0 +1,3 @@
+import { TreeItem } from 'react-sortable-tree';
+export declare const ROW_HEIGHT = 51;
+export default function getTreeHeight(treeData: TreeItem[]): string;

package/lib/utils/getTreeHeight.js

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

package/lib/utils/gradientPatchAdapter.d.ts

@@ -0,0 +1,4 @@
+declare type Patch = Record<string, any>;
+declare type GradientPatch = Record<string, any>;
+export declare function toGradient(patches: Patch[]): GradientPatch[];
+export {};

package/lib/utils/gradientPatchAdapter.js

@@ -0,0 +1,34 @@
+// Adapted from @sanity/form-builder/src/sanity/utils/gradientPatchAdapter.ts
+import assert from 'assert';
+import { arrayToJSONMatchPath } from '@sanity/mutator';
+export function toGradient(patches) {
+    return patches.map(toGradientPatch);
+}
+function toGradientPatch(patch) {
+    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]
+        };
+    }
+    assert(patch.type, `Missing patch type in patch ${JSON.stringify(patch)}`);
+    if (matchPath) {
+        return {
+            [patch.type]: {
+                [matchPath]: patch.value
+            }
+        };
+    }
+    return {
+        [patch.type]: patch.value
+    };
+}

package/lib/utils/idUtils.d.ts

@@ -0,0 +1,2 @@
+export declare function unprefixId(_id?: string): string;
+export declare function isDraft(_id?: string): boolean;

package/lib/utils/idUtils.js

@@ -0,0 +1,6 @@
+export function unprefixId(_id = '') {
+    return _id.replace('drafts.', '');
+}
+export function isDraft(_id = '') {
+    return _id.startsWith('drafts.');
+}

package/lib/utils/moveItemInArray.d.ts

@@ -0,0 +1,5 @@
+export default function moveItemInArray<ItemType = unknown>({ array, fromIndex, toIndex }: {
+    array: ItemType[];
+    fromIndex: number;
+    toIndex: number;
+}): ItemType[];

package/lib/utils/moveItemInArray.js

@@ -0,0 +1,13 @@
+export default function moveItemInArray({ array, fromIndex, toIndex }) {
+    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/lib/utils/treeData.d.ts

@@ -0,0 +1,18 @@
+import { SanityDocument } from '@sanity/client';
+import { TreeItem } from 'react-sortable-tree';
+import { AllItems, SanityTreeItem, VisibilityMap } from '../types';
+export declare const dataToEditorTree: ({ tree, allItems, visibilityMap }: {
+    tree: SanityTreeItem[];
+    allItems: AllItems;
+    visibilityMap: VisibilityMap;
+}) => TreeItem[];
+export declare const flatTree: (tree: TreeItem[]) => TreeItem[];
+export interface FetchData {
+    mainTree?: SanityTreeItem[];
+    allItems?: SanityDocument[];
+}
+export declare const getUnaddedItems: (data: {
+    allItems: AllItems;
+    tree: SanityTreeItem[];
+}) => SanityTreeItem[];
+export declare function normalizeNodeForStorage(item: TreeItem): SanityTreeItem;

package/lib/utils/treeData.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { randomKey } from '@sanity/util/content';
+import DocumentInNode from '../components/DocumentInNode';
+import NodeActions from '../components/NodeActions';
+import flatDataToTree from './flatDataToTree';
+export const dataToEditorTree = ({ tree, allItems, visibilityMap }) => {
+    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 = {
+            ...item,
+            expanded: visibilityMap[item._key] !== false,
+            draftId: draftDoc?._id,
+            publishedId: publishedDoc?._id,
+            draftUpdatedAt: draftDoc?._updatedAt,
+            publishedUpdatedAt: publishedDoc?._updatedAt
+        };
+        return {
+            ...enhancedItem,
+            title: (nodeProps) => (_jsx(DocumentInNode, { item: enhancedItem, action: _jsx(NodeActions, { nodeProps: nodeProps }, void 0) }, void 0)),
+            children: []
+        };
+    });
+    return flatDataToTree(itemsWithTitle);
+};
+const documentPairToNode = (doc) => {
+    if (!doc?.published?._id) {
+        return undefined;
+    }
+    return {
+        _key: randomKey(12),
+        _type: 'hierarchy.node',
+        draftId: doc.draft?._id,
+        draftUpdatedAt: doc.draft?._updatedAt,
+        publishedId: doc.published._id,
+        publishedUpdatedAt: doc.published?._updatedAt,
+        value: {
+            reference: {
+                _ref: doc.published._id,
+                _type: 'reference',
+                _weak: true
+            },
+            docType: doc.published._type
+        }
+    };
+};
+export const flatTree = (tree) => {
+    return tree.reduce((flattened, item) => {
+        const { children, ...node } = item;
+        return [...flattened, node, ...(Array.isArray(children) ? flatTree(children) : [])];
+    }, []);
+};
+export const getUnaddedItems = (data) => {
+    if (!data.tree) {
+        return Object.entries(data.allItems)
+            .map((value) => documentPairToNode(value[1]))
+            .filter(Boolean);
+    }
+    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(([_publishedId, documentPair]) => documentPairToNode(documentPair))
+        .filter(Boolean);
+};
+export function normalizeNodeForStorage(item) {
+    return {
+        _key: item._key,
+        _type: item._type || 'hierarchy.node',
+        value: item.value,
+        parent: item.parent
+    };
+}