@dxos/react-ui-stack 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/src/components/StackItem/StackItemHeading.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, {
   type ComponentPropsWithRef,
@@ -12,7 +13,7 @@ import React, {
 
 import { type ThemedClassName } from '@dxos/react-ui';
 import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { useStack } from '../StackContext';
 
@@ -30,30 +31,30 @@ export const StackItemHeading = ({
 }: StackItemHeadingProps) => {
   const { orientation } = useStack();
 
-  const Root = asChild ? Slot : 'div';
+  const Comp = asChild ? Slot : Primitive.div;
 
   return (
-    <Root
+    <Comp
       role='heading'
       {...props}
       className={mx(
-        'flex items-center !border-is-0 bg-headerSurface',
+        'flex items-center border-x-0! bg-header-surface',
         separateOnScroll
-          ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator'
-          : 'border-subduedSeparator',
-        orientation === 'horizontal' ? 'bs-[--rail-size]' : 'is-[--rail-size] flex-col',
-        orientation === 'horizontal' ? 'border-be' : 'border-ie',
+          ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subdued-separator'
+          : 'border-subdued-separator',
+        orientation === 'horizontal' ? 'h-(--dx-rail-size)' : 'w-(--dx-rail-size) flex-col',
+        orientation === 'horizontal' ? 'border-b' : 'border-e',
         classNames,
       )}
     >
       {children}
-    </Root>
+    </Comp>
   );
 };
 
 export const StackItemHeadingStickyContent = ({ children }: PropsWithChildren<{}>) => {
   return (
-    <div role='none' className='sticky block-start-0 bg-[--sticky-bg] p-1 is-full'>
+    <div role='none' className='sticky top-0 bg-(--sticky-bg) p-1 w-full'>
       {children}
     </div>
   );
@@ -70,7 +71,7 @@ export const StackItemHeadingLabel = forwardRef<HTMLHeadingElement, StackItemHea
         {...props}
         data-attention={((related && isRelated) || hasAttention || isAncestor).toString()}
         className={mx(
-          'pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center',
+          'px-1 min-w-0 w-0 grow truncate font-medium text-base-surface-text data-[attention=true]:text-accent-text self-center',
           classNames,
         )}
         ref={forwardedRef}

package/src/components/StackItem/StackItemResizeHandle.tsx

@@ -15,7 +15,7 @@ const MIN_HEIGHT = 3;
 
 export type StackItemResizeHandleProps = {};
 
-export const StackItemResizeHandle = () => {
+export const StackItemResizeHandle = (_: StackItemResizeHandleProps) => {
   const { orientation } = useStack();
   const { setSize, size } = useStackItem();
 

package/src/components/StackItem/StackItemSigil.tsx

@@ -4,11 +4,11 @@
 
 import React, { Fragment, type PropsWithChildren, forwardRef, useState } from 'react';
 
-import { type ActionLike } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { keySymbols } from '@dxos/keyboard';
 import { Button, type ButtonProps, DropdownMenu, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
 import { translationKey } from '../../translations';
@@ -23,7 +23,7 @@ export type KeyBinding = {
   unknown?: string;
 };
 
-export type StackItemSigilAction = Pick<ActionLike, 'id' | 'properties' | 'data'>;
+export type StackItemSigilAction = Pick<Node.ActionLike, 'id' | 'properties' | 'data'>;
 
 export type StackItemSigilButtonProps = Omit<ButtonProps, 'variant'> &
   AttendableId &
@@ -40,7 +40,10 @@ export const StackItemSigilButton = forwardRef<HTMLButtonElement, StackItemSigil
       <Button
         {...props}
         variant={variant}
-        classNames={['shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative app-no-drag', classNames]}
+        classNames={[
+          'shrink-0 px-0 min-h-0 w-(--dx-rail-action) h-(--dx-rail-action) relative dx-app-no-drag',
+          classNames,
+        ]}
         ref={forwardedRef}
       >
         {isMenu && <MenuSignifierHorizontal />}
@@ -133,7 +136,7 @@ export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>
                             </DropdownMenu.ItemIndicator>
                           )}
                           {shortcut && (
-                            <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>
+                            <span className={mx('shrink-0', 'text-description')}>{keySymbols(shortcut).join('')}</span>
                           )}
                         </Root>
                       );

package/src/components/index.ts

@@ -2,8 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-export type * from './defs';
+export type * from './types';
 
-export * from './Image';
 export * from './Stack';
+
 export * from './StackItem';

package/src/hooks/useStackDropForElements.ts

@@ -10,68 +10,82 @@ import { useLayoutEffect, useState } from 'react';
 
 import { type Orientation, type StackItemData, type StackItemRearrangeHandler } from '../components';
 
+const noop = () => {};
+
+export type UseStackDropForElementsProps = {
+  id?: string;
+  element: HTMLDivElement | null;
+  scrollElement?: HTMLDivElement | null;
+  orientation: Orientation;
+  selfDroppable: boolean;
+  onRearrange?: StackItemRearrangeHandler;
+};
+
+export type UseStackDropForElements = {
+  dropping: boolean;
+};
+
 /**
- * Hook to handle drag and drop functionality for Stack components.
+ * Hook to handle drag-and-drop functionality for Stack components.
  */
 export const useStackDropForElements = ({
   id,
   element,
   scrollElement = element,
-  selfDroppable,
   orientation,
+  selfDroppable,
   onRearrange,
-}: {
-  id?: string;
-  element: HTMLDivElement | null;
-  scrollElement?: HTMLDivElement | null;
-  selfDroppable: boolean;
-  orientation: Orientation;
-  onRearrange?: StackItemRearrangeHandler;
-}) => {
+}: UseStackDropForElementsProps): UseStackDropForElements => {
   const [dropping, setDropping] = useState(false);
 
   useLayoutEffect(() => {
-    if (!element || !selfDroppable) {
+    if (!element) {
       return;
     }
 
     const acceptSourceType = orientation === 'horizontal' ? 'column' : 'card';
 
+    // TODO(burdon): Use monitor?
     return combine(
-      dropTargetForElements({
-        element,
-        getData: ({ input, element }) => {
-          return attachClosestEdge(
-            { id, type: orientation === 'horizontal' ? 'card' : 'column' },
-            { input, element, allowedEdges: [orientation === 'horizontal' ? 'left' : 'top'] },
-          );
-        },
-        onDragEnter: ({ source }) => {
-          if (source.data.type === acceptSourceType) {
-            setDropping(true);
-          }
-        },
-        onDrag: ({ source }) => {
-          if (source.data.type === acceptSourceType) {
-            setDropping(true);
-          }
-        },
-        onDragLeave: () => {
-          return setDropping(false);
-        },
-        onDrop: ({ self, source }) => {
-          setDropping(false);
-          if (source.data.type === acceptSourceType && selfDroppable && onRearrange) {
-            onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
-          }
-        },
-      }),
-      autoScrollForElements({
-        element: scrollElement as Element,
-        getAllowedAxis: () => orientation,
-      }),
+      selfDroppable
+        ? dropTargetForElements({
+            element,
+            getData: ({ input, element }) => {
+              return attachClosestEdge(
+                { id, type: orientation === 'horizontal' ? 'card' : 'column' },
+                { input, element, allowedEdges: [orientation === 'horizontal' ? 'left' : 'top'] },
+              );
+            },
+            onDragEnter: ({ source }) => {
+              if (source.data.type === acceptSourceType) {
+                setDropping(true);
+              }
+            },
+            onDrag: ({ source }) => {
+              if (source.data.type === acceptSourceType) {
+                setDropping(true);
+              }
+            },
+            onDragLeave: () => {
+              return setDropping(false);
+            },
+            onDrop: ({ self, source }) => {
+              setDropping(false);
+              if (source.data.type === acceptSourceType && selfDroppable && onRearrange) {
+                onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
+              }
+            },
+          })
+        : noop,
+
+      scrollElement
+        ? autoScrollForElements({
+            element: scrollElement,
+            getAllowedAxis: () => orientation,
+          })
+        : noop,
     );
-  }, [element, scrollElement, selfDroppable, orientation, id, onRearrange]);
+  }, [id, element, scrollElement, selfDroppable, orientation, onRearrange]);
 
   return { dropping };
 };

package/src/index.ts

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

package/src/playwright/playwright.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   ...e2ePreset(import.meta.dirname),
   // TODO(wittjosiah): Avoid hard-coding ports.
   webServer: {
-    command: 'moon run storybook:serve-e2e -- --port=9003',
+    command: 'pnpm storybook dev --ci --quiet --port=9003 --config-dir=.storybook',
     port: 9003,
     reuseExistingServer: false,
   },

package/src/translations.ts

@@ -4,7 +4,7 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-export const translationKey = 'react-ui-stack';
+export const translationKey = '@dxos/react-ui-stack';
 
 export const translations = [
   {