@dxos/react-ui-mosaic 0.4.6 → 0.4.7-main.06facb4

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

@@ -4,5 +4,4 @@ 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":";;;;;AA2CA,wBA4BE;AAIF,eAAO,MAAM,IAAI,IAAK,CAAC"}
+{"version":3,"file":"Echo.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Demo/Echo.stories.tsx"],"names":[],"mappings":";;;;;AAyCA,wBA4BE"}

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

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

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

@@ -1,4 +1,4 @@
-import { type Graph } from '@dxos/app-graph';
+import { Graph } from '@dxos/app-graph';
 import { type TreeData, type TreeProps } from './Tree';
 export type DemoTreeProps = TreeProps & {
     initialItems?: TreeData[];
@@ -7,9 +7,4 @@ 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,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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-mosaic",
-  "version": "0.4.6",
+  "version": "0.4.7-main.06facb4",
   "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.6",
-    "@dxos/invariant": "0.4.6",
-    "@dxos/keys": "0.4.6",
-    "@dxos/react-ui-theme": "0.4.6",
-    "@dxos/react-ui": "0.4.6",
-    "@dxos/react-ui-card": "0.4.6",
-    "@dxos/react-ui-types": "0.4.6",
-    "@dxos/util": "0.4.6"
+    "@dxos/debug": "0.4.7-main.06facb4",
+    "@dxos/invariant": "0.4.7-main.06facb4",
+    "@dxos/keys": "0.4.7-main.06facb4",
+    "@dxos/react-ui-card": "0.4.7-main.06facb4",
+    "@dxos/react-ui-theme": "0.4.7-main.06facb4",
+    "@dxos/react-ui": "0.4.7-main.06facb4",
+    "@dxos/react-ui-types": "0.4.7-main.06facb4",
+    "@dxos/util": "0.4.7-main.06facb4"
   },
   "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.6",
-    "@dxos/echo-schema": "0.4.6",
-    "@dxos/random": "0.4.6",
-    "@dxos/react-client": "0.4.6",
-    "@dxos/gem-core": "0.4.6",
-    "@dxos/storybook-utils": "0.4.6"
+    "@dxos/app-graph": "0.4.7-main.06facb4",
+    "@dxos/echo-schema": "0.4.7-main.06facb4",
+    "@dxos/gem-core": "0.4.7-main.06facb4",
+    "@dxos/random": "0.4.7-main.06facb4",
+    "@dxos/storybook-utils": "0.4.7-main.06facb4",
+    "@dxos/react-client": "0.4.7-main.06facb4"
   },
   "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,9 +30,7 @@ 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>
@@ -73,4 +71,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,13 +4,12 @@
 
 import React, { useCallback, useState } from 'react';
 
-import { type Graph, GraphBuilder } from '@dxos/app-graph';
-import { buildGraph } from '@dxos/app-graph/testing';
+import { Graph } from '@dxos/app-graph';
 import { faker } from '@dxos/random';
 import { arrayMove } from '@dxos/util';
 
 import { Tree, type TreeData, type TreeProps } from './Tree';
-import { type MosaicDropEvent, type MosaicMoveEvent, Path, type MosaicOperation } from '../../mosaic';
+import { type MosaicDropEvent, type MosaicMoveEvent, Path } from '../../mosaic';
 import { TestObjectGenerator } from '../../testing';
 
 export type DemoTreeProps = TreeProps & {
@@ -80,57 +79,64 @@ export const DemoTree = ({ id = 'tree', initialItems, types, debug }: DemoTreePr
 };
 
 export const createGraph = () => {
-  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) => ({
+  const graph = new Graph();
+  graph.addNodes({
+    id: 'root',
+    nodes: [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${j}` },
-      children: [...Array(2)].map((_, k) => ({
+      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${k}` },
+        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}` },
+        })),
       })),
     })),
-  }));
+  });
 
-  return buildGraph(new GraphBuilder().build(), 'tree', content);
+  return graph;
 };
 
-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 });
-      }
-    }
-  };
+// 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.
 
-  const handleOver = (): MosaicOperation => 'transfer';
+// 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 });
+//       }
+//     }
+//   };
 
-  return (
-    <Tree id={id} items={graph.root.children as TreeData[]} onDrop={handleDrop} onOver={handleOver} debug={debug} />
-  );
-};
+//   const handleOver = (): MosaicOperation => 'transfer';
+
+//   return (
+//     <Tree id={id} items={graph.root.children as TreeData[]} onDrop={handleDrop} onOver={handleOver} debug={debug} />
+//   );
+// };