@dxos/react-ui-mosaic 0.3.3-main.006ca4d

package/src/views/Tree/Tree.tsx

@@ -0,0 +1,128 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { Card, Tree as TreeComponent, TreeItem as TreeItemComponent } from '@dxos/react-ui';
+import { dropRing, mx } from '@dxos/react-ui-theme';
+
+import {
+  type MosaicContainerProps,
+  Mosaic,
+  type MosaicDataItem,
+  type MosaicTileComponent,
+  useContainer,
+  useMosaic,
+  Path,
+  useSortedItems,
+  type MosaicCompareDataItem,
+} from '../../mosaic';
+
+// TODO(burdon): Tree data model that provides a pure abstraction of the plugin Graph.
+// - The Tree (like Stack, Grid) is a high level container that assembles Radix style DXOS UI components from a model.
+// - Models in general should be easily mapped from the Graph and/or ECHO queries.
+// - See: https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/examples-tree-sortable--basic-setup
+
+export type TreeProps<TData extends MosaicDataItem = TreeData> = MosaicContainerProps<TData, number> & {
+  items?: TData[];
+  debug?: boolean;
+  compare?: MosaicCompareDataItem;
+};
+
+export type TreeData = {
+  id: string;
+  label?: string; // TODO(burdon): Provide adapter.
+  children: TreeData[];
+};
+
+// TODO(burdon): Make generic (and forwardRef).
+export const Tree = ({ id, Component = TreeItem, onOver, onDrop, items = [], debug, compare }: TreeProps) => {
+  return (
+    <Mosaic.Container
+      {...{
+        id,
+        debug,
+        Component,
+        onOver,
+        onDrop,
+        compare,
+      }}
+    >
+      <TreeRoot items={items} />
+    </Mosaic.Container>
+  );
+};
+
+const TreeRoot = ({ items }: { items: TreeData[] }) => {
+  const { id, Component } = useContainer();
+  const sortedItems = useSortedItems(items);
+
+  return (
+    <TreeComponent.Root classNames='flex flex-col'>
+      <Mosaic.SortableContext id={id} items={sortedItems} direction='vertical'>
+        {sortedItems.map((item, index) => (
+          <TreeItemComponent.Root key={item.id} collapsible defaultOpen>
+            <Mosaic.SortableTile item={item} path={id} position={index} Component={Component!} />
+          </TreeItemComponent.Root>
+        ))}
+      </Mosaic.SortableContext>
+    </TreeComponent.Root>
+  );
+};
+
+/**
+ * Pure component that is used by the mosaic overlay.
+ */
+const TreeItem: MosaicTileComponent<TreeData> = forwardRef(
+  ({ path, draggableStyle, draggableProps, item, operation, active, isOver, isDragging, className }, forwardedRef) => {
+    return (
+      <div
+        ref={forwardedRef}
+        style={draggableStyle}
+        className={mx(
+          'flex flex-col rounded',
+          className,
+          (active === 'rearrange' || active === 'origin') && 'opacity-0',
+          active === 'destination' && 'opacity-20',
+          isOver && dropRing,
+        )}
+      >
+        <Card.Header>
+          <Card.DragHandle {...draggableProps} />
+          <Card.Title title={item.label ?? path} classNames='truncate' />
+        </Card.Header>
+
+        {!active && item.children && <TreeBranch path={path} items={item.children} />}
+      </div>
+    );
+  },
+);
+
+const TreeBranch = ({ path, items }: { path: string; items: TreeData[] }) => {
+  const { operation, overItem } = useMosaic();
+  const { Component } = useContainer();
+  const sortedItems = useSortedItems(items);
+
+  return (
+    <TreeItemComponent.Body className='pis-4'>
+      <Mosaic.SortableContext id={path} items={sortedItems} direction='vertical'>
+        {sortedItems.map((child, index) => (
+          <TreeComponent.Branch key={child.id}>
+            <TreeItemComponent.Root collapsible defaultOpen>
+              <Mosaic.SortableTile
+                item={child}
+                path={path}
+                position={index}
+                Component={Component!}
+                isOver={
+                  overItem?.path === Path.create(path, child.id) && (operation === 'adopt' || operation === 'copy')
+                }
+              />
+            </TreeItemComponent.Root>
+          </TreeComponent.Branch>
+        ))}
+      </Mosaic.SortableContext>
+    </TreeItemComponent.Body>
+  );
+};

package/src/views/Tree/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Tree';

package/src/views/Tree/testing.tsx

