@dxos/react-ui-stack 0.6.13 → 0.6.14-main.7bd9c89

package/src/next/Stack.stories.tsx

@@ -0,0 +1,148 @@
+//
+// 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>
+  );
+};
+
+type Story = StoryObj<typeof StorybookStack>;
+
+export const Default: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
+};
+
+const meta: Meta<typeof StorybookStack> = {
+  title: 'ui/react-ui-stack-next/Stack',
+  component: StorybookStack,
+  decorators: [withTheme],
+  argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
+};
+
+export default meta;

package/src/next/Stack.tsx

@@ -0,0 +1,30 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { Children, 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 = 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, { useEffect, 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);
+
+  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/playwright.config.ts

@@ -2,6 +2,17 @@
 // Copyright 2023 DXOS.org
 //
 
-import { defaultPlaywrightConfig } from '@dxos/test/playwright';
+import { nxE2EPreset } from '@nx/playwright/preset';
+import { defineConfig } from '@playwright/test';
 
-export default defaultPlaywrightConfig;
+import { e2ePreset } from '@dxos/test-utils/playwright';
+
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: __dirname }),
+  ...e2ePreset(__dirname),
+  webServer: {
+    command: 'pnpm -w nx storybook-e2e stories',
+    port: 9009,
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/src/playwright/smoke.spec.ts

@@ -4,7 +4,7 @@
 
 import { expect, test } from '@playwright/test';
 
-import { setupPage } from '@dxos/test/playwright';
+import { setupPage } from '@dxos/test-utils/playwright';
 
 import { StackManager } from '../testing';
 
@@ -13,10 +13,8 @@ const storybookUrl = (storyId: string) => `http://localhost:9009/iframe.html?id=
 
 test.describe('Stack', () => {
   test('remove', async ({ browser }) => {
-    const { page } = await setupPage(browser, {
-      url: storybookUrl('react-ui-stack-stack--transfer'),
-      waitFor: (page) => page.getByTestId('stack-transfer').isVisible(),
-    });
+    const { page } = await setupPage(browser, { url: storybookUrl('react-ui-stack-stack--transfer') });
+    await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
 
     const stack = new StackManager(page.getByTestId('stack-1'));
     await expect(stack.sections()).toHaveCount(8);
@@ -28,10 +26,8 @@ test.describe('Stack', () => {
   });
 
   test('rearrange', async ({ browser }) => {
-    const { page } = await setupPage(browser, {
-      url: storybookUrl('react-ui-stack-stack--transfer'),
-      waitFor: (page) => page.getByTestId('stack-transfer').isVisible(),
-    });
+    const { page } = await setupPage(browser, { url: storybookUrl('react-ui-stack-stack--transfer') });
+    await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
 
     const stack = new StackManager(page.getByTestId('stack-1'));
     const sectionText = await stack.section(0).locator.innerText();
@@ -42,15 +38,13 @@ 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();
     }
 
-    const { page } = await setupPage(browser, {
-      url: storybookUrl('react-ui-stack-stack--transfer'),
-      waitFor: (page) => page.getByTestId('stack-transfer').isVisible(),
-    });
+    const { page } = await setupPage(browser, { url: storybookUrl('react-ui-stack-stack--transfer') });
+    await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
 
     const stack1 = new StackManager(page.getByTestId('stack-1'));
     const stack2 = new StackManager(page.getByTestId('stack-2'));
@@ -69,10 +63,8 @@ test.describe('Stack', () => {
   });
 
   test('copy', async ({ browser }) => {
-    const { page } = await setupPage(browser, {
-      url: storybookUrl('react-ui-stack-stack--copy'),
-      waitFor: (page) => page.getByTestId('stack-copy').isVisible(),
-    });
+    const { page } = await setupPage(browser, { url: storybookUrl('react-ui-stack-stack--copy') });
+    await page.getByTestId('stack-copy').waitFor({ state: 'visible' });
 
     const stack1 = new StackManager(page.getByTestId('stack-1'));
     const stack2 = new StackManager(page.getByTestId('stack-2'));

package/src/testing/TableContent.tsx

@@ -1,6 +1,7 @@
 //
 // Copyright 2024 DXOS.org
 //
+
 import { Plugs, PlugsConnected } from '@phosphor-icons/react';
 import React from 'react';
 

package/src/testing/generator.ts

@@ -2,13 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
+import { create, type ReactiveObject, 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 })
@@ -23,7 +23,7 @@ type ObjectDataGenerator = {
   createData: () => any;
 };
 
-type ObjectFactory<T extends EchoReactiveObject<any>> = {
+type ObjectFactory<T extends ReactiveObject<any>> = {
   schema?: S.Schema<any>; // TODO(burdon): Support both typed and expando schema.
   createObject: () => T;
 };