@dxos/react-ui-stack 0.8.3-staging.0fa589b → 0.8.4-main.1da679c

package/src/hooks/useStackDropForElements.ts

@@ -8,7 +8,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { useLayoutEffect, useState } from 'react';
 
-import { type StackItemRearrangeHandler, type StackItemData, type Orientation } from '../components';
+import { type Orientation, type StackItemData, type StackItemRearrangeHandler } from '../components';
 
 /**
  * Hook to handle drag and drop functionality for Stack components.
@@ -66,7 +66,10 @@ export const useStackDropForElements = ({
           }
         },
       }),
-      autoScrollForElements({ element: scrollElement as Element, getAllowedAxis: () => orientation }),
+      autoScrollForElements({
+        element: scrollElement as Element,
+        getAllowedAxis: () => orientation,
+      }),
     );
   }, [element, scrollElement, selfDroppable, orientation, id, onRearrange]);
 

package/src/index.ts

@@ -2,9 +2,8 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './components';
-
 // TODO(thure): Consider exporting exemplars from separate endpoints.
-export * from './exemplars';
 
-export { default as translations } from './translations';
+export * from './components';
+export * from './exemplars';
+export * from './translations';

package/src/playwright/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './stack-manager';

package/src/playwright/playwright.config.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { defineConfig } from '@playwright/test';
+
+import { e2ePreset } from '@dxos/test-utils/playwright';
+
+export default defineConfig({
+  ...e2ePreset(import.meta.dirname),
+  // TODO(wittjosiah): Avoid hard-coding ports.
+  webServer: {
+    command: 'moon run storybook:serve-e2e -- --port=9003',
+    port: 9003,
+    reuseExistingServer: false,
+  },
+});

package/src/playwright/smoke.spec.ts

@@ -6,12 +6,14 @@ import { expect, test } from '@playwright/test';
 
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
-import { StackManager } from '../testing';
+import { StackManager } from './stack-manager';
+
+const PORT = 9003;
 
 // TODO(wittjosiah): Update for new stack.
 test.describe.skip('Stack', () => {
   test('remove', async ({ browser }) => {
-    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--transfer') });
+    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--transfer', PORT) });
     await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
 
     const stack = new StackManager(page.getByTestId('stack-1'));
@@ -24,7 +26,7 @@ test.describe.skip('Stack', () => {
   });
 
   test('rearrange', async ({ browser }) => {
-    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--transfer') });
+    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--transfer', PORT) });
     await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
 
     const stack = new StackManager(page.getByTestId('stack-1'));
@@ -41,7 +43,7 @@ test.describe.skip('Stack', () => {
       test.skip();
     }
 
-    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--transfer') });
+    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--transfer', PORT) });
     await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
 
     const stack1 = new StackManager(page.getByTestId('stack-1'));
@@ -61,7 +63,7 @@ test.describe.skip('Stack', () => {
   });
 
   test('copy', async ({ browser }) => {
-    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--copy') });
+    const { page } = await setupPage(browser, { url: storybookUrl('ui-react-ui-stack-stack--copy', PORT) });
     await page.getByTestId('stack-copy').waitFor({ state: 'visible' });
 
     const stack1 = new StackManager(page.getByTestId('stack-1'));

package/src/testing/CardContainer.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { ExtrinsicCardContainer, IntrinsicCardContainer, PopoverCardContainer } from '@dxos/storybook-utils';
+
+import { Card } from '../exemplars';
+
+export const CardContainer = ({
+  children,
+  icon = 'ph--placeholder--regular',
+  role,
+}: PropsWithChildren<{ icon?: string; role?: string }>) => {
+  switch (role) {
+    case 'card--popover':
+      return <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>;
+
+    case 'card--extrinsic':
+      return (
+        <ExtrinsicCardContainer>
+          <Card.StaticRoot>{children}</Card.StaticRoot>
+        </ExtrinsicCardContainer>
+      );
+
+    case 'card--intrinsic':
+      return (
+        <IntrinsicCardContainer>
+          <Card.StaticRoot>{children}</Card.StaticRoot>
+        </IntrinsicCardContainer>
+      );
+
+    default:
+      return <Card.StaticRoot>{children}</Card.StaticRoot>;
+  }
+};

package/src/testing/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './stack-manager';
+export * from './CardContainer';

package/src/translations.ts

@@ -2,9 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-export const translationKey = 'stack';
+import { type Resource } from '@dxos/react-ui';
 
-export default [
+export const translationKey = 'react-ui-stack';
+
+export const translations = [
   {
     'en-US': {
       [translationKey]: {
@@ -19,4 +21,4 @@ export default [
       },
     },
   },
-];
+] as const satisfies Resource[];