@dxos/plugin-navtree 0.8.2-main.f11618f → 0.8.2-staging.42af850

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 { live, type Live } 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 = live<NodeArg<any>>(createTree());
-const state = new Map<string, Live<{ 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) ?? live({ 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) ?? live({ 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/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 { live, type Live } 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, Live<{ 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) ?? live({ 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) ?? live({ 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>
-  );
-};