@dxos/plugin-navtree 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/components/NavTree/NavTree.stories.tsx

@@ -1,159 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react';
-import { Schema } from 'effect';
-import React from 'react';
-
-import {
-  Capabilities,
-  IntentPlugin,
-  LayoutAction,
-  SettingsPlugin,
-  contributes,
-  createResolver,
-  defineCapability,
-  useCapability,
-} from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { live } from '@dxos/live-object';
-import { AttentionPlugin } from '@dxos/plugin-attention';
-import { GraphPlugin } from '@dxos/plugin-graph';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
-import { faker } from '@dxos/random';
-import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
-import { useAttendableAttributes, useAttention } from '@dxos/react-ui-attention';
-import { Stack, StackItem } from '@dxos/react-ui-stack';
-import { defaultTx, mx } from '@dxos/react-ui-theme';
-import { withLayout } from '@dxos/storybook-utils';
-
-import { NavTreePlugin } from '../../NavTreePlugin';
-import { storybookGraphBuilders } from '../../testing';
-import translations from '../../translations';
-import { NavTreeContainer } from '../NavTreeContainer';
-
-faker.seed(1234);
-
-const StoryState = defineCapability<{ tab: string }>('story-state');
-
-// TODO(burdon): Fix outline (e.g., button in sidebar nav is clipped when focused).
-// TODO(burdon): Consider similar containment of: Table, Sheet, Kanban Column, Form, etc.
-
-const container = 'flex flex-col grow gap-2 p-4 rounded-md';
-
-// TODO(burdon): Factor out PlankHeader.
-const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
-  const { hasAttention } = useAttention(attendableId);
-  console.log('hasAttention', hasAttention);
-  return (
-    <div className='flex p-1 items-center border-b border-separator'>
-      <IconButton
-        density='coarse'
-        icon='ph--atom--regular'
-        label='Test'
-        iconOnly
-        variant={hasAttention ? 'primary' : 'ghost'}
-        classNames='is-[--rail-action] bs-[--rail-action]'
-      />
-      <StackItem.ResizeHandle />
-    </div>
-  );
-};
-
-const StoryPlank = ({ attendableId }: { attendableId: string }) => {
-  const attentionAttrs = useAttendableAttributes(attendableId);
-
-  return (
-    <StackItem.Root
-      item={{ id: attendableId }}
-      {...attentionAttrs}
-      classNames='bg-baseSurface border-ie border-separator'
-      size={30}
-    >
-      <StoryPlankHeading attendableId={attendableId} />
-      <StackItem.Content toolbar>
-        <Toolbar.Root classNames='border-b border-separator'>
-          <Toolbar.Button>Test</Toolbar.Button>
-        </Toolbar.Root>
-
-        <div className={mx(container, 'm-2 bg-groupSurface')}>
-          <Input.Root>
-            <Input.Label>Level 1 (group)</Input.Label>
-          </Input.Root>
-          <div className={mx(container, 'bg-baseSurface')}>
-            <Input.Root>
-              <Input.Label>Level 2 (base)</Input.Label>
-              <Input.TextArea placeholder='Enter text' />
-            </Input.Root>
-          </div>
-        </div>
-      </StackItem.Content>
-    </StackItem.Root>
-  );
-};
-
-const DefaultStory = () => {
-  const state = useCapability(StoryState);
-
-  return (
-    <Main.Root complementarySidebarState='closed'>
-      <Main.NavigationSidebar label='Navigation' classNames='grid'>
-        <NavTreeContainer tab={state.tab} />
-      </Main.NavigationSidebar>
-      <Main.Content bounce handlesFocus>
-        <Stack orientation='horizontal' size='contain'>
-          <StoryPlank attendableId='space-0:object-0' />
-          <StoryPlank attendableId='space-0:object-1' />
-        </Stack>
-      </Main.Content>
-    </Main.Root>
-  );
-};
-
-const meta: Meta<typeof NavTreeContainer> = {
-  title: 'plugins/plugin-navtree/NavTree',
-  component: NavTreeContainer,
-  render: DefaultStory,
-  decorators: [
-    withPluginManager({
-      plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-        AttentionPlugin(),
-        NavTreePlugin(),
-      ],
-      capabilities: (context) => [
-        contributes(StoryState, live({ tab: 'space-0' })),
-        contributes(Capabilities.AppGraphBuilder, storybookGraphBuilders),
-        contributes(Capabilities.IntentResolver, [
-          createResolver({
-            intent: LayoutAction.UpdateLayout,
-            filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
-              Schema.is(LayoutAction.SwitchWorkspace.fields.input)(data),
-            resolve: ({ subject }) => {
-              const state = context.getCapability(StoryState);
-              state.tab = subject;
-            },
-          }),
-        ]),
-      ],
-    }),
-    withLayout({ fullscreen: true }),
-  ],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof NavTreeContainer>;
-
-export const Default: Story = {};

