@dxos/plugin-navtree 0.6.14-main.2b6a0f3 → 0.6.14-main.f49f251

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;
+};

package/src/util.ts

@@ -12,19 +12,14 @@ import {
   isAction,
 } from '@dxos/app-graph';
 import { Path } from '@dxos/react-ui-mosaic';
-import {
-  type NavTreeActionNode,
-  type NavTreeItemActions,
-  type NavTreeItemNode,
-  type NavTreeItemNodeProperties,
-  type OpenItemIds,
-} from '@dxos/react-ui-navtree';
 import { type MaybePromise, nonNullable } from '@dxos/util';
 
+import { type NodeProperties, type NavTreeItem } from './types';
+
 export type NavTreeItemGraphNode = Node<
   any,
-  NavTreeItemNodeProperties &
-    Partial<{
+  Partial<
+    NodeProperties & {
       persistenceClass: string;
       persistenceKey: string;
       acceptPersistenceClass: Set<string>;
@@ -33,9 +28,9 @@ export type NavTreeItemGraphNode = Node<
       onCopy: (activeNode: NavTreeItemGraphNode, index?: number) => MaybePromise<void>;
       onTransferStart: (activeNode: NavTreeItemGraphNode, index?: number) => MaybePromise<void>;
       onTransferEnd: (activeNode: NavTreeItemGraphNode, destinationParent: NavTreeItemGraphNode) => MaybePromise<void>;
-    }>
+    }
+  >
 >;
