@dxos/react-ui-mosaic 0.3.3-main.3ce60d4

package/src/views/Kanban/testing.tsx

@@ -0,0 +1,231 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plus } from '@phosphor-icons/react';
+import React, { type FC, useRef, useState } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { type PublicKey } from '@dxos/react-client';
+import { Schema, type TypedObject, useQuery, useSpace } from '@dxos/react-client/echo';
+import { Button, Select, Toolbar } from '@dxos/react-ui';
+import { arrayMove } from '@dxos/util';
+
+import { Kanban, type KanbanColumn, type KanbanProps } from './Kanban';
+import { Mosaic, type MosaicDropEvent, Path, swapItems } from '../../mosaic';
+import { TestObjectGenerator, SimpleCard, Priority, Status, type TestItem } from '../../testing';
+
+const createKanban = ({ types, columns = 3 }: { types?: string[]; columns?: number }) => {
+  const generator = new TestObjectGenerator({ types });
+  return Array.from({ length: columns }).map((_, i) => ({
+    id: `column-${i}`,
+    title: `Column ${i}`,
+    items: generator.createObjects({ length: 3 + columns - i }),
+  }));
+};
+
+export type DemoKanbanProps = Omit<KanbanProps, 'columns'> & {
+  types?: string[];
+  count?: number;
+  debug?: boolean;
+};
+
+export const DemoKanban: FC<DemoKanbanProps> = ({
+  id = 'kanban',
+  Component = Mosaic.DefaultComponent,
+  types = ['document'],
+  count = 3,
+  debug = false,
+}) => {
+  const [columns, setColumns] = useState<KanbanColumn<TestItem>[]>(() => createKanban({ types, columns: count }));
+
+  // const handleDelete = (id: string) => {
+  //   setItems1((cards) => cards.filter((card) => card.id !== id));
+  // };
+
+  // TODO(burdon): Reconcile with DemoKanban.
+  const handleDrop = ({ active, over }: MosaicDropEvent<number>) => {
+    // Reorder columns.
+    // TODO(burdon): Buggy dragging empty column.
+    if (active.path === Path.create(id, active.item.id)) {
+      return setColumns((columns) => [...swapItems(columns, active.item, over.item)]);
+    }
+
+    return setColumns((columns) =>
+      columns.map((column) => {
+        const items = [...column.items];
+        if (Path.last(Path.parent(active.path)) === column.id) {
+          // Remove card from current postion.
+          invariant(active.position !== undefined);
+          items.splice(active.position, 1);
+        }
+
+        if (over.path === Path.create(id, column.id)) {
+          // Move card to end of column.
+          items.push(active.item as TestItem);
+        } else if (Path.hasDescendent(id, over.path) && Path.last(Path.parent(over.path)) === column.id) {
+          // Move card within or between columns.
+          const position = over.position ?? items.length;
+          items.splice(position, 0, active.item as TestItem);
+        }
+
+        return { ...column, items };
+      }),
+    );
+  };
+
+  return <Kanban id={id} columns={columns} Component={Component} onDrop={handleDrop} debug={debug} />;
+};
+
+// TODO(burdon): Compute this?
+export const columnValues: { [property: string]: any[] } = {
+  status: ['unknown', ...Status],
+  priority: ['unknown', ...Priority],
+};
+
+export const EchoKanban = ({
+  id,
+  spaceKey,
+  generator,
+  debug,
+}: {
+  id: string;
+  spaceKey: PublicKey;
+  generator: TestObjectGenerator;
+  debug?: boolean;
+}) => {
+  const space = useSpace(spaceKey);
+  // TODO(burdon): Decorator is not re-run schema is empty when returning to story after first run. Different kanban id.
+  const [kanban] = useQuery(space, { type: 'kanban' });
+
+  const getProperty = (property: string) => {
+    const schemaProperty = kanban.schema.props.find((prop: any) => prop.id === kanban.columnProp);
+    if (schemaProperty.type === Schema.PropType.NUMBER) {
+      return parseInt(property);
+    } else {
+      return property;
+    }
+  };
+
+  const objects = useQuery<TypedObject>(space, (object) => object.__schema === kanban.schema, {}, [kanban.schema]);
+  const columns: KanbanColumn<TypedObject>[] = kanban.columnValues.map((value: string) => {
+    const objectPosition = kanban.objectPosition[value] ?? [];
+    const items =
+      objectPosition.length > 0
+        ? objectPosition.map((id: string) => objects.find((object) => object.id === id))
+        : objects;
+
+    // TODO(burdon): Special case for 'unknown' values?
+    return {
+      id: getProperty(value),
+      title: value,
+      items: items.filter((object: TypedObject) => object[kanban.columnProp] === value),
+    };
+  });
+
+  // TODO(burdon): Why ref?
+  const columnsRef = useRef<KanbanColumn<TypedObject>[]>([]);
+  columnsRef.current = columns;
+
+  // TODO(burdon): Called for each object generated (should batch?)
+  // console.log(JSON.stringify(objects[0]));
+
+  // TODO(burdon): Should views maintain an positional index map per property (to enable switching?)
+  // TODO(burdon): Is the current index map making use of ECHO object CRDT? Need multi-peer test in this suite.
+  const handleSetProperty = (property: string) => {
+    kanban.columnProp = property;
+    kanban.columnValues = columnValues[kanban.columnProp];
+  };
+
+  // TODO(burdon): Factor out util.
+  const getOrder = (kanban: TypedObject, property: string) => {
+    // TODO(wittjosiah): Columns is stale here.
+    return (
+      kanban.objectPosition[property] ??
+      columnsRef.current.find((column) => column.id === getProperty(property))?.items.map((item) => item.id) ??
+      []
+    );
+  };
+
+  // TODO(burdon): Currently broken: factor out with demo story.
+  const handleDrop = ({ active, over }: MosaicDropEvent<number>) => {
+    // Reorder columns.
+    // TODO(burdon): Factor out util.
+    if (active.path === Path.create(id, active.item.id)) {
+      // Reorder columns.
+      const fromIndex = kanban.columnValues.findIndex((value: string) => value === active.item.id);
+      const toIndex = kanban.columnValues.findIndex((value: string) => value === over.item.id);
+      fromIndex !== -1 && toIndex !== -1 && arrayMove(kanban.columnValues, fromIndex, toIndex);
+      return;
+    }
+
+    if (Path.hasDescendent(id, active.path)) {
+      const activeProperty = Path.last(Path.parent(active.path));
+      const overProperty = Path.length(over.path) > 2 ? Path.last(Path.parent(over.path)) : Path.last(over.path);
+      invariant(activeProperty);
+      invariant(overProperty);
+
+      // Update property.
+      (active.item as TypedObject)[kanban.columnProp] = getProperty(overProperty);
+
+      // Update active column order.
+      const activeOrder = getOrder(kanban, activeProperty);
+      activeOrder.length > 0 && activeOrder.splice(active.position, 1);
+      kanban.objectPosition[activeProperty] = activeOrder;
+
+      // Update over column order.
+      const overOrder = getOrder(kanban, overProperty);
+      overOrder.length > 0 && Path.length(over.path) === Path.length(active.path)
+        ? overOrder.splice(over.position, 0, active.item.id)
+        : overOrder.push(active.item.id);
+      kanban.objectPosition[overProperty] = overOrder;
+    }
+  };
+
+  const handleAddData = () => {
+    const object = generator.createObject({ types: ['project'] });
+    space?.db.add(object);
+  };
+
+  return (
+    <div className='flex flex-col grow'>
+      <Toolbar.Root classNames='p-2'>
+        <PropertySelector
+          property={kanban.columnProp}
+          properties={Object.keys(columnValues)}
+          onSetProperty={handleSetProperty}
+        />
+        <Button title='Add Data' onClick={handleAddData}>
+          <Plus />
+        </Button>
+      </Toolbar.Root>
+      <Kanban id={id} columns={columns} Component={SimpleCard} onDrop={handleDrop} debug={debug} />
+    </div>
+  );
+};
+
+const PropertySelector: FC<{ property: string; properties: string[]; onSetProperty: (property: string) => void }> = ({
+  property,
+  properties,
+  onSetProperty,
+}) => {
+  return (
+    <Select.Root value={property} onValueChange={onSetProperty}>
+      <Select.TriggerButton placeholder='Select value' />
+      <Select.Portal>
+        <Select.Content>
+          <Select.ScrollUpButton />
+          <Select.Viewport>
+            {properties.map((property) => (
+              <Select.Option key={property} value={property}>
+                {property}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+          <Select.ScrollDownButton />
+          <Select.Arrow />
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};

package/src/views/Stack/Columns.stories.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import React from 'react';
+
+import { Stack } from './Stack';
+import { DemoStack, type DemoStackProps } from './testing';
+import { Mosaic } from '../../mosaic';
+import { FullscreenDecorator, SimpleCard } from '../../testing';
+
+faker.seed(3);
+
+export default {
+  title: 'Views/Stack/Columns',
+  component: Stack,
+  render: (args: DemoStackProps) => {
+    return (
+      <Mosaic.Root debug={args.debug}>
+        <div className='flex grow justify-center p-4'>
+          <div className='grid grid-cols-2 gap-4'>
+            <DemoStack {...args} id='stack-1' />
+            <DemoStack {...args} id='stack-2' />
+          </div>
+        </div>
+        <Mosaic.DragOverlay debug={args.debug} />
+      </Mosaic.Root>
+    );
+  },
+  decorators: [FullscreenDecorator()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Adopt = {
+  args: {
+    Component: SimpleCard,
+    debug: true,
+  },
+};
+
+// TODO(burdon): Should not hide from source while dragging.
+export const Copy = {
+  args: {
+    Component: SimpleCard,
+    debug: true,
+    operation: 'copy',
+  },
+};
+
+export const Reject = {
+  args: {
+    Component: SimpleCard,
+    debug: true,
+    operation: 'reject',
+  },
+};

package/src/views/Stack/Stack.stories.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import React from 'react';
+
+import { Stack, type StackProps } from './Stack';
+import { DemoStack } from './testing';
+import { Mosaic } from '../../mosaic';
+import { ComplexCard, FullscreenDecorator, SimpleCard } from '../../testing';
+
+faker.seed(3);
+
+export default {
+  component: Stack,
+  render: (
+    args: StackProps & {
+      types: string[];
+      count: number;
+    },
+  ) => {
+    return (
+      <Mosaic.Root debug={args.debug}>
+        <Mosaic.DragOverlay />
+        <DemoStack {...args} />
+      </Mosaic.Root>
+    );
+  },
+  decorators: [FullscreenDecorator()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {
+  args: {
+    Component: SimpleCard,
+    count: 8,
+    debug: true,
+  },
+};
+
+export const Horizontal = {
+  args: {
+    Component: ComplexCard,
+    direction: 'horizontal',
+    count: 8,
+    debug: true,
+  },
+};
+
+export const Complex = {
+  args: {
+    Component: ComplexCard,
+    types: ['document', 'image'],
+    count: 8,
+    debug: true,
+  },
+};

package/src/views/Stack/Stack.tsx

@@ -0,0 +1,58 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+
+import { Mosaic, type MosaicContainerProps, type MosaicDataItem, useItemsWithPreview } from '../../mosaic';
+
+export type Direction = 'horizontal' | 'vertical';
+
+export type StackProps<TData extends MosaicDataItem = MosaicDataItem> = MosaicContainerProps<TData, number> & {
+  items?: TData[];
+  direction?: Direction;
+  debug?: boolean;
+};
+
+// TODO(burdon): Make generic (and forwardRef).
+export const Stack = ({
+  id,
+  Component = Mosaic.DefaultComponent,
+  onOver,
+  onDrop,
+  items = [],
+  direction = 'vertical',
+  debug,
+}: StackProps) => {
+  const itemsWithPreview = useItemsWithPreview({ path: id, items });
+
+  return (
+    <div className={mx('flex overflow-hidden', direction === 'vertical' && 'w-[300px]')}>
+      <div
+        className={mx('flex flex-col w-full my-1', direction === 'vertical' ? 'overflow-y-auto' : 'overflow-x-auto')}
+      >
+        <Mosaic.Container {...{ id, Component, onOver, onDrop }}>
+          <Mosaic.SortableContext items={itemsWithPreview} direction={direction}>
+            {itemsWithPreview.map((item, index) => (
+              <Mosaic.SortableTile
+                key={item.id}
+                item={item}
+                path={id}
+                position={index}
+                className='m-1'
+                // debug={debug}
+              />
+            ))}
+          </Mosaic.SortableContext>
+        </Mosaic.Container>
+        {debug && (
+          <div className='grow'>
+            <Mosaic.Debug data={{ id, items: itemsWithPreview.length }} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/views/Stack/index.ts

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

package/src/views/Stack/testing.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { Stack, type StackProps } from './Stack';
+import {
+  type MosaicDataItem,
+  type MosaicDropEvent,
+  type MosaicMoveEvent,
+  type MosaicOperation,
+  Path,
+} from '../../mosaic';
+import { TestObjectGenerator } from '../../testing';
+
+export type DemoStackProps = StackProps & {
+  types?: string[];
+  count?: number;
+  operation?: MosaicOperation;
+};
+
+export const DemoStack = ({
+  id = 'stack',
+  Component,
+  types,
+  count = 8,
+  direction = 'vertical',
+  operation = 'adopt',
+  debug,
+}: DemoStackProps) => {
+  const [items, setItems] = useState<MosaicDataItem[]>(() => {
+    const generator = new TestObjectGenerator({ types });
+    return generator.createObjects({ length: count });
+  });
+
+  const handleOver = ({ active }: MosaicMoveEvent<number>) => {
+    if (operation === 'reject') {
+      return 'reject';
+    }
+
+    const exists = items.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) &&
+        (operation !== 'copy' || over.path === Path.create(id, over.item.id))
+      ) {
+        items.splice(active.position!, 1);
+      }
+      if (over.item && over.path === Path.create(id, over.item.id)) {
+        items.splice(over.position!, 0, active.item);
+      }
+      return [...items];
+    });
+  };
+
+  return (
+    <Stack
+      id={id}
+      Component={Component}
+      onOver={handleOver}
+      onDrop={handleDrop}
+      items={items}
+      direction={direction}
+      debug={debug}
+    />
+  );
+};

package/src/views/Tree/Graph.stories.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import React from 'react';
+
+import { Tree } from './Tree';
+import { GraphTree } from './testing';
+import { Mosaic } from '../../mosaic';
+import { FullscreenDecorator } from '../../testing';
+
+faker.seed(3);
+
+export default {
+  title: 'Views/Tree',
+  component: Tree,
+  render: ({ id = 'tree', debug }: { id: string; debug: boolean }) => {
+    return (
+      <Mosaic.Root debug={debug}>
+        <Mosaic.DragOverlay />
+        <GraphTree id={id} debug={debug} />
+      </Mosaic.Root>
+    );
+  },
+  decorators: [FullscreenDecorator()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Graph = {
+  args: { debug: true },
+};

package/src/views/Tree/Tree.stories.tsx

@@ -0,0 +1,92 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import React from 'react';
+
+import { Tree } from './Tree';
+import { DemoTree, type DemoTreeProps } from './testing';
+import { Mosaic } from '../../mosaic';
+import { FullscreenDecorator, TestObjectGenerator } from '../../testing';
+
+faker.seed(3);
+const generator = new TestObjectGenerator({ types: ['document', 'image'] });
+
+const count = 5;
+
+// TODO(burdon): Move to testing.
+const testItems1 = Array.from({ length: count }).map((_, i) => ({
+  id: `branch-${i}`,
+  label: `Branch ${i}`,
+  children: Array.from({ length: i === count - 1 ? 0 : 5 - i }).map(() => {
+    const item = generator.createObject();
+    return {
+      id: item.id,
+      label: item.title, // TODO(burdon): Lens.
+      children: [],
+    };
+  }),
+}));
+
+const testItems2 = [
+  {
+    id: 'Home',
+    children: [],
+  },
+  {
+    id: 'Collections',
+    children: [
+      { id: 'Spring', children: [] },
+      { id: 'Summer', children: [] },
+      { id: 'Fall', children: [] },
+      { id: 'Winter', children: [] },
+    ],
+  },
+  {
+    id: 'About Us',
+    children: [],
+  },
+  {
+    id: 'My Account',
+    children: [
+      { id: 'Addresses', children: [] },
+      {
+        id: 'Order History',
+        children: [
+          { id: 'Order 1', children: [] },
+          { id: 'Order 2', children: [] },
+          { id: 'Order 3', children: [] },
+        ],
+      },
+      { id: 'Payment Methods', children: [] },
+      { id: 'Account Details', children: [] },
+    ],
+  },
+];
+
+export default {
+  component: Tree,
+  render: (args: DemoTreeProps) => {
+    return (
+      <Mosaic.Root debug={args.debug}>
+        <Mosaic.DragOverlay />
+        <DemoTree {...args} />
+      </Mosaic.Root>
+    );
+  },
+  decorators: [FullscreenDecorator()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {
+  args: { initialItems: testItems1, debug: true },
+};
+
+export const Deep = {
+  args: { initialItems: testItems2 },
+};