@dxos/react-ui-stack 0.6.13-main.ed424a1 → 0.6.13-staging.1e988a3

package/src/components/Deck.stories.tsx

@@ -4,13 +4,23 @@
 
 import '@dxos-theme';
 
-import { CaretLeft, CaretLineLeft, CaretLineRight, CaretRight, SidebarSimple, X } from '@phosphor-icons/react';
+import {
+  Books,
+  CardsThree,
+  CaretLeft,
+  CaretLineLeft,
+  CaretLineRight,
+  CaretRight,
+  SidebarSimple,
+  TextAa,
+  X,
+} from '@phosphor-icons/react';
 import React, { type PropsWithChildren, useState, type ComponentProps } from 'react';
 
 import { faker } from '@dxos/random';
-import { Button, Icon, Main } from '@dxos/react-ui';
-import { RootAttentionProvider } from '@dxos/react-ui-attention';
-import { PlankHeading, Deck as NaturalDeck, Plank } from '@dxos/react-ui-deck';
+import { Button, Main } from '@dxos/react-ui';
+import { AttentionProvider } from '@dxos/react-ui-attention';
+import { PlankHeading, plankHeadingIconProps, Deck as NaturalDeck, Plank } from '@dxos/react-ui-deck';
 import { Mosaic, type MosaicDataItem } from '@dxos/react-ui-mosaic';
 import { withTheme } from '@dxos/storybook-utils';
 import { arrayMove } from '@dxos/util';
