@dxos/react-ui-stack 0.6.12-main.5cc132e → 0.6.12-main.89e9959

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/playwright/smoke.spec.ts

@@ -38,8 +38,8 @@ test.describe('Stack', () => {
   });
 
   test('transfer', async ({ browser, browserName }) => {
-    if (browserName === 'webkit') {
-      // TODO(wittjosiah): This test is failing consistently on WebKit in CI specifically.
+    if (browserName !== 'chromium') {
+      // TODO(wittjosiah): This test is flaky in Webkit & Firefox.
       test.skip();
     }
 

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 })