@dxos/react-ui-list 0.6.12-main.ac23639

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@dxos/react-ui-list",
+  "version": "0.6.12-main.ac23639",
+  "description": "A list component.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": {
+        "require": "./dist/lib/node/index.cjs",
+        "default": "./dist/lib/node-esm/index.mjs"
+      },
+      "types": "./dist/types/src/index.d.ts"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {}
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-flourish": "^1.1.2",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.3",
+    "@radix-ui/react-context": "^1.0.0",
+    "effect": "^3.9.1",
+    "@dxos/debug": "0.6.12-main.ac23639",
+    "@dxos/echo-schema": "0.6.12-main.ac23639",
+    "@dxos/invariant": "0.6.12-main.ac23639",
+    "@dxos/log": "0.6.12-main.ac23639",
+    "@dxos/react-ui": "0.6.12-main.ac23639",
+    "@dxos/react-ui-theme": "0.6.12-main.ac23639",
+    "@dxos/react-ui-types": "0.6.12-main.ac23639",
+    "@dxos/util": "0.6.12-main.ac23639"
+  },
+  "devDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "5.4.7",
+    "@dxos/random": "0.6.12-main.ac23639",
+    "@dxos/react-ui-theme": "0.6.12-main.ac23639",
+    "@dxos/storybook-utils": "0.6.12-main.ac23639"
+  },
+  "peerDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "effect": "^3.9.1",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/List/DropIndicator.tsx

@@ -0,0 +1,64 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
+import React, { type CSSProperties, type HTMLAttributes } from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+
+type Orientation = 'horizontal' | 'vertical';
+
+const edgeToOrientationMap: Record<Edge, Orientation> = {
+  top: 'horizontal',
+  bottom: 'horizontal',
+  left: 'vertical',
+  right: 'vertical',
+};
+
+const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
+  horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',
+  vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',
+};
+
+const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {
+  top: 'top-[--line-offset] before:top-[--offset-terminal]',
+  right: 'right-[--line-offset] before:right-[--offset-terminal]',
+  bottom: 'bottom-[--line-offset] before:bottom-[--offset-terminal]',
+  left: 'left-[--line-offset] before:left-[--offset-terminal]',
+};
+
+const strokeSize = 2;
+const terminalSize = 8;
+const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
+
+/**
+ * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
+ */
+export const DropIndicator = ({ edge, gap = '0px' }: { edge: Edge; gap?: string }) => {
+  const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;
+
+  const orientation = edgeToOrientationMap[edge];
+
+  return (
+    <div
+      style={
+        {
+          '--line-thickness': `${strokeSize}px`,
+          '--line-offset': `${lineOffset}`,
+          '--terminal-size': `${terminalSize}px`,
+          '--terminal-radius': `${terminalSize / 2}px`,
+          '--negative-terminal-size': `-${terminalSize}px`,
+          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
+        } as CSSProperties
+      }
+      className={mx(
+        'absolute z-10 pointer-events-none bg-blue-700',
+        "before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute",
+        'before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full',
+        orientationStyles[orientation],
+        edgeStyles[edge],
+      )}
+    ></div>
+  );
+};

package/src/components/List/List.stories.tsx

