@dxos/react-ui-mosaic 0.8.4-main.bc674ce → 0.8.4-main.c85a9c8dae

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-mosaic",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.c85a9c8dae",
   "description": "Modular UI components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -19,6 +19,12 @@
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
+    "./playwright": {
+      "source": "./src/playwright/index.ts",
+      "types": "./dist/types/src/playwright/index.d.ts",
+      "browser": "./dist/lib/browser/playwright/index.mjs",
+      "node": "./dist/lib/node-esm/playwright/index.mjs"
+    },
     "./testing": {
       "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts",
@@ -28,7 +34,14 @@
   },
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
-    "*": {}
+    "*": {
+      "playwright": [
+        "dist/types/src/playwright/index.d.ts"
+      ],
+      "testing": [
+        "dist/types/src/testing/index.d.ts"
+      ]
+    }
   },
   "files": [
     "dist",
@@ -49,42 +62,44 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "@tanstack/react-virtual": "^3.13.18",
     "bind-event-listener": "^3.0.0",
-    "overlayscrollbars": "^2.13.0",
-    "overlayscrollbars-react": "^0.5.6",
-    "@dxos/async": "0.8.4-main.bc674ce",
-    "@dxos/echo": "0.8.4-main.bc674ce",
-    "@dxos/invariant": "0.8.4-main.bc674ce",
-    "@dxos/keys": "0.8.4-main.bc674ce",
-    "@dxos/log": "0.8.4-main.bc674ce",
-    "@dxos/react-client": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-dnd": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce"
+    "@dxos/async": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo": "0.8.4-main.c85a9c8dae",
+    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
+    "@dxos/keys": "0.8.4-main.c85a9c8dae",
+    "@dxos/log": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-client": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-menu": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-dnd": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
+    "@dxos/util": "0.8.4-main.c85a9c8dae"
   },
   "devDependencies": {
+    "@effect-atom/atom-react": "^0.5.0",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.bc674ce",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.bc674ce",
-    "@dxos/schema": "0.8.4-main.bc674ce",
-    "@dxos/storybook-utils": "0.8.4-main.bc674ce",
-    "@dxos/test-utils": "0.8.4-main.bc674ce",
-    "@dxos/types": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "vite": "^7.1.11",
+    "@dxos/echo-atom": "0.8.4-main.c85a9c8dae",
+    "@dxos/random": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/schema": "0.8.4-main.c85a9c8dae",
+    "@dxos/test-utils": "0.8.4-main.c85a9c8dae",
+    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
+    "@dxos/types": "0.8.4-main.c85a9c8dae"
   },
   "peerDependencies": {
-    "effect": "3.19.11",
+    "@effect-atom/atom-react": "^0.5.0",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/random": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce",
-    "@dxos/react-ui": "0.8.4-main.bc674ce"
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/random": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Board/Board.stories.tsx

@@ -0,0 +1,273 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useContext, useMemo } from 'react';
+import { expect, within } from 'storybook/test';
+
+import { type Database, Filter, Obj, Ref } from '@dxos/echo';
+import { AtomObj, AtomQuery } from '@dxos/echo-atom';
+import { invariant } from '@dxos/invariant';
+import { faker } from '@dxos/random';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
+import { mx } from '@dxos/ui-theme';
+
+import { useEventHandlerAdapter } from '../../hooks';
+import { TestColumn, TestItem } from '../../testing';
+import { translations } from '../../translations';
+import { Focus } from '../Focus';
+import { Mosaic, type MosaicEventHandler } from '../Mosaic';
+
+import { Board, type BoardModel } from './Board';
+import { DefaultBoardColumn } from './Column';
+
+faker.seed(999);
+
+const randomItems = () => faker.number.int({ min: 0, max: 20 });
+
+const createTestData = (db: Database.Database, columns: number, items?: (column: number) => number) => {
+  Array.from({ length: columns }).forEach((_, i) => {
+    db.add(
+      Obj.make(TestColumn, {
+        name: `Column ${i}`,
+        items: Array.from({ length: items?.(i) ?? 0 }).map((_, j) => {
+          const item = db.add(
+            Obj.make(TestItem, {
+              name: faker.lorem.sentence(3),
+              description: faker.lorem.paragraph(1),
+              label: `${String.fromCharCode(65 + i)}-${j}`,
+            }),
+          );
+
+          return Ref.make(item);
+        }),
+      }),
+    );
+  });
+};
+
+type StoryProps = {
+  columns?: number;
+  items?: (column: number) => number;
+  debug?: boolean;
+};
+
+type TestBoardModelResult = {
+  model: BoardModel<TestColumn, TestItem>;
+  eventHandler: MosaicEventHandler<TestColumn>;
+};
+
+const useTestBoardModel = (): TestBoardModelResult => {
+  const { space } = useClientStory();
+  const registry = useContext(RegistryContext);
+
+  const { model, orderedColumnsAtom, orderAtom } = useMemo(() => {
+    const getColumnId = (data: TestColumn) => data.id;
+    const getItemId = (data: TestItem) => data.id;
+
+    // In-memory column order (ids only). Empty until the user first reorders; then persist drag/drop order.
+    const orderAtom = Atom.make<string[]>([]);
+
+    // Source of truth for which columns exist; subscribed to ECHO query.
+    const columnsAtom =
+      space?.db != null ? AtomQuery.make(space.db, Filter.type(TestColumn)) : Atom.make<TestColumn[]>([]);
+
+    // If orderAtom is empty, use Echo order as-is; else sort by orderAtom and append new columns.
+    const orderedColumnsAtom = Atom.make((get) => {
+      const cols = get(columnsAtom);
+      const order = get(orderAtom);
+      if (order.length === 0) return cols;
+      const byId = new Map(cols.map((column) => [getColumnId(column), column]));
+      const ordered = order.map((id) => byId.get(id)).filter((column): column is TestColumn => column != null);
+      const appended = cols.filter((column) => !order.includes(getColumnId(column)));
+      return [...ordered, ...appended];
+    });
+
+    const itemsAtomFamily =
+      space?.db != null
+        ? Atom.family((column: TestColumn) =>
+            Atom.make((get) => {
+              const refs = get(AtomObj.makeProperty(column, 'items'));
+              return (
+                refs
+                  ?.map((ref: Ref.Ref<TestItem>) => get(AtomObj.makeWithReactive(ref)))
+                  .filter((item): item is TestItem => item != null) ?? []
+              );
+            }),
+          )
+        : Atom.family((_column: TestColumn) => Atom.make<TestItem[]>([]));
+
+    const model = {
+      getColumnId,
+      getItemId,
+      isColumn: (obj: unknown): obj is TestColumn => Obj.isObject(obj) && Obj.instanceOf(TestColumn, obj),
+      isItem: (obj: unknown): obj is TestItem => Obj.isObject(obj) && Obj.instanceOf(TestItem, obj),
+      columns: orderedColumnsAtom,
+      items: (column: TestColumn) => itemsAtomFamily(column),
+      getColumns: () => registry.get(orderedColumnsAtom),
+      getItems: (column: TestColumn) => registry.get(itemsAtomFamily(column)),
+      onItemCreate: async (column: TestColumn) => {
+        invariant(space);
+        const item = space.db.add(
+          Obj.make(TestItem, {
+            name: faker.lorem.sentence(3),
+            description: faker.lorem.paragraph(1),
+          }),
+        );
+
+        Obj.change(column, (column) => {
+          column.items.push(Ref.make(item));
+        });
+
+        return item;
+      },
+      onItemDelete: (column: TestColumn, current: TestItem) => {
+        Obj.change(column, (mutableColumn) => {
+          if (!mutableColumn.items) {
+            return;
+          }
+          const idx = mutableColumn.items.findIndex((ref: Ref.Ref<TestItem>) => ref.target?.id === current?.id);
+          if (idx !== -1) {
+            mutableColumn.items.splice(idx, 1);
+          }
+        });
+      },
+    } satisfies BoardModel<TestColumn, TestItem>;
+
+    return { model, orderedColumnsAtom, orderAtom };
+  }, [space?.db, registry]);
+
+  const orderedColumns = useAtomValue(model.columns);
+  const eventHandler = useEventHandlerAdapter<TestColumn, TestColumn>({
+    id: 'board',
+    items: orderedColumns,
+    getId: model.getColumnId,
+    get: (data) => data,
+    make: (object) => object,
+    canDrop: ({ source }) => model.isColumn(source.data),
+    // On drag/drop, adapter mutates a copy of the list; we write the new order into orderAtom so it persists in memory.
+    onChange: (mutate) => {
+      const current = registry.get(orderedColumnsAtom);
+      const next = [...current];
+      mutate(next);
+      registry.set(
+        orderAtom,
+        next.map((column) => model.getColumnId(column)),
+      );
+    },
+  });
+
+  return { model, eventHandler };
+};
+
+const DefaultStory = ({ debug = false }: StoryProps) => {
+  const { model, eventHandler } = useTestBoardModel();
+  const columns = useAtomValue(model.columns);
+
+  if (columns.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <Mosaic.Root asChild debug={debug}>
+      <div role='none' className={mx('grid md:p-2 overflow-hidden', debug && 'grid-cols-[1fr_20rem] gap-2')}>
+        <Board.Root model={model}>
+          <Board.Content id='board' debug={debug} eventHandler={eventHandler} Tile={DefaultBoardColumn} />
+        </Board.Root>
+        {debug && (
+          <Focus.Group classNames='flex flex-col gap-2 overflow-hidden'>
+            <Board.Debug classNames='p-2' />
+          </Focus.Group>
+        )}
+      </div>
+    </Mosaic.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-mosaic/Board',
+  render: DefaultStory,
+  decorators: [
+    withRegistry,
+    withTheme({ platform: 'desktop' }),
+    withLayout({ layout: 'fullscreen' }),
+    withClientProvider({
+      types: [TestColumn, TestItem],
+      createIdentity: true,
+      createSpace: true,
+      onCreateSpace: ({ space }, context) => {
+        const args = context.args as StoryProps;
+        createTestData(space.db, args.columns ?? 0, args.items);
+      },
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+  argTypes: {
+    columns: {
+      control: 'number',
+    },
+    debug: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    columns: 8,
+    items: randomItems,
+  },
+};
+
+export const SingleColumn: Story = {
+  args: {
+    columns: 1,
+    items: () => 1,
+  },
+};
+
+export const Empty: Story = {};
+
+export const EmptyColumn: Story = {
+  args: {
+    columns: 1,
+  },
+};
+
+export const Debug: Story = {
+  args: {
+    debug: true,
+    columns: 2,
+  },
+};
+
+export const Spec: Story = {
+  args: {
+    columns: 3,
+    items: (column) => (column < 2 ? 5 : 0),
+  },
+  play: async () => {
+    const body = within(document.body);
+    const columns = await body.findAllByTestId('board-column', undefined, { timeout: 30_000 });
+    await expect(columns).toHaveLength(3);
+
+    // First two columns have items, third is empty.
+    for (const column of columns.slice(0, 2)) {
+      const items = within(column).queryAllByTestId('board-item');
+      await expect(items.length).toBeGreaterThan(0);
+    }
+    const items = within(columns[2]).queryAllByTestId('board-item');
+    await expect(items).toHaveLength(0);
+  },
+};

package/src/components/Board/Board.tsx

@@ -0,0 +1,191 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Atom, useAtomValue } from '@effect-atom/atom-react';
+import { createContext } from '@radix-ui/react-context';
+import React, {
+  type PropsWithChildren,
+  type ReactElement,
+  type Ref as ReactRef,
+  forwardRef,
+  useRef,
+  useState,
+} from 'react';
+
+import { ScrollArea, type ThemedClassName } from '@dxos/react-ui';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/ui-theme';
+
+import { useContainerDebug } from '../../hooks';
+import { Focus } from '../Focus';
+import {
+  type GetId,
+  Mosaic,
+  type MosaicEventHandler,
+  type MosaicPlaceholderProps,
+  type MosaicStackProps,
+  mosaicStyles,
+  useMosaic,
+} from '../Mosaic';
+
+import { BoardColumn, type BoardColumnProps, DefaultBoardColumn, useBoardColumn } from './Column';
+import { BoardItem, type BoardItemProps } from './Item';
+
+//
+// Model
+//
+
+export interface BoardModel<TColumn = any, TItem = any> {
+  getColumnId: GetId<TColumn>;
+  getItemId: GetId<TItem>;
+  isColumn: (obj: unknown) => obj is TColumn;
+  isItem: (obj: unknown) => obj is TItem;
+  columns: Atom.Atom<readonly TColumn[] | TColumn[]>;
+  items: (column: TColumn) => Atom.Atom<TItem[]>;
+  getColumns: () => TColumn[];
+  getItems: (column: TColumn) => TItem[];
+  onColumnCreate?: () => Promise<TColumn>;
+  onColumnDelete?: (column: TColumn) => void;
+  onItemCreate?: (column: TColumn) => Promise<TItem>;
+  onItemDelete?: (column: TColumn, item: TItem) => void;
+}
+
+//
+// Context
+//
+
+const BOARD_NAME = 'Board';
+
+type BoardContextValue<TColumn = any, TItem = any> = {
+  model: BoardModel<TColumn, TItem>;
+};
+
+const [BoardContextProvider, useBoardContext] = createContext<BoardContextValue>(BOARD_NAME);
+
+/** Hook to read the board model from context (e.g. in custom column tiles). Pass TColumn and TItem for typed model. */
+function useBoard<TColumn = any, TItem = any>(displayName?: string): BoardContextValue<TColumn, TItem> {
+  return useBoardContext(displayName ?? BOARD_NAME) as BoardContextValue<TColumn, TItem>;
+}
+
+//
+// Root
+//
+
+const BOARD_ROOT_NAME = 'Board.Root';
+
+type BoardRootProps<TColumn = any, TItem = any> = PropsWithChildren<BoardContextValue<TColumn, TItem>>;
+
+const BoardRootInner = ({ model, children }: BoardRootProps) => {
+  return <BoardContextProvider model={model}>{children}</BoardContextProvider>;
+};
+
+BoardRootInner.displayName = BOARD_ROOT_NAME;
+
+const BoardRoot = BoardRootInner as <TColumn = any, TItem = any>(props: BoardRootProps<TColumn, TItem>) => ReactElement;
+
+//
+// Content
+//
+
+const BOARD_CONTENT_NAME = 'Board.Content';
+
+type BoardContentProps<TColumn = any> = ThemedClassName<{
+  id: string;
+  debug?: boolean;
+  eventHandler?: MosaicEventHandler<TColumn>;
+  Tile?: MosaicStackProps<TColumn>['Tile'];
+}>;
+
+const BoardContentInner = forwardRef<HTMLDivElement, BoardContentProps>(
+  ({ classNames, id: _id, debug, eventHandler, Tile = DefaultBoardColumn }, forwardedRef) => {
+    const { model } = useBoardContext(BOARD_CONTENT_NAME);
+    const [DebugInfo, debugHandler] = useContainerDebug(debug);
+    const [viewport, setViewport] = useState<HTMLElement | null>(null);
+
+    const items = useAtomValue(model.columns);
+
+    return (
+      <div ref={forwardedRef} className={mx('flex h-full w-full overflow-hidden', classNames)}>
+        <Focus.Group asChild orientation='horizontal'>
+          <Mosaic.Container
+            asChild
+            withFocus
+            orientation='horizontal'
+            autoScroll={viewport}
+            eventHandler={eventHandler}
+            debug={debugHandler}
+          >
+            <ScrollArea.Root orientation='horizontal' classNames='md:pt-3' margin padding>
+              <ScrollArea.Viewport classNames='snap-mandatory snap-x md:snap-none' ref={setViewport}>
+                <Mosaic.Stack items={items} getId={model.getColumnId} Tile={Tile} debug={debug} />
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
+          </Mosaic.Container>
+        </Focus.Group>
+        <DebugInfo />
+      </div>
+    );
+  },
+);
+
+BoardContentInner.displayName = BOARD_CONTENT_NAME;
+
+const BoardContent = BoardContentInner as <TColumn = any>(
+  props: BoardContentProps<TColumn> & { ref?: ReactRef<HTMLDivElement> },
+) => ReactElement;
+
+//
+// Placeholder
+//
+
+const BOARD_PLACEHOLDER_NAME = 'Board.Placeholder';
+
+const BoardPlaceholder = (props: MosaicPlaceholderProps<number>) => {
+  return (
+    <Mosaic.Placeholder {...props} classNames={mosaicStyles.placeholder.root}>
+      <div
+        className={mx('flex h-full border border-dashed border-separator rounded-xs', mosaicStyles.placeholder.content)}
+      />
+    </Mosaic.Placeholder>
+  );
+};
+
+BoardPlaceholder.displayName = BOARD_PLACEHOLDER_NAME;
+
+//
+// Debug
+//
+
+const BOARD_DEBUG_NAME = 'Board.Debug';
+
+export const BoardDebug = forwardRef<HTMLDivElement, ThemedClassName>(({ classNames }, forwardedRef) => {
+  const { containers, dragging } = useMosaic(BOARD_DEBUG_NAME);
+  const counter = useRef(0);
+  return (
+    <Json
+      data={{ containers, dragging, count: counter.current++ }}
+      classNames={mx('text-xs', classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+BoardDebug.displayName = BOARD_DEBUG_NAME;
+
+//
+// Board
+//
+
+export const Board = {
+  Root: BoardRoot,
+  Content: BoardContent,
+  Column: BoardColumn,
+  Item: BoardItem,
+  Placeholder: BoardPlaceholder,
+  Debug: BoardDebug,
+};
+
+export { useBoard, useBoardColumn };
+
+export type { BoardRootProps, BoardContentProps, BoardColumnProps, BoardItemProps };