@dxos/plugin-navtree 0.8.3-staging.0fa589b → 0.8.4-main.1068cf700f

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

@@ -2,45 +2,33 @@
 // 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 { Atom, type Registry } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { type KeyboardEvent, useCallback, useRef } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { live } from '@dxos/live-object';
-import { AttentionPlugin } from '@dxos/plugin-attention';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { GraphPlugin } from '@dxos/plugin-graph';
-import { SpacePlugin } from '@dxos/plugin-space';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
+import { useAtomCapability } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { OperationResolver } from '@dxos/operation';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
 import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
-import { useAttentionAttributes, useAttention } from '@dxos/react-ui-attention';
+import { withTheme } from '@dxos/react-ui/testing';
+import { useAttention, useAttentionAttributes } 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 { mx } from '@dxos/ui-theme';
 
 import { NavTreePlugin } from '../../NavTreePlugin';
 import { storybookGraphBuilders } from '../../testing';
-import translations from '../../translations';
+import { translations } from '../../translations';
 import { NavTreeContainer } from '../NavTreeContainer';
 
 faker.seed(1234);
 
-const StoryState = defineCapability<{ tab: string }>('story-state');
+const StoryState = Capability.make<Atom.Atom<{ 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.
@@ -52,7 +40,7 @@ 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'>
+    <div className='flex p-1 items-center border-be border-separator'>
       <IconButton
         density='coarse'
         icon='ph--atom--regular'
@@ -68,6 +56,15 @@ const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
 
 const StoryPlank = ({ attendableId }: { attendableId: string }) => {
   const attentionAttrs = useAttentionAttributes(attendableId);
+  const rootElement = useRef<HTMLDivElement | null>(null);
+
+  // NOTE(thure): This is the same workaround as in Plank, but that component is out of scope for this story.
+  // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.target === event.currentTarget && event.key === 'Escape') {
+      rootElement.current?.closest('main')?.focus();
+    }
+  }, []);
 
   return (
     <StackItem.Root
@@ -75,10 +72,12 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
       {...attentionAttrs}
       classNames='bg-baseSurface border-ie border-separator'
       size={30}
+      onKeyDown={handleKeyDown}
+      ref={rootElement}
     >
       <StoryPlankHeading attendableId={attendableId} />
       <StackItem.Content toolbar>
-        <Toolbar.Root classNames='border-b border-subduedSeparator'>
+        <Toolbar.Root classNames='border-be border-subduedSeparator'>
           <Toolbar.Button>Test</Toolbar.Button>
         </Toolbar.Root>
 
@@ -99,10 +98,10 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
 };
 
 const DefaultStory = () => {
-  const state = useCapability(StoryState);
+  const state = useAtomCapability(StoryState);
 
   return (
-    <Main.Root complementarySidebarState='closed'>
+    <Main.Root navigationSidebarState='expanded'>
       <Main.NavigationSidebar label='Navigation' classNames='grid'>
         <NavTreeContainer tab={state.tab} />
       </Main.NavigationSidebar>
@@ -116,85 +115,92 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<typeof NavTreeContainer> = {
+const meta = {
   title: 'plugins/plugin-navtree/NavTree',
   component: NavTreeContainer,
   render: DefaultStory,
   decorators: [
+    withTheme(),
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-        AttentionPlugin(),
+        ...corePlugins(),
+        StorybookPlugin({
+          initialState: { sidebarState: 'expanded' },
+        }),
+
         NavTreePlugin(),
       ],
-      capabilities: (context) => [
-        contributes(StoryState, live({ tab: 'space-0' })),
-        contributes(Capabilities.AppGraphBuilder, storybookGraphBuilders(context)),
-        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;
-            },
-          }),
-        ]),
-      ],
+      capabilities: () => {
+        const storyStateAtom = Atom.make({ tab: 'space-0' }).pipe(Atom.keepAlive);
+        return [
+          Capability.contributes(StoryState, storyStateAtom),
+          Capability.contributes(AppCapabilities.AppGraphBuilder, storybookGraphBuilders()),
+          Capability.contributes(Capabilities.OperationResolver, [
+            OperationResolver.make({
+              operation: LayoutOperation.SwitchWorkspace,
+              handler: ({ subject }) =>
+                Effect.gen(function* () {
+                  const registry: Registry.Registry = yield* Capability.get(Capabilities.AtomRegistry);
+                  registry.set(storyStateAtom, { tab: subject });
+                }),
+            }),
+          ]),
+        ];
+      },
     }),
