@dxos/react-ui-stack 0.8.3-staging.0fa589b → 0.8.4-main.28f8d3d

package/src/exemplars/CardStack/CardStack.stories.tsx

@@ -0,0 +1,173 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useState } from 'react';
+
+import { faker } from '@dxos/random';
+import { IconButton } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { StackItem } from '../../components';
+import { Card, CardDragPreview } from '../Card';
+
+import { CardStack } from './CardStack';
+
+// Set a seed for reproducible random values
+faker.seed(0);
+
+type CardItem = {
+  id: string;
+  title: string;
+  description: string;
+  image: string;
+};
+
+type StackItemData = {
+  id: string;
+  type?: 'column' | 'card';
+};
+
+const CardStackStory = () => {
+  const [column, setColumn] = useState<CardItem[]>(
+    faker.helpers.multiple(
+      () => ({
+        id: faker.string.uuid(),
+        title: faker.commerce.productName(),
+        description: faker.lorem.paragraph(),
+        image: faker.image.url(),
+      }),
+      { count: 12 },
+    ),
+  );
+
+  const handleRearrange = useCallback((source: StackItemData, target: StackItemData, closestEdge: Edge | null) => {
+    setColumn((prevColumn) => {
+      const newColumns = [...prevColumn];
+      // Reordering cards within a column
+      const sourceCardIndex = prevColumn.findIndex((card) => card.id === source.id);
+      const targetCardIndex = prevColumn.findIndex((card) => card.id === target.id);
+
+      if (typeof sourceCardIndex === 'number' && typeof targetCardIndex === 'number') {
+        const [movedCard] = newColumns.splice(sourceCardIndex, 1);
+
+        let insertIndex;
+        if (sourceCardIndex < targetCardIndex) {
+          insertIndex = closestEdge === 'bottom' ? targetCardIndex : targetCardIndex - 1;
+        } else {
+          insertIndex = closestEdge === 'bottom' ? targetCardIndex + 1 : targetCardIndex;
+        }
+        newColumns.splice(insertIndex, 0, movedCard);
+      }
+      return newColumns;
+    });
+  }, []);
+
+  const handleAddCard = useCallback(() => {
+    setColumn((prevColumn) => {
+      const newColumn = [...prevColumn];
+      const newCard = {
+        id: faker.string.uuid(),
+        title: faker.commerce.productName(),
+        description: faker.lorem.paragraph(),
+        image: faker.image.url(),
+      } satisfies CardItem;
+      newColumn.push(newCard);
+      console.log('[add card]', prevColumn.length, newColumn.length);
+      return newColumn;
+    });
+  }, []);
+
+  const handleRemoveCard = useCallback((cardId: string) => {
+    setColumn((prevColumn) => {
+      const newColumn = [...prevColumn];
+
+      const cardIndex = prevColumn.findIndex((card) => card.id === cardId);
+      if (cardIndex !== -1) {
+        newColumn.splice(cardIndex, 1);
+      }
+
+      return newColumn;
+    });
+  }, []);
+
+  return (
+    <CardStack.Root classNames='is-96'>
+      <CardStack.Content>
+        <CardStack.Stack id='story column' onRearrange={handleRearrange} itemsCount={column.length}>
+          {column.map((card, cardIndex, cardsArray) => {
+            const cardItem = { id: card.id, type: 'card' as const };
+            const prevCardId = cardIndex > 0 ? cardsArray[cardIndex - 1].id : undefined;
+            const nextCardId = cardIndex < cardsArray.length - 1 ? cardsArray[cardIndex + 1].id : undefined;
+
+            return (
+              <CardStack.Item asChild key={card.id}>
+                <StackItem.Root
+                  item={cardItem}
+                  focusIndicatorVariant='group'
+                  prevSiblingId={prevCardId}
+                  nextSiblingId={nextCardId}
+                >
+                  <Card.StaticRoot>
+                    <Card.Toolbar>
+                      <StackItem.DragHandle asChild>
+                        <Card.DragHandle toolbarItem />
+                      </StackItem.DragHandle>
+                      <Card.ToolbarSeparator variant='gap' />
+                      <Card.ToolbarIconButton
+                        iconOnly
+                        variant='ghost'
+                        icon='ph--x--regular'
+                        label='Remove card'
+                        onClick={() => handleRemoveCard(card.id)}
+                      />
+                    </Card.Toolbar>
+                    <Card.Poster alt={card.title} image={card.image} />
+                    <Card.Heading>{card.title}</Card.Heading>
+                    <Card.Text classNames='line-clamp-2'>{card.description}</Card.Text>
+                  </Card.StaticRoot>
+                  <StackItem.DragPreview>
+                    {({ item }) => (
+                      <CardDragPreview.Root>
+                        <CardDragPreview.Content>
+                          <Card.Toolbar>
+                            <Card.DragHandle toolbarItem />
+                          </Card.Toolbar>
+                          <Card.Poster alt={card.title} image={card.image} />
+                          <Card.Heading>{card.title}</Card.Heading>
+                          <Card.Text classNames='line-clamp-2'>{card.description}</Card.Text>
+                        </CardDragPreview.Content>
+                      </CardDragPreview.Root>
+                    )}
+                  </StackItem.DragPreview>
+                </StackItem.Root>
+              </CardStack.Item>
+            );
+          })}
+        </CardStack.Stack>
+
+        <CardStack.Footer>
+          <IconButton icon='ph--plus--regular' label='Add card' onClick={handleAddCard} classNames='is-full' />
+        </CardStack.Footer>
+
+        <CardStack.Heading>{faker.company.name()}</CardStack.Heading>
+      </CardStack.Content>
+    </CardStack.Root>
+  );
+};
+
+const meta: Meta<typeof CardStackStory> = {
+  title: 'ui/react-ui-stack/CardStack',
+  component: CardStackStory,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CardStackStory>;
+
+export const Default: Story = {};

package/src/exemplars/CardStack/CardStack.tsx

@@ -8,7 +8,7 @@ import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
 import type { ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { railGridHorizontalContainFitContent, Stack, type StackProps } from '../../components';
+import { Stack, type StackProps, railGridHorizontalContainFitContent } from '../../components';
 import { Card } from '../Card';
 
 type SharedCardStackProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
@@ -107,6 +107,22 @@ const CardStackRoot = forwardRef<HTMLDivElement, SharedCardStackProps>(
   },
 );
 
+const cardStackItem = 'contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0';
+
+const CardStackItem = forwardRef<HTMLDivElement, SharedCardStackProps>(
+  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
+    const Root = asChild ? Slot : 'div';
+    const rootProps = asChild
+      ? { classNames: [cardStackItem, classNames] }
+      : { className: mx(cardStackItem, classNames), role };
+    return (
+      <Root {...props} {...rootProps} ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
 export const CardStack = {
   Root: CardStackRoot,
   Content: CardStackContent,
@@ -114,6 +130,7 @@ export const CardStack = {
   Heading: CardStackHeading,
   Footer: CardStackFooter,
   DragHandle: CardStackDragHandle,
+  Item: CardStackItem,
 };
 
-export { cardStackRoot, cardStackFooter, cardStackHeading, cardStackContent };
+export { cardStackRoot, cardStackFooter, cardStackHeading, cardStackContent, cardStackItem };

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[];