@@ -0,0 +1,108 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React from 'react';
+
+import { create, S } from '@dxos/echo-schema';
+import { ghostHover, mx } from '@dxos/react-ui-theme';
+import { withTheme, withLayout, withSignals } from '@dxos/storybook-utils';
+
+import { List, type ListRootProps } from './List';
+import { createList, TestItemSchema, type TestItemType } from '../../testing';
+
+// TODO(burdon): var-icon-size.
+const grid = 'grid grid-cols-[32px_1fr_32px] min-bs-[2rem] rounded';
+
+const Story = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
+  const handleSelect = (item: TestItemType) => {
+    console.log('select', item);
+  };
+  const handleDelete = (item: TestItemType) => {
+    const idx = items.findIndex((i) => i.id === item.id);
+    items.splice(idx, 1);
+  };
+
+  return (
+    <List.Root<TestItemType> dragPreview items={items} {...props}>
+      {({ items }) => (
+        <>
+          <div className='flex flex-col w-full'>
+            <div role='none' className={grid}>
+              <div />
+              <div className='flex items-center text-sm'>Items</div>
+            </div>
+
+            <div role='list' className='w-full h-full overflow-auto'>
+              {items.map((item) => (
+                <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
+                  <List.ItemDragHandle />
+                  <List.ItemTitle onClick={() => handleSelect(item)}>{item.name}</List.ItemTitle>
+                  <List.ItemDeleteButton onClick={() => handleDelete(item)} />
+                </List.Item>
+              ))}
+            </div>
+
+            <div role='none' className={grid}>
+              <div />
+              <div className='flex items-center text-sm'>{items.length} Items</div>
+            </div>
+          </div>
+
+          <List.ItemDragPreview<TestItemType>>
+            {({ item }) => (
+              <List.ItemWrapper classNames={mx(grid, 'bg-modalSurface border border-separator')}>
+                <List.ItemDragHandle />
+                <div className='flex items-center'>{item.name}</div>
+              </List.ItemWrapper>
+            )}
+          </List.ItemDragPreview>
+        </>
+      )}
+    </List.Root>
+  );
+};
+
+const SimpleStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
+  return (
+    <List.Root<TestItemType> dragPreview items={items} {...props}>
+      {({ items }) => (
+        <div role='list' className='w-full h-full overflow-auto'>
+          {items.map((item) => (
+            <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
+              <List.ItemDragHandle />
+              <List.ItemTitle>{item.name}</List.ItemTitle>
+              <List.ItemDeleteButton />
+            </List.Item>
+          ))}
+        </div>
+      )}
+    </List.Root>
+  );
+};
+
+export default {
+  // TODO(burdon): Storybook collides with react-ui/List.
+  title: 'react-ui-list/List',
+  decorators: [withTheme, withSignals, withLayout({ fullscreen: true })],
+  render: Story,
+};
+
+const list = create(createList(100));
+
+export const Default = {
+  args: {
+    items: list.items,
+    isItem: S.is(TestItemSchema),
+  } satisfies ListRootProps<TestItemType>,
+} as any; // TODO(burdon): TS2742: The inferred type of Default cannot be named without a reference to... (AST)
+
+export const Simple = {
+  render: SimpleStory,
+  args: {
+    items: list.items,
+    isItem: S.is(TestItemSchema),
+  } satisfies ListRootProps<TestItemType>,
+} as any; // TODO(burdon): TS2742: The inferred type of Default cannot be named without a reference to... (AST)

package/src/components/List/List.tsx

@@ -0,0 +1,44 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import {
+  IconButton,
+  type IconButtonProps,
+  ListItem,
+  ListItemDeleteButton,
+  ListItemDragHandle,
+  ListItemDragPreview,
+  type ListItemProps,
+  type ListItemRecord,
+  ListItemTitle,
+  ListItemWrapper,
+} from './ListItem';
+import { ListRoot, type ListRootProps } from './ListRoot';
+
+// TODO(burdon): Multi-select model.
+// TODO(burdon): Key nav.
+// TODO(burdon): Animation.
+// TODO(burdon): Constrain axis.
+// TODO(burdon): Tree view.
+// TODO(burdon): Fix autoscroll while dragging.
+
+/**
+ * Draggable list.
+ * Ref: https://github.com/atlassian/pragmatic-drag-and-drop
+ * Ref: https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/task.tsx
+ */
+export const List = {
+  Root: ListRoot,
+  Item: ListItem,
+  ItemDragPreview: ListItemDragPreview,
+  ItemWrapper: ListItemWrapper,
+  ItemDragHandle: ListItemDragHandle,
+  ItemDeleteButton: ListItemDeleteButton,
+  ItemTitle: ListItemTitle,
+  IconButton,
+};
+
+type ListItem = ListItemRecord;
+
+export type { ListRootProps, ListItemProps, IconButtonProps, ListItem };

package/src/components/List/ListItem.tsx

