@sanity/hierarchical-document-list 2.1.2 → 3.0.0

package/sanity.json

@@ -1,8 +0,0 @@
-{
-  "parts": [
-    {
-      "implements": "part:@sanity/base/sanity-root",
-      "path": "./v2-incompatible.js"
-    }
-  ]
-}

package/src/TreeDeskStructure.tsx

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

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

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

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

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

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

package/src/components/NodeContentRenderer.tsx

@@ -1,141 +0,0 @@
-import {isDescendant} from '@nosferatu500/react-sortable-tree'
-import {cyan, gray, red} from '@sanity/color'
-import {ChevronDownIcon, ChevronRightIcon, DragHandleIcon} from '@sanity/icons'
-import {Box, Button, Flex, Spinner} from '@sanity/ui'
-import * as React from 'react'
-import styled from 'styled-components'
-
-const Root = styled.div`
-  // Adapted from react-sortable-tree/style.css
-  &[data-landing='true'] > *,
-  &[data-cancel='true'] > * {
-    opacity: 0 !important;
-  }
-  &[data-landing='true']::before,
-  &[data-cancel='true']::before {
-    background-color: ${cyan[50].hex};
-    border: 2px dashed ${gray[400].hex};
-    border-radius: 3px;
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: -1;
-  }
-
-  &[data-cancel='true']::before {
-    background-color: ${red[50].hex};
-  }
-`
-
-/**
- * Customization of react-sortable-tree's default node.
- * Created in order to use Sanity UI for styles.
- * Reference: https://github.com/frontend-collective/react-sortable-tree/blob/master/src/node-renderer-default.js
- */
-const NodeContentRenderer: any = (props: any) => {
-  const {node, path, treeIndex, canDrag = false} = props
-  const nodeTitle = node.title
-  const Handle = React.useMemo(() => {
-    if (!canDrag) {
-      return null
-    }
-    if (typeof node.children === 'function' && node.expanded) {
-      // Show a loading symbol on the handle when the children are expanded
-      //  and yet still defined by a function (a callback to fetch the children)
-      return <Spinner />
-    }
-
-    const BtnElement = (
-      <div>
-        <Button
-          mode="bleed"
-          paddingX={0}
-          paddingY={1}
-          style={{
-            cursor: node.publishedId ? 'grab' : 'default',
-            fontSize: '1.5625rem'
-          }}
-          data-ui="DragHandleButton"
-          data-drag-handle={canDrag}
-          disabled={!node.publishedId}
-        >
-          <DragHandleIcon style={{marginBottom: '-0.1em'}} />
-        </Button>
-      </div>
-    )
-
-    // Don't allow editors to drag invalid documents
-    if (!node.publishedId) {
-      return BtnElement
-    }
-
-    // Show the handle used to initiate a drag-and-drop
-    return props.connectDragSource(BtnElement, {
-      dropEffect: 'copy'
-    })
-  }, [canDrag, node, typeof node.children === 'function'])
-
-  const isDraggedDescendant = props.draggedNode && isDescendant(props.draggedNode, node)
-  const isLandingPadActive = !props.didDrop && props.isDragging
-
-  return (
-    <Box style={{position: 'relative'}}>
-      {props.toggleChildrenVisibility &&
-        node.children &&
-        (node.children.length > 0 || typeof node.children === 'function') && (
-          <div
-            style={{
-              position: 'absolute',
-              left: '-2px',
-              top: '40%',
-              transform: 'translate(-100%, -50%)'
-            }}
-          >
-            <Button
-              aria-label={node.expanded ? 'Collapse' : 'Expand'}
-              icon={
-                node.expanded ? (
-                  <ChevronDownIcon color={gray[200].hex} />
-                ) : (
-                  <ChevronRightIcon color={gray[200].hex} />
-                )
-              }
-              mode="bleed"
-              fontSize={2}
-              padding={1}
-              type="button"
-              onClick={() =>
-                props.toggleChildrenVisibility?.({
-                  node,
-                  path,
-                  treeIndex
-                })
-              }
-            />
-          </div>
-        )}
-
-      {props.connectDragPreview(
-        <div>
-          <Root
-            data-landing={isLandingPadActive}
-            data-cancel={isLandingPadActive && !props.canDrop}
-            style={{
-              opacity: isDraggedDescendant ? 0.5 : 1
-            }}
-          >
-            <Flex align="center">
-              {Handle}
-              {typeof nodeTitle === 'function' ? nodeTitle(props) : nodeTitle}
-            </Flex>
-          </Root>
-        </div>
-      )}
-    </Box>
-  )
-}
-
-export default NodeContentRenderer

package/src/components/PlaceholderDropzone.tsx

@@ -1,45 +0,0 @@
-import {Box, Card, CardTone, Stack, Text} from '@sanity/ui'
-import * as React from 'react'
-
-const PlaceholderDropzone: React.FC<
-  {
-    tone?: CardTone
-    title: string
-    subtitle?: string
-  } & any
-> = (props) => {
-  const isValid = props.isOver && props.canDrop
-  const isInvalid = props.isOver && !props.canDrop
-  let tone: CardTone = 'transparent'
-  if (isValid) {
-    tone = 'positive'
-  }
-  if (isInvalid) {
-    tone = 'caution'
-  }
-  return (
-    <Box padding={3}>
-      <Card
-        padding={5}
-        radius={2}
-        border
-        tone={tone}
-        style={{
-          borderStyle: props.isOver ? undefined : 'dashed',
-        }}
-      >
-        <Stack space={2} style={{textAlign: 'center'}}>
-          <Text size={2} as="h2" muted>
-            {!props.isOver && props.title}
-            {isValid && 'Drop here'}
-            {isInvalid && 'Invalid location or element'}
-          </Text>
-          {props.subtitle && <Text size={1}>{props.subtitle}</Text>}
-          {props.children}
-        </Stack>
-      </Card>
-    </Box>
-  )
-}
-
-export default PlaceholderDropzone