@dxos/react-ui-stack 0.6.12-main.f9d0246 → 0.6.12-staging.e11e696

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.6.12-main.f9d0246",
+  "version": "0.6.12-staging.e11e696",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -37,6 +37,10 @@
     "src"
   ],
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.3",
+    "@effect/schema": "^0.67.16",
     "@fluentui/react-tabster": "^9.19.0",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-collapsible": "^1.0.2",
@@ -45,11 +49,12 @@
     "@radix-ui/react-menu": "^2.0.6",
     "@radix-ui/react-use-controllable-state": "^1.0.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/react-ui": "0.6.12-main.f9d0246",
-    "@dxos/react-ui-attention": "0.6.12-main.f9d0246",
-    "@dxos/react-ui-mosaic": "0.6.12-main.f9d0246",
-    "@dxos/react-ui-theme": "0.6.12-main.f9d0246",
-    "@dxos/react-ui-deck": "0.6.12-main.f9d0246"
+    "@dxos/echo-schema": "0.6.12-staging.e11e696",
+    "@dxos/react-ui": "0.6.12-staging.e11e696",
+    "@dxos/react-ui-attention": "0.6.12-staging.e11e696",
+    "@dxos/react-ui-deck": "0.6.12-staging.e11e696",
+    "@dxos/react-ui-theme": "0.6.12-staging.e11e696",
+    "@dxos/react-ui-mosaic": "0.6.12-staging.e11e696"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -58,22 +63,21 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-schema": "0.6.12-main.f9d0246",
-    "@dxos/client": "0.6.12-main.f9d0246",
-    "@dxos/random": "0.6.12-main.f9d0246",
-    "@dxos/react-ui-editor": "0.6.12-main.f9d0246",
-    "@dxos/storybook-utils": "0.6.12-main.f9d0246",
-    "@dxos/util": "0.6.12-main.f9d0246",
-    "@dxos/test-utils": "0.6.12-main.f9d0246",
-    "@dxos/react-ui-table": "0.6.12-main.f9d0246"
+    "@dxos/echo-schema": "0.6.12-staging.e11e696",
+    "@dxos/random": "0.6.12-staging.e11e696",
+    "@dxos/react-ui-editor": "0.6.12-staging.e11e696",
+    "@dxos/react-ui-table": "0.6.12-staging.e11e696",
+    "@dxos/storybook-utils": "0.6.12-staging.e11e696",
+    "@dxos/client": "0.6.12-staging.e11e696",
+    "@dxos/test-utils": "0.6.12-staging.e11e696",
+    "@dxos/util": "0.6.12-staging.e11e696"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/client": "0.6.12-main.f9d0246",
-    "@dxos/echo-schema": "0.6.12-main.f9d0246",
-    "@dxos/random": "0.6.12-main.f9d0246"
+    "@dxos/random": "0.6.12-staging.e11e696",
+    "@dxos/client": "0.6.12-staging.e11e696"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Deck.stories.tsx

@@ -9,7 +9,7 @@ import React, { type PropsWithChildren, useState, type ComponentProps } from 're
 
 import { faker } from '@dxos/random';
 import { Button, Icon, Main } from '@dxos/react-ui';
-import { AttentionProvider } from '@dxos/react-ui-attention';
+import { RootAttentionProvider } from '@dxos/react-ui-attention';
 import { PlankHeading, Deck as NaturalDeck, Plank } from '@dxos/react-ui-deck';
 import { Mosaic, type MosaicDataItem } from '@dxos/react-ui-mosaic';
 import { withTheme } from '@dxos/storybook-utils';
