@dxos/react-ui-mosaic 0.3.3-main.6b9536c → 0.3.3-main.6bede4d

package/src/mosaic/hooks/useItemsWithOrigin.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useMosaic } from './useMosaic';
+import { type MosaicDataItem } from '../types';
+import { Path } from '../util';
+
+// TODO(thure): Harmonize this hook signature with its sibling’s.
+export const useItemsWithOrigin = <T extends MosaicDataItem>(path: string, items: T[]) => {
+  const { operation, activeItem, overItem } = useMosaic();
+
+  if (!activeItem || !overItem) {
+    return items;
+  }
+
+  const activeIsChild = Path.hasChild(path, activeItem.path);
+  const overIsChild = Path.hasChild(path, overItem.path);
+
+  if (activeIsChild && !overIsChild && operation !== 'rearrange') {
+    // Change the dnd-id of the origin item that may move to a foreign destination
+    return items.map((item) => {
+      if (item.id === activeItem.item.id) {
+        return { ...item, id: `${item.id}--origin` };
+      } else {
+        return item;
+      }
+    });
+  } else {
+    // Reset items.
+    return items;
+  }
+};

package/src/mosaic/hooks/useItemsWithPreview.ts

@@ -24,7 +24,7 @@ export const useItemsWithPreview = <T extends MosaicDataItem>({ path, items }: {
   const [lastOverParent, setLastOverParent] = useState(overParent);
 
   useEffect(() => {
-    if (operation === 'reject' || operation === 'rearrange' || !activeItem || !overItem) {
+    if (!activeItem || !overItem) {
       setLastOverParent(undefined);
       setItemsWithPreview(items);
       return;
@@ -34,12 +34,17 @@ export const useItemsWithPreview = <T extends MosaicDataItem>({ path, items }: {
       return;
     }
 
-    setLastOverParent(overParent);
-
     const activeIsChild = Path.hasChild(path, activeItem.path);
     const overIsChild = Path.hasChild(path, overItem.path);
     const overSelf = overItem.path === path;
 
+    if (operation === 'reject' || operation === 'rearrange') {
+      setLastOverParent(undefined);
+      setItemsWithPreview(items);
+      return;
+    } else {
+      setLastOverParent(overParent);
+    }
     if (!activeIsChild && overIsChild) {
       // Insert item into sortable.
       setItemsWithPreview((items) => {

package/src/stories/Home.stories.tsx

@@ -0,0 +1,87 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { FullscreenDecorator } from '../testing';
+
+const org = '@dxos-mosaic';
+
+const data = {
+  quote: `"I've written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to ' +
+    'maintain, but the truth is you’re never going to believe me until you actually try it. If you can suppress the ' +
+    'urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other ' +
+    'way." [User]`,
+};
+
+const packages = [
+  {
+    name: `${org}/ui`,
+    description: 'Component primitives.',
+  },
+  {
+    name: `${org}/dnd`,
+    description: 'Drag-and-drop containers and tiles.',
+  },
+  {
+    name: `${org}/echo`,
+    description: 'DXOS ECHO bindings.',
+  },
+  {
+    name: `${org}/editor`,
+    description: 'Rich text editor.',
+  },
+  {
+    name: `${org}/table`,
+    description: 'Blazingly fast virtualized tables.',
+  },
+  {
+    name: `${org}/stack`,
+    description: 'Flexible block editor.',
+  },
+  {
+    name: `${org}/grid`,
+    description: 'Hierarchical and zoomable grid.',
+  },
+];
+
+const Home = () => {
+  return (
+    <div className='flex flex-col w-[800px] bg-white px-16 py-20 gap-4 text-lg font-light'>
+      <b className='text-4xl font-medium text-black'>Mosaic</b>
+      <p>
+        Mosaic is an extensible user interface framework and component library built using{' '}
+        <span className='font-mono text-purple-700'>radix</span> and{' '}
+        <span className='font-mono text-purple-700'>tailwindcss</span>. It enables the rapid development of beautiful
+        data-driven applications.
+      </p>
+      <p>Mosaic is an extensible family of packages, which include:</p>
+      <table>
+        <tbody>
+          {packages.map(({ name, description }) => (
+            <tr key={name}>
+              <td className='font-mono text-purple-700 w-[260px]'>{name}</td>
+              <td>{description}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <br />
+      <h1 className='text-lg flex justify-center font-medium text-blue-700'>Data-drive components, done right.</h1>
+      <p className='px-8'>{data.quote}</p>
+    </div>
+  );
+};
+
+export default {
+  component: Home,
+  decorators: [FullscreenDecorator('flex justify-center bg-[url(/images/bg-mosaic.png)]')],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {};

package/src/testing/decorators.tsx

@@ -12,6 +12,7 @@ import { mx } from '@dxos/react-ui-theme';
 export const FullscreenDecorator = (className?: string): DecoratorFunction<ReactRenderer> => {
   return (Story) => (
     <div className={mx('flex fixed inset-0 overflow-hidden', className)}>
+      {/* TODO(burdon): Remove DensityProvider from generic decorator. */}
       <DensityProvider density='fine'>
         <Story />
       </DensityProvider>

package/src/testing/generator.ts

@@ -2,13 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-// TODO(burdon): Reconcile with @dxos/plugin-debug, @dxos/react-ui/testing.
-
-// TODO(burdon): Bug when adding stale objects to space (e.g., static objects already added in previous story invocation).
+// TODO(burdon): Reconcile with @dxos/echo-generator.
 
 import { faker } from '@faker-js/faker';
 
-import { Schema as SchemaType } from '@dxos/client/echo';
+import { Schema } from '@dxos/client/echo';
 import { Expando, type TypedObject } from '@dxos/echo-schema';
 
 // TODO(burdon): Util.
@@ -17,16 +15,15 @@ export const range = <T>(fn: (i: number) => T | undefined, length: number): T[]
     .map((_, i) => fn(i))
     .filter(Boolean) as T[];
 
-// TODO(burdon): Commit to using ECHO to generate all test data? Or convert from raw data?
 export type TestItem = { id: string; type: string } & Record<string, any>;
 
 type ObjectDataGenerator = {
-  createSchema?: () => SchemaType;
+  createSchema?: () => Schema;
   createData: () => any;
 };
 
 type ObjectFactory<T extends TypedObject> = {
-  schema?: SchemaType; // TODO(burdon): Support both typed and expando schema.
+  schema?: Schema; // TODO(burdon): Support both typed and expando schema.
   createObject: () => T;
 };
 
@@ -44,7 +41,7 @@ const createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {
 export const Status = ['pending', 'active', 'done'];
 export const Priority = [1, 2, 3, 4, 5];
 
-export const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
+const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
   document: {
     createData: () => ({
       title: faker.lorem.sentence(3),
@@ -62,23 +59,23 @@ export const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
 
   project: {
     createSchema: () =>
-      new SchemaType({
+      new Schema({
         props: [
           {
             id: 'title',
-            type: SchemaType.PropType.STRING,
+            type: Schema.PropType.STRING,
           },
           {
             id: 'repo',
-            type: SchemaType.PropType.STRING,
+            type: Schema.PropType.STRING,
           },
           {
             id: 'status',
-            type: SchemaType.PropType.STRING,
+            type: Schema.PropType.STRING,
           },
           {
             id: 'priority',
-            type: SchemaType.PropType.NUMBER,
+            type: Schema.PropType.NUMBER,
           },
         ],
       }),
@@ -106,7 +103,7 @@ export class TestObjectGenerator {
       }, {});
   }
 
-  get schema(): SchemaType[] {
+  get schema(): Schema[] {
     return Object.values(this.factories).map((f) => f.schema!);
   }
 

package/src/testing/index.ts

@@ -4,6 +4,5 @@
 
 export * from './decorators';
 export * from './generator';
-export * from './next-fractional-index';
 
 export * from './Cards';

package/src/views/Grid/Grid.tsx

@@ -52,8 +52,8 @@ type GridOptions = {
 
 const defaultGridOptions: GridOptions = {
   size: { x: 8, y: 8 },
-  cellBounds: { width: 280, height: 280 },
-  spacing: 8,
+  cellBounds: { width: 272, height: 272 },
+  spacing: 6,
 };
 
 //
@@ -90,6 +90,7 @@ export const Grid = ({
   Component = Mosaic.DefaultComponent,
   className,
   onDrop,
+  onOver,
   onSelect,
   onCreate,
   onAction,
@@ -155,6 +156,7 @@ export const Grid = ({
         getOverlayProps: () => ({ grow: true }),
         getOverlayStyle: () => getDimension(cellBounds, options.spacing),
         onDrop,
+        onOver,
       }}
     >
       <div className={mx('flex grow overflow-auto', className)}>

package/src/views/Kanban/Kanban.tsx

@@ -51,7 +51,7 @@ export const Kanban = ({
         // Restrict to objects from other columns.
         // TODO(burdon): Consider objects from other containers.
         // TODO(wittjosiah): Allow override.
-        onOver: ({ active, over }) => (Path.length(active.path) >= Path.length(over.path) ? 'adopt' : 'reject'),
+        onOver: ({ active, over }) => (Path.length(active.path) >= Path.length(over.path) ? 'transfer' : 'reject'),
         onDrop,
       }}
     >

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

@@ -36,7 +36,7 @@ export default {
   },
 };
 
-export const Adopt = {
+export const Transfer = {
   args: {
     Component: SimpleCard,
     debug: true,

package/src/views/Stack/testing.tsx

@@ -26,7 +26,7 @@ export const DemoStack = ({
   types,
   count = 8,
   direction = 'vertical',
-  operation = 'adopt',
+  operation = 'transfer',
   debug,
 }: DemoStackProps) => {
   const [items, setItems] = useState<MosaicDataItem[]>(() => {

package/src/views/Tree/Tree.tsx

@@ -15,8 +15,7 @@ import {
   useContainer,
   useMosaic,
   Path,
-  useSortedItems,
-  type MosaicCompareDataItem,
+  useItemsWithOrigin,
 } from '../../mosaic';
 
 // TODO(burdon): Tree data model that provides a pure abstraction of the plugin Graph.
@@ -27,7 +26,6 @@ import {
 export type TreeProps<TData extends MosaicDataItem = TreeData> = MosaicContainerProps<TData, number> & {
   items?: TData[];
   debug?: boolean;
-  compare?: MosaicCompareDataItem;
 };
 
 export type TreeData = {
@@ -37,7 +35,7 @@ export type TreeData = {
 };
 
 // TODO(burdon): Make generic (and forwardRef).
-export const Tree = ({ id, Component = TreeItem, onOver, onDrop, items = [], debug, compare }: TreeProps) => {
+export const Tree = ({ id, Component = TreeItem, onOver, onDrop, items = [], debug }: TreeProps) => {
   return (
     <Mosaic.Container
       {...{
@@ -46,7 +44,6 @@ export const Tree = ({ id, Component = TreeItem, onOver, onDrop, items = [], deb
         Component,
         onOver,
         onDrop,
-        compare,
       }}
     >
       <TreeRoot items={items} />
@@ -56,12 +53,12 @@ export const Tree = ({ id, Component = TreeItem, onOver, onDrop, items = [], deb
 
 const TreeRoot = ({ items }: { items: TreeData[] }) => {
   const { id, Component } = useContainer();
-  const sortedItems = useSortedItems(items);
+  const itemsWithOrigin = useItemsWithOrigin(id, items);
 
   return (
     <TreeComponent.Root classNames='flex flex-col'>
-      <Mosaic.SortableContext id={id} items={sortedItems} direction='vertical'>
-        {sortedItems.map((item, index) => (
+      <Mosaic.SortableContext id={id} items={itemsWithOrigin} direction='vertical'>
+        {itemsWithOrigin.map((item, index) => (
           <TreeItemComponent.Root key={item.id} collapsible defaultOpen>
             <Mosaic.SortableTile item={item} path={id} position={index} Component={Component!} />
           </TreeItemComponent.Root>
@@ -102,12 +99,12 @@ const TreeItem: MosaicTileComponent<TreeData> = forwardRef(
 const TreeBranch = ({ path, items }: { path: string; items: TreeData[] }) => {
   const { operation, overItem } = useMosaic();
   const { Component } = useContainer();
-  const sortedItems = useSortedItems(items);
+  const itemsWithOrigin = useItemsWithOrigin(path, items);
 
   return (
     <TreeItemComponent.Body className='pis-4'>
-      <Mosaic.SortableContext id={path} items={sortedItems} direction='vertical'>
-        {sortedItems.map((child, index) => (
+      <Mosaic.SortableContext id={path} items={itemsWithOrigin} direction='vertical'>
+        {itemsWithOrigin.map((child, index) => (
           <TreeComponent.Branch key={child.id}>
             <TreeItemComponent.Root collapsible defaultOpen>
               <Mosaic.SortableTile
@@ -116,7 +113,7 @@ const TreeBranch = ({ path, items }: { path: string; items: TreeData[] }) => {
                 position={index}
                 Component={Component!}
                 isOver={
-                  overItem?.path === Path.create(path, child.id) && (operation === 'adopt' || operation === 'copy')
+                  overItem?.path === Path.create(path, child.id) && (operation === 'transfer' || operation === 'copy')
                 }
               />
             </TreeItemComponent.Root>

package/src/views/Tree/testing.tsx

@@ -5,13 +5,13 @@
 import { faker } from '@faker-js/faker';
 import React, { useCallback, useState } from 'react';
 
-import { type Graph, GraphBuilder, type Node } from '@braneframe/plugin-graph';
-import { buildGraph } from '@braneframe/plugin-graph/testing';
+import { type Graph, GraphBuilder } from '@dxos/app-graph';
+import { buildGraph } from '@dxos/app-graph/testing';
 import { arrayMove } from '@dxos/util';
 
 import { Tree, type TreeData, type TreeProps } from './Tree';
-import { type MosaicDropEvent, type MosaicMoveEvent, Path } from '../../mosaic';
-import { TestObjectGenerator, nextRearrangeIndex } from '../../testing';
+import { type MosaicDropEvent, type MosaicMoveEvent, Path, type MosaicOperation } from '../../mosaic';
+import { TestObjectGenerator } from '../../testing';
 
 const fake = faker.helpers.fake;
 
@@ -47,8 +47,8 @@ export const DemoTree = ({ id = 'tree', initialItems, types, debug }: DemoTreePr
       }),
   );
 
-  const handleOver = useCallback(({ active, over }: MosaicMoveEvent<number>) => {
-    return !(active.path === id && over.path !== id) ? 'adopt' : 'reject';
+  const handleOver = useCallback(({ over }: MosaicMoveEvent<number>) => {
+    return over && Path.hasChild(id, over.path) ? 'transfer' : 'reject';
   }, []);
 
   // NOTE: Does not handle deep operations.
@@ -67,8 +67,8 @@ export const DemoTree = ({ id = 'tree', initialItems, types, debug }: DemoTreePr
             if (Path.last(Path.parent(active.path)) === item.id) {
               children.splice(active.position!, 1);
             }
-            if (Path.last(Path.parent(over.path)) === item.id) {
-              children.splice(over.position!, 0, active.item as TreeData);
+            if (Path.last(over.path) === item.id) {
+              children.push(active.item as TreeData);
             }
             return { ...item, children };
           }),
@@ -104,20 +104,7 @@ export const createGraph = () => {
   return buildGraph(new GraphBuilder().build(), 'tree', content);
 };
 
-const graphNodeCompare = (a: Node, b: Node) => {
-  if (a.properties.index && b.properties.index) {
-    if (a.properties.index < b.properties.index) {
-      return -1;
-    } else if (a.properties.index > b.properties.index) {
-      return 1;
-    }
-    return 0;
-  }
-  return 0;
-};
-
 export const GraphTree = ({ id, graph = createGraph(), debug }: { id: string; graph?: Graph; debug: boolean }) => {
-  // TODO(wittjosiah): This graph does not handle order currently.
   const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {
     // Moving within the tree.
     if (Path.hasDescendent(id, active.path) && Path.hasDescendent(id, over.path)) {
@@ -135,22 +122,17 @@ export const GraphTree = ({ id, graph = createGraph(), debug }: { id: string; gr
         operation === 'rearrange'
       ) {
         // This is a rearrange operation
-        const nextIndex = nextRearrangeIndex(activeParent.children.sort(graphNodeCompare), activeNode.id, overNode.id);
-        activeNode.properties.index = nextIndex ?? 'a0';
-      } else if (activeNode && activeParent && overParent && operation === 'adopt') {
+        console.warn('[react-ui-mosaic]', 'Tree', 'rearrange', 'needs implementation');
+      } else if (activeNode && activeParent && overParent && operation === 'transfer') {
         activeParent.removeNode(active.item.id);
         overNode.addNode('tree', { ...activeNode });
       }
     }
   };
 
+  const handleOver = (): MosaicOperation => 'transfer';
+
   return (
-    <Tree
-      id={id}
-      items={graph.root.children as TreeData[]}
-      onDrop={handleDrop}
-      debug={debug}
-      compare={graphNodeCompare}
-    />
+    <Tree id={id} items={graph.root.children as TreeData[]} onDrop={handleDrop} onOver={handleOver} debug={debug} />
   );
 };

package/dist/types/src/mosaic/hooks/useSortedItems.d.ts

@@ -1,6 +0,0 @@
-import { type MosaicDataItem } from '../types';
-/**
- * Returns a sorted collection of items if a compare function is provided.
- */
-export declare const useSortedItems: <T extends MosaicDataItem>(items: T[]) => T[];
-//# sourceMappingURL=useSortedItems.d.ts.map

package/dist/types/src/mosaic/hooks/useSortedItems.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSortedItems.d.ts","sourceRoot":"","sources":["../../../../../src/mosaic/hooks/useSortedItems.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,cAAc,+CAG1B,CAAC"}

package/dist/types/src/testing/next-fractional-index.d.ts

@@ -1,5 +0,0 @@
-import { type UniqueIdentifier } from '@dnd-kit/core';
-import { type Node } from '@braneframe/plugin-graph';
-export declare const nextRearrangeIndex: (nodes: Node[], activeId: UniqueIdentifier, overId?: UniqueIdentifier) => string | null;
-export declare const nextCopyIndex: (nodes: Node[], overId?: UniqueIdentifier) => string;
-//# sourceMappingURL=next-fractional-index.d.ts.map

package/dist/types/src/testing/next-fractional-index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"next-fractional-index.d.ts","sourceRoot":"","sources":["../../../../src/testing/next-fractional-index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAErD,eAAO,MAAM,kBAAkB,UAAW,IAAI,EAAE,YAAY,gBAAgB,WAAW,gBAAgB,kBAYtG,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,IAAI,EAAE,WAAW,gBAAgB,WAYrE,CAAC"}

package/src/mosaic/hooks/useSortedItems.ts

@@ -1,14 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { useContainer } from './useContainer';
-import { type MosaicDataItem } from '../types';
-
-/**
- * Returns a sorted collection of items if a compare function is provided.
- */
-export const useSortedItems = <T extends MosaicDataItem>(items: T[]): T[] => {
-  const { compare } = useContainer();
-  return compare ? [...items].sort(compare) : items;
-};

package/src/testing/next-fractional-index.ts

@@ -1,36 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type UniqueIdentifier } from '@dnd-kit/core';
-import { getIndexAbove, getIndexBelow, getIndexBetween } from '@tldraw/indices';
-
-import { type Node } from '@braneframe/plugin-graph';
-
-export const nextRearrangeIndex = (nodes: Node[], activeId: UniqueIdentifier, overId?: UniqueIdentifier) => {
-  const overOrderIndex = nodes.length > 0 ? nodes.findIndex(({ id }) => id === overId) : -1;
-  if (overOrderIndex >= 0) {
-    const activeOrderIndex = nodes.findIndex(({ id }) => id === activeId);
-    return overOrderIndex < 1
-      ? getIndexBelow(nodes[overOrderIndex].properties.index)
-      : activeOrderIndex < overOrderIndex
-      ? getIndexBetween(nodes[overOrderIndex].properties.index, nodes[overOrderIndex + 1]?.properties.index)
-      : getIndexBetween(nodes[overOrderIndex - 1].properties.index, nodes[overOrderIndex].properties.index);
-  } else {
-    return null;
-  }
-};
-
-export const nextCopyIndex = (nodes: Node[], overId?: UniqueIdentifier) => {
-  const overOrderIndex = nodes.length > 0 ? nodes.findIndex(({ id }) => id === overId) : -1;
-  const previewOrderIndex = nodes.findIndex(({ id }) => id.startsWith('preview--'));
-  if (overOrderIndex >= 0) {
-    return overOrderIndex < 1
-      ? getIndexBelow(nodes[overOrderIndex].properties.index)
-      : previewOrderIndex < overOrderIndex && previewOrderIndex >= 0
-      ? getIndexBetween(nodes[overOrderIndex].properties.index, nodes[overOrderIndex + 1]?.properties.index)
-      : getIndexBetween(nodes[overOrderIndex - 1].properties.index, nodes[overOrderIndex]?.properties.index);
-  } else {
-    return nodes.length ? getIndexAbove(nodes[nodes.length - 1].properties.index) : 'a0';
-  }
-};