@dxos/plugin-stack 0.6.14-staging.8758a12 → 0.6.14-staging.9b873ce

package/src/components/StackContext.tsx

@@ -0,0 +1,23 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { createContext, useContext } from 'react';
+
+import { type AddSectionPosition } from '../types';
+
+export type StackContextValue = {
+  onCollapse: (id: string, collapsed: boolean) => void;
+  onNavigate: (id: string) => Promise<void>;
+  onDelete: (id: string) => Promise<void>;
+  onAdd: (id: string, position: AddSectionPosition) => void;
+};
+
+export const StackContext = createContext<StackContextValue>({
+  onCollapse: () => {},
+  onNavigate: async () => {},
+  onDelete: async () => {},
+  onAdd: () => {},
+});
+
+export const useStack = () => useContext(StackContext);

package/src/components/StackMain.tsx

@@ -8,43 +8,38 @@ import React, { useEffect, useMemo, useState } from 'react';
 import {
   LayoutAction,
   NavigationAction,
-  Surface,
   parseMetadataResolverPlugin,
   useIntentDispatcher,
   useResolvePlugin,
 } from '@dxos/app-framework';
-import { create, getType, fullyQualifiedId, isReactiveObject } from '@dxos/client/echo';
+import { create, getType, fullyQualifiedId } from '@dxos/client/echo';
 import { useGraph } from '@dxos/plugin-graph';
 import { SpaceAction } from '@dxos/plugin-space';
 import { type CollectionType } from '@dxos/plugin-space/types';
 import { Button, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { AttentionProvider } from '@dxos/react-ui-attention';
-import { type MosaicDataItem, type MosaicDropEvent, type MosaicMoveEvent, Mosaic, Path } from '@dxos/react-ui-mosaic';
-import {
-  type AddSectionPosition,
-  type CollapsedSections,
-  Stack,
-  type StackProps,
-  type StackSectionItem,
-} from '@dxos/react-ui-stack';
+import { Stack } from '@dxos/react-ui-stack';
 import { nonNullable } from '@dxos/util';
 
 import { AddSection } from './AddSection';
-import { SECTION_IDENTIFIER, STACK_PLUGIN } from '../meta';
-import { StackViewType } from '../types';
-
-const SectionContent: StackProps['SectionContent'] = ({ data }) => {
-  // TODO(wittjosiah): Better section placeholder.
-  return <Surface role='section' data={{ object: data }} limit={1} placeholder={<></>} />;
-};
+import { StackContext } from './StackContext';
+import { StackSection } from './StackSection';
+import { STACK_PLUGIN } from '../meta';
+import {
+  StackViewType,
+  type CollapsedSections,
+  type StackSectionMetadata,
+  type StackSectionView,
+  type StackSectionItem,
+  type AddSectionPosition,
+} from '../types';
 
 type StackMainProps = {
   id: string;
   collection: CollectionType;
-  separation?: boolean;
 };
 
-const StackMain = ({ id, collection, separation }: StackMainProps) => {
+const StackMain = ({ id, collection }: StackMainProps) => {
   const dispatch = useIntentDispatcher();
   const { graph } = useGraph();
   const { t } = useTranslation(STACK_PLUGIN);
@@ -67,72 +62,22 @@ const StackMain = ({ id, collection, separation }: StackMainProps) => {
       .map((object) => {
         const metadata = metadataPlugin?.provides.metadata.resolver(
           getType(object)?.objectId ?? 'never',
-        ) as StackSectionItem['metadata'];
+        ) as StackSectionMetadata;
         const view = {
           ...stack.sections[object.id],
           collapsed: collapsedSections[fullyQualifiedId(object)],
           title:
             (object as any)?.title ?? toLocalizedString(graph.findNode(fullyQualifiedId(object))?.properties.label, t),
-        } as StackSectionItem['view'];
-        return { id: fullyQualifiedId(object), object, metadata, view };
+        } as StackSectionView;
+        return { id: fullyQualifiedId(object), object, metadata, view } satisfies StackSectionItem;
       }) ?? [];
 
-  const handleOver = ({ active, over }: MosaicMoveEvent<number>) => {
-    // TODO(thure): Eventually Stack should handle foreign draggables.
-    if (active.type !== SECTION_IDENTIFIER) {
-      return 'reject';
-    }
-    if (Path.parent(active.path) === Path.parent(over.path)) {
-      return 'rearrange';
-    }
-
-    const parseData = metadataPlugin?.provides.metadata.resolver(active.type)?.parse;
-    const data = parseData ? parseData(active.item, 'object') : active.item;
-
-    // TODO(wittjosiah): Prevent dropping items which don't have a section renderer?
-    //  Perhaps stack plugin should just provide a fallback section renderer.
-    if (!isReactiveObject(data)) {
-      return 'reject';
-    }
-
-    const exists = items.findIndex(({ id }) => id === active.item.id) >= 0;
-    if (!exists) {
-      return 'transfer';
-    } else {
-      return 'reject';
-    }
-  };
-
-  const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {
-    if (
-      (active.path === Path.create(id, active.item.id) || active.path === id) &&
-      (operation !== 'copy' || over.path === Path.create(id, over.item.id) || over.path === id)
-    ) {
-      collection.objects.splice(active.position!, 1);
-      delete stack.sections[active.item.id];
-    }
-
-    const parseData = metadataPlugin?.provides.metadata.resolver(active.type)?.parse;
-    const object = parseData?.(active.item, 'object');
-    if (object && over.path === Path.create(id, over.item.id)) {
-      collection.objects.splice(over.position!, 0, object);
-    } else if (object && over.path === id) {
-      collection.objects.push(object);
-    }
-
-    if (!stack.sections[object.id]) {
-      stack.sections[object.id] = {};
-    }
-  };
-
-  const handleDelete = async (path: string) => {
-    const index = collection.objects
-      .filter(nonNullable)
-      .findIndex((section) => fullyQualifiedId(section) === Path.last(path));
+  const handleDelete = async (id: string) => {
+    const index = collection.objects.filter(nonNullable).findIndex((section) => fullyQualifiedId(section) === id);
     if (index >= 0) {
       await dispatch({
-        action: SpaceAction.REMOVE_OBJECT,
-        data: { object: collection.objects[index], collection },
+        action: SpaceAction.REMOVE_OBJECTS,
+        data: { objects: [collection.objects[index]], collection },
       });
 
       // TODO(wittjosiah): The section should also be removed, but needs to be restored if the action is undone.
@@ -140,56 +85,49 @@ const StackMain = ({ id, collection, separation }: StackMainProps) => {
     }
   };
 
-  // TODO(wittjosiah): Factor out.
+  const handleAdd = (id: string, position: AddSectionPosition) => {
+    void dispatch?.({
+      action: LayoutAction.SET_LAYOUT,
+      data: {
+        element: 'dialog',
+        component: `${STACK_PLUGIN}/AddSectionDialog`,
+        subject: { path: id, position, collection },
+      },
+    });
+  };
 
-  const handleNavigate = async (object: MosaicDataItem) => {
-    const toId = fullyQualifiedId(object);
+  const handleNavigate = async (id: string) => {
     await dispatch([
       {
         action: NavigationAction.OPEN,
-        data: { activeParts: { main: [toId] } },
+        data: { activeParts: { main: [id] } },
       },
       {
         action: LayoutAction.SCROLL_INTO_VIEW,
-        data: { id: toId },
+        data: { id },
       },
     ]);
   };
 
-  const handleAddSection = (path: string, position: AddSectionPosition) => {
-    void dispatch?.({
-      action: LayoutAction.SET_LAYOUT,
-      data: {
-        element: 'dialog',
-        component: `${STACK_PLUGIN}/AddSectionDialog`,
-        subject: { path, position, collection },
-      },
-    });
-  };
-
-  const handleCollapseSection = (id: string, collapsed: boolean) => {
+  const handleCollapse = (id: string, collapsed: boolean) => {
     setCollapsedSections((prev) => ({ ...prev, [id]: collapsed }));
   };
 
   return (
     <AttentionProvider id={id}>
-      <Mosaic.Root>
-        <Mosaic.DragOverlay />
-        <Stack
-          id={id}
-          data-testid='main.stack'
-          SectionContent={SectionContent}
-          type={SECTION_IDENTIFIER}
-          items={items}
-          separation={separation}
-          emptyComponent={<span data-testid='stack.empty'></span>}
-          onDrop={handleDrop}
-          onOver={handleOver}
-          onDeleteSection={handleDelete}
-          onNavigateToSection={handleNavigate}
-          onAddSection={handleAddSection}
-          onCollapseSection={handleCollapseSection}
-        />
+      <StackContext.Provider
+        value={{
+          onCollapse: handleCollapse,
+          onNavigate: handleNavigate,
+          onDelete: handleDelete,
+          onAdd: handleAdd,
+        }}
+      >
+        <Stack orientation='vertical' size='intrinsic' id={id} data-testid='main.stack' classNames='divide-y-reverse'>
+          {items.map((item) => (
+            <StackSection key={item.id} {...item} />
+          ))}
+        </Stack>
 
         {items.length === 0 ? (
           <AddSection collection={collection} />
@@ -214,7 +152,7 @@ const StackMain = ({ id, collection, separation }: StackMainProps) => {
             </Button>
           </div>
         )}
-      </Mosaic.Root>
+      </StackContext.Provider>
     </AttentionProvider>
   );
 };

package/src/components/StackSection.tsx

@@ -0,0 +1,118 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import React, { useState } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { DropdownMenu, Icon, useTranslation, IconButton } from '@dxos/react-ui';
+import { useAttendableAttributes } from '@dxos/react-ui-attention';
+import { StackItem } from '@dxos/react-ui-stack';
+import { mx, getSize, textBlockWidth } from '@dxos/react-ui-theme';
+
+import { CaretDownUp } from './CaretDownUp';
+import { useStack } from './StackContext';
+import { STACK_PLUGIN } from '../meta';
+import { type StackSectionItem } from '../types';
+
+const sectionActionDimensions = 'm-1 p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min';
+
+export const StackSection = ({
+  id,
+  view,
+  object,
+  metadata: { icon = 'ph--placeholder--regular' },
+}: StackSectionItem) => {
+  const { t } = useTranslation(STACK_PLUGIN);
+  const { onNavigate, onAdd, onCollapse, onDelete } = useStack();
+  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
+  const attendableAttrs = useAttendableAttributes(id);
+
+  return (
+    <CollapsiblePrimitive.Root asChild open={!view.collapsed} onOpenChange={(nextOpen) => onCollapse?.(id, !nextOpen)}>
+      <StackItem.Root item={{ id }} role='section' {...attendableAttrs}>
+        <StackItem.Heading classNames='attention-surface'>
+          <span className='sr-only'>{view.title}</span>
+          <div role='none' className='sticky -block-start-px bg-[--sticky-bg]'>
+            <DropdownMenu.Root
+              {...{
+                open: optionsMenuOpen,
+                onOpenChange: setOptionsMenuOpen,
+              }}
+            >
+              <DropdownMenu.Trigger asChild>
+                <StackItem.SigilButton>
+                  <Icon icon={icon} size={5} classNames='transition-opacity' />
+                </StackItem.SigilButton>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Portal>
+                <DropdownMenu.Content style={{ zIndex: 70 }}>
+                  <DropdownMenu.Viewport>
+                    {view.collapsed ? (
+                      <DropdownMenu.Item onClick={() => onNavigate(id)} data-testid='section.navigate-to'>
+                        <Icon icon='ph--arrow-square-out--regular' size={5} />
+                        <span className='mis-2 grow'>{t('navigate to section label')}</span>
+                      </DropdownMenu.Item>
+                    ) : (
+                      <CollapsiblePrimitive.Trigger asChild>
+                        <DropdownMenu.Item>
+                          <CaretDownUp className={getSize(5)} />
+                          <span className='mis-2 grow'>{t('collapse label')}</span>
+                        </DropdownMenu.Item>
+                      </CollapsiblePrimitive.Trigger>
+                    )}
+                    <DropdownMenu.Item onClick={() => onAdd(id, 'before')} data-testid='section.add-before'>
+                      <Icon icon='ph--arrow-line-up--regular' size={5} />
+                      <span className='mis-2 grow'>{t('add section before label')}</span>
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item onClick={() => onAdd(id, 'after')} data-testid='section.add-after'>
+                      <Icon icon='ph--arrow-line-down--regular' size={5} />
+                      <span className='mis-2 grow'>{t('add section after label')}</span>
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item onClick={() => onDelete(id)} data-testid='section.remove'>
+                      <Icon icon='ph--trash--regular' size={5} />
+                      <span className='mis-2 grow'>{t('remove section label')}</span>
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Viewport>
+                  <DropdownMenu.Arrow />
+                </DropdownMenu.Content>
+              </DropdownMenu.Portal>
+            </DropdownMenu.Root>
+            {view.collapsed ? (
+              <CollapsiblePrimitive.Trigger asChild>
+                <IconButton
+                  iconOnly
+                  tooltipZIndex='70'
+                  variant='ghost'
+                  label={t('expand label')}
+                  icon='ph--caret-up-down--regular'
+                  classNames={sectionActionDimensions}
+                />
+              </CollapsiblePrimitive.Trigger>
+            ) : (
+              <IconButton
+                iconOnly
+                tooltipZIndex='70'
+                variant='ghost'
+                onClick={() => onNavigate(id)}
+                label={t('navigate to section label')}
+                icon='ph--arrow-square-out--regular'
+                data-testid='section.navigate-to'
+                classNames={sectionActionDimensions}
+              />
+            )}
+          </div>
+        </StackItem.Heading>
+        <CollapsiblePrimitive.Content>
+          <Surface role='section' data={{ object }} limit={1} placeholder={<></>} />
+        </CollapsiblePrimitive.Content>
+        {view.collapsed && (
+          <StackItem.Content toolbar={false} classNames='attention-surface'>
+            <h2 className={mx('flex items-center p-4 font-medium is-full', textBlockWidth)}>{view.title}</h2>
+          </StackItem.Content>
+        )}
+      </StackItem.Root>
+    </CollapsiblePrimitive.Root>
+  );
+};

package/src/meta.ts

@@ -10,6 +10,9 @@ export const SECTION_IDENTIFIER = 'dxos.org/type/StackSection';
 export default {
   id: STACK_PLUGIN,
   // TODO(wittjosiah): Prevents "stacks" language from being exposed to users in settings panel.
+  //   Conside renaming this to the collection plugin and trying to factor more collections logic from the space plugin.
   name: 'Collections',
+  description: 'View collections of objects within the deck.',
   icon: 'ph--stack-simple--regular',
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-stack',
 } satisfies PluginMeta;

package/src/translations.ts

@@ -19,6 +19,15 @@ export default [
         'add section input placeholder': 'Find the type of section to add',
         'upload file label': 'Add file',
         'add section label': 'Add section',
+        'empty stack message': 'Drag items into the stack.',
+        'remove section label': 'Delete',
+        'navigate to section label': 'Navigate to item',
+        'untitled section title': 'Untitled section',
+        'add section before label': 'Add before',
+        'add section after label': 'Add after',
+        'expand label': 'Expand',
+        'collapse label': 'Collapse',
+        'drag handle label': 'Press space or enter to begin dragging this item.',
       },
     },
   },

package/src/types/types.ts

@@ -13,6 +13,23 @@ import type {
   TranslationsProvides,
 } from '@dxos/app-framework';
 import { type SchemaProvides } from '@dxos/plugin-client';
+import { type CollectionType } from '@dxos/plugin-space/types';
+import { type Label } from '@dxos/react-ui';
+import { type StackItemSize } from '@dxos/react-ui-stack';
+
+export type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';
+
+export type CollapsedSections = Record<string, boolean>;
+
+export type CollectionItem = CollectionType['objects'][number];
+
+export type StackSectionView = {
+  title?: string;
+  size?: StackItemSize;
+  height?: number;
+  collapsed?: boolean;
+  custom?: Record<string, any>;
+};
 
 // TODO(wittjosiah): Creators/choosers likely aren't stack-specific.
 //  Also distinct from graph actions though, output should be inserted into current view rather than navigated to.
@@ -24,6 +41,19 @@ type StackSectionAction = {
   icon: FC<IconProps>;
 };
 
+export type StackSectionMetadata = {
+  icon?: string;
+  placeholder?: Label;
+  viewActions?: (item: CollectionItem) => StackSectionAction;
+};
+
+export type StackSectionItem = {
+  id: string;
+  object: CollectionType['objects'][number];
+  view: StackSectionView;
+  metadata: StackSectionMetadata;
+};
+
 export type StackSectionCreator = StackSectionAction & {
   intent: Intent | Intent[];
 };