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

package/src/components/NavTreeItem/NavTreeItemAction.stories.tsx

@@ -2,13 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 
-import { type Meta, type StoryObj } from '@storybook/react';
-
-import { type NodeArg } from '@dxos/app-graph';
+import { RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { type Node } from '@dxos/app-graph';
+import { corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { NavTreeItemAction, type NavTreeItemActionMenuProps } from './NavTreeItemAction';
 
@@ -20,7 +22,7 @@ const parent = {
     label: faker.lorem.words(2),
     icon: 'ph--circle--regular',
   },
-} satisfies NodeArg<any>;
+} satisfies Node.NodeArg<any>;
 
 // TODO(burdon): Factor out across tests.
 const menuActions = faker.helpers.multiple(
@@ -28,31 +30,37 @@ const menuActions = faker.helpers.multiple(
     ({
       id: faker.string.uuid(),
       type: 'action',
-      data: () => {
-        console.log('invoke');
-      },
+      data: () =>
+        Effect.sync(() => {
+          console.log('invoke');
+        }),
       properties: {
         label: faker.lorem.words(2),
         icon: 'ph--circle--regular',
       },
-    }) satisfies NodeArg<any>,
+    }) satisfies Node.NodeArg<any>,
   { count: 20 },
 );
 
-const meta: Meta<typeof NavTreeItemAction> = {
+const meta = {
   title: 'plugins/plugin-navtree/NavTreeItemAction',
   component: NavTreeItemAction,
-  decorators: [withTheme, withLayout()],
   args: {
     icon: 'ph--list--regular',
     parent,
     menuActions,
     label: 'Select action',
   } satisfies Partial<NavTreeItemActionMenuProps>,
+  decorators: [
+    withTheme(),
+    withPluginManager({
+      plugins: [...corePlugins(), RuntimePlugin()],
+    }),
+  ],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof NavTreeItemAction>;
 
 export default meta;
 

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -4,19 +4,20 @@
 
 import React from 'react';
 
-import { type Action, type Node } from '@dxos/app-graph';
-import { useTranslation, toLocalizedString, IconButton, useDensityContext } from '@dxos/react-ui';
-import { DropdownMenu, MenuProvider, type MenuItem } from '@dxos/react-ui-menu';
-import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
+import { type Node } from '@dxos/app-graph';
+import { useActionRunner } from '@dxos/plugin-graph';
+import { IconButton, toLocalizedString, useDensityContext, useTranslation } from '@dxos/react-ui';
+import { DropdownMenu, type MenuItem, MenuProvider } from '@dxos/react-ui-menu';
+import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
-import { NAVTREE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { type ActionProperties } from '../../types';
 
 export type NavTreeItemActionMenuProps = ActionProperties & {
-  parent: Node;
+  parent: Node.Node;
   caller?: string;
   monolithic?: boolean;
-  menuActions?: Action[];
+  menuActions?: Node.Action[];
 };
 
 const fallbackIcon = 'ph--placeholder--regular';
@@ -38,15 +39,17 @@ export const NavTreeItemActionDropdownMenu = ({
   menuActions,
   caller,
 }: NavTreeItemActionMenuProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const density = useDensityContext();
+  const runAction = useActionRunner();
+
   return (
-    <MenuProvider>
+    <MenuProvider onAction={runAction}>
       <DropdownMenu.Root group={parent} items={menuActions as MenuItem[]} caller={caller}>
         <DropdownMenu.Trigger asChild>
           <IconButton
             {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
-            classNames={mx('shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem)}
+            classNames={['shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem]}
             variant='ghost'
             icon={icon ?? fallbackIcon}
             iconOnly
@@ -59,33 +62,37 @@ export const NavTreeItemActionDropdownMenu = ({
   );
 };
 
-export const NavTreeItemMonolithicAction = ({
-  parent,
-  properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
-  data: invoke,
-  baseLabel,
-}: Action & { parent: Node; onAction?: (action: Action) => void; baseLabel: string }) => {
+export const NavTreeItemMonolithicAction = (
+  props: Node.Action & { parent: Node.Node; onAction?: (action: Node.Action) => void; baseLabel: string },
+) => {
+  const {
+    parent,
+    properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
+    baseLabel,
+  } = props;
   const density = useDensityContext();
+  const runAction = useActionRunner();
   return (
     <IconButton
       {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
       variant={variant}
-      classNames={mx(
+      classNames={[
         'shrink-0',
         hoverableControlItem,
         hoverableOpenControlItem,
         iconOnly ? 'pli-2 pointer-fine:pli-1' : 'p-2 pointer-fine:p-2 mie-1',
-      )}
+      ]}
       icon={icon ?? fallbackIcon}
       iconOnly={iconOnly}
       label={baseLabel}
       disabled={disabled}
       onClick={(event) => {
+        event.stopPropagation();
         if (disabled) {
           return;
         }
-        event.stopPropagation();
-        void invoke?.(caller ? { parent, caller } : { parent });
+
+        void runAction(props, caller ? { parent, caller } : { parent });
       }}
       data-testid={testId}
     />
@@ -93,7 +100,7 @@ export const NavTreeItemMonolithicAction = ({
 };
 
 export const NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }: NavTreeItemActionMenuProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
   const baseLabel = toLocalizedString(monolithicAction ? monolithicAction.properties!.label : props.label, t);

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -4,55 +4,57 @@
 
 import React, { Fragment, memo } from 'react';
 
-import { isAction } from '@dxos/app-graph';
-import { DensityProvider, Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
+import { Node } from '@dxos/app-graph';
+import { Popover, Treegrid, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
-import { NavTreeItemAction } from './NavTreeItemAction';
 import { useLoadDescendents } from '../../hooks';
-import { NAVTREE_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { NAV_TREE_ITEM } from '../NavTree';
 import { useNavTreeContext } from '../NavTreeContext';
-import type { NavTreeItemColumnsProps } from '../types';
+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();
+import { NavTreeItemAction } from './NavTreeItemAction';
 
-  const level = path.length - 2;
+export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumnsProps) => {
+  const { t } = useTranslation(meta.id);
+  const { useActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
 
-  const { actions: _actions, groupedActions } = getActions(item);
-  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) =>
+  const level = path.length - 2;
+  const { actions: _actions, groupedActions } = useActions(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] : []))
+    .flatMap((action) => (Node.isAction(action) ? [action] : []))
     .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition));
 
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
-
   useLoadDescendents(item);
-  useLoadDescendents(primaryAction && !isAction(primaryAction) ? primaryAction : undefined);
+  useLoadDescendents(primaryAction && !Node.isAction(primaryAction) ? (primaryAction as Node.Node) : undefined);
+
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
 
   return (
-    <DensityProvider density={density}>
-      <div role='none' className='contents app-no-drag'>
-        {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
+    <div role='none' className='contents app-no-drag'>
+      {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
+        <Treegrid.Cell classNames='contents'>
           <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]}
+            monolithic={Node.isAction(primaryAction)}
+            menuActions={Node.isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction?.id ?? '']}
             menuType={primaryAction.properties?.menuType}
             caller={NAV_TREE_ITEM}
           />
-        ) : (
-          <Treegrid.Cell />
-        )}
-        <ActionRoot>
-          {actions.length > 0 ? (
+        </Treegrid.Cell>
+      ) : (
+        <Treegrid.Cell role='none' />
+      )}
+      <ActionRoot>
+        {actions.length > 0 ? (
+          <Treegrid.Cell classNames='contents'>
             <NavTreeItemAction
               testId={`navtree.treeItem.actionsLevel${level}`}
               label={t('tree item actions label')}
@@ -62,12 +64,16 @@ export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }:
               menuType='dropdown'
               caller={NAV_TREE_ITEM}
             />
-          ) : (
-            <Treegrid.Cell />
-          )}
-        </ActionRoot>
-        {ItemEnd && <ItemEnd node={item} open={open} />}
-      </div>
-    </DensityProvider>
+          </Treegrid.Cell>
+        ) : (
+          <Treegrid.Cell role='none' />
+        )}
+      </ActionRoot>
+      {ItemEnd && (
+        <Treegrid.Cell classNames='contents'>
+          <ItemEnd node={item} open={open} />
+        </Treegrid.Cell>
+      )}
+    </div>
   );
 });