@dxos/plugin-navtree 0.6.13 → 0.6.14-main.1366248

package/src/stories/Graph.stories.tsx

@@ -4,22 +4,27 @@
 
 import '@dxos-theme';
 
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import { batch } from '@preact/signals-core';
-import React, { useMemo, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import React, { useEffect } from 'react';
 
-import { Graph } from '@dxos/app-graph';
-import { registerSignalRuntime } from '@dxos/echo-signals/react';
+import { Graph, ROOT_ID, type NodeFilter } from '@dxos/app-graph';
+import { create } from '@dxos/echo-schema';
+import { registerSignalsRuntime } from '@dxos/echo-signals/react';
+import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { Treegrid } from '@dxos/react-ui';
-import { Mosaic, Path, type MosaicDropEvent, type MosaicMoveEvent, type MosaicOperation } from '@dxos/react-ui-mosaic';
-import { NavTree, type NavTreeItemNode, type OpenItemIds } from '@dxos/react-ui-navtree';
+import { isItem } from '@dxos/react-ui-list';
+import { Path } from '@dxos/react-ui-mosaic';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
-import { arrayMove } from '@dxos/util';
 
-import { type NavTreeItemGraphNode, treeItemsFromRootNode } from '../util';
+import { NavTree, type NavTreeProps } from '../components';
+import { type NavTreeItem } from '../types';
+import { getActions, getChildren, type NavTreeItemGraphNode, treeItemsFromRootNode } from '../util';
 
 faker.seed(3);
-registerSignalRuntime();
+registerSignalsRuntime();
 
 const createGraph = () => {
   const graph = new Graph();
@@ -45,104 +50,108 @@ const createGraph = () => {
   return graph;
 };
 
-const ROOT_ID = 'root';
+type State = {
+  flatTree: NavTreeItem[];
+  open: string[];
+  current: string[];
+};
+
 const graph = createGraph();
+const itemCache = new Map<string, NavTreeItem>();
+const state = create<State>({
+  get flatTree() {
+    return treeItemsFromRootNode(graph, graph.root, this.open, getItem);
+  },
+  open: [],
+  current: [],
+});
 
-const StorybookNavTree = ({ id = ROOT_ID }: { id?: string }) => {
-  const [openItemIds, setopenItemIds] = useState<OpenItemIds>({});
-  const items = useMemo(
-    () => treeItemsFromRootNode(graph, graph.root as NavTreeItemGraphNode, openItemIds),
-    [openItemIds],
-  );
-  const handleopenItemIdsChange = (item: NavTreeItemNode, nextOpen: boolean) => {
-    const itemId = item.path?.join(Treegrid.PATH_SEPARATOR) ?? 'never';
-    setopenItemIds((prevOpenItemIds) => {
-      if (nextOpen) {
-        return { ...prevOpenItemIds, [itemId]: true };
-      } else {
-        const { [itemId]: _, ...nextOpenItemIds } = prevOpenItemIds;
-        return nextOpenItemIds;
-      }
-    });
-  };
-
-  const handleOver = ({ active, over }: MosaicMoveEvent<number>): MosaicOperation => {
-    // Reject all operations that don’t match the graph’s root id
-    if (Path.first(active.path) !== id || Path.first(over.path) !== Path.first(active.path)) {
-      return 'reject';
-    }
-    // Rearrange if rearrange is supported and active and over are siblings
-    else if (Path.siblings(over.path, active.path)) {
-      return graph.findNode(Path.last(Path.parent(over.path)))?.properties.onRearrangeChildren ? 'rearrange' : 'reject';
-    }
-    // Rearrange if rearrange is supported and active is or would be a child of over
-    else if (Path.hasChild(over.path, active.path)) {
-      return graph.findNode(Path.last(over.path))?.properties.onRearrangeChildren ? 'rearrange' : 'reject';
-    }
-    // Check if transfer is supported
-    else {
-      const overNode = graph.findNode(Path.last(over.path));
-      const activeNode = graph.findNode(Path.last(active.path));
-      if (overNode && activeNode) {
-        return 'transfer';
-      } else {
-        return 'reject';
-      }
-    }
-  };
-
-  const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {
-    batch(() => {
-      const activeNode = graph.findNode(active.item.id);
-      const overNode = graph.findNode(over.item.id);
-      const activeParent = activeNode && graph.nodes(activeNode, { relation: 'inbound' })[0];
-      const overParent = overNode && graph.nodes(overNode, { relation: 'inbound' })[0];
-      if (
-        activeNode &&
-        overNode &&
-        activeParent &&
-        overParent &&
-        activeParent.id === overParent.id &&
-        activeNode.id !== overNode.id &&
-        operation === 'rearrange'
-      ) {
-        const ids = graph.nodes(activeParent).map((node) => node.id);
-        const activeIndex = ids.indexOf(activeNode.id);
-        const overIndex = ids.indexOf(overNode.id);
-        (graph as any)._sortEdges(
-          activeParent.id,
-          'outbound',
-          arrayMove(ids, activeIndex, overIndex > -1 ? overIndex : ids.length - 1),
-        );
-      } else if (activeNode && activeParent && overParent && operation === 'transfer') {
-        (graph as any)._removeEdges([{ source: activeParent.id, target: activeNode.id }]);
-        (graph as any)._addEdges([{ source: overNode.id, target: activeNode.id }]);
-      }
+const getItem = (node: NavTreeItemGraphNode, parent: readonly string[], filter?: NodeFilter) => {
+  invariant(graph);
+  const path = [...parent, node.id];
+  const { actions, groupedActions } = getActions(graph, node);
+  const children = getChildren(graph, node, filter, path);
+  const parentOf =
+    children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
+  const item = {
+    id: node.id,
+    label: node.properties.label ?? node.id,
+    icon: node.properties.icon,
+    path,
+    parentOf,
+    node,
+    actions,
+    groupedActions,
+  } satisfies NavTreeItem;
+
+  const cachedItem = itemCache.get(node.id);
+  // TODO(wittjosiah): This is not a good enough check.
+  //   Consider better ways to doing reactive transformations which retain referential equality.
+  if (cachedItem && JSON.stringify(item) === JSON.stringify(cachedItem)) {
+    return cachedItem;
+  } else {
+    itemCache.set(node.id, item);
+    return item;
+  }
+};
+
+const Story = (args: Partial<NavTreeProps>) => {
+  // NOTE: If passed directly to args, this won't be reactive.
+  const items = state.flatTree;
+
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => isItem(source.data),
+      onDrop: ({ location, source }) => {
+        // Didn't drop on anything.
+        if (!location.current.dropTargets.length) {
+          return;
+        }
+
+        const target = location.current.dropTargets[0];
+
+        const instruction: Instruction | null = extractInstruction(target.data);
+        if (instruction !== null) {
+          // TODO(wittjosiah): Implement drop logic.
+          console.log('update', instruction);
+        }
+      },
     });
-  };
-
-  return (
-    <NavTree
-      id='storybook navtree'
-      items={items}
-      onItemOpenChange={handleopenItemIdsChange}
-      onDrop={handleDrop}
-      onOver={handleOver}
-    />
-  );
+  }, []);
+
+  return <NavTree items={items} open={state.open} current={state.current} {...args} />;
 };
 
-export default {
-  title: 'react-ui-navtree/Graph',
+export const Default = {};
+
+const meta: Meta = {
+  title: 'plugins/plugin-navtree/Graph',
   component: NavTree,
-  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
+  render: Story,
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  args: {
+    onOpenChange: (item: NavTreeItem, open: boolean) => {
+      const path = Path.create(...item.path);
+      if (open) {
+        state.open.push(path);
+      } else {
+        const index = state.open.indexOf(path);
+        if (index > -1) {
+          state.open.splice(index, 1);
+        }
+      }
+    },
+    onSelect: (item: NavTreeItem, current: boolean) => {
+      if (current) {
+        state.current.push(item.id);
+      } else {
+        const index = state.current.indexOf(item.id);
+        if (index > -1) {
+          state.current.splice(index, 1);
+        }
+      }
+    },
+  },
 };
 
-export const Default = {
-  render: ({ debug }: { debug?: boolean }) => (
-    <Mosaic.Root debug={debug}>
-      <StorybookNavTree />
-      <Mosaic.DragOverlay />
-    </Mosaic.Root>
-  ),
-};
+export default meta;

package/src/testing/generator.ts

@@ -0,0 +1,199 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type NodeArg } from '@dxos/app-graph';
+import { create, S, type ReactiveObject, TypedObject } from '@dxos/echo-schema';
+import { faker } from '@dxos/random';
+
+// TODO(burdon): Reconcile with @dxos/plugin-debug, @dxos/react-ui/testing.
+// TODO(burdon): Bug when adding stale objects to space (e.g., static objects already added in previous story invocation).
+
+// TODO(burdon): Util.
+export const range = <T>(fn: (i: number) => T | undefined, length: number): T[] =>
+  Array.from({ length })
+    .map((_, i) => fn(i))
+    .filter(Boolean) as T[];
+
+// TODO(burdon): Commit to using ECHO to generate all test data? Or convert from raw data?
+export type TestItem = { id: string; type: string } & Record<string, any>;
+
+type ObjectDataGenerator = {
+  createSchema?: () => S.Schema<any>;
+  createData: () => any;
+};
+
+type ObjectFactory<T extends ReactiveObject<any>> = {
+  schema?: S.Schema<any>; // TODO(burdon): Support both typed and expando schema.
+  createObject: () => T;
+};
+
+type ObjectFactoryMap = { [type: string]: ObjectFactory<any> };
+
+const createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {
+  const schema = createSchema?.();
+  return {
+    schema,
+    createObject: () => (schema ? create(schema, createData()) : create(createData())),
+  };
+};
+
+// TODO(burdon): Handle restricted values.
+export const Status = ['pending', 'active', 'done'];
+export const Priority = [1, 2, 3, 4, 5];
+
+export const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
+  document: {
+    createData: () => ({
+      title: faker.lorem.sentence(3),
+      body: faker.lorem.sentences({ min: 1, max: faker.number.int({ min: 1, max: 3 }) }),
+    }),
+  },
+
+  image: {
+    createData: () => ({
+      title: faker.lorem.sentence(3),
+      image: faker.helpers.arrayElement(data.images),
+      body: faker.datatype.boolean() ? faker.lorem.sentences() : undefined,
+    }),
+  },
+
+  project: {
+    createSchema: () =>
+      class ProjectType extends TypedObject({ typename: 'dxos.test.Project', version: '0.1.0' })({
+        title: S.String,
+        repo: S.String,
+        status: S.String,
+        priority: S.Number,
+      }) {},
+    createData: () => ({
+      title: faker.commerce.productName(),
+      repo: faker.datatype.boolean({ probability: 0.3 }) ? faker.internet.url() : undefined,
+      status: faker.helpers.arrayElement(Status),
+      priority: faker.helpers.arrayElement(Priority),
+    }),
+  },
+};
+
+/**
+ * Typed object generator.
+ */
+export class TestObjectGenerator {
+  public readonly factories: ObjectFactoryMap;
+
+  constructor({ types, factories }: { types?: string[]; factories?: ObjectFactoryMap } = {}) {
+    this.factories =
+      factories ??
+      (types ?? Object.keys(defaultGenerators)).reduce<ObjectFactoryMap>((acc, type) => {
+        acc[type] = createFactory(defaultGenerators[type]);
+        return acc;
+      }, {});
+  }
+
+  get schema(): S.Schema<any>[] {
+    return Object.values(this.factories).map((f) => f.schema!);
+  }
+
+  createObject({ types }: { types?: string[] } = {}) {
+    const type = faker.helpers.arrayElement(types ?? Object.keys(this.factories));
+    const factory = this.factories[type];
+    return factory?.createObject();
+  }
+
+  createObjects({ types, length }: { types?: string[]; length: number }) {
+    return range(() => this.createObject({ types }), length);
+  }
+}
+
+// https://unsplash.com
+// TODO(burdon): Use https://picsum.photos?
+const data = {
+  images: [
+    '/images/image-1.png',
+    '/images/image-2.png',
+    '/images/image-3.png',
+    '/images/image-4.png',
+    '/images/image-5.png',
+    '/images/image-6.png',
+  ],
+};
+
+export const createTree = () => {
+  const generator = new TestObjectGenerator({ types: ['document'] });
+
+  const initialContent = {
+    id: 'root',
+    data: null,
+    type: 'root',
+    properties: {
+      label: 'Root',
+      icon: 'ph--circle--regular',
+    },
+    nodes: [...Array(4)].map(() => {
+      const l0 = generator.createObject();
+      return {
+        id: faker.string.uuid(),
+        data: null,
+        type: 'collection',
+        properties: {
+          label: l0.title,
+          icon: 'ph--horse--regular',
+        },
+        nodes: [
+          ...[...Array(4)].map(() => {
+            const l1 = generator.createObject();
+            return {
+              id: faker.string.uuid(),
+              data: null,
+              type: 'document',
+              properties: {
+                label: l1.title,
+                icon: 'ph--butterfly--regular',
+              },
+              nodes: [
+                {
+                  id: `${faker.string.uuid()}__a1`,
+                  data: () => {},
+                  type: 'action',
+                  properties: {
+                    label: faker.lorem.words(2),
+                    icon: 'ph--boat--regular',
+                  },
+                },
+                {
+                  id: `${faker.string.uuid()}__a2`,
+                  data: () => {},
+                  type: 'action',
+                  properties: {
+                    label: faker.lorem.words(2),
+                    icon: 'ph--train-simple--regular',
+                  },
+                },
+              ],
+            } satisfies NodeArg<any>;
+          }),
+          {
+            id: `${faker.string.uuid()}__a1`,
+            data: () => {},
+            type: 'action',
+            properties: {
+              label: faker.lorem.words(2),
+              icon: 'ph--boat--regular',
+            },
+          },
+          {
+            id: `${faker.string.uuid()}__a2`,
+            data: () => {},
+            type: 'action',
+            properties: {
+              label: faker.lorem.words(2),
+              icon: 'ph--train-simple--regular',
+            },
+          },
+        ],
+      } satisfies NodeArg<any>;
+    }),
+  } satisfies NodeArg<any>;
+
+  return initialContent;
+};

