@dxos/plugin-navtree 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/src/components/L1Panels.tsx

@@ -1,115 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { useLayout } from '@dxos/app-framework';
-import { type Node } from '@dxos/app-graph';
-import { Button, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Tree } from '@dxos/react-ui-list';
-import { Tabs } from '@dxos/react-ui-tabs';
-import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
-
-import { useNavTreeContext } from './NavTreeContext';
-import { NavTreeItemColumns } from './NavTreeItemColumns';
-import { useLoadDescendents } from '../hooks';
-import { NAVTREE_PLUGIN } from '../meta';
-import { l0ItemType } from '../util';
-
-export type L1PanelProps = { item: Node<any>; path: string[]; currentItemId: string; onBack?: () => void };
-
-const L1Panel = ({ item, path, currentItemId, onBack }: L1PanelProps) => {
-  const layout = useLayout();
-  const navTreeContext = useNavTreeContext();
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  return (
-    <Tabs.Tabpanel
-      key={item.id}
-      value={item.id}
-      classNames={[
-        'absolute inset-block-0 inline-end-0 is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr] pbs-[env(safe-area-inset-top)]',
-        item.id === currentItemId && 'grid',
-      ]}
-      tabIndex={-1}
-      {...(!layout.sidebarOpen && { inert: 'true' })}
-    >
-      {item.id === currentItemId && (
-        <>
-          <h2 className='flex items-center border-be border-separator app-drag'>
-            <Button
-              variant='ghost'
-              density='fine'
-              classNames={mx(
-                'is-6 pli-0 dx-focus-ring-inset',
-                !item.id.startsWith('!') && 'invisible',
-                hoverableControlItem,
-                hoverableOpenControlItem,
-              )}
-              onClick={onBack}
-            >
-              <Icon icon='ph--caret-left--regular' size={3} />
-            </Button>
-            <span className='flex-1 truncate cursor-default'>{toLocalizedString(item.properties.label, t)}</span>
-            <NavTreeItemColumns path={path} item={item} open />
-          </h2>
-          <div role='none' className='overflow-y-auto'>
-            <Tree
-              {...navTreeContext}
-              id={item.id}
-              root={item}
-              path={path}
-              levelOffset={5}
-              draggable
-              gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-              renderColumns={NavTreeItemColumns}
-            />
-          </div>
-        </>
-      )}
-    </Tabs.Tabpanel>
-  );
-};
-
-const L1PanelCollection = ({ item, path, currentItemId }: L1PanelProps) => {
-  const { getItems } = useNavTreeContext();
-  useLoadDescendents(item);
-  const collectionItems = getItems(item);
-  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
-  return (
-    <>
-      {collectionItems
-        .filter((item) => l0ItemType(item) === 'tab')
-        .map((item) => (
-          <L1Panel key={item.id} item={item} path={groupPath} currentItemId={currentItemId} />
-        ))}
-    </>
-  );
-};
-
-export const L1Panels = ({
-  topLevelItems,
-  path,
-  currentItemId,
-  onBack,
-}: Pick<L1PanelProps, 'onBack'> & {
-  topLevelItems: Node<any>[];
-  path: string[];
-  currentItemId: string;
-}) => {
-  return (
-    <>
-      {topLevelItems.map((item) => {
-        const type = l0ItemType(item);
-        switch (type) {
-          case 'collection':
-            return <L1PanelCollection key={item.id} item={item} path={path} currentItemId={currentItemId} />;
-          case 'tab':
-            return <L1Panel key={item.id} item={item} path={path} currentItemId={currentItemId} onBack={onBack} />;
-          default:
-            return null;
-        }
-      })}
-    </>
-  );
-};

package/src/components/NavTree.stories.tsx

