@dxos/react-ui-list 0.8.4-main.b97322e → 0.8.4-main.bcb3aa67d6

package/src/components/Tree/Tree.stories.tsx

@@ -2,115 +2,208 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 
-import { live, type Live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { Icon } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
+
+import { Path } from '../../util';
 
+import { type TestItem, createTree, updateState } from './testing';
 import { Tree } from './Tree';
+import { type TreeModel } from './TreeContext';
 import { type TreeData } from './TreeItem';
-import { createTree, updateState, type TestItem } from './testing';
-import { Path } from '../../util';
 
 faker.seed(1234);
 
-const tree = live<TestItem>(createTree());
-const state = new Map<string, Live<{ open: boolean; current: boolean }>>();
+const tree = createTree() as TestItem;
 
-const meta: Meta<typeof Tree<TestItem>> = {
-  title: 'ui/react-ui-list/Tree',
-  component: Tree,
-  decorators: [withTheme, withLayout()],
-  render: (args) => {
-    useEffect(() => {
-      return monitorForElements({
-        canMonitor: ({ source }) => typeof source.data.id === 'string' && Array.isArray(source.data.path),
-        onDrop: ({ location, source }) => {
-          // Didn't drop on anything.
-          if (!location.current.dropTargets.length) {
-            return;
-          }
+const DefaultStory = ({ draggable }: { draggable?: boolean }) => {
+  const registry = useContext(RegistryContext);
+  const stateAtomsRef = useRef(new Map<string, Atom.Writable<{ open: boolean; current: boolean }>>());
 
-          const target = location.current.dropTargets[0];
+  const getOrCreateStateAtom = useCallback((pathKey: string) => {
+    let atom = stateAtomsRef.current.get(pathKey);
+    if (!atom) {
+      atom = Atom.make({ open: false, current: false }).pipe(Atom.keepAlive);
+      stateAtomsRef.current.set(pathKey, atom);
+    }
+    return atom;
+  }, []);
 
-          const instruction: Instruction | null = extractInstruction(target.data);
-          if (instruction !== null) {
-            updateState({
-              state: tree,
-              instruction,
-              source: source.data as TreeData,
-              target: target.data as TreeData,
-            });
+  // Build a lookup map of all items by ID.
+  const itemMap = useMemo(() => {
+    const map = new Map<string, TestItem>();
+    const walk = (item: TestItem) => {
+      map.set(item.id, item);
+      item.items?.forEach(walk);
+    };
+    walk(tree);
+    return map;
+  }, []);
+
+  // Build a child IDs map keyed by parent ID.
+  const childIdsMap = useMemo(() => {
+    const map = new Map<string, string[]>();
+    const walk = (item: TestItem) => {
+      if (item.items) {
+        map.set(
+          item.id,
+          item.items.map((child) => child.id),
+        );
+        item.items.forEach(walk);
+      }
+    };
+    // Root children.
+    map.set(
+      tree.id,
+      (tree.items ?? []).map((child) => child.id),
+    );
+    walk(tree);
+    return map;
+  }, []);
+
+  const childIdsFamily = useMemo(
+    () => Atom.family((id: string) => Atom.make(() => childIdsMap.get(id) ?? []).pipe(Atom.keepAlive)),
+    [childIdsMap],
+  );
+
+  const itemFamily = useMemo(
+    () => Atom.family((id: string) => Atom.make(() => itemMap.get(id)).pipe(Atom.keepAlive)),
+    [itemMap],
+  );
+
+  const itemPropsFamily = useMemo(
+    () =>
+      Atom.family((pathKey: string) => {
+        const id = pathKey.split('~').pop()!;
+        return Atom.make(() => {
+          const parent = itemMap.get(id);
+          if (!parent) {
+            return { id, label: id };
           }
-        },
-      });
-    }, []);
+          return {
+            id: parent.id,
+            label: parent.name,
+            icon: parent.icon,
+            ...((parent.items?.length ?? 0) > 0 && {
+              parentOf: parent.items!.map(({ id }) => id),
+            }),
+          };
+        }).pipe(Atom.keepAlive);
+      }),
+    [itemMap],
+  );
 
-    return <Tree {...args} />;
-  },
-  args: {
-    id: tree.id,
-    useItems: (testItem?: TestItem) => {
-      return testItem?.items ?? tree.items;
-    },
-    getProps: (testItem: TestItem) => ({
-      id: testItem.id,
-      label: testItem.name,
-      icon: testItem.icon,
-      ...((testItem.items?.length ?? 0) > 0 && {
-        parentOf: testItem.items!.map(({ id }) => id),
+  const itemOpenFamily = useMemo(
+    () =>
+      Atom.family((pathKey: string) => {
+        const stateAtom = getOrCreateStateAtom(pathKey);
+        return Atom.make((get) => get(stateAtom).open).pipe(Atom.keepAlive);
       }),
+    [getOrCreateStateAtom],
+  );
+
+  const itemCurrentFamily = useMemo(
+    () =>
+      Atom.family((pathKey: string) => {
+        const stateAtom = getOrCreateStateAtom(pathKey);
+        return Atom.make((get) => get(stateAtom).current).pipe(Atom.keepAlive);
+      }),
+    [getOrCreateStateAtom],
+  );
+
+  const model: TreeModel<TestItem> = useMemo(
+    () => ({
+      childIds: (parentId?: string) => childIdsFamily(parentId ?? tree.id),
+      item: (id: string) => itemFamily(id),
+      itemProps: (path: string[]) => itemPropsFamily(path.join('~')),
+      itemOpen: (path: string[]) => itemOpenFamily(Path.create(...path)),
+      itemCurrent: (path: string[]) => itemCurrentFamily(Path.create(...path)),
     }),
-    isOpen: (_path: string[]) => {
-      const path = Path.create(..._path);
-      const object = state.get(path) ?? live({ open: false, current: false });
-      if (!state.has(path)) {
-        state.set(path, object);
-      }
+    [childIdsFamily, itemFamily, itemPropsFamily, itemOpenFamily, itemCurrentFamily],
+  );
 
-      return object.open;
+  const handleOpenChange = useCallback(
+    ({ path: pathProp, open }: { path: string[]; open: boolean }) => {
+      const path = Path.create(...pathProp);
+      const atom = getOrCreateStateAtom(path);
+      const prev = registry.get(atom);
+      registry.set(atom, { ...prev, open });
     },
-    isCurrent: (_path: string[]) => {
-      const path = Path.create(..._path);
-      const object = state.get(path) ?? live({ open: false, current: false });
-      if (!state.has(path)) {
-        state.set(path, object);
-      }
+    [getOrCreateStateAtom, registry],
+  );
 
-      return object.current;
+  const handleSelect = useCallback(
+    ({ path: pathProp, current }: { path: string[]; current: boolean }) => {
+      const path = Path.create(...pathProp);
+      const atom = getOrCreateStateAtom(path);
+      const prev = registry.get(atom);
+      registry.set(atom, { ...prev, current });
     },
-    renderColumns: () => {
-      return (
+    [getOrCreateStateAtom, registry],
+  );
+
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => typeof source.data.id === 'string' && Array.isArray(source.data.path),
+      onDrop: ({ location, source }) => {
+        if (!location.current.dropTargets.length) {
+          return;
+        }
+
+        const target = location.current.dropTargets[0];
+        const instruction: Instruction | null = extractInstruction(target.data);
+        if (instruction !== null) {
+          updateState({
+            state: tree,
+            instruction,
+            source: source.data as TreeData,
+            target: target.data as TreeData,
+          });
+        }
+      },
+    });
+  }, []);
+
+  return (
+    <Tree
+      model={model}
+      id={tree.id}
+      rootId={tree.id}
+      draggable={draggable}
+      renderColumns={() => (
         <div className='flex items-center'>
-          <Icon icon='ph--placeholder--regular' size={5} />
+          <Icon icon='ph--placeholder--regular' />
         </div>
-      );
-    },
-    onOpenChange: ({ path: _path, open }) => {
-      const path = Path.create(..._path);
-      const object = state.get(path);
-      object!.open = open;
-    },
-    onSelect: ({ path: _path, current }) => {
-      const path = Path.create(..._path);
-      const object = state.get(path);
-      object!.current = current;
-    },
-  },
+      )}
+      onOpenChange={handleOpenChange}
+      onSelect={handleSelect}
+    />
+  );
 };
 
+const meta = {
+  title: 'ui/react-ui-list/Tree',
+
+  decorators: [withTheme(), withRegistry],
+  component: Tree,
+  render: DefaultStory,
+} satisfies Meta<typeof Tree<TestItem>>;
+
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof DefaultStory>;
+
+export const Default: Story = {};
 
-export const Draggable: StoryObj<typeof Tree> = {
+export const Draggable: Story = {
   args: {
     draggable: true,
   },

package/src/components/Tree/Tree.tsx

@@ -1,68 +1,71 @@
 //
 // Copyright 2024 DXOS.org
-//
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React, { useMemo } from 'react';
 
-import { type HasId } from '@dxos/echo-schema';
 import { Treegrid, type TreegridRootProps } from '@dxos/react-ui';
 
-import { type TreeContextType, TreeProvider } from './TreeContext';
-import { TreeItem, type TreeItemProps } from './TreeItem';
+import { type TreeModel, TreeProvider } from './TreeContext';
+import { TreeItemById, type TreeItemByIdProps, type TreeItemProps } from './TreeItem';
 
-export type TreeProps<T extends HasId = any, O = any> = {
-  root?: T;
+export type TreeProps<T extends { id: string } = any> = {
+  model: TreeModel<T>;
+  rootId?: string;
   path?: string[];
   id: string;
-} & TreeContextType<T, O> &
-  Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
-  Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect' | 'levelOffset'>;
+} & Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
+  Pick<
+    TreeItemProps<T>,
+    | 'draggable'
+    | 'renderColumns'
+    | 'blockInstruction'
+    | 'canDrop'
+    | 'canSelect'
+    | 'onOpenChange'
+    | 'onSelect'
+    | 'onItemHover'
+    | 'levelOffset'
+  >;
 
-export const Tree = <T extends HasId = any, O = any>({
-  root,
+export const Tree = <T extends { id: string } = any>({
+  model,
+  rootId,
   path,
   id,
-  useItems,
-  getProps,
-  isOpen,
-  isCurrent,
   draggable = false,
   gridTemplateColumns = '[tree-row-start] 1fr min-content [tree-row-end]',
   classNames,
   levelOffset,
   renderColumns,
+  blockInstruction,
   canDrop,
+  canSelect,
   onOpenChange,
   onSelect,
-}: TreeProps<T, O>) => {
-  const context = useMemo(
-    () => ({
-      useItems,
-      getProps,
-      isOpen,
-      isCurrent,
-    }),
-    [useItems, getProps, isOpen, isCurrent],
-  );
-  const items = useItems(root);
+  onItemHover,
+}: TreeProps<T>) => {
+  const childIds = useAtomValue(model.childIds(rootId));
   const treePath = useMemo(() => (path ? [...path, id] : [id]), [id, path]);
 
+  const childProps: Omit<TreeItemByIdProps, 'id' | 'last'> = {
+    path: treePath,
+    levelOffset,
+    draggable,
+    renderColumns,
+    blockInstruction,
+    canDrop,
+    canSelect,
+    onOpenChange,
+    onSelect,
+    onItemHover,
+  };
+
   return (
     <Treegrid.Root gridTemplateColumns={gridTemplateColumns} classNames={classNames}>
-      <TreeProvider value={context}>
-        {items.map((item, index) => (
-          <TreeItem
-            key={item.id}
-            item={item}
-            last={index === items.length - 1}
-            path={treePath}
-            levelOffset={levelOffset}
-            draggable={draggable}
-            renderColumns={renderColumns}
-            canDrop={canDrop}
-            onOpenChange={onOpenChange}
-            onSelect={onSelect}
-          />
+      <TreeProvider value={model}>
+        {childIds.map((childId, index) => (
+          <TreeItemById key={childId} id={childId} last={index === childIds.length - 1} {...childProps} />
         ))}
       </TreeProvider>
     </Treegrid.Root>

package/src/components/Tree/TreeContext.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Atom } from '@effect-atom/atom-react';
 import { createContext, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
@@ -11,21 +12,32 @@ export type TreeItemDataProps = {
   id: string;
   label: Label;
   parentOf?: string[];
-  icon?: string;
-  disabled?: boolean;
+  /** When `false`, the item cannot be dragged (overrides tree-level `draggable`). */
+  draggable?: boolean;
+  /** When `false`, the item does not participate as a drop target. */
+  droppable?: boolean;
   className?: string;
   headingClassName?: string;
+  icon?: string;
+  iconHue?: string;
+  disabled?: boolean;
   testId?: string;
 };
 
-export type TreeContextType<T = any, O = any> = {
-  useItems: (parent?: T, options?: O) => T[];
-  getProps: (item: T, parent: string[]) => TreeItemDataProps;
-  isOpen: (path: string[], item: T) => boolean;
-  isCurrent: (path: string[], item: T) => boolean;
-};
+export interface TreeModel<T extends { id: string } = any> {
+  /** Atom family: resolve item by ID (content). */
+  item: (id: string) => Atom.Atom<T | undefined>;
+  /** Atom family: open state keyed by path. */
+  itemOpen: (path: string[]) => Atom.Atom<boolean>;
+  /** Atom family: current (selected) state keyed by path. */
+  itemCurrent: (path: string[]) => Atom.Atom<boolean>;
+  /** Atom family: display props for an item at a given path (path includes item's own ID at end). */
+  itemProps: (path: string[]) => Atom.Atom<TreeItemDataProps>;
+  /** Atom family: outbound child IDs for a parent ID (topology). Undefined = root. */
+  childIds: (parentId?: string) => Atom.Atom<string[]>;
+}
 
-const TreeContext = createContext<null | TreeContextType>(null);
+const TreeContext = createContext<TreeModel | null>(null);
 
 export const TreeProvider = TreeContext.Provider;