package/src/testing/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './generator';
+export * from './visitor';

package/src/testing/visitor.ts

@@ -0,0 +1,152 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+
+import { isActionLike, type Node, type NodeArg } from '@dxos/app-graph';
+import { log } from '@dxos/log';
+import { Path } from '@dxos/react-ui-mosaic';
+
+import { type NavTreeItem } from '../types';
+
+export const flattenTree = (tree: NodeArg<any>, open: string[]): NavTreeItem[] => {
+  return Array.from(
+    visitor({
+      node: tree,
+      getItem,
+      isOpen: ({ path }) => open.includes(Path.create(...path)),
+    }),
+  );
+};
+
+export function* visitor({
+  node,
+  getItem,
+  isOpen,
+}: {
+  node: NodeArg<any>;
+  getItem: (node: NodeArg<any>, parent?: readonly string[]) => NavTreeItem;
+  isOpen?: (node: NavTreeItem) => boolean;
+}): Generator<NavTreeItem> {
+  const stack: [NodeArg<any>, NavTreeItem][] = [[node, getItem(node)]];
+  while (stack.length > 0) {
+    const [node, item] = stack.pop()!;
+    if (item.path.length > 1) {
+      yield item;
+    }
+
+    const children = Array.from(node.nodes ?? []);
+    if (item.path.length === 1 || isOpen?.(item)) {
+      for (let i = children.length - 1; i >= 0; i--) {
+        const child = children[i];
+        stack.push([child, getItem(child, item.path)]);
+      }
+    }
+  }
+}
+
+// Ensures that the same item is not created multiple times, causing the tree to be re-rendered.
+const itemsCache: Record<string, NavTreeItem> = {};
+
+export const getItem = (arg: NodeArg<any>, parent?: readonly string[]): NavTreeItem => {
+  const cachedItem = itemsCache[arg.id];
+  if (cachedItem) {
+    return cachedItem;
+  }
+
+  const children = arg.nodes?.filter((node) => !isActionLike(node)) ?? [];
+  const actions = arg.nodes?.filter((node) => isActionLike(node)) ?? [];
+  const node: Node = {
+    id: arg.id,
+    type: arg.type,
+    properties: arg.properties ?? {},
+    data: arg.data ?? null,
+  };
+
+  const item = {
+    id: arg.id,
+    label: arg.properties!.label,
+    icon: arg.properties!.icon,
+    path: parent ? [...parent, arg.id] : [arg.id],
+    ...(children.length > 0 && {
+      parentOf: children.map(({ id }) => id),
+    }),
+    node,
+    actions,
+    groupedActions: {},
+  };
+  itemsCache[node.id] = item;
+  return item;
+};
+
+export const invalidateCache = (id: string) => {
+  delete itemsCache[id];
+};
+
+const removeItem = (tree: NodeArg<any>, source: NavTreeItem) => {
+  const parent = getNode(tree, source.path.slice(1, -1));
+  const index = parent.nodes!.findIndex(({ id }) => id === source.id);
+  const item = parent.nodes![index];
+  parent.nodes!.splice(index, 1);
+  return item;
+};
+
+const getNode = (tree: NodeArg<any>, path: string[]) => {
+  let node = tree;
+  for (const part of path) {
+    node = node.nodes!.find(({ id }) => id === part)!;
+  }
+  return node;
+};
+
+// TODO(wittjosiah): Reconcile with react-ui-list/Tree/testing.
+export const updateState = ({
+  state,
+  instruction,
+  source,
+  target,
+}: {
+  state: NodeArg<any>;
+  instruction: Instruction;
+  source: NavTreeItem;
+  target: NavTreeItem;
+}) => {
+  switch (instruction.type) {
+    case 'reorder-above': {
+      invalidateCache(source.id);
+      const item = removeItem(state, source);
+      const parent = getNode(state, target.path.slice(1, -1));
+      const index = parent.nodes!.findIndex(({ id }) => id === target.id);
+      invalidateCache(target.id);
+      parent.nodes!.splice(index, 0, item);
+      break;
+    }
+
+    case 'reorder-below': {
+      invalidateCache(source.id);
+      const item = removeItem(state, source);
+      const parent = getNode(state, target.path.slice(1, -1));
+      const index = parent.nodes!.findIndex(({ id }) => id === target.id);
+      invalidateCache(target.id);
+      parent.nodes!.splice(index + 1, 0, item);
+      break;
+    }
+
+    case 'make-child': {
+      invalidateCache(source.id);
+      const item = removeItem(state, source);
+      const parent = getNode(state, target.path.slice(1));
+      invalidateCache(target.id);
+      parent.nodes!.push(item);
+      break;
+    }
+
+    case 'instruction-blocked':
+      break;
+
+    default:
+      log.warn('Unsupported instruction', instruction);
+      break;
+  }
+};

