@sanity/hierarchical-document-list 1.1.0 → 2.0.0

package/package.json

@@ -1,65 +1,94 @@
 {
   "name": "@sanity/hierarchical-document-list",
-  "version": "1.1.0",
-  "author": "Sanity <hello@sanity.io>",
-  "license": "MIT",
-  "main": "lib/index.js",
+  "version": "2.0.0",
+  "description": "Sanity Plugin - Hierarchical Document List",
+  "keywords": [
+    "sanity",
+    "sanity-plugin"
+  ],
+  "homepage": "https://github.com/sanity-io/hierarchical-document-list#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-io/hierarchical-document-list/issues"
+  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sanity-io/hierarchical-document-list.git"
+    "url": "git@github.com:sanity-io/hierarchical-document-list.git"
   },
-  "bugs": {
-    "url": "https://github.com/sanity-io/hierarchical-document-list/issues"
+  "license": "MIT",
+  "author": "Sanity <hello@sanity.io>",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.esm.js"
+    },
+    "./package.json": "./package.json"
   },
-  "homepage": "https://github.com/sanity-io/hierarchical-document-list#readme",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "sanity.json",
+    "src",
+    "v2-incompatible.js"
+  ],
   "scripts": {
-    "dev": "tsc -w -d",
-    "build": "tsc -d",
-    "format": "prettier src -w",
-    "lint": "eslint src",
     "prepare": "npm run build && husky install",
-    "clean": "rimraf lib",
-    "release": "standard-version",
-    "prepublishOnly": "npm run clean && npm run lint && npm run build"
-  },
-  "devDependencies": {
-    "@commitlint/cli": "^16.2.3",
-    "@commitlint/config-conventional": "^16.2.1",
-    "@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",
-    "@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",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.3.7",
-    "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
-    "standard-version": "^9.3.2",
-    "styled-components": "^5.3.3",
-    "typescript": "^4.5.5"
+    "build": "run-s clean && pkg-utils build --strict && pkg-utils --strict",
+    "prepublishOnly": "run-s build",
+    "clean": "rimraf dist",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "eslint .",
+    "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
-    "assert": "^2.0.0",
-    "react-sortable-tree": "^2.8.0"
+    "@nosferatu500/react-sortable-tree": "^4.4.0",
+    "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/mutator": "^3.19.3",
+    "@sanity/ui": "^1.9.3",
+    "@sanity/util": "^3.19.3",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@sanity/pkg-utils": "^3.3.2",
+    "@sanity/plugin-kit": "^3.1.10",
+    "@sanity/semantic-release-preset": "^4.1.6",
+    "@types/react": "^18.2.41",
+    "@types/styled-components": "^5.1.32",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-sanity": "^7.0.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.2.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.1.0",
+    "prettier-plugin-packagejson": "^2.4.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "rimraf": "^5.0.5",
+    "sanity": "^3.20.2",
+    "styled-components": "^5.3.11",
+    "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "@sanity/base": ">= 2.25.0",
-    "@sanity/desk-tool": ">= 2.25.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "styled-components": ">= 5.2.0"
+    "react": "^18",
+    "sanity": "^3"
+  },
+  "engines": {
+    "node": ">=14"
   }
 }

package/sanity.json

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

package/src/TreeDeskStructure.tsx