@@ -41,7 +51,7 @@ const SimpleContent = ({ data }: { data: MosaicDataItem & { title?: string; body
 const rollItems = (n: number): StackSectionItem[] => {
   return [...Array(n)].map(() => ({
     id: faker.string.uuid(),
-    icon: 'ph--text-aa--regular',
+    icon: TextAa,
     isResizable: true,
     object: {
       id: faker.string.uuid(),
@@ -64,7 +74,7 @@ const StackPlank = ({ label, items, id, children }: PropsWithChildren<PlankProps
     <>
       <PlankHeading.Root classNames='pli-px'>
         <PlankHeading.Button>
-          <Icon icon='ph--cards-three--regular' size={5} />
+          <CardsThree {...plankHeadingIconProps} />
         </PlankHeading.Button>
         <PlankHeading.Label classNames='flex-1 truncate'>{label}</PlankHeading.Label>
         {children}
@@ -102,10 +112,10 @@ export default {
 export const StaticBasicStacks = {
   args: {},
   render: () => {
-    const [attention] = useState({ attended: [] });
+    const [attended] = useState(new Set<string>());
     return (
       <Mosaic.Root>
-        <RootAttentionProvider attention={attention}>
+        <AttentionProvider attended={attended}>
           <Mosaic.DragOverlay />
           <NaturalDeck.Root classNames='fixed inset-0 z-0'>
             <DemoStackPlank />
@@ -116,7 +126,7 @@ export const StaticBasicStacks = {
             <DemoStackPlank />
             <DemoStackPlank />
           </NaturalDeck.Root>
-        </RootAttentionProvider>
+        </AttentionProvider>
       </Mosaic.Root>
     );
   },
@@ -125,10 +135,10 @@ export const StaticBasicStacks = {
 export const StaticBasicStacksWithOverscrolling = {
   args: {},
   render: () => {
-    const [attention] = useState({ attended: [] });
+    const [attended] = useState(new Set<string>());
     return (
       <Mosaic.Root>
-        <RootAttentionProvider attention={attention}>
+        <AttentionProvider attended={attended}>
           <Mosaic.DragOverlay />
           <NaturalDeck.Root classNames='fixed inset-0 z-0'>
             <DemoStackPlank />
@@ -139,7 +149,7 @@ export const StaticBasicStacksWithOverscrolling = {
             <DemoStackPlank />
             <DemoStackPlank />
           </NaturalDeck.Root>
-        </RootAttentionProvider>
+        </AttentionProvider>
       </Mosaic.Root>
     );
   },
@@ -195,7 +205,7 @@ export const DynamicBasicStacks = () => {
         return acc;
       }, {}),
   );
-  const [attention] = useState({ attended: [] });
+  const [attended] = useState(new Set<string>());
 
   const [navOpen, setNavOpen] = useState(true);
   const [c11yOpen, setC11yOpen] = useState(false);
@@ -234,7 +244,7 @@ export const DynamicBasicStacks = () => {
     <>
       <PlankHeading.Root classNames='pli-px'>
         <PlankHeading.Button>
-          <Icon icon='ph--books--regular' size={5} />
+          <Books {...plankHeadingIconProps} />
         </PlankHeading.Button>
         <PlankHeading.Label classNames='grow'>Menu</PlankHeading.Label>
         {c11yContent === MENU ? (
@@ -285,7 +295,7 @@ export const DynamicBasicStacks = () => {
 
   return (
     <Mosaic.Root>
-      <RootAttentionProvider attention={attention}>
+      <AttentionProvider attended={attended}>
         <Main.Root complementarySidebarOpen={c11yOpen} navigationSidebarOpen={navOpen}>
           <Main.Overlay />
           <Mosaic.DragOverlay />
@@ -359,7 +369,7 @@ export const DynamicBasicStacks = () => {
             )}
           </NaturalDeck.Root>
         </Main.Root>
-      </RootAttentionProvider>
+      </AttentionProvider>
     </Mosaic.Root>
   );
 };

package/src/components/Section.tsx

@@ -3,7 +3,15 @@
 //
 
 import { useFocusableGroup, useTabsterAttributes } from '@fluentui/react-tabster';
-import { ArrowLineDown, ArrowLineUp, ArrowSquareOut, CaretUpDown, Trash } from '@phosphor-icons/react';
+import {
+  ArrowLineDown,
+  ArrowLineUp,
+  ArrowSquareOut,
+  CaretUpDown,
+  DotsNine,
+  type IconProps,
+  Trash,
+} from '@phosphor-icons/react';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import React, {
   forwardRef,
@@ -18,7 +26,6 @@ import React, {
 import {
   Button,
   DropdownMenu,
-  Icon,
   type Label,
   List,
   ListItem,
@@ -28,7 +35,7 @@ import {
   toLocalizedString,
   useTranslation,
 } from '@dxos/react-ui';
-import { useAttendableAttributes } from '@dxos/react-ui-attention';
+import { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';
 import { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from '@dxos/react-ui-deck';
 import {
   type MosaicActiveType,
@@ -85,14 +92,14 @@ export type StackSectionItem = MosaicDataItem & {
   };
   // TODO(wittjosiah): Common type? Factor out?
   metadata?: {
-    icon?: string;
+    icon?: FC<IconProps>;
     placeholder?: Label;
     viewActions?: (item: StackSectionItem) => StackAction;
   };
 };
 
 export type StackAction = {
-  icon: string;
+  icon: FC<IconProps>;
   label: Label;
   onClick: () => void;
 };
@@ -126,7 +133,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
     {
       id,
       title,
-      icon = 'ph--placeholder--regular',
+      icon: Icon = DotsNine,
       size = 'intrinsic',
       collapsed,
       active,
@@ -150,7 +157,8 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
       mover: { cyclic: true, direction: 1, memorizeCurrent: false },
     });
     const sectionContentGroup = useFocusableGroup({});
-    const attendableAttrs = useAttendableAttributes(id);
+    const attendableAttrs = createAttendableAttributes(id);
+    const hasAttention = useHasAttention(id);
 
     return (
       <CollapsiblePrimitive.Root
@@ -172,9 +180,10 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
             role='none'
             className={mx(
               'grid col-span-2 grid-cols-subgrid',
-              'bg-base attention-surface',
+              'bg-base focus-within:border-separator focus-within:attention-within',
               hoverableControls,
               hoverableFocusedWithinControls,
+              (active || hasAttention) && 'attention-surface border-separator',
               (active === 'origin' || active === 'rearrange' || active === 'destination') && 'opacity-0',
             )}
           >
@@ -197,7 +206,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
                   }}
                 >
                   <DropDownMenuDragHandleTrigger active={!!active} variant='ghost' classNames='m-0' {...draggableProps}>
-                    <Icon icon={icon} size={5} classNames='transition-opacity' />
+                    <Icon className={mx(getSize(5), 'transition-opacity')} />
                   </DropDownMenuDragHandleTrigger>
                   <DropdownMenu.Portal>
                     <DropdownMenu.Content>

package/src/playwright/playwright.config.ts

@@ -2,17 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { nxE2EPreset } from '@nx/playwright/preset';
-import { defineConfig } from '@playwright/test';
+import { defaultPlaywrightConfig } from '@dxos/test/playwright';
 
-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,
-  },
-});
+export default defaultPlaywrightConfig;

package/src/playwright/smoke.spec.ts

@@ -4,7 +4,7 @@
 
 import { expect, test } from '@playwright/test';
 
-import { setupPage } from '@dxos/test-utils/playwright';
+import { setupPage } from '@dxos/test/playwright';
 
 import { StackManager } from '../testing';
 
@@ -13,8 +13,10 @@ 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') });
-    await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
+    const { page } = await setupPage(browser, {
+      url: storybookUrl('react-ui-stack-stack--transfer'),
+      waitFor: (page) => page.getByTestId('stack-transfer').isVisible(),
+    });
 
     const stack = new StackManager(page.getByTestId('stack-1'));
     await expect(stack.sections()).toHaveCount(8);
@@ -26,8 +28,10 @@ test.describe('Stack', () => {
   });
 
   test('rearrange', async ({ browser }) => {
-    const { page } = await setupPage(browser, { url: storybookUrl('react-ui-stack-stack--transfer') });
-    await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
+    const { page } = await setupPage(browser, {
+      url: storybookUrl('react-ui-stack-stack--transfer'),
+      waitFor: (page) => page.getByTestId('stack-transfer').isVisible(),
+    });
 
     const stack = new StackManager(page.getByTestId('stack-1'));
     const sectionText = await stack.section(0).locator.innerText();
@@ -38,13 +42,15 @@ test.describe('Stack', () => {
   });
 
   test('transfer', async ({ browser, browserName }) => {
-    if (browserName !== 'chromium') {
-      // TODO(wittjosiah): This test is flaky in Webkit & Firefox.
+    if (browserName === 'webkit') {
+      // TODO(wittjosiah): This test is failing consistently on WebKit in CI specifically.
       test.skip();
     }
 
-    const { page } = await setupPage(browser, { url: storybookUrl('react-ui-stack-stack--transfer') });
-    await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
+    const { page } = await setupPage(browser, {
+      url: storybookUrl('react-ui-stack-stack--transfer'),
+      waitFor: (page) => page.getByTestId('stack-transfer').isVisible(),
+    });
 
     const stack1 = new StackManager(page.getByTestId('stack-1'));
     const stack2 = new StackManager(page.getByTestId('stack-2'));
@@ -63,8 +69,10 @@ test.describe('Stack', () => {
   });
 
   test('copy', async ({ browser }) => {
-    const { page } = await setupPage(browser, { url: storybookUrl('react-ui-stack-stack--copy') });
-    await page.getByTestId('stack-copy').waitFor({ state: 'visible' });
+    const { page } = await setupPage(browser, {
+      url: storybookUrl('react-ui-stack-stack--copy'),
+      waitFor: (page) => page.getByTestId('stack-copy').isVisible(),
+    });
 
     const stack1 = new StackManager(page.getByTestId('stack-1'));
     const stack2 = new StackManager(page.getByTestId('stack-2'));

package/src/testing/TableContent.tsx

@@ -1,7 +1,6 @@
 //
 // 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 ReactiveObject<any>> = {
+type ObjectFactory<T extends EchoReactiveObject<any>> = {
   schema?: S.Schema<any>; // TODO(burdon): Support both typed and expando schema.
   createObject: () => T;
 };