@dxos/plugin-navtree 0.8.4-main.a4bbb77 → 0.8.4-main.abd8ff62ef

package/src/testing/app-graph-builder.ts

@@ -2,15 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
 
-import { type PluginContext } from '@dxos/app-framework';
+import { type BuilderExtensions } from '@dxos/app-graph';
 import { log } from '@dxos/log';
-import { type BuilderExtensions, ROOT_ID, createExtension } from '@dxos/plugin-graph';
-import { faker } from '@dxos/random';
+import { GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';
+import { random } from '@dxos/random';
 
-export const storybookGraphBuilders = (context: PluginContext): BuilderExtensions => {
+export const storybookGraphBuilders = (): BuilderExtensions => {
   const propertiesCache = new Map<string, Record<string, unknown>>();
   const getProperties = (id: string, defaults: Record<string, unknown>) => {
     const cached = propertiesCache.get(id);
@@ -22,249 +22,178 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     return defaults;
   };
 
-  return [
-    // Create app menu actions.
-    createExtension({
-      id: 'app-menu',
-      actions: (node) =>
-        Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
-            Option.map((node) => {
-              return [
-                ...Array.from({ length: 5 }, (_, i) => ({
-                  id: `${node.id}/action-${i}`,
-                  data: () => {
-                    log.info('action', { id: node.id, index: i });
-                  },
-                  properties: {
-                    label: `Action ${i}`,
-                    icon: faker.properties.icon(),
-                    disposition: 'menu',
-                  },
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
+  return Effect.runSync(
+    Effect.all([
+      // Create app menu actions.
+      GraphBuilder.createExtension({
+        id: 'app-menu',
+        match: NodeMatcher.whenRoot,
+        actions: () =>
+          Effect.succeed(
+            Array.from({ length: 5 }, (_, i) => ({
+              id: `action-${i}`,
+              data: Effect.fnUntraced(function* () {
+                log.info('action', { id: 'app-menu', index: i });
+              }),
+              properties: {
+                label: `Action ${i}`,
+                icon: random.properties.icon(),
+                disposition: 'menu',
+              },
+            })),
           ),
-        ),
-    }),
-    // Create user account node.
-    createExtension({
-      id: 'user-account',
-      connector: (node) =>
-        Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
-            Option.map(() => {
-              return [
-                {
-                  id: 'user-account',
-                  type: 'user-account',
+      }),
+      // Create user account node.
+      GraphBuilder.createExtension({
+        id: 'user-account',
+        match: NodeMatcher.whenRoot,
+        connector: () =>
+          Effect.succeed([
+            Node.make({
+              id: 'user-account',
+              type: 'user-account',
+              properties: {
+                label: 'User profile',
+                icon: 'ph--user--regular',
+                disposition: 'user-account',
+                userId: '1234567890ABCDEF',
+                hue: random.properties.hue(),
+                emoji: random.properties.emoji(),
+                status: 'active',
+              },
+              nodes: [
+                Node.make({
+                  id: 'profile',
+                  type: 'profile',
                   properties: {
-                    label: 'User Account',
+                    label: 'Profile',
                     icon: 'ph--user--regular',
-                    disposition: 'user-account',
-                    userId: '1234567890ABCDEF',
-                    hue: faker.properties.hue(),
-                    emoji: faker.properties.emoji(),
-                    status: 'active',
                   },
-                  nodes: [
-                    {
-                      id: 'profile',
-                      type: 'profile',
-                      properties: {
-                        label: 'Profile',
-                        icon: 'ph--user--regular',
-                      },
-                    },
-                    {
-                      id: 'devices',
-                      type: 'devices',
-                      properties: {
-                        label: 'Devices',
-                        icon: 'ph--devices--regular',
-                      },
-                    },
-                    {
-                      id: 'security',
-                      type: 'security',
-                      properties: {
-                        label: 'Security',
-                        icon: 'ph--key--regular',
-                      },
-                    },
-                  ],
-                },
-              ];
-            }),
-            Option.getOrElse(() => []),
-          ),
-        ),
-    }),
-    // TODO(wittjosiah): This group node probably is unnecessary now with the flat L0 structure.
-    // Create spaces group node.
-    createExtension({
-      id: 'spaces-root',
-      position: 'hoist',
-      connector: (node) =>
-        Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
-            Option.map(() => {
-              return [
-                {
-                  id: 'spaces-root',
-                  type: 'spaces-root',
+                }),
+                Node.make({
+                  id: 'devices',
+                  type: 'devices',
+                  properties: {
+                    label: 'Devices',
+                    icon: 'ph--devices--regular',
+                  },
+                }),
+                Node.make({
+                  id: 'security',
+                  type: 'security',
                   properties: {
-                    label: 'Spaces',
-                    icon: 'ph--planet--regular',
-                    role: 'branch',
-                    disposition: 'collection',
+                    label: 'Security',
+                    icon: 'ph--key--regular',
                   },
-                },
-              ];
+                }),
+              ],
             }),
-            Option.getOrElse(() => []),
-          ),
-        ),
-    }),
-    // Create space nodes.
-    createExtension({
-      id: 'spaces',
-      connector: (node) => {
-        const count = Rx.make((get) => {
-          let value = 3;
-          const interval = setInterval(() => {
-            if (value >= 10) {
-              clearInterval(interval);
-              return;
-            }
+          ]),
+      }),
+      // Create space (workspace) nodes directly under root.
+      GraphBuilder.createExtension({
+        id: 'spaces',
+        match: NodeMatcher.whenRoot,
+        connector: (_, get) =>
+          Effect.sync(() => {
+            const count = Atom.make((get) => {
+              let value = 3;
+              const interval = setInterval(() => {
+                if (value >= 10) {
+                  clearInterval(interval);
+                  return;
+                }
 
-            value++;
-            get.setSelf(value);
-          }, 5000);
-          get.addFinalizer(() => clearInterval(interval));
-          return value;
-        });
+                value++;
+                get.setSelf(value);
+              }, 5000);
+              get.addFinalizer(() => clearInterval(interval));
+              return value;
+            });
 
-        return Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === 'spaces-root' ? Option.some(node) : Option.none())),
-            Option.map(() => {
-              return [
-                ...Array.from({ length: get(count) }, (_, i) => ({
-                  id: `space-${i}`,
-                  type: 'space',
-                  properties: getProperties(`space-${i}`, {
-                    label: `Space ${i}`,
-                    icon: faker.properties.icon(),
-                    hue: faker.properties.hue(),
-                  }),
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
-          ),
-        );
-      },
-    }),
-    // Create space actions.
-    createExtension({
-      id: 'space-actions',
-      actions: (node) =>
-        Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
-            Option.map((node) => {
-              return [
-                ...Array.from({ length: 5 }, (_, i) => ({
-                  id: `${node.id}/action-${i}`,
-                  data: () => {
-                    log.info('action', { id: node.id, index: i });
-                  },
-                  properties: getProperties(`${node.id}/action-${i}`, {
-                    label: `Action ${i}`,
-                    icon: faker.properties.icon(),
-                  }),
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
+            return Array.from({ length: get(count) }, (_, i) =>
+              Node.make({
+                id: `space-${i}`,
+                type: 'space',
+                properties: getProperties(`space-${i}`, {
+                  label: `Space ${i}`,
+                  icon: random.properties.icon(),
+                  hue: random.properties.hue(),
+                  disposition: 'workspace',
+                }),
+              }),
+            );
+          }),
+      }),
+      // Create space actions.
+      GraphBuilder.createExtension({
+        id: 'space-actions',
+        match: NodeMatcher.whenNodeType('space'),
+        actions: () =>
+          Effect.succeed(
+            Array.from({ length: 5 }, (_, i) => ({
+              id: `action-${i}`,
+              data: Effect.fnUntraced(function* () {
+                log.info('action', { id: 'space-actions', index: i });
+              }),
+              properties: getProperties(`action-${i}`, {
+                label: `Action ${i}`,
+                icon: random.properties.icon(),
+              }),
+            })),
           ),
-        ),
-    }),
-    // Create object nodes.
-    createExtension({
-      id: 'objects',
-      connector: (node) => {
-        const count = Rx.make((get) => {
-          let value = 3;
-          const interval = setInterval(() => {
-            if (value >= 20) {
-              clearInterval(interval);
-              return;
-            }
+      }),
+      // Create object nodes.
+      GraphBuilder.createExtension({
+        id: 'objects',
+        match: NodeMatcher.whenNodeType('space'),
+        connector: (_, get) =>
+          Effect.sync(() => {
+            const count = Atom.make((get) => {
+              let value = 3;
+              const interval = setInterval(() => {
+                if (value >= 20) {
+                  clearInterval(interval);
+                  return;
+                }
 
-            value++;
-            get.setSelf(value);
-          }, 5000);
-          get.addFinalizer(() => clearInterval(interval));
-          return value;
-        });
+                value++;
+                get.setSelf(value);
+              }, 5000);
+              get.addFinalizer(() => clearInterval(interval));
+              return value;
+            });
 
-        return Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
-            Option.map((node) => {
-              return [
-                ...Array.from({ length: get(count) }, (_, i) => ({
-                  id: `${node.id}/object-${i}`,
-                  type: 'object',
-                  properties: getProperties(`${node.id}/object-${i}`, {
-                    label: `Object ${i}`,
-                    icon: faker.properties.icon(),
-                  }),
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
-          ),
-        );
-      },
-    }),
-    // Create object actions.
-    createExtension({
-      id: 'object-actions',
-      actions: (node) =>
-        Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.type === 'object' ? Option.some(node) : Option.none())),
-            Option.map((node) => {
-              return [
-                ...Array.from({ length: 5 }, (_, i) => ({
-                  id: `${node.id}/action-${i}`,
-                  data: () => {
-                    log.info('action', { id: node.id, index: i });
-                  },
-                  properties: getProperties(`${node.id}/action-${i}`, {
-                    label: `Action ${i}`,
-                    icon: faker.properties.icon(),
-                  }),
-                })),
-              ];
-            }),
-            Option.getOrElse(() => []),
+            return Array.from({ length: get(count) }, (_, i) =>
+              Node.make({
+                id: `object-${i}`,
+                type: 'object',
+                properties: getProperties(`object-${i}`, {
+                  label: `Object ${i}`,
+                  icon: random.properties.icon(),
+                }),
+              }),
+            );
+          }),
+      }),
+      // Create object actions.
+      GraphBuilder.createExtension({
+        id: 'object-actions',
+        match: NodeMatcher.whenNodeType('object'),
+        actions: () =>
+          Effect.succeed(
+            Array.from({ length: 5 }, (_, i) => ({
+              id: `action-${i}`,
+              data: Effect.fnUntraced(function* () {
+                log.info('action', { id: 'object-actions', index: i });
+              }),
+              properties: getProperties(`action-${i}`, {
+                label: `Action ${i}`,
+                icon: random.properties.icon(),
+              }),
+            })),
           ),
-        ),
-    }),
-  ];
+      }),
+    ]),
+  );
 };

package/src/testing/generator.ts

@@ -2,12 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
-import { type NodeArg } from '@dxos/app-graph';
-import { type Live, Obj, Type } from '@dxos/echo';
-import { TypedObject } from '@dxos/echo-schema';
-import { faker } from '@dxos/random';
+import { type Node } from '@dxos/app-graph';
+import { Obj, Type } from '@dxos/echo';
+import { TestSchema } from '@dxos/echo/testing';
+import { random } from '@dxos/random';
 import { range } from '@dxos/util';
 
 // TODO(burdon): Reconcile with @dxos/plugin-debug, @dxos/react-ui/testing.
@@ -17,12 +17,12 @@ import { range } from '@dxos/util';
 export type TestItem = { id: string; type: string } & Record<string, any>;
 
 type ObjectDataGenerator = {
-  createSchema?: () => Schema.Schema.AnyNoContext;
+  createSchema?: () => Type.AnyObj;
   createData: () => any;
 };
 
-type ObjectFactory<T extends Live<any>> = {
-  schema?: Schema.Schema.AnyNoContext; // TODO(burdon): Support both typed and expando schema.
+type ObjectFactory<T> = {
+  schema?: Type.AnyObj; // TODO(burdon): Support both typed and expando schema.
   createObject: () => T;
 };
 
@@ -32,7 +32,7 @@ const createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {
   const schema = createSchema?.();
   return {
     schema,
-    createObject: () => (schema ? Obj.make(schema, createData()) : Obj.make(Type.Expando, createData())),
+    createObject: () => (schema ? Obj.make(schema, createData()) : Obj.make(TestSchema.Expando, createData())),
   };
 };
 
@@ -43,36 +43,38 @@ 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 }) }),
+      title: random.lorem.sentence(3),
+      body: random.lorem.sentences({ min: 1, max: random.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,
+      title: random.lorem.sentence(3),
+      image: random.helpers.arrayElement(data.images),
+      body: random.datatype.boolean() ? random.lorem.sentences() : undefined,
     }),
   },
 
   project: {
     createSchema: () =>
-      class ProjectType extends TypedObject({
-        typename: 'example.com/type/Project',
-        version: '0.1.0',
-      })({
+      Schema.Struct({
         title: Schema.String,
         repo: Schema.String,
         status: Schema.String,
         priority: Schema.Number,
-      }) {},
+      }).pipe(
+        Type.object({
+          typename: 'com.example.type.project',
+          version: '0.1.0',
+        }),
+      ),
 
     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),
+      title: random.commerce.productName(),
+      repo: random.datatype.boolean({ probability: 0.3 }) ? random.internet.url() : undefined,
+      status: random.helpers.arrayElement(Status),
+      priority: random.helpers.arrayElement(Priority),
     }),
   },
 };
@@ -92,12 +94,12 @@ export class TestObjectGenerator {
       }, {});
   }
 
-  get schema(): Schema.Schema.AnyNoContext[] {
+  get schema(): Type.AnyObj[] {
     return Object.values(this.factories).map((f) => f.schema!);
   }
 
   createObject({ types }: { types?: string[] } = {}) {
-    const type = faker.helpers.arrayElement(types ?? Object.keys(this.factories));
+    const type = random.helpers.arrayElement(types ?? Object.keys(this.factories));
     const factory = this.factories[type];
     return factory?.createObject();
   }
@@ -134,19 +136,19 @@ export const createTree = () => {
     nodes: [...Array(4)].map(() => {
       const l0 = generator.createObject();
       return {
-        id: faker.string.uuid(),
+        id: random.string.uuid(),
         data: null,
         type: 'category',
         properties: {
           label: l0.title,
           icon: 'ph--horse--regular',
-          disposition: 'collection',
+          disposition: 'workspace',
         },
         nodes: [
           ...[...Array(4)].map(() => {
             const l1 = generator.createObject();
             return {
-              id: faker.string.uuid(),
+              id: random.string.uuid(),
               data: null,
               type: 'document',
               properties: {
@@ -155,48 +157,48 @@ export const createTree = () => {
               },
               nodes: [
                 {
-                  id: `${faker.string.uuid()}__a1`,
+                  id: `${random.string.uuid()}__a1`,
                   data: () => {},
                   type: 'action',
                   properties: {
-                    label: faker.lorem.words(2),
+                    label: random.lorem.words(2),
                     icon: 'ph--boat--regular',
                   },
                 },
                 {
-                  id: `${faker.string.uuid()}__a2`,
+                  id: `${random.string.uuid()}__a2`,
                   data: () => {},
                   type: 'action',
                   properties: {
-                    label: faker.lorem.words(2),
+                    label: random.lorem.words(2),
                     icon: 'ph--train-simple--regular',
                   },
                 },
               ],
-            } satisfies NodeArg<any>;
+            } satisfies Node.NodeArg<any>;
           }),
           {
-            id: `${faker.string.uuid()}__a1`,
+            id: `${random.string.uuid()}__a1`,
             data: () => {},
             type: 'action',
             properties: {
-              label: faker.lorem.words(2),
+              label: random.lorem.words(2),
               icon: 'ph--boat--regular',
             },
           },
           {
-            id: `${faker.string.uuid()}__a2`,
+            id: `${random.string.uuid()}__a2`,
             data: () => {},
             type: 'action',
             properties: {
-              label: faker.lorem.words(2),
+              label: random.lorem.words(2),
               icon: 'ph--train-simple--regular',
             },
           },
         ],
-      } satisfies NodeArg<any>;
+      } satisfies Node.NodeArg<any>;
     }),
-  } satisfies NodeArg<any>;
+  } satisfies Node.NodeArg<any>;
 
   return initialContent;
 };

package/src/testing/update-state.ts

@@ -4,22 +4,22 @@
 
 import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 
-import { type NodeArg } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { log } from '@dxos/log';
 import { type TreeData } from '@dxos/react-ui-list';
 
-const removeItem = (tree: NodeArg<any>, source: TreeData) => {
+const removeItem = (tree: Node.NodeArg<any>, source: TreeData) => {
   const parent = getNode(tree, source.path.slice(1, -1));
-  const index = parent.nodes!.findIndex(({ id }) => id === source.id);
+  const index = parent.nodes!.findIndex((node: Node.NodeArg<any>) => node.id === source.id);
   const item = parent.nodes![index];
   parent.nodes!.splice(index, 1);
   return item;
 };
 
-const getNode = (tree: NodeArg<any>, path: string[]) => {
+const getNode = (tree: Node.NodeArg<any>, path: string[]) => {
   let node = tree;
   for (const part of path) {
-    node = node.nodes!.find(({ id }) => id === part)!;
+    node = node.nodes!.find((n: Node.NodeArg<any>) => n.id === part)!;
   }
   return node;
 };
@@ -31,7 +31,7 @@ export const updateState = ({
   source,
   target,
 }: {
-  state: NodeArg<any>;
+  state: Node.NodeArg<any>;
   instruction: Instruction;
   source: TreeData;
   target: TreeData;