@dxos/react-ui-mosaic 0.4.7-main.d28a540 → 0.4.7-main.e015b9e

package/dist/types/src/views/Demo/Echo.stories.d.ts

@@ -4,4 +4,5 @@ declare const _default: {
     decorators: (import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-bf5e6555").R> | import("@storybook/react").Decorator)[];
 };
 export default _default;
+export declare const ECHO: {};
 //# sourceMappingURL=Echo.stories.d.ts.map

package/dist/types/src/views/Demo/Echo.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Echo.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Demo/Echo.stories.tsx"],"names":[],"mappings":";;;;;AAyCA,wBA4BE"}
+{"version":3,"file":"Echo.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Demo/Echo.stories.tsx"],"names":[],"mappings":";;;;;AA2CA,wBA4BE;AAIF,eAAO,MAAM,IAAI,IAAK,CAAC"}

package/dist/types/src/views/Tree/Graph.stories.d.ts

@@ -3,10 +3,19 @@ import '@dxosTheme';
 declare const _default: {
     title: string;
     component: ({ id, Component, onOver, onDrop, items, debug }: import("./Tree").TreeProps<import("./Tree").TreeData>) => JSX.Element;
+    render: ({ id, debug }: {
+        id: string;
+        debug: boolean;
+    }) => JSX.Element;
     decorators: (import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-bf5e6555").R> | import("@storybook/react").Decorator)[];
     parameters: {
         layout: string;
     };
 };
 export default _default;
+export declare const Graph: {
+    args: {
+        debug: boolean;
+    };
+};
 //# sourceMappingURL=Graph.stories.d.ts.map

package/dist/types/src/views/Tree/Graph.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Graph.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Tree/Graph.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;;;;;;;;;AAcpB,wBAeE"}
+{"version":3,"file":"Graph.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Tree/Graph.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;;;;;YAiBqB,MAAM;eAAS,OAAO;;;;;;;AAH/D,wBAeE;AAEF,eAAO,MAAM,KAAK;;;;CAEjB,CAAC"}

package/dist/types/src/views/Tree/testing.d.ts

@@ -1,4 +1,4 @@
-import { Graph } from '@dxos/app-graph';
+import { type Graph } from '@dxos/app-graph';
 import { type TreeData, type TreeProps } from './Tree';
 export type DemoTreeProps = TreeProps & {
     initialItems?: TreeData[];
@@ -7,4 +7,9 @@ export type DemoTreeProps = TreeProps & {
 };
 export declare const DemoTree: ({ id, initialItems, types, debug }: DemoTreeProps) => JSX.Element;
 export declare const createGraph: () => Graph;
+export declare const GraphTree: ({ id, graph, debug }: {
+    id: string;
+    graph?: Graph | undefined;
+    debug: boolean;
+}) => JSX.Element;
 //# sourceMappingURL=testing.d.ts.map

package/dist/types/src/views/Tree/testing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../../src/views/Tree/testing.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAIxC,OAAO,EAAQ,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAI7D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,QAAQ,uCAAiD,aAAa,gBA0DlF,CAAC;AAEF,eAAO,MAAM,WAAW,aAyBvB,CAAC"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../../src/views/Tree/testing.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,KAAK,EAAgB,MAAM,iBAAiB,CAAC;AAK3D,OAAO,EAAQ,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAI7D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,QAAQ,uCAAiD,aAAa,gBA0DlF,CAAC;AAEF,eAAO,MAAM,WAAW,aAqBvB,CAAC;AAEF,eAAO,MAAM,SAAS;QAAgD,MAAM;;WAAwB,OAAO;iBA+B1G,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-mosaic",
-  "version": "0.4.7-main.d28a540",
+  "version": "0.4.7-main.e015b9e",
   "description": "An intermediate interface for drag-and-drop interactions.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,14 +25,14 @@
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.pick": "^4.4.0",
     "react-resize-detector": "^7.1.2",
-    "@dxos/debug": "0.4.7-main.d28a540",
-    "@dxos/invariant": "0.4.7-main.d28a540",
-    "@dxos/react-ui": "0.4.7-main.d28a540",
-    "@dxos/keys": "0.4.7-main.d28a540",
-    "@dxos/react-ui-card": "0.4.7-main.d28a540",
-    "@dxos/react-ui-theme": "0.4.7-main.d28a540",
-    "@dxos/util": "0.4.7-main.d28a540",
-    "@dxos/react-ui-types": "0.4.7-main.d28a540"
+    "@dxos/debug": "0.4.7-main.e015b9e",
+    "@dxos/keys": "0.4.7-main.e015b9e",
+    "@dxos/invariant": "0.4.7-main.e015b9e",
+    "@dxos/react-ui-card": "0.4.7-main.e015b9e",
+    "@dxos/react-ui": "0.4.7-main.e015b9e",
+    "@dxos/react-ui-theme": "0.4.7-main.e015b9e",
+    "@dxos/react-ui-types": "0.4.7-main.e015b9e",
+    "@dxos/util": "0.4.7-main.e015b9e"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.0.5",
@@ -46,12 +46,12 @@
     "react-dom": "^18.2.0",
     "vite": "^5.1.3",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/app-graph": "0.4.7-main.d28a540",
-    "@dxos/echo-schema": "0.4.7-main.d28a540",
-    "@dxos/random": "0.4.7-main.d28a540",
-    "@dxos/gem-core": "0.4.7-main.d28a540",
-    "@dxos/react-client": "0.4.7-main.d28a540",
-    "@dxos/storybook-utils": "0.4.7-main.d28a540"
+    "@dxos/app-graph": "0.4.7-main.e015b9e",
+    "@dxos/gem-core": "0.4.7-main.e015b9e",
+    "@dxos/echo-schema": "0.4.7-main.e015b9e",
+    "@dxos/random": "0.4.7-main.e015b9e",
+    "@dxos/react-client": "0.4.7-main.e015b9e",
+    "@dxos/storybook-utils": "0.4.7-main.e015b9e"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/views/Demo/Echo.stories.tsx

@@ -13,7 +13,7 @@ import { withTheme } from '@dxos/storybook-utils';
 import { Mosaic } from '../../mosaic';
 import { FullscreenDecorator, TestObjectGenerator, range, Status, Priority } from '../../testing';
 import { EchoKanban } from '../Kanban/testing';
-// import { GraphTree } from '../Tree/testing';
+import { GraphTree } from '../Tree/testing';
 
 faker.seed(3);
 const debug = true;
@@ -30,7 +30,9 @@ const Story: FC<{ spaceKey: PublicKey }> = ({ spaceKey }) => {
     <Mosaic.Root debug={debug}>
       <Mosaic.DragOverlay />
       <div className='flex grow overflow-hidden'>
-        <div className='flex shrink-0 w-[280px] overflow-hidden'>{/* <GraphTree id='graph' debug={debug} /> */}</div>
+        <div className='flex shrink-0 w-[280px] overflow-hidden'>
+          <GraphTree id='graph' debug={debug} />
+        </div>
         <div className='flex grow overflow-hidden'>
           <EchoKanban id='projects' spaceKey={spaceKey} generator={generator} debug={debug} />
         </div>
@@ -71,4 +73,4 @@ export default {
 
 // TODO(wittjosiah): This currently has a bug where empty over events are fired when dragging from tree onto kanban.
 //   The bug didn't exist before the cleanup refactor so seems likely it's a side effect of that.
-// export const ECHO = {};
+export const ECHO = {};

package/src/views/Tree/Graph.stories.tsx

@@ -4,14 +4,14 @@
 
 import '@dxosTheme';
 
-// import React from 'react';
+import React from 'react';
 
 import { faker } from '@dxos/random';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Tree } from './Tree';
-// import { GraphTree } from './testing';
-// import { Mosaic } from '../../mosaic';
+import { GraphTree } from './testing';
+import { Mosaic } from '../../mosaic';
 import { FullscreenDecorator } from '../../testing';
 
 faker.seed(3);
@@ -19,20 +19,20 @@ faker.seed(3);
 export default {
   title: 'react-ui-mosaic/Tree',
   component: Tree,
-  // render: ({ id = 'tree', debug }: { id: string; debug: boolean }) => {
-  //   return (
-  //     <Mosaic.Root debug={debug}>
-  //       <Mosaic.DragOverlay />
-  //       <GraphTree id={id} debug={debug} />
-  //     </Mosaic.Root>
-  //   );
-  // },
+  render: ({ id = 'tree', debug }: { id: string; debug: boolean }) => {
+    return (
+      <Mosaic.Root debug={debug}>
+        <Mosaic.DragOverlay />
+        <GraphTree id={id} debug={debug} />
+      </Mosaic.Root>
+    );
+  },
   decorators: [withTheme, FullscreenDecorator()],
   parameters: {
     layout: 'fullscreen',
   },
 };
 
-// export const Graph = {
-//   args: { debug: true },
-// };
+export const Graph = {
+  args: { debug: true },
+};

package/src/views/Tree/testing.tsx

@@ -4,12 +4,13 @@
 
 import React, { useCallback, useState } from 'react';
 
-import { Graph } from '@dxos/app-graph';
+import { type Graph, GraphBuilder } from '@dxos/app-graph';
+import { buildGraph } from '@dxos/app-graph/testing';
 import { faker } from '@dxos/random';
 import { arrayMove } from '@dxos/util';
 
 import { Tree, type TreeData, type TreeProps } from './Tree';
-import { type MosaicDropEvent, type MosaicMoveEvent, Path } from '../../mosaic';
+import { type MosaicDropEvent, type MosaicMoveEvent, Path, type MosaicOperation } from '../../mosaic';
 import { TestObjectGenerator } from '../../testing';
 
 export type DemoTreeProps = TreeProps & {
@@ -79,64 +80,57 @@ export const DemoTree = ({ id = 'tree', initialItems, types, debug }: DemoTreePr
 };
 
 export const createGraph = () => {
-  const graph = new Graph();
-  graph.addNodes({
-    id: 'root',
-    nodes: [Array(2)].map((_, i) => ({
+  const content = [...Array(2)].map((_, i) => ({
+    id: faker.string.hexadecimal({ length: 4 }).slice(2).toUpperCase(),
+    label: faker.lorem.words(2),
+    description: faker.lorem.sentence(),
+    properties: { index: `a${i}` },
+    children: [...Array(2)].map((_, j) => ({
       id: faker.string.hexadecimal({ length: 4 }).slice(2).toUpperCase(),
       label: faker.lorem.words(2),
       description: faker.lorem.sentence(),
-      properties: { index: `a${i}` },
-      children: [...Array(2)].map((_, j) => ({
+      properties: { index: `a${j}` },
+      children: [...Array(2)].map((_, k) => ({
         id: faker.string.hexadecimal({ length: 4 }).slice(2).toUpperCase(),
         label: faker.lorem.words(2),
         description: faker.lorem.sentence(),
-        properties: { index: `a${j}` },
-        children: [...Array(2)].map((_, k) => ({
-          id: faker.string.hexadecimal({ length: 4 }).slice(2).toUpperCase(),
-          label: faker.lorem.words(2),
-          description: faker.lorem.sentence(),
-          properties: { index: `a${k}` },
-        })),
+        properties: { index: `a${k}` },
       })),
     })),
-  });
+  }));
 
-  return graph;
+  return buildGraph(new GraphBuilder().build(), 'tree', content);
 };
 
-// TODO(wittjosiah): This needs to be updated for the new graph api.
-//   Left it for now because the tree needs to be re-implemented flat.
-
-// export const GraphTree = ({ id, graph = createGraph(), debug }: { id: string; graph?: Graph; debug: boolean }) => {
-//   const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {
-//     // Moving within the tree.
-//     if (Path.hasDescendent(id, active.path) && Path.hasDescendent(id, over.path)) {
-//       const activeNode = graph.findNode(active.item.id);
-//       const overNode = graph.findNode(over.item.id);
-//       const activeParent = activeNode?.parent;
-//       const overParent = overNode?.parent;
-//       if (
-//         activeNode &&
-//         overNode &&
-//         activeParent &&
-//         overParent &&
-//         activeParent.id === overParent.id &&
-//         activeNode.id !== overNode.id &&
-//         operation === 'rearrange'
-//       ) {
-//         // This is a rearrange operation
-//         console.warn('[react-ui-mosaic]', 'Tree', 'rearrange', 'needs implementation');
-//       } else if (activeNode && activeParent && overParent && operation === 'transfer') {
-//         activeParent.removeNode(active.item.id);
-//         overNode.addNode('tree', { ...activeNode });
-//       }
-//     }
-//   };
+export const GraphTree = ({ id, graph = createGraph(), debug }: { id: string; graph?: Graph; debug: boolean }) => {
+  const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {
+    // Moving within the tree.
+    if (Path.hasDescendent(id, active.path) && Path.hasDescendent(id, over.path)) {
+      const activeNode = graph.findNode(active.item.id);
+      const overNode = graph.findNode(over.item.id);
+      const activeParent = activeNode?.parent;
+      const overParent = overNode?.parent;
+      if (
+        activeNode &&
+        overNode &&
+        activeParent &&
+        overParent &&
+        activeParent.id === overParent.id &&
+        activeNode.id !== overNode.id &&
+        operation === 'rearrange'
+      ) {
+        // This is a rearrange operation
+        console.warn('[react-ui-mosaic]', 'Tree', 'rearrange', 'needs implementation');
+      } else if (activeNode && activeParent && overParent && operation === 'transfer') {
+        activeParent.removeNode(active.item.id);
+        overNode.addNode('tree', { ...activeNode });
+      }
+    }
+  };
 
-//   const handleOver = (): MosaicOperation => 'transfer';
+  const handleOver = (): MosaicOperation => 'transfer';
 
-//   return (
-//     <Tree id={id} items={graph.root.children as TreeData[]} onDrop={handleDrop} onOver={handleOver} debug={debug} />
-//   );
-// };
+  return (
+    <Tree id={id} items={graph.root.children as TreeData[]} onDrop={handleDrop} onOver={handleOver} debug={debug} />
+  );
+};