@@ -1,107 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { type Meta } from '@storybook/react';
-import React, { useEffect } from 'react';
-
-import { isActionLike, type NodeArg } from '@dxos/app-graph';
-import { create, type ReactiveObject } from '@dxos/live-object';
-import { faker } from '@dxos/random';
-import { isTreeData, type TreeData } from '@dxos/react-ui-list';
-import { Path } from '@dxos/react-ui-list';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { StorybookNavTree } from '../stories/StorybookNavTree';
-import { createTree, updateState } from '../testing';
-
-faker.seed(1234);
-
-const tree = create<NodeArg<any>>(createTree());
-const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>();
-
-const meta: Meta<typeof StorybookNavTree> = {
-  title: 'plugins/plugin-navtree/NavTree',
-  component: StorybookNavTree,
-  decorators: [withTheme, withLayout({ tooltips: true })],
-  render: (args) => {
-    useEffect(() => {
-      return monitorForElements({
-        canMonitor: ({ source }) => isTreeData(source),
-        onDrop: ({ location, source }) => {
-          // Didn't drop on anything.
-          if (!location.current.dropTargets.length) {
-            return;
-          }
-
-          const target = location.current.dropTargets[0];
-          const instruction: Instruction | null = extractInstruction(target.data);
-          if (instruction !== null) {
-            updateState({
-              state: tree,
-              instruction,
-              source: source.data as TreeData,
-              target: target.data as TreeData,
-            });
-          }
-        },
-      });
-    }, []);
-
-    return <StorybookNavTree {...args} />;
-  },
-  args: {
-    id: tree.id,
-    getActions: (arg: NodeArg<any>) => ({
-      actions: arg.nodes?.filter((node) => isActionLike(node)) ?? [],
-      groupedActions: {},
-    }),
-    getItems: (testItem?: any) => {
-      return testItem?.nodes ?? tree.nodes ?? [];
-    },
-    getProps: (testItem: NodeArg<any>) => ({
-      id: testItem.id,
-      label: testItem.properties?.label ?? testItem.id,
-      icon: testItem.properties?.icon,
-      ...((testItem.nodes?.length ?? 0) > 0 && {
-        parentOf: testItem.nodes!.map(({ id }) => id),
-      }),
-    }),
-    isOpen: (_path: string[]) => {
-      const path = Path.create(..._path);
-      const value = state.get(path) ?? create({ open: false, current: false });
-      if (!state.has(path)) {
-        state.set(path, value);
-      }
-
-      return value.open;
-    },
-    isCurrent: (_path: string[]) => {
-      const path = Path.create(..._path);
-      const value = state.get(path) ?? create({ open: false, current: false });
-      if (!state.has(path)) {
-        state.set(path, value);
-      }
-
-      return value.current;
-    },
-    onOpenChange: ({ path: _path, open }) => {
-      const path = Path.create(..._path);
-      const object = state.get(path);
-      object!.open = open;
-    },
-    onSelect: ({ path: _path, current }) => {
-      const path = Path.create(..._path);
-      const object = state.get(path);
-      object!.current = current;
-    },
-  },
-};
-
-export default meta;
-
-export const Default = {};

package/src/components/NavTree.tsx

