@dxos/plugin-navtree 0.6.8-main.046e6cf

package/src/experimental/Tree.stories.tsx

@@ -0,0 +1,229 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { House, List, Planet, PlusCircle, Sailboat } from '@phosphor-icons/react';
+import React, { type JSX, type PropsWithChildren, useEffect, useState } from 'react';
+
+import { faker } from '@dxos/random';
+import { modalSurface, mx } from '@dxos/react-ui-theme';
+import { withFullscreen, withTheme } from '@dxos/storybook-utils';
+
+import { type ItemMap, Tree, type TreeNodeData, type TreeProps, visitNodes, visitor } from './Tree';
+
+faker.seed(1234);
+
+export default {
+  title: 'plugin-navtree/Tree',
+  component: Tree,
+  decorators: [withTheme, withFullscreen({ classNames: modalSurface })],
+};
+
+/**
+ * Space:
+ * - Space panels are separated from each other to give them more weight than folders.
+ * - Private space isn't different (just first, different icon).
+ * - Edit titles in place.
+ *
+ * Navigation:
+ *  - up/down across spaces/folder peers
+ *  - right to enter space/folder children
+ *  - left to parent
+ */
+const Container = ({ children, sidebar }: PropsWithChildren<{ sidebar: JSX.Element }>) => {
+  return (
+    <div className='flex'>
+      {/* TODO(burdon): Custom thin scrollbar. */}
+      {/* TODO(burdon): Horizontal scrolling within navtree? */}
+      <div className='flex flex-col overflow-y-auto w-[300px] bg-neutral-100 dark:bg-neutral-950'>{sidebar}</div>
+      <div className='flex flex-col grow overflow-hidden'>{children}</div>
+    </div>
+  );
+};
+
+// TODO(burdon): Generate.
+const data: TreeNodeData[] = [
+  {
+    id: 'root',
+    title: 'Root',
+    children: [
+      {
+        id: faker.string.uuid(),
+        title: 'Personal Space',
+        color: 'text-green-400',
+        Icon: House,
+        children: [
+          {
+            id: faker.string.uuid(),
+            title: faker.commerce.productName(),
+          },
+          {
+            id: faker.string.uuid(),
+            title: faker.commerce.productName(),
+          },
+          {
+            id: faker.string.uuid(),
+            title: faker.commerce.productName(),
+            children: [
+              {
+                id: faker.string.uuid(),
+                title: faker.commerce.productName(),
+                children: [
+                  {
+                    id: faker.string.uuid(),
+                    title: faker.commerce.productName(),
+                  },
+                  {
+                    id: faker.string.uuid(),
+                    title: faker.commerce.productName(),
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: faker.string.uuid(),
+        title: faker.commerce.productName(),
+        Icon: Planet,
+        children: [
+          {
+            id: faker.string.uuid(),
+            title: faker.commerce.productName(),
+          },
+        ],
+      },
+      {
+        id: faker.string.uuid(),
+        title: faker.commerce.productName(),
+        Icon: Sailboat,
+      },
+      {
+        id: faker.string.uuid(),
+        title: faker.commerce.productName(),
+        Icon: Planet,
+      },
+    ],
+  },
+];
+
+export const Default = () => {
+  return <Container sidebar={<Sidebar mutate />} />;
+};
+
+export const Visitor = () => {
+  const [items] = useState(data);
+  const root = items[0];
+  const [openItems] = useState<ItemMap>({ [root.children![0].id]: true });
+  return (
+    <div className='flex flex-col'>
+      {Array.from(visitor(root, openItems)).map(({ node: { id, title }, depth }) => (
+        <div key={id} className='grid grid-cols-[40px_400px_400px] font-mono'>
+          <div>{depth}</div>
+          <div>{id}</div>
+          <div>{title}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const Sidebar = ({ mutate }: { mutate?: boolean }) => {
+  const [items, setItems] = useState(data);
+  const root = items[0];
+  const [openItems, setOpenItems] = useState<ItemMap>({ [root.children![0].id]: true });
+  const [selectedItems, setSelectedItems] = useState<ItemMap>({});
+  const [activeItems, setActiveItems] = useState<ItemMap>(() => {
+    const active: ItemMap = {};
+    visitNodes(root, (node, depth) => {
+      if (depth > 1 && Math.random() > 0.6) {
+        active[node.id] = true;
+      }
+    });
+    return active;
+  });
+
+  useEffect(() => {
+    if (mutate) {
+      const t = setInterval(() => {
+        setActiveItems((active) => {
+          visitNodes(root, (node, depth) => {
+            if (depth > 1) {
+              active[node.id] = active[node.id] ? Math.random() > 0.4 : Math.random() > 0.7;
+            }
+          });
+          return { ...active };
+        });
+      }, 5_000);
+      return () => clearInterval(t);
+    }
+  }, []);
+
+  const handleCreateItem: TreeProps['onMenuAction'] = (id, action) => {
+    setItems((items) => {
+      let parent: TreeNodeData | undefined;
+      visitNodes(root, (node) => {
+        if (node.id === id) {
+          parent = node;
+        }
+      });
+
+      (parent!.children ??= []).push({
+        id: faker.string.uuid(),
+        title: faker.commerce.productName(),
+      });
+
+      setOpenItems((open) => ({ ...open, [parent!.id]: true }));
+
+      return { ...items };
+    });
+  };
+
+  const handleCreateSpace = () => {
+    setItems((items) => {
+      items[0].children?.push({
+        id: faker.string.uuid(),
+        Icon: Planet,
+        title: faker.commerce.productName(),
+      });
+
+      return { ...items };
+    });
+  };
+
+  return (
+    <div className='flex flex-col overflow-hidden'>
+      <div className='flex flex-col overflow-y-auto'>
+        <Tree
+          className='p-0.5 gap-1'
+          node={root}
+          open={openItems}
+          selected={selectedItems}
+          active={activeItems}
+          onChangeOpen={(id, open) => setOpenItems((items) => ({ ...items, [id]: open }))}
+          onChangeSelected={(id, open) => setSelectedItems((items) => ({ ...items, [id]: open }))}
+          onMenuAction={handleCreateItem}
+          getSlots={(node, open, depth, ancestors) => {
+            if (depth === 1) {
+              return {
+                root: 'rounded bg-white dark:bg-neutral-850',
+                header: mx('rounded-t bg-neutral-50 dark:bg-neutral-900', !open && 'rounded-b'),
+              };
+            }
+          }}
+        />
+      </div>
+
+      <div className='flex items-center my-2 px-2 gap-2'>
+        <PlusCircle onClick={handleCreateSpace} />
+        <span className='grow text-sm' onClick={handleCreateSpace}>
+          New space
+        </span>
+        <List />
+      </div>
+    </div>
+  );
+};

package/src/experimental/Tree.tsx

@@ -0,0 +1,282 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { CaretRight, Circle, File, Folder, type Icon, type IconProps, Plus, UserCircle } from '@phosphor-icons/react';
+import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
+
+import { type ClassNameValue, type Size } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+// TODO(burdon): Rounded border if first/last.
+const styles = {
+  hover: 'hover:bg-slate-400 dark:hover:bg-slate-800',
+  selected: '!bg-slate-300 dark:!bg-slate-700',
+};
+
+export const IconButton = ({
+  Icon,
+  classNames,
+  size = 4,
+  onClick,
+  ...props
+}: {
+  Icon: Icon;
+  classNames?: ClassNameValue;
+  size?: Size;
+} & Pick<IconProps, 'weight'> &
+  Pick<HTMLAttributes<HTMLDivElement>, 'onClick'>) => {
+  // TODO(burdon): Density aware.
+  return (
+    <div className={mx('flex w-6 h-6 items-center justify-center select-none', classNames)} onClick={onClick}>
+      <Icon className={mx(getSize(size), 'cursor-pointer')} {...props} />
+    </div>
+  );
+};
+
+export type TreeNodeData = {
+  id: string;
+  title: string;
+  Icon?: Icon;
+  color?: string;
+  children?: TreeNodeData[];
+};
+
+export type TreeIteratorNode = {
+  node: TreeNodeData;
+  depth: number;
+};
+
+export function* visitor(node: TreeNodeData, open: ItemMap): Generator<TreeIteratorNode> {
+  const stack: TreeIteratorNode[] = [{ node, depth: 0 }];
+  while (stack.length > 0) {
+    const { node, depth } = stack.pop()!;
+    if (depth > 0) {
+      yield { node, depth };
+    }
+
+    const children = Array.from(node.children ?? []);
+    if (depth === 0 || open[node.id]) {
+      for (let i = children.length - 1; i >= 0; i--) {
+        const child = children[i];
+        stack.push({ node: child, depth: depth + 1 });
+      }
+    }
+  }
+}
+
+export const visitNodes = <T,>(
+  node: TreeNodeData,
+  callback: (node: TreeNodeData, depth: number) => T,
+  depth = 0,
+): T | undefined => {
+  const result = callback(node, depth);
+  if (result) {
+    return result;
+  }
+
+  for (const child of node.children ?? []) {
+    const result = visitNodes(child, callback, depth + 1);
+    if (result) {
+      return result;
+    }
+  }
+};
+
+export type ItemMap<T = boolean> = Record<TreeNodeData['id'], T>;
+
+export type TreeNodeProps = {
+  node: TreeNodeData;
+  depth?: number;
+  getSlots?: (
+    node: TreeNodeData,
+    open: boolean,
+    depth: number,
+    ancestors: TreeNodeData[],
+  ) => { root?: string; header?: string } | undefined;
+
+  // Component state is separate from the data (stored separately).
+  open?: ItemMap;
+  selected?: ItemMap;
+  active?: ItemMap;
+
+  onChangeOpen?: (id: string, open: boolean) => void;
+  onChangeSelected?: (id: string, select: boolean) => void;
+  onMenuAction?: (id: string, action: string) => void;
+};
+
+const StateIcon = ({ node, open, selected, active }: TreeNodeProps) => {
+  const { id } = node;
+
+  // Check if any children are active.
+  let isChildActive = false;
+  if (!active?.[id] && !open?.[id]) {
+    isChildActive = !!visitNodes(node, ({ id }) => {
+      if (active?.[id]) {
+        return true;
+      }
+    });
+  }
+
+  const isActive = active?.[id] || isChildActive;
+
+  // TODO(burdon): No animation if opening/closing folder.
+  return (
+    <IconButton
+      Icon={isActive ? UserCircle : Circle}
+      size={4}
+      weight={selected?.[id] ? 'fill' : 'duotone'}
+      classNames={mx(
+        'text-slate-500',
+        !isChildActive && 'opacity-0 transition duration-500',
+        (isActive || selected?.[id]) && 'opacity-100',
+      )}
+    />
+  );
+};
+
+const OpenIcon = ({
+  node: { id, children },
+  open,
+  onChangeOpen,
+}: Pick<TreeNodeProps, 'node' | 'open' | 'onChangeOpen'>) => {
+  return (
+    (children?.length && open && (
+      <IconButton
+        Icon={CaretRight}
+        size={3}
+        classNames={mx('transition duration-200', open?.[id] ? 'rotate-90' : 'transform-none')}
+        onClick={(ev) => {
+          ev.stopPropagation();
+          onChangeOpen?.(id, !open[id]);
+        }}
+      />
+    )) || <div />
+  );
+};
+
+// TODO(burdon): Drag handle,
+const ItemIcon = ({
+  node: { children, Icon = children?.length ? Folder : File, color },
+}: Pick<TreeNodeProps, 'node'>) => {
+  return (
+    (Icon && (
+      <IconButton
+        Icon={Icon}
+        classNames={color ?? 'text-neutral-700 dark:text-neutral-300'}
+        weight={color ? 'duotone' : 'regular'}
+      />
+    )) || <div />
+  );
+};
+
+const MenuItem = ({ node: { id }, onMenuAction }: Pick<TreeNodeProps, 'node' | 'onMenuAction'>) => {
+  return (
+    <IconButton
+      Icon={Plus}
+      classNames='invisible group-hover:visible'
+      onClick={(ev) => {
+        ev.stopPropagation();
+        onMenuAction?.(id, 'create');
+      }}
+    />
+  );
+};
+
+// TODO(burdon): Editable.
+export const Title = ({ node: { title } }: Pick<TreeNodeProps, 'node'>) => {
+  return (
+    <div className='grow p-1 text-sm whitespace-nowrap truncate text-neutral-800 dark:text-neutral-200'>{title}</div>
+  );
+};
+
+export const Grid = ({
+  className,
+  ...props
+}: PropsWithChildren<{ className?: string }> & HTMLAttributes<HTMLDivElement>) => {
+  // TODO(burdon): Density aware.
+  return <div className={mx('grid grid-cols-[24px_24px_1fr_24px_24px]', className)} {...props} />;
+};
+
+export const TreeNodeRow = (props: TreeNodeProps & { className?: string }) => {
+  const {
+    node: { id },
+    className,
+    depth = 0,
+    selected,
+    onChangeSelected,
+  } = props;
+
+  return (
+    <Grid
+      style={{ paddingLeft: `${(depth - 1) * 24}px` }}
+      className={mx(
+        'group w-full items-center cursor-pointer',
+        styles.hover,
+        selected?.[id] && styles.selected,
+        className,
+      )}
+      onClick={() => selected && onChangeSelected?.(id, !selected[id])}
+    >
+      <OpenIcon {...props} />
+      <ItemIcon {...props} />
+      <Title {...props} />
+      <MenuItem {...props} />
+      <StateIcon {...props} />
+    </Grid>
+  );
+};
+
+export const TreeNode = (props: TreeNodeProps & { ancestors?: TreeNodeData[] }) => {
+  const {
+    node: { id, children },
+    depth = 0,
+    getSlots,
+    open,
+    ancestors = [],
+  } = props;
+  const { root, header } = getSlots?.(props.node, open?.[id] ?? false, depth, ancestors) ?? {};
+
+  return (
+    <div role='none' className={mx('flex flex-col', root)}>
+      <TreeNodeRow {...props} className={header} />
+      {(children?.length ?? 0) > 0 && open?.[id] && <TreeChildNodes {...props} ancestors={ancestors} />}
+    </div>
+  );
+};
+
+export const TreeChildNodes = ({
+  className,
+  ...props
+}: TreeNodeProps & { ancestors?: TreeNodeData[]; className?: string }) => {
+  const {
+    node: { children },
+    depth = 0,
+    ancestors = [],
+  } = props;
+  return (
+    <div className={mx('flex flex-col mt-0.5 gap-0.5', className)}>
+      {children?.map((child, i) => (
+        <TreeNode key={child.id} {...props} depth={depth + 1} node={child} ancestors={[...ancestors, props.node]} />
+      ))}
+    </div>
+  );
+};
+
+export type TreeProps = { className?: string; showRoot?: boolean } & TreeNodeProps;
+
+export const Tree = ({ className, showRoot, ...props }: TreeProps) => {
+  if (showRoot) {
+    return (
+      <div className={className}>
+        <TreeNode {...props} depth={0} />
+      </div>
+    );
+  } else {
+    return (
+      <div className={className}>
+        <TreeChildNodes {...props} className={className} depth={0} node={props.node} />
+      </div>
+    );
+  }
+};

package/src/index.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { NavTreePlugin } from './NavTreePlugin';
+
+export default NavTreePlugin;
+
+export * from './NavTreePlugin';
+export * from './util';

package/src/meta.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const NAVTREE_PLUGIN = 'dxos.org/plugin/navtree';
+
+// TODO(wittjosiah): Factor out.
+export const KEY_BINDING = 'KeyBinding';
+
+export default {
+  id: NAVTREE_PLUGIN,
+};

package/src/stories/Graph.stories.tsx

@@ -0,0 +1,162 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { batch } from '@preact/signals-core';
+import React, { useMemo, useState } from 'react';
+
+import { Graph } from '@dxos/app-graph';
+import { registerSignalRuntime } from '@dxos/echo-signals/react';
+import { faker } from '@dxos/random';
+import { DensityProvider, Tooltip, Treegrid } from '@dxos/react-ui';
+import { Mosaic, Path, type MosaicDropEvent, type MosaicMoveEvent, type MosaicOperation } from '@dxos/react-ui-mosaic';
+import { NavTree, type NavTreeItemNode, type OpenItemIds } from '@dxos/react-ui-navtree';
+import { withTheme } from '@dxos/storybook-utils';
+import { arrayMove } from '@dxos/util';
+
+import { type NavTreeItemGraphNode, treeItemsFromRootNode } from '../util';
+
+faker.seed(3);
+registerSignalRuntime();
+
+const createGraph = () => {
+  const graph = new Graph();
+
+  batch(() => {
+    (graph as any)._addNode({
+      id: ROOT_ID,
+      nodes: [...Array(2)].map((_, i) => ({
+        id: faker.string.hexadecimal({ length: 4 }).slice(2).toUpperCase(),
+        properties: { index: `a${i}`, label: faker.lorem.words(2), description: faker.lorem.sentence() },
+        nodes: [...Array(2)].map((_, j) => ({
+          id: faker.string.hexadecimal({ length: 4 }).slice(2).toUpperCase(),
+          properties: { index: `a${j}`, label: faker.lorem.words(2), description: faker.lorem.sentence() },
+          nodes: [...Array(2)].map((_, k) => ({
+            id: faker.string.hexadecimal({ length: 4 }).slice(2).toUpperCase(),
+            properties: { index: `a${k}`, label: faker.lorem.words(2), description: faker.lorem.sentence() },
+          })),
+        })),
+      })),
+    });
+  });
+
+  return graph;
+};
+
+const ROOT_ID = 'root';
+const graph = createGraph();
+
+const StorybookNavTree = ({ id = ROOT_ID }: { id?: string }) => {
+  const [openItemIds, setopenItemIds] = useState<OpenItemIds>({});
+  const items = useMemo(
+    () => treeItemsFromRootNode(graph, graph.root as NavTreeItemGraphNode, openItemIds),
+    [openItemIds],
+  );
+  const handleopenItemIdsChange = (item: NavTreeItemNode, nextOpen: boolean) => {
+    const itemId = item.path?.join(Treegrid.PATH_SEPARATOR) ?? 'never';
+    setopenItemIds((prevOpenItemIds) => {
+      if (nextOpen) {
+        return { ...prevOpenItemIds, [itemId]: true };
+      } else {
+        const { [itemId]: _, ...nextOpenItemIds } = prevOpenItemIds;
+        return nextOpenItemIds;
+      }
+    });
+  };
+
+  const handleOver = ({ active, over }: MosaicMoveEvent<number>): MosaicOperation => {
+    // Reject all operations that don’t match the graph’s root id
+    if (Path.first(active.path) !== id || Path.first(over.path) !== Path.first(active.path)) {
+      return 'reject';
+    }
+    // Rearrange if rearrange is supported and active and over are siblings
+    else if (Path.siblings(over.path, active.path)) {
+      return graph.findNode(Path.last(Path.parent(over.path)))?.properties.onRearrangeChildren ? 'rearrange' : 'reject';
+    }
+    // Rearrange if rearrange is supported and active is or would be a child of over
+    else if (Path.hasChild(over.path, active.path)) {
+      return graph.findNode(Path.last(over.path))?.properties.onRearrangeChildren ? 'rearrange' : 'reject';
+    }
+    // Check if transfer is supported
+    else {
+      const overNode = graph.findNode(Path.last(over.path));
+      const activeNode = graph.findNode(Path.last(active.path));
+      if (overNode && activeNode) {
+        return 'transfer';
+      } else {
+        return 'reject';
+      }
+    }
+  };
+
+  const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {
+    batch(() => {
+      const activeNode = graph.findNode(active.item.id);
+      const overNode = graph.findNode(over.item.id);
+      const activeParent = activeNode && graph.nodes(activeNode, { relation: 'inbound' })[0];
+      const overParent = overNode && graph.nodes(overNode, { relation: 'inbound' })[0];
+      if (
+        activeNode &&
+        overNode &&
+        activeParent &&
+        overParent &&
+        activeParent.id === overParent.id &&
+        activeNode.id !== overNode.id &&
+        operation === 'rearrange'
+      ) {
+        const ids = graph.nodes(activeParent).map((node) => node.id);
+        const activeIndex = ids.indexOf(activeNode.id);
+        const overIndex = ids.indexOf(overNode.id);
+        (graph as any)._sortEdges(
+          activeParent.id,
+          'outbound',
+          arrayMove(ids, activeIndex, overIndex > -1 ? overIndex : ids.length - 1),
+        );
+      } else if (activeNode && activeParent && overParent && operation === 'transfer') {
+        (graph as any)._removeEdges([{ source: activeParent.id, target: activeNode.id }]);
+        (graph as any)._addEdges([{ source: overNode.id, target: activeNode.id }]);
+      }
+    });
+  };
+
+  return (
+    <NavTree
+      id='storybook navtree'
+      items={items}
+      onItemOpenChange={handleopenItemIdsChange}
+      onDrop={handleDrop}
+      onOver={handleOver}
+    />
+  );
+};
+
+export default {
+  title: 'react-ui-navtree/Graph',
+  component: NavTree,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    withTheme,
+    (Story: any) => (
+      <Tooltip.Provider>
+        <DensityProvider density='fine'>
+          <div role='none' className='p-2'>
+            <Story />
+          </div>
+        </DensityProvider>
+      </Tooltip.Provider>
+    ),
+  ],
+};
+
+export const Default = {
+  render: ({ debug }: { debug?: boolean }) => (
+    <Mosaic.Root debug={debug}>
+      <StorybookNavTree />
+      <Mosaic.DragOverlay />
+    </Mosaic.Root>
+  ),
+};