@dxos/react-ui-stack 0.6.13 → 0.6.14-main.69511f5

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('ui-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('ui-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('ui-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('ui-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;
 };

package/src/testing/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './generator';
+// NOTE: Not exporting generator.ts as it depends on esm-only packages.
+
 export * from './stack-manager';