@@ -1,51 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { Tabs } from '@dxos/react-ui-tabs';
-import { byPosition } from '@dxos/util';
-
-import { L0Menu } from './L0Menu';
-import { L1Panels } from './L1Panels';
-import { useNavTreeContext } from './NavTreeContext';
-import { type NavTreeProps } from './types';
-import { useLoadDescendents } from '../hooks';
-
-export const NAV_TREE_ITEM = 'NavTreeItem';
-
-export const NavTree = ({ id, root }: NavTreeProps) => {
-  const { tab, getItems, onBack } = useNavTreeContext();
-  const topLevelActions = getItems(root, 'item').toSorted((a, b) => byPosition(a.properties, b.properties));
-  const topLevelCollections = getItems(root, 'collection');
-  const topLevelWorkspaces = getItems(root, 'workspace');
-  const topLevelNavigation = getItems(root, 'navigation');
-  const l0Items = useMemo(
-    () => [...topLevelActions, ...topLevelCollections, ...topLevelWorkspaces, ...topLevelNavigation],
-    [topLevelActions, topLevelCollections, topLevelWorkspaces, topLevelNavigation],
-  );
-  const pinnedItems = getItems(root, 'pin-end').toSorted((a, b) => byPosition(a.properties, b.properties));
-  const userAccountItem = getItems(root, 'user-account')[0];
-  const topLevelItems = useMemo(
-    () => [...l0Items, ...pinnedItems, userAccountItem],
-    [l0Items, pinnedItems, userAccountItem],
-  );
-
-  useLoadDescendents(root);
-  const path = useMemo(() => [id], [id]);
-
-  return (
-    // NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls
-    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
-      <L0Menu
-        topLevelItems={l0Items}
-        pinnedItems={pinnedItems}
-        userAccountItem={userAccountItem}
-        path={path}
-        parent={root}
-      />
-      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} />
-    </Tabs.Root>
-  );
-};

package/src/components/NavTreeItemColumns.tsx

@@ -1,71 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { Fragment, memo } from 'react';
-
-import { isAction } from '@dxos/app-graph';
-import { Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
-
-import { NAV_TREE_ITEM } from './NavTree';
-import { useNavTreeContext } from './NavTreeContext';
-import { NavTreeItemAction } from './NavTreeItemAction';
-import type { NavTreeItemColumnsProps } from './types';
-import { useLoadDescendents } from '../hooks';
-import { NAVTREE_PLUGIN } from '../meta';
-
-export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumnsProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  const { getActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
-
-  const level = path.length - 2;
-
-  const { actions: _actions, groupedActions } = getActions(item);
-  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) =>
-    a.properties?.disposition === 'list-item-primary' ? -1 : 1,
-  );
-
-  const actions = (primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : _actions)
-    .flatMap((action) => (isAction(action) ? [action] : []))
-    .filter((action) => !action.properties?.hidden);
-
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
-
-  useLoadDescendents(item);
-  useLoadDescendents(primaryAction && !isAction(primaryAction) ? primaryAction : undefined);
-
-  return (
-    <div role='none' className='contents app-no-drag'>
-      {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
-        <NavTreeItemAction
-          testId={primaryAction.properties?.testId}
-          label={toLocalizedString(primaryAction.properties?.label, t)}
-          icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
-          parent={item}
-          monolithic={isAction(primaryAction)}
-          menuActions={isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction.id]}
-          menuType={primaryAction.properties?.menuType}
-          caller={NAV_TREE_ITEM}
-        />
-      ) : (
-        <Treegrid.Cell />
-      )}
-      <ActionRoot>
-        {actions.length > 0 ? (
-          <NavTreeItemAction
-            testId={`navtree.treeItem.actionsLevel${level}`}
-            label={t('tree item actions label')}
-            icon='ph--dots-three-vertical--regular'
-            parent={item}
-            menuActions={actions}
-            menuType='dropdown'
-            caller={NAV_TREE_ITEM}
-          />
-        ) : (
-          <Treegrid.Cell />
-        )}
-      </ActionRoot>
-      {ItemEnd && <ItemEnd node={item} open={open} />}
-    </div>
-  );
-});

package/src/stories/Graph.stories.tsx