@@ -0,0 +1,234 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { createContext } from '@radix-ui/react-context';
+import React, {
+  type ComponentProps,
+  type HTMLAttributes,
+  type MutableRefObject,
+  type PropsWithChildren,
+  type ReactNode,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import { invariant } from '@dxos/invariant';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { Icon } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { DropIndicator } from './DropIndicator';
+import { useListContext } from './ListRoot';
+
+export type ListItemRecord = { id: string };
+
+export type ItemState =
+  | {
+      type: 'idle';
+    }
+  | {
+      type: 'preview';
+      container: HTMLElement;
+    }
+  | {
+      type: 'is-dragging';
+    }
+  | {
+      type: 'is-dragging-over';
+      closestEdge: Edge | null;
+    };
+
+export const idle: ItemState = { type: 'idle' };
+
+const stateStyles: { [Key in ItemState['type']]?: HTMLAttributes<HTMLDivElement>['className'] } = {
+  'is-dragging': 'opacity-50',
+};
+
+type ListItemContext<T extends ListItemRecord> = {
+  item: T;
+  dragHandleRef: MutableRefObject<HTMLElement | null>;
+};
+
+/**
+ * Default context defined for ListItemDragPreview, which is defined outside of ListItem.
+ */
+const defaultContext: ListItemContext<any> = {} as any;
+
+const LIST_ITEM_NAME = 'ListItem';
+
+export const [ListItemProvider, useListItemContext] = createContext<ListItemContext<any>>(
+  LIST_ITEM_NAME,
+  defaultContext,
+);
+
+export type ListItemProps<T extends ListItemRecord> = ThemedClassName<
+  PropsWithChildren<{
+    item: T;
+  }>
+>;
+
+/**
+ * Draggable list item.
+ */
+export const ListItem = <T extends ListItemRecord>({ children, classNames, item }: ListItemProps<T>) => {
+  const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const dragHandleRef = useRef<HTMLElement | null>(null);
+  const [state, setState] = useState<ItemState>(idle);
+  useEffect(() => {
+    const element = ref.current;
+    invariant(element);
+    return combine(
+      //
+      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#draggable
+      //
+      draggable({
+        element,
+        dragHandle: dragHandleRef.current!,
+        getInitialData: () => item,
+        onGenerateDragPreview: dragPreview
+          ? ({ nativeSetDragImage, source }) => {
+              const rect = source.element.getBoundingClientRect();
+              setCustomNativeDragPreview({
+                nativeSetDragImage,
+                getOffset: ({ container }) => {
+                  const { height } = container.getBoundingClientRect();
+                  return {
+                    x: 20,
+                    y: height / 2,
+                  };
+                },
+                render: ({ container }) => {
+                  container.style.width = rect.width + 'px';
+                  setState({ type: 'preview', container });
+                  setRootState({ type: 'preview', container, item });
+                },
+              });
+            }
+          : undefined,
+        onDragStart: () => {
+          setState({ type: 'is-dragging' });
+          setRootState({ type: 'is-dragging', item });
+        },
+        onDrop: () => {
+          setState(idle);
+          setRootState(idle);
+        },
+      }),
+
+      //
+      // https://atlassian.design/components/pragmatic-drag-and-drop/core-package/adapters/element/about#drop-target-for-elements
+      //
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) => {
+          return source.element !== element && isItem(source.data);
+        },
+        getData: ({ input }) => {
+          return attachClosestEdge(item, { element, input, allowedEdges: ['top', 'bottom'] });
+        },
+        getIsSticky: () => true,
+        onDragEnter: ({ self }) => {
+          const closestEdge = extractClosestEdge(self.data);
+          setState({ type: 'is-dragging-over', closestEdge });
+        },
+        onDrag: ({ self }) => {
+          const closestEdge = extractClosestEdge(self.data);
+          setState((current) => {
+            if (current.type === 'is-dragging-over' && current.closestEdge === closestEdge) {
+              return current;
+            }
+            return { type: 'is-dragging-over', closestEdge };
+          });
+        },
+        onDragLeave: () => {
+          setState(idle);
+        },
+        onDrop: () => {
+          setState(idle);
+        },
+      }),
+    );
+  }, [item]);
+
+  return (
+    <ListItemProvider item={item} dragHandleRef={dragHandleRef}>
+      <div className='relative'>
+        <div ref={ref} role='listitem' className={mx('flex', classNames, stateStyles[state.type])}>
+          {children}
+        </div>
+        {state.type === 'is-dragging-over' && state.closestEdge && <DropIndicator edge={state.closestEdge} />}
+      </div>
+    </ListItemProvider>
+  );
+};
+
+//
+// List item components
+//
+
+export type IconButtonProps = ThemedClassName<ComponentProps<'button'>> & { icon: string };
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ classNames, icon, ...props }, forwardedRef) => {
+    return (
+      <button ref={forwardedRef} className={mx('flex items-center justify-center', classNames)} {...props}>
+        <Icon icon={icon} classNames='cursor-pointer' size={4} />
+      </button>
+    );
+  },
+);
+
+export const ListItemDeleteButton = ({
+  autoHide = true,
+  classNames,
+  ...props
+}: Omit<IconButtonProps, 'icon'> & { autoHide?: boolean }) => {
+  const { state } = useListContext('DELETE_BUTTON');
+  const disabled = state.type !== 'idle';
+  return (
+    <IconButton
+      icon='ph--x--regular'
+      disabled={disabled}
+      classNames={[classNames, autoHide && disabled && 'hidden']}
+      {...props}
+    />
+  );
+};
+
+export const ListItemDragHandle = () => {
+  const { dragHandleRef } = useListItemContext('DRAG_HANDLE');
+  return <IconButton ref={dragHandleRef as any} icon='ph--dots-six--regular' />;
+};
+
+export const ListItemDragPreview = <T extends ListItemRecord>({
+  children,
+}: {
+  children: ({ item }: { item: T }) => ReactNode;
+}) => {
+  const { state } = useListContext('DRAG_PREVIEW');
+  return state?.type === 'preview' ? createPortal(children({ item: state.item }), state.container) : null;
+};
+
+export const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
+  <div className={mx('flex w-full', classNames)}>{children}</div>
+);
+
+export const ListItemTitle = ({
+  classNames,
+  children,
+  ...props
+}: ThemedClassName<PropsWithChildren<ComponentProps<'div'>>>) => (
+  <div className={mx('flex w-full items-center', classNames)} {...props}>
+    {children}
+  </div>
+);

