@dxos/react-ui-stack 0.6.14-staging.e15392e → 0.7.1-staging.599df14

package/src/components/Stack.stories.tsx

@@ -1,207 +1,134 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-// NOTE(thure): This unused import resolves the “likely not portable” TS error.
-// eslint-disable-next-line unused-imports/no-unused-imports
-import { type IconProps } from '@phosphor-icons/react';
-import React, { useEffect, useRef, useState } from 'react';
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useState, useCallback } from 'react';
 
 import { faker } from '@dxos/random';
-import { Mosaic, type MosaicDropEvent, type MosaicMoveEvent, type MosaicOperation, Path } from '@dxos/react-ui-mosaic';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { type StackSectionContent, type StackSectionItem } from './Section';
-import { Stack, type StackProps } from './Stack';
-import { TestObjectGenerator } from '../testing/generator';
+import { withTheme } from '@dxos/storybook-utils';
 
-faker.seed(3);
+import { Stack } from './Stack';
+import { StackItem, type StackItemData } from './StackItem';
 
-const SimpleContent = ({ data }: { data: StackSectionContent & { title?: string } }) => (
-  <div className='p-4 text-center'>{data.title ?? data.id}</div>
-);
+type StoryStackItem = {
+  id: string;
+  title: string;
+  items?: StoryStackItem[];
+};
 