@@ -0,0 +1,156 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { faker } from '@faker-js/faker';
+import React, { useCallback, useState } from 'react';
+
+import { type Graph, GraphBuilder, type Node } from '@braneframe/plugin-graph';
+import { buildGraph } from '@braneframe/plugin-graph/testing';
+import { arrayMove } from '@dxos/util';
+
+import { Tree, type TreeData, type TreeProps } from './Tree';
+import { type MosaicDropEvent, type MosaicMoveEvent, Path } from '../../mosaic';
+import { TestObjectGenerator, nextRearrangeIndex } from '../../testing';
+
+const fake = faker.helpers.fake;
+
+export type DemoTreeProps = TreeProps & {
+  initialItems?: TreeData[];
+  types?: string[];
+  debug?: boolean;
+};
+
+export const DemoTree = ({ id = 'tree', initialItems, types, debug }: DemoTreeProps) => {
+  const [items, setItems] = useState<TreeData[]>(
+    initialItems ??
+      (() => {
+        const generator = new TestObjectGenerator({ types });
+        return Array.from({ length: 4 }).map(() => {
+          const item = generator.createObject();
+          return {
+            // TODO(wittjosiah): Object id isn't included in spread data.
+            id: item.id,
+            ...item,
+            label: item.title,
+            children: Array.from({ length: 3 }).map(() => {
+              const item = generator.createObject();
+              return {
+                id: item.id,
+                ...item,
+                label: item.title,
+                children: [],
+              };
+            }),
+          };
+        });
+      }),
+  );
+
+  const handleOver = useCallback(({ active, over }: MosaicMoveEvent<number>) => {
+    return !(active.path === id && over.path !== id) ? 'adopt' : 'reject';
+  }, []);
+
+  // NOTE: Does not handle deep operations.
+  const handleDrop = useCallback(
+    ({ active, over }: MosaicDropEvent<number>) => {
+      if (active.path === Path.create(id, active.item.id)) {
+        setItems((items) => {
+          const activeIndex = items.findIndex((item) => item.id === active.item.id);
+          const overIndex = items.findIndex((item) => item.id === over.item.id);
+          return [...arrayMove(items, activeIndex, overIndex)];
+        });
+      } else {
+        setItems((items) =>
+          items.map((item) => {
+            const children = [...item.children];
+            if (Path.last(Path.parent(active.path)) === item.id) {
+              children.splice(active.position!, 1);
+            }
+            if (Path.last(Path.parent(over.path)) === item.id) {
+              children.splice(over.position!, 0, active.item as TreeData);
+            }
+            return { ...item, children };
+          }),
+        );
+      }
+    },
+    [items],
+  );
+
+  return <Tree id={id} items={items} onOver={handleOver} onDrop={handleDrop} />;
+};
+
+export const createGraph = () => {
+  const content = [...Array(2)].map((_, i) => ({
+    id: faker.string.hexadecimal({ length: 4 }).slice(2).toUpperCase(),
+    label: fake('{{commerce.productMaterial}} {{animal.cat}}'),
+    description: fake('{{commerce.productDescription}}'),
+    properties: { index: `a${i}` },
+    children: [...Array(2)].map((_, j) => ({
+      id: faker.string.hexadecimal({ length: 4 }).slice(2).toUpperCase(),
+      label: fake('{{commerce.productMaterial}} {{animal.cat}}'),
+      description: fake('{{commerce.productDescription}}'),
+      properties: { index: `a${j}` },
+      children: [...Array(2)].map((_, k) => ({
+        id: faker.string.hexadecimal({ length: 4 }).slice(2).toUpperCase(),
+        label: fake('{{commerce.productMaterial}} {{animal.cat}}'),
+        description: fake('{{commerce.productDescription}}'),
+        properties: { index: `a${k}` },
+      })),
+    })),
+  }));
+
+  return buildGraph(new GraphBuilder().build(), 'tree', content);
+};
+
+const graphNodeCompare = (a: Node, b: Node) => {
+  if (a.properties.index && b.properties.index) {
+    if (a.properties.index < b.properties.index) {
+      return -1;
+    } else if (a.properties.index > b.properties.index) {
+      return 1;
+    }
+    return 0;
+  }
+  return 0;
+};
+
+export const GraphTree = ({ id, graph = createGraph(), debug }: { id: string; graph?: Graph; debug: boolean }) => {
+  // TODO(wittjosiah): This graph does not handle order currently.
+  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
+        const nextIndex = nextRearrangeIndex(activeParent.children.sort(graphNodeCompare), activeNode.id, overNode.id);
+        activeNode.properties.index = nextIndex ?? 'a0';
+      } else if (activeNode && activeParent && overParent && operation === 'adopt') {
+        activeParent.removeNode(active.item.id);
+        overNode.addNode('tree', { ...activeNode });
+      }
+    }
+  };
+
+  return (
+    <Tree
+      id={id}
+      items={graph.root.children as TreeData[]}
+      onDrop={handleDrop}
+      debug={debug}
+      compare={graphNodeCompare}
+    />
+  );
+};

package/src/views/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Grid';
+export * from './Kanban';
+export * from './Stack';
+export * from './Tree';