package/src/components/NavTree/NavTree.tsx

@@ -1,62 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { type TreeProps } from '@dxos/react-ui-list';
-import { Tabs } from '@dxos/react-ui-tabs';
-
-import { useLoadDescendents } from '../../hooks';
-import { type NavTreeItemGraphNode } from '../../types';
-import { useNavTreeContext } from '../NavTreeContext';
-import { L0Menu, L1Panels, type L1PanelsProps } from '../Sidebar';
-
-export const NAV_TREE_ITEM = 'NavTreeItem';
-
-export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1PanelsProps, 'open'>;
-
-export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
-  const { tab, useItems, onBack } = useNavTreeContext();
-  const topLevelActions = useItems(root, { disposition: 'menu', sort: true });
-  const topLevelCollections = useItems(root, { disposition: 'collection' });
-  const topLevelWorkspaces = useItems(root, { disposition: 'workspace' });
-  const topLevelNavigation = useItems(root, { disposition: 'navigation' });
-  const l0Items = useMemo(
-    () => [
-      // prettier-ignore
-      ...topLevelCollections,
-      ...topLevelWorkspaces,
-      ...topLevelNavigation,
-    ],
-    [topLevelCollections, topLevelWorkspaces, topLevelNavigation],
-  );
-  const pinnedItems = useItems(root, { disposition: 'pin-end', sort: true });
-  const userAccountItem = useItems(root, { disposition: 'user-account' })[0];
-  const topLevelItems = useMemo(
-    () => [
-      // prettier-ignore
-      ...l0Items,
-      ...pinnedItems,
-      ...(userAccountItem ? [userAccountItem] : []),
-    ],
-    [l0Items, pinnedItems, userAccountItem],
-  );
-
-  useLoadDescendents(root);
-  const path = useMemo(() => [id], [id]);
-
-  return (
-    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
-      <L0Menu
-        menuActions={topLevelActions}
-        topLevelItems={l0Items}
-        pinnedItems={pinnedItems}
-        userAccountItem={userAccountItem}
-        path={path}
-        parent={root}
-      />
-      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
-    </Tabs.Root>
-  );
-};

package/src/components/NavTree/index.ts

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

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -1,73 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { Fragment, memo } from 'react';
-
-import { isAction } from '@dxos/app-graph';
-import { DensityProvider, Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
-
-import { NavTreeItemAction } from './NavTreeItemAction';
-import { useLoadDescendents } from '../../hooks';
-import { NAVTREE_PLUGIN } from '../../meta';
-import { NAV_TREE_ITEM } from '../NavTree';
-import { useNavTreeContext } from '../NavTreeContext';
-import type { NavTreeItemColumnsProps } from '../types';
-
-export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }: 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 (
-    <DensityProvider density={density}>
-      <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>
-    </DensityProvider>
-  );
-});

package/src/components/NavTreeItem/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './NavTreeItemAction';
-export * from './NavTreeItemColumns';

package/src/components/Sidebar/L1Panel.tsx