-const ComplexContent = ({
-  data,
-}: StackSectionItem & { data: StackSectionContent & { title?: string; body?: string; image?: string } }) => {
-  useEffect(() => () => console.log('[ComplexContent]', 'unmount'), []);
+const KanbanBlock = ({ item }: { item: StoryStackItem }) => {
   return (
-    <div className='flex'>
-      <div className='grow p-4'>
-        <h1>{data.title ?? data.id}</h1>
-        {data.body && <p>{data.body}</p>}
-      </div>
-      {data.image && <img src={data.image} />}
+    <div className='overflow-hidden'>
+      <p className='place-content-center p-4'>{item.title}</p>
     </div>
   );
 };
 
-export default {
-  title: 'ui/react-ui-stack/Stack',
-  component: Stack,
-  decorators: [withTheme],
-  render: ({ debug, ...args }: DemoStackProps & { debug: boolean }) => {
-    return (
-      <Mosaic.Root debug={debug}>
-        <Mosaic.DragOverlay />
-        <DemoStack {...args} />
-      </Mosaic.Root>
-    );
-  },
-};
+const StorybookStack = () => {
+  const [columns, setColumns] = useState<StoryStackItem[]>(
+    faker.helpers.multiple(
+      () =>
+        ({
+          id: faker.string.uuid(),
+          title: faker.lorem.paragraph(),
+          items: faker.helpers.multiple(
+            () =>
+              ({
+                id: faker.string.uuid(),
+                title: faker.lorem.paragraph(),
+              }) satisfies StoryStackItem,
+            { count: { min: 32, max: 64 } },
+          ),
+        }) satisfies StoryStackItem,
+      { count: 8 },
+    ),
+  );
 
-export const Empty = {
-  args: {
-    SectionContent: SimpleContent,
-    count: 0,
-  },
-};
+  const reorderItem = useCallback((source: StackItemData, target: StackItemData, closestEdge: Edge | null) => {
+    setColumns((prevColumns) => {
+      const newColumns = [...prevColumns];
+      const sourceColumn = newColumns.find(
+        (col) => col.id === source.id || col.items?.some((card) => card.id === source.id),
+      );
+      const targetColumn = newColumns.find(
+        (col) => col.id === target.id || col.items?.some((card) => card.id === target.id),
+      );
+
+      if (sourceColumn && targetColumn) {
+        if (source.type === 'column' && target.type === 'column') {
+          // Reordering columns
+          const sourceIndex = newColumns.findIndex((col) => col.id === source.id);
+          const targetIndex = newColumns.findIndex((col) => col.id === target.id);
+          const [movedColumn] = newColumns.splice(sourceIndex, 1);
+          const insertIndex = closestEdge === 'right' ? targetIndex + 1 : targetIndex;
+          newColumns.splice(insertIndex, 0, movedColumn);
+        } else {
+          // Reordering cards within a column
+          const sourceCardIndex = sourceColumn.items?.findIndex((card) => card.id === source.id);
+          const targetCardIndex = targetColumn.items?.findIndex((card) => card.id === target.id);
+          if (
+            typeof sourceCardIndex === 'number' &&
+            typeof targetCardIndex === 'number' &&
+            sourceColumn.items &&
+            targetColumn.items
+          ) {
+            const [movedCard] = sourceColumn.items.splice(sourceCardIndex, 1);
+
+            let insertIndex;
+            if (sourceColumn === targetColumn && sourceCardIndex < targetCardIndex) {
+              insertIndex = closestEdge === 'bottom' ? targetCardIndex : targetCardIndex - 1;
+            } else {
+              insertIndex = closestEdge === 'bottom' ? targetCardIndex + 1 : targetCardIndex;
+            }
+            targetColumn.items.splice(insertIndex, 0, movedCard);
+          }
+        }
+      }
 
-export const Simple = {
-  args: {
-    SectionContent: SimpleContent,
-    types: ['document'],
-    debug: true,
-  },
-};
+      return newColumns;
+    });
+  }, []);
 
-export const Complex = {
-  args: {
-    SectionContent: ComplexContent,
-    types: ['document', 'image'],
-    debug: true,
-  },
+  return (
+    <main className='fixed inset-0'>
+      <Stack orientation='horizontal' size='contain'>
+        {columns.map((column) => (
+          <StackItem.Root key={column.id} item={column} onRearrange={reorderItem}>
+            <StackItem.Heading>
+              <StackItem.ResizeHandle />
+            </StackItem.Heading>
+            <Stack orientation='vertical' size='contain'>
+              {column.items?.map((card) => (
+                <StackItem.Root key={card.id} item={card} onRearrange={reorderItem}>
+                  <StackItem.Heading>
+                    <StackItem.ResizeHandle />
+                  </StackItem.Heading>
+                  <KanbanBlock item={card} />
+                </StackItem.Root>
+              ))}
+            </Stack>
+          </StackItem.Root>
+        ))}
+      </Stack>
+    </main>
+  );
 };
 
-export const Transfer = {
-  args: {
-    SectionContent: SimpleContent,
-    types: ['document'],
-    count: 8,
-    className: 'w-[400px]',
-  },
-  render: ({ debug, ...args }: DemoStackProps & { debug: boolean }) => {
-    return (
-      <Mosaic.Root debug={debug}>
-        <Mosaic.DragOverlay />
-        <div className='flex grow justify-center p-4' data-testid='stack-transfer'>
-          <div className='grid grid-cols-2 gap-4'>
-            <DemoStack {...args} id='stack-1' />
-            <DemoStack {...args} id='stack-2' />
-          </div>
-        </div>
-      </Mosaic.Root>
-    );
-  },
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-};
+type Story = StoryObj<typeof StorybookStack>;
 
-export const Copy = {
+export const Default: Story = {
   args: {
-    SectionContent: SimpleContent,
-    types: ['document'],
-    className: 'w-[400px]',
-  },
-  render: ({ debug, ...args }: DemoStackProps & { debug: boolean }) => {
-    return (
-      <Mosaic.Root debug={debug}>
-        <Mosaic.DragOverlay debug={debug} />
-        <div className='flex grow justify-center p-4' data-testid='stack-copy'>
-          <div className='grid grid-cols-2 gap-4'>
-            <DemoStack {...args} id='stack-1' />
-            <DemoStack {...args} id='stack-2' operation='copy' count={0} />
-          </div>
-        </div>
-      </Mosaic.Root>
-    );
+    orientation: 'horizontal',
   },
-  decorators: [withTheme, withLayout({ fullscreen: true })],
 };
 
-export type DemoStackProps = StackProps & {
-  types?: string[];
-  count?: number;
-  operation?: MosaicOperation;
+const meta: Meta<typeof StorybookStack> = {
+  title: 'ui/react-ui-stack-next/Stack',
+  component: StorybookStack,
+  decorators: [withTheme],
+  argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
 };
 
-const DemoStack = ({
-  id = 'stack',
-  SectionContent,
-  types,
-  count = 8,
-  operation = 'transfer',
-  classNames,
-}: DemoStackProps) => {
-  const [items, setItems] = useState<StackSectionItem[]>(() => {
-    const generator = new TestObjectGenerator({ types });
-    return generator.createObjects({ length: count }).map((object) => ({
-      id: faker.string.uuid(),
-      object,
-    }));
-  });
-
-  const itemsRef = useRef(items);
-
-  const handleOver = ({ active, over }: MosaicMoveEvent<number>) => {
-    if (operation === 'reject') {
-      return 'reject';
-    }
-
-    if (Path.parent(active.path) === Path.parent(over.path)) {
-      return 'rearrange';
-    }
-
-    // TODO(wittjosiah): Items is stale here for some inexplicable reason, so ref helps.
-    const exists = itemsRef.current.findIndex((item) => item.id === active.item.id) >= 0;
-
-    if (!exists) {
-      return operation;
-    } else {
-      return 'reject';
-    }
-  };
-
-  const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {
-    setItems((items) => {
-      if (
-        (active.path === Path.create(id, active.item.id) || active.path === id) &&
-        (operation !== 'copy' || over.path === Path.create(id, over.item.id) || over.path === id)
-      ) {
-        items.splice(active.position!, 1);
-      }
-
-      if (over.path === Path.create(id, over.item.id)) {
-        items.splice(over.position!, 0, active.item as StackSectionItem);
-      } else if (over.path === id) {
-        items.push(active.item as StackSectionItem);
-      }
-
-      const i = [...items];
-      itemsRef.current = i;
-      return i;
-    });
-  };
-
-  const handleRemove = (path: string) => {
-    setItems((items) => {
-      const newItems = items.filter((item) => item.id !== Path.last(path));
-      itemsRef.current = newItems;
-      return newItems;
-    });
-  };
-
-  return (
-    <Stack
-      id={id}
-      classNames={classNames}
-      data-testid={id}
-      SectionContent={SectionContent}
-      items={items}
-      onOver={handleOver}
-      onDrop={handleDrop}
-      onDeleteSection={handleRemove}
-    />
-  );
-};
+export default meta;

package/src/components/Stack.tsx

@@ -1,173 +1,78 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2024 DXOS.org
 //
 
-import { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';
-import React, { type ReactNode, forwardRef, useCallback } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import React, { Children, type CSSProperties, type ComponentPropsWithRef, forwardRef } from 'react';
 
-import { List, useTranslation } from '@dxos/react-ui';
-import {
-  type MosaicContainerProps,
-  type MosaicTileComponent,
-  Mosaic,
-  Path,
-  useContainer,
-  useItemsWithPreview,
-  useMosaic,
-} from '@dxos/react-ui-mosaic';
-import { dropRingInner } from '@dxos/react-ui-theme';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
 
-import {
-  type CollapsedSections,
-  type AddSectionPosition,
-  SectionTile,
-  type StackContextValue,
-  type StackItem,
-  type StackSectionContent,
-  type StackSectionItem,
-} from './Section';
-import { stackColumns } from './style-fragments';
-import { translationKey } from '../translations';
+import { type StackContextValue, StackContext } from './StackContext';
 
-export type Direction = 'horizontal' | 'vertical';
+export type Orientation = 'horizontal' | 'vertical';
+export type Size = 'intrinsic' | 'contain';
 
-export type { CollapsedSections, AddSectionPosition };
+export type StackProps = Omit<ThemedClassName<ComponentPropsWithRef<'div'>>, 'aria-orientation'> &
+  Partial<StackContextValue> & { itemsCount?: number };
 
-export const DEFAULT_TYPE = 'stack-section';
+export const railGridHorizontal = 'grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';
 
-export type StackProps<TData extends StackSectionContent = StackSectionContent> = Omit<
-  MosaicContainerProps<TData, number>,
-  'debug' | 'Component'
-> &
-  Omit<StackContextValue<TData>, 'setCollapsedSections'> & {
-    items?: StackSectionItem[];
-    separation?: boolean; // TODO(burdon): Style.
-    onCollapseSection?: (id: string, collapsed: boolean) => void;
-    emptyComponent?: ReactNode;
-  };
+export const railGridVertical = 'grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';
 
-export const Stack = ({
-  id,
-  type = DEFAULT_TYPE,
-  SectionContent,
-  items = [],
-  separation = true,
-  transform,
-  onOver,
-  onDrop,
-  onAddSection,
-  onDeleteSection,
-  onNavigateToSection,
-  onCollapseSection,
-  ...props
-}: StackProps) => {
-  const { ref: containerRef, width = 0 } = useResizeDetector<HTMLDivElement>({ refreshRate: 200 });
-  const { operation, overItem } = useMosaic();
-  const itemsWithPreview = useItemsWithPreview({ path: id, items });
-
-  const getOverlayStyle = useCallback(() => ({ width }), [width]);
-  const getOverlayProps = useCallback(
-    () => ({ itemContext: { transform, SectionContent } }),
-    [transform, SectionContent],
-  );
-
-  // TODO(thure): The root cause of the discrepancy between `activeNodeRect.top` and `overlayNodeRect.top` in Composer
-  //  in particular is not yet known, so this solution may may backfire in unforeseeable cases.
-  const stackModifier = useCallback<Exclude<MosaicContainerProps['modifier'], undefined>>(
-    (_activeItem, { transform, activeNodeRect, overlayNodeRect }) => {
-      if (activeNodeRect && overlayNodeRect) {
-        transform.y += activeNodeRect?.top - overlayNodeRect?.top;
-      }
-      return transform;
+export const Stack = forwardRef<HTMLDivElement, StackProps>(
+  (
+    {
+      children,
+      classNames,
+      style,
+      orientation = 'vertical',
+      rail = true,
+      separators = true,
+      size = 'intrinsic',
+      itemsCount = Children.count(children),
+      ...props
     },
-    [],
-  );
-
-  return (
-    <Mosaic.Container
-      {...{
-        id,
-        type,
-        Component: SectionTile as MosaicTileComponent<StackSectionItem, HTMLDivElement>,
-        getOverlayStyle,
-        getOverlayProps,
-        onOver,
-        onDrop,
-        modifier: stackModifier,
-      }}
-    >
-      <Mosaic.DroppableTile
-        path={id}
-        type={type}
-        item={{ id, items: itemsWithPreview }}
-        // TODO(wittjosiah): Should this actually be a context?
-        itemContext={{
-          separation,
-          transform,
-          onDeleteSection,
-          onNavigateToSection,
-          onAddSection,
-          onCollapseSection,
-          SectionContent,
-        }}
-        isOver={
-          overItem &&
-          !!overItem.path &&
-          Path.hasRoot(overItem.path, id) &&
-          (operation === 'copy' || operation === 'transfer')
-        }
-        Component={StackTile}
-        {...props}
-        ref={containerRef}
-      />
-    </Mosaic.Container>
-  );
-};
+    forwardedRef,
+  ) => {
+    const arrowNavigationGroup = useArrowNavigationGroup({ axis: orientation });
 
-const StackTile: MosaicTileComponent<StackItem, HTMLOListElement, Pick<StackProps, 'emptyComponent'>> = forwardRef(
-  ({ classNames, path, isOver, item: { items }, itemContext, type: _type, emptyComponent, ...props }, forwardedRef) => {
-    const { t } = useTranslation(translationKey);
-    const { Component, type } = useContainer();
-    const domAttributes = useArrowNavigationGroup({ axis: 'grid' });
-    const { activeItem } = useMosaic();
+    const styles: CSSProperties = {
+      [orientation === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows']: `repeat(${itemsCount}, min-content)`,
+      ...style,
+    };
 
-    // NOTE(thure): Ensure “groupper” is available, but no need to use it here.
-    const _group = useFocusableGroup();
-
-    // NOTE: Keep outer padding the same as MarkdownMain.
     return (
-      <List
-        ref={forwardedRef}
-        classNames={['grid relative', stackColumns, isOver && dropRingInner, classNames]}
-        {...(!activeItem && domAttributes)}
-        {...props}
-      >
-        {items.length > 0 ? (
-          <Mosaic.SortableContext items={items} direction='vertical'>
-            {items.map((item, index) => (
-              <Mosaic.SortableTile
-                key={item.id}
-                item={item}
-                itemContext={itemContext}
-                path={path}
-                type={type}
-                position={index}
-                Component={Component}
-              />
-            ))}
-          </Mosaic.SortableContext>
-        ) : emptyComponent !== undefined ? (
-          <>{emptyComponent}</>
-        ) : (
-          <p
-            className='grid col-span-2 text-center p-4 border border-dashed border-neutral-500/50 rounded'
-            data-testid='stack.empty'
-          >
-            {t('empty stack message')}
-          </p>
-        )}
-      </List>
+      <StackContext.Provider value={{ orientation, rail, size, separators }}>
+        <div
+          {...props}
+          {...arrowNavigationGroup}
+          className={mx(
+            'grid relative',
+            rail
+              ? orientation === 'horizontal'
+                ? railGridHorizontal
+                : railGridVertical
+              : orientation === 'horizontal'
+                ? 'grid-rows-1'
+                : 'grid-cols-1',
+            size === 'contain' &&
+              (orientation === 'horizontal'
+                ? 'overflow-x-auto min-bs-0 bs-full max-bs-full'
+                : 'overflow-y-auto min-is-0 is-full max-is-full'),
+            separators && (orientation === 'horizontal' ? 'divide-separator divide-x' : 'divide-separator divide-y'),
+            classNames,
+          )}
+          aria-orientation={orientation}
+          style={styles}
+          ref={forwardedRef}
+        >
+          {children}
+        </div>
+      </StackContext.Provider>
     );
   },
 );
+
+export { StackContext };
+export type { StackContextValue };

package/src/components/StackContext.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { createContext, useContext } from 'react';
+
+import { type Orientation, type Size } from './Stack';
+import { type StackItemSize } from './StackItem';
+
+export type StackContextValue = {
+  orientation: Orientation;
+  separators: boolean;
+  rail: boolean;
+  size: Size;
+};
+
+export const StackContext = createContext<StackContextValue>({
+  orientation: 'vertical',
+  rail: true,
+  size: 'intrinsic',
+  separators: true,
+});
+
+export const useStack = () => useContext(StackContext);
+
+type StackItemContextValue = {
+  selfDragHandleRef: (element: HTMLDivElement | null) => void;
+  size: StackItemSize;
+  setSize: (nextSize: StackItemSize, commit?: boolean) => void;
+};
+
+export const StackItemContext = createContext<StackItemContextValue>({
+  selfDragHandleRef: () => {},
+  size: 'min-content',
+  setSize: () => {},
+});
+
+export const useStackItem = () => useContext(StackItemContext);