package/src/components/List/ListRoot.tsx

@@ -0,0 +1,85 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
+import { createContext } from '@radix-ui/react-context';
+import React, { type ReactNode, useEffect, useState } from 'react';
+import { flushSync } from 'react-dom';
+
+import { type ThemedClassName, useControlledValue } from '@dxos/react-ui';
+
+import { type ListItemRecord, idle, type ItemState } from './ListItem';
+
+type ListContext<T extends ListItemRecord> = {
+  isItem: (item: any) => boolean;
+  dragPreview?: boolean;
+  state: ItemState & { item?: T };
+  setState: (state: ItemState & { item?: T }) => void;
+};
+
+const LIST_NAME = 'List';
+
+export const [ListProvider, useListContext] = createContext<ListContext<any>>(LIST_NAME);
+
+export type ListRendererProps<T extends ListItemRecord> = {
+  state: ListContext<T>['state'];
+  items: T[];
+};
+
+export type ListRootProps<T extends ListItemRecord> = ThemedClassName<{
+  children?: (props: ListRendererProps<T>) => ReactNode;
+  items?: T[];
+}> &
+  Pick<ListContext<T>, 'isItem' | 'dragPreview'>;
+
+export const ListRoot = <T extends ListItemRecord>({
+  classNames,
+  children,
+  items: _items = [],
+  isItem,
+  ...props
+}: ListRootProps<T>) => {
+  const [items, setItems] = useControlledValue<T[]>(_items);
+  const [state, setState] = useState<ListContext<T>['state']>(idle);
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => isItem(source.data),
+      onDrop: ({ location, source }) => {
+        const target = location.current.dropTargets[0];
+        if (!target) {
+          return;
+        }
+
+        const sourceData = source.data;
+        const targetData = target.data;
+        if (!isItem(sourceData) || !isItem(targetData)) {
+          return;
+        }
+
+        const sourceIdx = items.findIndex((item) => item.id === sourceData.id);
+        const targetIdx = items.findIndex((item) => item.id === targetData.id);
+        if (targetIdx < 0 || sourceIdx < 0) {
+          return;
+        }
+
+        const closestEdgeOfTarget = extractClosestEdge(targetData);
+        flushSync(() => {
+          setItems(
+            reorderWithEdge({
+              list: items,
+              startIndex: sourceIdx,
+              indexOfTarget: targetIdx,
+              axis: 'vertical',
+              closestEdgeOfTarget,
+            }),
+          );
+        });
+      },
+    });
+  }, [items]);
+
+  return <ListProvider {...{ isItem, state, setState, ...props }}>{children?.({ state, items })}</ListProvider>;
+};

package/src/components/List/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './List';

package/src/components/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './List';

package/src/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './components';

package/src/testing.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { S } from '@dxos/echo-schema';
+import { faker } from '@dxos/random';
+
+export const TestItemSchema = S.Struct({
+  id: S.String,
+  name: S.String,
+});
+
+export type TestItemType = S.Schema.Type<typeof TestItemSchema>;
+
+export const TestList = S.Struct({
+  items: S.mutable(S.Array(TestItemSchema)),
+});
+
+export type TestList = S.Schema.Type<typeof TestList>;
+
+export const createList = (n = 10): TestList => ({
+  items: faker.helpers.multiple(
+    () => ({
+      id: faker.string.uuid(),
+      name: faker.commerce.productName(),
+    }),
+    { count: n },
+  ),
+});