@@ -102,10 +102,10 @@ export default {
 export const StaticBasicStacks = {
   args: {},
   render: () => {
-    const [attended] = useState(new Set<string>());
+    const [attention] = useState({ attended: [] });
     return (
       <Mosaic.Root>
-        <AttentionProvider attended={attended}>
+        <RootAttentionProvider attention={attention}>
           <Mosaic.DragOverlay />
           <NaturalDeck.Root classNames='fixed inset-0 z-0'>
             <DemoStackPlank />
@@ -116,7 +116,7 @@ export const StaticBasicStacks = {
             <DemoStackPlank />
             <DemoStackPlank />
           </NaturalDeck.Root>
-        </AttentionProvider>
+        </RootAttentionProvider>
       </Mosaic.Root>
     );
   },
@@ -125,10 +125,10 @@ export const StaticBasicStacks = {
 export const StaticBasicStacksWithOverscrolling = {
   args: {},
   render: () => {
-    const [attended] = useState(new Set<string>());
+    const [attention] = useState({ attended: [] });
     return (
       <Mosaic.Root>
-        <AttentionProvider attended={attended}>
+        <RootAttentionProvider attention={attention}>
           <Mosaic.DragOverlay />
           <NaturalDeck.Root classNames='fixed inset-0 z-0'>
             <DemoStackPlank />
@@ -139,7 +139,7 @@ export const StaticBasicStacksWithOverscrolling = {
             <DemoStackPlank />
             <DemoStackPlank />
           </NaturalDeck.Root>
-        </AttentionProvider>
+        </RootAttentionProvider>
       </Mosaic.Root>
     );
   },
@@ -195,7 +195,7 @@ export const DynamicBasicStacks = () => {
         return acc;
       }, {}),
   );
-  const [attended] = useState(new Set<string>());
+  const [attention] = useState({ attended: [] });
 
   const [navOpen, setNavOpen] = useState(true);
   const [c11yOpen, setC11yOpen] = useState(false);
@@ -285,7 +285,7 @@ export const DynamicBasicStacks = () => {
 
   return (
     <Mosaic.Root>
-      <AttentionProvider attended={attended}>
+      <RootAttentionProvider attention={attention}>
         <Main.Root complementarySidebarOpen={c11yOpen} navigationSidebarOpen={navOpen}>
           <Main.Overlay />
           <Mosaic.DragOverlay />
@@ -359,7 +359,7 @@ export const DynamicBasicStacks = () => {
             )}
           </NaturalDeck.Root>
         </Main.Root>
-      </AttentionProvider>
+      </RootAttentionProvider>
     </Mosaic.Root>
   );
 };

package/src/components/Section.tsx

@@ -28,7 +28,7 @@ import {
   toLocalizedString,
   useTranslation,
 } from '@dxos/react-ui';
-import { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';
+import { useAttendableAttributes } from '@dxos/react-ui-attention';
 import { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from '@dxos/react-ui-deck';
 import {
   type MosaicActiveType,
@@ -150,8 +150,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
       mover: { cyclic: true, direction: 1, memorizeCurrent: false },
     });
     const sectionContentGroup = useFocusableGroup({});
-    const attendableAttrs = createAttendableAttributes(id);
-    const hasAttention = useHasAttention(id);
+    const attendableAttrs = useAttendableAttributes(id);
 
     return (
       <CollapsiblePrimitive.Root
@@ -173,10 +172,9 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
             role='none'
             className={mx(
               'grid col-span-2 grid-cols-subgrid',
-              'bg-base focus-within:border-separator focus-within:attention-within',
+              'bg-base attention-surface',
               hoverableControls,
               hoverableFocusedWithinControls,
-              (active || hasAttention) && 'attention-surface border-separator',
               (active === 'origin' || active === 'rearrange' || active === 'destination') && 'opacity-0',
             )}
           >

package/src/next/Stack.stories.tsx

@@ -0,0 +1,146 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useState, useCallback } from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { Stack } from './Stack';
+import { StackItem } from './StackItem';
+
+type CardItem = {
+  id: string;
+  type: 'card';
+  content: string;
+};
+
+type ColumnItem = {
+  id: string;
+  type: 'column';
+  title: string;
+  cards: CardItem[];
+};
+
+const KanbanBlock = ({ item }: { item: CardItem }) => {
+  return (
+    <div className='is-64 bs-24 bg-input rounded-lg border border-separator shadow-sm grid place-content-center'>
+      <span className='text-sm font-medium'>{item.content}</span>
+    </div>
+  );
+};
+
+const StorybookStack = () => {
+  const [columns, setColumns] = useState<ColumnItem[]>([
+    {
+      id: 'col-0',
+      type: 'column',
+      title: 'To Do',
+      cards: [
+        { id: 'banana', type: 'card', content: 'Banana' },
+        { id: 'pickle', type: 'card', content: 'Pickle' },
+        { id: 'wombat', type: 'card', content: 'Wombat' },
+        { id: 'kazoo', type: 'card', content: 'Kazoo' },
+      ],
+    },
+    {
+      id: 'col-1',
+      type: 'column',
+      title: 'In Progress',
+      cards: [
+        { id: 'noodle', type: 'card', content: 'Noodle' },
+        { id: 'squish', type: 'card', content: 'Squish' },
+        { id: 'wobble', type: 'card', content: 'Wobble' },
+        { id: 'floof', type: 'card', content: 'Floof' },
+      ],
+    },
+    {
+      id: 'col-2',
+      type: 'column',
+      title: 'Done',
+      cards: [
+        { id: 'snorkel', type: 'card', content: 'Snorkel' },
+        { id: 'bloop', type: 'card', content: 'Bloop' },
+        { id: 'wiggle', type: 'card', content: 'Wiggle' },
+        { id: 'zoop', type: 'card', content: 'Zoop' },
+      ],
+    },
+  ]);
+
+  const reorderItem = useCallback((sourceId: string, targetId: string, closestEdge: Edge | null) => {
+    setColumns((prevColumns) => {
+      const newColumns = [...prevColumns];
+      const sourceColumn = newColumns.find(
+        (col) => col.id === sourceId || col.cards.some((card) => card.id === sourceId),
+      );
+      const targetColumn = newColumns.find(
+        (col) => col.id === targetId || col.cards.some((card) => card.id === targetId),
+      );
+
+      if (sourceColumn && targetColumn) {
+        if (sourceId.startsWith('col-') && targetId.startsWith('col-')) {
+          // Reordering columns
+          const sourceIndex = newColumns.findIndex((col) => col.id === sourceId);
+          const targetIndex = newColumns.findIndex((col) => col.id === targetId);
+          const [movedColumn] = newColumns.splice(sourceIndex, 1);
+          const insertIndex = closestEdge === 'right' ? targetIndex + 1 : targetIndex;
+          newColumns.splice(insertIndex, 0, movedColumn);
+        } else {
+          // Reordering cards within a column
+          const sourceCardIndex = sourceColumn.cards.findIndex((card) => card.id === sourceId);
+          const targetCardIndex = targetColumn.cards.findIndex((card) => card.id === targetId);
+          const [movedCard] = sourceColumn.cards.splice(sourceCardIndex, 1);
+
+          let insertIndex;
+          if (sourceColumn === targetColumn && sourceCardIndex < targetCardIndex) {
+            insertIndex = closestEdge === 'bottom' ? targetCardIndex : targetCardIndex - 1;
+          } else {
+            insertIndex = closestEdge === 'bottom' ? targetCardIndex + 1 : targetCardIndex;
+          }
+          targetColumn.cards.splice(insertIndex, 0, movedCard);
+        }
+      }
+
+      return newColumns;
+    });
+  }, []);
+
+  return (
+    <Stack orientation={'horizontal'} classNames='gap-1'>
+      {columns.map((column) => (
+        <StackItem
+          key={column.id}
+          item={column}
+          orientation={'horizontal'}
+          classNames='p-4 bg-deck rounded-md'
+          onReorder={reorderItem}
+        >
+          <Stack orientation={'vertical'} classNames='gap-1'>
+            {column.cards.map((card) => (
+              <StackItem key={card.id} item={card} orientation={'vertical'} onReorder={reorderItem}>
+                <KanbanBlock item={card} />
+              </StackItem>
+            ))}
+          </Stack>
+        </StackItem>
+      ))}
+    </Stack>
+  );
+};
+
+const meta: Meta<typeof StorybookStack> = {
+  title: 'react-ui-stack-next/Stack',
+  component: StorybookStack,
+  decorators: [withTheme],
+  argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StorybookStack>;
+
+export const Default: Story = {
+  args: { orientation: 'horizontal' },
+};

package/src/next/Stack.tsx

@@ -0,0 +1,30 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type CSSProperties, type ComponentPropsWithoutRef } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+type Orientation = 'horizontal' | 'vertical';
+
+export type StackProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
+  orientation?: Orientation;
+};
+
+export const Stack = ({ children, classNames, style, orientation, ...props }: StackProps) => {
+  const childrenCount = React.Children.count(children);
+
+  const styles: CSSProperties = {
+    [orientation === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows']:
+      `repeat(${childrenCount}, min-content)`,
+    ...style,
+  };
+
+  return (
+    <div className={mx('grid relative', classNames)} aria-orientation={orientation} style={styles} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/next/StackItem.tsx

@@ -0,0 +1,78 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import {
+  attachClosestEdge,
+  type Edge,
+  extractClosestEdge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
+import React, { useRef, useState, type ComponentPropsWithoutRef } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type StackProps } from './Stack';
+
+export type StackItemProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
+  item: { id: string; type: 'column' | 'card' };
+  orientation?: StackProps['orientation'];
+  onReorder: (sourceId: string, targetId: string, closestEdge: Edge | null) => void;
+};
+
+export const StackItem = ({ item, children, classNames, orientation, onReorder, ...props }: StackItemProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [closestEdge, setEdge] = useState<Edge | null>(null);
+
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const element = ref.current;
+
+    return combine(
+      draggable({ element, getInitialData: () => ({ id: item.id, type: item.type }) }),
+      dropTargetForElements({
+        element,
+        getData: ({ input, element }) => {
+          return attachClosestEdge(
+            { id: item.id, type: item.type },
+            { input, element, allowedEdges: orientation === 'vertical' ? ['top', 'bottom'] : ['left', 'right'] },
+          );
+        },
+        onDragEnter: ({ self, source }) => {
+          if (source.data.type === self.data.type) {
+            setEdge(extractClosestEdge(self.data));
+          }
+        },
+        onDrag: ({ self, source }) => {
+          if (source.data.type === self.data.type) {
+            setEdge(extractClosestEdge(self.data));
+          }
+        },
+        onDragLeave: () => setEdge(null),
+        onDrop: ({ self, source }) => {
+          setEdge(null);
+          if (source.data.type === self.data.type) {
+            onReorder(source.data.id as string, self.data.id as string, extractClosestEdge(self.data));
+          }
+        },
+      }),
+    );
+  }, [orientation, item, onReorder]);
+
+  return (
+    <div
+      ref={ref}
+      className={mx('relative', orientation === 'horizontal' ? 'grid-cols-subgrid' : 'grid-rows-subgrid', classNames)}
+      {...props}
+    >
+      {children}
+      {closestEdge && <DropIndicator edge={closestEdge} />}
+    </div>
+  );
+};

package/src/next/index.ts

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

package/src/testing/generator.ts

@@ -2,13 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
+import { create, type EchoReactiveObject, S } from '@dxos/echo-schema';
+import { faker } from '@dxos/random';
+
 // TODO(burdon): Reconcile with @dxos/plugin-debug, @dxos/react-ui/testing.
 
 // TODO(burdon): Bug when adding stale objects to space (e.g., static objects already added in previous story invocation).
 
-import { S, create, type EchoReactiveObject } from '@dxos/echo-schema';
-import { faker } from '@dxos/random';
-
 // TODO(burdon): Util.
 export const range = <T>(fn: (i: number) => T | undefined, length: number): T[] =>
   Array.from({ length })