-export type NavTreeItem = NavTreeItemNode<NavTreeItemGraphNode>;
 
 export const getParent = (
   graph: Graph,
@@ -73,9 +68,9 @@ export const resolveMigrationOperation = (
       const activeKey = activeNode.properties.persistenceKey;
       if (activeKey && persistenceParent?.properties.acceptPersistenceKey) {
         return persistenceParent.properties.acceptPersistenceKey.has(activeKey) &&
-          destinationRelatedNode.properties.onTransferStart
+          persistenceParent.properties.onTransferStart
           ? 'transfer'
-          : destinationRelatedNode.properties.onCopy
+          : persistenceParent.properties.onCopy
             ? 'copy'
             : 'reject';
       } else {
@@ -103,7 +98,7 @@ export const sortActions = (actions: Action[]): Action[] =>
     return 1;
   });
 
-export const getTreeItemNode = (treeItems: NavTreeItemNode[], path?: string[]): NavTreeItemNode | undefined => {
+export const getTreeItemNode = (treeItems: NavTreeItem[], path?: string[]): NavTreeItem | undefined => {
   if (!path) {
     return undefined;
   }
@@ -117,7 +112,7 @@ export const getChildren = (
   graph: Graph,
   node: NavTreeItemGraphNode,
   filter?: NodeFilter,
-  path: string[] = [],
+  path: readonly string[] = [],
 ): NavTreeItemGraphNode[] => {
   return graph
     .nodes(node, { relation: 'outbound', filter })
@@ -129,15 +124,19 @@ export const getChildren = (
     .filter(nonNullable) as NavTreeItemGraphNode[];
 };
 
-type FlattenedActions = Required<Pick<NavTreeItemNode, 'actions' | 'groupedActions'>>;
+type FlattenedActions = Required<Pick<NavTreeItem, 'actions' | 'groupedActions'>>;
 
-export const getActions = (graph: Graph, node: NavTreeItemGraphNode): FlattenedActions => {
+export const getActions = (graph: Graph, node: Node): FlattenedActions => {
   return graph.actions(node).reduce(
     (acc: FlattenedActions, arg) => {
-      acc.actions.push(arg as unknown as NavTreeItemActions[number]);
+      if (arg.properties.disposition === 'item') {
+        return acc;
+      }
+
+      acc.actions.push(arg);
       if (!isAction(arg)) {
         const actionGroup = graph.actions(arg);
-        acc.groupedActions[arg.id] = actionGroup as unknown as NavTreeActionNode[];
+        acc.groupedActions[arg.id] = actionGroup;
       }
       return acc;
     },
@@ -157,50 +156,39 @@ export const expandActions = (graph: Graph, node: Node) => {
   return Promise.all([graph.expand(node, 'outbound', ACTION_TYPE), graph.expand(node, 'outbound', ACTION_GROUP_TYPE)]);
 };
 
-function* navTreeItemVisitor(
-  graph: Graph,
-  node: NavTreeItemGraphNode,
-  openItemIds: OpenItemIds,
-  path: string[] = [],
-  filter?: NodeFilter,
-): Generator<NavTreeItem> {
-  const l0Children = getChildren(graph, node, filter, path);
-  const { actions: l0Actions, groupedActions: l0GroupedActions } = getActions(graph, node);
-
-  const stack: NavTreeItem[] = [
-    {
-      id: node.id,
-      node,
-      path: [],
-      parentOf: (l0Children ?? []).map(({ id }) => id),
-      actions: l0Actions,
-      groupedActions: l0GroupedActions,
-    },
-  ];
-
+function* navTreeItemVisitor({
+  graph,
+  node,
+  open,
+  getItem,
+  path = [],
+  filter,
+}: {
+  graph: Graph;
+  node: NavTreeItemGraphNode;
+  open: string[];
+  getItem: (node: NavTreeItemGraphNode, parent: readonly string[], filter?: NodeFilter) => NavTreeItem;
+  path?: readonly string[];
+  filter?: NodeFilter;
+}): Generator<NavTreeItem> {
+  const stack: NavTreeItem[] = [getItem(node, path, filter)];
   while (stack.length > 0) {
     const nextItem = stack.pop()!;
-    if ((nextItem.path?.length ?? 0) > 0) {
+    if (nextItem.path.length > 1) {
       yield nextItem;
     }
-    const { id, node, path } = nextItem;
+    const { node, path } = nextItem;
     const children = getChildren(graph, node, filter, path);
-    if (path?.length === 0 || (id ?? 'never') in openItemIds) {
+    const actions = graph.actions(node);
+    if (path.length === 1 || open.includes(Path.create(...path))) {
+      for (let i = actions.length - 1; i >= 0; i--) {
+        if (actions[i].properties.disposition === 'item') {
+          stack.push(getItem(actions[i], path, filter));
+        }
+      }
       for (let i = children.length - 1; i >= 0; i--) {
         const child = children[i] as NavTreeItemGraphNode;
-        const childPath = path ? [...path, child.id] : [child.id];
-        const childChildren = getChildren(graph, child, filter, childPath);
-        const { actions: childActions, groupedActions: childGroupedActions } = getActions(graph, child);
-        stack.push({
-          id: Path.create(...childPath),
-          node: child,
-          path: childPath,
-          ...((childChildren?.length ?? 0) > 0 && {
-            parentOf: childChildren!.map(({ id }) => Path.create(...childPath, id)),
-          }),
-          actions: childActions,
-          groupedActions: childGroupedActions,
-        });
+        stack.push(getItem(child, path, filter));
       }
     }
   }
@@ -212,18 +200,19 @@ function* navTreeItemVisitor(
 export const treeItemsFromRootNode = (
   graph: Graph,
   rootNode: NavTreeItemGraphNode,
-  openItemIds: OpenItemIds,
-  path: string[] = [],
+  open: string[],
+  getItem: (node: NavTreeItemGraphNode, parent: readonly string[]) => NavTreeItem,
+  path?: readonly string[],
   filter?: NodeFilter,
 ): NavTreeItem[] => {
-  return Array.from(navTreeItemVisitor(graph, rootNode, openItemIds, path, filter));
+  return Array.from(navTreeItemVisitor({ graph, node: rootNode, open, getItem, path, filter }));
 };
 
-export const expandOpenGraphNodes = (graph: Graph, openItemIds: OpenItemIds) => {
+export const expandOpenGraphNodes = (graph: Graph, open: string[]) => {
   return Promise.all(
-    Object.keys(openItemIds)
-      .map((openItemId) => {
-        const node = graph.findNode(Path.last(openItemId));
+    open
+      .map((id) => {
+        const node = graph.findNode(Path.last(id));
         return node && expandChildrenAndActions(graph, node as NavTreeItemGraphNode);
       })
       .filter(nonNullable),