@@ -1,175 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback, useMemo } from 'react';
-
-import { type Node } from '@dxos/app-graph';
-import { Button, type ButtonProps, Icon, IconButton, 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 { useLoadDescendents } from '../../hooks';
-import { NAVTREE_PLUGIN } from '../../meta';
-import { l0ItemType } from '../../util';
-import { useNavTreeContext } from '../NavTreeContext';
-import { NavTreeItemColumns } from '../NavTreeItem';
-
-const headingBackButtonLabel = 'inset-0 min-is-0 truncate flex items-center pis-2';
-
-const TitleButton = ({ title, onClick }: { title: string } & Pick<ButtonProps, 'onClick'>) => {
-  return (
-    <Button
-      variant='ghost'
-      classNames='pli-1 flex-1 group text-start justify-start bs-[--rail-action] font-normal'
-      onClick={onClick}
-    >
-      <Icon icon='ph--caret-left--bold' size={3} />
-      <span className={mx(headingBackButtonLabel)}>{title}</span>
-    </Button>
-  );
-};
-
-export type L1PanelProps = {
-  open?: boolean;
-  item: Node<any>;
-  path: string[];
-  currentItemId: string;
-  onBack?: () => void;
-};
-
-const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
-  const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-
-  // TODO(wittjosiah): Support multiple alternate trees.
-  const alternateTree = navTreeContext.useItems(item, { disposition: 'alternate-tree' })[0];
-  const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
-  const handleOpen = useCallback(() => setAlternateTree?.(alternatePath, true), [alternatePath, setAlternateTree]);
-  const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
-  const useAlternateItems = useCallback(
-    (node?: Node, { disposition }: { disposition?: string } = {}) => {
-      // TODO(wittjosiah): Sorting is expensive, limit to necessary items for now.
-      return navTreeContext.useItems(node, { disposition, sort: node?.id === alternateTree.id });
-    },
-    [navTreeContext, alternateTree],
-  );
-
-  const handleBack = useCallback(() => {
-    if (isAlternate) {
-      setAlternateTree?.(alternatePath, false);
-    } else {
-      onBack?.();
-    }
-  }, [isAlternate, onBack, alternatePath, setAlternateTree]);
-
-  const title = toLocalizedString(item.properties.label, t);
-  const backCapable = item.id.startsWith('!') || isAlternate;
-
-  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}
-      aria-label={title}
-      {...(!open && { inert: 'true' })}
-    >
-      {item.id === currentItemId && (
-        <>
-          <h2 className='flex items-center border-be border-separator app-drag pli-1'>
-            {backCapable ? (
-              <TitleButton title={title} onClick={handleBack} />
-            ) : (
-              <span className='flex-1 truncate min-is-0 pis-6'>{title}</span>
-            )}
-            {alternateTree && !isAlternate && (
-              <IconButton
-                variant='ghost'
-                classNames={mx('shrink-0', hoverableControlItem, hoverableOpenControlItem, 'pli-2 pointer-fine:pli-1')}
-                iconOnly
-                size={5}
-                density='coarse'
-                icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
-                label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
-                data-testid='treeView.alternateTreeButton'
-                onClick={handleOpen}
-              />
-            )}
-            <NavTreeItemColumns path={path} item={item} open density='coarse' />
-          </h2>
-          <div role='none' className='overflow-y-auto'>
-            {isAlternate ? (
-              <Tree
-                {...navTreeContext}
-                useItems={useAlternateItems}
-                id={alternateTree.id}
-                root={alternateTree}
-                path={alternatePath}
-                levelOffset={5}
-                gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-                renderColumns={NavTreeItemColumns}
-              />
-            ) : (
-              <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, ...props }: L1PanelProps) => {
-  const { useItems } = useNavTreeContext();
-  useLoadDescendents(item);
-  const collectionItems = useItems(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} {...props} />
-        ))}
-    </>
-  );
-};
-
-export type L1PanelsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'> & {
-  topLevelItems: Node<any>[];
-  path: string[];
-};
-
-export const L1Panels = ({ topLevelItems, onBack, ...props }: L1PanelsProps) => {
-  return (
-    <>
-      {topLevelItems.map((item) => {
-        const type = l0ItemType(item);
-        switch (type) {
-          case 'collection':
-            return <L1PanelCollection key={item.id} item={item} {...props} />;
-          case 'tab':
-            return <L1Panel key={item.id} item={item} {...props} onBack={onBack} />;
-          default:
-            return null;
-        }
-      })}
-    </>
-  );
-};

package/src/components/Sidebar/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './L0Menu';
-export * from './L1Panel';

package/src/components/UserAccountAvatar/index.ts

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