@@ -0,0 +1,80 @@
+import {Box, Flex, Spinner} from '@sanity/ui'
+import * as React from 'react'
+import {PatchEvent, useDocumentOperation, useEditState} from 'sanity'
+import DeskWarning from './components/DeskWarning'
+import TreeEditor from './components/TreeEditor'
+import {DocumentOperations, StoredTreeItem, TreeDeskStructureProps} from './types'
+import {toGradient} from './utils/gradientPatchAdapter'
+import injectNodeTypeInPatches, {DEFAULT_DOC_TYPE} from './utils/injectNodeTypeInPatches'
+
+interface ComponentProps {
+  options: TreeDeskStructureProps
+}
+
+export const DEFAULT_FIELD_KEY = 'tree'
+
+const TreeDeskStructure: React.FC<ComponentProps> = (props) => {
+  const treeDocType = props.options.documentType || DEFAULT_DOC_TYPE
+  const treeFieldKey = props.options.fieldKeyInDocument || DEFAULT_FIELD_KEY
+  const {published, draft, liveEdit} = useEditState(props.options.documentId, treeDocType)
+  const {patch} = useDocumentOperation(props.options.documentId, treeDocType) as DocumentOperations
+
+  const treeValue = (published?.[treeFieldKey] || []) as StoredTreeItem[]
+
+  const handleChange = React.useCallback(
+    (patchEvent: PatchEvent) => {
+      if (!patch?.execute) {
+        return
+      }
+      patch.execute(toGradient(injectNodeTypeInPatches(patchEvent.patches, treeDocType)))
+    },
+    [patch]
+  )
+
+  React.useEffect(() => {
+    if (!published?._id && patch?.execute && !patch?.disabled) {
+      // If no published document, create it
+      patch.execute([{setIfMissing: {[treeFieldKey]: []}}])
+    }
+  }, [published?._id, patch])
+
+  if (!liveEdit) {
+    return (
+      <DeskWarning
+        title="Invalid configuration"
+        subtitle="The `documentType` passed to `createDeskHiearchy` isn't live editable. \nTo continue using this plugin, add `liveEdit: true` to your custom schema type or unset `documentType` in your hierarchy configuration."
+      />
+    )
+  }
+
+  if (draft?._id) {
+    return (
+      <DeskWarning
+        title="This hierarchy tree contains a draft"
+        subtitle="Click on the button below to publish your draft in order to continue editing the live
+      published document."
+      />
+    )
+  }
+
+  if (!published?._id) {
+    return (
+      <Flex padding={5} align={'center'} justify={'center'} height={'fill'}>
+        <Spinner width={4} muted />
+      </Flex>
+    )
+  }
+
+  return (
+    <Box paddingBottom={5} paddingRight={2}>
+      <TreeEditor
+        options={props.options}
+        tree={treeValue}
+        onChange={handleChange}
+        patchPrefix={treeFieldKey}
+      />
+    </Box>
+  )
+}
+
+export default TreeDeskStructure

package/src/TreeInputComponent.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import {FormField, FormNodePresence, PatchEvent, Path} from 'sanity'
+import TreeEditor from './components/TreeEditor'
+import {StoredTreeItem, TreeFieldSchema} from './types'
+import injectNodeTypeInPatches, {DEFAULT_DOC_TYPE} from './utils/injectNodeTypeInPatches'
+
+export interface TreeInputComponentProps {
+  type: TreeFieldSchema
+  value: StoredTreeItem[]
+  level: number
+  onChange: (event: unknown) => void
+  onFocus: (path: Path) => void
+  onBlur: () => void
+  focusPath: Path
+  readOnly: boolean
+  presence: FormNodePresence[]
+}
+
+const TreeInputComponent: React.FC<TreeInputComponentProps> = (props) => {
+  const documentType = props.type.options.documentType || DEFAULT_DOC_TYPE
+
+  const onChange = React.useCallback(
+    (patch: any) => {
+      const patches = injectNodeTypeInPatches(patch?.patches, documentType)
+      props.onChange(new PatchEvent(patches))
+    },
+    [props.onChange]
+  )
+
+  return (
+    <FormField
+      description={props.type.description} // Creates description from schema
+      title={props.type.title} // Creates label from schema title
+      __unstable_presence={props.presence} // Handles presence avatars
+    >
+      <TreeEditor options={props.type.options} tree={props.value || []} onChange={onChange} />
+    </FormField>
+  )
+}
+
+export default TreeInputComponent

package/src/components/DeskWarning.tsx

@@ -0,0 +1,40 @@
+import {Box, Card, Container, Heading, Stack, Text} from '@sanity/ui'
+import * as React from 'react'
+
+// React component that wraps text between two delimiters in a <pre> tag
+
+const WrapCodeBlocks: React.FC<{text: string}> = ({text}) => {
+  return (
+    <>
+      {text.split('`').map((part, i) => (
+        <React.Fragment key={i}>{i % 2 === 0 ? part : <code>{part}</code>}</React.Fragment>
+      ))}
+    </>
+  )
+}
+
+const DeskWarning: React.FC<
+  React.PropsWithChildren<{
+    title: string
+    subtitle?: string
+  }>
+> = (props) => {
+  return (
+    <Container padding={5} style={{maxWidth: '25rem'}} sizing={'content'}>
+      <Card padding={4} border radius={2} width={0} tone="caution">
+        <Stack space={3}>
+          <Heading size={1}>{props.title}</Heading>
+          {props.subtitle &&
+            props.subtitle.split('\\n').map((line: string) => (
+              <Text size={1}>
+                <WrapCodeBlocks text={line} />
+              </Text>
+            ))}
+          {props.children && <Box marginTop={2}>{props.children}</Box>}
+        </Stack>
+      </Card>
+    </Container>
+  )
+}
+
+export default DeskWarning

package/src/components/DocumentInNode.tsx

