sanity-plugin-taxonomy-manager 4.7.2 → 5.0.0

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "sanity-plugin-taxonomy-manager",
-  "version": "4.7.2",
+  "version": "5.0.0",
+  "type": "module",
   "description": "Create and manage SKOS compliant taxonomies, thesauri, and classification schemes in Sanity Studio.",
   "keywords": [
     "sanity",
@@ -24,89 +25,82 @@
   "exports": {
     ".": {
       "source": "./src/index.ts",
-      "import": "./lib/index.esm.mjs",
-      "require": "./lib/index.js",
-      "default": "./lib/index.esm.mjs"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "./lib/index.js",
-  "module": "./lib/index.esm.js",
-  "types": "./lib/index.d.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "lib",
-    "sanity.json",
-    "src",
-    "v2-incompatible.js"
+    "dist",
+    "src"
   ],
   "scripts": {
-    "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
-    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
-    "clean": "rimraf lib",
-    "link-watch": "plugin-kit link-watch",
-    "lint": "eslint .",
-    "prepublishOnly": "npm run build",
+    "build": "pkg-utils build --strict --check --clean",
     "watch": "pkg-utils watch --strict",
+    "dev": "pnpm --filter studio dev",
+    "lint": "eslint .",
     "format": "prettier --write --cache --ignore-unknown .",
-    "test": "vitest",
-    "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "test:watch": "vitest --watch"
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "prepare": "husky",
+    "prepublishOnly": "pnpm run build"
   },
   "dependencies": {
     "@sanity/color": "^3.0.0",
     "@sanity/icons": "^3.4.0",
     "@sanity/id-utils": "^1.0.0",
-    "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^2.8.9",
+    "@sanity/uuid": "^3.0.2",
     "nanoid": "^5.1.5",
     "react-fast-compare": "^3.2.2",
     "react-icons": "^5.5.0",
-    "rxjs": "^7.8.1",
-    "styled-components": "^6.1.19"
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
+    "@commitlint/cli": "^21.0.2",
+    "@commitlint/config-conventional": "^21.0.2",
+    "@sanity/eslint-config-studio": "^6.0.0",
     "@sanity/pkg-utils": "^6.10.10",
-    "@sanity/plugin-kit": "^4.0.19",
+    "@sanity/semantic-release-preset": "^6.0.0",
+    "@sanity/ui": "^3.2.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "@vitejs/plugin-react": "^4.6.0",
-    "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^8.38.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-sanity": "^6.0.0",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "globals": "^17.6.0",
+    "husky": "^9.1.7",
     "jsdom": "^26.1.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.7",
+    "lint-staged": "^17.0.7",
+    "prettier": "^3.8.4",
+    "prettier-plugin-packagejson": "^3.0.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-is": "^18.2.0",
-    "rimraf": "^5.0.5",
     "rollup-plugin-postcss": "^4.0.2",
-    "sanity": "^4.10.1",
-    "sanity-plugin-utils": "^1.7.0",
+    "sanity": "^6.6.0",
+    "sanity-plugin-utils": "^2.0.3",
+    "semantic-release": "^25.0.5",
+    "styled-components": "^6.1.19",
     "typescript": "^5.9.2",
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
-    "react": ">=18 <20 || ^19",
-    "react-dom": ">=18 <20 || ^19",
-    "sanity": "^4.0.0 || ^5.0.0-0"
+    "@sanity/ui": "^3",
+    "react": "^19",
+    "react-dom": "^19",
+    "sanity": "^5 || ^6",
+    "styled-components": "^5.2 || ^6"
   },
   "engines": {
     "node": ">=20"
   },
+  "packageManager": "pnpm@10.11.0",
   "sanityExchangeUrl": "https://www.sanity.io/plugins/taxonomy-manager",
   "sanityPlugin": {
     "verifyPackage": {

package/src/components/Children.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable complexity */
 import {Inline, Box, Flex} from '@sanity/ui'
 import {useCallback, useContext, useState} from 'react'
 
@@ -33,7 +32,7 @@ export const Children = ({
   inputComponent: boolean
 }) => {
   const document: ConceptSchemeDocument = useContext(SchemeContext) || ({} as ConceptSchemeDocument)
-  const releaseContext: string = useContext(ReleaseContext) as string
+  const releaseContext = useContext(ReleaseContext)
   const {globalVisibility: {treeVisibility} = {treeVisibility: 'open' as const}} =
     useContext(TreeContext) || {}
   const createConcept = useCreateConcept(document)
@@ -48,7 +47,9 @@ export const Children = ({
   }, [concept.id, concept?.prefLabel, removeConcept])
 
   const [levelVisibility, setLevelVisibility] = useState<'open' | 'closed'>(
-    treeVisibility === 'closed' && concept.hasMatchingDescendant ? 'open' : treeVisibility || 'open'
+    treeVisibility === 'closed' && concept.hasMatchingDescendant
+      ? 'open'
+      : treeVisibility || 'open',
   )
 
   const handleToggle = useCallback(() => {

package/src/components/Concepts.tsx

@@ -34,7 +34,7 @@ export const Concepts = ({
   selectConcept,
 }: ConceptProps) => {
   const document: ConceptSchemeDocument = useContext(SchemeContext) || ({} as ConceptSchemeDocument)
-  const releaseContext: string = useContext(ReleaseContext) as string
+  const releaseContext = useContext(ReleaseContext)
 
   const hasTopConcept = !!document.displayed?.topConcepts?.length && !inputComponent
 
@@ -42,7 +42,7 @@ export const Concepts = ({
   const removeConcept = useRemoveConcept(document)
 
   const [levelVisibility, setLevelVisibility] = useState(
-    treeVisibility === 'closed' && concept.hasMatchingDescendant ? 'open' : treeVisibility
+    treeVisibility === 'closed' && concept.hasMatchingDescendant ? 'open' : treeVisibility,
   )
 
   const handleToggle = useCallback(() => {

package/src/components/Hierarchy.test.tsx

@@ -0,0 +1,92 @@
+import {screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {describe, expect, it, vi} from 'vitest'
+
+import {ReleaseContext, SchemeContext} from '../context'
+import {TaxonomyPortProvider} from '../seams/TaxonomyPortContext'
+import {createFakeDataPort} from '../test/FakeDataPort'
+import {renderWithUi} from '../test/renderWithUi'
+import type {ConceptSchemeDocument, DocumentConcepts} from '../types'
+
+import {Hierarchy} from './Hierarchy'
+
+// Concept links + new-pane navigation read Studio's pane router, which isn't
+// present in jsdom. Stub it — navigation isn't what these tests exercise.
+vi.mock('sanity/structure', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('sanity/structure')>()),
+  usePaneRouter: () => ({routerPanesState: [], groupIndex: 0}),
+}))
+
+const scheme = {
+  displayed: {_id: 'scheme-1', _type: 'skosConceptScheme', title: 'Test Scheme'},
+} as unknown as ConceptSchemeDocument
+
+function renderHierarchy(
+  port: ReturnType<typeof createFakeDataPort>,
+  releaseContext: string | undefined = undefined
+) {
+  return renderWithUi(
+    <TaxonomyPortProvider port={port}>
+      <SchemeContext.Provider value={scheme}>
+        <ReleaseContext.Provider value={releaseContext}>
+          <Hierarchy inputComponent={false} />
+        </ReleaseContext.Provider>
+      </SchemeContext.Provider>
+    </TaxonomyPortProvider>
+  )
+}
+
+describe('Hierarchy (trunk watch seam)', () => {
+  it('watches the trunk tree with the document id and perspective', () => {
+    const port = createFakeDataPort({loading: true})
+    renderHierarchy(port)
+
+    expect(screen.getByText('Loading hierarchy…')).toBeInTheDocument()
+    expect(port.lastWatchParams).toEqual({
+      mode: 'trunk',
+      documentId: 'scheme-1',
+      perspective: undefined,
+    })
+  })
+
+  it('renders the concepts delivered by the port', () => {
+    const tree: DocumentConcepts = {
+      topConcepts: [{id: 'concept-1', prefLabel: 'Animals'}],
+      concepts: [],
+    }
+    renderHierarchy(createFakeDataPort({tree}))
+
+    expect(screen.getByRole('button', {name: /Animals/})).toBeInTheDocument()
+  })
+
+  it('routes a concept removal through the port as a remove plan', async () => {
+    const tree: DocumentConcepts = {
+      topConcepts: [{id: 'concept-1', prefLabel: 'Animals'}],
+      concepts: [],
+    }
+    const port = createFakeDataPort({tree})
+    renderHierarchy(port)
+
+    const removeAction = screen.getByLabelText('Remove this concept from this scheme')
+    await userEvent.setup().click(removeAction)
+
+    expect(port.appliedPlans).toHaveLength(1)
+    expect(port.appliedPlans[0]).toMatchObject({
+      kind: 'remove',
+      unsetPaths: ['topConcepts[_ref=="concept-1"]'],
+    })
+  })
+
+  it('optimistically removes the concept from the tree before the listener catches up', async () => {
+    // The fake's watch data stays static, standing in for the listener's refetch lag.
+    const tree: DocumentConcepts = {
+      topConcepts: [{id: 'concept-1', prefLabel: 'Animals'}],
+      concepts: [],
+    }
+    renderHierarchy(createFakeDataPort({tree}))
+
+    expect(screen.getByRole('button', {name: /Animals/})).toBeInTheDocument()
+    await userEvent.setup().click(screen.getByLabelText('Remove this concept from this scheme'))
+    expect(screen.queryByRole('button', {name: /Animals/})).not.toBeInTheDocument()
+  })
+})

package/src/components/Hierarchy.tsx

@@ -3,13 +3,13 @@ import type {DocumentId} from '@sanity/id-utils'
 import {getPublishedId} from '@sanity/id-utils'
 import {Flex, Spinner, Stack, Box, Text, Inline, Card, Button} from '@sanity/ui'
 import {nanoid} from 'nanoid'
-import {useCallback, useContext, useState} from 'react'
-import {useListeningQuery} from 'sanity-plugin-utils'
+import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
 
-import {SchemeContext, TreeContext, ReleaseContext} from '../context'
+import {OptimisticTreeContext, SchemeContext, TreeContext, ReleaseContext} from '../context'
+import {collectConceptIds, pruneConcepts} from '../core/tree/pruneConcepts'
 import {useCreateConcept} from '../hooks'
-import {trunkBuilder} from '../queries'
-import type {DocumentConcepts, ConceptSchemeDocument, TreeViewProps} from '../types'
+import {useTaxonomyDataPort} from '../seams/TaxonomyPortContext'
+import type {ConceptSchemeDocument, TreeViewProps} from '../types'
 
 import {NewScheme} from './guides'
 import {TreeStructure} from './TreeStructure'
@@ -29,8 +29,9 @@ export const Hierarchy = ({
 }: TreeViewProps) => {
   const document: ConceptSchemeDocument = useContext(SchemeContext) || ({} as ConceptSchemeDocument)
   const documentId = getPublishedId(document.displayed?._id as DocumentId)
-  const releaseContext: string = useContext(ReleaseContext) as string
+  const releaseContext = useContext(ReleaseContext)
 
+  const port = useTaxonomyDataPort()
   const createConcept = useCreateConcept(document)
   const createTopConcept = useCallback(() => {
     createConcept('topConcept')
@@ -57,20 +58,50 @@ export const Hierarchy = ({
     setGlobalVisibility({treeId: nanoid(6), treeVisibility: 'closed'})
   }, [])
 
-  const {data, loading, error} = useListeningQuery<DocumentConcepts>(
-    {
-      fetch: trunkBuilder(),
-      listen: `*[_type == "skosConcept" || _type == "skosConceptScheme" ]`,
-    },
-    {
-      params: {
-        id: documentId,
-      },
-      options: {
-        perspective: releaseContext === undefined ? 'drafts' : [releaseContext],
-      },
-    }
-  ) as {data: DocumentConcepts; loading: boolean; error: Error | null}
+  // Optimistic removal: prune a removed concept from the tree immediately, then
+  // let the live listener reconcile (see core/tree/pruneConcepts). markRemoved is
+  // reached by the deep remove actions through OptimisticTreeContext below.
+  const [removedIds, setRemovedIds] = useState<Set<string>>(() => new Set())
+  const markRemoved = useCallback((id: string) => {
+    setRemovedIds((prev) => {
+      if (prev.has(id)) return prev
+      const next = new Set(prev)
+      next.add(id)
+      return next
+    })
+  }, [])
+  const unmarkRemoved = useCallback((id: string) => {
+    setRemovedIds((prev) => {
+      if (!prev.has(id)) return prev
+      const next = new Set(prev)
+      next.delete(id)
+      return next
+    })
+  }, [])
+  const optimisticValue = useMemo(
+    () => ({markRemoved, unmarkRemoved}),
+    [markRemoved, unmarkRemoved],
+  )
+
+  const {data, loading, error} = port.useWatchTree({
+    mode: 'trunk',
+    documentId,
+    perspective: releaseContext,
+  })
+
+  // Once fresh data no longer contains a removed id, stop tracking it so the
+  // optimistic set self-cleans and never prunes a later re-added concept.
+  useEffect(() => {
+    setRemovedIds((prev) => {
+      if (prev.size === 0) return prev
+      const present = collectConceptIds(data)
+      const next = new Set([...prev].filter((id) => present.has(id)))
+      return next.size === prev.size ? prev : next
+    })
+  }, [data])
+
+  const prunedData = useMemo(() => pruneConcepts(data, removedIds), [data, removedIds])
+
   if (loading) {
     return (
       <Box padding={4} paddingTop={6}>
@@ -85,7 +116,7 @@ export const Hierarchy = ({
   } else if (error) {
     console.error(error)
     return <div>Error here</div>
-  } else if (!data) {
+  } else if (!prunedData) {
     return <NewScheme document={document} />
   }
   return (
@@ -96,10 +127,12 @@ export const Hierarchy = ({
             <Card borderBottom paddingBottom={1} display={'flex'} flex={1}>
               <Flex justify={'space-between'} flex={1}>
                 <Card>
-                  {(data.topConcepts?.filter((concept) => (concept?.childConcepts?.length ?? 0) > 0)
-                    .length > 0 ||
-                    data.concepts?.filter((concept) => (concept?.childConcepts?.length ?? 0) > 0)
-                      .length > 0) && (
+                  {(prunedData.topConcepts?.filter(
+                    (concept) => (concept?.childConcepts?.length ?? 0) > 0,
+                  ).length > 0 ||
+                    prunedData.concepts?.filter(
+                      (concept) => (concept?.childConcepts?.length ?? 0) > 0,
+                    ).length > 0) && (
                     <Inline space={1}>
                       <Button
                         text={'Collapse'}
@@ -139,11 +172,13 @@ export const Hierarchy = ({
               </Flex>
             </Card>
           </Stack>
-          <TreeStructure
-            concepts={data}
-            inputComponent={inputComponent}
-            selectConcept={selectConcept || (() => undefined)}
-          />
+          <OptimisticTreeContext.Provider value={optimisticValue}>
+            <TreeStructure
+              concepts={prunedData}
+              inputComponent={inputComponent}
+              selectConcept={selectConcept || (() => undefined)}
+            />
+          </OptimisticTreeContext.Provider>
         </>
       </Box>
     </TreeContext.Provider>

package/src/components/TopConcepts.tsx

@@ -30,13 +30,13 @@ export const TopConcepts = ({
   selectConcept,
 }: TopConceptsProps) => {
   const document: ConceptSchemeDocument = useContext(SchemeContext) || ({} as ConceptSchemeDocument)
-  const releaseContext: string = useContext(ReleaseContext) as string
+  const releaseContext = useContext(ReleaseContext)
 
   const createConcept = useCreateConcept(document)
   const removeConcept = useRemoveConcept(document)
 
   const [levelVisibility, setLevelVisibility] = useState(
-    treeVisibility === 'closed' && concept.hasMatchingDescendant ? 'open' : treeVisibility
+    treeVisibility === 'closed' && concept.hasMatchingDescendant ? 'open' : treeVisibility,
   )
 
   const handleToggle = useCallback(() => {

package/src/components/TreeStructure.tsx

@@ -18,7 +18,7 @@ export const TreeStructure = ({
   inputComponent,
   selectConcept,
 }: {
-  concepts: DocumentConcepts
+  concepts: DocumentConcepts | null
   inputComponent: boolean
   selectConcept: (conceptId: {_ref: string; _type: 'reference'; _originalId?: string}) => void
 }) => {
@@ -32,7 +32,7 @@ export const TreeStructure = ({
   return (
     <Box paddingTop={4}>
       <Stack space={3} style={{listStyle: 'none', paddingLeft: '0', marginBlockStart: '0'}}>
-        {concepts.topConcepts?.map((concept: TopConceptTerm) => (
+        {concepts?.topConcepts?.map((concept: TopConceptTerm) => (
           <TopConcepts
             key={`${concept?.id}+${treeId}`}
             concept={concept}
@@ -41,7 +41,7 @@ export const TreeStructure = ({
             selectConcept={selectConcept}
           />
         ))}
-        {concepts.concepts
+        {concepts?.concepts
           ?.filter((concept: ChildConceptTerm) => concept?.isOrphan)
           .map((concept: ChildConceptTerm) => {
             return (

package/src/components/inputs/ArrayHierarchyInput.test.tsx

@@ -0,0 +1,102 @@
+import {screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type {ReactNode} from 'react'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {TaxonomyPortProvider} from '../../seams/TaxonomyPortContext'
+import {createFakeDataPort} from '../../test/FakeDataPort'
+import {arrayFieldProps, fakeSchemeClient, filterFor} from '../../test/inputHarness'
+import {renderWithUi} from '../../test/renderWithUi'
+
+import {ArrayHierarchyInput} from './ArrayHierarchyInput'
+
+// See ReferenceHierarchyInput.test.tsx for the harness rationale: stub the Studio
+// hooks/chrome from `sanity`, drive the data seam through an injected FakeDataPort.
+const mocks = vi.hoisted(() => ({
+  useClient: vi.fn(),
+  useFormValue: vi.fn(),
+  usePerspective: vi.fn(),
+}))
+
+vi.mock('sanity', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('sanity')>()
+  return {
+    ...actual,
+    useClient: mocks.useClient,
+    useFormValue: mocks.useFormValue,
+    usePerspective: mocks.usePerspective,
+    FormField: ({title, children}: {title?: string; children?: ReactNode}) => (
+      <div data-testid="form-field">
+        {title}
+        {children}
+      </div>
+    ),
+  }
+})
+
+function renderInput(props = arrayFieldProps(), port = createFakeDataPort()) {
+  return renderWithUi(
+    <TaxonomyPortProvider port={port}>
+      <ArrayHierarchyInput {...props} />
+    </TaxonomyPortProvider>
+  )
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  mocks.useClient.mockReturnValue(fakeSchemeClient())
+  mocks.useFormValue.mockReturnValue('doc-1')
+  mocks.usePerspective.mockReturnValue({selectedPerspectiveName: undefined})
+})
+
+describe('ArrayHierarchyInput', () => {
+  it('warns when the field is configured without a filter', () => {
+    renderInput(arrayFieldProps({schemaType: {of: [{options: {}}]}}))
+
+    expect(screen.getByText(/must be used with an accompanying/i)).toBeInTheDocument()
+  })
+
+  it('warns and falls back when the array has more than one schema type', () => {
+    renderInput(
+      arrayFieldProps({
+        schemaType: {of: [{options: {filter: filterFor({schemeId: 'scheme-x'})}}, {options: {}}]},
+      })
+    )
+
+    expect(screen.getByText(/not supported for multi-schema arrays/i)).toBeInTheDocument()
+  })
+
+  it('disables the browse button on the published perspective', async () => {
+    mocks.usePerspective.mockReturnValue({selectedPerspectiveName: 'published'})
+    renderInput()
+
+    expect(await screen.findByRole('button', {name: /browse taxonomy tree/i})).toBeDisabled()
+  })
+
+  it('suppresses the default input in browse-only mode, showing an empty preview', async () => {
+    renderInput(
+      arrayFieldProps({
+        schemaType: {of: [{options: {filter: filterFor({schemeId: 'scheme-x'}, {browseOnly: true})}}]},
+      })
+    )
+
+    expect(await screen.findByText('No items')).toBeInTheDocument()
+    expect(screen.queryByTestId('default-input')).not.toBeInTheDocument()
+  })
+
+  it('warns instead of adding a term already present in the field', async () => {
+    const port = createFakeDataPort({
+      tree: {topConcepts: [{id: 'concept-1', prefLabel: 'Biology', _originalId: 'concept-1'}], concepts: []},
+    })
+    renderInput(
+      arrayFieldProps({value: [{_key: 'k1', _ref: 'concept-1', _type: 'reference'}]}),
+      port
+    )
+
+    const user = userEvent.setup()
+    await user.click(await screen.findByRole('button', {name: /browse taxonomy tree/i}))
+    await user.click(await screen.findByRole('button', {name: /Biology/}))
+
+    expect(await screen.findByText(/already included in this field/i)).toBeInTheDocument()
+  })
+})