-    withLayout({ fullscreen: true }),
   ],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof NavTreeContainer>;
 
 export default meta;
 
 type Story = StoryObj<typeof NavTreeContainer>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-// TODO(wittjosiah): Deduplicate plugins/capabilities with default story.
-export const WithClient: Story = {
-  decorators: [
-    withPluginManager({
-      plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-        AttentionPlugin(),
-        NavTreePlugin(),
-        ClientPlugin({
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-          },
-        }),
-        SpacePlugin(),
-        // Needs to be last so that the dialog and popovers have access to all contexts.
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
-      ],
-      capabilities: (context) => [
-        contributes(StoryState, live({ tab: 'space-0' })),
-        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 }),
-  ],
+    // Find the element with treegrid role and click on its parent
+    const treegridElement = await canvas.findByRole('treegrid');
+    const treegridParent = treegridElement.parentElement;
+    if (treegridParent) {
+      await userEvent.click(treegridParent);
+    }
+
+    // Press Escape
+    await userEvent.keyboard('{Escape}');
+
+    // Confirm that focus is on an element with attribute data-main-landmark="0"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '0');
+
+    // Press Tab
+    await userEvent.keyboard('{Tab}');
+
+    // Confirm that focus is now on an element with data-main-landmark="1"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '1');
+
+    // Press Tab
+    await userEvent.keyboard('{Tab}');
+
+    // Confirm that focus is now on an element with data-main-landmark="0"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '0');
+
+    // Press Shift-Tab
+    await userEvent.keyboard('{Shift>}{Tab}{/Shift}');
+
+    // Press Enter
+    await userEvent.keyboard('{Enter}');
+
+    // Confirm that focus is now on an element with data-attendable-id="space-0:object-0"
+    await expect(document.activeElement).toHaveAttribute('data-attendable-id', 'space-0:object-0');
+
+    // Press Escape
+    await userEvent.keyboard('{Escape}');
+
+    // Confirm that focus is now on an element with data-main-landmark="1"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '1');
+  },
 };

package/src/components/NavTree/NavTree.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 
 import { type TreeProps } from '@dxos/react-ui-list';
 import { Tabs } from '@dxos/react-ui-tabs';
@@ -10,27 +10,17 @@ 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';
+import { L0Menu, L1Tabs, type L1TabsProps } from '../Sidebar';
 
 export const NAV_TREE_ITEM = 'NavTreeItem';
 
-export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1PanelsProps, 'open'>;
+export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1TabsProps, 'open'>;
 
-export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
+export const NavTree = forwardRef<HTMLDivElement, NavTreeProps>(({ id, root, ...props }, forwardedRef) => {
   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 l0Items = topLevelWorkspaces;
   const pinnedItems = useItems(root, { disposition: 'pin-end', sort: true });
   const userAccountItem = useItems(root, { disposition: 'user-account' })[0];
   const topLevelItems = useMemo(
@@ -47,7 +37,11 @@ export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
   const path = useMemo(() => [id], [id]);
 
   return (
-    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
+    // TODO(thure): `Tabs.Root` forces all items that should be able to receive focus to use `Tabs.Tab(Primitive)` since
+    //  it uses RovingFocus and doesn’t support moving focus to an item that is not a tab. Assess whether this situation
+    //  should change including whether it should motivate a change in the design/taxonomy, or if this means this should
+    //  not use `react-ui-tabs` at all.
+    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative' ref={forwardedRef}>
       <L0Menu
         menuActions={topLevelActions}
         topLevelItems={l0Items}
@@ -56,7 +50,7 @@ export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
         path={path}
         parent={root}
       />
-      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
+      <L1Tabs topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
     </Tabs.Root>
   );
-};
+});