@@ -1,130 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { batch } from '@preact/signals-core';
-import { type Meta } from '@storybook/react';
-import React, { useEffect } from 'react';
-
-import { Graph, ROOT_ID, type Node } from '@dxos/app-graph';
-import { registerSignalsRuntime } from '@dxos/echo-signals/react';
-import { create, type ReactiveObject } from '@dxos/live-object';
-import { faker } from '@dxos/random';
-import { isTreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
-import { Path } from '@dxos/react-ui-list';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { StorybookNavTree } from './StorybookNavTree';
-import { getActions, getChildren } from '../util';
-
-faker.seed(3);
-registerSignalsRuntime();
-
-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 graph = createGraph();
-const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>();
-
-export const Default = {};
-
-const meta: Meta<typeof StorybookNavTree> = {
-  title: 'plugins/plugin-navtree/Graph',
-  component: StorybookNavTree,
-  decorators: [withTheme, withLayout({ tooltips: true })],
-  render: (args) => {
-    useEffect(() => {
-      return monitorForElements({
-        canMonitor: ({ source }) => isTreeData(source.data),
-        onDrop: ({ location, source }) => {
-          // Didn't drop on anything.
-          if (!location.current.dropTargets.length) {
-            return;
-          }
-
-          const target = location.current.dropTargets[0];
-
-          const instruction: Instruction | null = extractInstruction(target.data);
-          if (instruction !== null) {
-            // TODO(wittjosiah): Implement drop logic.
-            console.log('update', instruction);
-          }
-        },
-      });
-    }, []);
-
-    return <StorybookNavTree {...args} />;
-  },
-  args: {
-    root: graph.root,
-    id: graph.root.id,
-    getActions: (node: Node) => getActions(graph, node),
-    getItems: (node?: Node) => graph.nodes(node ?? graph.root),
-    getProps: (node: Node, path: string[]) => {
-      const children = getChildren(graph, node, undefined, path);
-      const parentOf =
-        children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
-      return {
-        id: node.id,
-        label: node.properties.label ?? node.id,
-        icon: node.properties.icon,
-        parentOf,
-      } satisfies PropsFromTreeItem;
-    },
-    isOpen: (_path: string[]) => {
-      const path = Path.create(..._path);
-      const value = state.get(path) ?? create({ open: false, current: false });
-      if (!state.has(path)) {
-        state.set(path, value);
-      }
-
-      return value.open;
-    },
-    isCurrent: (_path: string[]) => {
-      const path = Path.create(..._path);
-      const value = state.get(path) ?? create({ open: false, current: false });
-      if (!state.has(path)) {
-        state.set(path, value);
-      }
-
-      return value.current;
-    },
-    onOpenChange: ({ path: _path, open }) => {
-      const path = Path.create(..._path);
-      const object = state.get(path);
-      object!.open = open;
-    },
-    onSelect: ({ path: _path, current }) => {
-      const path = Path.create(..._path);
-      const object = state.get(path);
-      object!.current = current;
-    },
-  },
-};
-
-export default meta;

package/src/stories/StorybookNavTree.tsx

@@ -1,63 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo, useState } from 'react';
-
-import { NavTree, NavTreeContext, type NavTreeContextValue, type NavTreeProps } from '../components';
-import { type NavTreeItemGraphNode } from '../types';
-
-export const StorybookNavTree = ({
-  getActions,
-  loadDescendents,
-  renderItemEnd,
-  popoverAnchorId,
-  getItems,
-  getProps,
-  isCurrent,
-  canDrop,
-  onSelect,
-  isOpen,
-  onOpenChange,
-  ...props
-}: NavTreeProps & NavTreeContextValue) => {
-  const [tab, setTab] = useState('never');
-
-  const contextValue = useMemo(
-    () => ({
-      tab,
-      onTabChange: (node: NavTreeItemGraphNode) => setTab(node.id),
-      getActions,
-      loadDescendents,
-      renderItemEnd,
-      popoverAnchorId,
-      getItems,
-      getProps,
-      isCurrent,
-      isOpen,
-      onOpenChange,
-      canDrop,
-      onSelect,
-    }),
-    [
-      tab,
-      setTab,
-      getActions,
-      loadDescendents,
-      renderItemEnd,
-      popoverAnchorId,
-      getItems,
-      getProps,
-      isCurrent,
-      isOpen,
-      onOpenChange,
-      canDrop,
-      onSelect,
-    ],
-  );
-  return (
-    <NavTreeContext.Provider value={contextValue}>
-      <NavTree {...props} />
-    </NavTreeContext.Provider>
-  );
-};