@@ -0,0 +1,133 @@
+import {HelpCircleIcon} from '@sanity/icons'
+import {Box, Card, Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import * as React from 'react'
+import {Preview, SanityDocument, SchemaType, TextWithTone, useSchema} from 'sanity'
+import {RouterPaneGroup, usePaneRouter} from 'sanity/desk'
+import useTreeOperations from '../hooks/useTreeOperations'
+import {LocalTreeItem} from '../types'
+import DocumentPreviewStatus from './DocumentPreviewStatus'
+
+/**
+ * Renders a preview for each referenced document.
+ * Nested inside TreeNode.tsx
+ */
+const DocumentInNode: React.FC<{
+  item: LocalTreeItem
+  action?: React.ReactNode
+}> = (props) => {
+  const {value: {reference, docType} = {}, draftId, publishedId} = props.item
+  const {routerPanesState, ChildLink} = usePaneRouter()
+  const {allItemsStatus} = useTreeOperations()
+  const schema = useSchema()
+  const isActive = React.useMemo(() => {
+    // If some pane is active with the current document `_id`, it's active
+    return routerPanesState.some((pane: RouterPaneGroup) =>
+      pane.some((group) => group.id === reference?._ref)
+    )
+  }, [routerPanesState])
+
+  const type = React.useMemo(() => {
+    return docType ? schema.get(docType) : undefined
+  }, [docType])
+
+  const LinkComponent = React.useMemo(
+    () =>
+      React.forwardRef((linkProps: any, ref: any) => (
+        <ChildLink
+          {...linkProps}
+          childId={reference?._ref}
+          ref={ref}
+          childParameters={{
+            type: docType
+          }}
+        />
+      )),
+    [ChildLink, reference?._ref]
+  )
+
+  if (!reference?._ref) {
+    return null
+  }
+
+  return (
+    <Flex gap={2} align="center" style={{flex: 1}}>
+      {/* Show loading preview while allItems aren't ready */}
+      {publishedId || allItemsStatus !== 'success' ? (
+        /* Card loosely copied from @sanity/desk-tool's PaneItem.tsx */
+        <Card
+          __unstable_focusRing
+          as={LinkComponent}
+          tone={isActive ? 'primary' : 'default'}
+          padding={1}
+          radius={2}
+          flex={1}
+          data-as="a"
+          data-ui="PaneItem"
+        >
+          <Preview
+            layout="default"
+            schemaType={type as SchemaType}
+            value={{_ref: draftId || reference?._ref}}
+            status={
+              <DocumentPreviewStatus
+                draft={
+                  draftId
+                    ? ({
+                        _id: draftId,
+                        _type: docType,
+                        _updatedAt: props.item.draftUpdatedAt
+                      } as SanityDocument)
+                    : undefined
+                }
+                published={
+                  {
+                    _id: reference?._ref,
+                    _type: docType,
+                    _updatedAt: props.item.publishedUpdatedAt
+                  } as SanityDocument
+                }
+              />
+            }
+          />
+        </Card>
+      ) : (
+        <Card padding={3} radius={1} flex={1}>
+          <Flex align="center">
+            <Text size={2} muted style={{flex: 1}}>
+              Invalid document
+            </Text>
+            <Tooltip
+              placement="left"
+              portal
+              content={
+                <Box padding={3}>
+                  <Flex align="flex-start" gap={3}>
+                    <TextWithTone tone="default" size={3}>
+                      <HelpCircleIcon />
+                    </TextWithTone>
+                    <Stack space={3}>
+                      <Text as="h2" size={1} weight="semibold">
+                        This document is not valid
+                      </Text>
+                      {/* <Text size={1}>
+                        It was deleted or it doesn't match the filters set by this hierarchy.
+                      </Text> */}
+                      <Text size={1}>ID: {reference?._ref}</Text>
+                    </Stack>
+                  </Flex>
+                </Box>
+              }
+            >
+              <TextWithTone tone="default" size={2}>
+                <HelpCircleIcon />
+              </TextWithTone>
+            </Tooltip>
+          </Flex>
+        </Card>
+      )}
+      {props.action}
+    </Flex>
+  )
+}
+
+export default DocumentInNode

package/src/components/DocumentPreviewStatus.tsx

@@ -0,0 +1,70 @@
+import {EditIcon, PublishIcon} from '@sanity/icons'
+import {Box, Inline, Text, Tooltip} from '@sanity/ui'
+import * as React from 'react'
+import {SanityDocument, TextWithTone, useTimeAgo} from 'sanity'
+import {DocumentPair} from '../types'
+
+export function TimeAgo({time}: {time: string | Date}) {
+  const timeAgo = useTimeAgo(time)
+
+  return (
+    <span title={timeAgo}>
+      {timeAgo}
+      {timeAgo.toLowerCase().trim().startsWith('just now') ? '' : ' ago'}
+    </span>
+  )
+}
+
+const PublishedStatus = ({document}: {document?: SanityDocument | null}) => (
+  <Tooltip
+    portal
+    content={
+      <Box padding={2}>
+        <Text size={1}>
+          {document ? (
+            <>Published {document._updatedAt && <TimeAgo time={document._updatedAt} />}</>
+          ) : (
+            <>Not published</>
+          )}
+        </Text>
+      </Box>
+    }
+  >
+    <TextWithTone tone="positive" dimmed={!document} muted={!document} size={1}>
+      <PublishIcon />
+    </TextWithTone>
+  </Tooltip>
+)
+
+const DraftStatus = ({document}: {document?: SanityDocument | null}) => (
+  <Tooltip
+    portal
+    content={
+      <Box padding={2}>
+        <Text size={1}>
+          {document ? (
+            <>Edited {document?._updatedAt && <TimeAgo time={document?._updatedAt} />}</>
+          ) : (
+            <>No unpublished edits</>
+          )}
+        </Text>
+      </Box>
+    }
+  >
+    <TextWithTone tone="caution" dimmed={!document} muted={!document} size={1}>
+      <EditIcon />
+    </TextWithTone>
+  </Tooltip>
+)
+
+// Adapted from @sanity\desk-tool\src\components\paneItem\helpers.tsx
+const DocumentPreviewStatus: React.FC<DocumentPair> = ({draft, published}) => {
+  return (
+    <Inline space={4}>
+      <PublishedStatus document={published} />
+      <DraftStatus document={draft} />
+    </Inline>
+  )
+}
+
+export default DocumentPreviewStatus

package/src/components/NodeActions.tsx

@@ -0,0 +1,85 @@
+import {CopyIcon, EllipsisVerticalIcon, LaunchIcon, RemoveCircleIcon} from '@sanity/icons'
+import {Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
+import * as React from 'react'
+import {IntentButton as IntentLink} from 'sanity'
+import useTreeOperations from '../hooks/useTreeOperations'
+import {NodeProps} from '../types'
+
+/**
+ * Applicable only to nodes inside the main tree.
+ * Unadded items have their actions defined in TreeEditor.
+ */
+const NodeActions: React.FC<{nodeProps: NodeProps}> = ({nodeProps}) => {
+  const operations = useTreeOperations()
+  const {node} = nodeProps
+  const {reference, docType} = node?.value || {}
+
+  // Adapted from @sanity\form-builder\src\inputs\ReferenceInput\ArrayItemReferenceInput.tsx
+  const OpenLink = React.useMemo(
+    () =>
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      React.forwardRef(function OpenLinkInner(
+        restProps: React.ComponentProps<typeof IntentLink>,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        _ref: React.ForwardedRef<HTMLAnchorElement>
+      ) {
+        return (
+          <IntentLink
+            {...restProps}
+            intent="edit"
+            params={{id: reference?._ref, type: docType}}
+            target="_blank"
+            rel="noopener noreferrer"
+          />
+        )
+      }),
+    [reference?._ref, docType]
+  )
+
+  const isValid = !!node.publishedId
+  return (
+    <MenuButton
+      button={<Button padding={2} mode="bleed" icon={EllipsisVerticalIcon} />}
+      id={`hiearchical-doc-list--${node._key}-menuButton`}
+      menu={
+        <Menu>
+          <MenuItem
+            text="Remove from list"
+            tone="critical"
+            icon={RemoveCircleIcon}
+            onClick={() => operations.removeItem(nodeProps)}
+          />
+          <MenuItem
+            text="Duplicate item"
+            icon={CopyIcon}
+            disabled={!isValid}
+            onClick={() => operations.duplicateItem(nodeProps)}
+          />
+          {/* <MenuItem
+            text="Move up"
+            icon={ArrowUpIcon}
+            disabled={!isValid}
+            onClick={() => operations.moveItemUp(nodeProps)}
+          />
+          <MenuItem
+            text="Move down"
+            icon={ArrowDownIcon}
+            disabled={!isValid}
+            onClick={() => operations.moveItemDown(nodeProps)}
+          /> */}
+          <MenuDivider />
+          <MenuItem
+            text="Open in new tab"
+            icon={LaunchIcon}
+            disabled={!isValid}
+            as={OpenLink}
+            data-as="a"
+          />
+        </Menu>
+      }
+      popover={{portal: true, tone: 'default', placement: 'right'}}
+    />
+  )
+}
+
+export default NodeActions