package/src/translations.ts

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { translations as navtreeTranslations } from '@dxos/react-ui-navtree';
-
 import { NAVTREE_PLUGIN } from './meta';
 
 export default [
@@ -21,8 +19,10 @@ export default [
         'released message': 'This version released {{released}}.',
         'see release label': 'See release on GitHub',
         'powered by dxos message': 'Powered by <dxos>DXOS</dxos>',
+        'tree item actions label': 'More actions',
+        'tree item searchlist input placeholder': 'Search for actions…',
+        'empty branch message': ' ',
       },
     },
   },
-  ...navtreeTranslations,
 ];

package/src/types.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Action, type ActionLike, type Node } from '@dxos/app-graph';
+import { type Label } from '@dxos/react-ui';
+import { type ItemType } from '@dxos/react-ui-list';
+
+export type NavTreeItem = ItemType & {
+  node: Node;
+  actions: ActionLike[];
+  groupedActions: Record<string, Action[]>;
+};
+
+type SharedProperties = {
+  label: Label;
+  icon?: string;
+  disabled?: boolean;
+  testId?: string;
+  className?: string;
+  headingClassName?: string;
+};
+
+export type NodeProperties = SharedProperties & {
+  role?: string;
+  error?: string;
+  modified?: boolean;
+  palette?: string;
+};
+
+export type ActionProperties = SharedProperties & {
+  disposition?: string;
+  hidden?: boolean;
+  caller?: string;
+  menuType?: 'searchList' | 'dropdown';
+  keyBinding?: string | KeyBinding;
+};
+
+/**
+ * Platform-specific key binding.
+ */
+export type KeyBinding = {
+  // NOTE: Keys come from `getHostPlatform` in `@dxos/util`.
+  // TODO(thure): Dedupe (similar in react-ui-deck)
+  windows?: string;
+  macos?: string;
+  ios?: string;
+  linux?: string;
+  unknown?: string;
+};